checkbox tree

app/templates/book/modals/access_level_modal.html

@@ -20,20 +20,28 @@
       <!-- Modal body -->
       <div class="p-6 space-y-6">
         <div class="checkbox-tree">
-          <ul class="ml-4">
+          <ul class="ml-6">
             <li>
               <div class="flex items-center space-x-2">
-                <input type="checkbox" data-root="true" data-access-to="book" data-access-to-id="{{ book.id }}" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-400 dark:border-gray-600" />
+                <input type="checkbox" data-root="true" data-permission="C" data-access-to="book" data-access-to-id="{{ book.id }}" class="w-4 h-4 text-purple-600 bg-purple-100 border-purple-400 rounded focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-purple-300 dark:border-purple-500" />
+
                 <span class="text-center dark:text-gray-300">{{ book.label }}</span>
               </div>
-              {% for collection in book.last_version.children_collections %}
+              {%- for collection in book.last_version.children_collections recursive %}
+                <div class="flex">
+                <hr class="">
                 <ul class="ml-4">
                   <li>
                     <div class="flex items-center space-x-2">
-                      <input type="checkbox" data-access-to="collection" data-access-to-id="{{ collection.id }}" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-400 dark:border-gray-600" />
+                      <input type="checkbox" data-access-to="collection" data-access-to-id="{{ collection.id }}" class="w-4 h-4 text-purple-600 bg-purple-100 border-purple-400 rounded focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-purple-300 dark:border-purple-500" />
                       <span class="text-center dark:text-gray-300">{{ collection.label }}</span>
                     </div>
 
+                    {% if collection.active_children %}
+
+                      {{ loop(collection.active_children)}}
+
+                      {#
                         {% for sub_collection in collection.active_children %}
                           <ul class="ml-4">
                             <li>
@@ -54,20 +62,30 @@
                             </li>
                           </ul>
                         {% endfor %}
+                      #}
+
+
+                    {% else %}
+
 
                       {% for section in collection.sections %}
                         <ul class="ml-4">
                           <li>
                             <div class="flex items-center space-x-2">
-                            <input type="checkbox" data-access-to="section" data-access-to-id="{{ section.id }}" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-400 dark:border-gray-600" />
+                              <input type="checkbox" data-access-to="section" data-access-to-id="{{ section.id }}" class="w-4 h-4 text-purple-600 bg-purple-100 border-purple-400 rounded focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-purple-300 dark:border-purple-500" />
+
                               <span class="text-center dark:text-gray-300">{{ section.label }}</span>
                             </div>
                           </li>
                         </ul>
                       {% endfor %}
+
+
+                    {% endif %}
                   </li>
                 </ul>
-              {% endfor %}
+                </div>
+              {%- endfor %}
             </li>
           </ul>
         </div>

src/indeterminateInputs.ts

@@ -0,0 +1,9 @@
+export function indeterminateInputs() {
+  const indeterminatedInputs = document.querySelectorAll(
+    'input[indeterminate=true]',
+  );
+
+  indeterminatedInputs.forEach((element: HTMLInputElement) => {
+    element.indeterminate = true;
+  });
+}

src/main.ts

@@ -29,6 +29,7 @@ import {flash} from './flash';
 import {slashSearch} from './slashSearch';
 import {editInterpretations} from './editInterpretations';
 import {deleteInterpretation} from './deleteInterpretation';
+import {indeterminateInputs} from './indeterminateInputs';
 
 initQuillReadOnly();
 initBooks();
@@ -61,3 +62,4 @@ flash();
 slashSearch();
 editInterpretations();
 deleteInterpretation();
+indeterminateInputs();