refs search filter files..

This commit is contained in:
Cüneyt Şentürk 2020-11-06 22:34:53 +03:00
parent ff84384024
commit a9ab2e61a0
4 changed files with 195 additions and 27 deletions

View File

@ -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,
'value' => $name,
'url' => !empty($options['route']) ? route($options['route'][0], $options['route'][1]) : ''
'key' => $this->getFilterKey($column, $options),
'value' => $this->getFilterName($column),
'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;
}
}

View File

@ -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.operator = false;
this.visible.values = false;
//this.visible.options = false;
//this.visible.operator = 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);
}

View File

@ -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',

View File

@ -1,7 +1,10 @@
<akaunting-search
placeholder="{{ trans('general.search_placeholder') }}"
text-search="{{ trans('Search for this text') }}"
placeholder="{{ (!empty($filters)) ? trans('general.placeholder.search_and_filter') : trans('general.search_placeholder')}}"
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>