chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: branch card

Browse source
This commit is contained in:
Methapon2001 2024-04-11 11:43:42 +07:00
parent 0515a049a8
commit c15cff01df
1 changed files with 52 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/components/01_branch-management/TableCardComponent.vue
View file

@ -58,23 +58,30 @@ const filter = ref('');
row-key="name" row-key="name"
:filter="filter" :filter="filter"
hide-header hide-header
card-container-class="q-col-gutter-lg"
> >
<template v-slot:item="prop"> <template #item="prop">
<div <div
class="q-pr-sm q-pb-md col-6" class="col-6"
@click.stop="!subBranch && $emit('navigate', prop.row)" @click.stop="!subBranch && $emit('navigate', prop.row)"
> >
<q-card class="bordered"> <div class="bordered rounded" style="overflow: hidden">
<q-item <div
class="bordered" class="bordered-b row q-px-md q-py-sm"
:class="`table-card-color-${subBranch ? color[1] : color[0]} ${$q.dark.isActive ? 'dark-table-card' : ''} ${i === 0 ? 'color-table-header' : ''} ${i % 2 === 0 && i !== 0 ? 'color-table-row' : ''}`" :class="{
[`table-card__${color[+(subBranch || false)]}`]: true,
'table-header': i === 0,
'table-row': i !== 0 && i % 2 === 0,
dark: $q.dark.isActive,
}"
:key="i" :key="i"
v-for="([k, v], i) in Object.entries(prop.row).slice(1)" v-for="([k, v], i) in Object.entries(prop.row).slice(1)"
> >
<q-item-section <div
avatar avatar
class="row items-center"
style="width: 120px" style="width: 120px"
:style="`${!$q.dark.isActive && i !== 0 ? 'color:gray' : ''}`" :style="{ color: (i !== 0 && 'grey') || 'currentColor' }"
> >
{{ {{
$t( $t(
@ -85,39 +92,35 @@ const filter = ref('');
: prop.colsMap[k]?.label, : prop.colsMap[k]?.label,
) )
}} }}
</q-item-section> </div>
<q-item-section> <div class="row items-center" style="flex-grow: 1">
<div class="row items-center"> <div style="flex-grow: 1">
<div> {{
{{ k !== 'type'
k !== 'type' ? v
? v : (v && $t('branchHQLabel')) || $t('branchLabel')
: (v && $t('branchHQLabel')) || $t('branchLabel') }}
}}
</div>
<q-space />
<q-btn
v-if="i === 0"
outline
no-caps
class="q-px-md"
dense
:label="$t('viewDetail')"
@click.stop="$emit('showInfo', prop.row)"
>
<Icon
icon="mdi:navigate-next"
class="cursor-pointer"
v-if="i === 0"
width="20px"
/>
</q-btn>
</div> </div>
</q-item-section> <q-btn
</q-item> v-if="i === 0"
</q-card> outline
no-caps
class="q-px-md"
dense
:label="$t('viewDetail')"
@click.stop="$emit('showInfo', prop.row)"
>
<Icon
icon="mdi:navigate-next"
class="cursor-pointer"
v-if="i === 0"
width="20px"
/>
</q-btn>
</div>
</div>
</div>
</div> </div>
</template> </template>
</q-table> </q-table>
@ -136,31 +139,28 @@ const filter = ref('');
</template> </template>
<style scoped> <style scoped>
.table-card-color-pink { .table-card__pink {
--bg-table-card-header: var(--pink-6-hsl); --bg-table-card-header: var(--pink-6-hsl);
--color-table-card-header: var(--pink-0-hsl); --fg-table-card-header: var(--pink-0-hsl);
--bg-table-card-row: hsla(var(--pink-6-hsl) / 0.08); &.dark {
&.dark-table-card {
--bg-table-card-row: hsla(var(--gray-9-hsl) / 1); --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
} }
} }
.table-card-color-violet { .table-card__violet {
--bg-table-card-header: var(--purple-11-hsl); --bg-table-card-header: var(--purple-11-hsl);
--color-table-card-header: var(--violet-0-hsl); --fg-table-card-header: var(--violet-0-hsl);
--bg-table-card-row: hsla(var(--purple-11-hsl) / 0.08); &.dark {
&.dark-table-card {
--bg-table-card-row: hsla(var(--gray-9-hsl) / 1); --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
} }
} }
.color-table-header { .table-header {
background: hsl(var(--bg-table-card-header)); background: hsl(var(--bg-table-card-header));
color: hsl(var(--color-table-card-header)); color: hsl(var(--fg-table-card-header));
} }
.color-table-row { .table-row {
background: var(--bg-table-card-row); background: hsla(var(--bg-table-card-header) / 0.08);
} }
</style> </style>