refs search filter files..

app/View/Components/SearchString.php

@@ -30,12 +30,13 @@ class SearchString extends Component
     {
         $searc_string = config('search-string');
 
-        $this->filters = false;
+        $this->filters = [];
 
         if (!empty($searc_string[$this->model])) {
             $columns = $searc_string[$this->model]['columns'];
 
             foreach ($columns as $column => $options) {
+                // This column skip for filter
                 if (!empty($options['searchable'])) {
                     continue;
                 }
@@ -43,13 +44,13 @@ class SearchString extends Component
                 if (!is_array($options)) {
                     $column = $options;
                 }
-
-                $name = $this->getFilterName($column);
     
                 $this->filters[] = [
-                    'key' => $column,
+                    'key' => $this->getFilterKey($column, $options),
-                    'value' => $name,
+                    'value' => $this->getFilterName($column),
-                    'url' => !empty($options['route']) ? route($options['route'][0], $options['route'][1]) : ''
+                    'type' => $this->getFilterType($options),
+                    'url' => $this->getFilterUrl($column, $options),
+                    'values' => $this->getFilterValues($options),
                 ];
             }
         }
@@ -57,6 +58,15 @@ class SearchString extends Component
         return view('components.search-string');
     }
 
+    protected function getFilterKey($column, $options)
+    {
+        if (isset($options['relationship'])) {
+            $column .= '.id';
+        }
+
+        return $column;
+    }
+
     protected function getFilterName($column)
     {
         if (strpos($column, '_id') !== false) {
@@ -79,4 +89,68 @@ class SearchString extends Component
 
         return $name;
     }
+
+    protected function getFilterType($options) 
+    {
+        $type = 'select';
+
+        if (isset($options['boolean'])) {
+            $type = 'boolean';
+        }
+
+        return $type;
+    }
+
+    protected function getFilterUrl($column, $options) 
+    {
+        $url = '';
+
+        if (isset($options['boolean'])) {
+            return $url;
+        }
+
+        if (!empty($options['route'])) {
+            if (is_array($options['route'])) {
+                $url = route($options['route'][0], $options['route'][1]);
+            } else {
+                $url = route($options['route']);
+            }
+        } else {
+            if (strpos($this->model, 'Modules') !== false) {
+                $module_class = explode('\\', $this->model);
+
+                $url .= Str::slug($module_class[1], '-') . '::';
+            }
+            
+            if (strpos($column, '_id') !== false) {
+                $column = str_replace('_id', '', $column);
+            }
+    
+            $plural = Str::plural($column, 2);
+
+            $url = route($url . $plural . '.index');
+        }
+
+        return $url;
+    }
+
+    protected function getFilterValues($options) 
+    {
+        $values = [];
+
+        if (isset($options['boolean'])) {
+            $values = [
+                [
+                    'key' => 0,
+                    'value' => trans('general.no'),
+                ],
+                [
+                    'key' => 1,
+                    'value' => trans('general.yes'),
+                ],
+            ];
+        }
+
+        return $values;
+    }
 }

resources/assets/js/components/AkauntingSearch.vue

@@ -36,16 +36,16 @@
           <button type="button" class="btn btn-link" @click="onOptionSelected(option.key)">{{ option.value }}</button>
         </li>
         <li ref="" v-if="search" class="dropdown-item">
-          <button type="button" class="btn btn-link" @click="onInputConfirm">{{ textSearch }}</button>
+          <button type="button" class="btn btn-link" @click="onInputConfirm">{{ searchText }}</button>
         </li>
       </div>
 
       <div class="dropdown-menu" :class="[{'show': visible.operator}]">
         <li ref="" class="dropdown-item">
-          <button type="button" class="btn btn-link" @click="onOperatorSelected('=')">=<span class="btn-helptext">is</span></button>
+          <button type="button" class="btn btn-link" @click="onOperatorSelected('=')">{{ operatorIsText }}<span class="btn-helptext d-none">is</span></button>
         </li>
         <li ref="" class="dropdown-item">
-          <button type="button" class="btn btn-link" @click="onOperatorSelected('!=')">!=<span class="btn-helptext">is not</span></button>
+          <button type="button" class="btn btn-link" @click="onOperatorSelected('!=')">{{ operatorIsNotText }}<span class="btn-helptext d-none">is not</span></button>
         </li>
       </div>
 
@@ -53,6 +53,9 @@
         <li ref="" class="dropdown-item" v-for="(value) in filteredValues" :data-value="value.key">
           <button type="button" class="btn btn-link" @click="onValueSelected(value.key)">{{ value.value }}</button>
         </li>
+        <li ref="" class="dropdown-item" v-if="!filteredValues.length">
+          <button type="button" class="btn btn-link">{{ noMatchingDataText }}</button>
+        </li>
       </div>
     </div>
   </div>
@@ -68,11 +71,31 @@ export default {
       default: 'Search or filter results...',
       description: 'Input placeholder'
     },
