Item list filter

src/composables/useArrayData.js

@@ -156,9 +156,10 @@ export function useArrayData(key, userOptions) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[
-                        Object.keys(exprBuilder ? exprBuilder(param) : param)[0]
-                    ];
+                    const key = Object.keys(
+                        exprBuilder && exprBuilder(param) ? exprBuilder(param) : param
+                    );
+                    if (key[0]) delete store.filter.where[key[0]];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }

src/pages/Item/ItemList.vue

@@ -70,7 +70,7 @@ const exprBuilder = (param, value) => {
     }
 };
 
-const params = reactive({});
+const params = reactive({ isFloramondo: false, isActive: true });
 
 const applyColumnFilter = async (col) => {
     try {

src/pages/Item/ItemListFilter.vue

@@ -4,13 +4,14 @@ import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
 
+import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import FetchData from 'components/FetchData.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
+import { QCheckbox } from 'quasar';
 
 import { useArrayData } from 'composables/useArrayData';
+import { useValidator } from 'src/composables/useValidator';
 import axios from 'axios';
 
 const { t } = useI18n();
@@ -23,6 +24,7 @@ const props = defineProps({
 });
 
 const stateStore = useStateStore();
+const validationsStore = useValidator();
 
 const itemTypesRef = ref(null);
 const categoriesOptions = ref([]);
@@ -30,19 +32,27 @@ const itemTypesOptions = ref([]);
 const buyersOptions = ref([]);
 const suppliersOptions = ref([]);
 const tagValues = ref([]);
+const fieldFiltersValues = ref([]);
+const moreFields = ref([]);
 
 const arrayData = useArrayData(props.dataKey);
-const itemTypesFilter = computed(() => {
-    return {
-        fields: ['id', 'name', 'categoryFk'],
-        include: 'category',
-        order: 'name ASC',
-        where: { categoryFk: arrayData.store?.userParams?.categoryFk },
-    };
-});
+const itemTypesFilter = {
+    fields: ['id', 'name', 'categoryFk'],
+    include: 'category',
+    order: 'name ASC',
+    where: {},
+};
 
-// TODO: checkear este watch que fetchee cuando cambie categoryFk
-watch(itemTypesFilter.value.where.categoryFk, () => itemTypesRef.value.fetch());
+const onCategoryChange = async (categoryFk, search) => {
+    if (!categoryFk) {
+        itemTypesFilter.where.categoryFk = null;
+        delete itemTypesFilter.where.categoryFk;
+    } else {
+        itemTypesFilter.where.categoryFk = categoryFk;
+    }
+    search();
+    await itemTypesRef.value.fetch();
+};
 
 const getSelectedTagValues = async (tag) => {
     try {
@@ -62,45 +72,60 @@ const getSelectedTagValues = async (tag) => {
     }
 };
 
-// const applyColumnFilter = async (col) => {
-//     try {
-//         params[col.field] = col.columnFilter.filterValue;
-//         await arrayData.addFilter({ params });
-//     } catch (err) {
-//         console.error('Error applying column filter', err);
-//     }
-// };
-
-const applyTags = () => {
-    // params.tags = tagValues.value
-    //     .filter((tag) => tag.selectedTag && tag.value)
-    //     .map((tag) => ({
-    //         tagFk: tag.selectedTag.id,
-    //         tagName: tag.selectedTag.name,
-    //         value: tag.value,
-    //     }));
-    console.log('apply tags');
-    const params = {
-        tags: tagValues.value
-            .filter((tag) => tag.selectedTag && tag.value)
-            .map((tag) => ({
-                tagFk: tag.selectedTag.id,
-                tagName: tag.selectedTag.name,
-                value: tag.value,
-            })),
-    };
-    console.log('params:: ', params);
-    arrayData.addFilter({ params });
-    // search();
+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 removeTag = (index, params, search) => {
     (tagValues.value || []).splice(index, 1);
-    // applyTags(params, search);
+    applyTags(params, search);
+};
+
+const applyFieldFilters = (params) => {
+    fieldFiltersValues.value.forEach((fieldFilter) => {
+        if (
+            fieldFilter.selectedField &&
+            (fieldFilter.value !== null ||
+                fieldFilter.value !== '' ||
+                fieldFilter.value !== undefined)
+        ) {
+            params[fieldFilter.name] = fieldFilter.value;
+        }
+    });
+    arrayData.applyFilter({ params });
+};
+
+const removeFieldFilter = (index, params, search) => {
+    delete params[fieldFiltersValues.value[index].name];
+    (fieldFiltersValues.value || []).splice(index, 1);
+    applyFieldFilters(params, search);
 };
 
 onMounted(async () => {
     stateStore.rightDrawer = true;
+    if (arrayData.store?.userParams?.categoryFk)
+        itemTypesFilter.where.categoryFk = arrayData.store?.userParams?.categoryFk;
+    await itemTypesRef.value.fetch();
+    const { models } = validationsStore;
+    const properties = models.Item?.properties || {};
+
+    const _moreFields = ['id', 'description', 'name', 'isActive'];
+
+    _moreFields.forEach((field) => {
+        let prop = properties[field];
+        moreFields.value.push({
+            name: field,
+            label: prop ? prop.description : field,
+            type: prop ? prop.type : null,
+        });
+    });
 });
 </script>
 
@@ -116,7 +141,6 @@ onMounted(async () => {
         url="ItemTypes"
         :filter="itemTypesFilter"
         @on-fetch="(data) => (itemTypesOptions = data)"
-        auto-load
     />
     <FetchData
         url="TicketRequests/getItemTypeWorker"
@@ -126,7 +150,7 @@ onMounted(async () => {
     />
     <FetchData
         url="Suppliers"
-        :filter="{ fields: ['name', 'nickname'], order: 'name ASC' }"
+        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC' }"
         @on-fetch="(data) => (suppliersOptions = data)"
         auto-load
     />
@@ -136,16 +160,16 @@ onMounted(async () => {
         auto-load
         @on-fetch="(data) => (tagOptions = data)"
     />
-    <!-- <pre>categoryFkparam:: {{ itemTypesFilter }}</pre> -->
-    <!-- <pre>{{ tagValues }}</pre> -->
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <pre>{{ itemTypesFilter }}</pre>
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :hidden-tags="tagValues.length === 0 ? ['tags'] : []"
+    >
         <template #tags="{ tag, formatFn }">
-            <div v-if="tag.label !== 'tags'" class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
-            </div>
-            <div v-else class="q-gutter-x-xs">
-                <strong>{{ t('params.tags') }} </strong>
+            <div>
+                <strong>{{ t(`params.${tag.label}`) }}</strong>
+                <span v-if="tag.label !== 'tags'">: {{ formatFn(tag.value) }}</span>
             </div>
         </template>
         <template #body="{ params, searchFn }">
@@ -163,7 +187,9 @@ onMounted(async () => {
                     <VnSelectFilter
                         :label="t('params.categoryFk')"
                         v-model="params.categoryFk"
-                        @update:model-value="searchFn()"
+                        @update:model-value="
+                            ($event) => onCategoryChange($event, searchFn)
+                        "
                         :options="categoriesOptions"
                         option-value="id"
                         option-label="name"
@@ -243,6 +269,7 @@ onMounted(async () => {
                     </VnSelectFilter>
                 </QItemSection>
             </QItem>
+            <!-- Tags filter -->
             <QItem class="row items-center">
                 <QItemLabel>
                     {{ t('params.tags') }}
@@ -290,7 +317,7 @@ onMounted(async () => {
                         use-input
                         :disable="!tag"
                         :is-clearable="false"
-                        @update:model-value="applyTags()"
+                        @update:model-value="applyTags(params, searchFn)"
                     />
                     <VnInput
                         v-else
@@ -299,7 +326,7 @@ onMounted(async () => {
                         :disable="!tag"
                         is-outlined
                         :is-clearable="false"
-                        @keyup.enter="applyTags()"
+                        @keydown.enter.prevent="applyTags(params, searchFn)"
                     />
                 </QItemSection>
                 <QIcon
@@ -310,16 +337,78 @@ onMounted(async () => {
                     @click="removeTag(index, params, searchFn)"
                 />
             </QItem>
-
-            <!-- <QItem>
-                <QItemSection>
-                    <QCheckbox
-                        :label="t('params.isOrdered')"
-                        v-model="params.isOrdered"
-                        toggle-indeterminate
+            <!-- Filter fields -->
+            <QItem class="row items-center">
+                <QItemLabel>
+                    {{ t('More fields') }}
+                </QItemLabel>
+                <QIcon
+                    name="add_circle"
+                    class="fill-icon-on-hover q-ml-md"
+                    size="sm"
+                    color="primary"
+                    @click="fieldFiltersValues.push({})"
+                />
+            </QItem>
+            <QItem
+                v-for="(fieldFilter, index) in fieldFiltersValues"
+                :key="index"
+                class="row items-center"
+            >
+                <QItemSection class="col">
+                    <VnSelectFilter
+                        :label="t('params.tag')"
+                        v-model="fieldFilter.name"
+                        :options="moreFields"
+                        option-label="label"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                        :is-clearable="false"
+                        @update:model-value="
+                            ($event) => {
+                                fieldFilter.name = $event.name;
+                                fieldFilter.selectedField = $event;
+                            }
+                        "
                     />
                 </QItemSection>
-            </QItem> -->
+                <QItemSection class="col">
+                    <QCheckbox
+                        v-if="fieldFilter.selectedField?.type === 'boolean'"
+                        v-model="fieldFilter.value"
+                        :label="t('params.value')"
+                        @update:model-value="applyFieldFilters(params, searchFn)"
+                    />
+                    <VnInput
+                        v-else
+                        v-model="fieldFilter.value"
+                        :label="t('params.value')"
+                        :disable="!fieldFilter.selectedField"
+                        is-outlined
+                        @keydown.enter="applyFieldFilters(params, searchFn)"
+                    />
+                </QItemSection>
+                <QIcon
+                    name="delete"
+                    class="fill-icon-on-hover q-ml-xs"
+                    size="sm"
+                    color="primary"
+                    @click="removeFieldFilter(index, params, searchFn)"
+                />
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.isFloramondo')"
+                        v-model="params.isFloramondo"
+                        toggle-indeterminate
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
@@ -335,7 +424,13 @@ en:
         tags: Tags
         tag: Tag
         value: Value
+        isFloramondo: Floramondo
+        isActive: Active
+        description: Description
+        name: Name
+        id: ID
 es:
+    More fields: Más campos
     params:
         search: Búsqueda general
         categoryFk: Reino
@@ -345,4 +440,9 @@ es:
         tags: Etiquetas
         tag: Etiqueta
         value: Valor
+        isFloramondo: Floramondo
+        isActive: Activo
+        description: Descripción
+        name: Nombre
+        id: ID
 </i18n>

src/router/modules/item.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'items',
         icon: 'vn:item',
+        moduleName: 'Item',
     },
     component: RouterView,
     redirect: { name: 'ItemMain' },