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

feat: add color to stat card

Browse source
This commit is contained in:
Methapon2001 2024-04-23 14:43:00 +07:00
parent 372b13a82d
commit f5a1e058c4
2 changed files with 22 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/StatCardComponent.vue
View file

@ -6,13 +6,13 @@ const props = withDefaults(
branch: { branch: {
count: number; count: number;
label: string; label: string;
color?: 'pink' | 'purple' | 'green'; color: 'pink' | 'purple' | 'green';
}[]; }[];
dark?: boolean; dark?: boolean;
isBranch?: boolean; labelI18n?: boolean;
}>(), }>(),
{ {
isBranch: false, labelI18n: false,
}, },
); );
</script> </script>
@ -40,7 +40,7 @@ const props = withDefaults(
<div class="stat-card__content"> <div class="stat-card__content">
<div class="text-h5 text-weight-bold">{{ v.count }}</div> <div class="text-h5 text-weight-bold">{{ v.count }}</div>
<div class="text-weight-bold"> <div class="text-weight-bold">
{{ isBranch ? $t(v.label) : v.label }} {{ labelI18n ? $t(v.label) : v.label }}
</div> </div>
</div> </div>
</AppBox> </AppBox>

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

@ -96,8 +96,8 @@ onMounted(async () => {
if (_stats) { if (_stats) {
stats.value.push( stats.value.push(
{ count: _stats.hq, label: 'branchHQLabel' }, { count: _stats.hq, label: 'branchHQLabel', color: 'pink' },
{ count: _stats.br, label: 'branchLabel' }, { count: _stats.br, label: 'branchLabel', color: 'purple' },
); );
} }
}); });
@ -127,9 +127,9 @@ const fieldSelectedBranch = ref<{
value: 'branchHQLabel', value: 'branchHQLabel',
}); });
const stats = ref< const stats = ref<{ count: number; label: string; color: 'pink' | 'purple' }[]>(
{ count: number; label: string; color?: 'pink' | 'purple' }[] [],
>([]); );
const defaultFormData = { const defaultFormData = {
headOfficeId: null, headOfficeId: null,
@ -338,17 +338,18 @@ async function onSubmit() {
const _stats = await branchStore.stats(); const _stats = await branchStore.stats();
if (_stats) { if (_stats) {
stats.value[0] = { stats.value = [
count: _stats.hq, {
label: 'branchHQLabel', count: _stats.hq,
color: 'pink', label: 'branchHQLabel',
}; color: 'pink',
},
stats.value[1] = { {
count: _stats.br, count: _stats.br,
label: 'branchLabel', label: 'branchLabel',
color: 'purple', color: 'purple',
}; },
];
} }
} }
@ -388,7 +389,7 @@ watch(locale, () => {
</div> </div>
<AppBox bordered class="q-mb-md"> <AppBox bordered class="q-mb-md">
<StatCard isBranch :branch="stats" :dark="$q.dark.isActive" /> <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" />
</AppBox> </AppBox>
<AppBox <AppBox