feat: add basic form customer

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

@@ -2,6 +2,7 @@
 import { ref, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
+import { useRoute, useRouter } from 'vue-router';
 import { getUserId, getRole } from 'src/services/keycloak';
 
 import { calculateAge, dateFormat } from 'src/utils/datetime';
@@ -22,13 +23,15 @@ import TooltipComponent from 'components/TooltipComponent.vue';
 import AddButton from 'components/AddButton.vue';
 import NoData from 'components/NoData.vue';
 import PaginationComponent from 'components/PaginationComponent.vue';
+import SideMenu from 'components/SideMenu.vue';
 import DialogForm from 'components/DialogForm.vue';
 
-import CustomerInfoComponent from './components/CustomerBranch.vue';
+import FormBasicInfo from './components/FormBasicInfo.vue';
 import { columnsCustomer, columnsEmployee } from './constant';
-import { useRoute, useRouter } from 'vue-router';
 import { useCustomerForm } from './form';
 import { storeToRefs } from 'pinia';
+import ProfileBanner from 'src/components/ProfileBanner.vue';
+import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -41,7 +44,8 @@ const userBranchStore = useMyBranchStore();
 const employeeStore = useEmployeeStore();
 const customerFormStore = useCustomerForm();
 
-const { state: customerFormState } = storeToRefs(customerFormStore);
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
 
 async function init() {
   utilsStore.currentTitle.title = 'customerManagement';
@@ -105,6 +109,7 @@ const maxPageCustomer = ref<number>(1);
 const currentPageEmployee = ref<number>(1);
 const maxPageEmployee = ref<number>(1);
 const pageSize = ref<number>(10);
+const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
 
 watch(() => route.name, init);
 watch(
@@ -373,6 +378,12 @@ async function openHistory(id: string) {
   employeeHistoryDialog.value = true;
 }
 
+async function editCustomerForm(id: string) {
+  await customerFormStore.assignFormData(id);
+  customerFormState.value.dialogType = 'edit';
+  customerFormState.value.dialogModal = true;
+}
+
 // TODO: When in employee form, if select address same as customer then auto fill
 </script>
 
@@ -383,7 +394,11 @@ async function openHistory(id: string) {
         v-if="currentTab === 'employer'"
         id="add-customer-legal-entity"
         style="color: white; background-color: hsla(var(--violet-11-hsl))"
-        @click=""
+        @click="
+          (customerFormState.dialogModal = true),
+            (customerFormState.dialogType = 'create'),
+            (customerFormData.customerType = 'CORP')
+        "
         padding="xs"
         icon="mdi-office-building"
         :label="$t('add') + ' ' + $t('customerLegalEntity')"
@@ -396,7 +411,11 @@ async function openHistory(id: string) {
         :label="$t('add') + ' ' + $t('customerNaturalPerson')"
         external-label
         label-position="left"
-        @click=""
+        @click="
+          (customerFormState.dialogModal = true),
+            (customerFormState.dialogType = 'create'),
+            (customerFormData.customerType = 'CORP')
+        "
         style="color: white; background-color: hsla(var(--teal-10-hsl))"
         padding="xs"
         icon="mdi-account-plus"
@@ -870,13 +889,7 @@ async function openHistory(id: string) {
                             dense
                             round
                             flat
-                            @click.stop="
-                              async () => {
-                                await fetchListOfOptionBranch();
-                                const { branch, ...payload } = props.row;
-                                currentCustomer = payload;
-                              }
-                            "
+                            @click.stop="editCustomerForm(props.row.id)"
                           />
 
                           <q-btn
@@ -1623,9 +1636,111 @@ async function openHistory(id: string) {
 
   <DialogForm
     v-model:modal="customerFormState.dialogModal"
-    :title="$t('')"
-    @submit="customerFormStore.submitForm"
-  ></DialogForm>
+    :title="$t('form.title.create', { name: 'Employer' })"
+    :show="
+      async () =>
+        await fetchListOfOptionBranch().then(() =>
+          customerFormStore.resetForm(),
+        )
+    "
+    :submit="
+      () => {
+        customerFormStore.submitForm();
+      }
+    "
+    :close="() => (customerFormState.dialogModal = false)"
+    no-footer
+  >
+    <div class="q-mx-lg q-mt-lg">
+      <ProfileBanner
+        active
+        v-model:cover-url="customerFormState.customerImageUrl"
+        :hide-fade="
+          customerFormState.customerImageUrl === '' ||
+          customerFormState.customerImageUrl === null
+        "
+        fallback-cover="/images/customer-legal-banner-bg.jpg"
+        :img="
+          customerFormState.customerImageUrl ||
+          '/images/customer-legal-avartar.png'
+        "
+        color="hsla(var(--pink-6-hsl)/1)"
+        bg-color="hsla(var(--pink-6-hsl)/0.15)"
+        @view="customerFormState.imageDialog = true"
+        @edit="dialogCustomerImageUpload?.browse()"
+      />
+    </div>
+    <div
+      class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
+      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">
+          <SideMenu
+            :menu="[
+              {
+                name: $t('customer.form.group.basicInfo'),
+                anchor: 'form-basic-info-customer',
+              },
+            ]"
+            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-pa-md"
+        id="customer-form-content"
+        style="height: 100%; max-height: 100%; overflow-y: auto"
+      >
+        <FormBasicInfo
+          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"
+        />
+      </div>
+    </div>
+
+    <!-- <q-btn -->
+    <!--   @click="customerFormState.saveMode = 'customer'" -->
+    <!--   type="submit" -->
+    <!--   label="Save" -->
+    <!-- /> -->
+    <!-- <q-btn -->
+    <!--   @click="customerFormState.saveMode = 'branch'" -->
+    <!--   type="submit" -->
+    <!--   label="Save" -->
+    <!-- /> -->
+  </DialogForm>
+
+  <ImageUploadDialog
+    ref="dialogCustomerImageUpload"
+    v-model:dialog-state="customerFormState.imageDialog"
+    v-model:file="customerFormData.image"
+    v-model:image-url="customerFormState.customerImageUrl"
+    :hidden-footer="
+      !customerFormData.image ||
+      !customerFormState.customerImageUrl ||
+      customerFormState.dialogType === 'edit'
+    "
+    fallback-url="/images/customer-legal-avartar.png"
+    clear-button
+    @save="() => {}"
+  ></ImageUploadDialog>
 </template>
 
 <style scoped>