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

Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 5673-claim-development

This commit is contained in:
Alex Moreno 2023-08-18 09:01:04 +02:00
parent ee9319de11 c2b10ba271
commit 6c8329ec53
18 changed files with 374 additions and 496 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 {

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

@ -0,0 +1,82 @@
<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 q-pa-lg">
<div>
<slot name="title">
<div class="title text-primary text-weight-bold text-h5">
{{ $props.title ?? `#${$props.id}` }}
</div>
</slot>
<div class="card-list-body row">
<div class="list-items row flex-wrap-wrap q-mt-md">
<slot name="list-items" />
</div>
<div class="actions column justify-center">
<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 {
transition: background-color 0.2s;
}
.card:hover {
background-color: var(--vn-gray);
}
.list-items {
width: 90%;
}
@media (max-width: $breakpoint-xs) {
.list-items {
width: 85%;
}
}
</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;
--vn-dark: white; --vn-dark: white;
} }

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

@ -348,11 +348,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

@ -348,11 +348,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',

116
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,50 +76,28 @@ 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>
{{ t('claim.list.assignedTo') }}
</QItemLabel>
<QItemLabel>
{{ row.workerName }}
</QItemLabel>
</QItemSection>
</QItem>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('claim.list.created') }}
</QItemLabel>
<QItemLabel>
{{ toDate(row.created) }}
</QItemLabel>
</QItemSection>
<QItemSection>
<QItemLabel caption>
{{ t('claim.list.state') }}
</QItemLabel>
<QItemLabel>
<QBadge <QBadge
:color="stateColor(row.stateCode)" :color="stateColor(row.stateCode)"
class="q-ma-none" class="q-ma-none"
@ -125,65 +105,33 @@ function viewSummary(id) {
> >
{{ row.stateDescription }} {{ row.stateDescription }}
</QBadge> </QBadge>
</QItemLabel> </template>
</QItemSection> </VnLv>
</QItem> </template>
</QList> <template #actions>
</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 <QBtn
flat flat
round
color="orange"
icon="arrow_circle_right" icon="arrow_circle_right"
@click="navigate(row.id)" @click.stop="navigate(row.id)"
> >
<QTooltip> <QTooltip>
{{ t('components.smartCard.openCard') }} {{ t('components.smartCard.openCard') }}
</QTooltip> </QTooltip>
</QBtn> </QBtn>
<QBtn <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
flat
round
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<QTooltip> <QTooltip>
{{ t('components.smartCard.openSummary') }} {{ t('components.smartCard.openSummary') }}
</QTooltip> </QTooltip>
</QBtn> </QBtn>
<QBtn flat round color="grey-7" icon="vn:client"> <QBtn flat icon="vn:client" @click.stop>
<QTooltip> <QTooltip>
{{ t('components.smartCard.viewDescription') }} {{ t('components.smartCard.viewDescription') }}
</QTooltip> </QTooltip>
<CustomerDescriptorProxy :id="row.clientFk" /> <CustomerDescriptorProxy :id="row.clientFk" />
</QBtn> </QBtn>
</QCardActions> </template>
</QItem> </CardList>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>

77
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,63 +68,23 @@ 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>
<QItemLabel caption>
{{ t('customer.list.email') }}
</QItemLabel>
<QItemLabel>{{ row.email }}</QItemLabel>
</QItemSection>
</QItem>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('customer.list.phone') }}
</QItemLabel>
<QItemLabel>{{ row.phone }}</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="history" />
</QItemSection>
<QItemSection>Display customer history</QItemSection>
</QItem>
</QList>
</QMenu>
</QBtn> -->
<QBtn <QBtn
flat flat
round
color="primary" color="primary"
icon="arrow_circle_right" icon="arrow_circle_right"
@click="navigate(row.id)" @click.stop="navigate(row.id)"
> >
<QTooltip> <QTooltip>
{{ t('components.smartCard.openCard') }} {{ t('components.smartCard.openCard') }}
@ -130,21 +92,16 @@ function viewSummary(id) {
</QBtn> </QBtn>
<QBtn <QBtn
flat flat
round
color="grey-7" color="grey-7"
icon="preview" icon="preview"
@click="viewSummary(row.id)" @click.stop="viewSummary(row.id)"
> >
<QTooltip> <QTooltip>
{{ t('components.smartCard.openSummary') }} {{ t('components.smartCard.openSummary') }}
</QTooltip> </QTooltip>
</QBtn> </QBtn>
<!-- <QBtn flat round color="grey-7" icon="vn:ticket"> </template>
<QTooltip>{{ t('customer.list.customerOrders') }}</QTooltip> </CardList>
</QBtn> -->
</QCardActions>
</QItem>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>

2
src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
View File

@ -143,7 +143,7 @@ const ticketsColumns = ref([
<div class="header"> <div class="header">
{{ t('invoiceOut.summary.tickets') }} {{ t('invoiceOut.summary.tickets') }}
</div> </div>
<QTable :columns="ticketsColumns" :rows="tickets" flat> <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
<template #header="props"> <template #header="props">
<QTr :props="props"> <QTr :props="props">
<QTh v-for="col in props.cols" :key="col.name" :props="props"> <QTh v-for="col in props.cols" :key="col.name" :props="props">

120
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>
<QItemLabel caption>
{{ t('invoiceOut.list.created') }}
</QItemLabel>
<QItemLabel>
{{ toDate(row.created) }}
</QItemLabel>
</QItemSection>
</QItem>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('invoiceOut.list.company') }}
</QItemLabel>
<QItemLabel>{{ row.companyCode }}</QItemLabel>
</QItemSection>
<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 <QBtn
flat flat
round
color="orange"
icon="arrow_circle_right" icon="arrow_circle_right"
@click="navigate(row.id)" @click.stop="navigate(row.id)"
> >
<QTooltip> <QTooltip>
{{ t('components.smartCard.openCard') }} {{ t('components.smartCard.openCard') }}
</QTooltip> </QTooltip>
</QBtn> </QBtn>
<QBtn <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
flat
round
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<QTooltip> <QTooltip>
{{ t('components.smartCard.openSummary') }} {{ t('components.smartCard.openSummary') }}
</QTooltip> </QTooltip>
</QBtn> </QBtn>
</QCardActions> </template>
</QItem> </CardList>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>

22
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>
@ -102,16 +102,18 @@ const setData = (entity) =>
</span> </span>
</template> </template>
</VnLv> </VnLv>
<VnLv <VnLv :label="t('ticket.summary.salesPerson')">
v-if="entity.client && entity.client.salesPersonUser" <template #value>
:label="t('ticket.card.salesPerson')" <span class="link">
:value="entity.client.salesPersonUser.name" {{ entity.client.salesPersonUser.name }}
/> <WorkerDescriptorProxy
<VnLv :id="entity.client.salesPersonFk"
v-if="entity.warehouse" v-if="entity.client.salesPersonFk"
:label="t('ticket.card.warehouse')"
:value="entity.warehouse.name"
/> />
</span>
</template>
</VnLv>
<VnLv :label="t('ticket.card.warehouse')" :value="entity.warehouse?.name" />
<VnLv <VnLv
v-if="entity.agencyMode" v-if="entity.agencyMode"
:label="t('ticket.card.agency')" :label="t('ticket.card.agency')"

9
src/pages/Ticket/Card/TicketSummary.vue
View File

@ -160,8 +160,11 @@ async function changeState(value) {
<VnLv :label="t('ticket.summary.salesPerson')"> <VnLv :label="t('ticket.summary.salesPerson')">
<template #value> <template #value>
<span class="link"> <span class="link">
{{ ticket.client.salesPersonUser.name }} {{ ticket.client?.salesPersonUser?.name }}
<WorkerDescriptorProxy :id="ticket.client.salesPersonFk" /> <WorkerDescriptorProxy
:id="ticket.client.salesPersonFk"
v-if="ticket.client.salesPersonFk"
/>
</span> </span>
</template> </template>
</VnLv> </VnLv>
@ -172,7 +175,7 @@ async function changeState(value) {
<VnLv :label="t('ticket.summary.zone')" :value="ticket.zone.name" /> <VnLv :label="t('ticket.summary.zone')" :value="ticket.zone.name" />
<VnLv <VnLv
:label="t('ticket.summary.warehouse')" :label="t('ticket.summary.warehouse')"
:value="ticket.warehouse.name" :value="ticket.warehouse?.name"
/> />
<VnLv :label="t('ticket.summary.route')" :value="ticket.routeFk" /> <VnLv :label="t('ticket.summary.route')" :value="ticket.routeFk" />
<VnLv :label="t('ticket.summary.invoice')"> <VnLv :label="t('ticket.summary.invoice')">

123
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') }}
</QItemLabel>
<QItemLabel>
{{ row.nickname }}
</QItemLabel>
</QItemSection>
<QItemSection>
<QItemLabel caption>
{{ t('ticket.list.state') }}
</QItemLabel>
<QItemLabel>
<QBadge <QBadge
:color="row.classColor ?? 'dark'" :color="row.classColor ?? 'orange'"
class="q-ma-none" class="q-ma-none"
dense dense
> >
{{ row.state }} {{ row.state }}
</QBadge> </QBadge>
</QItemLabel> </template>
</QItemSection> </VnLv>
</QItem> <VnLv
<QItem class="q-pa-none"> :label="t('ticket.list.shipped')"
<QItemSection> :value="toDate(row.shipped)"
<QItemLabel caption> />
{{ t('ticket.list.shipped') }} <VnLv :label="t('Zone')" :value="row.zoneName" />
</QItemLabel> <VnLv
<QItemLabel> :label="t('ticket.list.salesPerson')"
{{ toDate(row.shipped) }} :value="row.salesPerson"
</QItemLabel> />
</QItemSection> <VnLv
<QItemSection> :label="t('ticket.list.total')"
<QItemLabel caption> :value="toCurrency(row.totalWithVat)"
{{ t('Zone') }} />
</QItemLabel> </template>
<QItemLabel> <template #actions>
{{ row.zoneName }} <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
</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> <QTooltip>
{{ t('components.smartCard.openSummary') }} {{ t('components.smartCard.openSummary') }}
</QTooltip> </QTooltip>
</QBtn> </QBtn>
</QCardActions> </template>
</QItem> </CardList>
</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">

75
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>
<QItemLabel>{{ row.userName }}</QItemLabel>
</QItemSection>
</QItem>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('worker.list.email') }}
</QItemLabel>
<QItemLabel>{{ row.email }}</QItemLabel>
</QItemSection>
</QItem>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>{{
t('worker.list.department')
}}</QItemLabel>
<QItemLabel>
{{ row.department }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QItemSection>
<QSeparator vertical />
<QCardActions vertical class="justify-between">
<QBtn <QBtn
flat flat
round
color="primary"
icon="arrow_circle_right" icon="arrow_circle_right"
@click="navigate(row.id)" @click.stop="navigate(row.id)"
> >
<QTooltip> <QTooltip>
{{ t('components.smartCard.openCard') }} {{ t('components.smartCard.openCard') }}
</QTooltip> </QTooltip>
</QBtn> </QBtn>
<QBtn <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
flat
round
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<QTooltip> <QTooltip>
{{ t('components.smartCard.openSummary') }} {{ t('components.smartCard.openSummary') }}
</QTooltip> </QTooltip>
</QBtn> </QBtn>
</QCardActions> </template>
</QItem> </CardList>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>

23
test/cypress/integration/workerList.spec.js
View File

@ -6,18 +6,21 @@ describe('WorkerList', () => {
}); });
it('should load workers', () => { it('should load workers', () => {
cy.get('div[class="q-item__label text-h6"]').eq(0).should('have.text', 'Jessica Jones'); cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
cy.get('div[class="q-item__label text-h6"]').eq(1).should('have.text', 'Bruce Banner'); .eq(0)
cy.get('div[class="q-item__label text-h6"]').eq(2).should('have.text', 'Charles Xavier'); .should('have.text', 'JessicaJones');
cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
.eq(1)
.should('have.text', 'BruceBanner');
cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
.eq(2)
.should('have.text', 'CharlesXavier');
}); });
it('should open the worker summary', () => { it('should open the worker summary', () => {
cy.get('div.text-h6') cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(0).click();
.parentsUntil('div.q-card') cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
.find('div.q-card__actions') cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
.find('button').first().click(); cy.get('.summary .header').eq(1).should('have.text', 'User data');
cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '1110 - Jessica Jones');
cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data');
cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data');
}); });
}); });