From 6120c98580f8ced18ff8178459fd2a5a80f50df6 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 17 Jun 2024 08:19:07 +0200
Subject: [PATCH] fix(VnTable): warns

---
 src/components/VnTable/VnTable.vue            | 432 +++++++++---------
 .../ExtendedList/CustomerExtendedList.vue     |   1 -
 2 files changed, 222 insertions(+), 211 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index e2b736ddd..bc1c65130 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -211,232 +211,244 @@ defineExpose({
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>
-    <CrudModel
-        v-bind="$attrs"
-        class="q-px-md"
-        :limit="20"
-        ref="CrudModelRef"
-        :search-url="searchUrl"
-        :disable-infinite-scroll="mode == 'table'"
-        @save-changes="reload"
-    >
-        <template #body="{ rows }">
-            <QTable
-                class="vnTable"
-                :columns="splittedColumns.columns"
-                :rows="rows"
-                row-key="id"
-                selection="multiple"
-                v-model:selected="selected"
-                :grid="mode != 'table'"
-                table-header-class="bg-header"
-                card-container-class="grid-three"
-                flat
-                :style="mode == 'table' && 'max-height: 90vh'"
-                virtual-scroll
-                @virtual-scroll="
-                    (event) =>
-                        event.index > rows.length - 2 &&
-                        CrudModelRef.vnPaginateRef.paginate()
-                "
-                @row-click="(_, row) => rowClickFunction(row)"
-            >
-                <template #top-left>
-                    <slot name="top-left"></slot>
-                </template>
-                <template #top-right>
-                    <!-- <QBtn
+    <!-- class in div to fix warn-->
+    <div class="q-px-md">
+        <CrudModel
+            v-bind="$attrs"
+            :limit="20"
+            ref="CrudModelRef"
+            :search-url="searchUrl"
+            :disable-infinite-scroll="mode == 'table'"
+            @save-changes="reload"
+        >
+            <template #body="{ rows }">
+                <QTable
+                    v-bind="$attrs"
+                    class="vnTable"
+                    :columns="splittedColumns.columns"
+                    :rows="rows"
+                    v-model:selected="selected"
+                    :grid="mode != 'table'"
+                    table-header-class="bg-header"
+                    card-container-class="grid-three"
+                    flat
+                    :style="mode == 'table' && 'max-height: 90vh'"
+                    virtual-scroll
+                    @virtual-scroll="
+                        (event) =>
+                            event.index > rows.length - 2 &&
+                            CrudModelRef.vnPaginateRef.paginate()
+                    "
+                    @row-click="(_, row) => rowClickFunction(row)"
+                >
+                    <template #top-left>
+                        <slot name="top-left"></slot>
+                    </template>
+                    <template #top-right>
+                        <!-- <QBtn
                         icon="visibility"
                         title="asd"
                         class="bg-vn-section-color q-mr-md"
                         dense
                         v-if="mode == 'table'"
                     /> -->
-                    <QBtnToggle
-                        v-model="mode"
-                        toggle-color="primary"
-                        class="bg-vn-section-color"
-                        dense
-                        :options="tableModes"
-                    />
-                    <QBtn
-                        icon="filter_alt"
-                        title="asd"
-                        class="bg-vn-section-color q-ml-md"
-                        dense
-                        @click="stateStore.toggleRightDrawer()"
-                    />
-                </template>
-                <template #header-cell="{ col }">
-                    <QTh auto-width style="min-width: 100px" v-if="$props.columnSearch">
-                        <VnTableFilter
-                            :column="col"
-                            :show-title="true"
-                            :data-key="$attrs['data-key']"
-                            v-model="params[columnName(col)]"
-                            :search-url="searchUrl"
+                        <QBtnToggle
+                            v-model="mode"
+                            toggle-color="primary"
+                            class="bg-vn-section-color"
+                            dense
+                            :options="tableModes"
                         />
-                    </QTh>
-                </template>
-                <template #header-cell-tableActions>
-                    <QTh auto-width class="sticky" />
-                </template>
-                <template #body-cell-tableStatus="{ col, row }">
-                    <QTd auto-width :class="`text-${col.align ?? 'left'}`">
-                        <VnTableChip :columns="splittedColumns.columnChips" :row="row">
-                            <template #afterChip>
-                                <slot name="afterChip" :row="row"></slot>
-                            </template>
-                        </VnTableChip>
-                    </QTd>
-                </template>
-                <template #body-cell="{ col, row }">
-                    <!-- Columns -->
-                    <QTd
-                        auto-width
-                        class="no-margin q-px-xs"
-                        :class="`text-${col.align ?? 'left'}`"
-                    >
-                        <VnTableColumn
-                            :column="col"
-                            :row="row"
-                            :is-editable="false"
-                            v-model="row[col.name]"
-                            component-prop="columnField"
-                        />
-                    </QTd>
-                </template>
-                <template #body-cell-tableActions="{ col, row }">
-                    <QTd
-                        auto-width
-                        :class="`text-${col.align ?? 'left'}`"
-                        class="sticky no-padding"
-                        @click="stopEventPropagation($event)"
-                    >
                         <QBtn
-                            v-for="(btn, index) of col.actions"
-                            :key="index"
-                            :title="btn.title"
-                            :icon="btn.icon"
-                            class="q-px-sm"
-                            flat
-                            :class="
-                                btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
-                            "
-                            @click="btn.action(row)"
+                            icon="filter_alt"
+                            title="asd"
+                            class="bg-vn-section-color q-ml-md"
+                            dense
+                            @click="stateStore.toggleRightDrawer()"
                         />
-                    </QTd>
-                </template>
-                <template #item="{ row, colsMap }">
-                    <component
-                        :is="$props.redirect ? 'router-link' : 'span'"
-                        :to="`/${$props.redirect}/` + row.id"
-                    >
-                        <QCard
-                            bordered
-                            flat
-                            class="row no-wrap justify-between cursor-pointer"
-                            @click="
-                                (_, row) => {
-                                    $props.rowClick && $props.rowClick(row);
-                                }
-                            "
+                    </template>
+                    <template #header-cell="{ col }">
+                        <QTh
+                            auto-width
+                            style="min-width: 100px"
+                            v-if="$props.columnSearch"
                         >
-                            <QCardSection
-                                vertical
-                                class="no-margin no-padding"
-                                :class="colsMap.tableActions ? 'w-80' : 'fit'"
+                            <VnTableFilter
+                                :column="col"
+                                :show-title="true"
+                                :data-key="$attrs['data-key']"
+                                v-model="params[columnName(col)]"
+                                :search-url="searchUrl"
+                            />
+                        </QTh>
+                    </template>
+                    <template #header-cell-tableActions>
+                        <QTh auto-width class="sticky" />
+                    </template>
+                    <template #body-cell-tableStatus="{ col, row }">
+                        <QTd auto-width :class="`text-${col.align ?? 'left'}`">
+                            <VnTableChip
+                                :columns="splittedColumns.columnChips"
+                                :row="row"
+                            >
+                                <template #afterChip>
+                                    <slot name="afterChip" :row="row"></slot>
+                                </template>
+                            </VnTableChip>
+                        </QTd>
+                    </template>
+                    <template #body-cell="{ col, row }">
+                        <!-- Columns -->
+                        <QTd
+                            auto-width
+                            class="no-margin q-px-xs"
+                            :class="`text-${col.align ?? 'left'}`"
+                        >
+                            <VnTableColumn
+                                :column="col"
+                                :row="row"
+                                :is-editable="false"
+                                v-model="row[col.name]"
+                                component-prop="columnField"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-tableActions="{ col, row }">
+                        <QTd
+                            auto-width
+                            :class="`text-${col.align ?? 'left'}`"
+                            class="sticky no-padding"
+                            @click="stopEventPropagation($event)"
+                        >
+                            <QBtn
+                                v-for="(btn, index) of col.actions"
+                                :key="index"
+                                :title="btn.title"
+                                :icon="btn.icon"
+                                class="q-px-sm"
+                                flat
+                                :class="
+                                    btn.isPrimary
+                                        ? 'text-primary-light'
+                                        : 'color-vn-text '
+                                "
+                                @click="btn.action(row)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #item="{ row, colsMap }">
+                        <component
+                            :is="$props.redirect ? 'router-link' : 'span'"
+                            :to="`/${$props.redirect}/` + row.id"
+                        >
+                            <QCard
+                                bordered
+                                flat
+                                class="row no-wrap justify-between cursor-pointer"
+                                @click="
+                                    (_, row) => {
+                                        $props.rowClick && $props.rowClick(row);
+                                    }
+                                "
                             >
-                                <!-- Chips -->
                                 <QCardSection
-                                    v-if="splittedColumns.chips.length"
-                                    class="no-margin q-px-xs q-py-none"
+                                    vertical
+                                    class="no-margin no-padding"
+                                    :class="colsMap.tableActions ? 'w-80' : 'fit'"
                                 >
-                                    <VnTableChip
-                                        :columns="splittedColumns.chips"
-                                        :row="row"
+                                    <!-- Chips -->
+                                    <QCardSection
+                                        v-if="splittedColumns.chips.length"
+                                        class="no-margin q-px-xs q-py-none"
                                     >
-                                        <template #afterChip>
-                                            <slot name="afterChip" :row="row"></slot>
-                                        </template>
-                                    </VnTableChip>
-                                </QCardSection>
-                                <!-- Title -->
-                                <QCardSection
-                                    v-if="splittedColumns.title"
-                                    class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
-                                >
-                                    <span
-                                        :title="row[splittedColumns.title.name]"
-                                        @click="stopEventPropagation($event)"
-                                        class="cursor-text"
-                                    >
-                                        {{ row[splittedColumns.title.name] }}
-                                    </span>
-                                </QCardSection>
-                                <!-- Fields -->
-                                <QCardSection
-                                    class="q-pl-sm q-pr-lg q-py-xs"
-                                    :class="$props.cardClass"
-                                >
-                                    <div
-                                        v-for="col of splittedColumns.visible"
-                                        :key="col.name"
-                                        class="fields"
-                                    >
-                                        <VnLv
-                                            :label="
-                                                !col.component &&
-                                                col.label &&
-                                                `${col.label}:`
-                                            "
+                                        <VnTableChip
+                                            :columns="splittedColumns.chips"
+                                            :row="row"
                                         >
-                                            <template #value>
-                                                <span
-                                                    @click="stopEventPropagation($event)"
-                                                >
-                                                    <VnTableColumn
-                                                        :column="col"
-                                                        :row="row"
-                                                        :is-editable="false"
-                                                        v-model="row[col.name]"
-                                                        component-prop="columnField"
-                                                        :show-label="true"
-                                                    />
-                                                </span>
+                                            <template #afterChip>
+                                                <slot name="afterChip" :row="row"></slot>
                                             </template>
-                                        </VnLv>
-                                    </div>
+                                        </VnTableChip>
+                                    </QCardSection>
+                                    <!-- Title -->
+                                    <QCardSection
+                                        v-if="splittedColumns.title"
+                                        class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
+                                    >
+                                        <span
+                                            :title="row[splittedColumns.title.name]"
+                                            @click="stopEventPropagation($event)"
+                                            class="cursor-text"
+                                        >
+                                            {{ row[splittedColumns.title.name] }}
+                                        </span>
+                                    </QCardSection>
+                                    <!-- Fields -->
+                                    <QCardSection
+                                        class="q-pl-sm q-pr-lg q-py-xs"
+                                        :class="$props.cardClass"
+                                    >
+                                        <div
+                                            v-for="col of splittedColumns.visible"
+                                            :key="col.name"
+                                            class="fields"
+                                        >
+                                            <VnLv
+                                                :label="
+                                                    !col.component &&
+                                                    col.label &&
+                                                    `${col.label}:`
+                                                "
+                                            >
+                                                <template #value>
+                                                    <span
+                                                        @click="
+                                                            stopEventPropagation($event)
+                                                        "
+                                                    >
+                                                        <VnTableColumn
+                                                            :column="col"
+                                                            :row="row"
+                                                            :is-editable="false"
+                                                            v-model="row[col.name]"
+                                                            component-prop="columnField"
+                                                            :show-label="true"
+                                                        />
+                                                    </span>
+                                                </template>
+                                            </VnLv>
+                                        </div>
+                                    </QCardSection>
                                 </QCardSection>
-                            </QCardSection>
-                            <!-- Actions -->
-                            <QCardSection
-                                v-if="colsMap.tableActions"
-                                class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
-                                @click="stopEventPropagation($event)"
-                            >
-                                <QBtn
-                                    v-for="(btn, index) of splittedColumns.actions
-                                        .actions"
-                                    :key="index"
-                                    :title="btn.title"
-                                    :icon="btn.icon"
-                                    class="q-pa-xs"
-                                    flat
-                                    :class="
-                                        btn.isPrimary
-                                            ? 'text-primary-light'
-                                            : 'color-vn-text '
-                                    "
-                                    @click="btn.action(row)"
-                                />
-                            </QCardSection>
-                        </QCard>
-                    </component>
-                </template>
-            </QTable>
-        </template>
-    </CrudModel>
+                                <!-- Actions -->
+                                <QCardSection
+                                    v-if="colsMap.tableActions"
+                                    class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
+                                    @click="stopEventPropagation($event)"
+                                >
+                                    <QBtn
+                                        v-for="(btn, index) of splittedColumns.actions
+                                            .actions"
+                                        :key="index"
+                                        :title="btn.title"
+                                        :icon="btn.icon"
+                                        class="q-pa-xs"
+                                        flat
+                                        :class="
+                                            btn.isPrimary
+                                                ? 'text-primary-light'
+                                                : 'color-vn-text '
+                                        "
+                                        @click="btn.action(row)"
+                                    />
+                                </QCardSection>
+                            </QCard>
+                        </component>
+                    </template>
+                </QTable>
+            </template>
+        </CrudModel>
+    </div>
     <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
         <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
         <QTooltip>
@@ -445,7 +457,7 @@ defineExpose({
     </QPageSticky>
     <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
         <FormModelPopup
-            v-bind="{ ...$attrs, ...create }"
+            v-bind="create"
             :model="$attrs['data-key'] + 'Create'"
             @on-data-saved="(_, res) => create.onDataSaved(res)"
         >
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 7be53ad96..21e1ebeed 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -382,7 +382,6 @@ function handleLocation(data, location) {
         ref="tableRef"
         data-key="CustomerExtendedList"
         url="Clients/extendedListFilter"
-        url-create="Clients/createWithUser"
         :create="{
             urlCreate: 'Clients/createWithUser',
             title: 'Create client',