wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Right filter panel WIP

This commit is contained in:
William Buezas 2024-03-04 09:06:29 -03:00
parent 50218d6ddf
commit 2774c68f19
2 changed files with 138 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/Entry/EntryLatestBuys.vue
View File

@ -654,7 +654,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QToolbar>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<EntryLatestBuysFilter data-key="OrderCatalogList" :tags="tags" />
<EntryLatestBuysFilter data-key="EntryLatestBuys" :tags="tags" />
</QScrollArea>
</QDrawer>
<QPage class="column items-center q-pa-md">

314
src/pages/Entry/EntryLatestBuysFilter.vue
View File

@ -1,36 +1,31 @@
<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
// import VnInput from 'components/common/VnInput.vue';
import VnInput from 'components/common/VnInput.vue';
import FetchData from 'components/FetchData.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
// import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
import axios from 'axios';
const { t } = useI18n();
const route = useRoute();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
tags: {
type: Array,
required: true,
},
});
const itemCategories = ref(null);
const itemCategories = ref([]);
const selectedCategoryFk = ref(null);
const selectedTypeFk = ref(null);
const itemTypesOptions = ref([]);
const itemTypeWorkersOptions = ref([]);
const suppliersOptions = ref([]);
const tagOptions = ref([]);
const tagValues = ref([]);
const categoryList = computed(() => {
return (itemCategories.value || [])
@ -41,16 +36,26 @@ const categoryList = computed(() => {
}));
});
const selectedCategory = computed(() =>
(itemCategories.value || []).find(
(category) => category?.id === selectedCategoryFk.value
)
);
const selectedType = computed(() => {
return (itemTypesOptions.value || []).find(
(type) => type?.id === selectedTypeFk.value
);
});
const selectCategory = async (params, categoryId, search) => {
if (params.categoryFk === categoryId) {
resetCategory();
params.categoryFk = null;
return;
}
selectedCategoryFk.value = categoryId;
params.categoryFk = categoryId;
console.log('params:: ', params);
await fetchItemTypes(categoryId);
search();
};
@ -60,6 +65,8 @@ const resetCategory = () => {
itemTypesOptions.value = null;
};
const applyTags = () => {};
const fetchItemTypes = async (id) => {
try {
const filter = {
@ -77,120 +84,31 @@ const fetchItemTypes = async (id) => {
}
};
// const selectedOrder = ref(null);
// const orderList = [
// { way: 'ASC', name: 'Ascendant' },
// { way: 'DESC', name: 'Descendant' },
// ];
// const selectedOrderField = ref(null);
// const OrderFields = [
// { field: 'relevancy DESC, name', name: 'Relevancy', priority: 999 },
// { field: 'showOrder, price', name: 'Color and price', priority: 999 },
// { field: 'name', name: 'Name', priority: 999 },
// { field: 'price', name: 'Price', priority: 999 },
// ];
// const clearFilter = (key) => {
// if (key === 'categoryFk') {
// resetCategory();
// }
// };
// const onFilterInit = async ({ params }) => {
// if (params.typeFk) {
// selectedTypeFk.value = params.typeFk;
// }
// if (params.categoryFk) {
// await loadTypes(params.categoryFk);
// selectedCategoryFk.value = params.categoryFk;
// }
// if (params.orderBy) {
// orderByParam.value = JSON.parse(params.orderBy);
// selectedOrder.value = orderByParam.value?.way;
// selectedOrderField.value = orderByParam.value?.field;
// }
// };
// const selectedCategory = computed(() =>
// (itemCategories.value || []).find(
// (category) => category?.id === selectedCategoryFk.value
// )
// );
// const selectedType = computed(() => {
// return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
// });
// function exprBuilder(param, value) {
// switch (param) {
// case 'categoryFk':
// case 'typeFk':
// return { [param]: value };
// case 'search':
// return { 'i.name': { like: `%${value}%` } };
// }
// }
// const selectedTag = ref(null);
// const tagValues = ref([{}]);
// const tagOptions = ref(null);
// const isButtonDisabled = computed(
// () => !selectedTag.value || tagValues.value.some((item) => !item.value)
// );
// const applyTagFilter = (params, search) => {
// if (!tagValues.value?.length) {
// params.tagGroups = null;
// search();
// return;
// }
// if (!params.tagGroups) {
// params.tagGroups = [];
// }
// params.tagGroups.push(
// JSON.stringify({
// values: tagValues.value,
// tagSelection: {
// ...selectedTag.value,
// orgShowField: selectedTag.value.name,
// },
// tagFk: selectedTag.value.tagFk,
// })
// );
// search();
// selectedTag.value = null;
// tagValues.value = [{}];
// };
// const removeTagChip = (selection, params, search) => {
// if (params.tagGroups) {
// params.tagGroups = (params.tagGroups || []).filter(
// (value) => value !== selection
// );
// }
// search();
// };
// const orderByParam = ref(null);
// const onOrderFieldChange = (value, params, search) => {
// const orderBy = Object.assign({}, orderByParam.value, { field: value.field });
// params.orderBy = JSON.stringify(orderBy);
// search();
// };
// const onOrderChange = (value, params, search) => {
// const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
// params.orderBy = JSON.stringify(orderBy);
// search();
// };
const getCategoryClass = (category, params) => {
if (category.id === params?.categoryFk) {
return 'active';
}
};
const getSelectedTagValues = async (tag) => {
try {
console.log('tag:: ', tag);
const filter = {
fields: ['value'],
order: 'value ASC',
limit: 30,
};
const params = { filter: JSON.stringify(filter) };
const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
params,
});
tag.valueOptions = data;
console.log('tag.valueOptions:: ', tag.valueOptions);
} catch (err) {
console.error('Error getting selected tag values');
}
};
</script>
<template>
@ -214,6 +132,13 @@ const getCategoryClass = (category, params) => {
:filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
@on-fetch="(data) => (suppliersOptions = data)"
/>
<FetchData
url="Tags"
:filter="{ fields: ['id', 'name', 'isFree'] }"
auto-load
limit="30"
@on-fetch="(data) => (tagOptions = data)"
/>
<VnFilterPanel
:data-key="props.dataKey"
:expr-builder="exprBuilder"
@ -221,47 +146,33 @@ const getCategoryClass = (category, params) => {
@remove="clearFilter"
>
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong v-if="tag.label === 'categoryFk'">
{{ t(selectedCategory?.name || '') }}
</strong>
<strong v-else-if="tag.label === 'typeFk'">
{{ t(selectedType?.name || '') }}
</strong>
<div v-else class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<!-- <template #customTags="{ tags: customTags, params, searchFn }">
<template v-for="tag in customTags" :key="tag.label">
<template v-if="tag.label === 'tagGroups'">
<VnFilterPanelChip
v-for="chip in tag.value"
:key="chip"
removable
@remove="removeTagChip(chip, params, searchFn)"
>
<strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
<span>{{
(JSON.parse(chip).values || [])
.map((item) => item.value)
.join(' | ')
}}</span>
</VnFilterPanelChip>
</template>
</template>
</template> -->
<template #body="{ params, searchFn }">
<QItem class="category-filter q-mt-md">
<div
<QBtn
dense
flat
round
v-for="category in categoryList"
:key="category.name"
:class="['category', getCategoryClass(category, params)]"
:icon="category.icon"
@click="selectCategory(params, category.id, searchFn)"
>
<QIcon
:name="category.icon"
class="category-icon"
@click="selectCategory(params, category.id, searchFn)"
>
<QTooltip>
{{ t(category.name) }}
</QTooltip>
</QIcon>
</div>
<QTooltip>
{{ t(category.name) }}
</QTooltip>
</QBtn>
</QItem>
<QItem class="q-my-md">
<QItemSection>
@ -300,7 +211,7 @@ const getCategoryClass = (category, params) => {
<QItem class="q-my-md">
<QItemSection>
<VnSelectFilter
:label="t('params.buyer')"
:label="t('params.salesPersonFk')"
v-model="params.salesPersonFk"
:options="itemTypeWorkersOptions"
option-value="id"
@ -346,6 +257,7 @@ const getCategoryClass = (category, params) => {
:label="t('params.from')"
v-model="params.from"
is-outlined
@update:model-value="searchFn()"
/>
</QItemSection>
</QItem>
@ -355,6 +267,7 @@ const getCategoryClass = (category, params) => {
:label="t('params.to')"
v-model="params.to"
is-outlined
@update:model-value="searchFn()"
/>
</QItemSection>
</QItem>
@ -364,6 +277,7 @@ const getCategoryClass = (category, params) => {
:label="t('params.active')"
v-model="params.active"
toggle-indeterminate
@update:model-value="searchFn()"
/>
</QItemSection>
<QItemSection>
@ -371,6 +285,7 @@ const getCategoryClass = (category, params) => {
:label="t('params.visible')"
v-model="params.visible"
toggle-indeterminate
@update:model-value="searchFn()"
/>
</QItemSection>
</QItem>
@ -380,9 +295,69 @@ const getCategoryClass = (category, params) => {
:label="t('params.floramondo')"
v-model="params.floramondo"
toggle-indeterminate
@update:model-value="searchFn()"
/>
</QItemSection>
</QItem>
<QItem
v-for="(value, index) in tagValues"
:key="value"
class="q-mt-md filter-value bg-red"
>
<QItemSection class="col">
<VnSelectFilter
:label="t('params.tag')"
v-model="value.selectedTag"
:options="tagOptions"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
@update:model-value="getSelectedTagValues(value)"
/>
</QItemSection>
<QItemSection class="col">
<VnSelectFilter
v-if="!value?.isFree && value.valueOptions"
:label="t('params.value')"
v-model="value.value"
:options="value.valueOptions || []"
option-value="value"
option-label="value"
dense
outlined
rounded
emit-value
use-input
:disable="!value"
class="filter-input"
@update:model-value="applyTags()"
/>
<VnInput
v-else
v-model="value.value"
:label="t('params.value')"
:disable="!value"
is-outlined
class="filter-input"
/>
</QItemSection>
<QIcon
name="delete"
class="filter-icon"
@click="(tagValues || []).splice(index, 1)"
/>
</QItem>
<QItem class="q-mt-lg">
<QIcon
name="add_circle"
class="filter-icon"
@click="tagValues.push({})"
/>
</QItem>
</template>
</VnFilterPanel>
</template>
@ -395,25 +370,16 @@ const getCategoryClass = (category, params) => {
gap: 12px;
.category {
flex: 1;
flex-shrink: 0;
display: flex;
justify-content: center;
padding: 8px;
width: 60px;
height: 60px;
font-size: 1.4rem;
background-color: var(--vn-light-gray);
&.active {
.category-icon {
background-color: $primary;
}
background-color: $primary;
}
}
.category-icon {
border-radius: 50%;
background-color: var(--vn-light-gray);
font-size: 2.6rem;
padding: 8px;
cursor: pointer;
}
}
.filter-icon {
@ -437,11 +403,6 @@ const getCategoryClass = (category, params) => {
<i18n>
en:
params:
orderBy: Order By
tag: Tag
value: Value
order: Order
supplier: Supplier
from: From
to: To
@ -451,13 +412,10 @@ en:
salesPersonFk: Buyer
categoryFk: Category
typeFk: Type
tag: Tag
value: Value
es:
params:
orderBy: Ordenar por
tag: Etiqueta
value: Valor
order: Orden
supplier: Proveedor
from: Desde
to: Hasta
@ -467,6 +425,8 @@ es:
salesPersonFk: Comprador
categoryFk: Categoría
typeFk: Tipo
tag: Etiqueta
value: Valor
Plant: Planta
Flower: Flor