Refactoring code module 05_placement

src/modules/05_placement/components/PersonalDetail/Information/Qualification.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { PropType } from "vue";
+import type { Property } from "@/modules/05_placement/interface/index/Main";
+
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const route = useRoute();
+const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  data: {
+    type: Array as PropType<Property[]>,
+    default: [],
+  },
+  fetch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits(["update:statusEdit", "update:data"]);
+
+const edit = ref<boolean>(false); //การแก้ไขข้อมูล
+const onEdit = ref<boolean>(false); //การแก้ไขข้อมูล
+
+/**
+ * ฟังก์ชันบันทึกการแก้ไขข้อมูล
+ */
+const saveData = async () => {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(
+        config.API.placementPropertyId(route.params.personalId.toString()),
+        props.data
+      )
+      .then(async () => {
+        await props.fetch("Qualification");
+        await success($q, "แก้ไขข้อมูลสำเร็จ");
+        changeBtn();
+        onEdit.value = false;
+        edit.value = false;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+};
+
+/**
+ * ฟังก์ชันการแก้ไขข้อมูล
+ */
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const onCancel = async () => {
+  if (onEdit.value) {
+    dialogConfirm(
+      $q,
+      async () => {
+        emit("update:statusEdit", false);
+        await props.fetch("Qualification");
+        edit.value = false;
+        onEdit.value = false;
+      },
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`
+    );
+  } else {
+    edit.value = false;
+  }
+};
+
+/**
+ * ฟังก์ชันแก้ไขข้อมูล
+ */
+function checkEdit() {
+  onEdit.value = true;
+}
+
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
+onMounted(() => {
+  emit("update:statusEdit", false);
+});
+</script>
+<template>
+  <q-form ref="myform" greedy @submit.prevent @validation-success="saveData">
+    <div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
+      <HeaderTop
+        v-model:edit="edit"
+        header="การคัดกรองคุณสมบัติ"
+        icon="mdi-account-search"
+        :history="false"
+        :changeBtn="changeBtn"
+        :disable="statusEdit"
+        :cancel="onCancel"
+      />
+    </div>
+    <div class="row q-px-lg">
+      <div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
+        <q-checkbox
+          size="xs"
+          v-model="item.value"
+          :label="item.name"
+          keep-color
+          @update:modelValue="checkEdit"
+          color="gray-5"
+          :disable="!statusEdit"
+        />
+        <q-separator />
+      </div>
+    </div>
+  </q-form>
+</template>