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 = [];
function findRoute(search, item) {
for (const child of item.children) {
if (search.indexOf(child.name) > -1) {
if (search?.indexOf(child.name) > -1) {
matches.push(child);
} else if (child.children) {
findRoute(search, child);

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

@ -124,7 +124,7 @@ watch($props, async () => {
</div>
</QItemLabel>
<QItem dense>
<QItemLabel class="subtitle text-white" caption>
<QItemLabel class="subtitle" caption>
#{{ $props.subtitle ?? entity.id }}
</QItemLabel>
</QItem>
@ -191,10 +191,11 @@ watch($props, async () => {
}
.subtitle {
font-size: 16px;
color: $white;
}
.list-box {
width: 90%;
background-color: rgba(87, 86, 86, 0.2);
background-color: $descriptor-items-box;
margin: 20px 10px 0 10px;
padding: 10px 5px 10px 0px;
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';
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 },
});
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
@ -14,7 +13,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 v-if="$props.value || $slots.value" class="value">
@ -25,7 +24,7 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
/>
</span>
<slot v-else name="value">
<span :title="$props.value">{{ $props.value }}</span>
<span :title="$props.titleValue ?? $props.value">{{ $props.value }}</span>
</slot>
</div>
<div class="info" v-if="$props.info">

26
src/css/app.scss
View File

@ -26,13 +26,35 @@ select:-webkit-autofill {
body.body--light {
.q-header .q-toolbar {
background-color: white;
background-color: $white;
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 {
.header {
color: white;
color: $white;
}
}
}

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

@ -15,6 +15,12 @@
$primary: #ec8916;
$secondary: #26a69a;
$accent: #9c27b0;
$white: #fff;
$black: #000;
$light-black: #4e4c4c;
$gray: gray;
$light-gray: #57565633;
$lighter-gray: #5756560f;
$positive: #21ba45;
$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;
$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: {
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

@ -340,11 +340,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 ?? 'orange'">
{{ entity.ticketState.state.name }}
</QBadge>
</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 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,6 +83,50 @@ function viewSummary(id) {
auto-load
>
<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">
<QItem
class="q-pa-none items-start cursor-pointer q-hoverable"
@ -106,7 +152,7 @@ function viewSummary(id) {
</QItemLabel>
<QItemLabel>
<QBadge
:color="row.classColor ?? 'dark'"
:color="row.classColor ?? 'orange'"
class="q-ma-none"
dense
>

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>