feat(VnTable): refs #6825 execute function when create

src/components/common/VnTable.vue

@@ -54,7 +54,7 @@ const router = useRouter();
 const mode = ref('card');
 const selected = ref([]);
 const params = ref({});
-const VnPaginateRef = ref();
+const VnPaginateRef = ref({});
 const showForm = ref(false);
 const splittedColumns = ref({ columns: [] });
 const tableModes = [
@@ -118,22 +118,34 @@ function splitColumns(columns) {
                 field: 'status',
                 label: t('status'),
                 name: 'status',
-                customFilter: false,
+                columnFilter: false,
             });
     }
 }
 
 const rowClickFunction = computed(() => {
     if ($props.rowClick) return $props.rowClick;
-    if ($props.redirect)
-        return ({ id }) => router.push({ path: `/${$props.redirect}/${id}` });
+    if ($props.redirect) return ({ id }) => redirectFn(id);
     return () => {};
 });
 
+function redirectFn(id) {
+    router.push({ path: `/${$props.redirect}/${id}` });
+}
+
 function stopEventPropagation(event) {
     event.preventDefault();
     event.stopPropagation();
 }
+
+function reload() {
+    VnPaginateRef.value.fetch();
+}
+
+defineExpose({
+    reload,
+    redirect: redirectFn,
+});
 </script>
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@@ -240,6 +252,7 @@ function stopEventPropagation(event) {
                             :row="row"
                             :is-editable="false"
                             v-model="row[col.field]"
+                            component-prop="columnField"
                         />
                     </QTd>
                 </template>
@@ -317,7 +330,11 @@ function stopEventPropagation(event) {
                                     :icon="btn.icon"
                                     class="q-pa-xs"
                                     flat
-                                    :class="{ 'text-primary-light': btn.isPrimary }"
+                                    :class="
+                                        btn.isPrimary
+                                            ? 'text-primary-light'
+                                            : 'color-vn-text '
+                                    "
                                     @click="btn.action(row)"
                                 />
                             </QCardSection>
@@ -337,6 +354,7 @@ function stopEventPropagation(event) {
         <FormModelPopup
             v-bind="{ ...$attrs, ...create }"
             :model="$attrs['data-key'] + 'Create'"
+            @on-data-saved="(_, res) => create.onDataSaved(res)"
         >
             <template #form-inputs="{ data }">
                 <div class="grid-create">
@@ -362,10 +380,7 @@ function stopEventPropagation(event) {
 
 .bg-header {
     background-color: #5d5d5d;
-    color: var(--vn-page-color);
-    * {
-        font-weight: bold !important;
-    }
+    color: var(--vn-text-color);
 }
 
 .q-table--dark .q-table__bottom,
@@ -466,6 +481,7 @@ function stopEventPropagation(event) {
 .vn-label-value {
     display: flex;
     flex-direction: row;
+    color: var(--vn-text-color);
     .value {
         overflow: hidden;
         text-overflow: ellipsis;

src/components/common/VnTableColumn.vue

@@ -82,7 +82,9 @@ const defaultComponents = {
 };
 
 const value = computed(() => {
-    return $props.column.format ? $props.column.format($props.row) : $props.row;
+    return $props.column.format
+        ? $props.column.format($props.row, dashIfEmpty)
+        : dashIfEmpty($props.row[$props.column.field]);
 });
 
 const col = computed(() => {
@@ -108,22 +110,22 @@ const components = computed(() => $props.components ?? defaultComponents);
         v-if="col.before"
         :prop="col.before"
         :components="components"
-        :value="value"
+        :value="$props.row"
         v-model="model"
     />
     <VnComponent
         v-if="col.component"
         :prop="col"
         :components="components"
-        :value="value"
+        :value="$props.row"
         v-model="model"
     />
-    <span :title="row[col.field]" v-else>{{ dashIfEmpty(row[col.field]) }}</span>
+    <span :title="value" v-else>{{ value }}</span>
     <VnComponent
         v-if="col.after"
         :prop="col.after"
         :components="components"
-        :value="value"
+        :value="$props.row"
         v-model="model"
     />
 </template>

src/components/common/VnTableFilter.vue

@@ -18,7 +18,7 @@
                 default="input"
                 v-model="model"
                 :components="components"
-                :component-prop="`columnFilter`"
+                component-prop="columnFilter"
             />
         </span>
     </div>

src/components/ui/VnFilterPanel.vue

@@ -85,14 +85,6 @@ watch(
     }
 );
 
-watch(
-    () => arrayData.store.filter,
-    (val) => {
-        console.log('watch filter: ', val);
-    },
-    { deep: true }
-);
-
 const isLoading = ref(false);
 async function search() {
     store.filter.where = {};
@@ -184,7 +176,7 @@ function formatValue(value) {
 </script>
 
 <template>
-    <div id="filterPanelForm">
+    <QForm id="filterPanelForm">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>
@@ -274,7 +266,7 @@ function formatValue(value) {
             </QItem>
             <QSeparator />
         </template>
-    </div>
+    </QForm>
     <QInnerLoading
         :label="t('globals.pleaseWait')"
         :showing="isLoading"

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -32,6 +32,7 @@ const selectedSalesPersonId = ref(0);
 const allColumnNames = ref([]);
 const visibleColumns = ref([]);
 const postcodesOptions = ref([]);
+const tableRef = ref();
 
 const tableColumnComponents = {
     customerStatus: {
@@ -316,6 +317,10 @@ const columns = computed(() => [
             where: { role: 'salesPerson' },
         },
         create: true,
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.salesPerson),
     },
     {
         align: 'left',
@@ -406,6 +411,10 @@ const columns = computed(() => [
             optionLabel: 'description',
             optionValue: 'code',
         },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.businessType),
     },
     {
         align: 'left',
@@ -463,7 +472,7 @@ const columns = computed(() => [
         name: 'isFreezed',
         chip: {
             color: null,
-            condition: (v, { isActive, isFreezed }) => isActive && isFreezed == true,
+            condition: (v, { isActive, isFreezed }) => isActive && isFreezed,
             icon: 'vn:frozen',
         },
     },
@@ -570,15 +579,29 @@ function handleLocation(data, location) {
     </VnSubToolbar> -->
 
     <VnTable
+        ref="tableRef"
         data-key="CustomerExtendedList"
         url="Clients/extendedListFilter"
         url-create="Clients/createWithUser"
         :create="{
             urlCreate: 'Clients/createWithUser',
             title: 'Create client',
+            onDataSaved: ({ id }) => tableRef.redirect(id),
             formInitialData: {
                 active: true,
                 isEqualizated: false,
+                name: 'FFFF',
+                socialName: 'FFFFFF',
+                fi: '58233369H',
+                salesPersonFk: 15,
+                street: 'FASD',
+                businessTypeFk: 'individual',
+                email: 'adddssssd@asd.es',
+                userName: 'asdasdax',
+                postcode: '46680',
+                city: 'Algemesi',
+                provinceFk: 1,
+                countryFk: 1,
             },
         }"
         order="id DESC"