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',