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

Merge branch 'dev/methapon' into develop

Browse source
This commit is contained in:
Methapon2001 2024-04-23 14:22:52 +07:00
commit fe79db1cb8
3 changed files with 123 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

103
src/components/01_branch-management/BranchCard.vue
View file

@ -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>

56
src/components/StatCardComponent.vue
View file

@ -15,21 +15,19 @@ const props = withDefaults(
isBranch: false,
},
);
const colorRotate = ['pink', 'purple'];
</script>
<template>
<div
class="row"
class="stat-card row"
style="gap: var(--size-4)"
:class="{ 'justify-between': $q.screen.lt.md, dark }"
>
<AppBox
v-for="(v, i) in props.branch"
v-for="v in props.branch"
:key="v.label"
class="bordered wave col-12"
:class="{ [`stat__${v.color || colorRotate[i % 2]}`]: true }"
class="bordered stat-card__wave col-12"
:class="{ [`stat-card__${v.color}`]: true }"
style="width: 200px; min-width: 150px; box-shadow: var(--shadow-2)"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
@ -39,7 +37,7 @@ const colorRotate = ['pink', 'purple'];
></path>
</svg>
<div class="stat__content">
<div class="stat-card__content">
<div class="text-h5 text-weight-bold">{{ v.count }}</div>
<div class="text-weight-bold">
{{ isBranch ? $t(v.label) : v.label }}
@ -50,48 +48,52 @@ const colorRotate = ['pink', 'purple'];
</template>
<style scoped>
.wave {
.stat-card {
--_color: var(--gray-6);
}
.stat-card__wave {
position: relative;
display: flex;
& svg {
width: 200px;
position: absolute;
left: 0px;
bottom: 0;
opacity: 0.1;
& .box-path {
fill: var(--_color);
fill-opacity: 1;
}
}
}
svg {
width: 200px;
position: absolute;
left: 0px;
bottom: 0;
opacity: 0.1;
}
.box-path {
fill: var(--_color);
fill-opacity: 1;
}
.stat__content {
.stat-card__content {
z-index: 2;
color: var(--_color);
height: 100%;
width: 200px;
}
.stat__purple {
.stat-card__purple {
--_color: var(--violet-11);
}
.stat__pink {
.stat-card__pink {
--_color: var(--pink-6);
}
.stat__green {
.stat-card__green {
--_color: var(--teal-10);
}
.dark .stat__purple {
.dark .stat-card__purple {
--_color: var(--purple-8);
}
.dark .stat__green {
.dark .stat-card__green {
--_color: var(--teal-8);
}
</style>

73
src/pages/01_branch-management/MainPage.vue
View file

@ -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>