Fix bug for `accordion`

app/components/doctrines_offcanvas_accordion_component.rb

@@ -0,0 +1,39 @@
+class DoctrinesOffcanvasAccordionComponent < BaseComponent
+  with_collection_parameter :search_result
+  attr_reader :search_result, :opts
+
+  def initialize(search_result:, current_user:, opts: {})
+    @search_result = search_result
+    @opts = opts
+  end
+
+  def accordion_name
+    "doctrinesOffCanvasAccordion"
+  end
+
+  def accordion_body_name
+    "doctrinesOffCanvasAccordionBody"
+  end
+  
+  def parent_accordion_id
+    return accordion_body_name if search_result["parent_id"].blank?
+
+    [accordion_name, search_result["parent_id"]].join
+  end
+
+  def children_accordion_id
+    [accordion_name, search_result["heirarchy_level"], search_result["id"]].join
+  end
+
+  def accordion_id
+    [accordion_name, search_result["id"]].join
+  end
+
+  def accordion_body_id
+    [accordion_body_name, search_result["id"]].join
+  end
+
+  def index_url
+    search_doctrines_path(subject_ids: [search_result["id"]], is_index_table: true)
+  end
+end

app/components/doctrines_offcanvas_accordion_component/doctrines_offcanvas_accordion_component.html.erb

@@ -0,0 +1,25 @@
+<div class="accordion accordion-flush offcanvas-item" id="<%= 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-subject-parent-id="<%= search_result["id"] %>" data-accordion-target="#<%= accordion_body_id %>" 
+            data-action="click->subjects#loadSubjectsOffcanvasAccordion"> 
+          <%= link_to search_result["name"], index_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"], index_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="#<%= 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>

app/components/sidenav_component/sidenav_component.html.erb

@@ -89,15 +89,15 @@
               </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="#subjectsOffCanvasAccordionBody" 
+                   data-controller="subjects" data-accordion-target="#subjectsOffCanvasAccordionBody" 
-                   data-action="click->subjects#loadSubjectsAccordion">
+                   data-action="click->subjects#loadSubjectsOffcanvasAccordion">
                   <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="#doctrinesOffCanvasAccordionBody" 
+                   data-controller="subjects" data-accordion-target="#doctrinesOffCanvasAccordionBody" 
-                   data-action="click->subjects#loadSubjectsAccordion">
+                   data-action="click->subjects#loadDoctrinesOffcanvasAccordion">
                   <i class="fas fa-book me-2"></i> Doctrines
                 </a>
               </li>

app/components/subject_accordion_component.rb

@@ -1,38 +0,0 @@
-class SubjectAccordionComponent < BaseComponent
-  with_collection_parameter :search_result
-  attr_reader :search_result, :opts
-
-  def initialize(search_result:, current_user:, opts: {})
-    @search_result = search_result
-    @opts = opts
-  end
-  
-  def parent_accordion_id
-    return "subjectsAccordion" if search_result["parent_id"].blank?
-
-    ["subjectsAccordion", search_result["parent_id"]].join
-  end
-
-  def children_accordion_id
-    ["subjectsAccordion", search_result["id"]].join
-  end
-
-  def accordion_id
-    ["subjectsAccordion", search_result["id"]].join
-  end
-
-  def accordion_body_id
-    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
-
-  def custom_url
-    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")
-
-    subject_index_path(search_result["id"])
-  end
-end
-  

app/components/subject_accordion_component/subject_accordion_component.html.erb

@@ -1,56 +0,0 @@
-<% if opts[:accordionFor].present? %>
-  <div class="accordion accordion-flash offcanvas-item" id="<%= parent_accordion_id %>">
-    <div class="accordion-item">
-      <div class="accordion-header d-flex justify-content-between adadadeqe" id="<%= children_accordion_id %>">
-        <% 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>
-      </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" id="<%= children_accordion_id %>">
-        <% 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 '<i class="fas fa-folder-plus"></i>'.html_safe, new_subject_index_path(parent_id: search_result["id"]), class: "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 '<i class="fas fa-folder-plus"></i>'.html_safe, new_subject_index_path(parent_id: search_result["id"]), class: "text-decoration-none d-block sub#{search_result["heirarchy_level"]} clickable-link position-absolute end-0 non-toggle" %>
-        <% 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-0" 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 %>

