verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 64 Releases Wiki Activity

Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 6105-createClaimNotes

This commit is contained in:
Jorge Penadés 2023-08-17 11:46:02 +02:00
parent e7fe7e1888 e8775a9585
commit 822fdb75cb
15 changed files with 355 additions and 472 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ui/CardDescriptor.vue
View File

@ -111,25 +111,23 @@ watch($props, async () => {
<QList dense> <QList dense>
<QItemLabel header class="ellipsis text-h5" :lines="1"> <QItemLabel header class="ellipsis text-h5" :lines="1">
<div class="title"> <div class="title">
<span v-if="$props.title"> <span v-if="$props.title" :title="$props.title">
{{ $props.title }} {{ $props.title }}
<QTooltip>{{ $props.title }}</QTooltip>
</span> </span>
<slot v-else name="description" :entity="entity"> <slot v-else name="description" :entity="entity">
<span> <span :title="entity.name">
{{ entity.name }} {{ entity.name }}
<QTooltip>{{ entity.name }}</QTooltip>
</span> </span>
</slot> </slot>
</div> </div>
</QItemLabel> </QItemLabel>
<QItem dense> <QItem dense>
<QItemLabel class="subtitle text-white" caption> <QItemLabel class="subtitle" caption>
#{{ $props.subtitle ?? entity.id }} #{{ $props.subtitle ?? entity.id }}
</QItemLabel> </QItemLabel>
</QItem> </QItem>
</QList> </QList>
<div class="list-box"> <div class="list-box q-mt-xs">
<slot name="body" :entity="entity" /> <slot name="body" :entity="entity" />
</div> </div>
</div> </div>
@ -163,11 +161,12 @@ watch($props, async () => {
display: flex; display: flex;
padding: 2px 16px; padding: 2px 16px;
.label { .label {
color: $label-color; color: var(--vn-label);
font-size: 12px; font-size: 12px;
width: 47%; width: 47%;
} }
.value { .value {
color: var(--vn-text);
font-size: 14px; font-size: 14px;
margin-left: 12px; margin-left: 12px;
width: 47%; width: 47%;
@ -184,22 +183,26 @@ watch($props, async () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .title {
overflow: hidden;
text-overflow: ellipsis;
span { span {
color: $primary; color: $primary;
font-weight: bold; font-weight: bold;
} }
} }
.subtitle { .subtitle {
color: var(--vn-text);
font-size: 16px; font-size: 16px;
margin-bottom: 15px;
} }
.list-box { .list-box {
width: 90%; width: 90%;
background-color: rgba(87, 86, 86, 0.2); background-color: var(--vn-gray);
margin: 20px 10px 0 10px; margin: 10px auto;
padding: 10px 5px 10px 0px; padding: 10px 5px 10px 0px;
border-radius: 8px; border-radius: 8px;
.q-item__label { .q-item__label {
color: $label-color; color: var(--vn-label);
} }
} }
.descriptor { .descriptor {

95
src/components/ui/CardList.vue Normal file
View File

@ -0,0 +1,95 @@
<script setup>
const $props = defineProps({
id: { type: Number, default: null },
title: { type: String, default: null },
});
</script>
<template>
<QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7">
<div>
<slot name="title">
<div class="title">
{{ $props.title ?? `#${$props.id}` }}
</div>
</slot>
<div class="card-list-body">
<div class="list-items">
<slot name="list-items" />
</div>
<div class="actions">
<slot name="actions" />
</div>
</div>
</div>
</QCard>
</template>
<style lang="scss">
.card-list-body {
.vn-label-value {
display: flex;
justify-content: flex-start;
gap: 2%;
width: 50%;
.label {
width: 30%;
color: var(--vn-label);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value {
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.actions {
.q-btn {
width: 30px;
}
.q-icon {
color: $primary;
font-size: 25px;
}
}
@media (max-width: $breakpoint-xs) {
.card-list-body {
.vn-label-value {
width: 100%;
}
}
}
</style>
<style lang="scss" scoped>
.card {
padding: 30px;
transition: background-color 0.2s;
}
.card-list-body {
display: flex;
justify-content: space-between;
}
.card:hover {
background-color: var(--vn-gray);
}
.title {
color: $primary;
font-size: 22px;
font-weight: bold;
}
.list-items {
width: 100%;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
}
.actions {
display: flex;
flex-direction: column;
justify-content: center;
}
</style>

3
src/components/ui/CardSummary.vue
View File

@ -151,4 +151,7 @@ watch(props, async () => {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.summaryHeader {
color: $white;
}
</style> </style>

9
src/components/ui/VnLv.vue
View File

@ -4,10 +4,9 @@ import { dashIfEmpty } from 'src/filters';
const $props = defineProps({ const $props = defineProps({
label: { type: String, default: null }, label: { type: String, default: null },
value: { value: { type: [Number, String, Boolean], default: null },
type: [String, Boolean], titleLabel: { type: String, default: null },
default: null, titleValue: { type: [Number, String, Boolean], default: null },
},
info: { type: String, default: null }, info: { type: String, default: null },
dash: { type: Boolean, default: true }, dash: { type: Boolean, default: true },
}); });
@ -17,7 +16,7 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
<div class="vn-label-value"> <div class="vn-label-value">
<div v-if="$props.label || $slots.label" class="label"> <div v-if="$props.label || $slots.label" class="label">
<slot name="label"> <slot name="label">
<span>{{ $props.label }}</span> <span :title="$props.titleLabel ?? $props.label">{{ $props.label }}</span>
</slot> </slot>
</div> </div>
<div class="value"> <div class="value">

10
src/css/app.scss
View File

@ -26,17 +26,11 @@ select:-webkit-autofill {
body.body--light { body.body--light {
.q-header .q-toolbar { .q-header .q-toolbar {
background-color: white; background-color: $white;
color: #555; color: #555;
} }
.summary {
.header {
color: white;
}
}
--vn-text: #000000; --vn-text: #000000;
--vn-gray: #dddddd; --vn-gray: #f5f5f5;
--vn-label: #5f5f5f; --vn-label: #5f5f5f;
} }

3
src/css/quasar.variables.scss
View File

@ -15,6 +15,7 @@
$primary: #ec8916; $primary: #ec8916;
$secondary: #26a69a; $secondary: #26a69a;
$accent: #9c27b0; $accent: #9c27b0;
$white: #fff;
$positive: #21ba45; $positive: #21ba45;
$negative: #c10015; $negative: #c10015;
@ -46,5 +47,3 @@ $dark-shadow-color: #000;
$dark: #292929; $dark: #292929;
$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24); $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
$spacing-md: 16px; $spacing-md: 16px;
$label-color: #ffffff99;

3
src/i18n/en/index.js
View File

@ -347,11 +347,14 @@ export default {
list: { list: {
ref: 'Reference', ref: 'Reference',
issued: 'Issued', issued: 'Issued',
shortIssued: 'Issued',
amount: 'Amount', amount: 'Amount',
client: 'Client', client: 'Client',
created: 'Created', created: 'Created',
shortCreated: 'Created',
company: 'Company', company: 'Company',
dued: 'Due date', dued: 'Due date',
shortDued: 'Due date',
}, },
card: { card: {
issued: 'Issued', issued: 'Issued',

3
src/i18n/es/index.js
View File

@ -347,11 +347,14 @@ export default {
list: { list: {
ref: 'Referencia', ref: 'Referencia',
issued: 'Fecha emisión', issued: 'Fecha emisión',
shortIssued: 'F. emisión',
amount: 'Importe', amount: 'Importe',
client: 'Cliente', client: 'Cliente',
created: 'Fecha creación', created: 'Fecha creación',
shortCreated: 'F. creación',
company: 'Empresa', company: 'Empresa',
dued: 'Fecha vencimineto', dued: 'Fecha vencimineto',
shortDued: 'F. vencimiento',
}, },
card: { card: {
issued: 'Fecha emisión', issued: 'Fecha emisión',

166
src/pages/Claim/ClaimList.vue
View File

@ -9,6 +9,8 @@ import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue'; import VnSearchbar from 'components/ui/VnSearchbar.vue';
import ClaimFilter from './ClaimFilter.vue'; import ClaimFilter from './ClaimFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
@ -74,116 +76,62 @@ function viewSummary(id) {
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id"> <CardList
<QItem v-for="row of rows"
class="q-pa-none items-start cursor-pointer q-hoverable" :key="row.id"
v-ripple :title="row.clientName"
clickable @click="navigate(row.id)"
> >
<QItemSection class="q-pa-md" @click="navigate(row.id)"> <template #list-items>
<div class="text-h6 link"> <VnLv label="ID" :value="row.id" />
{{ row.clientName }} <VnLv
</div> :label="t('claim.list.customer')"
<QItemLabel caption>#{{ row.id }}</QItemLabel> :value="row.clientName"
<QList> />
<QItem class="q-pa-none"> <VnLv
<QItemSection> :label="t('claim.list.assignedTo')"
<QItemLabel caption> :value="row.workerName"
{{ t('claim.list.customer') }} />
</QItemLabel> <VnLv
<QItemLabel> :label="t('claim.list.created')"
{{ row.clientName }} :value="toDate(row.created)"
</QItemLabel> />
</QItemSection> <VnLv :label="t('claim.list.state')">
<QItemSection> <template #value>
<QItemLabel caption> <QBadge
{{ t('claim.list.assignedTo') }} :color="stateColor(row.stateCode)"
</QItemLabel> class="q-ma-none"
<QItemLabel> dense
{{ row.workerName }} >
</QItemLabel> {{ row.stateDescription }}
</QItemSection> </QBadge>
</QItem> </template>
<QItem class="q-pa-none"> </VnLv>
<QItemSection> </template>
<QItemLabel caption> <template #actions>
{{ t('claim.list.created') }} <QBtn
</QItemLabel> flat
<QItemLabel> icon="arrow_circle_right"
{{ toDate(row.created) }} @click="navigate(row.id)"
</QItemLabel> >
</QItemSection> <QTooltip>
<QItemSection> {{ t('components.smartCard.openCard') }}
<QItemLabel caption> </QTooltip>
{{ t('claim.list.state') }} </QBtn>
</QItemLabel> <QBtn flat icon="preview" @click="viewSummary(row.id)">
<QItemLabel> <QTooltip>
<QBadge {{ t('components.smartCard.openSummary') }}
:color="stateColor(row.stateCode)" </QTooltip>
class="q-ma-none" </QBtn>
dense <QBtn flat icon="vn:client">
> <QTooltip>
{{ row.stateDescription }} {{ t('components.smartCard.viewDescription') }}
</QBadge> </QTooltip>
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QItemSection>
<QSeparator vertical />
<QCardActions vertical class="justify-between">
<!-- <QBtn color="grey-7" round flat icon="more_vert">
<QTooltip>{{ t('customer.list.moreOptions') }}</QTooltip>
<QMenu cover auto-close>
<QList>
<QItem clickable>
<QItemSection avatar>
<QIcon name="add" />
</QItemSection>
<QItemSection>Add a note</QItemSection>
</QItem>
<QItem clickable>
<QItemSection avatar>
<QIcon name="logs" />
</QItemSection>
<QItemSection>Display claim logs</QItemSection>
</QItem>
</QList>
</QMenu>
</QBtn> -->
<QBtn <CustomerDescriptorProxy :id="row.clientFk" />
flat </QBtn>
round </template>
color="orange" </CardList>
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn
flat
round
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
<QBtn flat round color="grey-7" icon="vn:client">
<QTooltip>
{{ t('components.smartCard.viewDescription') }}
</QTooltip>
<CustomerDescriptorProxy :id="row.clientFk" />
</QBtn>
</QCardActions>
</QItem>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>

115
src/pages/Customer/CustomerList.vue
View File

@ -7,6 +7,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue'; import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import CustomerFilter from './CustomerFilter.vue'; import CustomerFilter from './CustomerFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
@ -66,85 +68,40 @@ function viewSummary(id) {
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id"> <CardList
<QItem v-for="row of rows"
class="q-pa-none items-start cursor-pointer q-hoverable" :key="row.id"
v-ripple :title="row.name"
clickable @click="navigate(row.id)"
> >
<QItemSection class="q-pa-md" @click="navigate(row.id)"> <template #list-items>
<div class="text-h6">{{ row.name }}</div> <VnLv label="ID" :value="row.id" />
<QItemLabel caption>#{{ row.id }}</QItemLabel> <VnLv :label="t('customer.list.email')" :value="row.email" />
<VnLv :label="t('customer.list.phone')" :value="row.phone" />
<QList> </template>
<QItem class="q-pa-none"> <template #actions>
<QItemSection> <QBtn
<QItemLabel caption> flat
{{ t('customer.list.email') }} color="primary"
</QItemLabel> icon="arrow_circle_right"
<QItemLabel>{{ row.email }}</QItemLabel> @click="navigate(row.id)"
</QItemSection> >
</QItem> <QTooltip>
<QItem class="q-pa-none"> {{ t('components.smartCard.openCard') }}
<QItemSection> </QTooltip>
<QItemLabel caption> </QBtn>
{{ t('customer.list.phone') }} <QBtn
</QItemLabel> flat
<QItemLabel>{{ row.phone }}</QItemLabel> color="grey-7"
</QItemSection> icon="preview"
</QItem> @click="viewSummary(row.id)"
</QList> >
</QItemSection> <QTooltip>
<QSeparator vertical /> {{ t('components.smartCard.openSummary') }}
<QCardActions vertical class="justify-between"> </QTooltip>
<!-- <QBtn color="grey-7" round flat icon="more_vert"> </QBtn>
<QTooltip>{{ t('customer.list.moreOptions') }}</QTooltip> </template>
<QMenu cover auto-close> </CardList>
<QList>
<QItem clickable>
<QItemSection avatar>
<QIcon name="add" />
</QItemSection>
<QItemSection>Add a note</QItemSection>
</QItem>
<QItem clickable>
<QItemSection avatar>
<QIcon name="history" />
</QItemSection>
<QItemSection>Display customer history</QItemSection>
</QItem>
</QList>
</QMenu>
</QBtn> -->
<QBtn
flat
round
color="primary"
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn
flat
round
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
<!-- <QBtn flat round color="grey-7" icon="vn:ticket">
<QTooltip>{{ t('customer.list.customerOrders') }}</QTooltip>
</QBtn> -->
</QCardActions>
</QItem>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>

146
src/pages/InvoiceOut/InvoiceOutList.vue
View File

@ -9,6 +9,8 @@ import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
import { toDate, toCurrency } from 'src/filters/index'; import { toDate, toCurrency } from 'src/filters/index';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import InvoiceOutFilter from './InvoiceOutFilter.vue'; import InvoiceOutFilter from './InvoiceOutFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
@ -71,97 +73,59 @@ function viewSummary(id) {
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id"> <CardList
<QItem v-for="row of rows"
class="q-pa-none items-start cursor-pointer q-hoverable" :key="row.id"
v-ripple :title="row.ref"
clickable @click="navigate(row.id)"
> >
<QItemSection class="q-pa-md" @click="navigate(row.id)"> <template #list-items>
<div class="text-h6">{{ row.ref }}</div> <VnLv label="ID" :value="row.id" />
<QItemLabel caption>#{{ row.id }}</QItemLabel> <VnLv
<QList> :label="t('invoiceOut.list.shortIssued')"
<QItem class="q-pa-none"> :title-label="t('invoiceOut.list.issued')"
<QItemSection> :value="toDate(row.issued)"
<QItemLabel caption> />
{{ t('invoiceOut.list.issued') }} <VnLv
</QItemLabel> :label="t('invoiceOut.list.amount')"
<QItemLabel> :value="toCurrency(row.amount)"
{{ toDate(row.issued) }} />
</QItemLabel> <VnLv
</QItemSection> :label="t('invoiceOut.list.client')"
<QItemSection> :value="row.clientSocialName"
<QItemLabel caption> />
{{ t('invoiceOut.list.amount') }} <VnLv
</QItemLabel> :label="t('invoiceOut.list.shortCreated')"
<QItemLabel> :title-label="t('invoiceOut.list.created')"
{{ toCurrency(row.amount) }} :value="toDate(row.created)"
</QItemLabel> />
</QItemSection> <VnLv
</QItem> :label="t('invoiceOut.list.company')"
<QItem class="q-pa-none"> :value="row.companyCode"
<QItemSection> />
<QItemLabel caption> <VnLv
{{ t('invoiceOut.list.client') }} :label="t('invoiceOut.list.shortDued')"
</QItemLabel> :title-label="t('invoiceOut.list.dued')"
<QItemLabel> :value="toDate(row.dued)"
{{ row.clientSocialName }} />
</QItemLabel> </template>
</QItemSection> <template #actions>
<QItemSection> <QBtn
<QItemLabel caption> flat
{{ t('invoiceOut.list.created') }} icon="arrow_circle_right"
</QItemLabel> @click="navigate(row.id)"
<QItemLabel> >
{{ toDate(row.created) }} <QTooltip>
</QItemLabel> {{ t('components.smartCard.openCard') }}
</QItemSection> </QTooltip>
</QItem> </QBtn>
<QItem class="q-pa-none"> <QBtn flat icon="preview" @click="viewSummary(row.id)">
<QItemSection> <QTooltip>
<QItemLabel caption> {{ t('components.smartCard.openSummary') }}
{{ t('invoiceOut.list.company') }} </QTooltip>
</QItemLabel> </QBtn>
<QItemLabel>{{ row.companyCode }}</QItemLabel> </template>
</QItemSection> </CardList>
<QItemSection>
<QItemLabel caption>
{{ t('invoiceOut.list.dued') }}
</QItemLabel>
<QItemLabel>
{{ toDate(row.dued) }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QItemSection>
<QSeparator vertical />
<QCardActions vertical class="justify-between">
<QBtn
flat
round
color="orange"
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn
flat
round
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
</QCardActions>
</QItem>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>

2
src/pages/Ticket/Card/TicketDescriptor.vue
View File

@ -88,7 +88,7 @@ const setData = (entity) =>
<template #body="{ entity }"> <template #body="{ entity }">
<VnLv v-if="entity.ticketState" :label="t('ticket.card.state')"> <VnLv v-if="entity.ticketState" :label="t('ticket.card.state')">
<template #value> <template #value>
<QBadge :color="entity.ticketState.state.classColor ?? 'dark'"> <QBadge :color="entity.ticketState.state.classColor">
{{ entity.ticketState.state.name }} {{ entity.ticketState.state.name }}
</QBadge> </QBadge>
</template> </template>

145
src/pages/Ticket/TicketList.vue
View File

@ -9,6 +9,8 @@ import { toDate, toDateString, toCurrency } from 'src/filters/index';
import TicketSummaryDialog from './Card/TicketSummaryDialog.vue'; import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import TicketFilter from './TicketFilter.vue'; import TicketFilter from './TicketFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
const router = useRouter(); const router = useRouter();
const quasar = useQuasar(); const quasar = useQuasar();
@ -81,105 +83,50 @@ function viewSummary(id) {
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id"> <CardList
<QItem v-for="row of rows"
class="q-pa-none items-start cursor-pointer q-hoverable" :key="row.id"
v-ripple :id="row.id"
clickable @click="navigate(row.id)"
> >
<QItemSection class="q-pa-md" @click="navigate(row.id)"> <template #list-items>
<div class="text-h6">{{ row.name }}</div> <VnLv
<QItemLabel caption>#{{ row.id }}</QItemLabel> :label="t('ticket.list.nickname')"
<QList> :value="row.nickname"
<QItem class="q-pa-none"> />
<QItemSection> <VnLv :label="t('ticket.list.state')">
<QItemLabel caption> <template #value>
{{ t('ticket.list.nickname') }} <QBadge
</QItemLabel> :color="row.classColor ?? 'orange'"
<QItemLabel> class="q-ma-none"
{{ row.nickname }} dense
</QItemLabel> >
</QItemSection> {{ row.state }}
<QItemSection> </QBadge>
<QItemLabel caption> </template>
{{ t('ticket.list.state') }} </VnLv>
</QItemLabel> <VnLv
<QItemLabel> :label="t('ticket.list.shipped')"
<QBadge :value="toDate(row.shipped)"
:color="row.classColor ?? 'dark'" />
class="q-ma-none" <VnLv :label="t('Zone')" :value="row.zoneName" />
dense <VnLv
> :label="t('ticket.list.salesPerson')"
{{ row.state }} :value="row.salesPerson"
</QBadge> />
</QItemLabel> <VnLv
</QItemSection> :label="t('ticket.list.total')"
</QItem> :value="toCurrency(row.totalWithVat)"
<QItem class="q-pa-none"> />
<QItemSection> </template>
<QItemLabel caption> <template #actions>
{{ t('ticket.list.shipped') }} <QBtn flat icon="preview" @click="viewSummary(row.id)">
</QItemLabel> <QTooltip>
<QItemLabel> {{ t('components.smartCard.openSummary') }}
{{ toDate(row.shipped) }} </QTooltip>
</QItemLabel> </QBtn>
</QItemSection> </template>
<QItemSection> </CardList>
<QItemLabel caption>
{{ t('Zone') }}
</QItemLabel>
<QItemLabel>
{{ row.zoneName }}
</QItemLabel>
</QItemSection>
</QItem>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('ticket.list.salesPerson') }}
</QItemLabel>
<QItemLabel>
{{ row.salesPerson }}
</QItemLabel>
</QItemSection>
<QItemSection>
<QItemLabel caption>
{{ t('ticket.list.total') }}
</QItemLabel>
<QItemLabel>
{{ toCurrency(row.totalWithVat) }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QItemSection>
<QSeparator vertical />
<QCardActions vertical class="justify-between">
<QBtn
flat
round
color="orange"
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn
flat
round
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
</QCardActions>
</QItem>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>

3
src/pages/Worker/Card/WorkerDescriptor.vue
View File

@ -63,6 +63,7 @@ const setData = (entity) =>
:url="`Workers/${entityId}`" :url="`Workers/${entityId}`"
:filter="filter" :filter="filter"
:title="data.title" :title="data.title"
:subtitle="data.subtitle"
@on-fetch=" @on-fetch="
(data) => { (data) => {
worker = data; worker = data;
@ -74,7 +75,7 @@ const setData = (entity) =>
<QImg :src="getWorkerAvatar()" class="photo"> <QImg :src="getWorkerAvatar()" class="photo">
<template #error> <template #error>
<div <div
class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center" class="absolute-full picture text-center q-pa-md flex flex-center"
> >
<div> <div>
<div class="text-grey-5" style="opacity: 0.4; font-size: 5vh"> <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">

101
src/pages/Worker/WorkerList.vue
View File

@ -7,6 +7,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue'; import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import WorkerFilter from './WorkerFilter.vue'; import WorkerFilter from './WorkerFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
@ -66,73 +68,38 @@ function viewSummary(id) {
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id"> <CardList
<QItem v-for="row of rows"
class="q-pa-none items-start cursor-pointer q-hoverable" :key="row.id"
v-ripple @click="navigate(row.id)"
clickable :title="row.nickname"
> >
<QItemSection class="q-pa-md" @click="navigate(row.id)"> <template #list-items>
<QItemLabel class="text-h6"> <VnLv label="ID" :value="row.id" />
{{ row.nickname }} <VnLv :label="t('worker.list.name')" :value="row.userName" />
</QItemLabel> <VnLv :label="t('worker.list.email')" :value="row.email" />
<QItemLabel caption>#{{ row.id }}</QItemLabel> <VnLv
<QList> :label="t('worker.list.department')"
<QItem class="q-pa-none"> :value="row.department"
<QItemSection> />
<QItemLabel caption> </template>
{{ t('worker.list.name') }} <template #actions>
</QItemLabel> <QBtn
<QItemLabel>{{ row.userName }}</QItemLabel> flat
</QItemSection> icon="arrow_circle_right"
</QItem> @click="navigate(row.id)"
<QItem class="q-pa-none"> >
<QItemSection> <QTooltip>
<QItemLabel caption> {{ t('components.smartCard.openCard') }}
{{ t('worker.list.email') }} </QTooltip>
</QItemLabel> </QBtn>
<QItemLabel>{{ row.email }}</QItemLabel> <QBtn flat icon="preview" @click="viewSummary(row.id)">
</QItemSection> <QTooltip>
</QItem> {{ t('components.smartCard.openSummary') }}
<QItem class="q-pa-none"> </QTooltip>
<QItemSection> </QBtn>
<QItemLabel caption>{{ </template>
t('worker.list.department') </CardList>
}}</QItemLabel>
<QItemLabel>
{{ row.department }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QItemSection>
<QSeparator vertical />
<QCardActions vertical class="justify-between">
<QBtn
flat
round
color="primary"
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn
flat
round
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
</QCardActions>
</QItem>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>