Merge pull request #336 from haugen86/feature/accept-empty-arrays-in-…

…select feat: allow empty arrays in select
mkocansey · Sep 12, 2024 · 7e87dea · 7e87dea
2 parents d2a42f9 + 4e33bc2
commit 7e87dea
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/config/bladewind.php b/config/bladewind.php
@@ -319,6 +319,7 @@
     */
     'select' => [
         'placeholder' => 'Select One',
+        'empty_placeholder' => 'No options available',
         'label' => null,
         'add_clearing' => true,
         'max_error_message' => 'Please select only %s items',

diff --git a/public/js/select.js b/public/js/select.js
@@ -91,10 +91,13 @@ class BladewindSelect {
         dom_els(this.selectItems).forEach((el) => {
             let selected = (el.getAttribute('data-selected') !== null);
             if (selected) this.setValue(el);
-            el.addEventListener('click', () => {
-                this.setValue(el);
-                this.callUserFunction(el);
-            });
+            let isSelectable = (el.getAttribute('data-unselectable') === null);
+            if(isSelectable) {
+                el.addEventListener('click', () => {
+                    this.setValue(el);
+                    this.callUserFunction(el);
+                });
+            }
         });
     }
 
@@ -280,7 +283,7 @@ class BladewindSelect {
         if (user_function !== null && user_function !== undefined) {
             callUserFunction(
                 `${user_function}(
-                '${item.getAttribute('data-value')}', 
+                '${item.getAttribute('data-value')}',
                 '${item.getAttribute('data-label')}',
                 '${dom_el(this.formInput).value}')`
             );
@@ -323,4 +326,4 @@ class BladewindSelect {
             }
         }
     }
-}
+}
diff --git a/resources/views/components/select-item.blade.php b/resources/views/components/select-item.blade.php
@@ -5,18 +5,22 @@
     'flag' => '',
     'image' => '',
     'filter_by' => '',
+    'selectable' => 'true',
 ])
 @aware([ 'onselect' => '', ])
 
 @php
     $selected = filter_var($selected, FILTER_VALIDATE_BOOLEAN);
+    $selectable = filter_var($selectable, FILTER_VALIDATE_BOOLEAN);
     $label = html_entity_decode($label);
 @endphp
-<div class="py-3 pl-4 pr-3 flex items-center text-base cursor-pointer hover:bg-slate-100/90 dark:hover:bg-dark-800/50 dark:hover:text-dark-200 bw-select-item"
-     data-label="{!! $label !!}" data-value="{{ $value }}"
-     @if(!empty($filter_by)) data-filter-value="{{$filter_by}}" @endif
-     @if($selected) data-selected="true" @endif
-     @if($onselect !== '') data-user-function="{{ $onselect }}"@endif>
+<div
+        class="py-3 pl-4 pr-3 flex items-center text-base cursor-pointer bw-select-item @if($selectable) hover:bg-slate-100/90 dark:hover:bg-dark-800/50 dark:hover:text-dark-200 @else text-blue-900/40 @endif"
+        data-label="{!! $label !!}" data-value="{{ $value }}"
+        @if(!$selectable) data-unselectable @endif
+        @if(!empty($filter_by)) data-filter-value="{{$filter_by}}" @endif
+        @if($selected) data-selected="true" @endif
+        @if($onselect !== '') data-user-function="{{ $onselect }}"@endif>
     @if ($flag !== '' && $image == '')
         <i class="{{ $flag }} flag"></i>
     @endif
@@ -25,4 +29,4 @@
     @endif
     <span class="grow text-left">{!! $label !!}</span>
     <x-bladewind::icon name="check-circle" class="text-slate-400 size-5 hidden svg-{{$value }}"/>
-</div>
+</div>
diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
@@ -4,6 +4,7 @@
 
     // the default text to display when the select shows
     'placeholder' => config('bladewind.select.placeholder', 'Select One'),
+    'empty_placeholder' => config('bladewind.select.empty_placeholder', 'No options to select from'),
     'label' => config('bladewind.select.label', null),
 
     /**
@@ -133,7 +134,7 @@
     $filter = preg_replace('/[\s-]/', '_', $filter);
     $selected_value = ($selected_value != '') ? explode(',', str_replace(', ', ',', $selected_value)) : [];
 
-    if ($data !== 'manual') {
+    if ($data !== 'manual' && count($data)) {
         $data = (!is_array($data)) ? json_decode(str_replace('&quot;', '"', $data), true) : $data;
 
         if(! isset($data[0][$label_key]) ) {
@@ -208,16 +209,21 @@ class="!border-0 !border-b !rounded-none focus:!border-slate-300 dark:focus:!bor
         </div>
         <div class="divide-y divide-slate-100 dark:divide-slate-600/70 bw-select-items mt-0">
             @if($data !== 'manual')
-                @foreach ($data as $item)
+                @forelse ($data as $item)
                     <x-bladewind::select-item
                             label="{{ $item[$label_key] }}"
                             value="{{ $item[$value_key] }}"
                             filter_by="{{ ($filter_by != '') ? $item[$filter_by] : '' }}"
                             onselect="{{ $onselect }}"
                             flag="{{ $item[$flag_key] ?? '' }}"
                             image="{{ $item[$image_key] ?? '' }}"
-                            selected="{{ (in_array($item[$value_key], $selected_value)) ? 'true' : 'false' }}"/>
-                @endforeach
+                            selected="{{ (in_array($item[$value_key], $selected_value)) ? 'true' : 'false' }}" />
+                @empty
+                    <x-bladewind::select-item
+                            :selectable="false"
+                            :label="$empty_placeholder"
+                    />
+                @endforelse
             @else
                 {!! $slot !!}
             @endif