From 149831f897b54096b1f18b6b7b3f90ee3ec0e092 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 31 Oct 2024 14:52:06 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=AA?=
 =?UTF-8?q?=E0=B9=8D=E0=B8=B2=E0=B8=A3=E0=B8=A7=E0=B8=88=E0=B8=84=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A1=E0=B8=84=E0=B8=B4=E0=B8=94=E0=B9=80=E0=B8=AB?=
 =?UTF-8?q?=E0=B9=87=E0=B8=99=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97=E0=B8=94?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_dashboard/views/Dashboard.vue  |  21 +-
 .../15_probationReport/interface/Main.ts      |   8 +
 src/modules/15_probationReport/router.ts      |  18 ++
 src/modules/15_probationReport/views/main.vue | 286 ++++++++++++++++++
 src/router/index.ts                           |   3 +
 src/stores/data.ts                            |   2 +
 src/views/MainLayout.vue                      |   6 +-
 7 files changed, 341 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/15_probationReport/interface/Main.ts
 create mode 100644 src/modules/15_probationReport/router.ts
 create mode 100644 src/modules/15_probationReport/views/main.vue

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 93a0bc9..3ea5742 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import router from "@/router";
@@ -7,6 +7,7 @@ import config from "@/app.config";
 import http from "@/plugins/http";
 import { tokenParsed } from "@/plugins/auth";
 import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 
 import type {
   InboxDetail,
@@ -18,6 +19,7 @@ import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
 import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
 
 const $q = useQuasar();
+const dataStore = useDataStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
@@ -25,6 +27,13 @@ const fullname = ref<string>(""); // ชื่อผู้ใช้
 const inboxList = ref<InboxDetail[]>([]); // รายการกล่องข้อความ
 const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
 // รายการเมนูหลักของระบบ
+
+const filteredItems = computed(() =>
+  items.value.filter(
+    (item) => item.title !== "แบบสำรวจความคิดเห็น" || dataStore.isProbation
+  )
+);
+
 const items = ref<MenuMainList[]>([
   {
     icon: "mdi-account-group-outline",
@@ -114,6 +123,14 @@ const items = ref<MenuMainList[]>([
     path: "/IDP",
     active: false,
   },
+  {
+    icon: "mdi-poll",
+    title: "แบบสำรวจความคิดเห็น",
+    sub: "แบบสำรวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ",
+    color: "yellow-3",
+    path: "/probation-report",
+    active: false,
+  },
 ]);
 
 /**
@@ -254,7 +271,7 @@ onMounted(async () => {
       <div class="row justify-start q-col-gutter-md">
         <div
           class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row"
-          v-for="(item, j) in items"
+          v-for="(item, j) in filteredItems"
           :key="j"
         >
           <q-card bordered @click="goToPage(item.path)" class="noactive col-12">
diff --git a/src/modules/15_probationReport/interface/Main.ts b/src/modules/15_probationReport/interface/Main.ts
new file mode 100644
index 0000000..3369d77
--- /dev/null
+++ b/src/modules/15_probationReport/interface/Main.ts
@@ -0,0 +1,8 @@
+interface ListDataText {
+    value: string;
+    label: string;
+  }
+
+  export type{
+    ListDataText
+  }
\ No newline at end of file
diff --git a/src/modules/15_probationReport/router.ts b/src/modules/15_probationReport/router.ts
new file mode 100644
index 0000000..4fd2677
--- /dev/null
+++ b/src/modules/15_probationReport/router.ts
@@ -0,0 +1,18 @@
+/**
+ * Router การพัฒนา
+ */
+
+const probationReportMain = () =>
+  import("@/modules/15_probationReport/views/main.vue");
+
+export default [
+  {
+    path: "/probation-report",
+    name: "probation-reportMain",
+    component: probationReportMain,
+    meta: {
+      Auth: true,
+      Key: [1],
+    },
+  },
+];
diff --git a/src/modules/15_probationReport/views/main.vue b/src/modules/15_probationReport/views/main.vue
new file mode 100644
index 0000000..44b90b6
--- /dev/null
+++ b/src/modules/15_probationReport/views/main.vue
@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { QForm, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { ListDataText } from "@/modules/15_probationReport/interface/Main";
+
+const router = useRouter();
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
+
+const $q = useQuasar();
+const myForm = ref<QForm>();
+const mixin = useCounterMixin();
+
+const { messageError, success, dialogConfirm, showLoader, hideLoader } = mixin;
+const route = useRoute();
+
+const status = ref<boolean>(true);
+
+const answer1 = ref<string>("");
+const answer2 = ref<string>("");
+const answer3 = ref<number>(0);
+
+const classBordered = ref<string>("");
+
+/** ดึง ข้อมูลแบบสำรวจ */
+async function getSurveyData() {
+  showLoader();
+  await http
+    .get(config.API.summarySurveyDetail(assignId.value))
+    .then(async (res: any) => {
+      const data = await res.data.data;
+      if (data !== null) {
+        answer1.value = data.answer1;
+        answer2.value = data.answer2;
+        answer3.value = data.answer3;
+        status.value = false;
+      }
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/** save ข้อมูล */
+async function save() {
+//   await myForm.value!.validate().then((result: boolean) => {
+//     if (result && answer3.value !== 0) {
+//       const data = {
+//         answer1: answer1.value,
+//         answer2: answer2.value,
+//         answer3: answer3.value,
+//       };
+//       dialogConfirm($q, async () => {
+//         showLoader();
+//         await http
+//           .post(config.API.summarySurveyDetail(assignId.value), data)
+//           .then((res: any) => {
+//             success($q, "บันทึกสำเร็จ");
+//             getSurveyData();
+//           })
+//           .catch((e: any) => {
+//             messageError($q, e);
+//           })
+//           .finally(() => {
+//             hideLoader();
+//           });
+//       });
+//     } else if (answer3.value == 0) {
+//       classBordered.value = "border_custom";
+//     }
+//   });
+}
+/** ถ้าเป็น 0 ใส่ class */
+watch(answer3, () => {
+  if (answer3.value == 0) {
+    classBordered.value = "border_custom";
+  } else classBordered.value = "";
+});
+
+/** get ค่า เมื่อโหลดหน้า */
+onMounted(() => {
+  //   getSurveyData();
+});
+</script>
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12">
+        <q-card bordered>
+          <q-form greedy @submit.prevent @validation-success="save()">
+            <q-card-section>
+              <div class="col-12 row">
+                <div class="col-12 text-top0 items-center">
+                  <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+                  คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ?
+                </div>
+                <div class="col-12">
+                  <q-input
+                    :readonly="!status"
+                    label="ความคิดเห็น"
+                    class="bg-white"
+                    dense
+                    borderless
+                    outlined
+                    v-model="answer1"
+                    type="textarea"
+                    :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
+                  />
+                </div>
+              </div>
+
+              <div class="col-12 row q-mt-md">
+                <div class="col-12 text-top0 items-center">
+                  <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+                  ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+                </div>
+                <div class="col-12">
+                  <q-input
+                    :readonly="!status"
+                    label="ความคิดเห็น"
+                    class="bg-white"
+                    dense
+                    borderless
+                    outlined
+                    v-model="answer2"
+                    type="textarea"
+                    :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
+                  />
+                </div>
+              </div>
+
+              <div :class="`col-12 row q-mt-md ${classBordered}`">
+                <div class="text-top0 items-center">
+                  <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+                  ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
+                </div>
+                <q-space />
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
+                    :disable="!status"
+                    :class="answer3 == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="answer3 = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
+              </div>
+              <div class="col-12 q-mt-md">
+                <q-separator size="3px" color="grey-2" />
+              </div>
+              <div class="col-12 row q-pb-sm">
+                <div class="col-12 text-top0 items-center q-pa-md">
+                  เกณฑ์การประเมินความคาดหวัง
+                </div>
+                <div class="q-gutter-sm row">
+                  <div class="col-12 row items-center">
+                    <div class="col-2 row justify-center">
+                      <q-btn outline color="grey-6" :label="'1'"> </q-btn>
+                    </div>
+                    <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
+                    <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
+                  </div>
+                  <div class="col-12 row items-center">
+                    <div class="col-2 row justify-center">
+                      <q-btn outline color="grey-6" :label="'2'"> </q-btn>
+                    </div>
+                    <div class="q-pl-md col-3">
+                      ต่ำกว่าความคาดหวังค่อนข้างมาก
+                    </div>
+                    <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
+                  </div>
+                  <div class="col-12 row items-center">
+                    <div class="col-2 row justify-center">
+                      <q-btn outline color="grey-6" :label="'3'"> </q-btn>
+                    </div>
+                    <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
+                    <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
+                  </div>
+                  <div class="col-12 row items-center">
+                    <div class="col-2 row justify-center">
+                      <q-btn outline color="grey-6" :label="'4'"> </q-btn>
+                    </div>
+                    <div class="q-pl-md col-3">
+                      สูงว่าความคาดหวังค่อนข้างมาก
+                    </div>
+                    <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
+                  </div>
+                  <div class="col-12 row items-center">
+                    <div class="col-2 row justify-center">
+                      <q-btn outline color="grey-6" :label="'5'"> </q-btn>
+                    </div>
+                    <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
+                    <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
+                  </div>
+                </div>
+              </div>
+            </q-card-section>
+            <q-separator />
+
+            <q-card-actions align="right">
+              <q-btn label="บันทึก" color="secondary" type="submit"
+                ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+              >
+            </q-card-actions>
+          </q-form>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  color: #c10015;
+  padding: 10px;
+}
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 53bb5de..af9989a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,6 +19,8 @@ import ModuleProbation from "@/modules/11_probation/router";
 import ModuleOrganization from "@/modules/12_organization/router";
 import ModulePortfolio from "@/modules/13_portfolio/router";
 import ModuleDevelop from "@/modules/14_IDP/router";
+import ModuleProbationReport from "@/modules/15_probationReport/router";
+
 import { authenticated, tokenParsed } from "@/plugins/auth";
 import { ro } from "date-fns/locale";
 // TODO: ใช้หรือไม่?
@@ -59,6 +61,7 @@ const router = createRouter({
         ...ModuleOrganization,
         ...ModulePortfolio,
         ...ModuleDevelop,
+        ...ModuleProbationReport,
       ],
     },
     {
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 74c3907..aa45beb 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -5,6 +5,7 @@ export const useDataStore = defineStore("data", () => {
   // ref() คือการประกาศ state เหมือน vuex
   const count = ref<number>(0);
   const loader = ref<boolean>(false);
+  const isProbation = ref<boolean>(false)
 
   const expandedReport2 = ref<string[]>([]);
   const selectedReport2 = ref<string>("");
@@ -66,6 +67,7 @@ export const useDataStore = defineStore("data", () => {
     expandedRegister,
     selectedRegister,
     changeTreeRegister,
+    isProbation
   };
 });
 
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index afda82c..d813309 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -9,11 +9,15 @@ import CustomComponent from "@/components/CustomDialog.vue";
 import avatar from "@/assets/avatar_user.jpg";
 import { tokenParsed, logout } from "@/plugins/auth";
 
+import { useDataStore } from '@/stores/data'
+
 const route = useRoute();
 const router = useRouter();
 
 const $q = useQuasar();
 const profileImg = ref<string>("");
+const dataStore = useDataStore()
+
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -46,7 +50,7 @@ async function checkUser() {
     .get(config.API.profilePosition())
     .then(async (res) => {
       const data = res.data.result;
-
+      dataStore.isProbation = data.isProbation
       if (data.avatarName) {
         await getImg(data.profileId, data.avatarName);
       } else {