Merge branch 'dev/phat-2' into develop

src/components/DrawerInfo.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import AppBox from './app/AppBox.vue';
 
 defineProps<{
   title: string;
+  category?: string;
   isEdit?: boolean;
   bgOn?: boolean;
   statusBranch?: string;
@@ -16,7 +17,6 @@ defineProps<{
   undo?: (...args: unknown[]) => void;
 }>();
 
-// const drawerWidth = ref(window.screen.width * 0.8);
 const drawerOpen = defineModel<boolean>('drawerOpen', {
   default: false,
 });
@@ -33,7 +33,6 @@ function reset() {
   <q-drawer
     @before-hide="reset"
     @hide="close"
-    :width="$q.screen.gt.md ? 1200 : $q.screen.gt.xs ? 700 : 900"
     :breakpoint="1366"
     v-model="drawerOpen"
     behavior="mobile"
@@ -91,6 +90,7 @@ function reset() {
           </div>
 
           <div class="col text-subtitle1 text-weight-bold text-center">
+            <text v-if="category" class="app-text-muted">{{ category }} /</text>
             {{ title }}
 
             <text

src/components/StatCardComponent.vue

@@ -6,9 +6,9 @@ const props = withDefaults(
     branch: {
       count: number;
       label: string;
+      color?: 'pink' | 'purple';
     }[];
     dark?: boolean;
-    color?: 'pink' | 'purple';
     isBranch?: boolean;
   }>(),
   {
@@ -29,7 +29,7 @@ const colorRotate = ['pink', 'purple'];
       v-for="(v, i) in props.branch"
       :key="v.label"
       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)"
     >
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">

src/css/app.scss

@@ -77,6 +77,10 @@ html {
   transition: 100ms background ease-in-out;
 }
 
+aside.q-drawer.q-drawer--right.fixed.q-drawer--on-top.q-drawer--mobile.q-drawer--top-padding {
+  width: 85% !important;
+}
+
 .bordered {
   border: 1px solid var(--border-color);
 }

src/i18n/en-US/personnel-main-page.ts

@@ -1,4 +1,5 @@
 export default {
+  personnelTitle: 'Personnel',
   personnelManagement: 'Personnel Management',
   personnelTooltipTitle: 'No personnel yet?',
   personnelTooltipCaption: 'Click + to add a personnel',

src/i18n/th-th/personnel-main-page.ts

@@ -1,4 +1,5 @@
 export default {
+  personnelTitle: 'บุคลากร',
   personnelManagement: 'จัดการบุคลากร',
   personnelTooltipTitle: 'ยังไม่มีข้อมูลบุคลากร',
   personnelTooltipCaption: 'คลิก + เพื่อเพิ่มบุคลากร',

src/layouts/MainLayout.vue

@@ -41,14 +41,16 @@ const leftDrawerOpen = ref(false);
 const filterUnread = ref(false);
 const unread = ref<number>(1);
 const filterRole = ref<string[]>();
+const userImage = ref<string>();
 
 const currentLanguage = ref<string>('ไทย');
 const language: {
   value: string;
   label: string;
+  icon: string;
 }[] = [
-  { value: 'th-th', label: 'ไทย' },
+  { value: 'th-th', label: 'ไทย', icon: 'circle-flags:th' },
-  { value: 'en-US', label: 'English' },
+  { value: 'en-US', label: 'English', icon: 'circle-flags:us' },
 ];
 
 const notiOpen = ref(false);
@@ -84,8 +86,14 @@ const notification = ref<Notification[]>([
     read: true,
   },
 ]);
-
+const options = ref([
-const userImage = ref<string>();
+  {
+    icon: 'mdi-lock-outline',
+    label: 'เปลี่ยนรหัสผ่าน',
+    value: 'op1',
+    color: 'primary',
+  },
+]);
 
 function setActive(button: NotificationButton) {
   notiMenu.value = notiMenu.value.map((current) => ({
@@ -130,7 +138,6 @@ onMounted(async () => {
 
   const userRoles = getRole();
   if (userRoles) {
-    console.log(userRoles);
     filterRole.value = userRoles.filter(
       (role) =>
         role !== 'default-roles-dev' &&
@@ -263,7 +270,8 @@ onMounted(async () => {
             dense
             flat
             no-caps
-            :menu-offset="[0, 10]"
+            content-style="border: 1px solid var(--border-color)"
+            :menu-offset="[30, 10]"
             color="dark"
             class="q-pa-none account-menu-down dropdown-menu"
           >
@@ -296,32 +304,61 @@ onMounted(async () => {
               </q-item>
             </template>
 
-            <q-list class="dropdown-menu">
+            <div no-padding class="row justify-center" style="width: 273.797px">
-              <q-item clickable>
+              <div class="column col-12 items-center">
-                <q-item-section avatar style="min-width: 30px">
+                <div
-                  <q-icon
+                  class="full-width row justify-center"
-                    color="secondary"
+                  style="position: relative"
-                    size="18px"
+                >
-                    name="mdi-lock-outline"
+                  <div
-                  />
+                    class="full-width account-cover"
-                </q-item-section>
+                    :class="{ dark: $q.dark.isActive }"
-                <q-item-section>
+                  ></div>
-                  <q-item-label>เปลี่ยนรหัสผ่าน</q-item-label>
+                  <div class="avartar-border">
-                </q-item-section>
+                    <q-avatar size="72px" class="bg-primary">
-              </q-item>
+                      <img :src="userImage" v-if="userImage" />
-              <q-item clickable v-close-popup @click="doLogout()">
+                    </q-avatar>
-                <q-item-section avatar style="min-width: 30px">
+                  </div>
-                  <q-icon
+                </div>
-                    color="primary"
+
-                    size="18px"
+                <div
-                    name="mdi-logout-variant"
+                  class="text-subtitle2 q-mb-xs text-center"
-                  />
+                  style="margin-top: 58px"
-                </q-item-section>
+                >
-                <q-item-section>
+                  {{ getName() }}
-                  <q-item-label>ออกจากระบบ</q-item-label>
+                </div>
-                </q-item-section>
+                <div
-              </q-item>
+                  class="badge q-px-sm q-mb-md text-caption"
-            </q-list>
+                  :class="{ dark: $q.dark.isActive }"
+                >
+                  {{ getRoleName(userStore.userOption.roleOpts, filterRole) }}
+                </div>
+              </div>
+
+              <div class="column col-12">
+                <q-separator />
+                <div class="column justify-center">
+                  <q-list dense v-for="op in options" :key="op.label">
+                    <q-item clickable>
+                      <q-item-section avatar>
+                        <q-icon :name="op.icon" :color="op.color" size="20px" />
+                      </q-item-section>
+                      <q-item-section class="q-py-sm">
+                        {{ op.label }}
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+                <q-btn
+                  dense
+                  flat
+                  class="q-ma-sm logout-btn"
+                  :class="{ dark: $q.dark.isActive }"
+                  label="ออกจากระบบ"
+                  @click="doLogout()"
+                />
+              </div>
+            </div>
           </q-btn-dropdown>
 
           <!-- theme -->
@@ -411,4 +448,41 @@ onMounted(async () => {
     color: var(--foreground);
   }
 }
+
+.badge {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--indigo-0);
+  text-wrap: nowrap;
+
+  &.dark {
+    background-color: var(--surface-3);
+  }
+}
+
+.account-cover {
+  height: 65px;
+  background-color: var(--indigo-0);
+
+  &.dark {
+    background-color: var(--surface-3);
+  }
+}
+
+.avartar-border {
+  margin-top: 24px;
+  border: 5px solid var(--surface-1);
+  border-radius: 50%;
+  position: absolute;
+}
+
+.logout-btn {
+  color: hsl(var(--negative-bg));
+  background-color: hsl(var(--stone-3-hsl));
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--negative-bg));
+  }
+}
 </style>

src/pages/02_personnel-management/MainPage.vue

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

src/stores/branch/types.ts

@@ -65,4 +65,5 @@ export type BranchUserStats = {
   nameEN: string;
   name: string;
   count: 0;
+  isHeadOffice: boolean;
 };