From f555747005c1e6f56c3b3b68894cd5232fcfe307 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 9 Aug 2024 10:05:31 +0000
Subject: [PATCH] fix(02): table color and map role

---
 .../02_personnel-management/FormInformation.vue  |  2 +-
 src/pages/02_personnel-management/MainPage.vue   | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index bb31c6ef..1d83d5b1 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -224,7 +224,7 @@ onMounted(async () => {
         :label="$t('userRole')"
         :options="roleOptions"
         :rules="[
-          (val: string) => !!val || $t('formDialogInputPrefixNameValidate'),
+          (val: string) => !!val || $t('formDialogInputUserRoleValidate'),
         ]"
         @filter="roleFilter"
       >
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 73a5aec7..f942210f 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -689,6 +689,13 @@ onMounted(async () => {
   flowStore.rotate();
 });
 
+function mapRole(value: string) {
+  const option = userStore.userOption.roleOpts.find(
+    (option) => option.value === value,
+  );
+  return option ? option.label : '-';
+}
+
 watch(
   () => selectorLabel.value,
   async (label) => {
@@ -1152,6 +1159,13 @@ watch(
                   'status-inactive': props.row.status === 'INACTIVE',
                 }"
                 :props="props"
+                :style="
+                  props.rowIndex % 2 !== 0
+                    ? $q.dark.isActive
+                      ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                      : `background: #f9fafc`
+                    : ''
+                "
               >
                 <q-td
                   class="text-center"
@@ -1262,7 +1276,7 @@ watch(
 
                 <q-td v-if="fieldSelected.includes('userRole')">
                   <span class="tags tags__purple">
-                    {{ props.row.userRole || '-' }}
+                    {{ mapRole(props.row.userRole) }}
                   </span>
                 </q-td>