feat: refs #6825 right filter panel

src/components/common/VnSelect.vue

@@ -16,11 +16,11 @@ const $props = defineProps({
     },
     optionLabel: {
         type: [String],
-        default: '',
+        default: 'name',
     },
     optionValue: {
         type: String,
-        default: '',
+        default: 'id',
     },
     url: {
         type: String,
@@ -108,11 +108,18 @@ async function fetchFilter(val) {
 
     const { fields, sortBy, limit } = $props;
     let key = optionLabel.value;
+    console.log('key: ', key);
 
     if (new RegExp(/\d/g).test(val)) key = optionValue.value;
+    console.log('key: ', key);
 
     const where = { [key]: { like: `%${val}%` } };
-    return dataRef.value.fetch({ fields, where, order: sortBy, limit });
+    const fetchOptions = { where, order: sortBy, limit };
+    console.log('where: ', where);
+    console.log('fields: ', fields);
+    if (fields) fetchOptions.fields = fields;
+    console.log('fetchOptions: ', fetchOptions);
+    return dataRef.value.fetch(fetchOptions);
 }
 
 async function filterHandler(val, update) {

src/components/common/VnTable.vue

@@ -168,9 +168,9 @@ function columnsCard(cols) {
                 <template #item="{ row, colsMap }">
                     <!-- <TransitionGroup name="grid" tag="div" class="grid"> -->
                     <QCard bordered flat class="row no-wrap justify-between">
-                        <QCardSection vertical class="no-margin no-padding w-80">
+                        <QCardSection vertical class="no-margin no-padding full-width">
                             <!-- Chips -->
-                            <QCardSection horizontal class="w-80">
+                            <QCardSection horizontal>
                                 <span v-for="col of colsMap" :key="col.field">
                                     <QChip
                                         :class="
@@ -191,28 +191,31 @@ function columnsCard(cols) {
                             </QCardSection>
                             <!-- Fields -->
                             <QCardSection
-                                class="q-pa-sm w-80"
+                                class="q-pa-sm q-pr-lg"
                                 :class="
-                                    mode == 'list' || $q.screen.lt.md
+                                    $q.screen.lt.md || mode == 'card'
-                                        ? 'grid-three'
+                                        ? 'flex-one'
-                                        : 'grid-one'
+                                        : 'flex-three'
                                 "
                             >
-                                <div v-for="col of columnsCard(colsMap)" :key="col.field">
                                 <div
+                                    v-for="col of columnsCard(colsMap)"
+                                    :key="col.field"
+                                    class="fields"
+                                >
+                                    <VnLv
                                         v-if="
                                             col.cardVisible &&
                                             !col.isId &&
                                             col.field != 'tableActions'
                                         "
+                                        :label="`${col.label}:`"
                                     >
-                                        <VnLv :label="`${col.label}:`">
                                         <template #value>
                                             <VnTableColumn :column="col" :row />
                                         </template>
                                     </VnLv>
                                 </div>
-                                </div>
                             </QCardSection>
                         </QCardSection>
                         <!-- Actions -->
@@ -304,8 +307,51 @@ function columnsCard(cols) {
 
 .grid-three {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1px));
+    max-width: 100%;
     grid-gap: 10px;
+    margin: 0 auto;
+}
+
+.flex-three {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    div.fields {
+        width: 50%;
+        .vn-label-value {
+            display: flex;
+            justify-content: flex-start;
+            gap: 2%;
+            width: 100%;
+            .label {
+                width: 25%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                flex-grow: 0;
+                flex-shrink: 0;
+            }
+            .value {
+                width: 65%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+
+.flex-one {
+    display: flex;
+    flex-flow: row wrap;
+    div.fields {
+        width: 100%;
+        .vn-label-value {
+            display: flex;
+            gap: 2%;
+        }
+    }
 }
 
 // WIP TRANSITIONS

src/components/common/VnTableFilter.vue

@@ -15,7 +15,7 @@
             v-if="columnFilter?.component"
             :is="isBasicComponent?.component ?? columnFilter.component"
             v-model="model"
-            v-bind="columnFilter.attrs"
+            v-bind="{ ...columnFilter.attrs, ...isBasicComponent?.attrs }"
             v-on="isBasicComponent?.event ?? columnFilter.event"
             dense
         />
@@ -90,19 +90,35 @@ const components = {
     select: {
         component: markRaw(VnSelect),
         event: updateEvent,
+        attrs: {
+            class: 'full-width q-px-sm',
+            label: $props.showTitle ? '' : $props.column.label,
+        },
     },
 };
 
-async function addFilter() {
+// async function addFilter() {
-    const value = model.value == '' ? null : model.value;
+//     const value = model.value == '' ? null : model.value;
-    const prefix = columnFilter.value?.inWhere?.prefix;
+//     const prefix = columnFilter.value?.inWhere?.prefix;
-    let field = columnFilter.value?.field ?? $props.column.field;
+//     let field = columnFilter.value?.field ?? $props.column.field;
-    field = prefix ? prefix + '.' + field : field;
+//     field = prefix ? prefix + '.' + field : field;
-    const toFilter = { [field]: value };
+//     const toFilter = { [field]: value };
-    const filter = columnFilter.value?.inWhere
+//     const filter = columnFilter.value?.inWhere
-        ? { filter: { where: toFilter } }
+//         ? { filter: { where: toFilter } }
-        : { params: toFilter };
+//         : { params: toFilter };
 
-    await arrayData.addFilter(filter);
+//     console.log('filter: ', filter);
+//     await arrayData.addFilter(filter);
+// }
+
+async function addFilter(event) {
+    let value = model.value == '' ? null : model.value;
+    if (event && typeof event !== 'object') {
+        value = event;
+    }
+    let field = columnFilter.value?.field ?? $props.column.field;
+    const toFilter = { [field]: value };
+
+    await arrayData.addFilter({ params: toFilter });
 }
 </script>

src/components/ui/VnFilterPanel.vue

@@ -67,18 +67,36 @@ onMounted(() => {
     emit('init', { params: userParams.value });
 });
 
+function setUserParams(params) {
+    if (!params) {
+        userParams.value = {};
+    } else {
+        userParams.value = params;
+    }
+}
+
 watch(
     () => route.query.params,
     (val) => {
-        if (!val) {
+        setUserParams(val);
-            userParams.value = {};
-        } else {
-            const parsedParams = JSON.parse(val);
-            userParams.value = { ...parsedParams };
     }
+);
+
+watch(
+    () => arrayData.store.userParams,
+    (val) => {
+        setUserParams(val);
     }
 );
 
+watch(
+    () => arrayData.store.filter,
+    (val) => {
+        console.log('watch filter: ', val);
+    },
+    { deep: true }
+);
+
 const isLoading = ref(false);
 async function search() {
     store.filter.where = {};
@@ -131,14 +149,15 @@ async function clearFilters() {
     emit('clear');
 }
 
-const tagsList = computed(() =>
+const tagsList = computed(() => {
-    Object.entries(userParams.value)
+    console.log('userParams.value: ', userParams.value);
+    return Object.entries(userParams.value)
         .filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
         .map(([key, value]) => ({
             label: key,
             value: value,
-        }))
+        }));
-);
+});
 
 const tags = computed(() =>
     tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.label))

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -275,6 +275,11 @@ const columns = computed(() => [
         isId: 1,
         columnFilter: {
             field: 'search',
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+            },
         },
     },
     {
@@ -283,11 +288,6 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
         isId: 2,
-        columnFilter: {
-            inWhere: {
-                prefix: 'c',
-            },
-        },
     },
     {
         align: 'left',