From d1719b70a39ee5452c9f70205877a372558a9fe8 Mon Sep 17 00:00:00 2001
From: SvyatoslavArtymovych <svyatoslav.artymovych@gmail.com>
Date: Mon, 5 Jun 2023 13:00:47 +0300
Subject: [PATCH] checkbox tree

---
 .../book/modals/access_level_modal.html       | 88 +++++++++++--------
 src/indeterminateInputs.ts                    |  9 ++
 src/main.ts                                   |  2 +
 3 files changed, 64 insertions(+), 35 deletions(-)
 create mode 100644 src/indeterminateInputs.ts

diff --git a/app/templates/book/modals/access_level_modal.html b/app/templates/book/modals/access_level_modal.html
index 2fe3328..f21ccd6 100644
--- a/app/templates/book/modals/access_level_modal.html
+++ b/app/templates/book/modals/access_level_modal.html
@@ -20,54 +20,72 @@
       <!-- 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>
 
-                    {% for sub_collection in collection.active_children %}
-                      <ul class="ml-4">
-                        <li>
-                          <div class="flex items-center space-x-2">
-                            <input type="checkbox" data-access-to="sub_collection" data-access-to-id="{{ sub_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" />
-                            <span class="text-center dark:text-gray-300">{{ sub_collection.label }}</span>
-                          </div>
-                          {% for section in sub_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" />
-                                  <span class="text-center dark:text-gray-300">{{ section.label }}</span>
-                                </div>
-                              </li>
-                            </ul>
-                          {% endfor %}
-                        </li>
-                      </ul>
-                    {% endfor %}
+                    {% if collection.active_children %}
 
-                    {% 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" />
-                            <span class="text-center dark:text-gray-300">{{ section.label }}</span>
-                          </div>
-                        </li>
-                      </ul>
-                    {% endfor %}
+                      {{ loop(collection.active_children)}}
+
+                      {#
+                        {% for sub_collection in collection.active_children %}
+                          <ul class="ml-4">
+                            <li>
+                              <div class="flex items-center space-x-2">
+                                <input type="checkbox" data-access-to="sub_collection" data-access-to-id="{{ sub_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" />
+                                <span class="text-center dark:text-gray-300">{{ sub_collection.label }}</span>
+                              </div>
+                              {% for section in sub_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" />
+                                      <span class="text-center dark:text-gray-300">{{ section.label }}</span>
+                                    </div>
+                                  </li>
+                                </ul>
+                              {% endfor %}
+                            </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-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>
diff --git a/src/indeterminateInputs.ts b/src/indeterminateInputs.ts
new file mode 100644
index 0000000..3f3d0ee
--- /dev/null
+++ b/src/indeterminateInputs.ts
@@ -0,0 +1,9 @@
+export function indeterminateInputs() {
+  const indeterminatedInputs = document.querySelectorAll(
+    'input[indeterminate=true]',
+  );
+
+  indeterminatedInputs.forEach((element: HTMLInputElement) => {
+    element.indeterminate = true;
+  });
+}
diff --git a/src/main.ts b/src/main.ts
index bab3c53..253cc44 100644
--- a/src/main.ts
+++ b/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();