Add select all to select many

views/assets/javascripts/qor/qor-chooser.js

@@ -68,6 +68,30 @@
 
             $this.select2(option);
 
+            if ($this.is('[selectall]')) {
+                if(select2Data.remoteUrl) {
+                    $.ajax({
+                        url: select2Data.remoteUrl,
+                        dataType: 'json'
+                    }).then(function (data) {
+                        data.forEach(function(item) {  
+                            if($this.find('option[value="'+item.ID+'"]').length < 1) {
+                                $this.append(new Option(item.Name, item.ID, false, false));
+                            }
+                        });
+                    });
+                }
+
+                $this.next('.select2-container').find('.select2-selection--multiple')
+                    .prepend('<span class="select2-selection__select-all" title="Select all items">&equiv;</span>')
+                    .find('.select2-selection__select-all').on('click', function(evt) {
+                        var $select = $(evt.target).closest('.select2-container').prev('select[data-toggle="'+NAMESPACE+'"]');
+                        evt.stopPropagation();
+                        $select.find('option').prop('selected', 'selected');
+                        $select.trigger('change');
+                    });
+            }
+
             // reset select2 container width
             this.resetSelect2Width();
             resetSelect2Width = window._.debounce(this.resetSelect2Width.bind(this), 300);

views/assets/stylesheets/scss/qor/qor-chooser.scss

@@ -57,14 +57,22 @@
         height: auto;
         margin-top: 0;
         line-height: 1;
-        .select2-selection__clear {
+        .select2-selection__rendered {
+            padding-right: 36px;
+        }
+        .select2-selection__clear,
+        .select2-selection__select-all {
             font-size: 20px;
-            padding: 0 8px;
+            padding: 0 2px;
             margin: 0;
             line-height: 28px;
             position: absolute;
             top: 2px;
-            right: 2px;
+            right: 8px;
+            cursor: pointer;
+        }
+        .select2-selection__clear {
+            right: 24px;
         }
         .select2-selection__choice {
             padding: 0 6px 0px 2px;

views/metas/filter/select_many.tmpl

@@ -15,15 +15,12 @@
     <label class="qor-field__label">
       {{t (printf "%v.filter.%v" .Resource.ToParam .Filter.Label) .Filter.Label}}
   </label>
-  <select data-toggle="qor.chooser" multiple="multiple" {{if $value}}chooser-selected="true"{{end}} data-placeholder="{{t (printf "%v.filter.%v" .Resource.ToParam .Filter.Label) .Filter.Label}}" name="{{.InputNamePrefix}}.Value" data-allow-clear="true" {{if .Filter.Config.RemoteDataResource}}data-remote-data="true" data-remote-url="{{url_for .Filter.Config.RemoteDataResource}}"{{end}} filter-required>
+  <select data-toggle="qor.chooser" selectall="selectall" multiple="multiple" {{if $value}}chooser-selected="true"{{end}} data-placeholder="{{t (printf "%v.filter.%v" .Resource.ToParam .Filter.Label) .Filter.Label}}" name="{{.InputNamePrefix}}.Value" data-allow-clear="true" {{if .Filter.Config.RemoteDataResource}}data-remote-data="true" data-remote-url="{{url_for .Filter.Config.RemoteDataResource}}"{{end}} filter-required>
     {{if .Filter.Config.RemoteDataResource}}
       {{range $v:=$value}}
         <option value="{{primary_key_of $v}}" selected>{{stringify $v}}</option>
-      {{else}}
-      <option></option>
       {{end}}
     {{else}}
-      <option></option>
       {{range $values := (.Filter.Config.GetCollection nil .Context)}}
         {{if (is_included $value (index $values 0))}}
           <option value="{{index $values 0}}" selected>{{index $values 1}}</option>