update

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

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type {
+  FormDataNewStructure,
+  FormNewStructureRef,
+  DataOption,
+  HistoryType,
+} from "@/modules/02_organization/interface/index/Main";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const store = useOrganizational();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("newStructure", { required: true });
+const status = defineModel<boolean>("status", { required: true });
+const type = defineModel<string>("type", { default: "NEW" });
+const props = defineProps({
+  fetchActive: {
+    type: Function,
+    require: true,
+    default: () => "fetchActive function",
+  },
+});
+
+const typeOp = ref<DataOption[]>([
+  {
+    id: "NEW",
+    name: "สร้างใหม่",
+  },
+  {
+    id: "ORG",
+    name: "ทำสำเนาเฉพาะโครงสร้าง",
+  },
+  {
+    id: "ORG_POSITION",
+    name: "ทำสำเนาโครงสร้างและตำแหน่ง",
+  },
+  {
+    id: "ORG_POSITION_PERSON",
+    name: "ทำสำเนาโครงสร้าง ตำแหน่ง และคนครอง",
+  },
+]);
+
+const orgRevisionNameRef = ref<Object | null>(null);
+const typeRef = ref<Object | null>(null);
+const orgRevisionIdRef = ref<Object | null>(null);
+
+const formData = reactive<FormDataNewStructure>({
+  orgRevisionId: "",
+  orgRevisionName: "",
+  typeDraft: "",
+});
+
+/**
+ * maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ
+ */
+const objectRef: FormNewStructureRef = {
+  orgRevisionName: orgRevisionNameRef,
+  type: typeRef,
+  orgRevisionId: orgRevisionIdRef,
+};
+
+/**
+ * ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
+ */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  }
+}
+
+/**
+ * ฟังชั่น บันทึก
+ */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .post(config.API.createOrganization, formData)
+        .then((res) => {
+          status.value = true;
+          store.typeOrganizational = "draft";
+          store.draftId = res.data.result.id;
+          store.statusView = "list";
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          props.fetchActive();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(async () => {
+          modal.value = await false;
+          await close();
+          await hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มโครงสร้าง",
+    store.draftId
+      ? "คุณมีแบบร่างอยู่หากคุณกดยืนยันระบบจะทำการลบแบบร่างเดิมและสร้างแบบร่างใหม่ ต้องการยืนยันการเพิ่มโครงสร้างนี้ใช่หรือไม่?"
+      : "ต้องการยืนยันการเพิ่มโครงสร้างนี้ใช่หรือไม่?"
+  );
+}
+
+/**
+ * ฟังชั่น ปิด popup
+ */
+function close() {
+  modal.value = false;
+  formData.orgRevisionId = "";
+  formData.orgRevisionName = "";
+  formData.typeDraft = "";
+}
+
+/**
+ * เรียกข้อมูล
+ */
+function fetchOrgRevision() {
+  showLoader();
+  http
+    .get(config.API.organizationHistoryNew)
+    .then(async (res) => {
+      const data = res.data.result.filter(
+        (e: HistoryType) => e.orgRevisionIsDraft === false
+      );
+      if (data) {
+        const currentStr = await data.find(
+          (x: any) => x.orgRevisionIsCurrent === true
+        );
+        formData.orgRevisionId = currentStr ? currentStr.orgRevisionId : null;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && (formData.typeDraft = type.value);
+    modal.value && type.value !== "NEW" && fetchOrgRevision();
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card style="min-width: 50vw">
+        <form @submit.prevent="validateForm">
+          <DialogHeader :tittle="`เพิ่มโครงสร้าง`" :close="close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-6">
+                <q-input
+                  v-model="formData.orgRevisionName"
+                  ref="orgRevisionNameRef"
+                  dense
+                  outlined
+                  for="#orgRevisionName"
+                  label="ชื่อโครงสร้าง"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อโครงสร้าง'}`]"
+                />
+              </div>
+              <div class="col-6">
+                <q-select
+                  for="#type"
+                  ref="typeRef"
+                  readonly
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.typeDraft"
+                  :options="typeOp"
+                  label="ประเภทการโคลน"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการโคลน'}`]"
+                  lazy-rules
+                />
+              </div>
+            </div>
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right" class="bg-white text-teal">
+            <q-btn type="submit" :label="`บันทึก`" color="public" />
+          </q-card-actions>
+        </form>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>