fea(VnTable)t: refs #6825 create VnComponent, add rowClick and redirect

src/components/common/VnComponent.vue

@@ -0,0 +1,36 @@
+<template>
+    <span v-for="toComponent of componentArray" :key="toComponent.field">
+        <component
+            v-if="toComponent?.component"
+            :is="
+                (components && components[toComponent.component]) ?? toComponent.component
+            "
+            v-bind="toComponent.props && toComponent.props(value)"
+            @click="toComponent.event && toComponent.event(value)"
+        />
+    </span>
+</template>
+<script setup>
+import { computed } from 'vue';
+const $props = defineProps({
+    prop: {
+        type: Object,
+        required: true,
+    },
+    components: {
+        type: Object,
+        default: () => {},
+        required: false,
+    },
+    value: {
+        type: Object,
+        default: () => {},
+        required: false,
+    },
+});
+
+const componentArray = computed(() => {
+    if (typeof $props.prop === 'object') return [$props.prop];
+    return $props.prop;
+});
+</script>

src/components/common/VnSelect.vue

@@ -108,17 +108,12 @@ 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}%` } };
     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);
 }
 

src/components/common/VnTable.vue

@@ -1,15 +1,13 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
 
 import { useStateStore } from 'stores/useStateStore';
-
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnLv from 'components/ui/VnLv.vue';
 
-import VnBreadcrumbs from 'components/common/VnBreadcrumbs.vue';
 import VnTableColumn from 'components/common/VnTableColumn.vue';
 import VnTableFilter from 'components/common/VnTableFilter.vue';
 
@@ -24,7 +22,7 @@ const $props = defineProps({
     },
     defaultMode: {
         type: String,
-        default: 'list', // 'table', 'list', 'card'
+        default: 'card', // 'table', 'card'
     },
     reponsive: {
         type: Boolean,
@@ -38,49 +36,71 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    rowClick: {
+        type: Function,
+        default: null,
+    },
+    redirect: {
+        type: String,
+        default: null,
+    },
 });
 const { t } = useI18n();
-const $q = useQuasar();
 const stateStore = useStateStore();
+const router = useRouter();
 
-const mode = ref('list');
+const mode = ref('card');
 const selected = ref([]);
 const params = ref({});
 const VnPaginateRef = ref();
-const tableModes = computed(() => {
+const tableModes = [
-    const modes = [
+    {
-        {
+        icon: 'view_column',
-            icon: 'view_column',
+        title: t('table view'),
-            title: t('table view'),
+        value: 'table',
-            value: 'table',
+    },
-        },
+    {
-        {
+        icon: 'grid_view',
-            icon: 'lists',
+        title: t('grid view'),
-            title: t('list view'),
+        value: 'card',
-            value: 'list',
+        disable: () => console.log('called'),
-        },
+    },
-    ];
+];
-    if (!$q.screen.lt.md)
-        modes.push({
-            icon: 'apps',
-            title: t('grid view'),
-            value: 'card',
-            disable: () => console.log('called'),
-        });
-
-    return modes;
-});
 
 onMounted(() => {
     mode.value = $props.defaultMode;
     stateStore.rightDrawer = true;
 });
 
-function columnsCard(cols) {
+const cardTemplate = computed(() => {
-    return Object.values(cols).filter(
+    let chips = [];
-        (col) => col.cardVisible && !col.isId && col.field != 'tableActions'
+    let visible = [];
-    );
+    let title;
-}
+    let actions;
+    for (const col of $props.columns) {
+        if (col.field == 'tableActions') {
+            actions = col;
+            continue;
+        }
+        if (col.chip) {
+            chips.push(col);
+            continue;
+        }
+        if (col.isTitle) {
+            title = col;
+            continue;
+        }
+        if (col.cardVisible) visible.push(col);
+    }
+    return { chips, title, visible, actions };
+});
+
+const rowClickFunction = computed(() => {
+    if ($props.rowClick) return $props.rowClick;
+    if ($props.redirect)
+        return ({ id }) => router.push({ path: `/${$props.redirect}/${id}` });
+    return null;
+});
 </script>
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@@ -90,6 +110,7 @@ function columnsCard(cols) {
                 :data-key="$attrs['data-key']"
                 :search-button="true"
                 v-model:params="params"
+                @remove="(key) => console.log('HA LELGADO', key)"
             >
                 <template #body>
                     <VnTableFilter
@@ -116,23 +137,22 @@ function columnsCard(cols) {
                 class="vnTable"
                 :columns="columns"
                 :rows="rows"
-                row-key="$index"
+                row-key="id"
                 selection="multiple"
                 v-model:selected="selected"
                 :grid="mode != 'table'"
                 table-header-class="bg-grey-8"
-                :card-container-class="
+                card-container-class="grid-three"
-                    mode == 'list' || $q.screen.lt.md ? 'grid-one' : 'grid-three'
-                "
                 flat
                 :style="mode == 'table' && 'max-height: 92vh'"
                 virtual-scroll
                 @virtual-scroll="
                     (event) => event.index > rows.length - 2 && VnPaginateRef.paginate()
                 "
+                @row-click="(_, row) => rowClickFunction(row)"
             >
                 <template #top-left>
-                    <VnBreadcrumbs />
+                    <slot name="top-left"></slot>
                 </template>
                 <template #top-right>
                     <QBtn
@@ -175,77 +195,104 @@ function columnsCard(cols) {
                     </QTd>
                 </template>
                 <template #item="{ row, colsMap }">
-                    <!-- <TransitionGroup name="grid" tag="div" class="grid"> -->
+                    <component
-                    <QCard bordered flat class="row no-wrap justify-between">
+                        :is="$props.redirect ? 'router-link' : 'span'"
-                        <QCardSection vertical class="no-margin no-padding full-width">
+                        :to="`/${$props.redirect}/` + row.id"
-                            <!-- Chips -->
+                    >
-                            <QCardSection horizontal>
+                        <QCard
-                                <span v-for="col of colsMap" :key="col.field">
+                            bordered
-                                    <QChip
+                            flat
-                                        :class="
+                            class="row no-wrap justify-between cursor-pointer"
-                                            col.color
+                            @row-click="
-                                                ? col.color(row)
+                                (_, row) => {
-                                                : col.isId == 1
+                                    $props.rowClick && $props.rowClick(row);
-                                                ? 'bg-primary-light'
+                                }
-                                                : 'bg-chip-secondary'
+                            "
-                                        "
-                                        square
-                                        v-if="col.isId"
-                                        :title="t(col.label)"
-                                        class="no-margin"
-                                    >
-                                        {{ row[col.field] }}
-                                    </QChip>
-                                </span>
-                            </QCardSection>
-                            <!-- Fields -->
-                            <QCardSection
-                                class="q-pa-sm q-pr-lg"
-                                :class="
-                                    $q.screen.lt.md || mode == 'card'
-                                        ? 'flex-one'
-                                        : 'flex-three'
-                                "
-                            >
-                                <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}:`"
-                                    >
-                                        <template #value>
-                                            <VnTableColumn :column="col" :row />
-                                        </template>
-                                    </VnLv>
-                                </div>
-                            </QCardSection>
-                        </QCardSection>
-                        <!-- Actions -->
-                        <QCardSection
-                            v-if="colsMap.tableActions"
-                            class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
                         >
-                            <QBtn
+                            <QCardSection
-                                v-for="(btn, index) of colsMap.tableActions.actions"
+                                vertical
-                                :key="index"
+                                class="no-margin no-padding full-width"
-                                :title="btn.title"
+                            >
-                                :icon="btn.icon"
+                                <!-- Chips -->
-                                :outline="!btn.isPrimary"
+                                <QCardSection
-                                size="sm"
+                                    v-if="cardTemplate.chips.length"
-                                class="q-pa-sm"
+                                    class="no-margin q-px-xs q-py-none"
-                                :class="{ 'bg-primary-light': btn.isPrimary }"
+                                >
-                                @click.stop="btn.action(row)"
+                                    <span
-                            />
+                                        v-for="col of cardTemplate.chips"
-                        </QCardSection>
+                                        :key="col.field"
-                    </QCard>
+                                    >
-                    <!-- </TransitionGroup> -->
+                                        <QChip
+                                            v-if="col.chip.condition(row[col.field], row)"
+                                            :title="t(col.label)"
+                                            :class="
+                                                col.chip.color
+                                                    ? col.chip.color(row)
+                                                    : !col.chip.icon &&
+                                                      'bg-chip-secondary'
+                                            "
+                                            dense
+                                            square
+                                        >
+                                            <span v-if="!col.chip.icon">{{
+                                                row[col.field]
+                                            }}</span>
+                                            <QIcon
+                                                v-else
+                                                :name="col.chip.icon"
+                                                color="primary-light"
+                                            />
+                                        </QChip>
+                                    </span>
+                                    <slot name="afterChip" :row="row"></slot>
+                                </QCardSection>
+                                <!-- Title -->
+                                <QCardSection
+                                    v-if="cardTemplate.title"
+                                    class="q-pl-sm q-py-none text-primary-light text-bold text-h6"
+                                >
+                                    {{ row[cardTemplate.title.field] }}
+                                </QCardSection>
+                                <!-- Fields -->
+                                <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
+                                    <div
+                                        v-for="col of cardTemplate.visible"
+                                        :key="col.field"
+                                        class="fields"
+                                    >
+                                        <VnLv
+                                            v-if="
+                                                col.cardVisible &&
+                                                !col.isChip &&
+                                                col.field != 'tableActions'
+                                            "
+                                            :label="`${col.label}:`"
+                                        >
+                                            <template #value>
+                                                <VnTableColumn :column="col" :row />
+                                            </template>
+                                        </VnLv>
+                                    </div>
+                                </QCardSection>
+                            </QCardSection>
+                            <!-- Actions -->
+                            <QCardSection
+                                v-if="colsMap.tableActions"
+                                class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
+                            >
+                                <QBtn
+                                    v-for="(btn, index) of colsMap.tableActions.actions"
+                                    :key="index"
+                                    :title="btn.title"
+                                    :icon="btn.icon"
+                                    class="q-pa-xs"
+                                    flat
+                                    :class="{ 'text-primary-light': btn.isPrimary }"
+                                    @click.prevent="btn.action(row)"
+                                />
+                            </QCardSection>
+                        </QCard>
+                    </component>
                 </template>
             </QTable>
         </template>