-    textSearch: {
+    searchText: {
       type: String,
       default: 'Search for this text',
       description: 'Input placeholder'
     },
+    operatorIsText: {
+      type: String,
+      default: 'is',
+      description: 'Operator is "="'
+    },
+    operatorIsNotText: {
+      type: String,
+      default: 'is not',
+      description: 'Operator is not "!="'
+    },
+    noDataText: {
+        type: String,
+        default: 'No Data',
+        description: "Selectbox empty options message"
+    },
+    noMatchingDataText: {
+        type: String,
+        default: 'No Matchign Data',
+        description: "Selectbox search option not found item message"
+    },
     value: {
       type: String,
       default: null,
@@ -113,6 +136,10 @@ export default {
 
   methods: {
     onInputFocus() {
+      if (!this.filters.length) {
+        return;
+      }
+
       this.visible[this.filter_last_step] = true;
 
       this.$nextTick(() => {
@@ -122,6 +149,31 @@ export default {
 
     onInput(evt) {
       this.search = evt.target.value;
+  
+      let option_url = this.selected_options[this.filter_index].url;
+
+      if (this.search) {
+        option_url += '?search=' + this.search;
+      }
+
+      window.axios.get(option_url)
+      .then(response => {
+          this.values = [];
+
+          let data = response.data.data;
+
+          data.forEach(function (item) {
+            this.values.push({
+              key: item.id,
+              value: item.name
+            });
+          }, this);
+
+          this.option_values[value] = this.values;
+      })
+      .catch(error => {
+
+      });
 
       this.$emit('input', evt.target.value);
     },
@@ -138,17 +190,17 @@ export default {
           args += '?search=';
         }
 
-        args += this.selected_options[index].key + ':' + this.selected_values[index].key;
+        args += this.selected_options[index].key + ':' + this.selected_values[index].key + ' ';
       }, this);
 
-      window.location = url + '/common/items' + args;
+      window.location = window.location.href.replace(window.location.search, '') + args;
     },
 
     onOptionSelected(value) {
       this.current_value = value;
 
       let option = false;
-      let option_url = url + '';
+      let option_url = url;
 
       for (let i = 0; i < this.filter_list.length; i++) {
         if (this.filter_list[i].key == value) {
@@ -158,6 +210,10 @@ export default {
             option_url = this.filter_list[i].url;
           }
 
+          if (typeof this.filter_list[i].type !== 'undefined' && this.filter_list[i].type == 'boolean') {
+            this.option_values[value] = this.filter_list[i].values;
+          }
+
           this.selected_options.push(this.filter_list[i]);
           this.filter_list.splice(i, 1);
           break;
@@ -190,11 +246,7 @@ export default {
             this.option_values[value] = this.values;
         })
         .catch(error => {
-            this.form.loading = false;
 
-            this.form.onFail(error);
-
-            this.method_show_html = error.message;
         });
       } else {
         this.values = this.option_values[value];
@@ -277,13 +329,15 @@ export default {
     onSearchAndFilterClear() {
       this.filtered = [];
       this.search = '';
+
+      this.onInputConfirm();
     },
 
     closeIfClickedOutside(event) {
       if (!document.getElementById('search-field-' + this._uid).contains(event.target)) {
-          this.visible.options = false;
+          //this.visible.options = false;
-          this.visible.operator = false;
+          //this.visible.operator = false;
-          this.visible.values = false;
+          //this.visible.values = false;
 
           document.removeEventListener('click', this.closeIfClickedOutside);
       }
@@ -299,12 +353,41 @@ export default {
           this.search = string;
         } else {
           let filter = string.split(':');
+          let option = '';
+          let value = '';
+
+          this.filter_list.forEach(function (_filter, i) {
+            if (_filter.key == filter[0]) {
+              option = _filter.value;
+
+              _filter.values.forEach(function (_value) {
+                if (_value.key == filter[1]) {
+                  value = _value.value;
+                }
+              }, this);
+
+              this.selected_options.push(this.filter_list[i]);
+              this.filter_list.splice(i, 1);
+
+              this.option_values[_filter.key] = _filter.values;
+
+              _filter.values.forEach(function (value, j) {
+                if (value.key == filter[1]) {
+                  this.selected_values.push(value);
+
+                  this.option_values[_filter.key].splice(j, 1);
+                }
+              }, this);
+            }
+          }, this);
 
           this.filtered.push({
-            option: filter[0],
+            option: option,
             operator: '=',
-            value: filter[1]
+            value: value
-          })
+          });
+
+          this.filter_index++;
         }
       }, this);
     }

resources/lang/en-GB/general.php

@@ -105,7 +105,8 @@ return [
     'to'                    => 'To',
     'print'                 => 'Print',
     'search'                => 'Search',
-    'search_placeholder'    => 'Search or filter results..',
+    'search_text'           => 'Search for this text',
+    'search_placeholder'    => 'Type to search..',
     'filter'                => 'Filter',
     'help'                  => 'Help',
     'all'                   => 'All',
@@ -152,6 +153,8 @@ return [
     'no_matching_data'      => 'No matching data',
     'clear_cache'           => 'Clear Cache',
     'go_to_dashboard'       => 'Go to dashboard',
+    'is'                    => 'is',
+    'isnot'                 => 'is not', 
 
     'card' => [
         'name'                  => 'Name on Card',
@@ -181,6 +184,11 @@ return [
         'no_file_selected'  => 'No file selected...',
     ],
 
+    'placeholder' => [
+        'search'            => 'Type to search..',
+        'search_and_filter' => 'Search or filter results..',
+    ],
+
     'date_range' => [
         'today' => 'Today',
         'yesterday' => 'Yesterday',

resources/views/components/search-string.blade.php

@@ -1,7 +1,10 @@
-
 <akaunting-search
-    placeholder="{{ trans('general.search_placeholder') }}"
+    placeholder="{{ (!empty($filters)) ? trans('general.placeholder.search_and_filter') : trans('general.search_placeholder')}}"
-    text-search="{{ trans('Search for this text') }}"
+    search-text="{{ trans('general.search_text') }}"
+    operator-is-text="{{ trans('general.is') }}"
+    operator-is-not-text="{{ trans('general.isnot') }}" 
+    no-data-text="{{ trans('general.no_data') }}"
+    no-matching-data-text="{{ trans('general.no_matching_data') }}"
     value="{{ request()->get('search', null) }}"
     :filters="{{ json_encode($filters) }}"
 ></akaunting-search>