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

feat: เพิ่มสีให้ตาราง

Browse source
This commit is contained in:
Net 2024-06-11 12:54:19 +07:00
parent 041f3c5183
commit d9cdd428dd
1 changed files with 154 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

208
src/components/03_customer-management/BranchCardCustomer.vue
View file

@ -5,69 +5,169 @@ import { CustomerBranch } from 'src/stores/customer/types';
withDefaults(
defineProps<{
data: CustomerBranch;
inactive?: boolean;
color?: 'none' | 'CORP' | 'PERS';
metadata?: unknown;
badgeField?: string[];
fieldSelected?: string[];
footer?: boolean;
data: {
customerBranchFormTab: number;
branchName: string;
address: string;
telephone: string;
businessTypePure: string;
status: string;
totalEmployee: number;
};
}>(),
{},
);
</script>
<template>
<AppBox class="row" no-padding bordered>
<div
class="branch-card rounded bordered"
:class="{
'branch-card__dark': $q.dark.isActive,
'branch-card__inactive': inactive,
'branch-card__none':
color !== 'CORP' && color !== 'PERS' && (!color || color === 'none'),
'branch-card__CORP': color === 'CORP',
'branch-card__PERS': color === 'PERS',
}"
>
<div
class="row col-12 q-px-md q-py-md justify-between bordered-b surface-3 items-center"
class="branch-card__row"
:class="{
'branch-card__header': i === 0,
'branch-card__footer': footer && i === Object.keys(data).length - 1,
}"
v-for="([k, v], i) in Object.entries(data).filter(
([key], idx) =>
idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
)"
:key="k"
>
<div>{{ $t('customerBranchFormTab') }} {{ data.branchNo }}</div>
<q-btn
@click.stop="$emit('view-detail')"
:label="$t('viewDetail')"
rounded
outline
dense
class="q-px-md"
style="color: var(--stone-6)"
/>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b">
<div class="col-5">{{ $t('branchName') }}</div>
<div class="col-7">{{ data.name }}</div>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
<div class="col-5">{{ $t('address') }}</div>
<div class="col-7">{{ data.address }}</div>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b">
<div class="col-5">{{ $t('telephone') }}</div>
<div class="col-7">{{ data.telephoneNo }}</div>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
<div class="col-5">{{ $t('businessTypePure') }}</div>
<div class="col-7">{{ data.bussinessType }}</div>
</div>
<div class="row col-12 q-px-md q-py-sm bordered-b">
<div class="col-5">{{ $t('status') }}</div>
<div class="col-7">
<q-badge
v-if="data.status"
class="q-px-md q-py-xs rounded"
style="background-color: var(--teal-1); color: var(--teal-4)"
>
{{ $t('statusACTIVE') }}
</q-badge>
<q-badge
v-else
text-color="orange"
class="q-px-md q-py-xs rounded"
style="background-color: var(--red-1); color: var(--orange-4)"
>
{{ $t('statusINACTIVE') }}
</q-badge>
<div class="branch-card__label">
<span>{{ $t(k) }}</span>
</div>
<div
class="branch-card__value"
:class="{ 'branch-card__badge': badgeField?.includes(k) }"
style="justify-content: space-between"
>
<span>{{ v }}</span>
<q-btn
@click.stop="$emit('view-detail', metadata ?? data)"
:label="$t('viewDetail')"
rounded
outline
dense
no-caps
class="branch-card__view-detail q-px-md text-caption"
v-if="i === 0"
/>
</div>
</div>
<div class="row col-12 q-px-md q-py-sm surface-3">
<div class="col-5">{{ $t('allEmployee') }}</div>
<div class="col-7">-</div>
</div>
</AppBox>
</div>
</template>
<style scoped></style>
<style scoped>
.branch-card {
--_branch-card-row-fg: 0 0% 100%;
--_branch-card-row-bg: var(--blue-5-hsl);
--_branch-badge-fg: var(--green-8-hsl);
--_branch-badge-bg: var(--green-6-hsl);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--shadow-2);
& > .branch-card__row {
display: flex;
flex-wrap: nowrap;
padding-inline: var(--size-4);
padding-block: var(--size-2);
&:last-child {
flex-grow: 1;
}
&:nth-child(2n + 1) {
background-color: hsla(var(--_branch-card-row-bg) / 0.1);
}
&.branch-card__header,
&.branch-card__footer {
color: hsl(var(--_branch-card-row-fg));
background-color: hsl(var(--_branch-card-row-bg));
&:deep(*) {
font-weight: 600;
}
}
&.branch-card__header > * {
display: flex;
align-items: center;
}
& > .branch-card__label {
min-width: 120px;
width: 30%;
}
&:not(.branch-card__header) .branch-card__label {
color: hsl(var(--stone-6-hsl));
}
& > .branch-card__value {
width: 70%;
&.branch-card__badge > span {
display: inline-block;
border-radius: 999rem;
padding-inline: var(--size-2);
color: hsl(var(--_branch-badge-fg));
background-color: hsla(var(--_branch-badge-bg) / 0.1);
}
}
}
&.branch-card__none {
--_branch-card-row-bg: var(--gray-3-hsl);
&.branch-card__dark {
--_branch-card-row-bg: var(--gray-9-hsl);
}
&:not(.branch-card__dark) .branch-card__header {
color: currentColor;
& .branch-card__view-detail {
color: hsla(var(--gray-10-hsl) / 0.3);
}
}
}
&.branch-card__CORP {
--_branch-card-row-fg: var(--purple-11-hsl);
--_branch-card-row-bg: var(--purple-5-hsl);
}
&.branch-card__PERS {
--_branch-card-row-fg: var(--teal-9-hsl);
--_branch-card-row-bg: var(--teal-5-hsl);
}
&.branch-card__inactive {
--_branch-badge-fg: var(--red-4-hsl);
--_branch-badge-bg: var(--red-4-hsl);
filter: grayscale(40%);
opacity: 0.5;
}
}
</style>