Entry latest buys side filter panel

src/pages/Entry/EntryLatestBuys.vue

@@ -587,13 +587,8 @@ const redirectToEntryBuys = (entryFk) => {
 
 const applyColumnFilter = async (col) => {
     try {
-        if (!col.columnFilter.filterValue) {
+        params[col.field] = col.columnFilter.filterValue;
-            delete params[col.field];
+        await arrayData.addFilter({ params });
-        } else {
-            params[col.field] = col.columnFilter.filterValue;
-        }
-
-        await arrayData.applyFilter({ params });
     } catch (err) {
         console.error('Error applying column filter', err);
     }

src/pages/Entry/EntryLatestBuysFilter.vue

@@ -7,6 +7,7 @@ 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';
 
@@ -50,8 +51,8 @@ const selectedType = computed(() => {
 
 const selectCategory = async (params, categoryId, search) => {
     if (params.categoryFk === categoryId) {
-        resetCategory();
+        resetCategory(params);
-        params.categoryFk = null;
+        search();
         return;
     }
     selectedCategoryFk.value = categoryId;
@@ -60,12 +61,25 @@ const selectCategory = async (params, categoryId, search) => {
     search();
 };
 
-const resetCategory = () => {
+const resetCategory = (params) => {
     selectedCategoryFk.value = null;
     itemTypesOptions.value = null;
+    if (params) {
+        params.categoryFk = null;
+        params.typeFk = null;
+    }
 };
 
-const applyTags = () => {};
+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 {
@@ -92,7 +106,7 @@ const getCategoryClass = (category, params) => {
 
 const getSelectedTagValues = async (tag) => {
     try {
-        console.log('tag:: ', tag);
+        tag.value = null;
         const filter = {
             fields: ['value'],
             order: 'value ASC',
@@ -104,11 +118,15 @@ const getSelectedTagValues = async (tag) => {
             params,
         });
         tag.valueOptions = data;
-        console.log('tag.valueOptions:: ', tag.valueOptions);
     } catch (err) {
         console.error('Error getting selected tag values');
     }
 };
+
+const removeTag = (index, params, search) => {
+    (tagValues.value || []).splice(index, 1);
+    applyTags(params, search);
+};
 </script>
 
 <template>
@@ -142,6 +160,7 @@ const getSelectedTagValues = async (tag) => {
     <VnFilterPanel
         :data-key="props.dataKey"
         :expr-builder="exprBuilder"
+        :custom-tags="['tags']"
         @init="onFilterInit"
         @remove="clearFilter"
     >
@@ -157,6 +176,21 @@ const getSelectedTagValues = async (tag) => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
+        <template #customTags="{ tags: customTags, params }">
+            <template v-for="tag in customTags" :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
@@ -303,7 +337,7 @@ const getSelectedTagValues = async (tag) => {
             <QItem
                 v-for="(value, index) in tagValues"
                 :key="value"
-                class="q-mt-md filter-value bg-red"
+                class="q-mt-md filter-value"
             >
                 <QItemSection class="col">
                     <VnSelectFilter
@@ -316,12 +350,13 @@ const getSelectedTagValues = async (tag) => {
                         rounded
                         :emit-value="false"
                         use-input
+                        :is-clearable="false"
                         @update:model-value="getSelectedTagValues(value)"
                     />
                 </QItemSection>
                 <QItemSection class="col">
                     <VnSelectFilter
-                        v-if="!value?.isFree && value.valueOptions"
+                        v-if="!value?.selectedTag?.isFree && value.valueOptions"
                         :label="t('params.value')"
                         v-model="value.value"
                         :options="value.valueOptions || []"
@@ -333,8 +368,9 @@ const getSelectedTagValues = async (tag) => {
                         emit-value
                         use-input
                         :disable="!value"
+                        :is-clearable="false"
                         class="filter-input"
-                        @update:model-value="applyTags()"
+                        @update:model-value="applyTags(params, searchFn)"
                     />
                     <VnInput
                         v-else
@@ -343,12 +379,14 @@ const getSelectedTagValues = async (tag) => {
                         :disable="!value"
                         is-outlined
                         class="filter-input"
+                        :is-clearable="false"
+                        @keyup.enter="applyTags(params, searchFn)"
                     />
                 </QItemSection>
                 <QIcon
                     name="delete"
                     class="filter-icon"
-                    @click="(tagValues || []).splice(index, 1)"
+                    @click="removeTag(index, params, searchFn)"
                 />
             </QItem>
             <QItem class="q-mt-lg">
@@ -427,13 +465,10 @@ es:
         typeFk: Tipo
         tag: Etiqueta
         value: Valor
-
     Plant: Planta
     Flower: Flor
     Handmade: Confección
     Green: Verde
     Accessories: Complemento
     Fruit: Fruta
-
-
 </i18n>