feat: customer branch form

src/pages/03_customer-management/MainPage.vue

@@ -9,7 +9,7 @@ import { calculateAge, dateFormat } from 'src/utils/datetime';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useMyBranchStore from 'stores/my-branch';
-import useUtilsStore, { dialog } from 'stores/utils';
+import useUtilsStore, { dialog, notify } from 'stores/utils';
 import useFlowStore from 'stores/flow';
 import { Status } from 'stores/types';
 import { CustomerStats, Customer, CustomerBranch } from 'stores/customer/types';
@@ -20,7 +20,7 @@ import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
-import AddButton from 'components/AddButton.vue';
+import EmptyAddButton from 'components/AddButton.vue';
 import NoData from 'components/NoData.vue';
 import PaginationComponent from 'components/PaginationComponent.vue';
 import DialogForm from 'components/DialogForm.vue';
@@ -33,6 +33,7 @@ import CustomerInfoComponent from './components/CustomerBranch.vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
 import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
+import { AddButton } from 'src/components/button';
 
 import {
   columnsCustomer,
@@ -47,6 +48,7 @@ import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormE
 import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
 import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
 import useOptionStore from 'src/stores/options';
+import { DialogContainer, DialogHeader } from 'src/components/dialog';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -449,7 +451,7 @@ function customerConfirmUnsave(close = true) {
     message: t('form.warning.unsave'),
     action: () => {
       customerFormStore.resetForm();
-      customerFormState.value.editReadonly = true;
+      customerFormState.value.readonly = true;
       customerFormState.value.dialogModal = !close;
     },
     cancel: () => {},
@@ -461,7 +463,7 @@ function customerFormUndo(close = true) {
     return customerConfirmUnsave(close);
   }
   customerFormStore.resetForm();
-  customerFormState.value.editReadonly = true;
+  customerFormState.value.readonly = true;
 }
 
 function createCustomerForm(customerType: 'CORP' | 'PERS') {
@@ -1734,7 +1736,7 @@ watch(
                   class="row items-center justify-center"
                   style="flex-grow: 1"
                 >
-                  <AddButton
+                  <EmptyAddButton
                     :label="
                       currentTab === 'employer'
                         ? 'customerEmployerAdd'
@@ -1770,49 +1772,25 @@ watch(
     </div>
   </div>
 
-  <DialogForm
-    v-model:modal="customerFormState.dialogModal"
-    :title="
-      $t(`form.title.${customerFormState.dialogType}`, {
-        name: $t('customer.employer'),
-      })
-    "
-    :edit="customerFormState.dialogType === 'edit'"
-    :isEdit="customerFormState.editReadonly === false"
-    :undo="() => customerFormUndo(false)"
-    :delete-data="
-      () =>
-        customerFormState.editCustomerId &&
-        deleteCustomerById(customerFormState.editCustomerId)
-    "
-    :editData="() => (customerFormState.editReadonly = false)"
-    :show="
-      () =>
-        fetchListOfOptionBranch().then(() => {
-          customerFormStore.resetForm(
-            customerFormState.dialogType === 'create',
-          );
-        })
-    "
-    :submit="
+  <DialogContainer
+    :model-value="customerFormState.dialogModal"
+    :onOpen="
       async () => {
-        await customerFormStore.submitForm();
-        await fetchListCustomer();
+        await fetchListOfOptionBranch();
+        customerFormStore.resetForm(customerFormState.dialogType === 'create');
       }
     "
-    :close="() => (customerFormState.editReadonly = true)"
-    :before-close="
-      () => {
-        if (customerFormStore.isFormDataDifferent()) {
-          customerConfirmUnsave();
-          return true;
-        }
-        return false; // close
-      }
-    "
-    no-footer
+    :onClose="() => (customerFormState.dialogModal = false)"
   >
-    <div class="q-mx-lg q-mt-lg">
+    <template #header>
+      <DialogHeader
+        :title="$t(`form.title.create`, { name: $t('customer.employer') })"
+      >
+        <!-- <template #title-after>{{ customerFormState.editCustomerId }}</template> -->
+      </DialogHeader>
+    </template>
+
+    <div class="q-px-lg q-pt-lg surface-2">
       <ProfileBanner
         active
         v-model:cover-url="customerFormState.customerImageUrl"
@@ -1832,93 +1810,136 @@ watch(
       />
     </div>
     <div
-      class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
+      style="flex: 1; width: 100%; overflow-y: auto"
+      class="surface-2 q-pa-lg"
       id="customer-form"
     >
-      <div
-        class="col"
-        style="height: 100%; max-height: 100; overflow-y: auto"
-        v-if="$q.screen.gt.sm"
-      >
-        <div class="q-py-md q-pl-md q-pr-sm">
-          <SideMenu
-            :menu="[
-              {
-                name: $t('customer.form.group.basicInfo'),
-                anchor: 'form-basic-info-customer',
-              },
-              {
-                name: $t('customer.form.group.branch'),
-                anchor: 'form-branch-customer-branch',
-              },
-              ...(customerFormData.customerBranch?.map((v) => ({
-                name: $t('customer.form.branch.title', {
-                  name: v.branchNo || 0,
-                }),
-                anchor: `form-branch-customer-no-${v.branchNo}`,
-              })) || []),
-            ]"
-            background="transparent"
-            :active="{
-              background: 'hsla(var(--blue-6-hsl) / .2)',
-              foreground: 'var(--blue-6)',
+      <div class="col surface-1 full-height rounded bordered scroll row">
+        <div
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
+        >
+          <div class="q-py-md q-pl-md q-pr-sm">
+            <SideMenu
+              :menu="[
+                {
+                  name: $t('customer.form.group.basicInfo'),
+                  anchor: 'form-basic-info-customer',
+                },
+                {
+                  name: $t('customer.form.group.branch'),
+                  anchor: 'form-branch-customer-branch',
+                },
+                ...(customerFormData.customerBranch?.map((v) => ({
+                  name: $t('customer.form.branch.title', {
+                    name: v.branchNo || 0,
+                  }),
+                  anchor: `form-branch-customer-no-${v.branchNo}`,
+                })) || []),
+              ]"
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#customer-form-content"
+            />
+          </div>
+        </div>
+        <div
+          class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+          id="customer-form-content"
+          style="height: 100%; max-height: 100%; overflow-y: auto"
+        >
+          <q-form
+            @submit.prevent="
+              async () => {
+                await customerFormStore.submitFormCustomer();
+                customerFormState.readonly = true;
+                notify('create', $t('success'));
+              }
+            "
+            :style="{
+              opacity: customerFormState.branchIndex !== -1 ? '0.5' : undefined,
             }"
-            scroll-element="#customer-form-content"
-          />
+          >
+            <FormBasicInfo
+              class="q-mb-xl"
+              :readonly="
+                customerFormState.dialogType === 'edit' &&
+                customerFormState.readonly === true
+              "
+              :action-disabled="customerFormState.branchIndex !== -1"
+              id="form-basic-info-customer"
+              :create="customerFormState.dialogType === 'create'"
+              @edit="customerFormState.readonly = false"
+              @cancel="() => customerFormUndo(false)"
+              @delete="
+                customerFormState.editCustomerId &&
+                  deleteCustomerById(customerFormState.editCustomerId)
+              "
+              :customer-type="customerFormData.customerType"
+              v-model:tax-no="customerFormData.taxNo"
+              v-model:customer-name="customerFormData.customerName"
+              v-model:customer-name-en="customerFormData.customerNameEN"
+              v-model:person-name="customerFormData.personName"
+              v-model:registered-branch-id="customerFormData.registeredBranchId"
+              v-model:branch-options="registerAbleBranchOption"
+            />
+          </q-form>
+          <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
+            <div
+              class="col-12 text-weight-bold text-body1 row items-center"
+              :style="{
+                opacity:
+                  customerFormState.branchIndex !== -1 ? '0.5' : undefined,
+              }"
+            >
+              <q-icon
+                flat
+                size="xs"
+                class="q-pa-sm rounded q-mr-xs"
+                color="info"
+                name="mdi-briefcase"
+                style="background-color: var(--surface-3)"
+              />
+              <span>{{ $t('customer.form.group.branch') }}</span>
+              <AddButton
+                type="button"
+                class="q-ml-sm"
+                @click="customerFormStore.addCurrentCustomerBranch()"
+                v-if="customerFormState.branchIndex === -1"
+                :disabled="!customerFormState.readonly"
+              />
+            </div>
+            <q-form
+              @submit.prevent
+              class="full-width"
+              v-if="customerFormData.customerBranch"
+              v-for="(_, idx) in customerFormData.customerBranch"
+            >
+              <FormBranch
+                v-if="!!customerFormState.editCustomerId"
+                v-model:customer-branch="customerFormData.customerBranch[idx]"
+                :customer-type="customerFormData.customerType"
+                :action-disabled="
+                  !customerFormState.readonly ||
+                  (customerFormState.branchIndex !== -1 &&
+                    customerFormState.branchIndex !== idx)
+                "
+                :readonly="customerFormState.branchIndex !== idx"
+                @edit="() => (customerFormState.branchIndex = idx)"
+                @cancel="() => customerFormUndo(false)"
+                @delete="() => {}"
+                @save="() => {}"
+              />
+            </q-form>
+          </div>
         </div>
       </div>
-      <div
-        class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
-        id="customer-form-content"
-        style="height: 100%; max-height: 100%; overflow-y: auto"
-      >
-        <FormBasicInfo
-          class="q-mb-xl"
-          :readonly="
-            customerFormState.dialogType === 'edit' &&
-            customerFormState.editReadonly === true
-          "
-          id="form-basic-info-customer"
-          @save="customerFormState.saveMode = 'customer'"
-          :customer-type="customerFormData.customerType"
-          v-model:tax-no="customerFormData.taxNo"
-          v-model:customer-name="customerFormData.customerName"
-          v-model:customer-name-en="customerFormData.customerNameEN"
-          v-model:person-name="customerFormData.personName"
-          v-model:registered-branch-id="customerFormData.registeredBranchId"
-          v-model:branch-options="registerAbleBranchOption"
-        />
-        <FormBranch
-          v-if="!!customerFormState.editCustomerId"
-          id="form-branch-customer-branch"
-          :customer-type="customerFormData.customerType"
-          :editable="
-            customerFormState.dialogType === 'create' ||
-            customerFormState.editReadonly === false
-          "
-          @add-branch="customerFormStore.addCurrentCustomerBranch()"
-          @save-branch="
-            (idx) => {
-              customerFormState.saveMode = 'branch';
-              customerFormState.branchIndex = idx;
-            }
-          "
-          v-model:customer-branch="customerFormData.customerBranch"
-        />
-      </div>
     </div>
-
-    <!-- <q-btn -->
-    <!--   @click="customerFormState.saveMode = 'customer'" -->
-    <!--   type="submit" -->
-    <!--   label="Save" -->
-    <!-- /> -->
-    <!-- <q-btn -->
-    <!--   @click="customerFormState.saveMode = 'branch'" -->
-    <!--   type="submit" -->
-    <!--   label="Save" -->
-    <!-- /> -->
-  </DialogForm>
+  </DialogContainer>
 
   <DialogForm
     :title="$t('form.title.create', { name: 'Employee' })"