feat: จัด layout inputform

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

@@ -9,6 +9,7 @@ import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import CardDetailsComponent from 'src/components/01_branch-management/CardDetailsComponent.vue';
 import DeatailsBranchDrawerComponent from 'src/components/01_branch-management/DeatailsBranchDrawerComponent.vue';
+import FormDialog from 'src/components/FormDialog.vue';
 
 import { BranchWithChildren, Branch } from 'src/stores/branch/types';
 
@@ -20,6 +21,7 @@ const modal = ref<boolean>(false);
 const showCurrentBaranch = ref<Branch | boolean | null>();
 
 const shape = ref<boolean>(false);
+const openBranchDrawer = ref<boolean>(true);
 
 const inputSelectBranch = ref<string>('ทั้งหมด');
 const inputFilter = ref<string>('คอลัมน์');
@@ -34,6 +36,39 @@ const optionsFilter: string[] = [
   'สถานะ',
 ];
 
+const formData = ref({
+  hqId: '',
+  branchId: '',
+  tel: '',
+  gender: '',
+  email: '',
+  addressL: {
+    address: '',
+    province: '',
+    district: '',
+    subDistrict: '',
+    zip: '',
+  },
+  addressEng: {
+    address: '',
+    province: '',
+    district: '',
+    subDistrict: '',
+    zip: '',
+  },
+});
+
+const selected = ref<string>('');
+
+const headOfficeCode = ref<string>('');
+const headOfficeName = ref<string>('');
+const taxIDNumber = ref<string>('');
+const nameHeadOfficeEN = ref<string>('');
+const inputPhone = ref<string>('');
+const inputIdLine = ref<string>('');
+const inputPhonHeadOffice = ref<string>('');
+const inputEmailHeadOffice = ref<string>('');
+
 const expanded = ref<string[]>([]);
 
 const rows: {
@@ -106,9 +141,11 @@ const branchStat = ref<
 
 const treeData = ref<BranchWithChildren[]>([]);
 
-onMounted(() => {
-  BranchStore.fetchById('9ff3521b-0669-4812-bb25-7f1961956c8e');
-  console.log(BranchStore.data);
+function openDialog() {
+  console.log('openDialog');
+
+  modal.value = true;
+}
 
 async function getTree() {
   const result = await branchStore.fetchList<BranchWithChildren>({
@@ -378,9 +415,169 @@ onMounted(async () => {
       </q-card-section>
     </q-card>
   </div>
+
+  <DeatailsBranchDrawerComponent
+    @open="openBranchDrawer = !openBranchDrawer"
+    :open="openBranchDrawer"
+    :data="showCurrentBaranch as Branch"
+  />
+
+  <FormDialog
+    v-model:modal="modal"
+    v-model:addressL="formData.addressL"
+    v-model:addressEng="formData.addressEng"
+    title="เพิ่มสำนักงานใหญ่"
+    addressLocaleTitle="ที่อยู่พนักงาน"
+    addressEngTitle="ที่อยู่พนักงาน ENG"
+  >
+    <template #top>
+      <div class="row full-width">
+        <div class="col">
+          <q-input
+            v-model="headOfficeCode"
+            dense
+            outlined
+            label="รหัสสำนักงานใหญ่"
+          />
+        </div>
+
+        <div class="col q-pl-md">
+          <q-input
+            v-model="taxIDNumber"
+            dense
+            outlined
+            label="เลขประจำตัวผู้เสียภาษี"
+          />
+        </div>
+      </div>
+
+      <div class="row full-width">
+        <div class="col">
+          <q-input
+            v-model="headOfficeName"
+            dense
+            outlined
+            label="ชื่อสำนักงานใหญ่"
+          />
+        </div>
+
+        <div class="col q-pl-md">
+          <q-input
+            v-model="nameHeadOfficeEN"
+            dense
+            outlined
+            label="ชื่อสำนักงานใหญ่ ภาษาอังกฤษ"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #append>
+      <AppBox class="q-mt-md" style="background: var(--gray-1)">
+        <div class="row q-mb-md">
+          <div class="col">
+            <q-input
+              v-model="inputPhone"
+              dense
+              outlined
+              label="เบอร์โทรศัพท์"
+            />
+          </div>
+          <div class="col q-pl-md">
+            <q-input v-model="inputIdLine" dense outlined label="id line" />
+          </div>
+        </div>
+
+        <div
+          style="
+            border: 2px dashed var(--gray-4);
+            border-radius: 10px;
+            background-image: linear-gradient(
+              180deg,
+              var(--indigo-0),
+              var(--sand-0)
+            );
+          "
+          class="q-pa-md column items-center justify-center full-width"
+        >
+          <div class="col q-pb-md" style="opacity: 0.3">
+            <q-btn
+              unelevated
+              class="bg-white"
+              style="border: 3px solid grey; border-radius: 6px"
+            >
+              <Icon icon="teenyicons:add-outline" width="20px" height="50px" />
+            </q-btn>
+          </div>
+          <div class="col">
+            <q-btn
+              style="
+                background: var(--blue-5);
+                color: var(--blue-0);
+                font-size: 12px;
+              "
+              unelevated
+              rounded
+              label="อัปโหลด QR Code"
+            ></q-btn>
+          </div>
+        </div>
+      </AppBox>
+    </template>
+
+    <template #midBottom>
+      <div>
+        <div class="row full-width q-pb-md">
+          <div class="col q-pr-md">
+            <q-input
+              v-model="inputPhonHeadOffice"
+              dense
+              outlined
+              label="เบอร์โทรศัพท์สำนักงานใหฐ่"
+            />
+          </div>
+          <div class="col">
+            <q-input
+              v-model="inputEmailHeadOffice"
+              dense
+              outlined
+              label="อีเมลติดต่อสำนักงานใหญ่ "
+            />
+          </div>
+        </div>
+
+        <div
+          class="column q-pa-sm full-width bordered"
+          style="border-radius: 6px"
+        >
+          <div class="col">location</div>
+          <div class="col self-center bg-image q-pa-md">
+            <q-btn
+              rounded
+              style="
+                background: var(--blue-5);
+                color: var(--blue-0);
+                font-size: 12px;
+              "
+              class="flex flrx-center"
+              label="location"
+            ></q-btn>
+          </div>
+        </div>
+      </div>
+    </template>
+  </FormDialog>
+
+  <q-btn label="test" @click="openBranchDrawer = !openBranchDrawer" />
 </template>
 
 <style scoped>
+.bg-image {
+  background-image: url(/map.png);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+
 .branch-main-variable-color {
   --_color-branch-tree-text: var(--blue-6-hsl);
   --_color-branch-title: var(--blue-10-hsl);