fix: tag chips
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
This commit is contained in:
parent
5b116a7301
commit
1346a2e7fd
|
|
@ -6,8 +6,8 @@ import axios from 'axios';
|
|||
import FetchData from 'components/FetchData.vue';
|
||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
import VnSelect from 'components/common/VnSelect.vue';
|
||||
// import VnInput from 'src/components/common/VnInput.vue';
|
||||
import getParamWhere from 'src/filters/getParamWhere';
|
||||
import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
|
|
@ -49,6 +49,7 @@ const orderWaySelected = ref('ASC');
|
|||
|
||||
const routeQuery = JSON.parse(route?.query.params ?? '{}');
|
||||
const paramsSearch = ref({});
|
||||
const tagData = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
paramsSearch.value = JSON.parse(routeQuery.filter ?? '{}')?.where ?? {};
|
||||
|
|
@ -120,32 +121,6 @@ const selectedType = computed(() => {
|
|||
return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
|
||||
});
|
||||
|
||||
// const applyTagFilter = (params, search) => {
|
||||
|
||||
// if (params.tagGroups) params.tagGroups = null;
|
||||
// if (!tagValues.value?.length) {
|
||||
// params.tagGroups = null;
|
||||
// search();
|
||||
// return;
|
||||
// }
|
||||
// if (!params.tagGroups) {
|
||||
// params.tagGroups = [];
|
||||
// }
|
||||
// params.tagGroups.push(
|
||||
// JSON.stringify({
|
||||
// values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
|
||||
// tagSelection: {
|
||||
// ...selectedTag.value,
|
||||
// orgShowField: selectedTag?.value?.name,
|
||||
// },
|
||||
// tagFk: selectedTag?.value?.tagFk,
|
||||
// })
|
||||
// );
|
||||
// search();
|
||||
// selectedTag.value = null;
|
||||
// tagValues.value = [{}];
|
||||
// };
|
||||
|
||||
const applyTagFilter = (params, search) => {
|
||||
if (!tagValues.value?.length) {
|
||||
params.tagGroups = null;
|
||||
|
|
@ -153,27 +128,46 @@ const applyTagFilter = (params, search) => {
|
|||
return;
|
||||
}
|
||||
|
||||
if (!params.tagGroups) {
|
||||
if (!params.tagGroups || typeof params.tagGroups === 'string') {
|
||||
params.tagGroups = [];
|
||||
} else if (typeof params.tagGroups === 'string') {
|
||||
params.tagGroups = [params.tagGroups];
|
||||
}
|
||||
|
||||
const newTagGroup = JSON.stringify({
|
||||
values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
|
||||
tagSelection: {
|
||||
...selectedTag.value,
|
||||
orgShowField: selectedTag?.value?.name,
|
||||
},
|
||||
tagFk: selectedTag?.value?.tagFk,
|
||||
});
|
||||
params.tagGroups.push(newTagGroup);
|
||||
params.tagGroups.push(
|
||||
JSON.stringify({
|
||||
values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
|
||||
tagSelection: {
|
||||
...selectedTag.value,
|
||||
orgShowField: selectedTag?.value?.name,
|
||||
},
|
||||
tagFk: selectedTag?.value?.tagFk,
|
||||
})
|
||||
);
|
||||
|
||||
tagData.value.push(JSON.parse(params.tagGroups[params.tagGroups.length - 1]));
|
||||
search();
|
||||
selectedTag.value = null;
|
||||
tagValues.value = [{}];
|
||||
};
|
||||
|
||||
const removeTagChip = (selection, params, search) => {
|
||||
if (typeof params.tagGroups === 'string') {
|
||||
try {
|
||||
params.tagGroups = JSON.parse(params.tagGroups);
|
||||
} catch (error) {
|
||||
console.error('Error parsing tagGroups:', error);
|
||||
params.tagGroups = [];
|
||||
}
|
||||
}
|
||||
console.log('params.tagGroups: ', params.tagGroups);
|
||||
console.log('selection: ', selection);
|
||||
|
||||
if (Array.isArray(params.tagGroups)) {
|
||||
params.tagGroups = params.tagGroups.filter((value) => value !== selection);
|
||||
}
|
||||
|
||||
search();
|
||||
};
|
||||
|
||||
const setCategoryList = (data) => {
|
||||
categoryList.value = (data || [])
|
||||
.filter((category) => category.display)
|
||||
|
|
@ -198,22 +192,6 @@ function addOrder(value, field, params) {
|
|||
params.orderBy = JSON.stringify(orderBy);
|
||||
vnFilterPanelRef.value.search();
|
||||
}
|
||||
|
||||
const data = ref([]);
|
||||
|
||||
function getTagData(value) {
|
||||
if (Array.isArray(value) && value.length >= 1) {
|
||||
const parsedTags = value.map((obj) => JSON.parse(obj));
|
||||
|
||||
if (parsedTags.length === 1) {
|
||||
data.value = parsedTags[0];
|
||||
} else {
|
||||
data.value = parsedTags;
|
||||
}
|
||||
} else {
|
||||
data.value = JSON.parse(value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -224,29 +202,37 @@ function getTagData(value) {
|
|||
v-model="paramsSearch"
|
||||
:redirect="false"
|
||||
:hidden-tags="['orderFk', 'orderBy', 'filter', 'search', 'or', 'and']"
|
||||
:custom-tags="['tagGroups']"
|
||||
:unremovable-params="['orderFk', 'orderBy']"
|
||||
:disable-submit-event="true"
|
||||
>
|
||||
<template #tags="{ tag, formatFn }">
|
||||
{{ console.log('tag.label: ', tag.label) }}
|
||||
<strong v-if="tag.label === 'categoryFk'">
|
||||
{{ t(selectedCategory?.name || '') }}
|
||||
</strong>
|
||||
<strong v-else-if="tag.label === 'typeFk'">
|
||||
{{ t(selectedType?.name || '') }}
|
||||
</strong>
|
||||
<div v-else-if="tag.label === 'tagGroups'" class="q-gutter-x-xs">
|
||||
{{ getTagData(tag.value) }}
|
||||
<strong> {{ data.tagSelection?.name }}: </strong>
|
||||
<span>
|
||||
{{ console.log('data', data.values) }}
|
||||
</span>
|
||||
</div>
|
||||
<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 tagData"
|
||||
:key="chip"
|
||||
removable
|
||||
@remove="removeTagChip(chip, params, searchFn)"
|
||||
>
|
||||
<strong>{{ chip.tagSelection?.name }}: </strong>
|
||||
<span>{{ chip.values[0].value }}</span>
|
||||
</VnFilterPanelChip>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template #body="{ params, searchFn }">
|
||||
<QItem class="category-filter q-mt-md">
|
||||
<div
|
||||
|
|
@ -410,6 +396,7 @@ function getTagData(value) {
|
|||
icon="add_circle"
|
||||
shortcut="+"
|
||||
flat
|
||||
size="md"
|
||||
class="filter-icon"
|
||||
@click="tagValues.push({})"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue