src/pages/Entry/EntryLatestBuys.vue

@@ -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">

src/pages/Entry/EntryLatestBuysFilter.vue

@@ -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
+                    <QTooltip>
-                        :name="category.icon"
+                        {{ t(category.name) }}
-                        class="category-icon"
+                    </QTooltip>
-                        @click="selectCategory(params, category.id, searchFn)"
+                </QBtn>
-                    >
-                        <QTooltip>
-                            {{ t(category.name) }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
             </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;
+        padding: 8px;
-        flex-shrink: 0;
+        width: 60px;
-        display: flex;
+        height: 60px;
-        justify-content: center;
+        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