From f8253a5b305d9d9dbde85ff84baa0b91cf1ae6eb Mon Sep 17 00:00:00 2001 From: Sevan Nerse Date: Tue, 23 Feb 2021 18:29:31 +0300 Subject: [PATCH] date filter will work based on company format and the selection of date range is added --- app/View/Components/SearchString.php | 9 +++- .../assets/js/components/AkauntingSearch.vue | 54 +++++++++++++++---- .../views/components/search-string.blade.php | 6 +-- 3 files changed, 54 insertions(+), 15 deletions(-) diff --git a/app/View/Components/SearchString.php b/app/View/Components/SearchString.php index 9063929e3..c1f579f8b 100644 --- a/app/View/Components/SearchString.php +++ b/app/View/Components/SearchString.php @@ -2,17 +2,21 @@ namespace App\View\Components; -use Illuminate\View\Component; +use App\Traits\DateTime; use Illuminate\Support\Str; -use Symfony\Component\Routing\Exception\RouteNotFoundException; +use Illuminate\View\Component; class SearchString extends Component { + use DateTime; + public $filters; /** string */ public $model; + public $date_format; + /** * Create a new component instance. * @@ -22,6 +26,7 @@ class SearchString extends Component { $this->model = $model; $this->filters = $filters; + $this->date_format = $this->getCompanyDateFormat(); } /** diff --git a/resources/assets/js/components/AkauntingSearch.vue b/resources/assets/js/components/AkauntingSearch.vue index 1a1b2a0d4..2dcf6aa0c 100644 --- a/resources/assets/js/components/AkauntingSearch.vue +++ b/resources/assets/js/components/AkauntingSearch.vue @@ -9,6 +9,7 @@ + @@ -41,9 +42,9 @@ class="form-control datepicker" :placeholder="placeholder" :ref="'input-search-date-field-' + _uid" - v-model="search" + value="" @focus="onInputFocus" - @input="onInputDateSelected" + @on-close="onInputDateSelected" @keyup.enter="onInputConfirm" > @@ -70,6 +71,10 @@
    • + +
  • + +
    • @@ -159,6 +164,7 @@ export default { values: false, }, + range: false, option_values: [], selected_options: [], selected_operator: [], @@ -192,12 +198,24 @@ export default { console.log('Focus :' + this.filter_last_step); }, - onInputDateSelected(event) { - this.filtered[this.filter_index].value = event; + onInputDateSelected(selectedDates, dateStr, instance) { + this.filtered[this.filter_index].value = dateStr; + let date = instance.formatDate(selectedDates[0], 'Y-m-d'); + + if (selectedDates.length > 1) { + let dates = []; + + selectedDates.forEach(function (item) { + dates.push(instance.formatDate(item, 'Y-m-d')); + }, this); + + date = dates.join('-to-'); + } + this.selected_values.push({ - key: event, - value: event, + key: date, + value: dateStr, }); this.$emit('change', this.filtered); @@ -225,8 +243,6 @@ export default { }; } - this.show_date = false; - this.filter_last_step = 'options'; }, @@ -287,7 +303,14 @@ export default { args += 'not '; } - args += this.selected_options[index].key + ':' + this.selected_values[index].key + ' '; + if (this.selected_operator[index].key == '><') { + let dates = this.selected_values[index].key.split('-to-'); + + args += this.selected_options[index].key + '>=' + dates[0] + ' '; + args += this.selected_options[index].key + '<=' + dates[1] + ' '; + } else { + args += this.selected_options[index].key + ':' + this.selected_values[index].key + ' '; + } search_string[path][this.selected_options[index].key] = { 'key': this.selected_values[index].key, @@ -303,6 +326,7 @@ export default { onOptionSelected(value) { this.current_value = value; + this.range = false; let option = false; let option_url = false; @@ -323,6 +347,10 @@ export default { this.option_values[value] = this.filter_list[i].values; } + if (typeof this.filter_list[i].type !== 'undefined' && this.filter_list[i].type == 'date') { + this.range = true; + } + this.selected_options.push(this.filter_list[i]); this.filter_list.splice(i, 1); break; @@ -403,6 +431,9 @@ export default { this.show_date = true; this.$nextTick(() => { + let mode = this.selected_operator[this.filter_index].key == '><' ? 'range' : 'single'; + + this.$refs['input-search-date-field-' + this._uid].fp.set('mode', mode); this.$refs['input-search-date-field-' + this._uid].fp.open(); }); @@ -534,6 +565,9 @@ export default { } if (this.value) { + this.value = this.value.replace(/\s+[a-zA-Z\w]+[<=]+/g, '-to-'); + this.value = this.value.replace('>=', ':'); + let search_string = this.value.replace('not ', '').replace(' not ', ' '); console.log(search_string); @@ -542,7 +576,7 @@ export default { search_string.forEach(function (string) { if (string.search(':') === -1) { - this.search = string.replace(new RegExp("[" + '"' + "]*$"), ''); + this.search = string.replace(/[\"]+/g, ''); } else { let filter = string.split(':'); let option = ''; diff --git a/resources/views/components/search-string.blade.php b/resources/views/components/search-string.blade.php index 026e0b003..bf4d9d317 100644 --- a/resources/views/components/search-string.blade.php +++ b/resources/views/components/search-string.blade.php @@ -5,13 +5,13 @@ operator-is-not-text="{{ trans('general.isnot') }}" no-data-text="{{ trans('general.no_data') }}" no-matching-data-text="{{ trans('general.no_matching_data') }}" - value="{{ rtrim(ltrim(request()->get('search', null), '"'), '"') }}" + value="{{ request()->get('search', null) }}" :filters="{{ json_encode($filters) }}" :date-config="{ allowInput: true, altInput: true, - altFormat: 'Y-m-d', - dateFormat: 'Y-m-d', + altFormat: '{{ $date_format }}', + dateFormat: '{{ $date_format }}', @if (!empty($attributes['min-date'])) minDate: {{ $attributes['min-date'] }} @endif