forked from verdnatura/salix-front
fix: orderCatalogFilter order
This commit is contained in:
parent
e11e51f432
commit
190579e7fd
|
|
@ -32,14 +32,22 @@ const categoryList = ref(null);
|
|||
const selectedCategoryFk = ref(getParamWhere(route, 'categoryFk'));
|
||||
const typeList = ref([]);
|
||||
const selectedTypeFk = ref(null);
|
||||
const validationsStore = useValidator();
|
||||
const selectedOrder = ref(null);
|
||||
const selectedOrderField = ref(null);
|
||||
const moreFields = ref([]);
|
||||
const moreFieldsOrder = ref([]);
|
||||
const selectedTag = ref(null);
|
||||
const tagValues = ref([{}]);
|
||||
const tagOptions = ref([]);
|
||||
const vnFilterPanelRef = ref();
|
||||
const orderByList = ref([
|
||||
{ id: 'relevancy DESC, name', name: t('params.relevancy'), priority: 999 },
|
||||
{ id: 'showOrder, price', name: t('params.colorAndPrice'), priority: 999 },
|
||||
{ id: 'name', name: t('params.name'), priority: 999 },
|
||||
{ id: 'price', name: t('params.price'), priority: 999 },
|
||||
]);
|
||||
const orderWayList = ref([
|
||||
{ id: 'ASC', name: t('params.ASC') },
|
||||
{ id: 'DESC', name: t('params.DESC') },
|
||||
]);
|
||||
const orderBySelected = ref('relevancy DESC, name');
|
||||
const orderWaySelected = ref('ASC');
|
||||
|
||||
const createValue = (val, done) => {
|
||||
if (val.length > 2) {
|
||||
|
|
@ -140,35 +148,6 @@ const removeTagChip = (selection, params, search) => {
|
|||
search();
|
||||
};
|
||||
|
||||
const onOrderChange = (value, params) => {
|
||||
const tagObj = JSON.parse(params.orderBy);
|
||||
tagObj.way = value.name;
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
};
|
||||
|
||||
const onOrderFieldChange = (value, params) => {
|
||||
const tagObj = JSON.parse(params.orderBy);
|
||||
switch (value) {
|
||||
case 'Relevancy':
|
||||
tagObj.name = value + ' DESC, name';
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
break;
|
||||
case 'ColorAndPrice':
|
||||
tagObj.name = 'showOrder, price';
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
break;
|
||||
case 'Name':
|
||||
tagObj.name = 'name';
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
break;
|
||||
case 'Price':
|
||||
tagObj.name = 'price';
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
break;
|
||||
}
|
||||
};
|
||||
const _moreFields = ['ASC', 'DESC'];
|
||||
const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
|
||||
const setCategoryList = (data) => {
|
||||
categoryList.value = (data || [])
|
||||
.filter((category) => category.display)
|
||||
|
|
@ -176,8 +155,6 @@ const setCategoryList = (data) => {
|
|||
...category,
|
||||
icon: `vn:${(category.icon || '').split('-')[1]}`,
|
||||
}));
|
||||
moreFields.value = useLang(_moreFields);
|
||||
moreFieldsOrder.value = useLang(_moreFieldsTypes);
|
||||
|
||||
selectedCategoryFk.value && loadTypes();
|
||||
};
|
||||
|
|
@ -188,24 +165,19 @@ const getCategoryClass = (category, params) => {
|
|||
}
|
||||
};
|
||||
|
||||
const useLang = (values) => {
|
||||
const { models } = validationsStore;
|
||||
const properties = models.Item?.properties || {};
|
||||
return values.map((name) => {
|
||||
let prop = properties[name];
|
||||
const label = t(`params.${name}`);
|
||||
return {
|
||||
name,
|
||||
label,
|
||||
type: prop ? prop.type : null,
|
||||
};
|
||||
});
|
||||
};
|
||||
function addOrder(value, field, params) {
|
||||
let { orderBy } = params;
|
||||
orderBy = JSON.parse(orderBy);
|
||||
orderBy[field] = value;
|
||||
params.orderBy = JSON.stringify(orderBy);
|
||||
vnFilterPanelRef.value.search();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
|
||||
<VnFilterPanel
|
||||
ref="vnFilterPanelRef"
|
||||
:data-key="props.dataKey"
|
||||
:hidden-tags="['orderFk', 'orderBy']"
|
||||
:un-removable-params="['orderFk', 'orderBy']"
|
||||
|
|
@ -298,33 +270,29 @@ const useLang = (values) => {
|
|||
</QItemSection>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
<QItem class="q-my-md">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
:label="t('Order')"
|
||||
v-model="selectedOrder"
|
||||
:options="moreFields"
|
||||
option-label="label"
|
||||
option-value="way"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
@update:model-value="(value) => onOrderChange(value, params)"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-md">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
:label="t('Order by')"
|
||||
v-model="selectedOrderField"
|
||||
:options="moreFieldsOrder"
|
||||
option-label="label"
|
||||
option-value="name"
|
||||
v-model="orderBySelected"
|
||||
:options="orderByList"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
@update:model-value="(value) => onOrderFieldChange(value, params)"
|
||||
@update:model-value="(value) => addOrder(value, 'field', params)"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-my-md">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
:label="t('Order')"
|
||||
v-model="orderWaySelected"
|
||||
:options="orderWayList"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
@update:model-value="(value) => addOrder(value, 'way', params)"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
|
|
@ -490,10 +458,10 @@ en:
|
|||
order: Order
|
||||
ASC: Ascendant
|
||||
DESC: Descendant
|
||||
Relevancy: Relevancy
|
||||
ColorAndPrice: Color and price
|
||||
Name: Name
|
||||
Price: Price
|
||||
relevancy: Relevancy
|
||||
colorAndPrice: Color and price
|
||||
name: Name
|
||||
price: Price
|
||||
es:
|
||||
params:
|
||||
type: Tipo
|
||||
|
|
@ -503,10 +471,10 @@ es:
|
|||
order: Orden
|
||||
ASC: Ascendiente
|
||||
DESC: Descendiente
|
||||
Relevancy: Relevancia
|
||||
ColorAndPrice: Color y precio
|
||||
Name: Nombre
|
||||
Price: Precio
|
||||
relevancy: Relevancia
|
||||
colorAndPrice: Color y precio
|
||||
name: Nombre
|
||||
price: Precio
|
||||
Order: Orden
|
||||
Order by: Ordenar por
|
||||
Plant: Planta
|
||||
|
|
|
|||
Loading…
Reference in New Issue