From 763add5169488b8347ed12bbfe7cf798337ad5d0 Mon Sep 17 00:00:00 2001
From: alexdbondoc17 <alexdbondoc17@gmail.com>
Date: Tue, 22 Feb 2022 03:46:58 +0000
Subject: [PATCH 1/4] Improve UI for `decisions`

---
 app/views/decisions/index.html.erb | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/views/decisions/index.html.erb b/app/views/decisions/index.html.erb
index c125eeb..339f1e6 100644
--- a/app/views/decisions/index.html.erb
+++ b/app/views/decisions/index.html.erb
@@ -1,6 +1,15 @@
-<div class="card container-sm mt-1 p-0"> 
-  <h4 class="card-header"> Select Year </h4>
-  <div class="card-body table-responsive p-0">
-    <%= render(DocumentsYearsComponent.new(current_user: current_user, years: @years)) %>
+<div class="container-fluid row p-0 m-0">
+  <div class="container col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3" >
+    <div class="advanced-search-box">
+      <%= render(DocumentAdvancedSearchComponent.new(current_user: current_user,  opts: {})) %>
+    </div>
   </div>
-<div>
+  <div class="container col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9"> 
+    <div class="card container-sm mt-1 p-0"> 
+      <h4 class="card-header"> Select Year </h4>
+      <div class="card-body table-responsive p-0">
+        <%= render(DocumentsYearsComponent.new(current_user: current_user, years: @years)) %>
+      </div>
+    <div>
+  </div>
+</div>

From 703b20b2811e98348ae277c9e7995cbac43eceb1 Mon Sep 17 00:00:00 2001
From: alexdbondoc17 <alexdbondoc17@gmail.com>
Date: Tue, 22 Feb 2022 05:06:43 +0000
Subject: [PATCH 2/4] Fix `routing` for `doctrines`

---
 app/components/subject_accordion_component.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/subject_accordion_component.rb b/app/components/subject_accordion_component.rb
index e4bd1cb..45d10ca 100644
--- a/app/components/subject_accordion_component.rb
+++ b/app/components/subject_accordion_component.rb
@@ -28,8 +28,8 @@ class SubjectAccordionComponent < BaseComponent
   end
 
   def custom_url
-    return search_doctrines_path(subject_ids: [search_result["id"]], is_index_table: false) if opts[:accordionFor].present? && opts[:accordionFor].to_s.eql?("subjects")
-    return search_doctrines_path(subject_ids: [search_result["id"]], is_index_table: true) if opts[:accordionFor].present? && opts[:accordionFor].to_s.eql?("doctrines")
+    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?
   end

From 359f084f77e6e86bb455dd438e2bd4d75c075214 Mon Sep 17 00:00:00 2001
From: alexdbondoc17 <alexdbondoc17@gmail.com>
Date: Tue, 22 Feb 2022 08:23:21 +0000
Subject: [PATCH 3/4] Enhance background of buttons

---
 .../analysis_form_component.html.erb                 |  4 ++--
 .../annotation_marks_modal_form_component.html.erb   |  6 +++---
 .../doctrine_modal_form_component.html.erb           |  4 ++--
 .../document_doctrine_show_component.html.erb        | 12 ++++++------
 .../subject_index_form_component.html.erb            |  4 ++--
 .../_document_search_results_table.html.erb          |  4 ++--
 app/views/document/doctrines/show.html.erb           |  2 +-
 app/views/documents/show.html.erb                    |  2 +-
 app/views/subject_indexes/index.html.erb             |  4 ++--
 app/views/subject_indexes/show.html.erb              |  6 +++---
 10 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/app/components/analysis_form_component/analysis_form_component.html.erb b/app/components/analysis_form_component/analysis_form_component.html.erb
index 49b9f74..85f5411 100644
--- a/app/components/analysis_form_component/analysis_form_component.html.erb
+++ b/app/components/analysis_form_component/analysis_form_component.html.erb
@@ -17,7 +17,7 @@
 
           <div class="row">
             <div class="col-sm-11 p-2">
