dnd after refactor

app/static/js/main.js.LICENSE.txt

@@ -13,3 +13,10 @@
  * @copyright Chen, Yi-Cyuan 2015-2018
  * @license MIT
  */
+
+/**!
+ * Sortable 1.15.0
+ * @author	RubaXa   <trash@rubaxa.org>
+ * @author	owenm    <owen23355@gmail.com>
+ * @license MIT
+ */

app/templates/book/collection_view.html

@@ -42,8 +42,8 @@
     </div>
     <!-- prettier-ignore -->
     {% for collection in book.versions[-1].children_collections if not collection.is_root and not collection.is_deleted %}
-    <div>
-      <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">
+    <div >
+      <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">
         <button class="bg-inherit" type="button" data-accordion-target="#accordion-collapse-body-{{collection.id}}" aria-expanded="true" aria-controls="accordion-collapse-body-{{collection.id}}">
         <!-- 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>
@@ -51,7 +51,7 @@
         <a  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/>
+            <input class=" bg-inherit border-none " value="{{collection.label}}/{{collection.id}}" type="text" name="label" id="edit-collection-label-{{collection.id}}" placeholder="Collection label" required readonly/>
             <button name="submit" type="submit"></button>
           </form>
         </a>

app/templates/book/components/section_tab_content.html

@@ -1,9 +1,9 @@
-<div class="">
+<div class="flex flex-col ml-6">
   <button
     type="button"
     href="#section-{{section.label}}"
     id="section-heading-{{section.id}}"
-    class="text-gray-500 dark:text-gray-400">
+    class="text-gray-500 dark:text-gray-400 w-max">
     <!-- prettier-ignore -->
     <form
       id="rename-section-label-form-{{section.id}}"
@@ -13,11 +13,12 @@
       data-sub-collection-id="{{sub_collection.id}}"
       {% endif %}
       data-section-id="{{section.id}}"
-      method="post">
+      method="post"
+      class="inline-block w-auto">
       {{ form_hidden_tag() }}
       <input
         class="bg-inherit border-none underline"
-        value="{{section.label}}"
+        value="{{section.label}}/{{section.id}}"
         type="text"
         name="label"
         id="edit-section-label-{{section.id}}"

app/templates/book/components/sub_collection_preview_content.html

@@ -1,7 +1,7 @@
 {% 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">##{{sub_collection.label}}/{{sub_collection.id}}</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 %}
@@ -16,7 +16,7 @@
     <div class="flex w-full mb-1 dark:text-gray-100 flex-col">
       <!-- prettier-ignore -->
       <a  href="{{url_for('book.interpretation_view', book_id=book.id, section_id=section.id)}}">
-                <p id="section-{{section.label}}" class="truncate my-3">{{ section.label }}</p></a>
+                <p id="section-{{section.label}}" class="truncate my-3">{{ section.label }}/{{section.id}}</p></a>
       {% if not section.active_interpretations %}
       <p class="ml-3 my-3 italic text-sm">This section is empty</p>
       {% else %}
@@ -164,7 +164,7 @@
 <!-- prettier-ignore -->
 <a href="{{url_for('book.interpretation_view', book_id=book.id, section_id=section.id)}}">
     <!-- prettier-ignore -->
-    <p id="section-{{section.label}}" class="truncate my-3"> {{ section.label }} </p></a >
+    <p id="section-{{section.label}}" class="truncate my-3"> {{ section.label }}/{{section.id}} </p></a >
 {% if not section.active_interpretations %}
 <p class="ml-3 my-3 italic text-sm">This section is empty</p>
 {% else %}

app/templates/book/components/sub_collection_tab_content.html

@@ -1,10 +1,13 @@
-<div class="ml-6">
+<div class="ml-6" data-dnd="dnd-sub-collection">
   {% 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%}
-  <div id="accordion-nested-collapse" data-accordion="open">
+  <div
+    id="accordion-nested-collapse"
+    data-accordion="open"
+    data-sub-collection-id="{{sub_collection.id}}">
     <!-- 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">
       <button
@@ -21,7 +24,7 @@
         <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 />
+          <input class="bg-inherit border-none" value="{{sub_collection.label}}/{{sub_collection.id}}" 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>
@@ -65,10 +68,10 @@
     </div>
     <!-- prettier-ignore -->
     <div id="accordion-nested-collapse-body-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="hidden" aria-labelledby="accordion-nested-collapse-heading-{{sub_collection.id}}">
-    {% if sub_collection.children %}
+    {% if sub_collection.children or not sub_collection.active_sections%}
         {{recursive_render("book/components/sub_collection_tab_content.html",sub_collection,book)|safe}}
-    {% else %}
-        <div class="ml-6">
+    {% elif sub_collection.active_sections  %}
+        <div id="draggableSectionItems" data-sub-collection-id="{{sub_collection.id}}">
         <!-- here comes for loop for all section in this sub_collection-->
             {% for section in sub_collection.active_sections %}
                 {% include 'book/components/section_tab_content.html' %}
@@ -81,7 +84,10 @@
   <!-- End: Nested accordion -->
   {% else %}
   <!-- if collection doesn't have sub_collection -->
-  <div class="ml-6">
+  <div
+    class="ml-6"
+    id="draggableSectionItems"
+    data-collection-id="{{collection.id}}">
     <!-- here comes for loop for all section in this collection-->
     {% for section in collection.active_sections %} {% include
     'book/components/section_tab_content.html' %} {% endfor %}

src/drag_and_drop.ts

@@ -3,7 +3,7 @@ import Sortable from 'sortablejs';
 
 export function initDnD() {
   const divsForSectionsDnD: NodeListOf<HTMLDivElement> =
-    document.querySelectorAll('#draggableItems');
+    document.querySelectorAll('#draggableSectionItems');
   const divsForSubCollectionsDnD: NodeListOf<HTMLDivElement> =
     document.querySelectorAll('[data-dnd="dnd-sub-collection"]');
   divsForSubCollectionsDnD.forEach((div: HTMLDivElement) =>