From 5c9c647a2cca5413078de73dd78b6c7c0a56fecd Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Thu, 6 Jun 2024 16:03:47 +0700
Subject: [PATCH] fix: change style on customer dialog

---
 .../03_customer-management/AboutComponent.vue | 63 +++++++++----------
 src/components/TabComponent.vue               | 41 ++++++++----
 src/pages/03_customer-management/MainPage.vue |  5 +-
 3 files changed, 62 insertions(+), 47 deletions(-)

diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index 77499e9c..96927cb0 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -22,38 +22,37 @@ const registerDate = defineModel<Date | null>('registerDate');
   <div class="row">
     <div class="col-3 app-text-muted">• {{ $t(`about`) }}</div>
     <div class="col-9 row q-col-gutter-md">
-      <div class="row q-col-gutter-md">
-        <q-input
-          :dense="dense"
-          :outlined="!readonly"
-          :readonly="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          class="col-3"
-          :label="$t('branchCode')"
-          v-model="branchCode"
-        />
-        <q-input
-          :dense="dense"
-          :outlined="!readonly"
-          :readonly="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          class="col-4"
-          :label="$t('legalEntityCode')"
-          v-model="legalEntityCode"
-        />
-        <q-input
-          :dense="dense"
-          :outlined="!readonly"
-          :readonly="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          class="col-5"
-          :label="$t('taxNo')"
-          v-model="taxNo"
-        />
-      </div>
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-3"
+        :label="$t('branchCode')"
+        v-model="branchCode"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-4"
+        :label="$t('legalEntityCode')"
+        v-model="legalEntityCode"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-5"
+        :label="$t('taxNo')"
+        v-model="taxNo"
+      />
+
       <q-input
         :dense="dense"
         :outlined="!readonly"
diff --git a/src/components/TabComponent.vue b/src/components/TabComponent.vue
index 35c248e7..a5dfa3e7 100644
--- a/src/components/TabComponent.vue
+++ b/src/components/TabComponent.vue
@@ -37,40 +37,49 @@ function addData() {
 }
 
 function close(index: number) {
-  if (customerBranch.value.length === 1) return;
+  if (customerBranch.value.length < 2) return;
 
-  if (customerBranch.value.length === index + 1) {
+  if (
+    customerBranch.value.length === index + 1 &&
+    tab.value + 1 === customerBranch.value.length
+  ) {
     tab.value = tab.value - 1;
   } else if (tab.value >= index) {
-    tab.value = tab.value - 1;
-  }
-
-  if (customerBranch.value.length > 1) {
-    customerBranch.value.splice(index, 1);
+    if (tab.value !== 0) {
+      tab.value = tab.value - 1;
+    }
   }
+  customerBranch.value.splice(index, 1);
 }
 </script>
 <template>
-  <div class="column">
+  <div class="row no-wrap">
+    <q-btn
+      class="q-px-lg tab-style app-text-muted"
+      flat
+      style="background-color: var(--_body-bg)"
+      @click="addData()"
+      icon="mdi-plus"
+    ></q-btn>
     <q-tabs
       active-bg-color="white"
       active-color="primary"
-      indicator-color="white"
+      indicator-color="transparent"
       active-class="active-tab"
       v-model="tab"
       align="left"
       inline-label
       class="text-grey"
-      style="width: 960px; background-color: var(--_body-bg)"
+      style="background-color: var(--_body-bg); max-width: 55vw"
     >
-      <q-tab icon="mdi-plus" @click="addData()" />
       <q-tab
         v-for="(v, index) in customerBranch"
         :key="index"
         :name="index"
         :label="`${$t('customerBranchFormTab')} ${index + 1}`"
-        @click="(tab = index), console.log(customerBranch)"
+        @click="tab = index"
         no-caps
+        :class="tab === index ? '' : 'tab-style'"
       >
         <q-btn
           round
@@ -107,5 +116,13 @@ function close(index: number) {
 .active-tab {
   border: 1px solid #e0dcdc;
   border-bottom: none;
+  border-top: none;
+  border-left: none;
+}
+
+.tab-style {
+  border: 1px solid #e0dcdc;
+  border-left: none;
+  border-top: none;
 }
 </style>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 2a928497..7f5abdd7 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -326,9 +326,7 @@ function onClose() {
         • {{ $t('formDialogCustomerBranch') }}
       </div>
 
-      <div
-        class="col-12 full-width row bordered-b bordered-l bordered-r rounded"
-      >
+      <div class="col-12 row bordered q-pt-none rounded">
         <TabComponent
           v-model:customer-branch="formData.customerBranch"
           v-model:tab-index="indexTab"
@@ -382,6 +380,7 @@ function onClose() {
               "
               dense
               outlined
+              bordered
               separator
             />
           </template>