@@ -262,7 +309,7 @@ function columnsCard(cols) {
 
 .bg-chip-secondary {
     background-color: var(--vn-page-color);
-    color: var(--vn-text-colo);
+    color: var(--vn-text-color);
 }
 .text-primary-light {
     color: var(--primary-light);
@@ -290,7 +337,7 @@ function columnsCard(cols) {
 /* Works on Firefox */
 * {
     scrollbar-width: thin;
-    scrollbar-color: var(--primary-light) transparent;
+    scrollbar-color: grey transparent;
 }
 
 /* Works on Chrome, Edge, and Safari */
@@ -305,52 +352,17 @@ function columnsCard(cols) {
 *::-webkit-scrollbar-thumb {
     background-color: transparent;
     border-radius: 20px;
-    border: 3px solid var(--primary-light);
+    border: 3px solid grey;
-}
-
-.grid-one {
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    grid-gap: 10px;
 }
 
 .grid-three {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1px));
+    grid-template-columns: repeat(auto-fit, minmax(350px, max-content));
     max-width: 100%;
-    grid-gap: 12px;
+    grid-gap: 20px;
     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;

src/components/common/VnTableColumn.vue

@@ -1,11 +1,23 @@
 <template>
-    <component
+    <VnComponent
+        v-if="column.before"
+        :prop="column.before"
+        :components="components"
+        :value="row"
+    />
+    <VnComponent
         v-if="column.component"
-        :is="components[column.component] ?? column.component"
+        :prop="column"
-        v-bind="column.props && column.props(row)"
+        :components="components"
-        @click="column.event && column.event(row)"
+        :value="row"
     />
     <span v-else>{{ dashIfEmpty(row[column.field]) }}</span>
+    <VnComponent
+        v-if="column.after"
+        :prop="column.after"
+        :components="components"
+        :value="row"
+    />
 </template>
 <script setup>
 import { markRaw } from 'vue';
@@ -13,9 +25,10 @@ import { QIcon, QCheckbox } from 'quasar';
 import { dashIfEmpty } from 'src/filters';
 
 /* basic input */
-import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelect from 'components/common/VnSelect.vue';
-import VnInput from 'src/components/common/VnInput.vue';
+import VnInput from 'components/common/VnInput.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnComponent from 'components/common/VnComponent.vue';
 
 const components = {
     input: markRaw(VnInput),

src/components/common/VnTableFilter.vue

@@ -1,4 +1,5 @@
 <template>
+    {{ model }}
     <div
         v-if="showTitle && column"
         class="q-pt-sm q-px-sm ellipsis"
@@ -69,7 +70,7 @@ const isBasicComponent = computed(
 );
 
 const updateEvent = { 'update:modelValue': addFilter };
-const enterEvent = { 'keyup.enter': addFilter };
+const enterEvent = { 'keyup.enter': () => addFilter(model.value) };
 const components = {
     input: {
         component: markRaw(VnInput),
@@ -111,11 +112,10 @@ const components = {
 //     await arrayData.addFilter(filter);
 // }
 
-async function addFilter(event) {
+async function addFilter(value) {
-    let value = model.value == '' ? null : model.value;
+    if (value && typeof value === 'object') value = model.value;
-    if (event && typeof event !== 'object') {
+    console.log('VALUE: ', value);
-        value = event;
+    value = value == '' ? null : value;
-    }
     let field = columnFilter.value?.field ?? $props.column.field;
     const toFilter = { [field]: value };
 

src/components/ui/VnFilterPanel.vue

@@ -8,6 +8,7 @@ import toDate from 'filters/toDate';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 const { t } = useI18n();
+const params = defineModel('params');
 const props = defineProps({
     dataKey: {
         type: String,
@@ -18,11 +19,6 @@ const props = defineProps({
         required: false,
         default: false,
     },
-    params: {
-        type: Object,
-        required: false,
-        default: null,
-    },
     showAll: {
         type: Boolean,
         default: true,
@@ -58,12 +54,10 @@ const store = arrayData.store;
 const userParams = ref({});
 
 onMounted(() => {
-    if (props.params) userParams.value = JSON.parse(JSON.stringify(props.params));
+    if (params.value) userParams.value = JSON.parse(JSON.stringify(params.value));
     if (Object.keys(store.userParams).length > 0) {
         userParams.value = JSON.parse(JSON.stringify(store.userParams));
     }
-
-    console.log('userParams.value: ', userParams.value);
     emit('init', { params: userParams.value });
 });
 
@@ -168,6 +162,9 @@ const customTags = computed(() =>
 
 async function remove(key) {
     userParams.value[key] = null;
+    delete params.value[key];
+    console.log('key: ', key);
+    console.log('params: ', params.value);
     await arrayData.applyFilter({ params: userParams.value });
     emit('remove', key);
 }

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -10,6 +10,8 @@ import { QBtn, QIcon } from 'quasar';
 import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
 import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
 
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters';
 
@@ -272,7 +274,9 @@ const columns = computed(() => [
         field: 'id',
         label: t('customer.extendedList.tableVisibleColumns.id'),
         name: 'id',
-        isId: 1,
+        chip: {
+            condition: () => true,
+        },
         columnFilter: {
             field: 'search',
             component: 'select',
@@ -287,7 +291,7 @@ const columns = computed(() => [
         field: 'name',
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
-        isId: 2,
+        isTitle: true,
     },
     {
         align: 'left',
@@ -319,6 +323,12 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.phone'),
         name: 'phone',
         cardVisible: true,
+        after: {
+            component: VnLinkPhone,
+            props: (prop) => ({
+                'phone-number': prop.phone,
+            }),
+        },
     },
     {
         align: 'left',
@@ -400,77 +410,76 @@ const columns = computed(() => [
         field: 'isActive',
         label: t('customer.extendedList.tableVisibleColumns.isActive'),
         name: 'isActive',
-        format: () => ' ',
+        chip: {
+            color: null,
+            condition: (value) => !value,
+            icon: 'vn:disabled',
+        },
     },
     {
         align: 'left',
         field: 'isVies',
         label: t('customer.extendedList.tableVisibleColumns.isVies'),
         name: 'isVies',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'isTaxDataChecked',
         label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
         name: 'isTaxDataChecked',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'isEqualizated',
         label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
         name: 'isEqualizated',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'isFreezed',
         label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
         name: 'isFreezed',
-        format: () => ' ',
+        chip: {
+            color: null,
+            condition: (v, { isActive, isFreezed }) => isActive && isFreezed == true,
+            icon: 'vn:frozen',
+        },
     },
     {
         align: 'left',
         field: 'hasToInvoice',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
         name: 'hasToInvoice',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'hasToInvoiceByAddress',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
         name: 'hasToInvoiceByAddress',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'isToBeMailed',
         label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
         name: 'isToBeMailed',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'hasLcr',
         label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
         name: 'hasLcr',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'hasCoreVnl',
         label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
         name: 'hasCoreVnl',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'hasSepaVnl',
         label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
         name: 'hasSepaVnl',
-        format: () => ' ',
     },
     {
         align: 'right',
@@ -534,7 +543,9 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
         url="Clients/extendedListFilter"
         order="id DESC"
         :columns="columns"
+        default-mode="card"
         auto-load
+        redirect="customer"
     >
         <!--
             default-mode="table"