ปรับ UI โครงสร้าง

src/modules/02_organizationalNew/components/DialogNewStructure.vue

@@ -10,6 +10,7 @@ import type {
   FormDataNewStructure,
   FormNewStructureRef,
   DataOption,
+  HistoryType,
 } from "@/modules/02_organizationalNew/interface/index/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -22,6 +23,7 @@ const { dialogConfirm, showLoader, success, hideLoader, messageError } =
 
 const modal = defineModel<boolean>("newStructure", { required: true });
 const status = defineModel<boolean>("status", { required: true });
+const type = defineModel<string>("type", { default: "NEW" });
 
 const typeOp = ref<DataOption[]>([
   {
@@ -41,19 +43,25 @@ const typeOp = ref<DataOption[]>([
     name: "ทำสำเนาโครงสร้าง ตำแหน่ง และคนครอง",
   },
 ]);
+const orgRevisionId = ref<string>("");
+const orgRevisionOpMain = ref<DataOption[]>([]);
+const orgRevisionOp = ref<DataOption[]>([]);
 
 const orgRevisionNameRef = ref<Object | null>(null);
 const typeRef = ref<Object | null>(null);
+const orgRevisionIdRef = ref<Object | null>(null);
 
 const formData = reactive<FormDataNewStructure>({
+  orgRevisionId: "",
   orgRevisionName: "",
-  type: "",
+  typeDraft: "",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectRef: FormNewStructureRef = {
   orgRevisionName: orgRevisionNameRef,
   type: typeRef,
+  orgRevisionId: orgRevisionIdRef,
 };
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
@@ -77,31 +85,75 @@ function validateForm() {
 /** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm($q, () => {
-    // http
-    //   .post(config.API.createOrganization, formData)
-    //   .then(() => {
-    status.value = true;
-    store.typeOrganizational = "draft";
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    // })
-    // .catch((err) => {
-    //   messageError($q, err);
-    // })
-    // .finally(() => {});
-
-    console.log(formData);
+    showLoader();
+    http
+      .post(config.API.createOrganization, formData)
+      .then(() => {
+        status.value = true;
+        store.typeOrganizational = "draft";
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(async () => {
+        modal.value = await false;
+        await close();
+        await hideLoader();
+      });
   });
-  modal.value = false;
 }
 
 function close() {
   modal.value = false;
+  formData.orgRevisionId = "";
+  formData.orgRevisionName = "";
+  formData.typeDraft = "";
+}
+
+async function fetchOrgRevision() {
+  showLoader();
+  await http
+    .get(config.API.organizationHistoryNew)
+    .then((res) => {
+      const data = res.data.result.filter(
+        (e: HistoryType) => e.orgRevisionIsDraft === false
+      );
+      if (data) {
+        const listOption = data.map((e: HistoryType) => ({
+          id: e.orgRevisionId,
+          name: e.orgRevisionName,
+        }));
+        orgRevisionOpMain.value = listOption;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function filterSelector(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "orgRevisionId":
+      update(() => {
+        orgRevisionOp.value = orgRevisionOpMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
 }
 
 watch(
   () => modal.value,
   () => {
-    modal.value && !status.value && (formData.type = "NEW");
+    modal.value && (formData.typeDraft = type.value);
+    modal.value && type.value !== "NEW" && fetchOrgRevision();
   }
 );
 </script>
@@ -131,7 +183,7 @@ watch(
                 <q-select
                   for="#type"
                   ref="typeRef"
-                  :readonly="!status"
+                  readonly
                   dense
                   hide-bottom-space
                   outlined
@@ -139,13 +191,43 @@ watch(
                   option-value="id"
                   emit-value
                   map-options
-                  v-model="formData.type"
+                  v-model="formData.typeDraft"
                   :options="typeOp"
                   label="ประเภทการโคลน"
                   :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการโคลน'}`]"
                   lazy-rules
                 />
               </div>
+              <div class="col-6" v-if="type !== 'NEW'">
+                <q-select
+                  for="#orgRevisionId"
+                  ref="orgRevisionIdRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.orgRevisionId"
+                  :options="orgRevisionOp"
+                  label="เลือกโครงสร้าง"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกโครงการสร้าง'}`]"
+                  lazy-rules
+                  use-input
+                  @filter="(inputValue:any,
+                  doneFn:Function) => filterSelector(inputValue, doneFn,'orgRevisionId'
+                  ) "
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey-5">
+                        ไม่พบข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
             </div>
           </q-card-section>
           <q-separator />