feat: customer branch dialog UI + function submit + define emit

src/components/03_customer-management/CustomerInfoComponent.vue

@@ -10,10 +10,10 @@ const userCustomer = useCustomerStore();
 const { fetchListById } = userCustomer;
 
 const inputSearch = ref<string>('');
-const branch = ref<CustomerBranch[]>();
 
-const currentCustomerName = ref<string>('');
+const branch = defineModel<CustomerBranch[]>('branch');
-const currentCustomerUrlImage = ref<string>('');
+const currentCustomerName = defineModel<string>('currentCustomerName');
+const currentCustomerUrlImage = defineModel<string>('currentCustomerUrlImage');
 
 const prop = withDefaults(
   defineProps<{
@@ -25,6 +25,12 @@ const prop = withDefaults(
   },
 );
 
+defineEmits<{
+  (e: 'back'): void;
+  (e: 'viewDetail'): void;
+  (e: 'dialog'): void;
+}>();
+
 onMounted(async () => {
   const result = await fetchListById(prop.customerId);
   if (result) {
@@ -84,7 +90,7 @@ onMounted(async () => {
           unelevated
           :label="'+ ' + $t('formDialogTitleCreateSubBranch')"
           padding="4px 16px"
-          @click="console.log('add')"
+          @click="$emit('dialog')"
           style="background-color: var(--cyan-6); color: white"
         />
         <q-separator vertical inset class="q-mx-lg" />

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

@@ -38,7 +38,8 @@ import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormE
 import { dialog } from 'src/stores/utils';
 
 const userCustomer = useCustomerStore();
-const { create, getStatsCustomer, fetchList, editById } = userCustomer;
+const { create, getStatsCustomer, fetchList, editById, fetchListById } =
+  userCustomer;
 const formData = ref<CustomerCreate>({
   status: 'CREATED',
   customerType: 'CORP',
@@ -117,8 +118,12 @@ const infoDrawerEdit = ref(false);
 const isMainPage = ref<boolean>(true);
 const statsCustomerType = ref<CustomerStats>();
 const currentCustomerId = ref<string>('');
-
+const dialogInputCustomerBranchForm = ref<boolean>(false);
 const currentCustomer = ref<Customer>();
+const branch = ref<CustomerBranch[]>();
+
+const currentCustomerName = ref<string>('');
+const currentCustomerUrlImage = ref<string>('');
 
 const inputFile = (() => {
   const element = document.createElement('input');
@@ -295,6 +300,17 @@ async function onSubmit() {
   if (resultList) listCustomer.value = resultList.result;
 }
 
+async function onSubmitCustomerBranch() {
+  dialogInputCustomerBranchForm.value = false;
+  clearForm();
+  const result = await fetchListById(currentCustomerId.value);
+  if (result) {
+    currentCustomerName.value = result.customerName;
+    currentCustomerUrlImage.value = result.imageUrl;
+    branch.value = result.branch;
+  }
+}
+
 async function onSubmitEdit(id: string) {
   if (!formData.value) return;
 
@@ -449,6 +465,7 @@ onMounted(async () => {
             <UsersDetailCardComponent
               v-for="i in listCustomer"
               :key="i.id"
+              class="hover-card"
               :color="i.customerType === 'CORP' ? 'purple' : 'green'"
               :metadata="{ id: '1', disabled: false }"
               :badge="i.branch"
@@ -551,6 +568,10 @@ onMounted(async () => {
       <CustomerInfoComponent
         :customer-id="currentCustomerId"
         @back="isMainPage = true"
+        @dialog="dialogInputCustomerBranchForm = true"
+        v-model:branch="branch"
+        v-model:currentCustomerName="currentCustomerName"
+        v-model:currentCustomerUrlImage="currentCustomerUrlImage"
       />
     </div>
   </div>
@@ -806,6 +827,132 @@ onMounted(async () => {
     </template>
   </FormDialog>
 
+  <FormDialog
+    v-model:modal="dialogInputCustomerBranchForm"
+    :title="$t('formDialogTitleCreateSubBranch')"
+    :submit="
+      () => {
+        onSubmitCustomerBranch();
+      }
+    "
+    :close="() => {}"
+  >
+    <template #address>
+      <!-- <FormCustomerBranch separator dense outlined /> -->
+
+      <div class="col-3 app-text-muted">
+        • {{ $t('formDialogCustomerBranch') }}
+      </div>
+
+      <div class="col-12 row bordered q-pt-none rounded">
+        <TabComponent
+          v-model:customer-branch="formData.customerBranch"
+          v-model:tab-index="indexTab"
+        >
+          <template #address>
+            <FormAddress
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              v-model:address="formData.customerBranch[indexTab].address"
+              v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
+              v-model:province-id="formData.customerBranch[indexTab].provinceId"
+              v-model:district-id="formData.customerBranch[indexTab].districtId"
+              v-model:sub-district-id="
+                formData.customerBranch[indexTab].subDistrictId
+              "
+              v-model:zip-code="formData.customerBranch[indexTab].zipCode"
+              separator
+              dense
+              outlined
+            />
+          </template>
+
+          <template #businessInformation>
+            <FormBusiness
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              v-model:employment-office="
+                formData.customerBranch[indexTab].employmentOffice
+              "
+              v-model:bussiness-type="
+                formData.customerBranch[indexTab].bussinessType
+              "
+              v-model:bussiness-type-en="
+                formData.customerBranch[indexTab].bussinessTypeEN
+              "
+              v-model:job-position="
+                formData.customerBranch[indexTab].jobPosition
+              "
+              v-model:job-position-en="
+                formData.customerBranch[indexTab].jobPositionEN
+              "
+              v-model:job-description="
+                formData.customerBranch[indexTab].jobDescription
+              "
+              v-model:sale-employee="
+                formData.customerBranch[indexTab].saleEmployee
+              "
+              v-model:pay-date="formData.customerBranch[indexTab].payDate"
+              v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
+              separator
+              dense
+              outlined
+            />
+          </template>
+          <template #about>
+            <AboutComponent
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              :type-customer="customerType"
+              v-model:tax-no="formData.customerBranch[indexTab].taxNo"
+              v-model:customer-name="formData.customerBranch[indexTab].name"
+              v-model:customer-english-name="
+                formData.customerBranch[indexTab].nameEN
+              "
+              v-model:authorized-capital="
+                formData.customerBranch[indexTab].authorizedCapital
+              "
+              v-model:register-name="
+                formData.customerBranch[indexTab].registerName
+              "
+              v-model:register-date="
+                formData.customerBranch[indexTab].registerDate
+              "
+              dense
+              outlined
+              bordered
+              separator
+            />
+          </template>
+          <template #contactInformation>
+            <ContactComponent
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              v-model:mail="formData.customerBranch[indexTab].email"
+              v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
+              dense
+              outlined
+              separator
+            />
+          </template>
+          <template #otherDocuments>
+            <OtherInformation
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              dense
+              outlined
+            />
+          </template>
+        </TabComponent>
+      </div>
+    </template>
+  </FormDialog>
+
   <DrawerInfo
     title="บริษัททดสอบ"
     v-model:drawer-open="infoDrawer"
@@ -1001,5 +1148,12 @@ onMounted(async () => {
 .customer-row {
   display: grid;
   gap: var(--size-6);
+  transition: 0.3s ease-in-out;
+}
+
+.hover-card:hover {
+  cursor: pointer;
+  border-radius: 10px;
+  box-shadow: var(--shadow-3);
 }
 </style>