feat(VnTable): refs #6825 dinamic columns

src/components/common/VnTable.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed, defineModel } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -13,13 +13,16 @@ import VnTableColumn from 'components/common/VnTableColumn.vue';
 import VnTableFilter from 'components/common/VnTableFilter.vue';
 import VnTableChip from 'components/common/VnTableChip.vue';
 
-const columns = defineModel();
 const $props = defineProps({
+    columns: {
+        type: Array,
+        required: true,
+    },
     defaultMode: {
         type: String,
         default: 'card', // 'table', 'card'
     },
-    reponsive: {
+    responsive: {
         type: Boolean,
         default: true,
     },
@@ -53,6 +56,7 @@ const selected = ref([]);
 const params = ref({});
 const VnPaginateRef = ref();
 const showForm = ref(false);
+const splittedColumns = ref({ columns: [] });
 const tableModes = [
     {
         icon: 'view_column',
@@ -72,30 +76,52 @@ onMounted(() => {
     stateStore.rightDrawer = true;
 });
 
-const cardTemplate = computed(() => {
+watch(
-    const chips = [];
+    () => $props.columns,
-    const visible = [];
+    (value) => splitColumns(value),
-    const create = [];
+    { immediate: true }
-    let title;
+);
-    let actions;
+
-    for (const col of columns.value) {
+function splitColumns(columns) {
+    splittedColumns.value = {
+        columns: [],
+        chips: [],
+        create: [],
+        visible: [],
+    };
+
+    for (const col of columns) {
+        if (!col) continue;
         if (col.field == 'tableActions') {
-            actions = col;
+            splittedColumns.value.actions = col;
         }
         if (col.chip) {
-            if (!chips.length) setChipColumn();
+            splittedColumns.value.chips.push(col);
-            chips.push(col);
         }
         if (col.isTitle) {
-            title = col;
+            splittedColumns.value.title = col;
         }
         if (col.create) {
-            create.push(col);
+            splittedColumns.value.create.push(col);
         }
-        if (col.cardVisible) visible.push(col);
+        if (col.cardVisible) splittedColumns.value.visible.push(col);
+        splittedColumns.value.columns.push(col);
     }
-    return { chips, title, visible, actions, create };
+    // Status column
+    if (splittedColumns.value.chips.length) {
+        splittedColumns.value.columnChips = splittedColumns.value.chips.filter(
+            (c) => !c.isId
+        );
+        if (splittedColumns.value.columnChips.length)
+            splittedColumns.value.columns.unshift({
+                align: 'left',
+                field: 'status',
+                label: t('status'),
+                name: 'status',
+                customFilter: false,
             });
+    }
+}
 
 const rowClickFunction = computed(() => {
     if ($props.rowClick) return $props.rowClick;
@@ -108,18 +134,6 @@ function stopEventPropagation(event) {
     event.preventDefault();
     event.stopPropagation();
 }
-
-function setChipColumn() {
-    console.log('SETTING', columns.value);
-    columns.value.unshift({
-        align: 'left',
-        field: 'status',
-        label: t('status'),
-        name: 'status',
-        customFilter: false,
-    });
-    console.log('SETTING', columns.value);
-}
 </script>
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@@ -133,12 +147,16 @@ function setChipColumn() {
                     <VnTableFilter
                         :column="col"
                         :data-key="$attrs['data-key']"
-                        v-for="col of columns"
+                        v-for="col of splittedColumns.columns"
                         :key="col.id"
                         v-model="params[col.columnFilter?.field ?? col.field]"
                     />
                 </template>
-                <slot name="moreFilterPanel" :params="params" :columns="columns" />
+                <slot
+                    name="moreFilterPanel"
+                    :params="params"
+                    :columns="splittedColumns.columns"
+                />
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>
@@ -153,7 +171,7 @@ function setChipColumn() {
             <!-- :grid="($q.screen.lt.md && reponsive) || mode != 'table'"  -->
             <QTable
                 class="vnTable"
-                :columns="columns"
+                :columns="splittedColumns.columns"
                 :rows="rows"
                 row-key="id"
                 selection="multiple"
@@ -196,7 +214,7 @@ function setChipColumn() {
                     />
                 </template>
                 <template #header-cell="{ col }">
-                    <QTh auto-width style="min-width: 100px">
+                    <QTh auto-width style="min-width: 100px" v-if="$props.columnSearch">
                         <VnTableFilter
                             :column="col"
                             :show-title="true"
@@ -205,9 +223,9 @@ function setChipColumn() {
                         />
                     </QTh>
                 </template>
-                <template #body-cell-chips="{ col }">
+                <template #body-cell-status="{ col, row }">
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
-                        <VnTableChip :columns="cardTemplate.chips" :row="row">
+                        <VnTableChip :columns="splittedColumns.columnChips" :row="row">
                             <template #afterChip>
                                 <slot name="afterChip" :row="row"></slot>
                             </template>
@@ -243,10 +261,13 @@ function setChipColumn() {
                             <QCardSection vertical class="no-margin no-padding w-80">
                                 <!-- Chips -->
                                 <QCardSection
-                                    v-if="cardTemplate.chips.length"
+                                    v-if="splittedColumns.chips.length"
                                     class="no-margin q-px-xs q-py-none"
                                 >
-                                    <VnTableChip :columns="cardTemplate.chips" :row="row">
+                                    <VnTableChip
+                                        :columns="splittedColumns.chips"
+                                        :row="row"
+                                    >
                                         <template #afterChip>
                                             <slot name="afterChip" :row="row"></slot>
                                         </template>
@@ -254,20 +275,20 @@ function setChipColumn() {
                                 </QCardSection>
                                 <!-- Title -->
                                 <QCardSection
-                                    v-if="cardTemplate.title"
+                                    v-if="splittedColumns.title"
                                     class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
                                 >
                                     <span
-                                        :title="row[cardTemplate.title.field]"
+                                        :title="row[splittedColumns.title.field]"
                                         @click="stopEventPropagation($event)"
                                         class="cursor-text"
-                                        >{{ row[cardTemplate.title.field] }}</span
+                                        >{{ row[splittedColumns.title.field] }}</span
                                     >
                                 </QCardSection>
                                 <!-- Fields -->
                                 <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
                                     <div
-                                        v-for="col of cardTemplate.visible"
+                                        v-for="col of splittedColumns.visible"
                                         :key="col.field"
                                         class="fields"
                                     >
@@ -320,7 +341,7 @@ function setChipColumn() {
             <template #form-inputs="{ data }">
                 <div class="grid-create">
                     <VnTableColumn
-                        v-for="column of cardTemplate.create"
+                        v-for="column of splittedColumns.create"
                         :key="column.field"
                         :column="column"
                         :row="{}"

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -272,6 +272,7 @@ const columns = computed(() => [
         chip: {
             condition: () => true,
         },
+        isId: true,
         columnFilter: {
             component: 'select',
             field: 'search',
@@ -581,7 +582,7 @@ function handleLocation(data, location) {
             },
         }"
         order="id DESC"
-        v-model="columns"
+        :columns="columns"
         default-mode="table"
         redirect="customer"
         auto-load