app/components/subjects_accordion_component.rb

@@ -0,0 +1,38 @@
+class SubjectsAccordionComponent < BaseComponent
+  with_collection_parameter :search_result
+  attr_reader :search_result, :opts
+
+  def initialize(search_result:, current_user:, opts: {})
+    @search_result = search_result
+    @opts = opts
+  end
+
+  def accordion_name
+    "subjectsAccordion"
+  end
+
+  def accordion_body_name
+    "subjectsAccordionBody"
+  end
+  
+  def parent_accordion_id
+    [accordion_name, search_result["parent_id"]].join
+  end
+
+  def children_accordion_id
+    [accordion_name, search_result["heirarchy_level"], search_result["id"]].join
+  end
+
+  def accordion_id
+    [accordion_name, search_result["id"]].join
+  end
+
+  def accordion_body_id
+    [accordion_body_name, search_result["id"]].join
+  end
+
+  def custom_url
+    subject_index_path(search_result["id"])
+  end
+end
+  

app/components/subjects_accordion_component/subjects_accordion_component.html.erb

@@ -0,0 +1,27 @@
+<div class="accordion accordion-flush" id="<%= 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-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 '<i class="fas fa-folder-plus"></i>'.html_safe, new_subject_index_path(parent_id: search_result["id"]), class: "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 '<i class="fas fa-folder-plus"></i>'.html_safe, new_subject_index_path(parent_id: search_result["id"]), class: "text-decoration-none d-block sub#{search_result["heirarchy_level"]} clickable-link position-absolute end-0 non-toggle" %>
+      <% end %>
+    </div>
+
+    <div class="accordion-collapse collapse" id="<%= children_accordion_id %>" data-bs-parent="#<%= accordion_id %>">
+      <div class="accordion-body pt-1 sub-body<%= search_result["heirarchy_level"] + 1 %> pb-0" 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>

app/components/subjects_offcanvas_accordion_component.rb

@@ -0,0 +1,39 @@
+class SubjectsOffcanvasAccordionComponent < BaseComponent
+  with_collection_parameter :search_result
+  attr_reader :search_result, :opts
+
+  def initialize(search_result:, current_user:, opts: {})
+    @search_result = search_result
+    @opts = opts
+  end
+
+  def accordion_name
+    "subjectsOffCanvasAccordion"
+  end
+
+  def accordion_body_name
+    "subjectsOffCanvasAccordionBody"
+  end
+  
+  def parent_accordion_id
+    return accordion_body_name if search_result["parent_id"].blank?
+
+    [accordion_name, search_result["parent_id"]].join
+  end
+
+  def children_accordion_id
+    [accordion_name, search_result["heirarchy_level"], search_result["id"]].join
+  end
+
+  def accordion_id
+    [accordion_name, search_result["id"]].join
+  end
+
+  def accordion_body_id
+    [accordion_body_name, search_result["id"]].join
+  end
+
+  def index_url
+    search_doctrines_path(subject_ids: [search_result["id"]], is_index_table: true)
+  end
+end

app/components/subjects_offcanvas_accordion_component/subjects_offcanvas_accordion_component.html.erb

@@ -0,0 +1,25 @@
+<div class="accordion accordion-flush offcanvas-item" id="<%= 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-subject-parent-id="<%= search_result["id"] %>" data-accordion-target="#<%= accordion_body_id %>" 
+            data-action="click->subjects#loadSubjectsOffcanvasAccordion"> 
+          <%= link_to search_result["name"], index_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"], index_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="#<%= 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>

app/javascript/controllers/application_controller.js

