issue Breadcrumbs collections and subcollections items #100

app/controllers/breadcrumbs.py

@@ -10,7 +10,8 @@ def create_collections_breadcrumb(
     bread_crumbs += [
         s.BreadCrumb(
             type=s.BreadCrumbType.Collection,
-            url="",
+            url=url_for("book.collection_view", book_id=collection.book_id)
+            + f"#collection-{collection.label}",
             label=collection.label,
         )
     ]

app/models/collection.py

@@ -33,6 +33,10 @@ class Collection(BaseModel):
     def active_sections(self):
         return [section for section in self.sections if not section.is_deleted]
 
+    @property
+    def book_id(self):
+        return self.version.book_id
+
     @property
     def sub_collections(self):
         return [

app/templates/book/collection_view.html

@@ -48,13 +48,13 @@
         <!-- prettier-ignore -->
         <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
         </button>
-        <a  id="accordion-collapse-heading-{{collection.id}}" class=" text-black dark:text-white ">
+        <button href="#collection-{{collection.label}}" id="accordion-collapse-heading-{{collection.id}}" class=" text-black dark:text-white ">
           <form id="rename-collection-label-form-{{collection.id}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" method="post" class="mb-0">
             {{ form_hidden_tag() }}
             <input class=" bg-inherit border-none " value="{{collection.label}}" type="text" name="label" id="edit-collection-label-{{collection.id}}" placeholder="Collection label" required readonly/>
             <button name="submit" type="submit"></button>
           </form>
-        </a>
+        </button>
         </div>
     <svg id="dropdownCollectionContextButton{{collection.id}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
     </div>
@@ -133,7 +133,7 @@
 
     <p class=" text-sm mb-3">{% if book.about==None %}About text{% else %}{{book.about}}{% endif %}</p>
     {% for collection in book.versions[-1].children_collections if not collection.is_root and not collection.is_deleted %}
-    <p class="my-3 underline">#{{collection.label}}</p>
+    <p class="my-3 underline" id="collection-{{collection.label}}">#{{collection.label}}</p>
     {% if not collection.is_leaf and not collection.children %}
     <p class="ml-3 my-3 italic text-sm">Collection is empty</p>
     {% endif %}

app/templates/book/components/sub_collection_preview_content.html

@@ -1,7 +1,9 @@
 {% if not collection.is_leaf %}
 <!-- if collection has sub_collection make for loop for it -->
 {% for sub_collection in collection.children if not sub_collection.is_deleted%}
-<p class="my-3">##{{sub_collection.label}}</p>
+<p class="my-3" id="collection-{{sub_collection.label}}">
+  ##{{sub_collection.label}}
+</p>
 {% if not sub_collection.active_sections and not sub_collection.children %}
 <p class="ml-3 my-3 italic text-sm">This sub collection is empty</p>
 {% endif %}

app/templates/book/components/sub_collection_tab_content.html

@@ -2,8 +2,8 @@
   {% if not collection.is_leaf %}
   <!-- if collection has sub_collection make for loop for it -->
   <!-- Nested accordion -->
-  {% for sub_collection in collection.children if not
-  sub_collection.is_deleted%}
+  <!-- prettier-ignore -->
+  {% for sub_collection in collection.children if not sub_collection.is_deleted%}
   <div id="accordion-nested-collapse" data-accordion="open">
     <!-- prettier-ignore -->
     <div class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
@@ -17,14 +17,14 @@
         <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
       </button>
       <!-- prettier-ignore -->
-      <a id="accordion-nested-collapse-heading-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="text-black dark:text-white">
+      <button href="#collection-{{sub_collection.label}}" id="accordion-nested-collapse-heading-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="text-black dark:text-white">
         <form id="rename-sub-collection-label-form-{{sub_collection.id}}" data-book-id="{{book.id}}" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" method="post" class="mb-0">
           {{ form_hidden_tag() }}
           <!-- prettier-ignore -->
           <input class="bg-inherit border-none" value="{{sub_collection.label}}" type="text" name="label" id="edit-sub-collection-label-{{sub_collection.id}}" placeholder="Sub collection label" required readonly />
           <button name="submit" type="submit"></button>
         </form>
-      </a>
+      </button>
     </div>
     <!-- prettier-ignore -->
     <svg id="dropdownSubCollectionContextButton{{sub_collection.id}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
@@ -36,6 +36,13 @@
         <li>
           <button type="button" id="callAddSectionModal" data-modal-target="add-section-modal" data-modal-toggle="add-section-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> New Section </button>
         </li>
+        {% elif not sub_collection.is_leaf and not sub_collection.children %}
+        <li>
+          <button type="button" id="callAddSectionModal" data-modal-target="add-section-modal" data-modal-toggle="add-section-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> New Section </button>
+        </li>
+        <li>
+          <button type="button" id="callAddSubCollectionModal" data-modal-target="add-sub-collection-modal" data-modal-toggle="add-sub-collection-modal" data-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> New Subcollection </button>
+        </li>
         {% else %}
         <li>
           <button type="button" id="callAddSubCollectionModal" data-modal-target="add-sub-collection-modal" data-modal-toggle="add-sub-collection-modal" data-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> New Subcollection </button>

src/scroll.ts

@@ -1,7 +1,20 @@
 export function scroll() {
   const btns = document.querySelectorAll('[href^="#section-"]');
   if (btns) {
-    btns.forEach((btn, index) => {
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let link = btn.getAttribute('href');
+        link = link.replace('#', '');
+        const neededSection = document.querySelector(`[id^="${link}"]`);
+        if (neededSection) {
+          neededSection.scrollIntoView(true);
+        }
+      });
+    });
+  }
+  const collectionBtns = document.querySelectorAll('[href^="#collection-"]');
+  if (collectionBtns) {
+    collectionBtns.forEach(btn => {
       btn.addEventListener('click', () => {
         let link = btn.getAttribute('href');
         link = link.replace('#', '');