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