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

refs 5987 index cards and light mode

This commit is contained in:
Jorge Penadés 2023-08-10 13:20:32 +02:00
parent d9dd0a4931
commit a194ec745b
15 changed files with 393 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LeftMenu.vue
View File

@ -31,7 +31,7 @@ function findMatches(search, item) {
const matches = []; const matches = [];
function findRoute(search, item) { function findRoute(search, item) {
for (const child of item.children) { for (const child of item.children) {
if (search.indexOf(child.name) > -1) { if (search?.indexOf(child.name) > -1) {
matches.push(child); matches.push(child);
} else if (child.children) { } else if (child.children) {
findRoute(search, child); findRoute(search, child);

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

@ -124,7 +124,7 @@ watch($props, async () => {
</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>
@ -191,10 +191,11 @@ watch($props, async () => {
} }
.subtitle { .subtitle {
font-size: 16px; font-size: 16px;
color: $white;
} }
.list-box { .list-box {
width: 90%; width: 90%;
background-color: rgba(87, 86, 86, 0.2); background-color: $descriptor-items-box;
margin: 20px 10px 0 10px; margin: 20px 10px 0 10px;
padding: 10px 5px 10px 0px; padding: 10px 5px 10px 0px;
border-radius: 8px; border-radius: 8px;

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

@ -0,0 +1,114 @@
<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-container">
<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-container {
.vn-label-value {
display: flex;
justify-content: flex-start;
gap: 10px;
.label {
max-width: 90px;
flex: 1;
color: $label-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.actions {
.q-btn {
width: 30px;
}
.q-icon {
color: $primary;
font-size: 30px;
}
}
}
@media (max-width: 460px) {
.card-list-container {
.vn-label-value {
.value {
max-width: 150px;
}
}
}
}
</style>
<style lang="scss" scoped>
.card {
padding: 30px;
transition: background-color 0.2s;
}
.card:hover {
background-color: $light-gray;
}
.title {
color: $primary;
font-size: 25px;
font-weight: bold;
}
.list-items {
margin-top: 20px;
width: 89%;
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 10px;
column-gap: 10vw;
margin-right: 5px;
}
.card-list-container {
display: flex;
flex-wrap: wrap;
}
.actions {
display: flex;
justify-content: center;
align-items: end;
flex-direction: column;
width: 9%;
}
@media (max-width: 600px) {
.list-items {
grid-template-columns: 1fr;
grid-gap: 5px;
}
}
@media (min-width: 1000px) and (max-width: 1150px) {
.list-items {
grid-template-columns: 1fr;
}
}
</style>

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

@ -2,10 +2,9 @@
import { computed } from 'vue'; import { computed } from 'vue';
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 },
}); });
const isBooleanValue = computed(() => typeof $props.value === 'boolean'); const isBooleanValue = computed(() => typeof $props.value === 'boolean');
@ -14,7 +13,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 v-if="$props.value || $slots.value" class="value"> <div v-if="$props.value || $slots.value" class="value">
@ -25,7 +24,7 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
/> />
</span> </span>
<slot v-else name="value"> <slot v-else name="value">
<span :title="$props.value">{{ $props.value }}</span> <span :title="$props.titleValue ?? $props.value">{{ $props.value }}</span>
</slot> </slot>
</div> </div>
<div class="info" v-if="$props.info"> <div class="info" v-if="$props.info">

26
src/css/app.scss
View File

@ -26,13 +26,35 @@ 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;
} }
.descriptor {
.picture {
background-color: $descriptor--light;
}
}
.vn-label-value {
.label {
color: $gray;
}
.value {
color: $light-black;
}
}
.descriptor {
.subtitle {
color: $gray;
}
.list-box {
background-color: $descriptor--light;
}
}
.summary { .summary {
.header { .header {
color: white; color: $white;
} }
} }
} }

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

@ -15,6 +15,12 @@
$primary: #ec8916; $primary: #ec8916;
$secondary: #26a69a; $secondary: #26a69a;
$accent: #9c27b0; $accent: #9c27b0;
$white: #fff;
$black: #000;
$light-black: #4e4c4c;
$gray: gray;
$light-gray: #57565633;
$lighter-gray: #5756560f;
$positive: #21ba45; $positive: #21ba45;
$negative: #c10015; $negative: #c10015;
@ -48,3 +54,5 @@ $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0
$spacing-md: 16px; $spacing-md: 16px;
$label-color: rgba(255, 255, 255, 0.6); $label-color: rgba(255, 255, 255, 0.6);
$descriptor-items-box: rgba(87, 86, 86, 0.2);
$descriptor--light: rgb(87 86 86 / 6%);

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

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

@ -340,11 +340,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 ?? 'orange'">
{{ entity.ticketState.state.name }} {{ entity.ticketState.state.name }}
</QBadge> </QBadge>
</template> </template>

48
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,6 +83,50 @@ function viewSummary(id) {
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
<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 icon="preview" @click="viewSummary(row.id)">
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
</template>
</CardList>
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id"> <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
<QItem <QItem
class="q-pa-none items-start cursor-pointer q-hoverable" class="q-pa-none items-start cursor-pointer q-hoverable"
@ -106,7 +152,7 @@ function viewSummary(id) {
</QItemLabel> </QItemLabel>
<QItemLabel> <QItemLabel>
<QBadge <QBadge
:color="row.classColor ?? 'dark'" :color="row.classColor ?? 'orange'"
class="q-ma-none" class="q-ma-none"
dense dense
> >

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>