Datagrid Breaked
This commit is contained in:
Devansh
parent
07ded4cd3e
commit
4bde5ca931
|
|
@ -106,6 +106,15 @@ class OrderDataGrid extends DataGrid
|
||||||
'index' => 'status',
|
'index' => 'status',
|
||||||
'label' => trans('admin::app.datagrid.status'),
|
'label' => trans('admin::app.datagrid.status'),
|
||||||
'type' => 'string',
|
'type' => 'string',
|
||||||
|
'options' => [
|
||||||
|
'processing' => trans('shop::app.customer.account.order.index.processing'),
|
||||||
|
'completed' => trans('shop::app.customer.account.order.index.completed'),
|
||||||
|
'canceled' => trans('shop::app.customer.account.order.index.canceled'),
|
||||||
|
'closed' => trans('shop::app.customer.account.order.index.closed'),
|
||||||
|
'pending' => trans('shop::app.customer.account.order.index.pending'),
|
||||||
|
'pending_payment' => trans('shop::app.customer.account.order.index.pending-payment'),
|
||||||
|
'fraud' => trans('shop::app.customer.account.order.index.fraud'),
|
||||||
|
],
|
||||||
'sortable' => true,
|
'sortable' => true,
|
||||||
'searchable' => true,
|
'searchable' => true,
|
||||||
'filterable' => true,
|
'filterable' => true,
|
||||||
|
|
|
||||||
|
|
@ -77,13 +77,13 @@ class OrderDataGrid extends DataGrid
|
||||||
'label' => trans('shop::app.customer.account.order.index.status'),
|
'label' => trans('shop::app.customer.account.order.index.status'),
|
||||||
'type' => 'string',
|
'type' => 'string',
|
||||||
'options' => [
|
'options' => [
|
||||||
'processing' => 'Processing',
|
'processing' => trans('shop::app.customer.account.order.index.processing'),
|
||||||
'completed' => 'Completed',
|
'completed' => trans('shop::app.customer.account.order.index.completed'),
|
||||||
'canceled' => 'Cancelled',
|
'canceled' => trans('shop::app.customer.account.order.index.canceled'),
|
||||||
'closed' => 'Closed',
|
'closed' => trans('shop::app.customer.account.order.index.closed'),
|
||||||
'pending' => 'Pending',
|
'pending' => trans('shop::app.customer.account.order.index.pending'),
|
||||||
'pending_payment' => 'Pending Payment',
|
'pending_payment' => trans('shop::app.customer.account.order.index.pending-payment'),
|
||||||
'fraud' => 'Fraud',
|
'fraud' => trans('shop::app.customer.account.order.index.fraud'),
|
||||||
],
|
],
|
||||||
'searchable' => false,
|
'searchable' => false,
|
||||||
'sortable' => true,
|
'sortable' => true,
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
||||||
{
|
{
|
||||||
"/js/ui.js": "/js/ui.js?id=2d5e481fb67990d5d925",
|
"/js/ui.js": "/js/ui.js?id=6abdc1fc415a79d9293d",
|
||||||
"/css/ui.css": "/css/ui.css?id=c8a7ade09358a1d61a4a"
|
"/css/ui.css": "/css/ui.css?id=c8a7ade09358a1d61a4a"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<span class="filter-tag" style="text-transform: capitalize">
|
||||||
|
<span v-if="filter.column == 'perPage'">perPage</span>
|
||||||
|
|
||||||
|
<span v-else>{{ filter.label }}</span>
|
||||||
|
|
||||||
|
<span class="wrapper" v-if="filter.prettyValue">
|
||||||
|
{{ filter.prettyValue }}
|
||||||
|
<span
|
||||||
|
class="icon cross-icon"
|
||||||
|
v-on:click="removeFilter(filter)"
|
||||||
|
></span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="wrapper" v-else>
|
||||||
|
{{ decodeURIComponent(filter.val) }}
|
||||||
|
<span
|
||||||
|
class="icon cross-icon"
|
||||||
|
v-on:click="removeFilter(filter)"
|
||||||
|
></span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['filter'],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
removeFilter() {
|
||||||
|
this.$emit('onRemoveFilter');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="pagination shop mt-50"
|
||||||
|
v-if="
|
||||||
|
typeof paginated !== 'undefined' &&
|
||||||
|
paginated &&
|
||||||
|
records.last_page > 1
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
v-for="(link, index) in records.links"
|
||||||
|
:key="index"
|
||||||
|
href="javascript:void(0);"
|
||||||
|
:data-page="link.url"
|
||||||
|
:class="
|
||||||
|
`page-item ${index == 0 ? 'previous' : ''} ${
|
||||||
|
link.active ? 'active' : ''
|
||||||
|
} ${index == records.links.length - 1 ? 'next' : ''}`
|
||||||
|
"
|
||||||
|
@click="changePage(link.url)"
|
||||||
|
>
|
||||||
|
<i class="icon angle-left-icon" v-if="index == 0"></i>
|
||||||
|
|
||||||
|
<i
|
||||||
|
class="icon angle-right-icon"
|
||||||
|
v-else-if="index == records.links.length - 1"
|
||||||
|
></i>
|
||||||
|
|
||||||
|
<span v-text="link.label" v-else></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['paginated', 'records'],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
changePage(pageLink) {
|
||||||
|
this.$emit('onChangePage', { data: { pageLink } });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,38 +0,0 @@
|
||||||
<template>
|
|
||||||
<Flatpickr class="datetime-field" :options="fpOptions" />
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
window.Vue = require("vue");
|
|
||||||
import VueFlatpickr from "vue-flatpickr";
|
|
||||||
import "vue-flatpickr/theme/airbnb.css";
|
|
||||||
|
|
||||||
Vue.use(VueFlatpickr);
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
const now = new Date();
|
|
||||||
|
|
||||||
return {
|
|
||||||
fpOptions: {
|
|
||||||
utc: false,
|
|
||||||
defaultDate: now,
|
|
||||||
enableTime: true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted: function() {
|
|
||||||
console.log("Date time compoenent mounted");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.datetime-field {
|
|
||||||
border: 2px solid #c7c7c7;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
height: 35px;
|
|
||||||
padding-left: 5px;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<div class="control-group">
|
||||||
|
<select class="control" name="channel" @change="changeChannel($event)">
|
||||||
|
<option
|
||||||
|
value="all"
|
||||||
|
:selected="extraFilters.current.channel == 'all'"
|
||||||
|
v-text="translations.allChannels"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
:key="channelKey"
|
||||||
|
v-for="(channel, channelKey) in extraFilters.channels"
|
||||||
|
v-text="channel.name"
|
||||||
|
:value="channel.code"
|
||||||
|
:selected="channel.code == extraFilters.current.channel"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['translations', 'extraFilters'],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
changeChannel({ target }) {
|
||||||
|
this.$emit('onFilter', {
|
||||||
|
data: { type: 'channel', value: target.value }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,457 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="dropdown-toggle">
|
||||||
|
<div class="grid-dropdown-header">
|
||||||
|
<span class="name" v-text="translations.filter"></span>
|
||||||
|
<i class="icon arrow-down-icon active"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dropdown-list dropdown-container" style="display: none">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="control-group">
|
||||||
|
<select
|
||||||
|
class="filter-column-select control"
|
||||||
|
v-model="filterColumn"
|
||||||
|
v-on:change="getColumnOrAlias(filterColumn)"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-text="translations.column"
|
||||||
|
selected
|
||||||
|
disabled
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
:key="columnKey"
|
||||||
|
v-for="(column, columnKey) in columns"
|
||||||
|
:value="column.index"
|
||||||
|
v-text="column.label"
|
||||||
|
v-if="
|
||||||
|
typeof column.filterable !== 'undefined' &&
|
||||||
|
column.filterable
|
||||||
|
"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li v-if="stringConditionSelect">
|
||||||
|
<div class="control-group">
|
||||||
|
<select class="control" v-model="stringCondition">
|
||||||
|
<option
|
||||||
|
v-text="translations.condition"
|
||||||
|
selected
|
||||||
|
disabled
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.contains"
|
||||||
|
value="like"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.ncontains"
|
||||||
|
value="nlike"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.equals"
|
||||||
|
value="eq"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.nequals"
|
||||||
|
value="neqs"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li v-if="stringCondition != null">
|
||||||
|
<div
|
||||||
|
class="control-group"
|
||||||
|
v-if="isCurrentFilterColumnHasOptions()"
|
||||||
|
>
|
||||||
|
<select class="control" v-model="stringValue">
|
||||||
|
<option
|
||||||
|
:key="key"
|
||||||
|
v-text="option"
|
||||||
|
v-value="key"
|
||||||
|
v-for="(option,
|
||||||
|
key) in this.getCurrentFilterOptions()"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-group" v-else>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="control response-string"
|
||||||
|
:placeholder="translations.valueHere"
|
||||||
|
v-model="stringValue"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li v-if="numberConditionSelect">
|
||||||
|
<div class="control-group">
|
||||||
|
<select class="control" v-model="numberCondition">
|
||||||
|
<option
|
||||||
|
v-text="translations.condition"
|
||||||
|
selected
|
||||||
|
disabled
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.equals"
|
||||||
|
value="eq"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.nequals"
|
||||||
|
value="neqs"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.greater"
|
||||||
|
value="gt"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.less"
|
||||||
|
value="lt"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.greatere"
|
||||||
|
value="gte"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.lesse"
|
||||||
|
value="lte"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li v-if="numberCondition != null">
|
||||||
|
<div class="control-group">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="control response-number"
|
||||||
|
v-on:input="filterNumberInput"
|
||||||
|
v-model="numberValue"
|
||||||
|
:placeholder="translations.numericValueHere"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li v-if="booleanConditionSelect">
|
||||||
|
<div class="control-group">
|
||||||
|
<select class="control" v-model="booleanCondition">
|
||||||
|
<option
|
||||||
|
v-text="translations.condition"
|
||||||
|
selected
|
||||||
|
disabled
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.equals"
|
||||||
|
value="eq"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.nequals"
|
||||||
|
value="neqs"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li v-if="booleanCondition != null">
|
||||||
|
<div class="control-group">
|
||||||
|
<select class="control" v-model="booleanValue">
|
||||||
|
<option
|
||||||
|
v-text="translations.value"
|
||||||
|
selected
|
||||||
|
disabled
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.true"
|
||||||
|
value="1"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.false"
|
||||||
|
value="0"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li v-if="datetimeConditionSelect">
|
||||||
|
<div class="control-group">
|
||||||
|
<select class="control" v-model="datetimeCondition">
|
||||||
|
<option
|
||||||
|
v-text="translations.condition"
|
||||||
|
selected
|
||||||
|
disabled
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.equals"
|
||||||
|
value="eq"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.nequals"
|
||||||
|
value="neqs"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.greater"
|
||||||
|
value="gt"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.less"
|
||||||
|
value="lt"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.greatere"
|
||||||
|
value="gte"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
v-text="translations.lesse"
|
||||||
|
value="lte"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li v-if="datetimeCondition != null">
|
||||||
|
<div class="control-group">
|
||||||
|
<input
|
||||||
|
class="control"
|
||||||
|
v-model="datetimeValue"
|
||||||
|
type="date"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<button
|
||||||
|
v-text="translations.apply"
|
||||||
|
class="btn btn-sm btn-primary apply-filter"
|
||||||
|
v-on:click="getResponse"
|
||||||
|
></button>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['columns', 'translations'],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
/**
|
||||||
|
* To Do (@devansh-webkul):
|
||||||
|
*
|
||||||
|
* - Try to minimize these data props also.
|
||||||
|
* - Refactor all repeative properties.
|
||||||
|
*/
|
||||||
|
return {
|
||||||
|
type: null,
|
||||||
|
columnOrAlias: '',
|
||||||
|
|
||||||
|
stringConditionSelect: false,
|
||||||
|
numberConditionSelect: false,
|
||||||
|
booleanConditionSelect: false,
|
||||||
|
datetimeConditionSelect: false,
|
||||||
|
|
||||||
|
stringCondition: null,
|
||||||
|
numberCondition: null,
|
||||||
|
booleanCondition: null,
|
||||||
|
datetimeCondition: null,
|
||||||
|
|
||||||
|
stringValue: null,
|
||||||
|
numberValue: 0,
|
||||||
|
booleanValue: null,
|
||||||
|
datetimeValue: '2000-01-01'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
filterNumberInput: function(e) {
|
||||||
|
this.numberValue = e.target.value.replace(/[^0-9\,\.]+/g, '');
|
||||||
|
},
|
||||||
|
|
||||||
|
getCurrentFilterColumn() {
|
||||||
|
return this.columns.find(
|
||||||
|
column => column.index === this.filterColumn
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
isCurrentFilterColumnHasOptions() {
|
||||||
|
let currentFilterColumn = this.getCurrentFilterColumn();
|
||||||
|
|
||||||
|
return (
|
||||||
|
currentFilterColumn && currentFilterColumn.options !== undefined
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
getCurrentFilterOptions() {
|
||||||
|
if (this.isCurrentFilterColumnHasOptions()) {
|
||||||
|
return this.getCurrentFilterColumn().options ?? [];
|
||||||
|
}
|
||||||
|
|
||||||
|
throw "Options are not defined. Don't use this method if options are not available.";
|
||||||
|
},
|
||||||
|
|
||||||
|
getColumnOrAlias(columnOrAlias) {
|
||||||
|
this.columnOrAlias = columnOrAlias;
|
||||||
|
|
||||||
|
for (let column in this.columns) {
|
||||||
|
if (this.columns[column].index === this.columnOrAlias) {
|
||||||
|
this.type = this.columns[column].type;
|
||||||
|
|
||||||
|
switch (this.type) {
|
||||||
|
case 'string': {
|
||||||
|
this.stringConditionSelect = true;
|
||||||
|
this.numberConditionSelect = false;
|
||||||
|
this.booleanConditionSelect = false;
|
||||||
|
this.datetimeConditionSelect = false;
|
||||||
|
|
||||||
|
this.nullify();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'datetime': {
|
||||||
|
this.stringConditionSelect = false;
|
||||||
|
this.numberConditionSelect = false;
|
||||||
|
this.booleanConditionSelect = false;
|
||||||
|
this.datetimeConditionSelect = true;
|
||||||
|
|
||||||
|
this.nullify();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'boolean': {
|
||||||
|
this.stringConditionSelect = false;
|
||||||
|
this.numberConditionSelect = false;
|
||||||
|
this.booleanConditionSelect = true;
|
||||||
|
this.datetimeConditionSelect = false;
|
||||||
|
|
||||||
|
this.nullify();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'number': {
|
||||||
|
this.stringConditionSelect = false;
|
||||||
|
this.numberConditionSelect = true;
|
||||||
|
this.booleanConditionSelect = false;
|
||||||
|
this.datetimeConditionSelect = false;
|
||||||
|
|
||||||
|
this.nullify();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'price': {
|
||||||
|
this.stringConditionSelect = false;
|
||||||
|
this.numberConditionSelect = true;
|
||||||
|
this.booleanConditionSelect = false;
|
||||||
|
this.datetimeConditionSelect = false;
|
||||||
|
|
||||||
|
this.nullify();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getResponse: function() {
|
||||||
|
let label = '';
|
||||||
|
|
||||||
|
for (let colIndex in this.columns) {
|
||||||
|
if (this.columns[colIndex].index == this.columnOrAlias) {
|
||||||
|
label = this.columns[colIndex].label;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.type === 'string' && this.stringValue !== null) {
|
||||||
|
this.$emit('onFilter', {
|
||||||
|
data: {
|
||||||
|
column: this.columnOrAlias,
|
||||||
|
condition: this.stringCondition,
|
||||||
|
response: encodeURIComponent(this.stringValue),
|
||||||
|
label
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (this.type === 'number') {
|
||||||
|
let indexConditions = true;
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.filterIndex === this.columnOrAlias &&
|
||||||
|
(this.numberValue === 0 || this.numberValue < 0)
|
||||||
|
) {
|
||||||
|
indexConditions = false;
|
||||||
|
|
||||||
|
alert(this.translations.zeroIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (indexConditions) {
|
||||||
|
this.$emit('onFilter', {
|
||||||
|
data: {
|
||||||
|
column: this.columnOrAlias,
|
||||||
|
condition: this.numberCondition,
|
||||||
|
response: this.numberValue,
|
||||||
|
label
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (this.type === 'boolean') {
|
||||||
|
this.$emit('onFilter', {
|
||||||
|
data: {
|
||||||
|
column: this.columnOrAlias,
|
||||||
|
condition: this.booleanCondition,
|
||||||
|
response: this.booleanValue,
|
||||||
|
label
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (this.type === 'datetime') {
|
||||||
|
this.$emit('onFilter', {
|
||||||
|
data: {
|
||||||
|
column: this.columnOrAlias,
|
||||||
|
condition: this.datetimeCondition,
|
||||||
|
response: this.datetimeValue,
|
||||||
|
label
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (this.type === 'price') {
|
||||||
|
this.$emit('onFilter', {
|
||||||
|
data: {
|
||||||
|
column: this.columnOrAlias,
|
||||||
|
condition: this.numberCondition,
|
||||||
|
response: this.numberValue,
|
||||||
|
label
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
nullify() {
|
||||||
|
this.stringCondition = null;
|
||||||
|
this.datetimeCondition = null;
|
||||||
|
this.booleanCondition = null;
|
||||||
|
this.numberCondition = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<template>
|
||||||
|
<div class="control-group">
|
||||||
|
<select
|
||||||
|
class="control"
|
||||||
|
id="customer-group-switcher"
|
||||||
|
name="customer_group"
|
||||||
|
@change="changeCustomerGroup($event)"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
value="all"
|
||||||
|
:selected="extraFilters.current.customer_group == 'all'"
|
||||||
|
v-text="translations.allCustomerGroups"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
:key="customerGroupKey"
|
||||||
|
v-for="(customerGroup,
|
||||||
|
customerGroupKey) in extraFilters.customer_groups"
|
||||||
|
v-text="customerGroup.name"
|
||||||
|
:value="customerGroup.id"
|
||||||
|
:selected="
|
||||||
|
customerGroup.id == extraFilters.current.customer_group
|
||||||
|
"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['extraFilters', 'translations'],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
changeCustomerGroup({ target }) {
|
||||||
|
this.$emit('onFilter', {
|
||||||
|
data: { type: 'customer_group', value: target.value }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<div class="control-group">
|
||||||
|
<select class="control" name="locale" @change="changeLocale($event)">
|
||||||
|
<option
|
||||||
|
value="all"
|
||||||
|
:selected="extraFilters.current.locale == 'all'"
|
||||||
|
v-text="translations.allLocales"
|
||||||
|
></option>
|
||||||
|
|
||||||
|
<option
|
||||||
|
:key="localeKey"
|
||||||
|
v-for="(locale, localeKey) in extraFilters.locales"
|
||||||
|
v-text="locale.name"
|
||||||
|
:value="locale.code"
|
||||||
|
:selected="locale.code == extraFilters.current.locale"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['extraFilters', 'translations'],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
changeLocale({ target }) {
|
||||||
|
this.$emit('onFilter', {
|
||||||
|
data: { type: 'locale', value: target.value }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<div class="control-group">
|
||||||
|
<label
|
||||||
|
class="per-page-label"
|
||||||
|
for="perPage"
|
||||||
|
v-text="translations.itemsPerPage"
|
||||||
|
></label>
|
||||||
|
|
||||||
|
<select
|
||||||
|
id="perPage"
|
||||||
|
class="control"
|
||||||
|
name="perPage"
|
||||||
|
v-model="currentSelection"
|
||||||
|
v-on:change="paginate"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-for="index in this.perPageCount"
|
||||||
|
v-text="index"
|
||||||
|
:key="index"
|
||||||
|
:value="index"
|
||||||
|
></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['perPage', 'perPageCount', 'translations'],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentSelection: this.perPage
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
paginate() {
|
||||||
|
this.$emit('onFilter', {
|
||||||
|
data: { perPage: this.currentSelection }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<div class="search-filter">
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
id="search-field"
|
||||||
|
class="control"
|
||||||
|
:placeholder="translations.search"
|
||||||
|
v-model="searchValue"
|
||||||
|
v-on:keyup.enter="search(searchValue)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="icon-wrapper">
|
||||||
|
<span
|
||||||
|
class="icon search-icon search-btn"
|
||||||
|
v-on:click="search(searchValue)"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['translations'],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchValue: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
search(searchValue) {
|
||||||
|
this.$emit('onFilter', { data: { searchValue } });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
getDatagridsInfoStorageKey() {
|
||||||
|
return 'datagridsInfo';
|
||||||
|
},
|
||||||
|
|
||||||
|
analyzeDatagridsInfo() {
|
||||||
|
if (!this.isDataLoaded && this.url === `${this.src}?v=1`) {
|
||||||
|
let datagridInfo = this.getCurrentDatagridInfo();
|
||||||
|
|
||||||
|
if (datagridInfo) {
|
||||||
|
/**
|
||||||
|
* Will check this later. Don't remove it.
|
||||||
|
*/
|
||||||
|
// this.filterCurrentDatagridFromDatagridsInfo();
|
||||||
|
|
||||||
|
this.url = datagridInfo.previousUrl;
|
||||||
|
this.filters = datagridInfo.previousFilters;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let datagridsInfo = this.getDatagridsInfo();
|
||||||
|
|
||||||
|
if (datagridsInfo && datagridsInfo.length > 0) {
|
||||||
|
if (this.isCurrentDatagridInfoExists()) {
|
||||||
|
datagridsInfo = datagridsInfo.map(datagrid => {
|
||||||
|
if (datagrid.id === this.id) {
|
||||||
|
return this.getDatagridsInfoDefaults();
|
||||||
|
}
|
||||||
|
|
||||||
|
return datagrid;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
datagridsInfo.push(this.getDatagridsInfoDefaults());
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
datagridsInfo = [this.getDatagridsInfoDefaults()];
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateDatagridsInfo(datagridsInfo);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
isCurrentDatagridInfoExists() {
|
||||||
|
let datagridsInfo = this.getDatagridsInfo();
|
||||||
|
|
||||||
|
return !!datagridsInfo.find(({ id }) => id === this.id);
|
||||||
|
},
|
||||||
|
|
||||||
|
getCurrentDatagridInfo() {
|
||||||
|
let datagridsInfo = this.getDatagridsInfo();
|
||||||
|
|
||||||
|
return this.isCurrentDatagridInfoExists()
|
||||||
|
? datagridsInfo.find(({ id }) => id === this.id)
|
||||||
|
: null;
|
||||||
|
},
|
||||||
|
|
||||||
|
getDatagridsInfoDefaults() {
|
||||||
|
return {
|
||||||
|
id: this.id,
|
||||||
|
previousFilters: this.filters,
|
||||||
|
previousUrl: this.url
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
getDatagridsInfo() {
|
||||||
|
let storageInfo = localStorage.getItem(
|
||||||
|
this.getDatagridsInfoStorageKey()
|
||||||
|
);
|
||||||
|
|
||||||
|
return !this.isValidJsonString(storageInfo)
|
||||||
|
? []
|
||||||
|
: JSON.parse(storageInfo) ?? [];
|
||||||
|
},
|
||||||
|
|
||||||
|
updateDatagridsInfo(info) {
|
||||||
|
localStorage.setItem(
|
||||||
|
this.getDatagridsInfoStorageKey(),
|
||||||
|
JSON.stringify(info)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
filterCurrentDatagridFromDatagridsInfo() {
|
||||||
|
let datagridsInfo = this.getDatagridsInfo();
|
||||||
|
|
||||||
|
datagridsInfo = datagridsInfo.filter(({ id }) => id !== this.id);
|
||||||
|
|
||||||
|
this.updateDatagridsInfo(datagridsInfo);
|
||||||
|
},
|
||||||
|
|
||||||
|
isValidJsonString(str) {
|
||||||
|
try {
|
||||||
|
JSON.parse(str);
|
||||||
|
} catch (e) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue