Search and filter set default filter..

This commit is contained in:
Cüneyt Şentürk 2021-06-01 14:43:27 +03:00
parent 2794ddc257
commit b29ea1bba5
3 changed files with 151 additions and 91 deletions

View File

@ -12,6 +12,8 @@ class SearchString extends Component
public $filters; public $filters;
public $filtered;
/** string */ /** string */
public $model; public $model;
@ -20,10 +22,11 @@ class SearchString extends Component
* *
* @return void * @return void
*/ */
public function __construct(string $model = '', $filters = false) public function __construct(string $model = '', $filters = false, $filtered = false)
{ {
$this->model = $model; $this->model = $model;
$this->filters = $filters; $this->filters = $filters;
$this->filtered = $filtered;
} }
/** /**

View File

@ -142,6 +142,11 @@ export default {
default: () => [], default: () => [],
description: 'List of filters' description: 'List of filters'
}, },
defaultFiltered: {
type: Array,
default: () => [],
description: 'List of filters'
},
dateConfig: null, dateConfig: null,
}, },
@ -195,7 +200,7 @@ export default {
}); });
} }
console.log('Focus :' + this.filter_last_step); //console.log('Focus :' + this.filter_last_step);
}, },
onInputDateSelected(selectedDates, dateStr, instance) { onInputDateSelected(selectedDates, dateStr, instance) {
@ -537,7 +542,7 @@ export default {
this.onInputConfirm(); this.onInputConfirm();
}, },
convertOption (options) { convertOption(options) {
let values = []; let values = [];
// Option set sort_option data // Option set sort_option data
@ -656,6 +661,57 @@ export default {
this.filter_index++; this.filter_index++;
} }
}, this); }, this);
}else if (this.defaultFiltered) {
this.defaultFiltered.forEach(function (filter) {
let option = '';
let operator = '=';
let value = '';
this.filter_list.forEach(function (_filter, i) {
let filter_values = this.convertOption(_filter.values);
if (_filter.key == filter.option) {
console.log('Filter YES');
option = _filter.value;
operator = filter.operator;
filter_values.forEach(function (_value) {
if (_value.key == filter.value) {
value = _value.value;
}
}, this);
this.selected_options.push(this.filter_list[i]);
console.log(operator);
this.selected_operator.push({
key: operator,
});
this.filter_list.splice(i, 1);
this.option_values[_filter.key] = filter_values;
filter_values.forEach(function (value, j) {
if (value.key == filter.value) {
this.selected_values.push(value);
this.option_values[_filter.key].splice(j, 1);
}
}, this);
}
}, this);
this.filtered.push({
option: option,
operator: operator,
value: value
});
this.filter_index++;
}, this);
} }
}, },
@ -719,109 +775,109 @@ export default {
</script> </script>
<style> <style>
.searh-field { .searh-field {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.searh-field .tags-group { .searh-field .tags-group {
display: contents; display: contents;
} }
.searh-field .el-tag.el-tag--primary { .searh-field .el-tag.el-tag--primary {
background: #f6f9fc; background: #f6f9fc;
background-color: #f6f9fc; background-color: #f6f9fc;
border-color: #f6f9fc; border-color: #f6f9fc;
color: #8898aa; color: #8898aa;
margin-top: 7px; margin-top: 7px;
} }
.searh-field .tags-group:hover > span { .searh-field .tags-group:hover > span {
background:#cbd4de; background:#cbd4de;
background-color: #cbd4de; background-color: #cbd4de;
border-color: #cbd4de; border-color: #cbd4de;
} }
.searh-field .el-tag.el-tag--primary .el-tag__close.el-icon-close { .searh-field .el-tag.el-tag--primary .el-tag__close.el-icon-close {
color: #8898aa; color: #8898aa;
} }
.searh-field .el-tag-option { .searh-field .el-tag-option {
border-radius: 0.25rem 0 0 0.25rem; border-radius: 0.25rem 0 0 0.25rem;
margin-left: 10px; margin-left: 10px;
} }
.searh-field .el-tag-operator { .searh-field .el-tag-operator {
border-radius: 0; border-radius: 0;
margin-left: -1px; margin-left: -1px;
margin-right: -1px; margin-right: -1px;
} }
.searh-field .el-tag-value { .searh-field .el-tag-value {
border-radius: 0 0.25rem 0.25rem 0; border-radius: 0 0.25rem 0.25rem 0;
margin-right: 10px; margin-right: 10px;
} }
.searh-field .el-select.input-new-tag { .searh-field .el-select.input-new-tag {
width: 100%; width: 100%;
} }
.searh-field .input-full { .searh-field .input-full {
width: 100%; width: 100%;
} }
.searh-field .btn.btn-link { .searh-field .btn.btn-link {
width: inherit; width: inherit;
text-align: left; text-align: left;
display: flex; display: flex;
margin: 0; margin: 0;
text-overflow: inherit; text-overflow: inherit;
text-align: left; text-align: left;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: unset; padding: unset;
color: #212529; color: #212529;
} }
.searh-field .btn.btn-link.clear { .searh-field .btn.btn-link.clear {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 45px; width: 45px;
height: 45px; height: 45px;
-webkit-box-pack: center; -webkit-box-pack: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
color: #adb5bd; color: #adb5bd;
opacity: 1; opacity: 1;
} }
.searh-field .btn.btn-link.clear:hover { .searh-field .btn.btn-link.clear:hover {
color: #8898aa; color: #8898aa;
} }
.searh-field .btn-helptext { .searh-field .btn-helptext {
margin-left: auto; margin-left: auto;
color: var(--gray); color: var(--gray);
} }
.searh-field .btn:not(:disabled):not(.disabled):active:focus, .searh-field .btn:not(:disabled):not(.disabled):active:focus,
.searh-field .btn:not(:disabled):not(.disabled).active:focus { .searh-field .btn:not(:disabled):not(.disabled).active:focus {
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
.searh-field .form-control.datepicker.flatpickr-input { .searh-field .form-control.datepicker.flatpickr-input {
padding: inherit !important; padding: inherit !important;
} }
.searh-field .dropdown-menu.operator { .searh-field .dropdown-menu.operator {
min-width: 50px !important; min-width: 50px !important;
} }
.searh-field .dropdown-menu.operator .btn i:not(:last-child), .btn svg:not(:last-child) { .searh-field .dropdown-menu.operator .btn i:not(:last-child), .btn svg:not(:last-child) {
margin-right: inherit !important; margin-right: inherit !important;
} }
</style> </style>

View File

@ -7,6 +7,7 @@
no-matching-data-text="{{ trans('general.no_matching_data') }}" no-matching-data-text="{{ trans('general.no_matching_data') }}"
value="{{ request()->get('search', null) }}" value="{{ request()->get('search', null) }}"
:filters="{{ json_encode($filters) }}" :filters="{{ json_encode($filters) }}"
:default-filtered="{{ json_encode($filtered) }}"
:date-config="{ :date-config="{
allowInput: true, allowInput: true,
altInput: true, altInput: true,