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

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

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

10
src/css/app.scss
View File

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

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

@ -15,6 +15,7 @@
$primary: #ec8916;
$secondary: #26a69a;
$accent: #9c27b0;
$white: #fff;
$positive: #21ba45;
$negative: #c10015;
@ -46,5 +47,3 @@ $dark-shadow-color: #000;
$dark: #292929;
$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;
$label-color: #ffffff99;

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

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

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

@ -347,11 +347,14 @@ export default {
list: {
ref: 'Referencia',
issued: 'Fecha emisión',
shortIssued: 'F. emisión',
amount: 'Importe',
client: 'Cliente',
created: 'Fecha creación',
shortCreated: 'F. creación',
company: 'Empresa',
dued: 'Fecha vencimineto',
shortDued: 'F. vencimiento',
},
card: {
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 VnSearchbar from 'components/ui/VnSearchbar.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 router = useRouter();
@ -74,116 +76,62 @@ function viewSummary(id) {
auto-load
>
<template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
<QItem
class="q-pa-none items-start cursor-pointer q-hoverable"
v-ripple
clickable
>
<QItemSection class="q-pa-md" @click="navigate(row.id)">
<div class="text-h6 link">
{{ row.clientName }}
</div>
<QItemLabel caption>#{{ row.id }}</QItemLabel>
<QList>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('claim.list.customer') }}
</QItemLabel>
<QItemLabel>
{{ row.clientName }}
</QItemLabel>
</QItemSection>
<QItemSection>
<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
:color="stateColor(row.stateCode)"
class="q-ma-none"
dense
>
{{ row.stateDescription }}
</QBadge>
</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> -->
<CardList
v-for="row of rows"
:key="row.id"
:title="row.clientName"
@click="navigate(row.id)"
>
<template #list-items>
<VnLv label="ID" :value="row.id" />
<VnLv
:label="t('claim.list.customer')"
:value="row.clientName"
/>
<VnLv
:label="t('claim.list.assignedTo')"
:value="row.workerName"
/>
<VnLv
:label="t('claim.list.created')"
:value="toDate(row.created)"
/>
<VnLv :label="t('claim.list.state')">
<template #value>
<QBadge
:color="stateColor(row.stateCode)"
class="q-ma-none"
dense
>
{{ row.stateDescription }}
</QBadge>
</template>
</VnLv>
</template>
<template #actions>
<QBtn
flat
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn flat icon="preview" @click="viewSummary(row.id)">
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
<QBtn flat icon="vn:client">
<QTooltip>
{{ t('components.smartCard.viewDescription') }}
</QTooltip>
<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>
<QBtn flat round color="grey-7" icon="vn:client">
<QTooltip>
{{ t('components.smartCard.viewDescription') }}
</QTooltip>
<CustomerDescriptorProxy :id="row.clientFk" />
</QBtn>
</QCardActions>
</QItem>
</QCard>
<CustomerDescriptorProxy :id="row.clientFk" />
</QBtn>
</template>
</CardList>
</template>
</VnPaginate>
</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 VnSearchbar from 'src/components/ui/VnSearchbar.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 router = useRouter();
@ -66,85 +68,40 @@ function viewSummary(id) {
auto-load
>
<template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
<QItem
class="q-pa-none items-start cursor-pointer q-hoverable"
v-ripple
clickable
>
<QItemSection class="q-pa-md" @click="navigate(row.id)">
<div class="text-h6">{{ row.name }}</div>
<QItemLabel caption>#{{ row.id }}</QItemLabel>
<QList>
<QItem class="q-pa-none">
<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
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>
<CardList
v-for="row of rows"
:key="row.id"
:title="row.name"
@click="navigate(row.id)"
>
<template #list-items>
<VnLv label="ID" :value="row.id" />
<VnLv :label="t('customer.list.email')" :value="row.email" />
<VnLv :label="t('customer.list.phone')" :value="row.phone" />
</template>
<template #actions>
<QBtn
flat
color="primary"
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn
flat
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
</template>
</CardList>
</template>
</VnPaginate>
</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 VnSearchbar from 'src/components/ui/VnSearchbar.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 router = useRouter();
@ -71,97 +73,59 @@ function viewSummary(id) {
auto-load
>
<template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
<QItem
class="q-pa-none items-start cursor-pointer q-hoverable"
v-ripple
clickable
>
<QItemSection class="q-pa-md" @click="navigate(row.id)">
<div class="text-h6">{{ row.ref }}</div>
<QItemLabel caption>#{{ row.id }}</QItemLabel>
<QList>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('invoiceOut.list.issued') }}
</QItemLabel>
<QItemLabel>
{{ toDate(row.issued) }}
</QItemLabel>
</QItemSection>
<QItemSection>
<QItemLabel caption>
{{ t('invoiceOut.list.amount') }}
</QItemLabel>
<QItemLabel>
{{ toCurrency(row.amount) }}
</QItemLabel>
</QItemSection>
</QItem>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('invoiceOut.list.client') }}
</QItemLabel>
<QItemLabel>
{{ row.clientSocialName }}
</QItemLabel>
</QItemSection>
<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
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>
<CardList
v-for="row of rows"
:key="row.id"
:title="row.ref"
@click="navigate(row.id)"
>
<template #list-items>
<VnLv label="ID" :value="row.id" />
<VnLv
:label="t('invoiceOut.list.shortIssued')"
:title-label="t('invoiceOut.list.issued')"
:value="toDate(row.issued)"
/>
<VnLv
:label="t('invoiceOut.list.amount')"
:value="toCurrency(row.amount)"
/>
<VnLv
:label="t('invoiceOut.list.client')"
:value="row.clientSocialName"
/>
<VnLv
:label="t('invoiceOut.list.shortCreated')"
:title-label="t('invoiceOut.list.created')"
:value="toDate(row.created)"
/>
<VnLv
:label="t('invoiceOut.list.company')"
:value="row.companyCode"
/>
<VnLv
:label="t('invoiceOut.list.shortDued')"
:title-label="t('invoiceOut.list.dued')"
:value="toDate(row.dued)"
/>
</template>
<template #actions>
<QBtn
flat
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn flat icon="preview" @click="viewSummary(row.id)">
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
</template>
</CardList>
</template>
</VnPaginate>
</div>

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

