From f7fa614ffe777de87b5f456f2ad8494cdc31a7c6 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 21 Jun 2024 07:28:32 +0000
Subject: [PATCH] fix: form dialog & work name management dialog

---
 .../04_product-service/WorkNameManagement.vue |  85 +++++---
 src/components/FormDialog.vue                 | 201 +++++++++---------
 src/pages/04_product-service/MainPage.vue     |   2 +
 3 files changed, 159 insertions(+), 129 deletions(-)

diff --git a/src/components/04_product-service/WorkNameManagement.vue b/src/components/04_product-service/WorkNameManagement.vue
index 39d06231..3321bddc 100644
--- a/src/components/04_product-service/WorkNameManagement.vue
+++ b/src/components/04_product-service/WorkNameManagement.vue
@@ -41,7 +41,7 @@ function confirmDelete(items: unknown[], index: number) {
 }
 </script>
 <template>
-  <div class="full-width column no-wrap" style="height: 50vh">
+  <div class="full-width column no-wrap full-height">
     <div
       v-if="true"
       class="bordered rounded surface-1 flex col column justify-between"
@@ -52,37 +52,6 @@ function confirmDelete(items: unknown[], index: number) {
           v-for="(i, index) in testName"
           :key="index"
         >
-          <q-btn
-            id="btn-delete-work-name"
-            icon="mdi-trash-can-outline"
-            dense
-            flat
-            round
-            color="negative"
-            @click="confirmDelete(testName, index)"
-          />
-          <q-btn
-            v-if="!i.isEdit"
-            id="btn-edit-work-name"
-            icon="mdi-pencil-outline"
-            dense
-            flat
-            round
-            class="q-ml-md"
-            color="primary"
-            @click="i.isEdit = true"
-          />
-          <q-btn
-            v-else
-            id="btn-edit-work-name"
-            icon="mdi-check"
-            dense
-            flat
-            round
-            class="q-ml-md"
-            color="primary"
-            @click="i.isEdit = false"
-          />
           <!-- outlined -->
           <q-input
             ref="inputWorkName"
@@ -90,10 +59,60 @@ function confirmDelete(items: unknown[], index: number) {
             :borderless="!i.isEdit"
             :readonly="!i.isEdit"
             :outlined="i.isEdit"
-            class="q-ml-xl col"
+            class="col q-mr-md"
             v-model="i.name"
             placeholder="ชื่องาน"
           ></q-input>
+          <q-btn
+            v-if="!i.isEdit"
+            id="btn-edit-work-name"
+            icon="mdi-pencil-outline"
+            dense
+            flat
+            round
+            color="primary"
+            @click="i.isEdit = true"
+          >
+            <q-tooltip>Edit</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-else
+            id="btn-edit-work-name"
+            icon="mdi-check"
+            dense
+            flat
+            round
+            color="primary"
+            @click="i.isEdit = false"
+          >
+            <q-tooltip>Save</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="!i.isEdit"
+            id="btn-delete-work-name"
+            icon="mdi-trash-can-outline"
+            dense
+            flat
+            round
+            class="q-ml-md"
+            color="negative"
+            @click="confirmDelete(testName, index)"
+          >
+            <q-tooltip>Delete</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-else
+            id="btn-edit-work-name"
+            icon="mdi-undo"
+            dense
+            flat
+            round
+            class="q-ml-md"
+            color="negative"
+            @click="i.isEdit = false"
+          >
+            <q-tooltip>Cancel</q-tooltip>
+          </q-btn>
         </q-item>
       </q-list>
 
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index e1b192bd..1eb56985 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import AppBox from 'components/app/AppBox.vue';
+// import AppBox from 'components/app/AppBox.vue';
 import FormAddress from './02_personnel-management/FormAddress.vue';
 
 defineProps<{
@@ -46,11 +46,17 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
 </script>
 <template>
   <q-dialog v-model="modal" @hide="close">
-    <AppBox
-      style="padding: 0; border-radius: var(--radius-2); max-height: 100%"
-      :style="`max-width:${maxWidth ? maxWidth : '85%'}; width: ${width ? width : '85%'} `"
+    <div
+      class="surface-1"
+      style="padding: 0; border-radius: var(--radius-2); height: 100%"
+      :style="`max-width:${maxWidth ? maxWidth : '85%'}; width: ${width ? width : '85%'}; height: ${height ? height : '85vh'} `"
     >
-      <q-form greedy @submit.prevent @validation-success="submit">
+      <q-form
+        greedy
+        @submit.prevent
+        @validation-success="submit"
+        class="column full-height"
+      >
         <!-- header -->
         <div class="form-header q-py-sm q-px-lg">
           <div class="row items-center">
@@ -141,117 +147,120 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
 
         <!-- body -->
         <div
-          v-if="tabsList && tabsList.length > 0"
-          class="row surface-2 q-px-md q-pt-md full-width"
-          style="border-bottom: 1px solid var(--brand-1)"
-        >
-          <q-tabs
-            dense
-            class="app-text-muted cancel-overflow"
-            v-model="currentTab"
-            active-class="active-tab"
-            indicator-color="transparent"
-          >
-            <q-tab
-              :id="`tab-${tab.label}`"
-              v-for="tab in tabsList"
-              v-bind:key="tab.name"
-              class="content-tab text-capitalize"
-              :name="tab.name"
-              :label="$t(tab.label)"
-              style="z-index: 999"
-            />
-          </q-tabs>
-        </div>
-        <div
-          class="row q-pa-lg scroll"
+          class="col full-height column"
           :class="{
             dark: $q.dark.isActive,
             'surface-2': !employee,
             'surface-tab': employee || tabsList,
           }"
-          :style="
-            $q.screen.gt.sm
-              ? 'max-height: 75vh'
-              : 'overflow-y: auto; max-height: 75vh'
-          "
         >
-          <!-- prepend -->
           <div
-            class="column"
-            :class="$q.screen.gt.sm ? 'col-2  q-pr-lg' : 'col-12'"
-            v-if="$slots.prepend && !$slots.append"
+            v-if="tabsList && tabsList.length > 0"
+            class="row surface-2 q-px-md q-pt-md full-width"
+            style="border-bottom: 1px solid var(--brand-1)"
           >
-            <slot name="prepend"></slot>
+            <q-tabs
+              dense
+              class="app-text-muted cancel-overflow"
+              v-model="currentTab"
+              active-class="active-tab"
+              indicator-color="transparent"
+            >
+              <q-tab
+                :id="`tab-${tab.label}`"
+                v-for="tab in tabsList"
+                v-bind:key="tab.name"
+                class="content-tab text-capitalize"
+                :name="tab.name"
+                :label="$t(tab.label)"
+                style="z-index: 999"
+              />
+            </q-tabs>
           </div>
 
-          <div class="row col-12" v-if="$slots.body">
-            <slot name="body"></slot>
-          </div>
-
-          <slot></slot>
-
-          <!-- center -->
-          <AppBox
-            v-if="!noAppBox"
-            bordered
-            :noPadding="noPaddingTab"
-            class="column full-height"
-            :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'}`"
-            style="padding-right: 0; padding-bottom: 0"
+          <div
+            class="row q-pa-lg scroll col"
+            :class="{
+              dark: $q.dark.isActive,
+              'surface-2': !employee,
+              'surface-tab': employee || tabsList,
+            }"
           >
+            <!-- prepend -->
             <div
-              class="row col-12 q-col-gutter-y-md q-mb-md items-start"
-              :class="noPaddingTab ? '' : 'q-pr-md'"
-              :style="
-                $q.screen.gt.sm
-                  ? noPaddingTab
-                    ? 'height: 60vh'
-                    : 'overflow-y: auto; height: 60vh'
-                  : ''
+              class="column"
+              :class="$q.screen.gt.sm ? 'col-2  q-pr-lg' : 'col-12'"
+              v-if="$slots.prepend && !$slots.append"
+            >
+              <slot name="prepend"></slot>
+            </div>
+
+            <div class="row col-12" v-if="$slots.body">
+              <slot name="body"></slot>
+            </div>
+
+            <slot></slot>
+
+            <!-- center -->
+            <div
+              v-if="!noAppBox"
+              bordered
+              :noPadding="noPaddingTab"
+              class="column full-height surface-1 bordered rounded q-pt-lg q-pl-lg scroll"
+              :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'}`"
+              style="
+                padding-right: 0;
+                padding-bottom: 16px;
+                box-sizing: border-box;
               "
             >
-              <slot name="information"></slot>
-              <slot name="person"></slot>
-              <slot v-if="!noFooter" name="address">
-                <FormAddress
-                  dense
-                  outlined
-                  :employee="employee"
-                  :title="titleFormAddress"
-                  :separator="addressSeparator"
-                  :disabledRule="disabledRule"
-                  v-model:address="address"
-                  v-model:addressEN="addressEN"
-                  v-model:provinceId="provinceId"
-                  v-model:districtId="districtId"
-                  v-model:subDistrictId="subDistrictId"
-                  v-model:zipCode="zipCode"
-                  v-model:same-with-employer="sameWithEmployer"
-                  :addressTitle="addressTitle || ''"
-                  :addressTitleEN="addressTitleEN || ''"
-                  v-if="!$slots.address && !noAddress"
-                />
-              </slot>
-              <slot name="qr-code"></slot>
-              <slot name="location"></slot>
-              <slot name="by-type"></slot>
+              <div
+                class="row col-12 q-col-gutter-y-md q-mb-md items-start full-height"
+                :class="noPaddingTab ? '' : 'q-pr-md'"
+              >
+                <slot name="information"></slot>
+                <slot name="person"></slot>
+                <slot v-if="!noFooter" name="address">
+                  <FormAddress
+                    dense
+                    outlined
+                    :employee="employee"
+                    :title="titleFormAddress"
+                    :separator="addressSeparator"
+                    :disabledRule="disabledRule"
+                    v-model:address="address"
+                    v-model:addressEN="addressEN"
+                    v-model:provinceId="provinceId"
+                    v-model:districtId="districtId"
+                    v-model:subDistrictId="subDistrictId"
+                    v-model:zipCode="zipCode"
+                    v-model:same-with-employer="sameWithEmployer"
+                    :addressTitle="addressTitle || ''"
+                    :addressTitleEN="addressTitleEN || ''"
+                    v-if="!$slots.address && !noAddress"
+                  />
+                </slot>
+                <slot name="qr-code"></slot>
+                <slot name="location"></slot>
+                <slot name="by-type"></slot>
+              </div>
             </div>
-          </AppBox>
 
-          <!-- append -->
-          <q-item-section
-            class="column col-6"
-            v-if="$slots.append && !$slots.prepend"
-          >
-            <slot name="append"></slot>
-          </q-item-section>
+            <!-- append -->
+            <q-item-section
+              class="column col-6"
+              v-if="$slots.append && !$slots.prepend"
+            >
+              <slot name="append"></slot>
+            </q-item-section>
+          </div>
         </div>
 
         <!-- footer -->
         <div
           v-if="!noFooter"
-          class="form-footer q-py-sm row items-center full-width justify-between q-px-md"
+          class="form-footer row items-center full-width justify-between q-px-md q-py-md surface-1"
+          style="z-index: 3"
         >
           <div>
             <slot name="footer"></slot>
@@ -279,7 +288,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
           </div>
         </div>
       </q-form>
-    </AppBox>
+    </div>
   </q-dialog>
 </template>
 
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index ce260553..b5b9ce74 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1454,6 +1454,7 @@ watch(currentStatus, async () => {
 
   <!-- add service -->
   <FormDialog
+    height="95vh"
     no-address
     :title="$t('addService')"
     v-model:modal="dialogService"
@@ -1554,6 +1555,7 @@ watch(currentStatus, async () => {
   <FormDialog
     no-address
     no-app-box
+    no-footer
     width="65%"
     title="จัดการ"
     v-model:modal="manageWorkNameDialog"