Browse Source

Implement `subject_accordion_component` for `subject_indexes#index`

pull/52/head
alexdbondoc17 4 years ago
parent
commit
5e3664af47
  1. 4
      app/components/sidenav_component/sidenav_component.html.erb
  2. 5
      app/components/subject_accordion_component.rb
  3. 30
      app/components/subject_accordion_component/subject_accordion_component.html.erb
  4. 4
      app/views/layouts/application.html.erb
  5. 13
      app/views/subject_indexes/index.html.erb

4
app/components/sidenav_component/sidenav_component.html.erb

@ -89,14 +89,14 @@
</li>
<li class="nav-item p-2">
<a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas"
data-controller="subjects" data-accordion-for="subjects" data-accordion-target="#subjectsAccordionBody"
data-controller="subjects" data-accordion-for="subjects" data-accordion-target="#subjectsOffCanvasAccordionBody"
data-action="click->subjects#loadSubjectsAccordion">
<i class="fas fa-indent me-2"></i> Subjects
</a>
</li>
<li class="nav-item p-2">
<a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas"
data-controller="subjects" data-accordion-for="doctrines" data-accordion-target="#doctrinesAccordionBody"
data-controller="subjects" data-accordion-for="doctrines" data-accordion-target="#doctrinesOffCanvasAccordionBody"
data-action="click->subjects#loadSubjectsAccordion">
<i class="fas fa-book me-2"></i> Doctrines
</a>

5
app/components/subject_accordion_component.rb

@ -22,8 +22,9 @@ class SubjectAccordionComponent < BaseComponent
end
def accordion_body_id
accordion_body = opts[:accordionFor].present? && opts[:accordionFor].to_s.eql?("subjects") ? "subjectsAccordionBody" : "doctrinesAccordionBody"
return ["subjectsAccordionBody", search_result["id"]].join if opts[:accordionFor].blank?
accordion_body = opts[:accordionFor].to_s.eql?("subjects") ? "subjectsOffCanvasAccordionBody" : "doctrinesOffCanvasAccordionBody"
[accordion_body, search_result["id"]].join
end
@ -31,7 +32,7 @@ class SubjectAccordionComponent < BaseComponent
return search_doctrines_path(subject_ids: [search_result["id"]], is_index_table: true) if opts[:accordionFor].present? && opts[:accordionFor].to_s.eql?("subjects")
return search_doctrines_path(subject_ids: [search_result["id"]], is_index_table: false) if opts[:accordionFor].present? && opts[:accordionFor].to_s.eql?("doctrines")
return subject_index_path(search_result["id"]).blank?
subject_index_path(search_result["id"])
end
end

30
app/components/subject_accordion_component/subject_accordion_component.html.erb

@ -1,3 +1,4 @@
<% if opts[:accordionFor].present? %>
<div class="accordion accordion-flash" id="<%= parent_accordion_id %>">
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
@ -24,3 +25,32 @@
</div>
</div>
</div>
<% else %>
<div class="accordion accordion-flash" id="<%= parent_accordion_id %>">
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if search_result["has_children?"].present? %>
<div class="accordion-button collapsed m-0 p-0 sub-label<%= search_result["heirarchy_level"] + 1 %>" data-bs-toggle="collapse" data-bs-target="#<%= children_accordion_id %>"
data-controller="subjects" data-accordion-id="<%= children_accordion_id %>" data-subject-parent-id="<%= search_result["id"] %>"
data-accordion-target="#<%= accordion_body_id %>" data-action="click->subjects#loadSubjectsAccordion">
<%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub#{search_result["heirarchy_level"] + 1} clickable-link" %>
<%= link_to "Add Sub Level", new_subject_index_path(parent_id: search_result["id"]), class: "btn btn-success text-decoration-none d-block sub#{search_result["heirarchy_level"]} clickable-link position-absolute end-0 me-5" %>
</div>
<% else %>
<%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub#{search_result["heirarchy_level"] + 1} clickable-link" %>
<%= link_to "Add Sub Level", new_subject_index_path(parent_id: search_result["id"]), class: "btn btn-success text-decoration-none d-block sub#{search_result["heirarchy_level"]} clickable-link position-absolute end-0 me-5" %>
<% end %>
</div>
<div class="accordion-collapse collapse" id="<%= children_accordion_id %>" data-bs-parent="#<%= parent_accordion_id %>">
<div class="accordion-body pt-1 sub-body<%= search_result["heirarchy_level"] + 1 %> pb-1" id="<%= accordion_body_id %>">
<div class="text-center">
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>

4
app/views/layouts/application.html.erb

@ -14,8 +14,8 @@
<body class="<%= current_user.present? ? 'container-fluid h-100 w-100 p-0' : 'container-fluid h-100 w-100 p-0 sessions-body-bg' %> " data-controller="selectize">
<%= render(SidenavComponent.new(current_user: current_user, opts: { is_nav_bar: true }))%>
<%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Subjects", element_id: "subjectsOffCanvas", accordion_body_id: "subjectsAccordionBody" })) %>
<%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Doctrines", element_id: "doctrinesOffCanvas", accordion_body_id: "doctrinesAccordionBody" })) %>
<%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Subjects", element_id: "subjectsOffCanvas", accordion_body_id: "subjectsOffCanvasAccordionBody" })) %>
<%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Doctrines", element_id: "doctrinesOffCanvas", accordion_body_id: "doctrinesOffCanvasAccordionBody" })) %>
<div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-end align-items-center' %>">
<div class="<%= current_user.present? ? 'd-none' : 'col-sm-8 login-logo' %>">

13
app/views/subject_indexes/index.html.erb

@ -2,14 +2,16 @@
<div class="col-sm-12">
<div class="card">
<div class="card-header"> <h2> Subjects </h2> </div>
<div class="card-body">
<% Cdao::Subject.roots.order(name: :asc).each do |root| %>
<div class="accordion accordion-flash" id="mainPanel<%= root.id %>">
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if root.children.present? %>
<div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>">
<div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>"
data-controller="subjects" data-accordion-id="<%= ["subjectsAccordion", root.id].join %>"
data-subject-parent-id="<%= root.id %>" data-accordion-target="#<%= ['subjectsAccordionBody', root.id].join %>"
data-action="click->subjects#loadSubjectsAccordion">
<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
<%= link_to "Add Sub Level", new_subject_index_path(parent_id: root.id), class: "btn btn-success text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
</div>
@ -20,7 +22,12 @@
</div>
<div class="accordion-collapse collapse" id="<%= ["rootLevel", root.id].join %>" data-bs-parent="#mainPanel<%= root.id %>">
<div class="accordion-body pt-1 pb-1">
<div class="accordion-body pt-1 pb-1" id="<%= ['subjectsAccordionBody', root.id].join %>">
<div class="text-center">
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save