@ -88,7 +88,7 @@ const setData = (entity) =>
<template #body="{ entity }">
<VnLv v-if="entity.ticketState" :label="t('ticket.card.state')">
<template #value>
<QBadge :color="entity.ticketState.state.classColor ?? 'dark'">
<QBadge :color="entity.ticketState.state.classColor">
{{ entity.ticketState.state.name }}
</QBadge>
</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 VnSearchbar from 'src/components/ui/VnSearchbar.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 quasar = useQuasar();
@ -81,105 +83,50 @@ function viewSummary(id) {
auto-load
>
<template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
<QItem
class="q-pa-none items-start cursor-pointer q-hoverable"
v-ripple
clickable
>
<QItemSection class="q-pa-md" @click="navigate(row.id)">
<div class="text-h6">{{ row.name }}</div>
<QItemLabel caption>#{{ row.id }}</QItemLabel>
<QList>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('ticket.list.nickname') }}
</QItemLabel>
<QItemLabel>
{{ row.nickname }}
</QItemLabel>
</QItemSection>
<QItemSection>
<QItemLabel caption>
{{ t('ticket.list.state') }}
</QItemLabel>
<QItemLabel>
<QBadge
:color="row.classColor ?? 'dark'"
class="q-ma-none"
dense
>
{{ row.state }}
</QBadge>
</QItemLabel>
</QItemSection>
</QItem>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('ticket.list.shipped') }}
</QItemLabel>
<QItemLabel>
{{ toDate(row.shipped) }}
</QItemLabel>
</QItemSection>
<QItemSection>
<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>
<CardList
v-for="row of rows"
:key="row.id"
:id="row.id"
@click="navigate(row.id)"
>
<template #list-items>
<VnLv
:label="t('ticket.list.nickname')"
:value="row.nickname"
/>
<VnLv :label="t('ticket.list.state')">
<template #value>
<QBadge
:color="row.classColor ?? 'orange'"
class="q-ma-none"
dense
>
{{ row.state }}
</QBadge>
</template>
</VnLv>
<VnLv
:label="t('ticket.list.shipped')"
:value="toDate(row.shipped)"
/>
<VnLv :label="t('Zone')" :value="row.zoneName" />
<VnLv
:label="t('ticket.list.salesPerson')"
:value="row.salesPerson"
/>
<VnLv
:label="t('ticket.list.total')"
:value="toCurrency(row.totalWithVat)"
/>
</template>
<template #actions>
<QBtn flat icon="preview" @click="viewSummary(row.id)">
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
</template>
</CardList>
</template>
</VnPaginate>
</div>

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

@ -63,6 +63,7 @@ const setData = (entity) =>
:url="`Workers/${entityId}`"
:filter="filter"
:title="data.title"
:subtitle="data.subtitle"
@on-fetch="
(data) => {
worker = data;
@ -74,7 +75,7 @@ const setData = (entity) =>
<QImg :src="getWorkerAvatar()" class="photo">
<template #error>
<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 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 VnSearchbar from 'src/components/ui/VnSearchbar.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 router = useRouter();
@ -66,73 +68,38 @@ function viewSummary(id) {
auto-load
>
<template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
<QItem
class="q-pa-none items-start cursor-pointer q-hoverable"
v-ripple
clickable
>
<QItemSection class="q-pa-md" @click="navigate(row.id)">
<QItemLabel class="text-h6">
{{ row.nickname }}
</QItemLabel>
<QItemLabel caption>#{{ row.id }}</QItemLabel>
<QList>
<QItem class="q-pa-none">
<QItemSection>
<QItemLabel caption>
{{ t('worker.list.name') }}
</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
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>
<CardList
v-for="row of rows"
:key="row.id"
@click="navigate(row.id)"
:title="row.nickname"
>
<template #list-items>
<VnLv label="ID" :value="row.id" />
<VnLv :label="t('worker.list.name')" :value="row.userName" />
<VnLv :label="t('worker.list.email')" :value="row.email" />
<VnLv
:label="t('worker.list.department')"
:value="row.department"
/>
</template>
<template #actions>
<QBtn
flat
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn flat icon="preview" @click="viewSummary(row.id)">
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
</template>
</CardList>
</template>
</VnPaginate>
</div>