-              <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button>
+              <button type="button" class="btn btn-success" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button>
             </div>
           </div>
 
@@ -28,7 +28,7 @@
               </div>
 
               <div class="col-sm-1 p-2">
-                <%= button_tag "search", class: "btn btn-primary" %>
+                <%= button_tag "search", class: "btn btn-success" %>
               </div>
             </div>
 
diff --git a/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb b/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb
index d38c43b..a83afdd 100644
--- a/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb
+++ b/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb
@@ -32,7 +32,7 @@
             <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number", data: { target: "annotations.q" } %>
           </div>
           <div class="col-sm-1 p-2">
-            <button type="button" class="btn btn-primary" data-action="click->annotations#searchDocument"> Search </button>
+            <button type="button" class="btn btn-success" data-action="click->annotations#searchDocument"> Search </button>
           </div>
         </div>
 
@@ -65,8 +65,8 @@
       </div>
 
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-action="click->annotations#save"> Save </button>
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-success" data-action="click->annotations#save"> Save </button>
+        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
diff --git a/app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb b/app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb
index de157f1..4ba6b7c 100644
--- a/app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb
+++ b/app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb
@@ -30,8 +30,8 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-action="click->doctrines#save">Save</button>
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-success" data-action="click->doctrines#save">Save</button>
+        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
diff --git a/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb b/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb
index dfc2acf..1ea7ef0 100644
--- a/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb
+++ b/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb
@@ -6,8 +6,8 @@
   </div>
 
   <div class="col-sm-2 d-flex justify-content-end pe-0" data-controller="doctrines" data-document-id="<%= document_id %>" data-doctrine-id="<%= id %>" >
-    <a class="btn btn-sm btn-secondary me-3"data-action="click->doctrines#renderForm" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Edit </a>
-    <a class="btn btn-sm btn-danger" data-action="click->doctrines#delete" > Delete </a>
+    <a class="btn btn-success me-3"data-action="click->doctrines#renderForm" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Edit </a>
+    <a class="btn btn-danger" data-action="click->doctrines#delete" > Delete </a>
   </div>
 </div>
 
@@ -51,7 +51,7 @@
   <div class="row">
     <div class="col-sm-10"> </div>
     <div class="col-sm-2 p-2">
-      <button type="button" class="btn btn-primary d-block ms-auto" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button>
+      <button type="button" class="btn btn-success d-block ms-auto" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button>
     </div>
   </div>
 
@@ -61,7 +61,7 @@
         <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number", data: { target: "document.input" } %>
       </div>
       <div class="col p-2">
-        <%= button_tag "Search", class: "btn btn-primary", data: { action: "click->document#search" } %>
+        <%= button_tag "Search", class: "btn btn-success", data: { action: "click->document#search" } %>
       </div>
     </div>
       
@@ -104,11 +104,11 @@
           </div>
 
           <div class="col-sm-2 d-flex justify-content-end align-items-baseline">
-            <a class="btn btn-sm btn-secondary me-3" data-bs-toggle="modal" data-bs-target="#annotationModal" 
+            <a class="btn btn-secondary me-3" data-bs-toggle="modal" data-bs-target="#annotationModal" 
                 data-controller="annotations" data-doctrine-id="<%= id %>" data-annotation-id="<%= annotation.id %>" 
                 data-document-title="<%= citing_document_title %>" 
                 data-action="click->annotations#renderForm"> Edit </a>
-            <a class="btn btn-sm btn-danger" href="<%= doctrine_annotation_path(doctrine.id, annotation.id) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
+            <a class="btn btn-danger" href="<%= doctrine_annotation_path(doctrine.id, annotation.id) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
           </div>
         </div>
 
diff --git a/app/components/subject_index_form_component/subject_index_form_component.html.erb b/app/components/subject_index_form_component/subject_index_form_component.html.erb
index e028680..ceca007 100644
--- a/app/components/subject_index_form_component/subject_index_form_component.html.erb
+++ b/app/components/subject_index_form_component/subject_index_form_component.html.erb
@@ -18,8 +18,8 @@
 
 	<div class="row">
 		<div class="col-sm-12 d-flex justify-content-end p-2">
