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

fix: stat card scroll

Browse source
This commit is contained in:
puriphatt 2024-07-04 04:14:41 +00:00
parent 39fc15167c
commit 93af8ce47b
5 changed files with 65 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/StatCardComponent.vue
View file

@ -22,7 +22,7 @@ const props = withDefaults(
<div <div
class="row full-width" class="row full-width"
style="gap: var(--size-4)" style="gap: var(--size-4)"
:class="{ 'justify-between': $q.screen.lt.md, dark, 'no-wrap': nowrap }" :class="{ dark, 'no-wrap': nowrap }"
> >
<AppBox <AppBox
v-for="v in props.branch" v-for="v in props.branch"

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

@ -424,8 +424,10 @@ watch(locale, () => {
<template> <template>
<div class="column full-height no-wrap"> <div class="column full-height no-wrap">
<div class="surface-1 bordered rounded q-pa-md q-mb-md scroll"> <div class="surface-1 bordered rounded q-mb-md scroll">
<StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap /> <div class="q-ma-md" style="display: inline-block">
<StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap />
</div>
</div> </div>
<div <div

30
src/pages/02_personnel-management/MainPage.vue
View file

@ -547,20 +547,22 @@ watch(inputSearch, async () => await fetchUserList());
{{ selectorLabel === '' ? '' : $t(selectorLabel) }} {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
</div> </div>
<div class="q-px-md scroll"> <div class="scroll">
<StatCardComponent <div class="q-mx-md" style="display: inline-block">
v-if="sortedUserStats" <StatCardComponent
:branch=" v-if="sortedUserStats"
sortedUserStats.map((v) => ({ :branch="
count: v.count, sortedUserStats.map((v) => ({
label: $i18n.locale === 'en-US' ? v.nameEN : v.name, count: v.count,
color: v.isHeadOffice ? 'pink' : 'purple', label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
})) color: v.isHeadOffice ? 'pink' : 'purple',
" }))
:dark="$q.dark.isActive" "
nowrap :dark="$q.dark.isActive"
class="q-mb-md" nowrap
/> class="q-mb-md"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

72
src/pages/03_customer-management/MainPage.vue
View file

@ -1354,42 +1354,44 @@ watch([inputSearch, currentStatus], async () => {
}} }}
</div> </div>
<div class="q-px-md scroll"> <div class="scroll">
<StatCardComponent <div class="q-mx-md" style="display: inline-block">
v-if="customerStats && selectorLabel === 'EMPLOYER'" <StatCardComponent
labelI18n v-if="customerStats && selectorLabel === 'EMPLOYER'"
:branch=" labelI18n
customerStats.map((v) => ({ :branch="
count: customerStats.map((v) => ({
v.name === 'CORP' count:
? statsCustomerType?.CORP ?? 0 v.name === 'CORP'
: statsCustomerType?.PERS ?? 0, ? statsCustomerType?.CORP ?? 0
label: : statsCustomerType?.PERS ?? 0,
v.name === 'CORP' label:
? 'customerLegalEntity' v.name === 'CORP'
: 'customerNaturalPerson', ? 'customerLegalEntity'
color: v.name === 'CORP' ? 'purple' : 'green', : 'customerNaturalPerson',
})) color: v.name === 'CORP' ? 'purple' : 'green',
" }))
:dark="$q.dark.isActive" "
nowrap :dark="$q.dark.isActive"
class="q-mb-md" nowrap
/> class="q-mb-md"
/>
<StatCardComponent <StatCardComponent
v-if="customerStats && selectorLabel === 'EMPLOYEE'" v-if="customerStats && selectorLabel === 'EMPLOYEE'"
labelI18n labelI18n
:branch="[ :branch="[
{ {
label: 'EMPLOYEE', label: 'EMPLOYEE',
count: statsEmployee, count: statsEmployee,
color: 'pink', color: 'pink',
}, },
]" ]"
:dark="$q.dark.isActive" :dark="$q.dark.isActive"
nowrap nowrap
class="q-mb-md" class="q-mb-md"
/> />
</div>
</div> </div>
</div> </div>
</div> </div>

13
src/pages/04_product-service/MainPage.vue
View file

@ -1146,14 +1146,15 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</div> </div>
<AppBox <div
v-if="productMode === 'group' || productMode === 'type'" v-if="productMode === 'group' || productMode === 'type'"
bordered class="q-mb-md bordered rounded surface-1 scroll"
style="overflow-x: scroll"
class="q-mb-md"
> >
<StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap /> <div class="q-ma-md" style="display: inline-block">
</AppBox> <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
</div>
</div>
<div <div
v-if="productMode === 'group' || productMode === 'type'" v-if="productMode === 'group' || productMode === 'type'"
class="surface-1 col bordered rounded q-pa-md scroll" class="surface-1 col bordered rounded q-pa-md scroll"