From 209f0a5fa7a93f9801e77f44f34b7f1ca664428d Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 4 Aug 2023 17:56:16 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=AD=20Api=20insigni?=
 =?UTF-8?q?a?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/07_insignia/api.insignia.ts           |  10 +-
 .../components/1_Proposals/addProposals.vue   | 423 ++++++++++++------
 .../components/1_Proposals/listProposals.vue  |  79 +++-
 3 files changed, 367 insertions(+), 145 deletions(-)

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index 9a2b93e20..f17086d3f 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -2,5 +2,11 @@
  * api เครื่องราชอิสริยาภรณ์
  */
 import env from "../index";
-
-export default {};
+const insignia = `${env.API_URI}/insignia`;
+export default {
+  getRoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  listRoundInsignia: (type: string) => `${insignia}/period/${type}`,
+  editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  RoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  docRoundInsignia: (id: string) => `${insignia}/period/${id}`,
+};
diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index 63ee7bb6a..ba6c3ec5c 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -13,163 +13,304 @@
       />
       <div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
     </div>
-    <div class="col-12">
-      <q-card bordered>
-        <div class="col-12 row q-col-gutter-md q-pa-md">
-          <div class="col-xs-12 col-sm-12 row">
-            <q-separator />
-            <div class="col-12 row q-pa-sm q-col-gutter-sm">
-              <q-input
-                class="col-10"
-                dense
-                outlined
-                v-model="roundInsig"
-                label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
-              />
-              <q-input
-                class="col-2"
-                dense
-                outlined
-                v-model="year"
-                label="ปีที่เสนอ"
-              />
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateStart"
-                :locale="'th'"
-                autoApply
-                class="col-xs-12 col-sm-5"
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="col-xs-12 col-sm-5"
-                    :model-value="
-                      dateStart != null ? date2Thai(dateStart) : null
-                    "
-                    :label="`${'วันเริ่มต้น'}`"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateEnd"
-                class="col-xs-12 col-sm-5"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="col-xs-12 col-sm-4"
-                    :model-value="dateEnd != null ? date2Thai(dateEnd) : null"
-                    :label="`${'วันสิ้นสุด'}`"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
-                    ]"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+    <q-form ref="myForm">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12 row">
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-10"
+                  dense
+                  outlined
+                  v-model="roundInsig"
+                  label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
+                />
+                <q-input
+                  class="col-2"
+                  dense
+                  outlined
+                  v-model="year"
+                  label="ปีที่เสนอ"
+                />
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateStart"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-5"
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="col-xs-12 col-sm-5"
+                      :model-value="
+                        dateStart != null ? date2Thai(dateStart) : null
+                      "
+                      :label="`${'วันเริ่มต้น'}`"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateEnd"
+                  class="col-xs-12 col-sm-5"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="col-xs-12 col-sm-4"
+                      :model-value="dateEnd != null ? date2Thai(dateEnd) : null"
+                      :label="`${'วันสิ้นสุด'}`"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
+                      ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
 
-              <q-input
-                class="col-xs-12 col-sm-2"
-                dense
-                outlined
-                v-model="datelast"
-                label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
-              />
-              <q-file
-                class="col-xs-12 col-sm-10"
-                outlined
-                dense
-                v-model="files"
-                label="อัปโหลดเอกสารประกอบ"
-                hide-bottom-space
-                lazy-rules
-                :rules="[
-                  (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
-                ]"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
+                <q-input
+                  class="col-xs-12 col-sm-2"
+                  dense
+                  outlined
+                  v-model="datelast"
+                  label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
+                />
+                <q-file
+                  class="col-xs-12 col-sm-10"
+                  outlined
+                  dense
+                  v-model="files"
+                  @added="fileUploadDoc"
+                  label="อัปโหลดเอกสารประกอบ"
+                  hide-bottom-space
+                  lazy-rules
+                  :rules="[
+                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
             </div>
           </div>
-        </div>
-        <q-separator />
-        <q-separator />
-        <div class="row col-12 q-pa-sm">
-          <q-space />
-          <q-btn
-            unelevated
-            dense
-            class="q-px-md items-center"
-            color="light-blue-10"
-            label="บันทึก"
-            @click="router.go(-1)"
-          />
-        </div>
-      </q-card>
-    </div>
+          <q-separator />
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              unelevated
+              dense
+              class="q-px-md items-center"
+              color="light-blue-10"
+              label="บันทึก"
+              @click="checkSave"
+            />
+          </div>
+        </q-card>
+      </div>
+    </q-form>
   </div>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref } from "vue";
