diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue index b0aa648c1..1b3c94bfc 100644 --- a/src/components/common/VnSelect.vue +++ b/src/components/common/VnSelect.vue @@ -120,7 +120,7 @@ watch(options, (newValue) => { }); watch(modelValue, async (newValue) => { - if (!myOptions.value.some((option) => option[optionValue.value] == newValue)) + if (!myOptions?.value?.some((option) => option[optionValue.value] == newValue)) await fetchFilter(newValue); if ($props.noOne) myOptions.value.unshift(noOneOpt.value); diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue index 5bdaf150c..a8aca49dd 100644 --- a/src/components/ui/VnFilterPanel.vue +++ b/src/components/ui/VnFilterPanel.vue @@ -189,7 +189,6 @@ const tags = computed(() => { const filteredTags = tagsList.value.filter( (tag) => !($props.customTags || []).includes(tag.label) ); - console.log('formatTags: ', formatTags(filteredTags)); return formatTags(filteredTags); }); diff --git a/src/pages/Order/Card/CatalogFilterValueDialog.vue b/src/pages/Order/Card/CatalogFilterValueDialog.vue new file mode 100644 index 000000000..8e4a9315a --- /dev/null +++ b/src/pages/Order/Card/CatalogFilterValueDialog.vue @@ -0,0 +1,150 @@ + + + + + + + +en: + params: + tag: Tag +es: + params: + tag: Etiqueta + diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue index 5612399d7..28c54c120 100644 --- a/src/pages/Order/Card/OrderCatalogFilter.vue +++ b/src/pages/Order/Card/OrderCatalogFilter.vue @@ -9,6 +9,7 @@ import VnSelect from 'components/common/VnSelect.vue'; import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue'; import VnInput from 'src/components/common/VnInput.vue'; import getParamWhere from 'src/filters/getParamWhere'; +import CatalogFilterValueDialog from 'src/pages/Order/Card/CatalogFilterValueDialog.vue'; const { t } = useI18n(); @@ -28,13 +29,13 @@ const props = defineProps({ }, }); +const showValueFilterDialog = ref(false); const categoryList = ref(null); const selectedCategoryFk = ref(null); const typeList = ref([]); const selectedTypeFk = ref(null); -const selectedTag = ref(null); -const tagValues = ref([{}]); -const tagOptions = ref([]); +const generalSearchParam = ref(null); + const vnFilterPanelRef = ref(); const orderByList = ref([ { id: 'relevancy DESC, name', name: t('params.relevancy'), priority: 999 }, @@ -49,20 +50,17 @@ const orderWayList = ref([ const orderBySelected = ref('relevancy DESC, name'); const orderWaySelected = ref('ASC'); -const resetCategory = () => { +const resetCategory = (params, search) => { selectedCategoryFk.value = null; typeList.value = null; -}; - -const clearFilter = (key) => { - if (key === 'categoryFk') { - resetCategory(); - } + params.categoryFk = null; + params.typeFk = null; + search(); }; const selectCategory = (params, category, search) => { if (params.categoryFk === category?.id) { - resetCategory(); + resetCategory(params, search); params.categoryFk = null; } else { selectedCategoryFk.value = category?.id; @@ -102,37 +100,28 @@ function exprBuilder(param, value) { } } -const applyTags = (params, search) => { - if (!tagValues.value?.length) { +const applyTags = (tagInfo, params, search) => { + if (!tagInfo || !tagInfo.values.length) { params.tagGroups = null; search(); + toggleValueFilterDialog(); return; } - const tagGroups = { - values: [...tagValues.value], - tagFk: selectedTag?.value?.id, - tagSelection: { - name: selectedTag?.value?.name, - }, - }; - - params.tagGroups = tagGroups; + if (!params.tagGroups) params.tagGroups = []; + params.tagGroups.push(tagInfo); search(); + toggleValueFilterDialog(); }; const removeTagGroupParam = (params, search, valIndex = null) => { - if (!params.tagGroups) return; - if (!valIndex) { params.tagGroups = null; - tagValues.value = [{}]; + search(); } else { - (tagValues.value || []).splice(valIndex, 1); - params.tagGroups.values.splice(valIndex, 1); + params.tagGroups.splice(valIndex, 1); + search(); } - - search(); }; const setCategoryList = (data) => { @@ -160,37 +149,13 @@ function addOrder(value, field, params) { vnFilterPanelRef.value.search(); } -const getSelectedTagValues = async (tag) => { - try { - if (!tag?.id) return; - const filter = { - fields: ['value'], - order: 'value ASC', - limit: 30, - }; - - const url = `Tags/${tag?.id}/filterValue`; - console.log('url', url); - const params = { filter: JSON.stringify(filter) }; - const { data } = await axios.get(url, { - params, - }); - tagOptions.value = data; - } catch (err) { - console.error('Error getting selected tag values'); - } +const toggleValueFilterDialog = () => { + showValueFilterDialog.value = !showValueFilterDialog.value; }; onMounted(() => { selectedCategoryFk.value = getParamWhere(route, 'categoryFk'); selectedTypeFk.value = getParamWhere(route, 'typeFk'); - if (route.query.params && JSON.parse(route.query.params).tagGroups) { - const tagGroups = JSON.parse(route.query.params).tagGroups; - tagValues.value = [...tagGroups.values]; - selectedTag.value = (props.tags || []).find( - (tag) => tag.name === tagGroups.tagSelection.name - ); - } }); @@ -202,15 +167,11 @@ onMounted(() => { :hidden-tags="['orderFk', 'orderBy']" :un-removable-params="['orderFk', 'orderBy']" :expr-builder="exprBuilder" - :custom-tags="['tagGroups']" - @remove="clearFilter" + :custom-tags="['tagGroups', 'categoryFk']" :redirect="false" > @@ -416,23 +359,6 @@ onMounted(() => { cursor: pointer; } } - -.filter-icon { - font-size: 24px; - color: $primary; - padding: 0 4px; - cursor: pointer; -} - -.filter-input { - flex-shrink: 1; - min-width: 0; -} - -.filter-value { - display: flex; - align-items: center; -}