จัดโค้ดข้อมูลพื้นฐาน

src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue

@@ -5,6 +5,9 @@ import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 
+/**
+ * รวมตัวแปร
+ */
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -22,23 +25,36 @@ const myForm = ref<QForm | null>(null); //form data input
 const edit = ref<boolean>(false);
 const channel = ref<string>("");
 
+/**
+ * เรียกข้อมูลจากรายการ
+ */
 onMounted(async () => {});
-// เรียกข้อมูลของรอบการเสนอขอ
 const fetchData = async () => {};
 
+/**
+ * ลบข้อมูล
+ * @param id ไอดีของข้อมูลที่ต้องการลบ
+ */
 const deleteData = async (id: string) => {};
 
-// แก้ไขข้อมูล
+/* บันทึกข้อมูล**/
-
-// คลิกบันทึก
-const checkSave = () => {};
-// บันทึกข้อมูล
 const SaveData = async () => {};
-// เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ
+const checkSave = () => {};
+
+/**
+ * เพิ่มข้อมูล
+ */
 const addData = async () => {};
-// แก้ไขข้อมูล
+
+/**
+ * แก้ไขข้อมูล
+ * @param id ช่องทาง
+ */
 const editData = async (id: string) => {};
 
+/**
+ * ย้อนกลับหน้ารายการ
+ */
 const clickBack = () => {
   router.push(`/discipline/channel`);
 };
