0
0
Fork 0

chore: refs #7353 fix warnings

This commit is contained in:
Jorge Penadés 2024-08-23 15:55:56 +02:00
parent fdacdf1a12
commit 1bbc6c1840
8 changed files with 288 additions and 302 deletions

View File

@ -1,5 +1,5 @@
<script setup>
import { ref, onBeforeMount, onMounted, computed, watch } from 'vue';
import { ref, onBeforeMount, onMounted, computed, watch, useAttrs } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
@ -109,6 +109,7 @@ const showForm = ref(false);
const splittedColumns = ref({ columns: [] });
const columnsVisibilitySkiped = ref();
const createForm = ref();
const defaultClass = useAttrs().class ?? 'q-px-md';
const tableModes = [
{
@ -332,296 +333,277 @@ defineExpose({
</QScrollArea>
</QDrawer>
<!-- class in div to fix warn-->
<div class="q-px-md">
<CrudModel
v-bind="$attrs"
:limit="20"
ref="CrudModelRef"
@on-fetch="(...args) => emit('onFetch', ...args)"
:search-url="searchUrl"
:disable-infinite-scroll="isTableMode"
@save-changes="reload"
:has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
:auto-load="hasParams || $attrs['auto-load']"
>
<template
v-for="(_, slotName) in $slots"
#[slotName]="slotData"
:key="slotName"
<CrudModel
v-bind="{ ...$attrs, ...{ class: defaultClass } }"
:limit="20"
ref="CrudModelRef"
@on-fetch="(...args) => emit('onFetch', ...args)"
:search-url="searchUrl"
:disable-infinite-scroll="isTableMode"
@save-changes="reload"
:has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
:auto-load="hasParams || $attrs['auto-load']"
>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template>
<template #body="{ rows }">
<QTable
v-bind="table"
class="vnTable"
:columns="splittedColumns.columns"
:rows="rows"
v-model:selected="selected"
:grid="!isTableMode"
table-header-class="bg-header"
card-container-class="grid-three"
flat
:style="isTableMode && `max-height: ${tableHeight}`"
virtual-scroll
@virtual-scroll="
(event) =>
event.index > rows.length - 2 &&
CrudModelRef.vnPaginateRef.paginate()
"
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
@update:selected="emit('update:selected', $event)"
>
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template>
<template #body="{ rows }">
<QTable
v-bind="table"
class="vnTable"
:columns="splittedColumns.columns"
:rows="rows"
v-model:selected="selected"
:grid="!isTableMode"
table-header-class="bg-header"
card-container-class="grid-three"
flat
:style="isTableMode && `max-height: ${tableHeight}`"
virtual-scroll
@virtual-scroll="
(event) =>
event.index > rows.length - 2 &&
CrudModelRef.vnPaginateRef.paginate()
"
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
@update:selected="emit('update:selected', $event)"
>
<template #top-left v-if="!$props.withoutHeader">
<slot name="top-left"></slot>
</template>
<template #top-right v-if="!$props.withoutHeader">
<VnVisibleColumn
v-if="isTableMode"
v-model="splittedColumns.columns"
:table-code="tableCode ?? route.name"
:skip="columnsVisibilitySkiped"
/>
<QBtnToggle
v-model="mode"
toggle-color="primary"
class="bg-vn-section-color"
dense
:options="tableModes"
/>
<QBtn
v-if="$props.rightSearch"
icon="filter_alt"
class="bg-vn-section-color q-ml-md"
dense
@click="stateStore.toggleRightDrawer()"
/>
</template>
<template #header-cell="{ col }">
<QTh v-if="col.visible ?? true">
<div
class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`"
:style="$props.columnSearch ? 'height: 75px' : ''"
>
<div
class="row items-center no-wrap"
style="height: 30px"
>
<VnTableOrder
v-model="orders[col.orderBy ?? col.name]"
:name="col.orderBy ?? col.name"
:label="col?.label"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
/>
</div>
<VnTableFilter
v-if="$props.columnSearch"
:column="col"
:show-title="true"
<template #top-left v-if="!$props.withoutHeader">
<slot name="top-left"></slot>
</template>
<template #top-right v-if="!$props.withoutHeader">
<VnVisibleColumn
v-if="isTableMode"
v-model="splittedColumns.columns"
:table-code="tableCode ?? route.name"
:skip="columnsVisibilitySkiped"
/>
<QBtnToggle
v-model="mode"
toggle-color="primary"
class="bg-vn-section-color"
dense
:options="tableModes"
/>
<QBtn
v-if="$props.rightSearch"
icon="filter_alt"
class="bg-vn-section-color q-ml-md"
dense
@click="stateStore.toggleRightDrawer()"
/>
</template>
<template #header-cell="{ col }">
<QTh v-if="col.visible ?? true">
<div
class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`"
:style="$props.columnSearch ? 'height: 75px' : ''"
>
<div class="row items-center no-wrap" style="height: 30px">
<VnTableOrder
v-model="orders[col.orderBy ?? col.name]"
:name="col.orderBy ?? col.name"
:label="col?.label"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
class="full-width"
/>
</div>
</QTh>
</template>
<template #header-cell-tableActions>
<QTh auto-width class="sticky" />
</template>
<template #body-cell-tableStatus="{ col, row }">
<QTd auto-width :class="getColAlign(col)">
<VnTableChip
:columns="splittedColumns.columnChips"
<VnTableFilter
v-if="$props.columnSearch"
:column="col"
:show-title="true"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
class="full-width"
/>
</div>
</QTh>
</template>
<template #header-cell-tableActions>
<QTh auto-width class="sticky" />
</template>
<template #body-cell-tableStatus="{ col, row }">
<QTd auto-width :class="getColAlign(col)">
<VnTableChip :columns="splittedColumns.columnChips" :row="row">
<template #afterChip>
<slot name="afterChip" :row="row"></slot>
</template>
</VnTableChip>
</QTd>
</template>
<template #body-cell="{ col, row, rowIndex }">
<!-- Columns -->
<QTd
auto-width
class="no-margin q-px-xs"
:class="[getColAlign(col), col.columnClass]"
v-if="col.visible ?? true"
@click.ctrl="
($event) =>
rowCtrlClickFunction && rowCtrlClickFunction($event, row)
"
>
<slot
:name="`column-${col.name}`"
:col="col"
:row="row"
:row-index="rowIndex"
>
<VnTableColumn
:column="col"
:row="row"
>
<template #afterChip>
<slot name="afterChip" :row="row"></slot>
</template>
</VnTableChip>
</QTd>
</template>
<template #body-cell="{ col, row, rowIndex }">
<!-- Columns -->
<QTd
auto-width
class="no-margin q-px-xs"
:class="[getColAlign(col), col.columnClass]"
v-if="col.visible ?? true"
@click.ctrl="
($event) =>
rowCtrlClickFunction &&
rowCtrlClickFunction($event, row)
:is-editable="col.isEditable ?? isEditable"
v-model="row[col.name]"
component-prop="columnField"
/>
</slot>
</QTd>
</template>
<template #body-cell-tableActions="{ col, row }">
<QTd
auto-width
:class="getColAlign(col)"
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 '
"
:style="`visibility: ${
(btn.show && btn.show(row)) ?? true ? 'visible' : 'hidden'
}`"
@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);
}
"
>
<slot
:name="`column-${col.name}`"
:col="col"
:row="row"
:row-index="rowIndex"
>
<VnTableColumn
:column="col"
:row="row"
:is-editable="col.isEditable ?? isEditable"
v-model="row[col.name]"
component-prop="columnField"
/>
</slot>
</QTd>
</template>
<template #body-cell-tableActions="{ col, row }">
<QTd
auto-width
:class="getColAlign(col)"
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 '
"
:style="`visibility: ${
(btn.show && btn.show(row)) ?? true
? 'visible'
: 'hidden'
}`"
@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);
}
"
<QCardSection
vertical
class="no-margin no-padding"
:class="colsMap.tableActions ? 'w-80' : 'fit'"
>
<!-- Chips -->
<QCardSection
vertical
class="no-margin no-padding"
:class="colsMap.tableActions ? 'w-80' : 'fit'"
v-if="splittedColumns.chips.length"
class="no-margin q-px-xs q-py-none"
>
<!-- Chips -->
<QCardSection
v-if="splittedColumns.chips.length"
class="no-margin q-px-xs q-py-none"
<VnTableChip
:columns="splittedColumns.chips"
:row="row"
>
<VnTableChip
:columns="splittedColumns.chips"
:row="row"
>
<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"
<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"
>
<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"
{{ 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, index
) of splittedColumns.cardVisible"
:key="col.name"
class="fields"
>
<div
v-for="(
col, index
) of splittedColumns.cardVisible"
:key="col.name"
class="fields"
<VnLv
:label="
!col.component && col.label
? `${col.label}:`
: ''
"
>
<VnLv
:label="
!col.component && col.label
? `${col.label}:`
: ''
"
>
<template #value>
<span
@click="
stopEventPropagation($event)
"
<template #value>
<span
@click="stopEventPropagation($event)"
>
<slot
:name="`column-${col.name}`"
:col="col"
:row="row"
:row-index="index"
>
<slot
:name="`column-${col.name}`"
:col="col"
<VnTableColumn
:column="col"
:row="row"
:row-index="index"
>
<VnTableColumn
:column="col"
:row="row"
:is-editable="false"
v-model="row[col.name]"
component-prop="columnField"
:show-label="true"
/>
</slot>
</span>
</template>
</VnLv>
</div>
</QCardSection>
:is-editable="false"
v-model="row[col.name]"
component-prop="columnField"
:show-label="true"
/>
</slot>
</span>
</template>
</VnLv>
</div>
</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>
</div>
</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>
<QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
<QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
<QTooltip>

View File

@ -3,7 +3,7 @@ import { onMounted, watch, computed, ref } from 'vue';
import { date } from 'quasar';
import { useI18n } from 'vue-i18n';
const model = defineModel({ type: String });
const model = defineModel({ type: [String, Date] });
const $props = defineProps({
isOutlined: {
type: Boolean,

View File

@ -10,6 +10,10 @@ const props = defineProps({
type: String,
required: true,
},
class: {
type: String,
default: '',
},
autoLoad: {
type: Boolean,
default: false,
@ -215,7 +219,7 @@ defineExpose({ fetch, addFilter, paginate });
v-if="store.data"
@load="onLoad"
:offset="offset"
class="full-width"
:class="['full-width', props.class]"
:disable="disableInfiniteScroll || !store.hasMoreData"
v-bind="$attrs"
>

View File

@ -121,30 +121,25 @@ const columns = computed(() => [
default-mode="table"
:disable-option="{ card: true }"
dense
class="q-px-none"
>
<template #top-left>
<VnRow>
<VnInputDate v-model="from" label="From" dense style="flex: 0.3" />
<VnInputDate v-model="to" label="To" dense style="flex: 0.3" />
<VnInputDate v-model="from" label="From" dense style="flex: 0.4" />
<VnInputDate v-model="to" label="To" dense style="flex: 0.4" />
</VnRow>
</template>
<template #column-salesPersonFk="{ row }">
<QTd>
<span class="link">{{ row.salesPerson }}</span>
<span class="link" :title="row.salesPerson" v-text="row.salesPerson" />
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</QTd>
</template>
<template #column-clientFk="{ row }">
<QTd>
<span class="link">{{ row.clientName }}</span>
<span class="link" :title="row.clientName" v-text="row.clientName" />
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</template>
</VnTable>
</template>
<style lang="scss" scoped>
td {
max-width: 120px;
}
</style>

View File

@ -8,14 +8,14 @@ import VnRow from 'src/components/ui/VnRow.vue';
class="q-pa-md"
:style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
>
<div style="flex: 0.25">
<div style="flex: 0.3">
<span
class="q-ml-md text-body1"
v-text="$t('salesMonitor.clientsOnWebsite')"
/>
<SalesClientTable />
</div>
<div style="flex: 0.75">
<div style="flex: 0.7">
<span
class="q-ml-md text-body1"
v-text="$t('salesMonitor.recentOrderActions')"

View File

@ -56,6 +56,12 @@ const columns = computed(() => [
},
},
},
{
label: t('salesOrdersTable.agency'),
name: 'agencyName',
align: 'left',
columnFilter: false,
},
{
label: t('salesOrdersTable.salesPerson'),
name: 'salesPersonFk',
@ -72,6 +78,14 @@ const columns = computed(() => [
},
},
},
{
label: t('salesOrdersTable.import'),
name: 'import',
field: 'import',
align: 'left',
columnFilter: false,
format: (row) => toCurrency(row.import),
},
]);
const getBadgeColor = (date) => {
@ -167,25 +181,14 @@ const openTab = (id) =>
<template #column-clientFk="{ row }">
<QTd>
<div class="q-mb-sm">
<span class="link" v-text="row.clientName" />
<CustomerDescriptorProxy :id="row.clientFk" />
</div>
<span
:title="$q.screen.lt.xl ? row.agencyName : ''"
v-text="row.agencyName"
/>
<span class="link" v-text="row.clientName" :title="row.clientName" />
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</template>
<template #column-salesPersonFk="{ row }">
<QTd>
<div class="q-mb-md">
<span class="link" v-text="row.salesPerson" />
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</div>
<span v-text="toCurrency(row.import)" />
</QTd>
<span class="link" v-text="row.salesPerson" />
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</template>
</VnTable>
</template>

View File

@ -17,6 +17,7 @@ salesOrdersTable:
salesPerson: Salesperson
deleteConfirmTitle: Delete selected elements
deleteConfirmMessage: All the selected elements will be deleted. Are you sure you want to continue?
agency: Agency
salesTicketsTable:
autoRefresh: Auto-refresh
problems: Problems

View File

@ -17,6 +17,7 @@ salesOrdersTable:
salesPerson: Comercial
deleteConfirmTitle: Eliminar los elementos seleccionados
deleteConfirmMessage: Todos los elementos seleccionados serán eliminados. ¿Seguro que quieres continuar?
agency: Agencia
salesTicketsTable:
autoRefresh: Auto-refresco
problems: Problemas