Merge branch 'dev/phat-2' into develop

src/components/DrawerInfo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 defineProps<{
   title: string;
@@ -12,6 +12,7 @@ defineProps<{
   undo?: (...args: unknown[]) => void;
 }>();
 
+// const drawerWidth = ref(window.screen.width * 0.8);
 const drawerOpen = defineModel<boolean>('drawerOpen', {
   default: false,
 });
@@ -23,13 +24,22 @@ function reset() {
     myForm.value.resetValidation();
   }
 }
+
+// watch(
+//   () => window.screen.width,
+//   (v) => {
+//     console.log(v);
+
+//     drawerWidth.value = v;
+//   },
+// );
 </script>
 <template>
   <q-drawer
     @before-hide="reset"
     @hide="close"
-    :width="1300"
+    :width="$q.screen.gt.md ? 1200 : $q.screen.gt.xs ? 700 : 900"
-    :breakpoint="500"
+    :breakpoint="1366"
     v-model="drawerOpen"
     behavior="mobile"
     side="right"

src/components/SelectorList.vue

@@ -29,7 +29,7 @@ defineProps<{
         "
         @click="selector = v.label"
       >
-        <div class="row full-width justify-between">
+        <div class="row full-width items-center justify-between">
           <div>
             {{ $t(v.label) }}
           </div>

src/components/home/PersonCard.vue

@@ -68,56 +68,75 @@ defineEmits<{
             size="sm"
             @click.stop=""
           >
-            <q-menu :offset="[0, 10]" style="width: 130px">
+            <q-menu class="bordered">
-              <q-list>
+              <q-list v-close-popup>
                 <q-item
                   clickable
+                  dense
+                  class="row q-py-sm"
+                  style="white-space: nowrap"
+                  @click="$emit('enterCard', 'INFO', v.id)"
+                >
+                  <q-icon
+                    name="mdi-eye-outline"
+                    class="col-3"
+                    size="xs"
+                    style="color: hsl(var(--green-6-hsl))"
+                  />
+                  <span class="col-9 q-px-md flex items-center">
+                    {{ $t('viewDetail') }}
+                  </span>
+                </q-item>
+                <q-item
+                  dense
+                  clickable
+                  class="row q-py-sm"
+                  style="white-space: nowrap"
                   @click="$emit('updateCard', 'FORM', v.id)"
                   v-close-popup
                 >
-                  <q-item-section class="col-4">
                   <q-icon
-                      class="full-width"
                     name="mdi-pencil-outline"
-                      color="positive"
+                    class="col-3"
                     size="xs"
+                    style="color: hsl(var(--cyan-6-hsl))"
                   />
-                  </q-item-section>
+                  <span class="col-9 q-px-md flex items-center">
-                  <q-item-section class="text-caption">
                     {{ $t('edit') }}
-                  </q-item-section>
+                  </span>
                 </q-item>
                 <q-item
+                  dense
                   clickable
                   @click="$emit('deleteCard', v.id)"
                   v-close-popup
                 >
-                  <q-item-section class="col-4">
                   <q-icon
-                      class="full-width"
                     name="mdi-trash-can-outline"
-                      color="negative"
                     size="xs"
+                    class="col-3 app-text-negative"
                   />
-                  </q-item-section>
+                  <span class="col-9 q-px-md flex items-center">
-                  <q-item-section class="text-caption">
                     {{ $t('delete') }}
-                  </q-item-section>
+                  </span>
                 </q-item>
-                <q-item clickable>
+                <q-item dense>
-                  <q-item-section class="col-4">
+                  <q-item-section class="q-py-sm">
+                    <div class="q-pa-sm surface-2 rounded">
                       <q-toggle
                         dense
-                      color="primary"
+                        size="sm"
-                      size="xs"
                         @click="$emit('toggleStatus', v.id)"
                         :model-value="!v.disabled"
                         val="xs"
                         padding="none"
+                        :label="
+                          v.disabled
+                            ? $t('switchOnLabel')
+                            : $t('switchOffLabel')
+                        "
                       />
-                  </q-item-section>
+                    </div>
-                  <q-item-section class="text-caption">
-                    {{ v.disabled ? 'เปิดสถานะ' : 'ปิดสถานะ' }}
                   </q-item-section>
                 </q-item>
               </q-list>

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

@@ -278,12 +278,13 @@ async function onSubmit() {
             result.id,
           );
         }
-        onClose();
+        selectorLabel.value = formData.value.userType;
         userStore.fetchList({
           includeBranch: true,
           userType: selectorLabel.value ?? undefined,
         });
         typeStats.value = await userStore.typeStats();
+        onClose();
       },
     });
   }