fixup! feat: add button

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

@@ -8,6 +8,7 @@ import useOptionStore from 'stores/options';
 import { Status } from 'stores/types';
 import { CustomerBranch, CustomerType } from 'stores/customer/types';
 
+import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import SideMenu from 'components/SideMenu.vue';
 import { DialogFormContainer, DialogHeader } from 'components/dialog';
 import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
@@ -17,7 +18,13 @@ import { QTableProps } from 'quasar';
 import { AddressForm } from 'components/form';
 import { useCustomerBranchForm } from './form';
 import { storeToRefs } from 'pinia';
-import { SaveButton, CancelButton, UndoButton } from 'components/button';
+import {
+  SaveButton,
+  CancelButton,
+  UndoButton,
+  EditButton,
+  DeleteButton,
+} from 'components/button';
 import {
   EmployerFormAbout,
   EmployerFormBusiness,
@@ -145,12 +152,38 @@ async function fetchList() {
   }
 }
 
+function openEmployerBranchForm(formType: 'create' | 'edit' | 'info') {
+  customerBranchFormState.value.dialogType = formType;
+  customerBranchFormState.value.dialogModal = true;
+}
+
 watch([inputSearch, currentStatus], async () => {
   await fetchList();
 });
 </script>
 
 <template>
+  <ButtonAddComponent
+    style="z-index: 999"
+    v-if="$route.name !== 'CustomerManagement'"
+  >
+    <q-fab-action
+      id="add-branch"
+      :style="{
+        color: 'white',
+        'background-color':
+          customerType === 'CORP'
+            ? 'hsla(var(--violet-11-hsl))'
+            : 'hsla(var(--pink-6-hsl))',
+      }"
+      @click="openEmployerBranchForm('create')"
+      padding="xs"
+      icon="mdi-office-building-outline"
+      :label="$t('formDialogTitleCreateSubBranch')"
+      external-label
+      label-position="left"
+    />
+  </ButtonAddComponent>
   <div
     class="row justify-between bordered-b surface-3 full-width q-px-md"
     style="z-index: 1"
@@ -468,7 +501,24 @@ watch([inputSearch, currentStatus], async () => {
             name: $t('customer.employee'),
           })
         "
-      />
+      >
+        <template #before>
+          <EditButton
+            icon-only
+            v-if="customerBranchFormState.dialogType === 'info'"
+            @click="customerBranchFormState.dialogType = 'edit'"
+          />
+          <DeleteButton
+            icon-only
+            v-if="customerBranchFormState.dialogType === 'info'"
+          />
+          <UndoButton
+            icon-only
+            v-if="customerBranchFormState.dialogType === 'edit'"
+            @click="customerBranchFormState.dialogType = 'info'"
+          />
+        </template>
+      </DialogHeader>
     </template>
 
     <div
@@ -486,12 +536,20 @@ watch([inputSearch, currentStatus], async () => {
             <SideMenu
               :menu="[
                 {
-                  name: $t('customer.form.group.basicInfo'),
+                  name: $t('customerBranch.tab.main'),
-                  anchor: 'form-basic-info-customer',
+                  anchor: 'employer-branch-main',
                 },
                 {
-                  name: $t('customer.form.group.branch'),
+                  name: $t('customerBranch.tab.address'),
-                  anchor: 'form-branch-customer-branch',
+                  anchor: 'employer-branch-address',
+                },
+                {
+                  name: $t('customerBranch.tab.business'),
+                  anchor: 'employer-branch-business',
+                },
+                {
+                  name: $t('customerBranch.tab.contact'),
+                  anchor: 'employer-branch-contact',
                 },
               ]"
               background="transparent"
@@ -499,15 +557,16 @@ watch([inputSearch, currentStatus], async () => {
                 background: 'hsla(var(--blue-6-hsl) / .2)',
                 foreground: 'var(--blue-6)',
               }"
-              scroll-element="#customer-form-content"
+              scroll-element="#employer-branch-content"
             />
           </div>
         </div>
 
         <div
+          id="employer-branch-content"
           class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm full-height scroll"
         >
-          <div class="row q-col-gutter-sm q-mb-sm">
+          <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-main">
             <div class="col-12 text-weight-bold text-body1 row items-center">
               <q-icon
                 flat
@@ -535,7 +594,7 @@ watch([inputSearch, currentStatus], async () => {
               customerBranchFormData.authorizedCapital
             "
           />
-          <div class="row q-col-gutter-sm q-mb-sm">
+          <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address">
             <div class="col-12 text-weight-bold text-body1 row items-center">
               <q-icon
                 flat
@@ -564,7 +623,10 @@ watch([inputSearch, currentStatus], async () => {
             :addressTitle="$t('form.address')"
             :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
           />
-          <div class="row q-col-gutter-sm q-mb-sm">
+          <div
+            class="row q-col-gutter-sm q-mb-sm"
+            id="employer-branch-business"
+          >
             <div class="col-12 text-weight-bold text-body1 row items-center">
               <q-icon
                 flat
@@ -579,7 +641,7 @@ watch([inputSearch, currentStatus], async () => {
           </div>
           <EmployerFormBusiness
             dense
-            class="q-mb-lg"
+            class="q-mb-xl"
             outlined
             prefix-id="employer-branch"
             :readonly="customerBranchFormState.dialogType === 'info'"
@@ -593,7 +655,7 @@ watch([inputSearch, currentStatus], async () => {
             v-model:pay-date="customerBranchFormData.payDate"
             v-model:wage-rate="customerBranchFormData.wageRate"
           />
-          <div class="row q-col-gutter-sm q-mb-sm">
+          <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-contact">
             <div class="col-12 text-weight-bold text-body1 row items-center">
               <q-icon
                 flat
@@ -617,8 +679,12 @@ watch([inputSearch, currentStatus], async () => {
     </div>
 
     <template #footer>
-      <CancelButton outlined class="q-ml-auto" />
+      <CancelButton outlined class="q-ml-auto" v-close-popup />
-      <SaveButton solid class="q-ml-sm" />
+      <SaveButton
+        solid
+        class="q-ml-sm"
+        v-if="customerBranchFormState.dialogType !== 'info'"
+      />
     </template>
   </DialogFormContainer>
 </template>