]> _ Git - fluidbook-toolbox.git/commitdiff
wait #6752 @1.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 26 Feb 2024 16:52:08 +0000 (17:52 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 26 Feb 2024 16:52:08 +0000 (17:52 +0100)
config/backpack/base.php
resources/views/columns/owner.blade.php
resources/views/vendor/backpack/crud/filters/select2.blade.php [new file with mode: 0644]
resources/views/vendor/backpack/crud/filters/select2_ajax.blade.php [new file with mode: 0644]
resources/views/vendor/backpack/crud/filters/select2_multiple.blade.php [new file with mode: 0644]

index 857c2d18af84861e7897d30e88500f71e1046002..c0147e2044b8c2b7eba02c90450a7ced8716bd7f 100644 (file)
@@ -153,9 +153,9 @@ return [
         'https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js',
         "https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.js",
         "https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.ui.position.min.js",
-        'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js',
+        'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js',
         'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js',
-        'https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.js',
+        'https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.5/sweetalert2.all.js',
         'https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js',
 
         // examples (everything inside the bundle, loaded from CDN)
index 38cfdb0d43d8259d54b1e2d7e0b80a9202d2528c..ed12176fcb34a0a1f7b2931533a5cb4a30612fb7 100644 (file)
                 confirmButtonText: '{{__('Valider')}}',
                 showCancelButton: true,
                 cancelButtonText: '{{__('Annuler')}}',
-                cancelButtonColor: '#f1ecec',
-                cancelButtonTextColor: '#000000',
+                cancelButtonColor: '#cccccc',
                 focusConfirm: false,
                 didOpen: function () {
                     let select = $(Swal.getHtmlContainer()).find('select');
+                    console.log(select);
                     $(select).select2({
                         theme: 'bootstrap',
                         ajax: {
                     });
                 },
                 didDestroy: function () {
-                    let select = $(Swal.getHtmlContainer()).find('select');
-                    $(select).select2('destroy');
+                    try {
+                        let select = $(Swal.getHtmlContainer()).find('select');
+                        $(select).select2('destroy');
+                    } catch (e) {
+
+                    }
                 },
             }).then((result) => {
                 if (result.isConfirmed) {
@@ -61,9 +65,9 @@
 <span data-{{$entry->getOption('name')}}-{{$column['name']}}="{{$values}}">
     <div class="owners_list_container" style="display: none;">
         <select
-                style="width: 100%;"
-                name="owners_list"
-                data-ajax="{{$crud->ajaxOwnerList}}"
+            style="width: 100%;"
+            name="owners_list"
+            data-ajax="{{$crud->ajaxOwnerList}}"
         >
             <option value="{{$values}}" selected>{!! $v !!}</option>
         </select>
diff --git a/resources/views/vendor/backpack/crud/filters/select2.blade.php b/resources/views/vendor/backpack/crud/filters/select2.blade.php
new file mode 100644 (file)
index 0000000..6de2433
--- /dev/null
@@ -0,0 +1,143 @@
+{{-- Select2 Backpack CRUD filter --}}
+<li filter-name="{{ $filter->name }}"
+    filter-type="{{ $filter->type }}"
+    filter-key="{{ $filter->key }}"
+       class="nav-item dropdown {{ Request::get($filter->name)?'active':'' }}">
+    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ $filter->label }} <span class="caret"></span></a>
+    <div class="dropdown-menu p-0">
+      <div class="form-group backpack-filter mb-0">
+                       <select
+                               id="filter_{{ $filter->key }}"
+                               name="filter_{{ $filter->key }}"
+                               class="form-control input-sm select2"
+                               placeholder="{{ $filter->placeholder }}"
+                               data-filter-key="{{ $filter->key }}"
+                               data-filter-type="select2"
+                               data-filter-name="{{ $filter->name }}"
+                               data-language="{{ str_replace('_', '-', app()->getLocale()) }}"
+                               >
+                               <option value="">-</option>
+                               @if (is_array($filter->values) && count($filter->values))
+                                       @foreach($filter->values as $key => $value)
+                                               <option value="{{ $key }}"
+                                                       @if($filter->isActive() && $filter->currentValue == $key)
+                                                               selected
+                                                       @endif
+                                                       >
+                                                       {{ $value }}
+                                               </option>
+                                       @endforeach
+                               @endif
+                       </select>
+               </div>
+    </div>
+  </li>
+
+{{-- ########################################### --}}
+{{-- Extra CSS and JS for this particular filter --}}
+
+{{-- FILTERS EXTRA CSS --}}
+{{-- push things in the after_styles section --}}
+
+@push('crud_list_styles')
+    {{-- include select2 css --}}
+    <link href="{{ asset('packages/select2/dist/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
+    <link href="{{ asset('packages/select2-bootstrap-theme/dist/select2-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
+    <style>
+         .form-inline .select2-container {
+           display: inline-block;
+         }
+         .select2-drop-active {
+               border:none;
+         }
+         .select2-container .select2-choices .select2-search-field input, .select2-container .select2-choice, .select2-container .select2-choices {
+               border: none;
+         }
+         .select2-container-active .select2-choice {
+               border: none;
+               box-shadow: none;
+         }
+         .select2-container--bootstrap .select2-dropdown {
+               margin-top: -2px;
+               margin-left: -1px;
+         }
+         /*.select2-container--bootstrap {*/
+         /*    position: relative!important;*/
+         /*    top: 0px!important;*/
+         /*}*/
+    </style>
+@endpush
+
+
+{{-- FILTERS EXTRA JS --}}
+{{-- push things in the after_scripts section --}}
+
+@push('crud_list_scripts')
+       {{-- include select2 js --}}
+    <script src="{{ asset('packages/select2/dist/js/select2.full.min.js') }}"></script>
+    @if (app()->getLocale() !== 'en')
+    <script src="{{ asset('packages/select2/dist/js/i18n/' . str_replace('_', '-', app()->getLocale()) . '.js') }}"></script>
+    @endif
+
+    <script>
+        jQuery(document).ready(function($) {
+            // trigger select2 for each untriggered select2 box
+            $('select[data-filter-type=select2]').not('[data-filter-enabled]').each(function () {
+               var filterName = $(this).attr('data-filter-name');
+                var filterKey = $(this).attr('data-filter-key');
+               var element = $(this);
+
+               $(this).attr('data-filter-enabled', 'true');
+
+               var obj = $(this).select2({
+                       allowClear: true,
+                           closeOnSelect: false,
+                                       theme: "bootstrap",
+                                       dropdownParent: $(this).parent('.form-group'),
+                           placeholder: $(this).attr('placeholder'),
+                   }).on('change', function(c) {
+                                       var value = $(this).val();
+                                       var parameter = $(this).attr('data-filter-name');
+
+                    if(!value) {
+                       return;
+                    }
+
+                    var new_url = updateDatatablesOnFilterChange(filterName, value, true);
+
+                    // mark this filter as active in the navbar-filters
+                    if (URI(new_url).hasQuery(filterName, true)) {
+                        $("li[filter-key="+filterKey+"]").addClass('active');
+                    }
+                               }).on('select2:unselecting', function (e) {
+
+                    updateDatatablesOnFilterChange(filterName, null, true);
+
+                    $('#filter_'+filterKey).val(null)
+                    $("li[filter-key="+filterKey+"]").removeClass("active");
+                    $("li[filter-key="+filterKey+"]").find('.dropdown-menu').removeClass("show");
+
+                    e.stopPropagation();
+                    return true;
+                });
+
+
+                               // when the dropdown is opened, autofocus on the select2
+                               $("li[filter-key="+filterKey+"]").on('shown.bs.dropdown', function () {
+                                       setTimeout(() => {
+                                               $('select[data-filter-key='+filterKey+']').select2('open');
+                                               element.data('select2').dropdown.$search.get(0).focus();
+                                       }, 50);
+                               });
+
+                               // clear filter event (used here and by the Remove all filters button)
+                               $("li[filter-key="+filterKey+"]").on('filter:clear', function(e) {
+                                       $("li[filter-key="+filterKey+"]").removeClass('active');
+                       $('#filter_'+filterKey).val(null).trigger('change');
+                               });
+            });
+               });
+       </script>
+@endpush
+{{-- End of Extra CSS and JS --}}
+{{-- ########################################## --}}
diff --git a/resources/views/vendor/backpack/crud/filters/select2_ajax.blade.php b/resources/views/vendor/backpack/crud/filters/select2_ajax.blade.php
new file mode 100644 (file)
index 0000000..52e6f06
--- /dev/null
@@ -0,0 +1,190 @@
+{{-- Select2 Ajax Backpack CRUD filter --}}
+
+@php
+    $filter->options['quiet_time'] = $filter->options['quiet_time'] ?? $filter->options['delay'] ?? 500;
+@endphp
+
+<li filter-name="{{ $filter->name }}"
+    filter-type="{{ $filter->type }}"
+    filter-key="{{ $filter->key }}"
+       class="nav-item dropdown {{ Request::get($filter->name)?'active':'' }}">
+    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ $filter->label }} <span class="caret"></span></a>
+    <div class="dropdown-menu p-0 ajax-select">
+           <div class="form-group mb-0">
+            <select
+                id="filter_{{ $filter->key }}"
+                name="filter_{{ $filter->name }}"
+                class="form-control input-sm select2"
+                placeholder="{{ $filter->placeholder }}"
+                data-filter-key="{{ $filter->key }}"
+                data-filter-type="select2_ajax"
+                data-filter-name="{{ $filter->name }}"
+                data-select-key="{{ $filter->options['select_key'] ?? 'id' }}"
+                data-select-attribute="{{ $filter->options['select_attribute'] ?? 'name' }}"
+                data-language="{{ str_replace('_', '-', app()->getLocale()) }}"
+                filter-minimum-input-length="{{ $filter->options['minimum_input_length'] ?? 2 }}"
+                filter-method="{{ $filter->options['method'] ?? 'GET' }}"
+                filter-quiet-time="{{ $filter->options['quiet_time'] }}"
+            >
+                               @if (Request::get($filter->name))
+                                       <option value="{{ Request::get($filter->name) }}" selected="selected"> {{ Request::get($filter->name.'_text') ?? 'Previous selection' }} </option>
+                               @endif
+                       </select>
+           </div>
+    </div>
+  </li>
+
+{{-- ########################################### --}}
+{{-- Extra CSS and JS for this particular filter --}}
+
+{{-- FILTERS EXTRA CSS --}}
+{{-- push things in the after_styles section --}}
+
+@push('crud_list_styles')
+    {{-- include select2 css --}}
+    <link href="{{ asset('packages/select2/dist/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
+    <link href="{{ asset('packages/select2-bootstrap-theme/dist/select2-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
+    <style>
+         .form-inline .select2-container {
+           display: inline-block;
+         }
+         .select2-drop-active {
+               border:none;
+         }
+         .select2-container .select2-choices .select2-search-field input, .select2-container .select2-choice, .select2-container .select2-choices {
+               border: none;
+         }
+         .select2-container-active .select2-choice {
+               border: none;
+               box-shadow: none;
+         }
+         .select2-container--bootstrap .select2-dropdown {
+               margin-top: -2px;
+               margin-left: -1px;
+         }
+/*       .select2-container--bootstrap {
+               position: relative!important;
+               top: 0px!important;
+         }*/
+    </style>
+@endpush
+
+
+{{-- FILTERS EXTRA JS --}}
+{{-- push things in the after_scripts section --}}
+
+@push('crud_list_scripts')
+       {{-- include select2 js --}}
+    <script src="{{ asset('packages/select2/dist/js/select2.full.min.js') }}"></script>
+    @if (app()->getLocale() !== 'en')
+    <script src="{{ asset('packages/select2/dist/js/i18n/' . str_replace('_', '-', app()->getLocale()) . '.js') }}"></script>
+    @endif
+
+    <script>
+        jQuery(document).ready(function($) {
+            // trigger select2 for each untriggered select2 box
+            //TODO: Is it really necessary to foreach an ID when it must be UNIQUE ?
+            $('#filter_{{ $filter->key }}').each(function () {
+                var element = $(this);
+
+               // if the filter has already been initialised, do nothing
+               if ($(this).attr('data-initialised')) {
+                       return;
+               } else {
+                       $(this).attr('data-initialised', 'true');
+               }
+
+               var filterName = $(this).attr('data-filter-name');
+                var filterKey = $(this).attr('data-filter-key');
+                var selectAttribute = $(this).attr('data-select-attribute');
+                var selectKey = $(this).attr('data-select-key');
+
+               $(this).select2({
+                                   theme: "bootstrap",
+                                   minimumInputLength: $(this).attr('filter-minimum-input-length'),
+                       allowClear: true,
+                           placeholder: $(this).attr('placeholder'),
+                                       closeOnSelect: false,
+                                       dropdownParent: $(this).parent('.form-group'),
+                                   // tags: [],
+                                   ajax: {
+                                       url: '{{ $filter->values }}',
+                                       dataType: 'json',
+                                       type: $(this).attr('filter-method'),
+                                       delay: $(this).attr('filter-quiet-time'),
+                                       processResults: function (data) {
+                            //if we have data.data here it means we returned a paginated instance from controller.
+                            //otherwise we returned one or more entries unpaginated.
+                            if (data.data) {
+                                return {
+                                    results: $.map(data.data, function (item) {
+                                        return {
+                                            text: item[selectAttribute],
+                                            id: item[selectKey]
+                                        }
+                                    }),
+                                    pagination: {
+                                        more: typeof data.next_page_url !== 'undefined' && data.next_page_url !== null,
+                                    },
+                                };
+                            }
+
+                            //it's non-paginated result
+                            return {
+                                results: $.map(data, function (item, i) {
+                                    return {
+                                        text: item,
+                                        id: i
+                                    }
+                                }),
+                            }
+
+
+                                       }
+                                   }
+                               }).on('change', function (evt) {
+                        var val = $(this).val();
+                        var val_text = $(this).select2('data')[0]?$(this).select2('data')[0].text:null;
+                        var extra_param = filterName + '_text';
+
+                        if (!val_text) {
+                           return;
+                        }
+
+                        updateDatatablesOnFilterChange(filterName, val);
+                        var new_url = updateDatatablesOnFilterChange(extra_param, val_text, true);
+
+                        // mark this filter as active in the navbar-filters
+                        if (URI(new_url).hasQuery(filterName, true)) {
+                            $('li[filter-key='+filterKey+']').removeClass('active').addClass('active');
+                        }
+                    }).on('select2:unselecting', function (e) {
+                        var extra_param = filterName + '_text';
+
+                        updateDatatablesOnFilterChange(filterName, null);
+                        updateDatatablesOnFilterChange(extra_param, null, true);
+
+                        $('#filter_'+filterKey).val(null)
+                        $("li[filter-key="+filterKey+"]").removeClass("active");
+                        $("li[filter-key="+filterKey+"]").find('.dropdown-menu').removeClass("show");
+                    });
+
+                // when the dropdown is opened, autofocus on the select2
+                               $("li[filter-key="+filterKey+"]").on('shown.bs.dropdown', function () {
+                                       setTimeout(() => {
+                                               $('select[data-filter-key='+filterKey+']').select2('open');
+                                               element.data('select2').dropdown.$search.get(0).focus();
+                                       }, 50);
+                               });
+
+                               // clear filter event (used here and by the Remove all filters button)
+                               $('li[filter-key='+filterKey+']').on('filter:clear', function(e) {
+                                       $('li[filter-key='+filterKey+']').removeClass('active');
+                       $('#filter_'+filterKey).val(null).trigger('change');
+                               });
+            });
+        });
+    </script>
+@endpush
+{{-- End of Extra CSS and JS --}}
+{{-- ########################################## --}}
diff --git a/resources/views/vendor/backpack/crud/filters/select2_multiple.blade.php b/resources/views/vendor/backpack/crud/filters/select2_multiple.blade.php
new file mode 100644 (file)
index 0000000..07a5079
--- /dev/null
@@ -0,0 +1,157 @@
+{{-- Select2 Multiple Backpack CRUD filter --}}
+<li filter-name="{{ $filter->name }}"
+    filter-type="{{ $filter->type }}"
+    filter-key="{{ $filter->key }}"
+       class="nav-item dropdown {{ Request::get($filter->name)?'active':'' }}">
+    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ $filter->label }} <span class="caret"></span></a>
+    <div class="dropdown-menu p-0">
+      <div class="form-group backpack-filter mb-0">
+                       <select
+                               id="filter_{{ $filter->key }}"
+                               name="filter_{{ $filter->key }}"
+                               class="form-control input-sm select2"
+                               placeholder="{{ $filter->placeholder }}"
+                               data-filter-key="{{ $filter->key }}"
+                               data-filter-type="select2_multiple"
+                               data-filter-name="{{ $filter->name }}"
+                               data-language="{{ str_replace('_', '-', app()->getLocale()) }}"
+                               multiple
+                               >
+                               @if (is_array($filter->values) && count($filter->values))
+                                       @foreach($filter->values as $key => $value)
+                                               <option value="{{ $key }}"
+                                                       @if($filter->isActive() && json_decode($filter->currentValue) && array_search($key, json_decode($filter->currentValue)) !== false)
+                                                               selected
+                                                       @endif
+                                                       >
+                                                       {{ $value }}
+                                               </option>
+                                       @endforeach
+                               @endif
+                       </select>
+               </div>
+    </div>
+  </li>
+
+{{-- ########################################### --}}
+{{-- Extra CSS and JS for this particular filter --}}
+
+{{-- FILTERS EXTRA CSS --}}
+{{-- push things in the after_styles section --}}
+
+@push('crud_list_styles')
+    {{-- include select2 css --}}
+    <link href="{{ asset('packages/select2/dist/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
+    <link href="{{ asset('packages/select2-bootstrap-theme/dist/select2-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
+    <style>
+         .form-inline .select2-container {
+           display: inline-block;
+         }
+         .select2-drop-active {
+               border:none;
+         }
+         .select2-container .select2-choices .select2-search-field input, .select2-container .select2-choice, .select2-container .select2-choices {
+               border: none;
+         }
+         .select2-container-active .select2-choice {
+               border: none;
+               box-shadow: none;
+         }
+         .select2-container--bootstrap .select2-dropdown {
+               margin-top: -2px;
+               margin-left: -1px;
+         }
+/*       .select2-container--bootstrap {
+               position: relative!important;
+               top: 0px!important;
+         }*/
+    </style>
+@endpush
+
+
+{{-- FILTERS EXTRA JS --}}
+{{-- push things in the after_scripts section --}}
+
+@push('crud_list_scripts')
+       {{-- include select2 js --}}
+    <script src="{{ asset('packages/select2/dist/js/select2.full.min.js') }}"></script>
+    @if (app()->getLocale() !== 'en')
+    <script src="{{ asset('packages/select2/dist/js/i18n/' . str_replace('_', '-', app()->getLocale()) . '.js') }}"></script>
+    @endif
+
+    <script>
+        jQuery(document).ready(function($) {
+            // trigger select2 for each untriggered select2 box
+            $('select[name=filter_{{ $filter->key }}]').not('[data-filter-enabled]').each(function () {
+               var filterName = $(this).attr('data-filter-name');
+                var filterKey = $(this).attr('data-filter-key');
+
+                $(this).select2({
+                       allowClear: true,
+                                       closeOnSelect: false,
+                                       theme: "bootstrap",
+                                       dropdownParent: $(this).parent('.form-group'),
+                           placeholder: $(this).attr('placeholder'),
+                }).on('change', function() {
+                    var value = '';
+                    if (Array.isArray($(this).val())) {
+                        // clean array from undefined, null, "".
+                        var values = $(this).val().filter(function(e){ return e === 0 || e });
+                        // stringify only if values is not empty. otherwise it will be '[]'.
+                        value = values.length ? JSON.stringify(values) : '';
+                    }
+
+                    if (!value) {
+                        return;
+                    }
+
+                    var new_url = updateDatatablesOnFilterChange(filterName, value, true);
+
+                    // mark this filter as active in the navbar-filters
+                    if (URI(new_url).hasQuery(filterName, true)) {
+                        $("li[filter-key="+filterKey+"]").addClass('active');
+                    }
+
+                               }).on('select2:unselecting', function(e) {
+
+                    var unselectingValue = e.params.args.data.id;
+                    let currentElementValue = $(this).val();
+
+                    if(currentElementValue.length) {
+
+                        currentElementValue = currentElementValue.filter(function(v) {
+                            return v !== unselectingValue
+                        });
+
+                        if (!currentElementValue.length) {
+                            updateDatatablesOnFilterChange(filterName, null, true);
+
+                            $("li[filter-key="+filterKey+"]").removeClass("active");
+                            $("li[filter-key="+filterKey+"]").find('.dropdown-menu').removeClass("show");
+                        }
+                    }
+
+                }).on('select2:clear', function(e) {
+                    // when the "x" clear all button is pressed, we update the table
+                    updateDatatablesOnFilterChange(filterName, null, true);
+
+                    $("li[filter-key="+filterKey+"]").removeClass("active");
+                                       $("li[filter-key="+filterKey+"]").find('.dropdown-menu').removeClass("show");
+                });
+
+                               // when the dropdown is opened, autofocus on the select2
+                               $("li[filter-key="+filterKey+"]").on('shown.bs.dropdown', function () {
+                                       $('#filter_'+filterKey+'').select2('open');
+                               });
+
+                               // clear filter event (used here and by the Remove all filters button)
+                               $("li[filter-key="+filterKey+"]").on('filter:clear', function(e) {
+                                       $("li[filter-key="+filterKey+"]").removeClass('active');
+                       $('#filter_'+filterKey).val(null).trigger('change');
+                               });
+            });
+               });
+       </script>
+@endpush
+{{-- End of Extra CSS and JS --}}
+{{-- ########################################## --}}