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

refactor: statcard color & sort

Browse source
This commit is contained in:
puriphatt 2024-04-22 17:52:37 +07:00
parent e854d9267f
commit 642552dc5a
2 changed files with 9 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/StatCardComponent.vue
View file

@ -6,9 +6,9 @@ const props = withDefaults(
branch: { branch: {
count: number; count: number;
label: string; label: string;
color?: 'pink' | 'purple';
}[]; }[];
dark?: boolean; dark?: boolean;
color?: 'pink' | 'purple';
isBranch?: boolean; isBranch?: boolean;
}>(), }>(),
{ {
@ -29,7 +29,7 @@ const colorRotate = ['pink', 'purple'];
v-for="(v, i) in props.branch" v-for="(v, i) in props.branch"
:key="v.label" :key="v.label"
class="bordered wave col-12" class="bordered wave col-12"
:class="{ [`stat__${color || colorRotate[i % 2]}`]: true }" :class="{ [`stat__${v.color || colorRotate[i % 2]}`]: true }"
style="width: 200px; min-width: 150px; box-shadow: var(--shadow-2)" style="width: 200px; min-width: 150px; box-shadow: var(--shadow-2)"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">

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

@ -89,6 +89,9 @@ const hqId = ref<string>();
const brId = ref<string>(); const brId = ref<string>();
const formDialogRef = ref(); const formDialogRef = ref();
const userStats = ref<BranchUserStats[]>(); const userStats = ref<BranchUserStats[]>();
const sortedUserStats = computed(() => {
return userStats.value?.slice().sort((a, b) => b.count - a.count);
});
const typeStats = ref<UserTypeStats>(); const typeStats = ref<UserTypeStats>();
const agencyFile = ref<File[]>([]); const agencyFile = ref<File[]>([]);
const agencyFileList = ref<{ name: string; url: string }[]>([]); const agencyFileList = ref<{ name: string; url: string }[]>([]);
@ -568,11 +571,12 @@ watch(
</div> </div>
<div class="row full-width q-py-md" style="overflow-x: auto"> <div class="row full-width q-py-md" style="overflow-x: auto">
<StatCardComponent <StatCardComponent
v-if="userStats" v-if="sortedUserStats"
:branch=" :branch="
userStats.map((v) => ({ sortedUserStats.map((v) => ({
count: v.count, count: v.count,
label: $i18n.locale === 'en-US' ? v.nameEN : v.name, label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
color: v.isHeadOffice ? 'pink' : 'purple',
})) }))
" "
:dark="$q.dark.isActive" :dark="$q.dark.isActive"
@ -702,6 +706,7 @@ watch(
<DrawerInfo <DrawerInfo
v-if="currentUser" v-if="currentUser"
:category="$t('personnelTitle')"
bg-on bg-on
:badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'" :badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
:badgeLabel="userCode" :badgeLabel="userCode"