Search and filter set default filter..
This commit is contained in:
parent
2794ddc257
commit
b29ea1bba5
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -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>
|
||||||
|
@ -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,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user