-			<%= submit_tag "Save", class: "btn btn-primary" %>
-			<button type="button" class="btn btn-secondary" href="<%= subject_indexes_path() %>"> Back </button>
+			<%= submit_tag "Save", class: "btn btn-success" %>
+			<button type="button" class="btn btn-danger" href="<%= subject_indexes_path() %>"> Back </button>
 		</div>
 	</div>
 <% end %>
diff --git a/app/views/document/doctrines/_document_search_results_table.html.erb b/app/views/document/doctrines/_document_search_results_table.html.erb
index 07a55c3..d517b28 100644
--- a/app/views/document/doctrines/_document_search_results_table.html.erb
+++ b/app/views/document/doctrines/_document_search_results_table.html.erb
@@ -8,7 +8,7 @@
       <td>
         <% date_or_year = search_result.doc_date || search_result.year %>
         <% title = search_result.short_title || search_result.title %>
-        <a class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#annotationModal" data-controller="annotations" 
+        <a class="btn btn-success" data-bs-toggle="modal" data-bs-target="#annotationModal" data-controller="annotations" 
            data-doctrine-id="<%= opts[:doctrine_id] %>" data-document-id="<%= search_result.id %>" data-document-title="<%= title %>"
            data-document-reference-number="<%= search_result.clean_reference_number %>" data-document-date-or-year="<%= date_or_year %>" 
            data-document-phil-rep="<%= search_result.phil_rep %>" data-action="click->annotations#renderForm"> 
@@ -19,7 +19,7 @@
 
     <% if opts[:is_citing_document].present? %>
       <td> 
-        <a class="btn btn-sm btn-primary" data-controller="annotations" data-document-id="<%= search_result.id %>"
+        <a class="btn btn-success" data-controller="annotations" data-document-id="<%= search_result.id %>"
            data-document-reference-number="<%= search_result.clean_reference_number %>" 
            data-document-date="<%= search_result.doc_date || search_result.year %>"
            data-document-title="<%= search_result.short_title || search_result.title %>"
diff --git a/app/views/document/doctrines/show.html.erb b/app/views/document/doctrines/show.html.erb
index 42777d1..a9229ec 100644
--- a/app/views/document/doctrines/show.html.erb
+++ b/app/views/document/doctrines/show.html.erb
@@ -20,7 +20,7 @@
   <div class="card-body pt-0">
     <div class="row">
       <div class="d-flex justify-content-end p-2">
-        <a class="btn btn-sm btn-primary" data-controller="doctrines" data-document-id="<%= @document.id %>" data-action="click->doctrines#renderForm" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Add Doctrine </a>
+        <a class="btn btn-success" data-controller="doctrines" data-document-id="<%= @document.id %>" data-action="click->doctrines#renderForm" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Add Doctrine </a>
       </div>
     </div>
 
diff --git a/app/views/documents/show.html.erb b/app/views/documents/show.html.erb
index 3679071..feae561 100644
--- a/app/views/documents/show.html.erb
+++ b/app/views/documents/show.html.erb
@@ -60,7 +60,7 @@
           <div class="tab-pane fade show active" id="analysisTabContent" role="tabpanel" aria-labelledby="home-tab">
             <div class="row">
               <div class="d-flex justify-content-end" style="margin: 10px 0 0 -20px;">
-                <a class="btn btn-sm btn-primary" data-controller="doctrines" data-document-id="<%= @document.id %>" data-action="click->doctrines#renderForm" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Add Doctrine </a>
+                <a class="btn btn-success" data-controller="doctrines" data-document-id="<%= @document.id %>" data-action="click->doctrines#renderForm" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Add Doctrine </a>
               </div>
               <div class="container-sm row-flex col-sm-12 mt-2">
                 <%= render(DoctrineModalFormComponent.new(current_user: current_user)) %>
diff --git a/app/views/subject_indexes/index.html.erb b/app/views/subject_indexes/index.html.erb
index e937cba..65f9df3 100644
--- a/app/views/subject_indexes/index.html.erb
+++ b/app/views/subject_indexes/index.html.erb
@@ -11,11 +11,11 @@
 								<% if root.children.present? %>
 									<div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>"> 
 										<%= 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-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
