refactor: branch card (customize with props instead)
This commit is contained in:
Methapon2001
parent
9717e7770a
commit
b043ce6c17
2 changed files with 94 additions and 82 deletions
|
|
@ -1,18 +1,12 @@
|
|||
<script lang="ts" setup>
|
||||
defineProps<{
|
||||
data: {
|
||||
id: string;
|
||||
hq: boolean;
|
||||
status: string;
|
||||
branchLabelCode: string;
|
||||
branchLabelName: string;
|
||||
branchLabelTel: string;
|
||||
branchLabelAddress: string;
|
||||
branchLabelType: string;
|
||||
branchLabelStatus: string;
|
||||
};
|
||||
fieldSelected?: string[];
|
||||
inactive?: boolean;
|
||||
color?: 'none' | 'hq' | 'br';
|
||||
data: Record<string, unknown>;
|
||||
metadata?: unknown;
|
||||
badgeField?: string[];
|
||||
fieldSelected?: string[];
|
||||
footer?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
|
|
@ -20,20 +14,24 @@ defineProps<{
|
|||
<div
|
||||
class="branch-card rounded bordered"
|
||||
:class="{
|
||||
'branch-card__dark': $q.dark.isActive,
|
||||
'branch-card__inactive': inactive,
|
||||
'branch-card__hq': data.hq,
|
||||
'branch-card__br': !data.hq,
|
||||
'branch-card__none':
|
||||
color !== 'hq' && color !== 'br' && (!color || color === 'none'),
|
||||
'branch-card__hq': color === 'hq',
|
||||
'branch-card__br': color === 'br',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="branch-card__row"
|
||||
:class="{ 'branch-card__header': i === 0 }"
|
||||
v-for="([k, v], i) in Object.entries(data)
|
||||
.slice(3)
|
||||
.filter(
|
||||
([key], idx) =>
|
||||
idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
|
||||
)"
|
||||
: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 class="branch-card__label">
|
||||
|
|
@ -41,18 +39,18 @@ defineProps<{
|
|||
</div>
|
||||
<div
|
||||
class="branch-card__value"
|
||||
:class="{ 'branch-card__badge': k === 'branchLabelStatus' }"
|
||||
:class="{ 'branch-card__badge': badgeField?.includes(k) }"
|
||||
style="justify-content: space-between"
|
||||
>
|
||||
<span>{{ v }}</span>
|
||||
<q-btn
|
||||
@click.stop="$emit('view-detail', data)"
|
||||
@click.stop="$emit('view-detail', metadata ?? data)"
|
||||
:label="$t('viewDetail')"
|
||||
rounded
|
||||
outline
|
||||
dense
|
||||
no-caps
|
||||
class="q-px-md text-caption"
|
||||
class="branch-card__view-detail q-px-md text-caption"
|
||||
v-if="i === 0"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -66,22 +64,6 @@ defineProps<{
|
|||
--_branch-card-row-bg: var(--blue-5-hsl);
|
||||
--_branch-badge-fg: var(--green-8-hsl);
|
||||
--_branch-badge-bg: var(--green-6-hsl);
|
||||
|
||||
&.branch-card__hq {
|
||||
--_branch-card-row-bg: var(--pink-6-hsl);
|
||||
}
|
||||
|
||||
&.branch-card__br {
|
||||
--_branch-card-row-bg: var(--violet-11-hsl);
|
||||
}
|
||||
|
||||
&.branch-card__inactive {
|
||||
--_branch-badge-fg: var(--red-4-hsl);
|
||||
--_branch-badge-bg: var(--red-4-hsl);
|
||||
filter: grayscale(40%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
|
@ -97,14 +79,18 @@ defineProps<{
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&:not(:first-child):nth-child(2n + 1) {
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: hsla(var(--_branch-card-row-bg) / 0.1);
|
||||
}
|
||||
|
||||
&.branch-card__header {
|
||||
&.branch-card__header,
|
||||
&.branch-card__footer {
|
||||
color: hsl(var(--_branch-card-row-fg));
|
||||
background-color: hsl(var(--_branch-card-row-bg));
|
||||
font-weight: 600;
|
||||
|
||||
&:deep(*) {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.branch-card__header > * {
|
||||
|
|
@ -133,5 +119,36 @@ defineProps<{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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__hq {
|
||||
--_branch-card-row-bg: var(--pink-6-hsl);
|
||||
}
|
||||
|
||||
&.branch-card__br {
|
||||
--_branch-card-row-bg: var(--violet-11-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>
|
||||
|
|
|
|||
|
|
@ -127,7 +127,9 @@ const fieldSelectedBranch = ref<{
|
|||
value: 'branchHQLabel',
|
||||
});
|
||||
|
||||
const stats = ref<{ count: number; label: string }[]>([]);
|
||||
const stats = ref<
|
||||
{ count: number; label: string; color?: 'pink' | 'purple' }[]
|
||||
>([]);
|
||||
|
||||
const defaultFormData = {
|
||||
headOfficeId: null,
|
||||
|
|
@ -337,11 +339,13 @@ async function onSubmit() {
|
|||
stats.value[0] = {
|
||||
count: _stats.hq,
|
||||
label: 'branchHQLabel',
|
||||
color: 'pink',
|
||||
};
|
||||
|
||||
stats.value[1] = {
|
||||
count: _stats.br,
|
||||
label: 'branchLabel',
|
||||
color: 'purple',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -726,7 +730,8 @@ watch(locale, () => {
|
|||
</div>
|
||||
<div class="branch-container">
|
||||
<BranchCard
|
||||
v-for="item in branchData.result
|
||||
v-for="item in treeData
|
||||
.flatMap((v) => [v, ...v.branch])
|
||||
.filter((v) => {
|
||||
if (
|
||||
statusFilter === 'statusACTIVE' &&
|
||||
|
|
@ -755,40 +760,13 @@ watch(locale, () => {
|
|||
return !v.isHeadOffice;
|
||||
|
||||
return false;
|
||||
})
|
||||
.map((v) => ({
|
||||
id: v.id,
|
||||
hq: v.isHeadOffice,
|
||||
status: v.status,
|
||||
branchLabelCode: v.code,
|
||||
branchLabelName:
|
||||
$i18n.locale === 'en-US' ? v.nameEN : v.name,
|
||||
branchLabelTel: v.contact
|
||||
.map((c) => c.telephoneNo)
|
||||
.join(','),
|
||||
branchLabelAddress:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${v.addressEN || ''} ${v.subDistrict?.nameEN || ''} ${v.district?.nameEN || ''} ${v.province?.nameEN || ''}`
|
||||
: `${v.address || ''} ${v.subDistrict?.name || ''} ${v.district?.name || ''} ${v.province?.name || ''}`,
|
||||
branchLabelType: $t(
|
||||
v.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
|
||||
),
|
||||
branchLabelStatus: $t(`status${v.status}`),
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
console.log(a);
|
||||
|
||||
if (a.hq) return 1;
|
||||
// if (!a.hq) return -1;
|
||||
|
||||
return 0;
|
||||
})"
|
||||
@click="
|
||||
() => {
|
||||
if (item.hq) {
|
||||
if (item.isHeadOffice) {
|
||||
fieldSelectedBranch.value = '';
|
||||
inputSearch = '';
|
||||
currentHq = { id: item.id, code: item.branchLabelCode };
|
||||
currentHq = { id: item.id, code: item.code };
|
||||
beforeBranch = {
|
||||
id: '',
|
||||
code: '',
|
||||
|
|
@ -796,18 +774,35 @@ watch(locale, () => {
|
|||
}
|
||||
}
|
||||
"
|
||||
:metadata="item"
|
||||
:color="item.isHeadOffice ? 'hq' : 'br'"
|
||||
:key="item.id"
|
||||
:data="item"
|
||||
:data="{
|
||||
branchLabelCode: item.code,
|
||||
branchLabelName:
|
||||
$i18n.locale === 'en-US' ? item.nameEN : item.name,
|
||||
branchLabelTel: item.contact
|
||||
.map((c) => c.telephoneNo)
|
||||
.join(','),
|
||||
branchLabelAddress:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${item.addressEN || ''} ${item.subDistrict?.nameEN || ''} ${item.district?.nameEN || ''} ${item.province?.nameEN || ''}`
|
||||
: `${item.address || ''} ${item.subDistrict?.name || ''} ${item.district?.name || ''} ${item.province?.name || ''}`,
|
||||
branchLabelType: $t(
|
||||
item.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
|
||||
),
|
||||
branchLabelStatus: $t(`status${item.status}`),
|
||||
}"
|
||||
:field-selected="fieldSelected"
|
||||
:badge-field="['branchLabelStatus']"
|
||||
:inactive="item.status === 'INACTIVE'"
|
||||
@view-detail="
|
||||
(b) => {
|
||||
if (b.hq) {
|
||||
triggerEdit('drawer', b.id, 'headOffice');
|
||||
} else {
|
||||
triggerEdit('drawer', b.id, 'subBranch');
|
||||
}
|
||||
}
|
||||
(v) =>
|
||||
triggerEdit(
|
||||
'drawer',
|
||||
v.id,
|
||||
v.hq ? 'headOffice' : 'subBranch',
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue