fixes select all toggle

bezhanSalleh · Jan 25, 2024 · 41dd0c9 · 41dd0c9
1 parent 12216a5
commit 41dd0c9
Showing 1 changed file with 21 additions and 7 deletions.
diff --git a/resources/views/forms/shield-toggle.blade.php b/resources/views/forms/shield-toggle.blade.php
@@ -16,14 +16,19 @@
                 state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
                 checkboxes: [],
                 checkboxLists: [],
-                toggleAllCheckboxes: function () {
+                toggleAll: function () {
+                    this.state = ! this.state;
+                    this.checkboxLists.forEach(checkboxList => {
+                        Alpine.$data(checkboxList.parentNode).areAllCheckboxesChecked = false;
+                        Alpine.$data(checkboxList.parentNode).checkIfAllCheckboxesAreChecked()
+                        Alpine.$data(checkboxList.parentNode).updateVisibleCheckboxListOptions();
+                        Alpine.$data(checkboxList.parentNode).toggleAllCheckboxes();
+                    })
+
                     this.checkboxes.forEach(checkbox => {
                         checkbox.checked = this.state;
                     });
                     this.updateStateBasedOnCheckboxes();
-                    this.checkboxLists.forEach(checkboxList => {
-                        Alpine.$data(checkboxList.parentNode).checkIfAllCheckboxesAreChecked();
-                    })
                 },
 
                 updateStateBasedOnCheckboxes: function () {
@@ -33,18 +38,28 @@
                 init: function() {
                     this.checkboxLists = Array.from(document.querySelectorAll('.fi-fo-checkbox-list'))
                     this.checkboxes = Array.from(document.querySelectorAll('.fi-fo-checkbox-list-option-label input[type=\'checkbox\']'));
+
+
                     this.checkboxes.forEach((checkbox) => {
                         checkbox.addEventListener('change', () => {
                             this.updateStateBasedOnCheckboxes();
                         });
                     });
+
                     $nextTick(() => {
                         this.updateStateBasedOnCheckboxes();
                     });
+
+                    $watch('state', (value, old) => {
+                        console.log('new',value,' - old',old)
+                        if (value === old) {
+                            this.toggleAll();
+                        }
+                    });
                 }
             }"
             x-init="init()"
-            x-on:click="state = !state; toggleAllCheckboxes();"
+            x-on:click="toggleAll();"
             x-bind:class="
                 state
                     ? '{{
@@ -156,5 +171,4 @@ class="absolute inset-0 flex items-center justify-center w-full h-full transitio
     @else
         {{ $content() }}
     @endif
-</x-dynamic-component>
-
+</x-dynamic-component>