From a0c8a2153e77b46a61fc702ee028968d258bb142 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Fri, 6 Sep 2024 17:54:27 +0700
Subject: [PATCH] refactor: add border

---
 .../02_personnel-management/MainPage.vue      | 100 ++++++++++--------
 1 file changed, 58 insertions(+), 42 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 17f125bd..0ac0dd4b 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -327,8 +327,6 @@ async function openDialog(
     hqId.value = userStore.userOption.hqOpts[0].value;
   }
   if (userStore.userOption.hqOpts.length === 0) {
-    console.log('no hq');
-
     dialog({
       color: 'warning',
       icon: 'mdi-alert',
@@ -1126,47 +1124,65 @@ watch(
                   <div class="row items-center" style="flex-wrap: nowrap">
                     <div style="display: flex">
                       <div class="q-mr-md">
-                        <q-avatar size="md">
-                          <q-img
-                            class="text-center"
-                            :ratio="1"
-                            :src="`${apiBaseUrl}/user/${props.row.id}/image?ts=${Date.now()}`"
-                          >
-                            <template #error>
-                              <div
-                                class="no-padding full-width full-height flex items-center justify-center"
-                                :style="`${props.row.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
-                              >
-                                <q-img
-                                  v-if="props.row.gender"
-                                  :src="
-                                    props.row.gender === 'male'
-                                      ? '/no-img-man.png'
-                                      : '/no-img-female.png'
-                                  "
-                                />
-                                <q-icon
-                                  v-else
-                                  size="sm"
-                                  name="mdi-account-outline"
-                                  style="color: white"
-                                />
-                              </div>
-                            </template>
-                          </q-img>
+                        <div
+                          :style="`
+                                  border-radius: 50%;
+                                  border-style: solid;
+                                  border-width: 2px;
+                                  border-color: hsl(var(${
+                                    {
+                                      USER: '--cyan-7-hsl',
+                                      MESSENGER: '--orange-4-hsl',
+                                      DELEGATE: '--red-6-hsl',
+                                      AGENCY: '--pink-8-hsl',
+                                    }[props.row.userType as string] ||
+                                    '--pink-8-hsl'
+                                  }
+                                `"
+                          class="q-pa-xs"
+                        >
+                          <q-avatar size="md">
+                            <q-img
+                              class="text-center"
+                              :ratio="1"
+                              :src="`${apiBaseUrl}/user/${props.row.id}/image?ts=${Date.now()}`"
+                            >
+                              <template #error>
+                                <div
+                                  class="no-padding full-width full-height flex items-center justify-center"
+                                  :style="`${props.row.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
+                                >
+                                  <q-img
+                                    v-if="props.row.gender"
+                                    :src="
+                                      props.row.gender === 'male'
+                                        ? '/no-img-man.png'
+                                        : '/no-img-female.png'
+                                    "
+                                  />
+                                  <q-icon
+                                    v-else
+                                    size="sm"
+                                    name="mdi-account-outline"
+                                    style="color: white"
+                                  />
+                                </div>
+                              </template>
+                            </q-img>
 
-                          <q-badge
-                            class="absolute-bottom-right no-padding"
-                            style="
-                              border-radius: 50%;
-                              min-width: 8px;
-                              min-height: 8px;
-                            "
-                            :style="{
-                              background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
-                            }"
-                          ></q-badge>
-                        </q-avatar>
+                            <q-badge
+                              class="absolute-bottom-right no-padding"
+                              style="
+                                border-radius: 50%;
+                                min-width: 8px;
+                                min-height: 8px;
+                              "
+                              :style="{
+                                background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                              }"
+                            ></q-badge>
+                          </q-avatar>
+                        </div>
                       </div>
                     </div>
                     <div class="column">