From 2be948dcfa39a6b3c1d415763ad3e0d468f29658 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Fri, 2 Aug 2024 15:31:59 +0700
Subject: [PATCH] refactor: edit layout

---
 .../FormInformation.vue                       | 323 +++++++++---------
 1 file changed, 167 insertions(+), 156 deletions(-)

diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index 1d7cd23b..e1d0d69c 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -15,6 +15,7 @@ const username = defineModel<string | null | undefined>('username');
 const userCode = defineModel<string>('userCode');
 
 defineProps<{
+  title?: string;
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
@@ -71,157 +72,171 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="col-md-3 col-12 app-text-muted">
-    • {{ $t('formDialogTitleInformation') }}
-  </div>
-  <div class="col-md-9 col-12 row q-col-gutter-md">
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      v-model="hqId"
-      for="select-hq-id"
-      input-debounce="0"
-      option-label="label"
-      option-value="value"
-      lazy-rules="ondemand"
-      class="col-md-4 col-6"
-      :dense="dense"
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      :label="$t('formDialogInputCode')"
-      :options="hqOptions"
-      :rules="[(val: string) => !!val || $t('formDialogInputHqIdValidate')]"
-      @update:model-value="(val: string) => selectHq(val)"
-      @filter="hqFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      v-model="brId"
-      for="select-br-id"
-      input-debounce="0"
-      option-label="label"
-      option-value="value"
-      lazy-rules="ondemand"
-      class="col-md-4 col-6"
-      :dense="dense"
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      :label="$t('formDialogInputBrId')"
-      :options="brOptions"
-      @filter="brFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <q-input
-      lazy-rules="ondemand"
-      for="input-username"
-      :dense="dense"
-      outlined
-      :readonly="usernameReadonly"
-      emit-value
-      map-options
-      options-dense
-      hide-bottom-space
-      class="col-md-4 col-12"
-      :label="$t('formDialogInputUsername')"
-      v-model="username"
-      :rules="[
-        (val: string) =>
-          val.length > 2 || $t('formDialogInputUsernameValidate'),
-      ]"
-    />
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      class="col-6"
-      v-model="userType"
-      input-debounce="0"
-      option-value="value"
-      option-label="label"
-      lazy-rules="ondemand"
-      for="select-user-type"
-      :dense="dense"
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      :label="$t('formDialogInputUserType')"
-      :options="userTypeOptions"
-      :rules="[(val: string) => !!val || $t('formDialogInputUserTypeValidate')]"
-      @filter="userTypeFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      class="col-6"
-      input-debounce="0"
-      option-label="label"
-      option-value="value"
-      lazy-rules="ondemand"
-      for="select-user-role"
-      :dense="dense"
-      v-model="userRole"
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      :label="$t('formDialogInputUserRole')"
-      :options="roleOptions"
-      :rules="[(val: string) => !!val || $t('formDialogInputUserRoleValidate')]"
-      @filter="roleFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <!-- <q-input lazy-rules="ondemand"
+  <div class="row col-12">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-office-building-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`${title}`) }}
+    </div>
+
+    <div class="col-12 row q-col-gutter-md">
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        v-model="hqId"
+        for="select-hq-id"
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        class="col-2"
+        :dense="dense"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        :label="$t('formDialogInputCode')"
+        :options="hqOptions"
+        :rules="[(val: string) => !!val || $t('formDialogInputHqIdValidate')]"
+        @update:model-value="(val: string) => selectHq(val)"
+        @filter="hqFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        v-model="brId"
+        for="select-br-id"
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        class="col-2"
+        :dense="dense"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        :label="$t('formDialogInputBrId')"
+        :options="brOptions"
+        @filter="brFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-input
+        lazy-rules="ondemand"
+        for="input-username"
+        :dense="dense"
+        outlined
+        :readonly="usernameReadonly"
+        emit-value
+        map-options
+        options-dense
+        hide-bottom-space
+        class="col"
+        :label="$t('formDialogInputUsername')"
+        v-model="username"
+        :rules="[
+          (val: string) =>
+            val.length > 2 || $t('formDialogInputUsernameValidate'),
+        ]"
+      />
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        class="col"
+        v-model="userType"
+        input-debounce="0"
+        option-value="value"
+        option-label="label"
+        lazy-rules="ondemand"
+        for="select-user-type"
+        :dense="dense"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        :label="$t('formDialogInputUserType')"
+        :options="userTypeOptions"
+        :rules="[
+          (val: string) => !!val || $t('formDialogInputUserTypeValidate'),
+        ]"
+        @filter="userTypeFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        class="col"
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        for="select-user-role"
+        :dense="dense"
+        v-model="userRole"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        :label="$t('formDialogPrefixName')"
+        :options="roleOptions"
+        :rules="[
+          (val: string) => !!val || $t('formDialogInputPrefixNameValidate'),
+        ]"
+        @filter="roleFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <!-- <q-input lazy-rules="ondemand"
       id="input-user-code"
       :dense="dense"
       :outlined="readonly ? false : outlined"
@@ -232,10 +247,6 @@ onMounted(async () => {
       :label="$t('formDialogInputUserCode')"
       v-model="userCode"
     /> -->
+    </div>
   </div>
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mb-md"
-    style="padding-block: 0.5px; margin-top: 32px"
-  />
 </template>