From ff6d53f958e426bcbc5377c2cfe0d7bcfb5a818b Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 27 Sep 2024 15:22:28 +0700
Subject: [PATCH] fix(04): profile layout

---
 src/pages/04_product-service/MainPage.vue | 146 +++++++++++++++++-----
 1 file changed, 114 insertions(+), 32 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 98bcaa40..c906ecdf 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2898,7 +2898,12 @@ watch(
     :submit="() => submitGroup()"
     :close="clearFormGroup"
   >
-    <div class="q-mx-lg q-mt-lg">
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
       <ProfileBanner
         readonly
         noImageAction
@@ -2947,7 +2952,11 @@ watch(
       />
     </div>
     <div
-      class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
+      class="col surface-1 rounded bordered scroll row relative-position"
+      :class="{
+        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
+        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
+      }"
       id="group-form"
     >
       <div
@@ -2973,9 +2982,12 @@ watch(
         </div>
       </div>
       <div
-        class="col-12 col-md-10 q-py-md q-pr-md"
+        class="col-12 col-md-10"
         id="customer-form-content"
-        :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
+        :class="{
+          'q-py-md q-pr-md ': $q.screen.gt.sm,
+          'q-py-md q-px-lg': !$q.screen.gt.sm,
+        }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
         <!-- :isType="productMode === 'type'" -->
@@ -3034,7 +3046,12 @@ watch(
     hide-action
   >
     <InfoForm>
-      <div class="q-mx-lg q-mt-lg">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
         <ProfileBanner
           noImageAction
           :active="currentStatusGroupType !== 'INACTIVE'"
@@ -3080,7 +3097,13 @@ watch(
         />
       </div>
 
-      <div class="col q-pa-lg">
+      <div
+        class="col"
+        :class="{
+          'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
+          'q-mb-sm q-mx-md': !$q.screen.gt.sm,
+        }"
+      >
         <div
           style="overflow-y: auto"
           class="row full-width full-height surface-1 rounded relative-position"
@@ -3143,9 +3166,12 @@ watch(
             />
           </div>
           <div
-            class="col-12 col-md-10 q-py-md q-pr-md full-height"
+            class="col-12 col-md-10 full-height"
             id="group-info"
-            :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-py-md q-px-lg': !$q.screen.gt.sm,
+            }"
             style="overflow-y: auto"
           >
             <!-- :isType="productMode === 'type'" -->
@@ -3356,7 +3382,7 @@ watch(
     </div>
   </DialogForm>
 
-  <!-- Add Product -->
+  <!-- add Product -->
   <DialogForm
     v-model:modal="dialogProduct"
     :title="$t('productService.product.addTitle')"
@@ -3373,7 +3399,12 @@ watch(
       }
     "
   >
-    <div class="q-mx-lg q-mt-lg">
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
       <ProfileBanner
         hideFade
         useToggle
@@ -3405,7 +3436,7 @@ watch(
         "
         :tabsList="
           $q.screen.gt.sm
-            ? []
+            ? false
             : [
                 {
                   name: 1,
@@ -3422,8 +3453,12 @@ watch(
     </div>
 
     <div
-      class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
+      class="col surface-1 rounded bordered scroll row relative-position"
       id="product-form"
+      :class="{
+        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
+        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
+      }"
     >
       <div
         class="col"
@@ -3453,9 +3488,12 @@ watch(
         </div>
       </div>
       <div
-        class="col-12 col-md-10 q-py-md q-pr-md"
+        class="col-12 col-md-10"
         id="customer-form-content"
-        :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
+        :class="{
+          'q-py-md q-pr-md ': $q.screen.gt.sm,
+          'q-py-md q-px-lg': !$q.screen.gt.sm,
+        }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
         <BasicInfoProduct
@@ -3497,7 +3535,12 @@ watch(
     "
     hide-footer
   >
-    <div class="q-mx-lg q-mt-lg">
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
       <ProfileBanner
         hideFade
         :useToggle="actionDisplay"
@@ -3542,7 +3585,7 @@ watch(
         "
         :tabsList="
           $q.screen.gt.sm
-            ? []
+            ? false
             : [
                 {
                   name: 1,
@@ -3559,8 +3602,12 @@ watch(
     </div>
 
     <div
-      class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
-      id="group-form"
+      class="col surface-1 rounded bordered scroll row relative-position"
+      id="product-form"
+      :class="{
+        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
+        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
+      }"
     >
       <div
         class="surface-1 rounded row q-mx-lg q-my-md"
@@ -3628,8 +3675,11 @@ watch(
         </div>
       </div>
       <div
-        class="col-12 col-md-10 q-py-md q-pr-md"
-        :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
+        class="col-12 col-md-10"
+        :class="{
+          'q-py-md q-pr-md ': $q.screen.gt.sm,
+          'q-py-md q-px-lg': !$q.screen.gt.sm,
+        }"
         id="customer-form-content"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
@@ -3682,7 +3732,12 @@ watch(
       }
     "
   >
-    <div class="q-mx-lg q-mt-lg">
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
       <ProfileBanner
         hideFade
         useToggle
@@ -3721,7 +3776,7 @@ watch(
         "
         :tabsList="
           $q.screen.gt.sm
-            ? []
+            ? false
             : [
                 {
                   name: 1,
@@ -3738,7 +3793,11 @@ watch(
     </div>
 
     <div
-      class="col surface-1 q-mx-lg q-mt-lg q-mb-md rounded bordered scroll row relative-position"
+      class="col surface-1 rounded bordered scroll row relative-position"
+      :class="{
+        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
+        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
+      }"
       id="service-form"
     >
       <div
@@ -3769,9 +3828,12 @@ watch(
         </div>
       </div>
       <div
-        class="col-12 col-md-10 q-py-md q-pr-md"
+        class="col-12 col-md-10"
         id="customer-form-content"
-        :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
+        :class="{
+          'q-py-md q-pr-md ': $q.screen.gt.sm,
+          'q-py-md q-px-lg': !$q.screen.gt.sm,
+        }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
         <div
@@ -3861,7 +3923,11 @@ watch(
       </div>
     </div>
     <div
-      class="col-2 surface-1 q-mx-lg q-mb-lg rounded bordered row"
+      class="col-2 surface-1 rounded bordered row"
+      :class="{
+        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
+        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
+      }"
       v-if="serviceTab === 1"
       style="overflow: hidden"
     >
@@ -3971,7 +4037,12 @@ watch(
       }
     "
   >
-    <div class="q-mx-lg q-mt-lg">
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
       <ProfileBanner
         hideFade
         :useToggle="actionDisplay"
@@ -4019,7 +4090,7 @@ watch(
         "
         :tabsList="
           $q.screen.gt.sm
-            ? []
+            ? false
             : [
                 {
                   name: 1,
@@ -4036,8 +4107,12 @@ watch(
     </div>
 
     <div
-      class="col surface-1 q-mx-lg q-mt-lg q-mb-md rounded bordered scroll row relative-position"
+      class="col surface-1 rounded bordered scroll row relative-position"
       id="group-form"
+      :class="{
+        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
+        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
+      }"
     >
       <div
         class="surface-1 rounded q-my-md q-mx-lg row items-center"
@@ -4146,9 +4221,12 @@ watch(
         </div>
       </div>
       <div
-        class="col-12 col-md-10 q-py-md q-pr-md"
+        class="col-12 col-md-10"
         id="customer-form-content"
-        :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
+        :class="{
+          'q-py-md q-pr-md ': $q.screen.gt.sm,
+          'q-py-md q-px-lg': !$q.screen.gt.sm,
+        }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
         <BasicInformation
@@ -4198,7 +4276,11 @@ watch(
       </div>
     </div>
     <div
-      class="col-2 surface-1 q-mx-lg q-mb-lg rounded bordered row"
+      class="col-2 surface-1 rounded bordered row"
+      :class="{
+        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
+        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
+      }"
       v-if="serviceTab === 1"
       style="overflow: hidden"
     >