@@ -5,10 +5,8 @@ import { end } from '@popperjs/core'
 
 require("selectize/dist/js/selectize.min");
 require("selectize/dist/css/selectize");
-require("bootstrap/dist/js/bootstrap")
 
 import Selectize from "selectize";
-import Bootstrap from 'bootstrap';
 
 /* This is your ApplicationController.
  * All StimulusReflex controllers should inherit from this class.
@@ -23,6 +21,22 @@ import Bootstrap from 'bootstrap';
  */
 export default class extends Controller {
   connect () {
+    $(".clickable-link").on("click", function (e) {
+      e.preventDefault();
+  
+      let $href = $(this).attr("href");
+      if ($href !== undefined) {
+        window.location.href = $href;
+      }
+    });
+  
+    $(".clickable-tr").on("click", function () {
+      let $href = $(this).attr("href");
+      if ($href !== undefined) {
+        window.open($href);
+      }
+    })
+
     StimulusReflex.register(this)
   }
 

app/javascript/controllers/subjects_controller.js

@@ -9,13 +9,14 @@ export default class extends ApplicationController {
         opts = { parent_accordion_id: $this.element.dataset["accordionId"], accordionTarget: $this.element.dataset["accordionTarget"],
                  accordionFor: $this.element.dataset["accordionFor"] }
 
+    console.log(opts)
     if (parent_id !== null && parent_id !== undefined && parent_id !== "") {
       params.parent_id = parent_id
     } else {
       params.is_root = true
     }
 
-    if ($(opts.accordionTarget).find(".accordion-flash").length === 0) {
+    if ($(opts.accordionTarget).find(".accordion-flush").length === 0) {
       $.get("/api/subjects.json", params, function (search_results, status) {
         if (status === "success") {
           $this.stimulate("SubjectsReflex#render_subjects_accordion", search_results, opts)
@@ -23,4 +24,44 @@ export default class extends ApplicationController {
       })
     }
   }
+
+  loadSubjectsOffcanvasAccordion() {
+    var $this = this, params = { per_page: 10000 }, parent_id = $this.element.dataset["subjectParentId"],
+        opts = { accordionTarget: $this.element.dataset["accordionTarget"] }
+
+    console.log(opts)
+    if (parent_id !== null && parent_id !== undefined && parent_id !== "") {
+      params.parent_id = parent_id
+    } else {
+      params.is_root = true
+    }
+
+    if ($(opts.accordionTarget).find(".accordion-flush").length === 0) {
+      $.get("/api/subjects.json", params, function (search_results, status) {
+        if (status === "success") {
+          $this.stimulate("SubjectsReflex#render_subjects_offcanvas_accordion", search_results, opts)
+        }
+      })
+    }
+  }
+
+  loadDoctrinesOffcanvasAccordion() {
+    var $this = this, params = { per_page: 10000 }, parent_id = $this.element.dataset["subjectParentId"],
+        opts = { accordionTarget: $this.element.dataset["accordionTarget"] }
+
+    console.log(opts)
+    if (parent_id !== null && parent_id !== undefined && parent_id !== "") {
+      params.parent_id = parent_id
+    } else {
+      params.is_root = true
+    }
+
+    if ($(opts.accordionTarget).find(".accordion-flush").length === 0) {
+      $.get("/api/subjects.json", params, function (search_results, status) {
+        if (status === "success") {
+          $this.stimulate("SubjectsReflex#render_doctrines_offcanvas_accordion", search_results, opts)
+        }
+      })
+    }
+  }
 }

app/javascript/packs/application.js

@@ -36,44 +36,12 @@ $(document).on("ready turbolinks:load", function () {
     $('#sidenav').toggleClass('active');
   });
 
-  $(".clickable-link").on("click", function (e) {
-    e.preventDefault();
-
-    let $href = $(this).attr("href");
-    if ($href !== undefined) {
-      window.location.href = $href;
-    }
-  });
-
-  $(".clickable-tr").on("click", function () {
-    let $href = $(this).attr("href");
-    if ($href !== undefined) {
-      window.open($href);
-    }
-  })
-
   var default_config = { altFormat: "m/d/Y", altInput: true, enableTime: false, dateFormat: "Y-m-d", isMobile: true };
   $('.default-flatpickr').flatpickr(default_config);
 
   if ($.fn.footnotes) {
     $('#documentTabContent').footnotes()
   }
-
-  $(document).on('click', 'a[href="#footnotes"]', function(event){
-    event.preventDefault();
-    $(this).each(function(){
-      var a, b, c, d;
-      a = $(this), b = a.attr('href'), c = a.text(), d = '#footnote' + c
-      a.attr('href', d), a.attr('id', 'fn' + c)
-      a.trigger('click')
-    })
-  }).on('click', 'a[href^="#footnote"], a[href^="#fn"]', function(event){
-    var a, b;
-    a = $(this), b = $(a.attr('href'))
-    if(b.length<=0)return
-    event.preventDefault()
-    $(document).wrap('<span class="footnote-x"></span>')
-  })
 });
 
 import "channels"

app/reflexes/subjects_reflex.rb

@@ -4,4 +4,12 @@ class SubjectsReflex < ApplicationReflex
   def render_subjects_accordion(search_results, opts = {})
     morph opts[:accordionTarget], render(partial: "/shared/subjects_accordion", locals: { search_results: search_results, opts: opts })
   end
+
+  def render_subjects_offcanvas_accordion(search_results, opts)
+    morph opts[:accordionTarget], render(partial: "/shared/subjects_offcanvas_accordion", locals: { search_results: search_results, opts: opts })
+  end
+
+  def render_doctrines_offcanvas_accordion(search_results, opts)
+    morph opts[:accordionTarget], render(partial: "/shared/doctrines_offcanvas_accordion", locals: { search_results: search_results, opts: opts })
+  end
 end

app/views/shared/_doctrines_offcanvas_accordion.html.erb

@@ -0,0 +1 @@
+<%= render(DoctrinesOffcanvasAccordionComponent.with_collection(search_results, current_user: current_user, opts: opts)) %>

app/views/shared/_subjects_accordion.html.erb

@@ -1 +1 @@
-<%= render(SubjectAccordionComponent.with_collection(search_results, current_user: current_user, opts: opts)) %>
+<%= render(SubjectsAccordionComponent.with_collection(search_results, current_user: current_user, opts: opts)) %>

app/views/shared/_subjects_offcanvas_accordion.html.erb

@@ -0,0 +1 @@
+<%= render(SubjectsOffcanvasAccordionComponent.with_collection(search_results, current_user: current_user, opts: opts)) %>

app/views/subject_indexes/index.html.erb

@@ -2,14 +2,13 @@
 		<div class="subject-body-index">
 			<div class="card-header" style="border-bottom: 1px solid darkred;"> <h4 class="mb-0"><i class="fas fa-indent me-2"></i> Subjects </h4> </div>
 			<div class="card-body" style="position: relative;">
-				<div class="accordion accordion-flash subject-index-body" id="mainPanelBody" >
+				<div class="accordion accordion-flush subject-index-body" id="mainPanelBody" >
-				<% Cdao::Subject.roots.order(name: :asc).each do |root| %>
+					<% Cdao::Subject.roots.order(name: :asc).each do |root| %>
 						<div class="accordion-item">
-							<div class="accordion-header d-flex justify-content-between" id="<%= ["rootLevel", root.id].join %>">
+							<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 %>"
-											 data-controller="subjects" data-accordion-id="<%= ["subjectsAccordion", root.id].join %>" 
+											 data-controller="subjects" data-subject-parent-id="<%= root.id %>" 
-											 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" %>
@@ -31,7 +30,7 @@
 								</div>
 							</div>
 						</div>
-				<% end %>
+					<% end %>
 				</div>
 			</div>
 		</div>