wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

528
src/components/VnTable/VnTable.vue
View File

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

2
src/components/common/VnInputDate.vue
View File

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

6
src/components/ui/VnPaginate.vue
View File

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

15
src/pages/Monitor/MonitorClients.vue
View File

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

4
src/pages/Monitor/MonitorClientsActions.vue
View File

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

33
src/pages/Monitor/MonitorOrders.vue
View File

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

1
src/pages/Monitor/locale/en.yml
View File

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

1
src/pages/Monitor/locale/es.yml
View File

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