-import { useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const router = useRouter();
 const $q = useQuasar();
+const id = ref<string>("");
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
 const dateStart = ref<any>(new Date());
 const dateEnd = ref<any>(new Date());
-
+const files = ref<any[]>([]);
+const fileDocDataUpload = ref<File[]>([]);
 const roundInsig = ref<string>("");
-const year = ref<string>("");
-const datelast = ref<string>("");
+const yearOffer = ref<number>(0);
+const datelast = ref<number>(0);
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.getRoundInsignia("insignia"))
+    .then((res) => {
+      const data = res.data.result.periods;
+      const files = res.data.result.files;
+
+      id.value = data.id;
+      roundInsig.value = data.period_name;
+      yearOffer.value = data.year;
+      datelast.value = data.amount;
+      dateStart.value = data.startDate;
+      dateEnd.value = data.endDate;
+
+      files.value = files;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const routeName = router.currentRoute.value.name;
+
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+const uploadDocData = async () => {
+  const formData = new FormData();
+  if (fileDocDataUpload.value.length > 0) {
+    fileDocDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.docRoundInsignia(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        clickBack();
+      });
+  } else {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    clickBack();
+  }
+};
+
+const editData = async (id: string) => {
+  showLoader();
+  await http
+    .put(config.API.editRoundInsignia(id))
+    .then(async () => {
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const checkSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (success) => {
+      if (success) {
+        if (edit.value) {
+          await editData(id.value);
+        } else {
+          await addData();
+        }
+      }
+    });
+  }
+};
+
+// const sendData = () => {
+//   const valueData: any = {
+//     Name: roundInsig.value,
+//     year: year.value,
+//     Amount: datelast.value,
+//     dateStart: dateStart.value !== null ? dateToISO(dateStart.value) : null,
+//     dateEnd: dateEnd.value !== null ? dateToISO(dateEnd.value) : null,
+//   };
+//   return valueData;
+// };
+
+const addData = async () => {
+  const formData = new FormData();
+  formData.append("Name", roundInsig.value);
+  formData.append("year", parseInt(yearOffer.value).toString());
+  formData.append("Amount", files.datelast);
+  if (dateStart.value !== null) {
+    formData.append("StartDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("EndDate", dateToISO(dateEnd.value));
+  }
+
+  showLoader();
+  await http
+    .post(config.API.listRoundInsignia("insignia"), formData)
+    .then(async (res) => {
+      const data = res.data.result;
+      id.value = data.id;
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const clickBack = () => {
+  router.push({ name: "insigniaProposals" });
+};
 </script>
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 1969ecb05..6cdff4beb 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -171,12 +171,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
 
+import http from "@/plugins/http";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  statusLeave,
+  dialogMessage,
+  dateToISO,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
 const pagination = ref({
@@ -205,6 +222,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "year",
@@ -214,6 +233,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "startDate",
@@ -223,6 +244,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "endDate",
@@ -232,6 +255,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "level",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -241,6 +266,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "institution",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "statusRoyal",
@@ -250,6 +277,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "institution",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -297,6 +326,38 @@ const rows = ref<FormProprsalsRound[]>([
   },
 ]);
 
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  rows.value = [];
+  showLoader();
+  await http
+    .get(config.API.listRoundInsignia("insignia"))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      data.map((e: any) => {
+        rows.value.push({
+          id: e.period_id,
+          round: e.period_name,
+          year: e.period_year,
+          startDate:
+            e.startDate == null ? null : date2Thai(new Date(e.startDate)),
+          endDate: e.endDate == null ? null : date2Thai(new Date(e.endDate)),
+          status: e.period_status,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 // หัวตาราง2
 const clickDelete = (id: string) => {
   $q.dialog({
@@ -308,7 +369,21 @@ const clickDelete = (id: string) => {
     },
     persistent: true,
   })
-    .onOk(async () => {})
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.RoundInsignia(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          fetchData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
     .onCancel(() => {})
     .onDismiss(() => {});
 };

From d90e023042d6202e9c16d4d674b29bf728db33b4 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 8 Aug 2023 14:58:39 +0700
Subject: [PATCH 2/3] =?UTF-8?q?Api=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/07_insignia/api.insignia.ts           |   1 -
 .../components/1_Proposals/addProposals.vue   | 140 ++++++++++++------
 .../components/1_Proposals/listProposals.vue  |  30 +++-
 src/modules/07_insignia/router.ts             |  10 ++
 4 files changed, 129 insertions(+), 52 deletions(-)

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index f17086d3f..3d233fec5 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -8,5 +8,4 @@ export default {
   listRoundInsignia: (type: string) => `${insignia}/period/${type}`,
   editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
   RoundInsignia: (id: string) => `${insignia}/period/${id}`,
-  docRoundInsignia: (id: string) => `${insignia}/period/${id}`,
 };
diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index ba6c3ec5c..8d90236b4 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -9,9 +9,13 @@
         flat
         color="primary"
         class="q-mr-sm"
-        @click="router.go(-1)"
+        @click="clickBack"
       />
-      <div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
+      {{
+        edit
+          ? "รอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
+          : "เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
+      }}
     </div>
     <q-form ref="myForm">
       <div class="col-12">
@@ -27,13 +31,40 @@
                   v-model="roundInsig"
                   label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
                 />
-                <q-input
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="yearly"
                   class="col-2"
-                  dense
-                  outlined
-                  v-model="year"
-                  label="ปีที่เสนอ"
-                />
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="updateYear"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      :model-value="yearly + 543"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
+                      :label="`${'ปีที่เสนอ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="dateStart"
@@ -54,7 +85,7 @@
                     <q-input
                       outlined
                       dense
-                      class="col-xs-12 col-sm-5"
+                      class="full-width datepicker"
                       :model-value="
                         dateStart != null ? date2Thai(dateStart) : null
                       "
@@ -160,7 +191,7 @@
 import type { QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 import { useQuasar, QForm } from "quasar";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -169,45 +200,49 @@ const mixin = useCounterMixin();
 const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
   mixin;
 const router = useRouter();
+const route = useRoute();
 const $q = useQuasar();
-const id = ref<string>("");
+const id = ref<string>(route.params.id as string);
 const myForm = ref<QForm | null>(null); //form data input
 const edit = ref<boolean>(false);
-const dateStart = ref<any>(new Date());
-const dateEnd = ref<any>(new Date());
-const files = ref<any[]>([]);
+const dateStart = ref<Date>(new Date());
+const dateEnd = ref<Date>(new Date());
+const yearly = ref<number>(new Date().getFullYear());
+const files = ref<File[]>([]);
 const fileDocDataUpload = ref<File[]>([]);
 const roundInsig = ref<string>("");
-const yearOffer = ref<number>(0);
-const datelast = ref<number>(0);
+const datelast = ref<number>(1);
 
 onMounted(async () => {
   await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.getRoundInsignia("insignia"))
-    .then((res) => {
-      const data = res.data.result.periods;
-      const files = res.data.result.files;
+  if (route.params.id) {
+    edit.value = true;
+    showLoader();
+    console.log(id.value);
 
-      id.value = data.id;
-      roundInsig.value = data.period_name;
-      yearOffer.value = data.year;
-      datelast.value = data.amount;
-      dateStart.value = data.startDate;
-      dateEnd.value = data.endDate;
-
-      files.value = files;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+    await http
+      .get(config.API.getRoundInsignia(id.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   const files = res.data.result.files;
+        id.value = data.period_id;
+        roundInsig.value = data.period_name;
+        yearly.value = data.period_year;
+        datelast.value = data.period_amount;
+        dateStart.value = new Date(data.period_start);
+        dateEnd.value = new Date(data.period_end);
+        files.value = data.period_doc;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 };
 
 const routeName = router.currentRoute.value.name;
@@ -218,6 +253,10 @@ const fileUploadDoc = async (files: any) => {
   });
 };
 
+const updateYear = async (e: number) => {
+  yearly.value = e;
+};
+
 const uploadDocData = async () => {
   const formData = new FormData();
   if (fileDocDataUpload.value.length > 0) {
@@ -226,7 +265,7 @@ const uploadDocData = async () => {
     });
     showLoader();
     await http
-      .put(config.API.docRoundInsignia(id.value), formData)
+      .put(config.API.RoundInsignia(id.value), formData)
       .then((res) => {})
       .catch((e) => {
         messageError($q, e);
@@ -243,6 +282,18 @@ const uploadDocData = async () => {
 };
 
 const editData = async (id: string) => {
+  const formData = new FormData();
+  formData.append("Name", roundInsig.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
+  if (dateStart.value !== null) {
+    formData.append("startDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("endDate", dateToISO(dateEnd.value));
+  }
+  formData.append("file", files.value.toString());
+  console.log(formData);
   showLoader();
   await http
     .put(config.API.editRoundInsignia(id))
@@ -255,6 +306,7 @@ const editData = async (id: string) => {
     .finally(async () => {
       hideLoader();
     });
+  console.log(formData);
 };
 
 const checkSave = async () => {
@@ -284,15 +336,17 @@ const checkSave = async () => {
 
 const addData = async () => {
   const formData = new FormData();
-  formData.append("Name", roundInsig.value);
-  formData.append("year", parseInt(yearOffer.value).toString());
-  formData.append("Amount", files.datelast);
+  formData.append("name", roundInsig.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
   if (dateStart.value !== null) {
-    formData.append("StartDate", dateToISO(dateStart.value));
+    formData.append("startDate", dateToISO(dateStart.value));
   }
   if (dateEnd.value !== null) {
-    formData.append("EndDate", dateToISO(dateEnd.value));
+    formData.append("endDate", dateToISO(dateEnd.value));
   }
+  formData.append("file", files.value.toString());
+  console.log(formData);
 
   showLoader();
   await http
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 6cdff4beb..d40c5ec29 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -84,30 +84,36 @@
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <q-td key="round" :props="props">
+              <q-td key="round" :props="props" @click="clickEdit(props.row)">
                 {{ props.row.round }}
               </q-td>
-              <q-td key="year" :props="props">
+              <q-td key="year" :props="props" @click="clickEdit(props.row)">
                 {{ props.row.year }}
               </q-td>
-              <q-td key="startDate" :props="props">
+              <q-td
+                key="startDate"
+                :props="props"
+                @click="clickEdit(props.row)"
+              >
                 {{ props.row.startDate }}
               </q-td>
-              <q-td key="endDate" :props="props">
+              <q-td key="endDate" :props="props" @click="clickEdit(props.row)">
                 {{ props.row.endDate }}
               </q-td>
-              <q-td key="status" :props="props">
+              <q-td key="status" :props="props" @click="clickEdit(props.row)">
                 <q-icon
                   v-if="props.row.status == 'ยังไม่ได้เสนอ'"
                   name="mdi-close"
                   color="grey-5"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
                 <q-icon
                   v-else
                   name="mdi-check"
                   color="positive"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
               </q-td>
               <q-td key="statusRoyal" :props="props">
@@ -116,12 +122,14 @@
                   name="mdi-timer-sand"
                   color="orange"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
                 <q-icon
                   v-else
                   name="mdi-check"
                   color="positive"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
               </q-td>
               <q-td auto-width>
@@ -313,7 +321,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "ยังไม่ได้เสนอ",
+    status: "ไม่ใช้งาน",
     statusRoyal: "ยังไม่ได้เสนอ",
   },
   {
@@ -343,9 +351,11 @@ const fetchData = async () => {
           id: e.period_id,
           round: e.period_name,
           year: e.period_year,
+          amount: e.period_amount,
           startDate:
-            e.startDate == null ? null : date2Thai(new Date(e.startDate)),
-          endDate: e.endDate == null ? null : date2Thai(new Date(e.endDate)),
+            e.period_start == null ? null : date2Thai(new Date(e.period_start)),
+          endDate:
+            e.period_end == null ? null : date2Thai(new Date(e.period_end)),
           status: e.period_status,
         });
       });
@@ -358,6 +368,10 @@ const fetchData = async () => {
     });
 };
 
+const clickEdit = (col: any) => {
+  router.push(`/insignia/round-add/${col.id}`);
+};
+
 // หัวตาราง2
 const clickDelete = (id: string) => {
   $q.dialog({
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index 5eb982863..423cca427 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -45,6 +45,16 @@ export default [
       Role: "insignia",
     },
   },
+  {
+    path: "/insignia/round-add/:id",
+    name: "roundAddEdit",
+    component: roundAdd,
+    meta: {
+      Auth: true,
+      Key: [8.1],
+      Role: "insignia",
+    },
+  },
   {
     path: "/insignia/round-add",
     name: "roundAdd",

From 3055a08dbaa3f71ab370dccc3a18ae8da9d7d9fb Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 8 Aug 2023 21:37:33 +0700
Subject: [PATCH 3/3] =?UTF-8?q?ui/api=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=AB=E0=B8=A3=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=8D=E0=B8=88=E0=B8=B1=E0=B8=81=E0=B8=A3=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A3=E0=B8=94=E0=B8=B4=E0=B8=A1=E0=B8=B2=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Proposals/addProposals.vue   |  49 +-
 .../components/1_Proposals/listProposals.vue  |   4 +
 .../components/1_Proposals/addProposals.vue   | 368 ++++++++++++++
 .../components/1_Proposals/listProposals.vue  | 468 ++++++++++++++++++
 src/modules/09_coin/router.ts                 |  34 ++
 5 files changed, 887 insertions(+), 36 deletions(-)
 create mode 100644 src/modules/09_coin/components/1_Proposals/addProposals.vue
 create mode 100644 src/modules/09_coin/components/1_Proposals/listProposals.vue

diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index 8d90236b4..24b001041 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -208,7 +208,7 @@ const edit = ref<boolean>(false);
 const dateStart = ref<Date>(new Date());
 const dateEnd = ref<Date>(new Date());
 const yearly = ref<number>(new Date().getFullYear());
-const files = ref<File[]>([]);
+const files = ref<any>();
 const fileDocDataUpload = ref<File[]>([]);
 const roundInsig = ref<string>("");
 const datelast = ref<number>(1);
@@ -257,30 +257,6 @@ const updateYear = async (e: number) => {
   yearly.value = e;
 };
 
-const uploadDocData = async () => {
-  const formData = new FormData();
-  if (fileDocDataUpload.value.length > 0) {
-    fileDocDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    showLoader();
-    await http
-      .put(config.API.RoundInsignia(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        clickBack();
-      });
-  } else {
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    clickBack();
-  }
-};
-
 const editData = async (id: string) => {
   const formData = new FormData();
   formData.append("Name", roundInsig.value);
@@ -292,14 +268,15 @@ const editData = async (id: string) => {
   if (dateEnd.value !== null) {
     formData.append("endDate", dateToISO(dateEnd.value));
   }
-  formData.append("file", files.value.toString());
+  //   files.value.forEach((file: any) => {
+  //     formData.append("file", file);
+  //   });
+  formData.append("file", files.value);
   console.log(formData);
   showLoader();
   await http
     .put(config.API.editRoundInsignia(id))
-    .then(async () => {
-      await uploadDocData();
-    })
+    .then(async () => {})
     .catch((e) => {
       messageError($q, e);
     })
@@ -345,17 +322,17 @@ const addData = async () => {
   if (dateEnd.value !== null) {
     formData.append("endDate", dateToISO(dateEnd.value));
   }
-  formData.append("file", files.value.toString());
-  console.log(formData);
+  console.log(files.value);
+  //   files.value.forEach((file: any) => {
+  //     formData.append("file", file);
+  //   });
+  formData.append("file", files.value);
+  console.log(files.value);
 
   showLoader();
   await http
     .post(config.API.listRoundInsignia("insignia"), formData)
-    .then(async (res) => {
-      const data = res.data.result;
-      id.value = data.id;
-      await uploadDocData();
-    })
+    .then(async (res) => {})
     .catch((e) => {
       messageError($q, e);
     })
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index d40c5ec29..2c132ed72 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -406,6 +406,10 @@ const clickAdd = () => {
   router.push({ name: "roundAdd" });
 };
 
+const clickProposals = (id: string) => {
+  //   window.open(config.API.exportInsigniaDoc(id));
+};
+
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
diff --git a/src/modules/09_coin/components/1_Proposals/addProposals.vue b/src/modules/09_coin/components/1_Proposals/addProposals.vue
new file mode 100644
index 000000000..d889ddd5b
--- /dev/null
+++ b/src/modules/09_coin/components/1_Proposals/addProposals.vue
@@ -0,0 +1,368 @@
+<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"
+        @click="clickBack"
+      />
+      {{
+        edit
+          ? "ระยะเวลาการยื่นขอพระราชทานเครื่องทานเหรียญจักรพรรดิมาลา"
+          : "เพิ่มระยะเวลาการยื่นขอพระราชทานเครื่องทานเหรียญจักรพรรดิมาลา"
+      }}
+    </div>
+    <q-form ref="myForm">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12 row">
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-10"
+                  dense
+                  outlined
+                  v-model="roundCoin"
+                  label="รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา"
+                />
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="yearly"
+                  class="col-2"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="updateYear"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      :model-value="yearly + 543"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
+                      :label="`${'ปีที่เสนอ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateStart"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-5"
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      :model-value="
+                        dateStart != null ? date2Thai(dateStart) : null
+                      "
+                      :label="`${'วันเริ่มต้น'}`"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateEnd"
+                  class="col-xs-12 col-sm-5"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="col-xs-12 col-sm-4"
+                      :model-value="dateEnd != null ? date2Thai(dateEnd) : null"
+                      :label="`${'วันสิ้นสุด'}`"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
+                      ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+
+                <q-input
+                  class="col-xs-12 col-sm-2"
+                  dense
+                  outlined
+                  v-model="datelast"
+                  label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
+                />
+                <q-file
+                  class="col-xs-12 col-sm-10"
+                  outlined
+                  dense
+                  v-model="files"
+                  @added="fileUploadDoc"
+                  label="อัปโหลดเอกสารประกอบ"
+                  hide-bottom-space
+                  lazy-rules
+                  :rules="[
+                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+            </div>
+          </div>
+          <q-separator />
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              unelevated
+              dense
+              class="q-px-md items-center"
+              color="light-blue-10"
+              label="บันทึก"
+              @click="checkSave"
+            />
+          </div>
+        </q-card>
+      </div>
+    </q-form>
+  </div>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+const id = ref<string>(route.params.id as string);
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
+const dateStart = ref<Date>(new Date());
+const dateEnd = ref<Date>(new Date());
+const yearly = ref<number>(new Date().getFullYear());
+const files = ref<any>();
+const fileDocDataUpload = ref<File[]>([]);
+const roundCoin = ref<string>("");
+const datelast = ref<number>(1);
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (route.params.id) {
+    edit.value = true;
+    showLoader();
+    console.log(id.value);
+
+    await http
+      .get(config.API.getRoundInsignia(id.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   const files = res.data.result.files;
+        id.value = data.period_id;
+        roundCoin.value = data.period_name;
+        yearly.value = data.period_year;
+        datelast.value = data.period_amount;
+        dateStart.value = new Date(data.period_start);
+        dateEnd.value = new Date(data.period_end);
+        files.value = data.period_doc;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const routeName = router.currentRoute.value.name;
+
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+const updateYear = async (e: number) => {
+  yearly.value = e;
+};
+
+const uploadDocData = async () => {
+  const formData = new FormData();
+  if (fileDocDataUpload.value.length > 0) {
+    fileDocDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.RoundInsignia(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        clickBack();
+      });
+  } else {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    clickBack();
+  }
+};
+
+const editData = async (id: string) => {
+  const formData = new FormData();
+  formData.append("Name", roundCoin.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
+  if (dateStart.value !== null) {
+    formData.append("startDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("endDate", dateToISO(dateEnd.value));
+  }
+
+  formData.append("file", files.value);
+  console.log(formData);
+  showLoader();
+  await http
+    .put(config.API.editRoundInsignia(id))
+    .then(async () => {
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+  console.log(formData);
+};
+
+const checkSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (success) => {
+      if (success) {
+        if (edit.value) {
+          await editData(id.value);
+        } else {
+          await addData();
+        }
+      }
+    });
+  }
+};
+
+// const sendData = () => {
+//   const valueData: any = {
+//     Name: roundInsig.value,
+//     year: year.value,
+//     Amount: datelast.value,
+//     dateStart: dateStart.value !== null ? dateToISO(dateStart.value) : null,
+//     dateEnd: dateEnd.value !== null ? dateToISO(dateEnd.value) : null,
+//   };
+//   return valueData;
+// };
+
+const addData = async () => {
+  const formData = new FormData();
+  formData.append("name", roundCoin.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
+  if (dateStart.value !== null) {
+    formData.append("startDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("endDate", dateToISO(dateEnd.value));
+  }
+  //   formData.append("file", files.value[0]);
+  //   console.log(formData);
+  formData.append("file", files.value);
+  showLoader();
+  await http
+    .post(config.API.listRoundInsignia("coin"), formData)
+    .then(async (res) => {})
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      clickBack();
+    });
+};
+
+const clickBack = () => {
+  router.push({ name: "coinProposals" });
+};
+</script>
diff --git a/src/modules/09_coin/components/1_Proposals/listProposals.vue b/src/modules/09_coin/components/1_Proposals/listProposals.vue
new file mode 100644
index 000000000..d9d5793b9
--- /dev/null
+++ b/src/modules/09_coin/components/1_Proposals/listProposals.vue
@@ -0,0 +1,468 @@
+<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 q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มรายการรอบการเสนอขอ</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
+
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="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">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="round" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.round }}
+              </q-td>
+              <q-td key="year" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.year }}
+              </q-td>
+              <q-td
+                key="startDate"
+                :props="props"
+                @click="clickEdit(props.row)"
+              >
+                {{ props.row.startDate }}
+              </q-td>
+              <q-td key="endDate" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.endDate }}
+              </q-td>
+              <q-td key="status" :props="props" @click="clickEdit(props.row)">
+                <q-icon
+                  v-if="props.row.status == 'ยังไม่ได้เสนอ'"
+                  name="mdi-close"
+                  color="grey-5"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+              </q-td>
+              <q-td key="statusRoyal" :props="props">
+                <q-icon
+                  v-if="props.row.statusRoyal == 'ยังไม่ได้เสนอ'"
+                  name="mdi-timer-sand"
+                  color="orange"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="light-blue-8"
+                  @click.stop.prevent="clickProposals(props.row.id)"
+                  icon="mdi-file-download"
+                >
+                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
+                </q-btn>
+              </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>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
+
+import http from "@/plugins/http";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  statusLeave,
+  dialogMessage,
+  dateToISO,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "round",
+  "year",
+  "startDate",
+  "endDate",
+  "status",
+  "statusRoyal",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "round",
+    align: "left",
+    label: "รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่เสนอ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันที่เริ่มต้น",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันที่สิ้นสุด",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "institution",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormProprsalsRound[]>([
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "ไม่ใช้งาน",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+]);
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  rows.value = [];
+  showLoader();
+  await http
+    .get(config.API.listRoundInsignia("coin"))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      data.map((e: any) => {
+        rows.value.push({
+          id: e.period_id,
+          round: e.period_name,
+          year: e.period_year,
+          amount: e.period_amount,
+          startDate:
+            e.period_start == null ? null : date2Thai(new Date(e.period_start)),
+          endDate:
+            e.period_end == null ? null : date2Thai(new Date(e.period_end)),
+          status: e.period_status,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const clickEdit = (col: any) => {
+  router.push(`/coin/round-add/${col.id}`);
+};
+
+const clickProposals = (id: string) => {
+  //   window.open(config.API.exportDisablePassExamList(id));
+};
+
+// หัวตาราง2
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.RoundInsignia(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          fetchData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = () => {
+  router.push({ name: "coinRoundAdd" });
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const filterKeyword2 = ref<string>("");
+const filterRef2 = ref<any>(null);
+const resetFilter2 = () => {
+  filterKeyword2.value = "";
+  filterRef2.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/09_coin/router.ts b/src/modules/09_coin/router.ts
index d555454b2..ede52ede8 100644
--- a/src/modules/09_coin/router.ts
+++ b/src/modules/09_coin/router.ts
@@ -4,6 +4,10 @@
 
 const Main = () => import("@/modules/09_coin/views/Main.vue");
 const CoinHistory = () => import("@/modules/09_coin/components/Coin.vue");
+const coinProposals = () =>
+  import("@/modules/09_coin/components/1_Proposals/listProposals.vue");
+const coinRoundAdd = () =>
+  import("@/modules/09_coin/components/1_Proposals/addProposals.vue");
 
 export default [
   {
@@ -16,6 +20,36 @@ export default [
       Role: "coin",
     },
   },
+  {
+    path: "/coin/round-proposals",
+    name: "coinProposals",
+    component: coinProposals,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/coin/round-add",
+    name: "coinRoundAdd",
+    component: coinRoundAdd,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/coin/round-add/:id",
+    name: "coinRoundEdit",
+    component: coinRoundAdd,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+      Role: "coin",
+    },
+  },
   {
     path: "/coin/history",
     name: "coinHistory",