refactor: add virtual

src/pages/01_branch-management/MainPage.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia';
 import { ref, onMounted, computed, watch } from 'vue';
 import { Icon } from '@iconify/vue';
 import { BranchContact } from 'stores/branch-contact/types';
-import { useQuasar } from 'quasar';
+import { colors, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import type { QTableProps } from 'quasar';
 
@@ -16,6 +16,7 @@ import {
   BankBook,
 } from 'stores/branch/types';
 
+import ItemCard from 'src/components/ItemCard.vue';
 import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
 import EmptyAddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
@@ -49,7 +50,19 @@ const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 const $q = useQuasar();
 const { t } = useI18n();
 const utilsStore = useUtilsStore();
-
+const modelCreateTypeBranch = ref<boolean>(false);
+const typeBranchItem = [
+  {
+    icon: 'mdi-home-group',
+    text: 'Virtual Branch',
+    color: '#03A9F4',
+  },
+  {
+    icon: 'mdi-home-group',
+    text: 'Branch',
+    color: 'var(--purple-6)',
+  },
+];
 const holdDialog = ref(false);
 const isSubCreate = ref(false);
 const columns = [
@@ -292,6 +305,7 @@ const defaultFormData = {
   provinceId: '',
   lineId: '',
   webUrl: '',
+  virtual: false,
 };
 
 const formDialogRef = ref();
@@ -359,6 +373,7 @@ async function fetchBranchById(id: string) {
       lineId: res.lineId,
       status: res.status,
       webUrl: res.webUrl,
+      virtual: res.virtual,
     };
   }
 }
@@ -392,13 +407,17 @@ async function undo() {
   formData.value = prevFormData.value;
 }
 
+watch(modal, () => {
+  if (!modal.value) {
+    clearData();
+  }
+});
+
 function triggerCreate(
   type: 'headOffice' | 'subBranch',
   id?: string,
   code?: string,
 ) {
-  clearData();
-
   formTypeBranch.value = type;
 
   if (type === 'headOffice') {
@@ -606,15 +625,15 @@ async function onSubmit() {
       fieldSelectedBranch.value.value = '';
       inputSearch.value = '';
       currentHq.value = {
-        id: currentRecord.id,
-        code: currentRecord.code,
+        id: currentRecord?.id || '',
+        code: currentRecord?.code || '',
       };
       beforeBranch.value = {
         id: '',
         code: '',
       };
       expandedTree.value = [];
-      expandedTree.value.push(currentRecord.id);
+      expandedTree.value.push(currentRecord?.id || '');
     } else {
       dialog({
         color: 'info',
@@ -786,7 +805,11 @@ watch(currentHq, () => {
             <EmptyAddButton
               label="general.add"
               :i18nArgs="{ text: $t('branch.form.title.branchLabel') }"
-              @trigger="() => triggerCreate('headOffice')"
+              @trigger="
+                () => {
+                  triggerCreate('headOffice');
+                }
+              "
             />
           </div>
         </div>
@@ -820,11 +843,7 @@ watch(currentHq, () => {
                         if (!currentHq.id) {
                           triggerCreate('headOffice');
                         } else {
-                          triggerCreate(
-                            'subBranch',
-                            currentHq.id,
-                            currentHq.code,
-                          );
+                          modelCreateTypeBranch = true;
                         }
                       }
                     "
@@ -886,7 +905,16 @@ watch(currentHq, () => {
                           }
                         }
                       "
-                      @create="(v) => triggerCreate('subBranch', v.id, v.code)"
+                      @create="
+                        (v) => {
+                          currentHq.id = v.id;
+                          currentHq.code = v.code;
+
+                          modelCreateTypeBranch = true;
+                        }
+
+                        //     triggerCreate(v.virtual, 'subBranch', v.id, v.code)
+                      "
                       @view="
                         (v) => {
                           if (v.isHeadOffice) {
@@ -2010,6 +2038,40 @@ watch(currentHq, () => {
       </div>
     </template>
   </ImageUploadDialog>
+
+  <DialogForm
+    v-model:modal="modelCreateTypeBranch"
+    :title="$t('general.typeBranch')"
+    hide-footer
+    no-app-box
+    width="60vw"
+    height="300px"
+    :close="() => (modelCreateTypeBranch = false)"
+  >
+    <div class="full-height row q-pa-md">
+      <ItemCard
+        v-for="i in typeBranchItem"
+        class="col q-mx-sm -full-height"
+        :key="i.text"
+        :icon="i.icon"
+        :text="i.text"
+        :color="i.color"
+        @trigger="
+          () => {
+            modelCreateTypeBranch = false;
+
+            if (i.text === 'Virtual Branch') {
+              formData.virtual = true;
+            } else {
+              formData.virtual = false;
+            }
+
+            triggerCreate('subBranch', currentHq.id, currentHq.code);
+          }
+        "
+      />
+    </div>
+  </DialogForm>
 </template>
 
 <style scoped>