@@ -81,12 +97,7 @@ const clickBack = () => {
           <q-separator />
           <div class="row col-12 q-pa-sm">
             <q-space />
-            <q-btn
+            <q-btn label="บันทึก" color="public" @click="checkSave"> </q-btn>
-              label="บันทึก"
-              color="public"
-              @click="checkSave"
-            >
-            </q-btn>
           </div>
         </q-card>
       </div>

src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue

@@ -5,15 +5,17 @@ import router from "@/router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useDisciplineChannelDataStore } from "@/modules/11_discipline/store/ChannelStore";
-
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+const dataStore = useDisciplineChannelDataStore();
 const mixin = useCounterMixin();
 const { dialogRemove } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
-// ค้นหาในตาราง
+/**
+ * ค้นหาในตาราง
+ */
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 const resetFilter = () => {
@@ -22,7 +24,10 @@ const resetFilter = () => {
     filterRef.value.focus();
   }
 };
-const dataStore = useDisciplineChannelDataStore();
+
+/**
+ *pagination ของตาราง
+ */
 const pagination = ref({
   // sortBy: "desc",
   descending: false,
@@ -30,10 +35,17 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+/**
+ * clickไปหน้าเพิ่มchanel
+ */
 const clickAdd = () => {
   router.push(`/discipline/channel/add`);
 };
 
+/**
+ * ลบข้อมู,
+ * @param id ไอดีของข้อมูล
+ */
 const clickDelete = (id: string) => {
   dialogRemove(
     $q,
@@ -46,6 +58,9 @@ const clickDelete = (id: string) => {
   );
 };
 
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
 onMounted(() => {
   // get ข้อมูลแล้วโยนใส่ store
   dataStore.fetchData([

src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue

@@ -1,34 +1,34 @@
 <script setup lang="ts">
-import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue"
+import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 
 const mixin = useCounterMixin();
-const {
+const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  success,
-} = mixin;
-
 const router = useRouter();
 
-// บันทึกข้อมูล
+/** บันทึกข้อมูลเเละ route กลับหน้าหลัก */
 const onSubmit = async () => {
   // post
-  router.push(`/discipline/director`)
+  router.push(`/discipline/director`);
 };
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle col-12 row items-center">
-      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
+      <q-btn
-        @click="$router.push(`/discipline/director`)" />
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="$router.push(`/discipline/director`)"
+      />
       เพิ่มรายชื่อกรรมการ
     </div>
 
     <Form :on-submit="onSubmit" />
-
   </div>
 </template>

src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
 import { onMounted, reactive } from "vue";
-import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue"
+import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue";
 import type { FormData } from "@/modules/11_discipline/interface/request/director";
 import { useCounterMixin } from "@/stores/mixin";
-const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  success,
-} = mixin;
 
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
+
+/**เมื่อเริ่มโหลดหน้า
+ * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
+ */
 onMounted(() => {
-  fetchData()
+  fetchData();
 });
 
-// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+/**
+ * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+ */
 const data = reactive<FormData>({
   prefix: "",
   firstname: "",
@@ -25,32 +25,45 @@ const data = reactive<FormData>({
   phone: "",
   responsibilities: "",
   email: "",
-})
+});
+
+/**
+ * ดึงค่าจาก api
+ */
 const fetchData = async () => {
-  // ดึงค่าจาก api
+  data.prefix = "นาง";
-  data.prefix = "นาง"
+  data.firstname = "เกสินี";
-  data.firstname = "เกสินี"
+  data.lastname = "เจียรสุมัย";
-  data.lastname = "เจียรสุมัย"
+  data.position = "ครู";
-  data.position = "ครู"
+  data.phone = "0800808080";
-  data.phone = "0800808080"
+  data.responsibilities = "ประธาน";
-  data.responsibilities = "ประธาน"
+  data.email = "e@email.com";
-  data.email = "e@email.com"
 };
 
-// แก้ไขข้อมูล
+/**
+ * บันทึกข้อมูลที่เเก้ไข
+ * @param id ระบุ บุคคล
+ */
 const onSubmit = async (id: string) => {
-   // put
+  // put
 };
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle col-12 row items-center">
-      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
+      <q-btn
-        @click="$router.push(`/discipline/director`)" />
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="$router.push(`/discipline/director`)"
+      />
       แก้ไขรายชื่อกรรมการ
     </div>
 
     <Form @onSubmit="onSubmit" :data="data" />
-
   </div>
 </template>

src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue

@@ -5,7 +5,9 @@ import type {
   FormRef,
 } from "@/modules/11_discipline/interface/request/director";
 
-// รับ props มาจาก page หลัก
+/**
+ * รับ props มาจาก page หลัก
+ */
 const props = defineProps({
   data: {
     type: Object,
@@ -17,11 +19,16 @@ const props = defineProps({
   },
 });
 
-// ข้อมูลรหัสบัตรประชาชน
+/**
+ * ข้อมูลรหัสบัตรประชาชน
+ */
+//
 const idCard = ref<string>("");
 const idCardRef = ref<any>(null);
 
-// ข้อมูลทั้งก้อน form
+/**
+ * ข้อมูลทั้งก้อน form
+ */
 const formData = reactive<FormData>({
   prefix: "",
   firstname: "",
@@ -29,8 +36,14 @@ const formData = reactive<FormData>({
   position: "",
   phone: "",
   email: "",
+  responsibilities: "",
 });
 
+/**
+ * เช็คข้อมูลจาก props
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
 watch(props.data, async () => {
   // console.log("data==>", props.data)
   formData.prefix = props.data.prefix;
@@ -41,14 +54,18 @@ watch(props.data, async () => {
   formData.email = props.data.email;
 });
 
-// เพิ่มบุคลากร
+/**
+ * เพิ่มบุคลากร
+ */
 function addEmployee() {
   if (idCardRef.value.validate()) {
     console.log("idCard===>", idCard.value);
   }
 }
 
-// ตรวจสอบข้อมูลก่อนส่งไปยัง api
+/**
+ * ตรวจสอบข้อมูลก่อนส่งไปยัง api
+ */
 const prefixRef = ref<object | null>(null);
 const firstnameRef = ref<object | null>(null);
 const lastnameRef = ref<object | null>(null);
@@ -64,6 +81,7 @@ const formRef: FormRef = {
   email: emailRef,
 };
 
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
   const hasError = [];
   for (const key in formRef) {
@@ -81,13 +99,19 @@ function onValidate() {
 }
 </script>
 <template>
-<form @submit.prevent.stop="onValidate">
+  <form @submit.prevent.stop="onValidate">
     <q-card bordered>
       <div class="col-12 row q-pa-md">
         <div class="row q-col-gutter-md">
           <div class="row col-12" v-if="data === null">
-            <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
+            <q-card
-              <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+              bordered
+              class="row col-12"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+              >
                 ค้นหาบุคคลากรที่อยู่ในระบบ
               </div>
               <div class="col-12"><q-separator /></div>
@@ -192,18 +216,18 @@ function onValidate() {
           </div>
         </div>
       </div>
-    <q-separator />
+      <q-separator />
-    <div class="row col-12 q-pa-sm">
+      <div class="row col-12 q-pa-sm">
-      <q-space />
+        <q-space />
-      <q-btn
+        <q-btn
-        for="ButtonOnSubmit"
+          for="ButtonOnSubmit"
-        id="formSubmit"
+          id="formSubmit"
-        color="secondary"
+          color="secondary"
-        label="บันทึก"
+          label="บันทึก"
-        type="submit"
+          type="submit"
-        ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+          ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-      >
+        >
-    </div>
+      </div>
-  </q-card>
+    </q-card>
-</form>
+  </form>
 </template>

src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue

@@ -4,22 +4,19 @@ import type { QTableProps } from "quasar";
 import router from "@/router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import { useDisciplineDirectorDataStore } from '@/modules/11_discipline/store/DirectorStore'
+import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
-
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 const $q = useQuasar();
-const dataStore = useDisciplineDirectorDataStore()
+const dataStore = useDisciplineDirectorDataStore();
 const mixin = useCounterMixin();
-const {
+const { messageError, showLoader, hideLoader, dialogConfirm, dialogRemove } =
-  messageError,
+  mixin;
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogRemove,
-} = mixin;
 
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
 onMounted(() => {
   // get ข้อมูลแล้วโยนใส่ store
   dataStore.fetchData([
@@ -35,10 +32,12 @@ onMounted(() => {
       email: "g@gmail.com",
       phone: "0614565145",
     },
-  ])
+  ]);
 });
 
-// ค้นหาในตาราง
+/**
+ * ค้นหาในตาราง
+ */
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 function resetFilter() {
@@ -46,9 +45,11 @@ function resetFilter() {
   if (filterRef.value) {
     filterRef.value.focus();
   }
-};
+}
 
-// กำหนด pagination
+/**
+ *pagination ของตาราง
+ */
 const pagination = ref({
   // sortBy: "desc",
   descending: false,
@@ -56,84 +57,138 @@ const pagination = ref({
   rowsPerPage: 25,
 });
 
+/**
+ * ลบข้อมูล
+ * @param id ของกรรมการแต่ละบุคคล
+ */
 function clickDelete(id: string) {
-  dialogRemove(
+  dialogRemove($q, async () => {
-    $q,
+    // ยืนยันการลบข้อมูล
-    async () => {
+    //   showLoader();
-      // ยืนยันการลบข้อมูล
+    //   await http
-      //   showLoader();
+    //     .delete(config.API.periodExamId(id))
-      //   await http
+    //     .then((res) => {
-      //     .delete(config.API.periodExamId(id))
+    //       success($q, "ลบข้อมูลสำเร็จ");
-      //     .then((res) => {
+    //     })
-      //       success($q, "ลบข้อมูลสำเร็จ");
+    //     .catch((e) => {
-      //     })
+    //       messageError($q, e);
-      //     .catch((e) => {
+    //     })
-      //       messageError($q, e);
+    //     .finally(async () => {
-      //     })
+    //       hideLoader();
-      //     .finally(async () => {
+    //     });
-      //       hideLoader();
+  });
-      //     });
+}
-    }
-  );
-};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายการชื่อกรรมการ
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-      <div class="row col-12 q-col-gutter-sm  q-mb-sm">
+    <div class="row col-12 q-col-gutter-sm q-mb-sm">
-        <div>
+      <div>
-          <q-btn @click="$router.push(`/discipline/director/add`)" size="12px" flat round color="add" icon="mdi-plus">
+        <q-btn
-            <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
+          @click="$router.push(`/discipline/director/add`)"
-          </q-btn>
+          size="12px"
-        </div>
+          flat
-        <q-space />
+          round
-
+          color="add"
-        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+          icon="mdi-plus"
-          debounce="300" placeholder="ค้นหา">
+        >
-          <template v-slot:append>
+          <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
-            <q-icon v-if="filterKeyword == ''" name="search" />
+        </q-btn>
-            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-          </template>
-        </q-input>
-
-        <q-select v-model="dataStore.visibleColumns" multiple outlined dense options-dense
-          :display-value="$q.lang.table.columns" emit-value map-options :options="dataStore.columns" option-value="name"
-          options-cover style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2" />
       </div>
+      <q-space />
 
-      <div class="col-12">
+      <q-input
-        <d-table :columns="dataStore.columns" :rows="dataStore.rows" :filter="filterKeyword" row-key="tb-list" flat
+        class="col-xs-12 col-sm-3 col-md-2"
-          bordered :paging="true" dense v-model:pagination="pagination" :visible-columns="dataStore.visibleColumns">
+        standout
-          <template v-slot:header="props">
+        dense
-            <q-tr :props="props">
+        v-model="filterKeyword"
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+        ref="filterRef"
-                <span class="text-weight-medium">{{ col.label }}</span>
+        outlined
-              </q-th>
+        debounce="300"
-              <q-th auto-width />
+        placeholder="ค้นหา"
-            </q-tr>
+      >
-          </template>
+        <template v-slot:append>
-          <template v-slot:body="props">
+          <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-tr :props="props" class="cursor-pointer">
+          <q-icon
-              <q-td v-for="col in props.cols" :key="col.name" :props="props"
+            v-if="filterKeyword !== ''"
-                @click="$router.push(`/discipline/director/${props.row.no}`)">
+            name="clear"
-                <div v-if="col.name == 'no'">
+            class="cursor-pointer"
-                  {{ props.rowIndex + 1 }}
+            @click="resetFilter"
-                </div>
+          />
-                <div v-else>
+        </template>
-                  {{ col.value }}
+      </q-input>
-                </div>
-              </q-td>
-              <q-td auto-width>
-                <q-btn dense size="12px" flat round color="red" @click="clickDelete(props.row.id)" icon="mdi-delete">
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
 
-      </div>
+      <q-select
+        v-model="dataStore.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="dataStore.columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+        class="col-xs-12 col-sm-3 col-md-2"
+      />
+    </div>
+
+    <div class="col-12">
+      <d-table
+        :columns="dataStore.columns"
+        :rows="dataStore.rows"
+        :filter="filterKeyword"
+        row-key="tb-list"
+        flat
+        bordered
+        :paging="true"
+        dense
+        v-model:pagination="pagination"
+        :visible-columns="dataStore.visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="$router.push(`/discipline/director/${props.row.no}`)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
   </q-card>
 </template>