+										<%= 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>
 								<% else %>
 									<%= 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-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
+									<%= 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 accordion-action-button-margin" %>
 								<% end %>
 							</div>
 
diff --git a/app/views/subject_indexes/show.html.erb b/app/views/subject_indexes/show.html.erb
index ceb82a5..d4fb851 100644
--- a/app/views/subject_indexes/show.html.erb
+++ b/app/views/subject_indexes/show.html.erb
@@ -24,8 +24,8 @@
       </div>
 
       <div class="col-sm-2 position-relative">
-        <a class="btn btn-sm btn-secondary m-1" href="<%= edit_subject_index_path(@subject_index) %>"> Edit </a>
-        <a class="btn btn-sm btn-danger m-1" href="<%= subject_index_path(@subject_index) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
+        <a class="btn btn-secondary m-1" href="<%= edit_subject_index_path(@subject_index) %>"> Edit </a>
+        <a class="btn btn-danger m-1" href="<%= subject_index_path(@subject_index) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
       </div>
     </div>
   </div>
@@ -34,7 +34,7 @@
       <div class="card-header">
         <div class="row">
           <div class="col-sm-11"> <h4> Sub Levels </h4> </div>
-          <div class="col-sm-1 justify-content-end"> <a class="btn btn-sm btn-primary p-1" href="<%= new_subject_index_path(parent_id: @subject_index) %>"> Add </a> </div>
+          <div class="col-sm-1 justify-content-end"> <a class="btn btn-success p-1" href="<%= new_subject_index_path(parent_id: @subject_index) %>"> Add </a> </div>
         </div>
       </div>
       <div class="card-body">

From 5e3664af47207cc73aafb66ff0ce671d46a8b6f6 Mon Sep 17 00:00:00 2001
From: alexdbondoc17 <alexdbondoc17@gmail.com>
Date: Tue, 22 Feb 2022 11:33:24 +0000
Subject: [PATCH 4/4] Implement `subject_accordion_component` for
 `subject_indexes#index`

---
 .../sidenav_component.html.erb                |  4 +-
 app/components/subject_accordion_component.rb |  5 +-
 .../subject_accordion_component.html.erb      | 66 ++++++++++++++-----
 app/views/layouts/application.html.erb        |  4 +-
 app/views/subject_indexes/index.html.erb      | 13 +++-
 5 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/app/components/sidenav_component/sidenav_component.html.erb b/app/components/sidenav_component/sidenav_component.html.erb
index a0c8e1a..fa2fd91 100644
--- a/app/components/sidenav_component/sidenav_component.html.erb
+++ b/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>
diff --git a/app/components/subject_accordion_component.rb b/app/components/subject_accordion_component.rb
index 45d10ca..ecd2501 100644
--- a/app/components/subject_accordion_component.rb
+++ b/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
   
\ No newline at end of file
diff --git a/app/components/subject_accordion_component/subject_accordion_component.html.erb b/app/components/subject_accordion_component/subject_accordion_component.html.erb
index 4149cf0..b68cdf5 100644
--- a/app/components/subject_accordion_component/subject_accordion_component.html.erb
+++ b/app/components/subject_accordion_component/subject_accordion_component.html.erb
@@ -1,26 +1,56 @@
-<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-accordion-for="<%= opts[:accordionFor] %>" 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" %>
+<% 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">
+        <% 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-accordion-for="<%= opts[:accordionFor] %>" 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" %>
+          </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" %>
+        <% 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>
-      <% 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" %>
-      <% end %>
+      </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 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>
-</div>
+<% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 346eec0..57c5595 100644
--- a/app/views/layouts/application.html.erb
+++ b/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' %>">
diff --git a/app/views/subject_indexes/index.html.erb b/app/views/subject_indexes/index.html.erb
index 65f9df3..b5bf9cb 100644
--- a/app/views/subject_indexes/index.html.erb
+++ b/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>