Merge pull request #84 from lexintegritastech/improve-main-ui

Enhance UI for `subjects#offcanvas` and `doctrines#offcanvas`

app/components/doctrines_offcanvas_component.rb

@@ -0,0 +1,11 @@
+class DoctrinesOffcanvasComponent < BaseComponent
+  attr_reader :opts
+
+  def initialize(current_user:, opts: {})
+    @opts = opts
+  end
+
+  def render?
+    opts[:is_render].present?
+  end
+end

app/components/doctrines_offcanvas_component/doctrines_offcanvas_component.html.erb

@@ -0,0 +1,38 @@
+<div class="offcanvas offcanvas-start offcanvas-contents" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="doctrinesOffCanvas" data-controller="subjects">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title"> Doctrines </h5>
+    <hr class="m-0">
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+
+  <div class="offcanvas-body">
+    <div class="accordion accordion-flush subject-index-body" id="doctrinesOffCanvasMainAccordion" >
+      <% Cdao::Subject.roots.order(name: :asc).each do |root| %>
+        <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="#<%= ["doctrinesOffCanvasAccordion", root.id].join %>"
+                    data-controller="subjects" data-subject-parent-id="<%= root.id %>" 
+                    data-accordion-target="#<%= ['doctrinesOffCanvasAccordionBody', root.id].join %>"
+                    data-action="click->subjects#loadDoctrinesOffcanvasAccordion"> 
+                <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+              </div>
+            <% else %>
+              <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+            <% end %>
+          </div>
+
+          <div class="accordion-collapse collapse" id="<%= ["doctrinesOffCanvasAccordion", root.id].join %>" data-bs-parent="#doctrinesOffCanvasMainAccordion">
+            <div class="accordion-body pt-1 pb-1 sub-body1" id="<%= ["doctrinesOffCanvasAccordionBody", 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>
+      <% end %>
+    </div>
+  </div>
+</div>

app/components/sidenav_component/sidenav_component.html.erb

@@ -95,9 +95,7 @@
                 </a>
               </li>
               <li class="nav-item p-2">
-                <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas" 
+                <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas">
-                   data-controller="subjects" data-accordion-target="#doctrinesOffCanvasAccordionBody" 
-                   data-action="click->subjects#loadDoctrinesOffcanvasAccordion">
                   <i class="fas fa-book me-2"></i> Doctrines
                 </a>
               </li>

app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb

@@ -1,15 +1,38 @@
-<div class="offcanvas offcanvas-start offcanvas-contents" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="<%= opts[:element_id] %>" data-controller="subjects">
+<div class="offcanvas offcanvas-start offcanvas-contents" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas" data-controller="subjects">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title"> <%=opts[:header_title]%> </h5>
+    <h5 class="offcanvas-title"> Subjects </h5>
     <hr class="m-0">
     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
 
-  <div class="offcanvas-body" id="<%= opts[:accordion_body_id] %>">
+  <div class="offcanvas-body">
-    <div class="text-center">
+    <div class="accordion accordion-flush subject-index-body" id="subjectsOffCanvasMainAccordion" >
-      <div class="spinner-border text-danger" role="status">
+      <% Cdao::Subject.roots.order(name: :asc).each do |root| %>
-        <span class="visually-hidden">Loading...</span>
+        <div class="accordion-item">
-      </div>
+          <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="#<%= ["subjectsOffCanvasAccordion", root.id].join %>"
+                    data-controller="subjects" data-subject-parent-id="<%= root.id %>" 
+                    data-accordion-target="#<%= ['subjectsOffCanvasAccordionBody', root.id].join %>"
+                    data-action="click->subjects#loadSubjectsOffcanvasAccordion"> 
+                <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+              </div>
+            <% else %>
+              <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+            <% end %>
+          </div>
+
+          <div class="accordion-collapse collapse" id="<%= ["subjectsOffCanvasAccordion", root.id].join %>" data-bs-parent="#subjectsOffCanvasMainAccordion">
+            <div class="accordion-body pt-1 pb-1 sub-body1" id="<%= ["subjectsOffCanvasAccordionBody", 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>
+      <% end %>
     </div>
   </div>
 </div>

app/views/layouts/application.html.erb

@@ -41,21 +41,17 @@
     <%= render(SidenavComponent.new(current_user: current_user, opts: { is_nav_bar: true }))%>
     <div class="<%= params[:is_index_table].present? ? '': "d-none"%>">
       <% if params[:is_index_table] === "true" %>
-        <div class="for-side-button"  data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas" 
+        <div class="for-side-button"  data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas">
-        data-controller="subjects" data-accordion-target="#subjectsOffCanvasAccordionBody" 
-        data-action="click->subjects#loadSubjectsOffcanvasAccordion">
           <i class="fas fa-angle-right"></i>
         </div>  
       <% else %>
-        <div class="for-side-button" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas" 
+        <div class="for-side-button" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas">
-        data-controller="subjects" data-accordion-target="#doctrinesOffCanvasAccordionBody" 
-        data-action="click->subjects#loadDoctrinesOffcanvasAccordion">
           <i class="fas fa-angle-right"></i>
         </div>
       <% end %> 
     </div>    
     <%= 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" })) %>
+    <%= render(DoctrinesOffcanvasComponent.new(current_user: current_user, opts: { is_render: true })) %>
 
     <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-7 login-logo' %>">