Merge pull request #5559 from Laravel-Backpack/add-all-select-option-…

…on-checklist-field Add all select option on checklist field
Laravel-Backpack · Jul 15, 2024 · 6ec392c · 6ec392c
2 parents d9274e7 + d8b87e9
commit 6ec392c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 10 deletions.
diff --git a/src/resources/lang/en/crud.php b/src/resources/lang/en/crud.php
@@ -156,6 +156,7 @@
     // Fields
     'browse_uploads' => 'Browse uploads',
     'select_all' => 'Select All',
+    'unselect_all' => 'Unselect All',
     'select_files' => 'Select files',
     'select_file' => 'Select file',
     'clear' => 'Clear',

diff --git a/src/resources/views/crud/fields/checklist.blade.php b/src/resources/views/crud/fields/checklist.blade.php
@@ -1,8 +1,9 @@
 {{-- checklist --}}
 @php
   $key_attribute = (new $field['model'])->getKeyName();
-  $field['attribute'] = $field['attribute'] ?? (new $field['model'])->identifiableAttribute();
-  $field['number_of_columns'] = $field['number_of_columns'] ?? 3;
+  $field['attribute'] ??= (new $field['model'])->identifiableAttribute();
+  $field['number_of_columns'] ??= 3;
+  $field['show_select_all'] ??= false;
 
   // calculate the checklist options
   if (!isset($field['options'])) {
@@ -26,16 +27,26 @@
   }
 
   // define the init-function on the wrapper
-  $field['wrapper']['data-init-function'] =  $field['wrapper']['data-init-function'] ?? 'bpFieldInitChecklist';
+  $field['wrapper']['data-init-function'] ??= 'bpFieldInitChecklist';
 @endphp
 
 @include('crud::fields.inc.wrapper_start')
-    <label>{!! $field['label'] !!}</label>
+
+    <label>{!! $field['label'] !!}
+
+    @if($field['show_select_all'] ?? false)
+    <span class="fs-6 small checklist-select-all-inputs">
+        <a href="javascript:void(0)" href="#" class="select-all-inputs">{{trans('backpack::crud.select_all')}}</a>
+        <a href="javascript:void(0)" href="#" class="unselect-all-inputs d-none">{{trans('backpack::crud.unselect_all')}}</a> 
+    </span>
+    @endif
+    </label>
+
     @include('crud::fields.inc.translatable_icon')
 
-    <input type="hidden" value='@json($field['value'])' name="{{ $field['name'] }}">
+    <input type="hidden" data-show-select-all="{{var_export($field['show_select_all'])}}" value='@json($field['value'])' name="{{ $field['name'] }}">
 
-    <div class="row">
+    <div class="row checklist-options-container">
         @foreach ($field['options'] as $key => $option)
             <div class="col-sm-{{ intval(12/$field['number_of_columns']) }}">
                 <div class="checkbox">
@@ -62,10 +73,13 @@
         @bassetBlock('backpack/crud/fields/checklist-field.js')
         <script>
             function bpFieldInitChecklist(element) {
-                var hidden_input = element.find('input[type=hidden]');
-                var selected_options = JSON.parse(hidden_input.val() || '[]');
-                var checkboxes = element.find('input[type=checkbox]');
-                var container = element.find('.row');
+                let hidden_input = element.find('input[type=hidden]');
+                let selected_options = JSON.parse(hidden_input.val() || '[]');
+                let container = element.find('.row.checklist-options-container');
+                let checkboxes = container.find(':input[type=checkbox]');                
+                let showSelectAll = hidden_input.data('show-select-all');
+                let selectAllAnchor = element.find('.checklist-select-all-inputs').find('a.select-all-inputs');
+                let unselectAllAnchor = element.find('.checklist-select-all-inputs').find('a.unselect-all-inputs');
 
                 // set the default checked/unchecked states on checklist options
                 checkboxes.each(function(key, option) {
@@ -92,7 +106,40 @@ function bpFieldInitChecklist(element) {
 
                   hidden_input.val(JSON.stringify(newValue)).trigger('change');
 
+                  toggleAllSelectAnchor();
                 });
+                  
+                let selectAll = function() {
+                  checkboxes.prop('checked', 'checked');
+                  hidden_input.val(JSON.stringify(checkboxes.map(function() { return $(this).val(); }).get())).trigger('change');
+                  selectAllAnchor.toggleClass('d-none');
+                  unselectAllAnchor.toggleClass('d-none');
+                };
+
+                let unselectAll = function() {
+                  checkboxes.prop('checked', false);
+                  hidden_input.val(JSON.stringify([])).trigger('change');
+                  selectAllAnchor.toggleClass('d-none');
+                  unselectAllAnchor.toggleClass('d-none');
+                };
+
+                let toggleAllSelectAnchor = function() {
+                  if(showSelectAll === false) {
+                    return;
+                  }
+
+                  if (checkboxes.length === selected_options.length) {
+                    selectAllAnchor.toggleClass('d-none');
+                    unselectAllAnchor.toggleClass('d-none');
+                  }
+                };
+
+                if(showSelectAll) {
+                  selectAllAnchor.click(selectAll);
+                  unselectAllAnchor.click(unselectAll);
+
+                  toggleAllSelectAnchor();
+                }
 
                 hidden_input.on('CrudField:disable', function(e) {
                       checkboxes.attr('disabled', 'disabled');