feat: เพิ่มสีให้ตาราง
This commit is contained in:
Net
parent
041f3c5183
commit
d9cdd428dd
1 changed files with 154 additions and 54 deletions
|
|
@ -5,69 +5,169 @@ import { CustomerBranch } from 'src/stores/customer/types';
|
||||||
|
|
||||||
withDefaults(
|
withDefaults(
|
||||||
defineProps<{
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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
|
<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>
|
<div class="branch-card__label">
|
||||||
<q-btn
|
<span>{{ $t(k) }}</span>
|
||||||
@click.stop="$emit('view-detail')"
|
</div>
|
||||||
:label="$t('viewDetail')"
|
<div
|
||||||
rounded
|
class="branch-card__value"
|
||||||
outline
|
:class="{ 'branch-card__badge': badgeField?.includes(k) }"
|
||||||
dense
|
style="justify-content: space-between"
|
||||||
class="q-px-md"
|
>
|
||||||
style="color: var(--stone-6)"
|
<span>{{ v }}</span>
|
||||||
/>
|
<q-btn
|
||||||
</div>
|
@click.stop="$emit('view-detail', metadata ?? data)"
|
||||||
<div class="row col-12 q-px-md q-py-sm bordered-b">
|
:label="$t('viewDetail')"
|
||||||
<div class="col-5">{{ $t('branchName') }}</div>
|
rounded
|
||||||
<div class="col-7">{{ data.name }}</div>
|
outline
|
||||||
</div>
|
dense
|
||||||
<div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
|
no-caps
|
||||||
<div class="col-5">{{ $t('address') }}</div>
|
class="branch-card__view-detail q-px-md text-caption"
|
||||||
<div class="col-7">{{ data.address }}</div>
|
v-if="i === 0"
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row col-12 q-px-md q-py-sm surface-3">
|
</div>
|
||||||
<div class="col-5">{{ $t('allEmployee') }}</div>
|
|
||||||
<div class="col-7">-</div>
|
|
||||||
</div>
|
|
||||||
</AppBox>
|
|
||||||
</template>
|
</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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue