360 lines
11 KiB
Vue
360 lines
11 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import VnInput from 'components/common/VnInput.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
|
import VnSelect from 'components/common/VnSelect.vue';
|
|
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
|
|
|
|
import axios from 'axios';
|
|
|
|
const { t } = useI18n();
|
|
const props = defineProps({
|
|
dataKey: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
customTags: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
exprBuilder: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const itemCategories = ref([]);
|
|
const selectedCategoryFk = ref(null);
|
|
const selectedTypeFk = ref(null);
|
|
const itemTypesOptions = ref([]);
|
|
const suppliersOptions = ref([]);
|
|
const tagOptions = ref([]);
|
|
const tagValues = ref([]);
|
|
|
|
const categoryList = computed(() => {
|
|
return (itemCategories.value || [])
|
|
.filter((category) => category.display)
|
|
.map((category) => ({
|
|
...category,
|
|
icon: `vn:${(category.icon || '').split('-')[1]}`,
|
|
}));
|
|
});
|
|
|
|
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);
|
|
search();
|
|
return;
|
|
}
|
|
selectedCategoryFk.value = categoryId;
|
|
params.categoryFk = categoryId;
|
|
await fetchItemTypes(categoryId);
|
|
search();
|
|
};
|
|
|
|
const resetCategory = (params) => {
|
|
selectedCategoryFk.value = null;
|
|
itemTypesOptions.value = null;
|
|
if (params) {
|
|
params.categoryFk = null;
|
|
params.typeFk = null;
|
|
}
|
|
};
|
|
|
|
const applyTags = (params, search) => {
|
|
params.tags = tagValues.value
|
|
.filter((tag) => tag.selectedTag && tag.value)
|
|
.map((tag) => ({
|
|
tagFk: tag.selectedTag.id,
|
|
tagName: tag.selectedTag.name,
|
|
value: tag.value,
|
|
}));
|
|
search();
|
|
};
|
|
|
|
const fetchItemTypes = async (id) => {
|
|
try {
|
|
const filter = {
|
|
fields: ['id', 'name', 'categoryFk'],
|
|
where: { categoryFk: id },
|
|
include: 'category',
|
|
order: 'name ASC',
|
|
};
|
|
const { data } = await axios.get('ItemTypes', {
|
|
params: { filter: JSON.stringify(filter) },
|
|
});
|
|
itemTypesOptions.value = data;
|
|
} catch (err) {
|
|
console.error('Error fetching item types', err);
|
|
}
|
|
};
|
|
|
|
const getCategoryClass = (category, params) => {
|
|
if (category.id === params?.categoryFk) {
|
|
return 'active';
|
|
}
|
|
};
|
|
|
|
const getSelectedTagValues = async (tag) => {
|
|
try {
|
|
tag.value = null;
|
|
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;
|
|
} catch (err) {
|
|
console.error('Error getting selected tag values');
|
|
}
|
|
};
|
|
|
|
const removeTag = (index, params, search) => {
|
|
(tagValues.value || []).splice(index, 1);
|
|
applyTags(params, search);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
url="ItemCategories"
|
|
limit="30"
|
|
auto-load
|
|
@on-fetch="(data) => (itemCategories = data)"
|
|
/>
|
|
<FetchData
|
|
url="Suppliers"
|
|
limit="30"
|
|
auto-load
|
|
: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"
|
|
:custom-tags="customTags"
|
|
>
|
|
<template #tags="{ tag, formatFn }">
|
|
<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(`components.itemsFilterPanel.${tag.label}`) }}: </strong>
|
|
<span>{{ formatFn(tag.value) }}</span>
|
|
</div>
|
|
</template>
|
|
<template #customTags="{ tags, params }">
|
|
<template v-for="tag in tags" :key="tag.label">
|
|
<VnFilterPanelChip
|
|
v-for="chip in tag.value"
|
|
:key="chip"
|
|
removable
|
|
@remove="removeTagChip(chip, params, searchFn)"
|
|
>
|
|
<div class="q-gutter-x-xs">
|
|
<strong>{{ chip.tagName }}: </strong>
|
|
<span>"{{ chip.value }}"</span>
|
|
</div>
|
|
</VnFilterPanelChip>
|
|
</template>
|
|
</template>
|
|
<template #body="{ params, searchFn }">
|
|
<QItem class="category-filter q-mt-md">
|
|
<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)"
|
|
>
|
|
<QTooltip>
|
|
{{ t(category.name) }}
|
|
</QTooltip>
|
|
</QBtn>
|
|
</QItem>
|
|
<QItem class="q-my-md">
|
|
<QItemSection>
|
|
<VnSelect
|
|
:label="t('components.itemsFilterPanel.typeFk')"
|
|
v-model="params.typeFk"
|
|
:options="itemTypesOptions"
|
|
option-value="id"
|
|
option-label="name"
|
|
dense
|
|
outlined
|
|
rounded
|
|
use-input
|
|
:disable="!selectedCategoryFk"
|
|
@update:model-value="
|
|
(value) => {
|
|
selectedTypeFk = value;
|
|
searchFn();
|
|
}
|
|
"
|
|
>
|
|
<template #option="{ itemProps, opt }">
|
|
<QItem v-bind="itemProps">
|
|
<QItemSection>
|
|
<QItemLabel>{{ opt.name }}</QItemLabel>
|
|
<QItemLabel caption>
|
|
{{ opt.categoryName }}
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</template>
|
|
</VnSelect>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QSeparator />
|
|
<slot name="body" :params="params" :search-fn="searchFn" />
|
|
<QItem
|
|
v-for="(value, index) in tagValues"
|
|
:key="value"
|
|
class="q-mt-md filter-value"
|
|
>
|
|
<QItemSection class="col">
|
|
<VnSelect
|
|
:label="t('components.itemsFilterPanel.tag')"
|
|
v-model="value.selectedTag"
|
|
:options="tagOptions"
|
|
option-label="name"
|
|
dense
|
|
outlined
|
|
rounded
|
|
:emit-value="false"
|
|
use-input
|
|
:is-clearable="false"
|
|
@update:model-value="getSelectedTagValues(value)"
|
|
/>
|
|
</QItemSection>
|
|
<QItemSection class="col">
|
|
<VnSelect
|
|
v-if="!value?.selectedTag?.isFree && value.valueOptions"
|
|
:label="t('components.itemsFilterPanel.value')"
|
|
v-model="value.value"
|
|
:options="value.valueOptions || []"
|
|
option-value="value"
|
|
option-label="value"
|
|
dense
|
|
outlined
|
|
rounded
|
|
emit-value
|
|
use-input
|
|
:disable="!value"
|
|
:is-clearable="false"
|
|
@update:model-value="applyTags(params, searchFn)"
|
|
/>
|
|
<VnInput
|
|
v-else
|
|
v-model="value.value"
|
|
:label="t('components.itemsFilterPanel.value')"
|
|
:disable="!value"
|
|
is-outlined
|
|
:is-clearable="false"
|
|
@keyup.enter="applyTags(params, searchFn)"
|
|
/>
|
|
</QItemSection>
|
|
<QIcon
|
|
name="delete"
|
|
class="fill-icon-on-hover q-px-xs"
|
|
color="primary"
|
|
size="sm"
|
|
@click="removeTag(index, params, searchFn)"
|
|
/>
|
|
</QItem>
|
|
<QItem class="q-mt-lg">
|
|
<QIcon
|
|
name="add_circle"
|
|
class="fill-icon-on-hover q-px-xs"
|
|
color="primary"
|
|
size="sm"
|
|
@click="tagValues.push({})"
|
|
/>
|
|
</QItem>
|
|
</template>
|
|
</VnFilterPanel>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.category-filter {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
|
|
.category {
|
|
padding: 8px;
|
|
width: 60px;
|
|
height: 60px;
|
|
font-size: 1.4rem;
|
|
background-color: var(--vn-accent-color);
|
|
|
|
&.active {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.filter-value {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
en:
|
|
params:
|
|
supplier: Supplier
|
|
from: From
|
|
to: To
|
|
active: Is active
|
|
visible: Is visible
|
|
floramondo: Is floramondo
|
|
salesPersonFk: Buyer
|
|
categoryFk: Category
|
|
|
|
es:
|
|
params:
|
|
supplier: Proveedor
|
|
from: Desde
|
|
to: Hasta
|
|
active: Activo
|
|
visible: Visible
|
|
floramondo: Floramondo
|
|
salesPersonFk: Comprador
|
|
categoryFk: Categoría
|
|
</i18n>
|