update KPI

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

@@ -68,7 +68,7 @@ async function fetchStructChart(
 }
 
 /**
- * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
+ * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้นๆ จาก API
  * @param data
  */
 async function refreshChart(data: any, type: number) {
@@ -97,7 +97,7 @@ function searchAndReplace(data: any, id: string) {
 /**
  * Recursive เพื่อหา Path ที่ผู้ใช้คลิก
  * @param id OrgID ของหน่วยงานที่ต้องการหา
- * @param chart Array ของ Object ของหน่วยงานย่อยใน Tree นั้น ๆ
+ * @param chart Array ของ Object ของหน่วยงานย่อยใน Tree นั้นๆ
  */
 function chartTraverse(id: any, chart: any): any {
   let _returnPath = [];

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

@@ -87,7 +87,7 @@ async function fetchProfile(path: string) {
 }
 
 /**
- * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
+ * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้นๆ จาก API
  * @param data
  */
 async function refreshChart(data: any) {

src/modules/02_organization/interface/response/organizational.ts

@@ -89,7 +89,7 @@ interface Position {
   posExecutiveName: string; // ตำแหน่งทางการบริหาร
   positionExecutiveField: string; // ด้านทางการบริหาร
   positionArea: string; // ด้าน/สาขา
-  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้นๆ หรือไม่?
 }
 
 interface PosMaster {
@@ -108,7 +108,7 @@ interface PosMaster {
   posExecutiveName: string; // ตำแหน่งทางการบริหาร
   positionExecutiveField: string; // ด้านทางการบริหาร
   positionArea: string; // ด้าน/สาขา
-  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้นๆ หรือไม่?
   fullNameCurrentHolder: string | null;
   fullNameNextHolder: string | null;
   positions: Position[]; // ตำแหน่ง
@@ -131,7 +131,7 @@ interface Position2 {
   posExecutiveName: string; // ตำแหน่งทางการบริหาร
   positionExecutiveField: string; // ด้านทางการบริหาร
   positionArea: string; // ด้าน/สาขา
-  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้นๆ หรือไม่?
 }
 
 interface PosMaster2 {
@@ -150,7 +150,7 @@ interface PosMaster2 {
   posExecutiveName: string; // ตำแหน่งทางการบริหาร
   positionExecutiveField: string; // ด้านทางการบริหาร
   positionArea: string; // ด้าน/สาขา
-  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้นๆ หรือไม่?
   positions: Position[]; // ตำแหน่ง
   conditionReason: string;
   isCondition: boolean;

src/modules/05_placement/components/probation/FormAssign.vue

@@ -1773,7 +1773,7 @@ onMounted(async () => {
 
                   <div class="col-12 row">
                     <div class="col-12 text-top2">
-                      กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+                      กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
                     </div>
                     <div class="col-12 row q-col-gutter-md">
                       <div class="col-12">
@@ -2255,7 +2255,7 @@ onMounted(async () => {
                           มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต
                         </li>
                         <li>
-                          ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ
+                          ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใดๆ
                           อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
                           และพระมหากษัตริย์
                         </li>
@@ -2271,11 +2271,11 @@ onMounted(async () => {
                           แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
                         </li>
                         <li>
-                          ไม่กระทำการใด ๆ
+                          ไม่กระทำการใดๆ
                           อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ
                         </li>
                         <li>
-                          ไม่กระทำการใด ๆ
+                          ไม่กระทำการใดๆ
                           อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
                         </li>
                         <li>
@@ -2291,7 +2291,7 @@ onMounted(async () => {
             <div class="col-12 row">
               <div class="col-12 text-top2">
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                3.5 อื่น ๆ (ถ้ามี)
+                3.5 อื่นๆ (ถ้ามี)
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <div class="col-12">
@@ -2399,7 +2399,7 @@ onMounted(async () => {
               <div class="col-12 row">
                 <div class="col-12 text-top2">
                   ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
-                  ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
+                 ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
                 </div>
                 <div class="col-12 text-top2 row items-center">
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -2417,7 +2417,7 @@ onMounted(async () => {
                 </div>
                 <div class="col-12 text-top2 row items-center">
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
+                  4.4 การอบรมอื่นๆ ที่หน่วยงานกำหนด (ถ้ามี)
                 </div>
               </div>
             </div>

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue

@@ -994,7 +994,7 @@ onMounted(async () => {
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label
-                    >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                    >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                   >
                 </q-item-section>
                 <q-item-section side>

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue

@@ -1090,7 +1090,7 @@ onMounted(async () => {
                   <q-item dense tag="label" v-ripple>
                     <q-item-section>
                       <q-item-label
-                        >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
+                        >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด
                         (ถ้ามี)</q-item-label
                       >
                     </q-item-section>

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue

@@ -1092,7 +1092,7 @@ onMounted(async () => {
               <q-separator class="q-my-xs" />
               <div class="row q-gutter-md align-center q-pl-md">
                 <div class="col-8">
-                  4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
+                  4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
                 </div>
                 <div class="col">
                   <q-input

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue

@@ -1180,7 +1180,7 @@ watch(lengthdiscipline_level, (newLength) => {
                   <q-separator class="q-my-xs" />
                   <div class="row q-gutter-md align-center q-pl-md">
                     <div class="col-8">
-                      4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
+                      4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
                     </div>
                     <div class="col">
                       <q-input

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue

@@ -1171,7 +1171,7 @@ onMounted(async () => {
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label
-                    >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                    >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                   >
                 </q-item-section>
                 <q-item-section side>

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue

@@ -1306,7 +1306,7 @@ onMounted(async () => {
                   <q-item dense tag="label" v-ripple>
                     <q-item-section>
                       <q-item-label
-                        >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
+                        >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด
                         (ถ้ามี)</q-item-label
                       >
                     </q-item-section>

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue

@@ -1304,7 +1304,7 @@ onMounted(async () => {
                   <q-item dense tag="label" v-ripple>
                     <q-item-section>
                       <q-item-label
-                        >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
+                        >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด
                         (ถ้ามี)</q-item-label
                       >
                     </q-item-section>

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue

@@ -1181,7 +1181,7 @@ onMounted(async () => {
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label
-                    >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                    >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                   >
                 </q-item-section>
                 <q-item-section side>

src/modules/05_placement/components/probation/SummaryScore.vue

@@ -302,7 +302,7 @@ onMounted(() => {
           <q-separator class="q-my-xs" />
           <div class="row q-gutter-md align-center q-pl-md">
             <div class="col-8">
-              4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
+              4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
             </div>
             <div class="col">
               <q-input
@@ -363,7 +363,7 @@ onMounted(() => {
 
       <div class="col-xs-12 col-sm-11">
         <div class="col-12 text-top0 row items-center">
-          เหตุผลอื่น ๆ ในการพิจารณา
+          เหตุผลอื่นๆ ในการพิจารณา
         </div>
         <q-input
           type="textarea"

src/modules/05_placement/storeProbation.ts

@@ -70,7 +70,7 @@ export const useProbationDataStore = defineStore("probationStore", () => {
     {
       id: "3",
       label:
-        "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+        "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใดๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
     },
   ];
   const behavior_no3 = [
@@ -82,12 +82,12 @@ export const useProbationDataStore = defineStore("probationStore", () => {
     {
       id: "3",
       label:
-        "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+        "ไม่กระทำการใดๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
     },
     {
       id: "4",
       label:
-        "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+        "ไม่กระทำการใดๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
     },
     {
       id: "5",

src/modules/06_retirement/components/ExitInterview/EditQuestion.vue

@@ -113,7 +113,7 @@ const question9Desc = ref<string>(
 const question9Score = ref<number>(0);
 const question9Answer = ref<any>(["อยาก", "ไม่อยาก (ระบุ)"]);
 // set คำถามที่ 10
-const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่น ๆ");
+const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่นๆ");
 const question10Answer = ref<any>([]);
 const question10Score = ref<number>(0);
 

src/modules/06_retirement/components/ExitInterview/exitRegistry.vue

@@ -166,7 +166,7 @@ async function fecthquestion() {
       }));
       question1Answer.value = Answer1;
       question1Answer.value.push({
-        label: "อื่น ๆ (ระบุ)",
+        label: "อื่นๆ (ระบุ)",
         value: Answer1.length,
       });
       question2Answer.value = data.question2Answer.map(
@@ -181,7 +181,7 @@ async function fecthquestion() {
       }));
       question3Answer.value = Answer3;
       question3Answer.value.push({
-        label: "อื่น ๆ (ระบุ)",
+        label: "อื่นๆ (ระบุ)",
         value: Answer3.length,
       });
       const Answer4 = data.question4Answer.map((e: any, index: number) => ({
@@ -190,7 +190,7 @@ async function fecthquestion() {
       }));
       question4Answer.value = Answer4;
       question4Answer.value.push({
-        label: "อื่น ๆ (ระบุ)",
+        label: "อื่นๆ (ระบุ)",
         value: Answer4.length,
       });
       question7Answer.value = data.question7Answer.map(

src/modules/06_retirement/components/resign/ResignByid.vue

@@ -307,7 +307,7 @@ async function clickCancelConditions() {
   conditions.value = false;
 }
 
-/** Function บันทึก รายการตรวจสอบเงื่อนไขต่าง ๆ*/
+/** Function บันทึก รายการตรวจสอบเงื่อนไขต่างๆ*/
 function onSubmitConditions() {
   dialogConfirm($q, () => {
     showLoader();
@@ -319,7 +319,7 @@ function onSubmitConditions() {
       })
       .then(async () => {
         await fetchData(id.value);
-        success($q, "บันทึกเงื่อนไขต่าง ๆ สำเร็จ");
+        success($q, "บันทึกเงื่อนไขต่างๆ สำเร็จ");
         conditions.value = false;
       })
       .catch((err) => {
@@ -739,11 +739,11 @@ onMounted(async () => {
       </div>
     </q-card>
 
-    <!-- รายการตรวจสอบเงื่อนไขต่าง ๆ -->
+    <!-- รายการตรวจสอบเงื่อนไขต่างๆ -->
     <q-card bordered class="row col-12 text-dark q-mt-sm">
       <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
         <div class="q-pl-sm text-weight-bold text-dark">
-          รายการตรวจสอบเงื่อนไขต่าง ๆ
+          รายการตรวจสอบเงื่อนไขต่างๆ
         </div>
       </div>
 
@@ -753,7 +753,7 @@ onMounted(async () => {
           <q-card bordered class="row col-12 text-dark q-mt-sm">
             <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
               <div class="q-pl-sm text-weight-bold text-dark">
-                เงื่อนไขต่าง ๆ
+                เงื่อนไขต่างๆ
               </div>
               <q-space />
 
@@ -829,7 +829,7 @@ onMounted(async () => {
           <q-card bordered class="row col-12 text-dark q-mt-sm">
             <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
               <div class="q-pl-sm text-weight-bold text-dark">
-                เอกสารหลักฐานต่าง ๆ
+                เอกสารหลักฐานต่างๆ
               </div>
             </div>
             <div class="col-12"><q-separator /></div>
@@ -846,7 +846,7 @@ onMounted(async () => {
                   outlined
                   dense
                   v-model="file"
-                  label="อัปโหลดเอกสารหลักฐานต่าง ๆ"
+                  label="อัปโหลดเอกสารหลักฐานต่างๆ"
                   hide-bottom-space
                 >
                   <template v-slot:prepend>

src/modules/06_retirement/components/resignEMP/ResignByid.vue

@@ -307,7 +307,7 @@ async function clickCancelConditions() {
   conditions.value = false;
 }
 
-/** Function บันทึก รายการตรวจสอบเงื่อนไขต่าง ๆ*/
+/** Function บันทึก รายการตรวจสอบเงื่อนไขต่างๆ*/
 function onSubmitConditions() {
   dialogConfirm($q, () => {
     showLoader();
@@ -319,7 +319,7 @@ function onSubmitConditions() {
       })
       .then(async () => {
         await fetchData(id.value);
-        success($q, "บันทึกเงื่อนไขต่าง ๆ สำเร็จ");
+        success($q, "บันทึกเงื่อนไขต่างๆ สำเร็จ");
         conditions.value = false;
       })
       .catch((err) => {
@@ -758,11 +758,11 @@ onMounted(async () => {
       </div>
     </q-card>
 
-    <!-- รายการตรวจสอบเงื่อนไขต่าง ๆ -->
+    <!-- รายการตรวจสอบเงื่อนไขต่างๆ -->
     <q-card bordered class="row col-12 text-dark q-mt-sm">
       <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
         <div class="q-pl-sm text-weight-bold text-dark">
-          รายการตรวจสอบเงื่อนไขต่าง ๆ
+          รายการตรวจสอบเงื่อนไขต่างๆ
         </div>
       </div>
 
@@ -772,7 +772,7 @@ onMounted(async () => {
           <q-card bordered class="row col-12 text-dark q-mt-sm">
             <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
               <div class="q-pl-sm text-weight-bold text-dark">
-                เงื่อนไขต่าง ๆ
+                เงื่อนไขต่างๆ
               </div>
               <q-space />
 
@@ -848,7 +848,7 @@ onMounted(async () => {
           <q-card bordered class="row col-12 text-dark q-mt-sm">
             <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
               <div class="q-pl-sm text-weight-bold text-dark">
-                เอกสารหลักฐานต่าง ๆ
+                เอกสารหลักฐานต่างๆ
               </div>
             </div>
             <div class="col-12"><q-separator /></div>
@@ -865,7 +865,7 @@ onMounted(async () => {
                   outlined
                   dense
                   v-model="file"
-                  label="อัปโหลดเอกสารหลักฐานต่าง ๆ"
+                  label="อัปโหลดเอกสารหลักฐานต่างๆ"
                   hide-bottom-space
                 >
                   <template v-slot:prepend>

src/modules/09_leave/components/05_Leave/DetailLeave.vue

@@ -77,8 +77,8 @@ const formData = reactive<FremData>({
   leaveDetail: "", //รายละเอียดการลา
   leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
   leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
-  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้นๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้นๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
   leaveTotal: 0, //จำนวนวันที่ลา(Auto)
   leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
   leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)

src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue

@@ -104,8 +104,8 @@ const formData = reactive<FremData>({
   leaveDetail: "", //รายละเอียดการลา
   leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
   leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
-  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้นๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้นๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
   leaveTotal: 0, //จำนวนวันที่ลา(Auto)
   leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
   leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)

src/modules/09_leave/components/05_Leave/formDetail/formLeave.vue

@@ -40,7 +40,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">
-          ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
+          ลาครั้งสุดท้ายในประเภทนั้นๆ เมื่อวันที่
         </div>
         <div class="col">
           {{ props.data.leaveLastStart ? props.data.leaveLastStart : "-" }}

src/modules/09_leave/interface/request/leave.ts

@@ -46,8 +46,8 @@ interface FremData {
   leaveDetail: string; //รายละเอียดการลา
   leaveDocument: string; //อัปโหลดเอกสารประกอบรายละเอียด
   leaveDraftDocument: string; //อัปโหลดแบบฟอร์มการลา
-  leaveLastStart: Date | null; //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastStart: Date | null; //ลาครั้งสุดท้ายในประเภทนั้นๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveLastEnd: Date | null; //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastEnd: Date | null; //ลาครั้งสุดท้ายในประเภทนั้นๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
   leaveTotal: number; //จำนวนวันที่ลา(Auto)
   leavebirthDate: Date | null; //วันเดือนปีเกิด(Auto)
   leavegovernmentDate: Date | null; //วันที่เข้ารับราชการ(Auto)

src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue

@@ -1893,7 +1893,7 @@ onMounted(async () => {
             </div>
             <div class="col-xs-12">
               <UploadFile
-                title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
+                title="อัปโหลดไฟล์เอกสารหลักฐานอื่นๆ"
                 label="เลือกไฟล์"
                 :files="disciplineDisciplinary_DocOthers"
                 :id="id"

src/modules/14_KPI/components/Tab/01_Assessment.vue

@@ -110,7 +110,7 @@ async function fetchListRole() {
       messageError($q, err);
     });
 }
-/** ดึงข้อมูล งานอื่น ๆ ที่ได้รับมอบหมาย */
+/** ดึงข้อมูล งานอื่นๆ ที่ได้รับมอบหมาย */
 async function fetchAssigned() {
   await http
     .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
@@ -360,7 +360,7 @@ onMounted(async () => {
         />
         <Work
           v-model:data="rows_03"
-          :title="`3. งานอื่น ๆ ที่ได้รับมอบหมาย`"
+          :title="`3. งานอื่นๆ ที่ได้รับมอบหมาย`"
           :page="3"
           :fetchList="fetchAssigned"
           :total="totalResults3"

src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue

@@ -97,8 +97,8 @@ const title = computed(() => {
       : "เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ";
   } else if (numpage.value === 3) {
     name = isStatusEdit.value
-      ? "แก้ไขตัวชี้วัดงานอื่น ๆ ที่ได้รับมอบหมาย"
+      ? "แก้ไขตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย"
-      : "เพิ่มตัวชี้วัดงานอื่น ๆ ที่ได้รับมอบหมาย";
+      : "เพิ่มตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย";
   }
   return name;
 });
@@ -212,7 +212,7 @@ function fetchRoleByid(id: string) {
     });
 }
 
-/** ดึงข้อมูล งานอื่น ๆ ที่ได้รับมอบหมาย */
+/** ดึงข้อมูล งานอื่นๆ ที่ได้รับมอบหมาย */
 function fetchListSpecial() {
   formFilter.nodeId = store.dataProfile.nodeId;
   formFilter.node = store.dataProfile.node;
@@ -242,7 +242,7 @@ function fetchListSpecial() {
     });
 }
 
-/** ดึงข้อมูล งานอื่น ๆ ที่ได้รับมอบหมายตาม id */
+/** ดึงข้อมูล งานอื่นๆ ที่ได้รับมอบหมายตาม id */
 function fetchspecialByid(id: string) {
   showLoader();
   http

src/modules/14_KPI/components/results/tableIndividual.vue

@@ -8,9 +8,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 import { checkPermission } from "@/utils/permissions";
 
-/**
+/** importType*/
- * importType
- */
 import type { QTableProps } from "quasar";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 import type {
@@ -18,21 +16,15 @@ import type {
   ResDevelopment,
 } from "@/modules/14_KPI/interface/response/index";
 
-/**
+/** importComponents*/
- * importComponents
- */
 import DialogIndividual from "@/modules/14_KPI/components/results/dialogIndividual.vue";
 
-/**
+/** use*/
- * use
- */
 const $q = useQuasar();
 const { showLoader, messageError, hideLoader } = useCounterMixin();
 const store = useKpiDataStore();
 
-/**
+/** props*/
- * props
- */
 const tab = defineModel<string>("tab", { required: true });
 
 /**
@@ -47,9 +39,7 @@ const keyword = ref<string>("");
 const modalDetail = ref<boolean>(false);
 const devId = ref<string>("");
 
-/**
+/** Table*/
- * Table
- */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -142,26 +132,22 @@ const pagination = ref({
   rowsPerPage: pageSize.value,
 });
 
-/**
+/** ตัวแปร*/
- * ตัวแปร
- */
 const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ
 const roundOp = ref<DataOption[]>([]); // รายการรอบการประเมิน
 
-/**
+/** function fetch รายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง*/
- * function fetch รายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง
+async function fetcDataList() {
- */
-function fetcDataList() {
   showLoader();
-  http
+  await http
     .post(config.API.achievementDev, {
       page: page.value,
       pageSize: pageSize.value,
       keyword: keyword.value,
       kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
     })
-    .then((res) => {
+    .then(async (res) => {
-      const data = res.data.result;
+      const data = await res.data.result;
       rows.value = data.data;
       total.value = data.total;
       maxPage.value = Math.ceil(total.value / pageSize.value);
@@ -174,20 +160,16 @@ function fetcDataList() {
     });
 }
 
-/**
+/** function fetch รอบการประเมิน*/
- * function fetch รอบการประเมิน
+async function fetchRoundOption() {
- */
-function fetchRoundOption() {
   showLoader();
-  http
+  await http
     .get(
       config.API.kpiPeriod +
         `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
     )
     .then(async (res) => {
       const data = await res.data.result.data;
-      console.log(res.data.result.data);
-
       if (res.data.result.data.length > 0) {
         const list = await data.map((e: ResRound) => ({
           id: e.id,
@@ -201,7 +183,7 @@ function fetchRoundOption() {
 
         roundOp.value = list;
         store.formQuery.round = list[0].id;
-        fetcDataList();
+        await fetcDataList();
       } else {
         roundOp.value = [];
         store.formQuery.round = "";
@@ -216,17 +198,13 @@ function fetchRoundOption() {
     });
 }
 
-/**
+/** function เปลี่ยนรอบการประเมิน และ เรียกข้อมูลรายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง*/
- * function เปลี่ยนรอบการประเมิน และ เรียกข้อมูลรายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง
- */
 function changRound() {
   store.formQuery.page = 1;
   fetcDataList();
 }
 
-/**
+/** ค้นหาข้อมูล*/
- * ค้นหาข้อมูล
- */
 function onSearchData() {
   page.value = 1;
   fetcDataList();
@@ -241,20 +219,16 @@ function onClickView(id: string) {
   devId.value = id;
 }
 
-/**
+/** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
- * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
- */
 watch(pagination, () => {
   page.value = 1;
   pageSize.value = pagination.value.rowsPerPage;
 });
 
-/**
+/** HookLifecycle*/
- * HookLifecycle
+onMounted(async () => {
- */
-onMounted(() => {
   store.formQuery.round = "";
-  fetchRoundOption();
+  await fetchRoundOption();
 });
 </script>
 
@@ -343,7 +317,6 @@ onMounted(() => {
         :options="columns"
         option-value="name"
         style="min-width: 140px"
-        
       />
     </div>
     <d-table

src/modules/14_KPI/components/results/tableResults.vue

@@ -8,9 +8,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 import { checkPermission } from "@/utils/permissions";
 
-/**
+/** importType*/
- * importType
- */
 import type { QTableProps } from "quasar";
 import type {
   ResResults,
@@ -18,9 +16,7 @@ import type {
 } from "@/modules/14_KPI/interface/response/Main";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
-/**
+/** use*/
- * use
- */
 const $q = useQuasar();
 const {
   showLoader,
@@ -33,9 +29,7 @@ const {
 const { convertResults, convertStatus } = useKpiDataStore();
 const store = useKpiDataStore();
 
-/**
+/** props*/
- * props
- */
 const tab = defineModel<string>("tab", { required: true });
 const rows = defineModel<ResResults[]>("row", { required: true });
 const page = defineModel<number>("page", { required: true });
@@ -47,9 +41,7 @@ const porps = defineProps({
   fetchData: { type: Function, required: true }, // function เรีนกข้อมูลประกาศผล
 });
 
-/**
+/** Table*/
- * Table
- */
 const selected = ref<ResResults[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -85,18 +77,18 @@ const columns = ref<QTableProps["columns"]>([
     },
     style: "font-size: 14px",
   },
-  {
+  // {
-    name: "evaluationStatus",
+  //   name: "evaluationStatus",
-    align: "left",
+  //   align: "left",
-    label: "สถานะการประเมิน",
+  //   label: "สถานะการประเมิน",
-    sortable: true,
+  //   sortable: true,
-    field: "evaluationStatus",
+  //   field: "evaluationStatus",
-    format(val, row) {
+  //   format(val, row) {
-      return val === "KP7" ? "ประการผลแล้ว" : convertStatus(val);
+  //     return val === "KP7" ? "ประการผลแล้ว" : convertStatus(val);
-    },
+  //   },
-    headerStyle: "font-size: 14px",
+  //   headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  //   style: "font-size: 14px",
-  },
+  // },
   {
     name: "evaluationResults",
     align: "left",
@@ -159,7 +151,7 @@ const visibleColumns = ref<string[]>([
   "no",
   "fullName",
   "createdAt",
-  "evaluationStatus",
+  // "evaluationStatus",
   "evaluationResults",
   "organization",
   "position",
@@ -172,22 +164,18 @@ const pagination = ref({
   rowsPerPage: pageSize.value,
 });
 
-/**
+/** ตัวแปร*/
- * ตัวแปร
- */
 const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ
 const roundOp = ref<DataOption[]>([]); // รายการรอบการประเมิน
 
-/**
+/** function บันทึกการประกาศผล*/
- * function บันทึกการประกาศผล
- */
 function onAnnounce() {
   const ids = selected.value.map((item) => item.id);
   dialogConfirm(
     $q,
-    () => {
+    async () => {
       showLoader();
-      http
+      await http
         .post(config.API.evaluationUserDone, {
           id: ids,
         })
@@ -198,6 +186,8 @@ function onAnnounce() {
         })
         .catch((err) => {
           messageError($q, err);
+        })
+        .finally(() => {
           hideLoader();
         });
     },
@@ -206,12 +196,10 @@ function onAnnounce() {
   );
 }
 
-/**
+/** function fetch รอบการประเมิน*/
- * function fetch รอบการประเมิน
+async function fetchRoundOption() {
- */
-function fetchRoundOption() {
   showLoader();
-  http
+  await http
     .get(
       config.API.kpiPeriod +
         `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
@@ -231,7 +219,7 @@ function fetchRoundOption() {
 
         roundOp.value = list;
         store.formQuery.round = list[0].id;
-        porps.fetchData();
+        await porps.fetchData();
       } else {
         roundOp.value = [];
         store.formQuery.round = "";
@@ -246,36 +234,28 @@ function fetchRoundOption() {
     });
 }
 
-/**
+/** function เปลี่ยนรอบการประเมิน และ เรียกข้อมูลรายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง*/
- * function เปลี่ยนรอบการประเมิน และ เรียกข้อมูลรายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง
- */
 function changRound() {
   store.formQuery.page = 1;
   porps.fetchData();
 }
 
-/**
+/** ค้นหาข้อมูล*/
- * ค้นหาข้อมูล
- */
 function onSearchData() {
   page.value = 1;
   porps.fetchData();
 }
 
-/**
+/** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
- * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
- */
 watch(pagination, () => {
   page.value = 1;
   pageSize.value = pagination.value.rowsPerPage;
 });
 
-/**
+/** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
- * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
+onMounted(async () => {
- */
-onMounted(() => {
   store.formQuery.round = "";
-  fetchRoundOption();
+  await fetchRoundOption();
 });
 </script>
 
@@ -364,7 +344,6 @@ onMounted(() => {
         :options="columns"
         option-value="name"
         style="min-width: 140px"
-        
       />
     </div>
     <d-table

src/modules/14_KPI/router.ts

@@ -1,10 +1,10 @@
-const roundPage = () => import("@/modules/14_KPI/views/round.vue");
+const roundPage = () => import("@/modules/14_KPI/views/01_kpiRound.vue");
 const probationDetail = () => import("@/modules/14_KPI/views/mainDetail.vue");
-const listPage = () => import("@/modules/14_KPI/views/list.vue");
+const listPage = () => import("@/modules/14_KPI/views/02_kpiLists.vue");
 const reportPage = () => import("@/modules/14_KPI/views/report.vue");
 const detailView = () => import("@/modules/14_KPI/views/detailView.vue");
 const detailViewPage = () => import("@/modules/14_KPI/views/detailView.vue");
-const ResultsView = () => import("@/modules/14_KPI/views/resultsMain.vue");
+const ResultsView = () => import("@/modules/14_KPI/views/03_results.vue");
 
 export default [
   {

src/modules/14_KPI/store.ts

@@ -90,6 +90,10 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
   }
 
   const statusOptions = ref<DataOption[]>([
+    {
+      id: "",
+      name: "ทั้งหมด",
+    },
     {
       id: "NEW",
       name: "จัดทำข้อตกลง",
@@ -140,6 +144,45 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
     return statusOptions.value.find((x: DataOption) => x.id == val)?.name;
   }
 
+  const resultsOptions = ref<DataOption[]>([
+    {
+      id: "",
+      name: "ทั้งหมด",
+    },
+    {
+      id: "PENDING",
+      name: "รอดำเนินการ",
+    },
+    {
+      id: "PASSED",
+      name: "ผ่านการประเมิน",
+    },
+    {
+      id: "NOTPASSED",
+      name: "ไม่ผ่านการประเมิน",
+    },
+    {
+      id: "EXCELLENT",
+      name: "ดีเด่น",
+    },
+    {
+      id: "VERY_GOOD",
+      name: "ดีมาก",
+    },
+    {
+      id: "GOOD",
+      name: "ดี",
+    },
+    {
+      id: "FAIR",
+      name: "พอใช้",
+    },
+    {
+      id: "IMPROVEMENT",
+      name: "ต้องปรับปรุง",
+    },
+  ]);
+
   function convertResults(val: string) {
     switch (val) {
       case "PENDING":
@@ -395,5 +438,6 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
     selected,
     statusOptions,
     isUpdate,
+    resultsOptions,
   };
 });

src/modules/14_KPI/views/01_kpiRound.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/**
+/** importType*/
- * importType
- */
 import type {
   DataOption,
-  ItemsMenu,
   NewPagination,
 } from "@/modules/14_KPI/interface/index/Main";
 import type {
@@ -18,20 +18,10 @@ import type {
 } from "@/modules/14_KPI/interface/request/Main";
 import type { ResRound } from "@/modules/14_KPI/interface/response/Main";
 
-/**
+/** importComponents*/
- * importComponents
- */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
+/** use*/
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { checkPermission } from "@/utils/permissions";
-
-/**
- * use
- */
 const $q = useQuasar();
 const {
   showLoader,
@@ -43,10 +33,10 @@ const {
   dialogRemove,
 } = useCounterMixin();
 
-/**
+/** Table*/
- * ข้้อมูล Table
+const rows = ref<ResRound[]>([]); //รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
- */
+const totalList = ref<number>(1); //จำนวนรายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการทั้งหมด
-const rows = ref<ResRound[]>([]);
+const total = ref<number>(0); //จำนวนหน้าทั้งหมด
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -107,25 +97,23 @@ const visibleColumns = ref<string[]>([
   "endDate",
   "isActive",
 ]);
+
+//ฟร์อมข้อมูลค้นหา
 const formQuery = reactive<FormQueryRound>({
-  page: 1,
+  page: 1, //หน้า
-  pageSize: 10,
+  pageSize: 10, //จำนวนหน้า
-  year: new Date().getFullYear(),
+  year: new Date().getFullYear(), //ปีงประมาณ
   keyword: "",
 });
-const totalList = ref<number>(1);
+const modalDialog = ref<boolean>(false); //modal เพิ่มรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
-const total = ref<number>(0);
+const isStatusEdit = ref<boolean>(false); //status การแก้ไขข้อมูล
 
-/**
+//ฟร์อมข้อมูลเพิ่มรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
- * ตัวแปร
- */
-const modalDialog = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
 const formData = reactive<FormRound>({
-  durationKPI: "",
+  durationKPI: "", //รอบการประเมิน
-  year: null,
+  year: null, //ปีงบประมาณ
-  startDate: null,
+  startDate: null, //วันเริ่มต้น
-  endDate: null,
+  endDate: null, //วันสิ้นสุด
 });
 
 const roundOp = ref<DataOption[]>([
@@ -136,21 +124,19 @@ const roundOp = ref<DataOption[]>([
   },
 ]); //Option  รอบการประเมิน
 
-/**
+/** ฟังก์ชัน fetch ข้อมูลรายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ*/
- * function fetch ข้อมูลรายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
+async function fetchList() {
- */
-function fetchList() {
   showLoader();
-  http
+  await http
     .get(
       config.API.kpiPeriod +
         `/admin?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}`
     )
-    .then((res) => {
+    .then(async (res) => {
-      const data: ResRound[] = res.data.result.data;
+      const data = await res.data.result;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      totalList.value = Math.ceil(data.total / formQuery.pageSize);
-      total.value = res.data.result.total;
+      total.value = data.total;
-      rows.value = data;
+      rows.value = data.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -161,7 +147,7 @@ function fetchList() {
 }
 
 /**
- *  function opent Dialog เพิ่มรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
+ *  ฟังก์ชัน เปิด Dialog เพิ่มรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
  * @param status เพิ่ม,แก้ไข
  */
 function onClickAddOrView(status: boolean = false) {
@@ -170,16 +156,18 @@ function onClickAddOrView(status: boolean = false) {
 }
 
 /**
- * function close Dialog
+ * ฟังก์ชันปิด popup เพิ่มรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
+ * ปิดแล้วเคลียร์ฟร๋อมข้อมูลการเพิ่มรอบ
  */
 function closeDialog() {
   modalDialog.value = false;
-  clearFormData();
+  formData.durationKPI = "";
+  formData.startDate = null;
+  formData.endDate = null;
+  formData.year = null;
 }
 
-/**
+/** ฟังก์ชัน Clear วันสิ้นสุด*/
- * function Clear วันสิ้นสุด
- */
 function changeDateStart() {
   if (formData?.startDate !== null && formData?.endDate !== null) {
     const startDate = new Date(formData.startDate);
@@ -190,19 +178,7 @@ function changeDateStart() {
   }
 }
 
-/**
+/** ฟังก์ชันบันทึกข้อมูลการเพิ่มรอบการประเมิน*/
- * function ClearForm เพิ่มรอบการประเมิน
- */
-function clearFormData() {
-  formData.durationKPI = "";
-  formData.startDate = null;
-  formData.endDate = null;
-  formData.year = null;
-}
-
-/**
- * function บันทึกข้อมูลเพิ่มรอบการประเมิน
- */
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -224,7 +200,7 @@ function onSubmit() {
 }
 
 /**
- * function เลือกเมนูแก้ไขรอบ
+ * ฟังก์ชันเลือกเมนูแก้ไขรอบ
  * @param action ปิดรอบ,ลบรอบ
  * @param id รอบการประเมิน
  */
@@ -245,14 +221,15 @@ function onClickAction(action: string, id: string) {
 }
 
 /**
- *  function เปิดรอบ
+ *  ฟังก์ชันยืนยันการเปิดรอบ
- * @param id รอบการประเมิน
+ * @param id รอบการประเมินที่จ้องการเปิดรอบ
  */
 function onOpenRounde(id: string) {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
-      http
+      showLoader();
+      await http
         .get(config.API.kpiPeriod + `/open/${id}`)
         .then(async () => {
           await fetchList();
@@ -271,15 +248,15 @@ function onOpenRounde(id: string) {
 }
 
 /**
- *  function ปิดรอบ
+ *  ฟังก์ชันยืนยันการปิดรอบ
- * @param id รอบการประเมิน
+ * @param id รอบการประเมินที่จ้องการปิดรอบ
  */
 function onCloseRounde(id: string) {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
       showLoader();
-      http
+      await http
         .get(config.API.kpiPeriod + `/close/${id}`)
         .then(async () => {
           await fetchList();
@@ -298,7 +275,7 @@ function onCloseRounde(id: string) {
 }
 
 /**
- *  function ลบรอบ
+ *  ฟังก์ชันยืนยันการลบข้อมูลรายการรอบ
  * @param id รอบการประเมิน
  */
 function onDeleteRound(id: string) {
@@ -320,15 +297,18 @@ function onDeleteRound(id: string) {
 }
 
 /**
- * function Convertname รอบการประเมิน
+ * ฟังก์ชันเปลี่ยนชื่อรอบการประเมิน
+ * @param val id อบการประเมิน
+ * @return ชื่อรอบการประเมิน
  */
 function connvertName(val: string) {
+  //หาข้อมูลรอบการประเมิน
   const findData = roundOp.value.find((e: DataOption) => e.id === val);
   return findData?.name;
 }
 
 /**
- * function updatePagination
+ * ฟังก์ชัน updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
  */
 function updatePagination(newPagination: NewPagination) {
@@ -336,9 +316,13 @@ function updatePagination(newPagination: NewPagination) {
   formQuery.pageSize = newPagination.rowsPerPage;
 }
 
-/**
+/** function อัพเดทปีงบประมาณ และ fetch รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ*/
- * callback function fetch รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ เมือมีการเปลี่ยนแถวต่อหน้า
+function handleUpdateYear() {
- */
+  formQuery.page = 1;
+  fetchList();
+}
+
+/** callback function fetch รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ เมือมีการเปลี่ยนแถวต่อหน้า*/
 watch(
   () => formQuery.pageSize,
   () => {
@@ -346,9 +330,7 @@ watch(
   }
 );
 
-/**
+/** callback function เช็ต วันเริ่มต้น และวันสิ้นสุด รอบการประเมินผลการปฏิบัติหน้าที่ราชการ*/
- * callback function เช็ต วันเริ่มต้น และวันสิ้นสุด รอบการประเมินผลการปฏิบัติหน้าที่ราชการ
- */
 watch(
   [() => formData.durationKPI, () => formData.year],
   ([newDurationKPI, newYear], [oldDurationKPI, oldYear]) => {
@@ -364,19 +346,9 @@ watch(
   }
 );
 
-/**
+/** hookLifecycle*/
- * function อัพเดทปีงบประมาณ และ fetch รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
+onMounted(async () => {
- */
+  await fetchList();
-function handleUpdateYear() {
-  formQuery.page = 1;
-  fetchList();
-}
-
-/**
- * hookLifecycle
- */
-onMounted(() => {
-  fetchList();
 });
 </script>
 
@@ -455,7 +427,6 @@ onMounted(() => {
           map-options
           :options="columns"
           option-value="name"
-          
           style="min-width: 140px"
         />
       </div>
@@ -488,14 +459,12 @@ onMounted(() => {
           <q-tr :props="props">
             <q-td>
               <q-btn
-                v-if="
+                v-if="checkPermission($route)?.attrIsUpdate !== false"
-                  props.row.isActive !== false &&
-                  checkPermission($route)?.attrIsUpdate !== false
-                "
                 flat
                 round
                 dense
-                color="orange"
+                :disable="!props.row.isActive"
+                :color="props.row.isActive ? 'orange' : 'grey'"
                 icon="mdi-close"
                 @click="onClickAction('close', props.row.id)"
               >

src/modules/14_KPI/views/02_kpiLists.vue

@@ -1,32 +1,45 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
-import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import config from "@/app.config";
-import http from "@/plugins/http";
-
-import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
-import type { QTableProps } from "quasar";
 
+import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 import { checkPermission } from "@/utils/permissions";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** importType*/
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+/** importComponents*/
 import DialogEvalute from "@/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue";
+
+/**use*/
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
-const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
+const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ
-  useCounterMixin();
+const formQuery = reactive({
+  page: 1, //หน้า
+  pageSize: 10, //จำนวนแถวต่อหน้า
+  status: "",
+  results: "",
+});
 
-const rows = ref<any[]>([]);
+const roundOp = ref<DataOption[]>([]); //รอบการประเมิน
+const statusOp = ref<DataOption[]>(store.statusOptions);
+const resultOp = ref<DataOption[]>(store.resultsOptions);
 
-const year = ref<number | null>(new Date().getFullYear());
+const modalDialog = ref<boolean>(false); //modal สร้างแบบประเมินผลฯ
-
-const modalDialog = ref<boolean>(false);
-
-const roundOp = ref<DataOption[]>([]);
 
+/** Table*/
+const rows = ref<any[]>([]); //รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
+const maxPage = ref<number>(1); //จำนวนหน้าทั้งหมด
+const totalList = ref<number>(0); //จำนวนรายการทั้งหมด
 const visibleColumns = ref<string[]>([
   "name",
   "createdAt",
@@ -42,6 +55,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstname}  ${row.lastname}`;
+    },
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -83,16 +99,10 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const formQuery = reactive({
+/** ฟังก์ชันเรียกรอบการประเมิน*/
-  page: 1,
+async function fetchRoundOption() {
-  pageSize: 10,
-});
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
-
-function fetchRoundOption() {
   showLoader();
-  http
+  await http
     .get(
       config.API.kpiPeriod +
         `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
@@ -126,7 +136,7 @@ function fetchRoundOption() {
     });
 }
 
-// const status = ref<string>("");
+/** ฟังก์ชันเรียกข้อมูลรายการการประเมินผลการปฏิบัติราชการระดับบุคคล*/
 async function fetchList() {
   showLoader();
   const body = {
@@ -134,6 +144,8 @@ async function fetchList() {
     pageSize: formQuery.pageSize,
     kpiPeriodId: store.formQuery.round,
     keyword: store.formQuery.keyword,
+    status: formQuery.status === "" ? undefined : formQuery.status,
+    results: formQuery.results === "" ? undefined : formQuery.results,
   };
 
   await http
@@ -152,20 +164,35 @@ async function fetchList() {
     });
 }
 
+/**
+ * ฟังก์ชันการเปลี่ยนรอบการประเมิน
+ * ทำการ กำหนด  formQuery.page เป็นหน้า แรก แล้วจะเรียก `fetchList`
+ * แล้วเรียกข้อมูลรายการการประเมินผลการปฏิบัติราชการระดับบุคคลใหม่
+ */
 async function changRound() {
   formQuery.page = 1;
-  fetchList();
+  await fetchList();
 }
 
+/**
+ * ฟังก์ชัน redirect ไปหน้าแก้ไขรายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล
+ * @param id รายการที่ต้องการแก้ไข
+ */
 function redirectViewDetail(id: string) {
   store.tabMain = "1";
   router.push(`KPI-list/${id}`);
 }
+
+/**
+ * ฟังก์ชัน redirect ไปหน้าดูรายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล
+ * @param id รายการที่ต้องการแก้ไข
+ */
 function redirectViewDetailOnly(id: string) {
   store.tabMain = "1";
   router.push(`KPI-list-detail/${id}`);
 }
 
+/** ฟังก์ชันเคลียข้อมูลค้นหาเป็นค้นหาจ้อมูลทั้งหมด*/
 function clearYear() {
   year.value = null;
   store.formQuery.round = "";
@@ -178,29 +205,53 @@ function clearYear() {
  * @param newPagination ข้อมูล Pagination ใหม่
  */
 function updatePagination(newPagination: any) {
-  formQuery.page = 1;
   formQuery.pageSize = newPagination.rowsPerPage;
 }
 
-const pagination = ref({
+/**
-  sortBy: "desc",
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
-  descending: false,
+ * @param val คำค้นหา
-  page: 1,
+ * @param update ฟังก์ชัน
-  rowsPerPage: 10,
+ * @param refData ประเภทของตัวเลือก
-});
+ */
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "status":
+      update(() => {
+        statusOp.value = store.statusOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "result":
+      update(() => {
+        resultOp.value = store.resultsOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
 
+    default:
+      break;
+  }
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ formQuery.pageSize เมื่อมีการเปลี่ยนของแถวทั้งหมด
+ * จะกำหนด formQuery.page เป็นหน้าแรก
+ * แล้วเรียกข้อมูลรายการการประเมินผลการปฏิบัติราชการระดับบุคคลใหม่
+ */
 watch(
   () => formQuery.pageSize,
   () => {
+    formQuery.page = 1;
     fetchList();
   }
 );
 
-function onDialog() {
+/** Hook */
-  modalDialog.value = true;
-}
 onMounted(async () => {
-  fetchRoundOption();
+  await fetchRoundOption();
 });
 </script>
 
@@ -209,10 +260,11 @@ onMounted(async () => {
     <div class="toptitle col-12 row items-center">
       รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
     </div>
-    <div class="col-12">
+
-      <q-card bordered class="q-pa-md">
+    <q-card flat bordered class="col-12 q-pa-md">
-        <q-toolbar style="padding: 0">
+      <div class="row q-col-gutter-sm">
-          <div class="row q-gutter-sm">
+        <div class="row col-12">
+          <div class="row">
             <datepicker
               menu-class-name="modalfix"
               v-model="year"
@@ -249,79 +301,138 @@ onMounted(async () => {
               </template>
             </datepicker>
 
-            <q-select
-              v-model="store.formQuery.round"
-              outlined
-              label="รอบการประเมิน"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="roundOp"
-              style="min-width: 150px"
-              emit-value
-              map-options
-              @update:model-value="changRound"
-              :disable="year === null"
-            />
             <q-btn
               v-if="checkPermission($route)?.attrIsCreate"
               round
               color="primary"
               flat
               icon="add"
-              @click="onDialog()"
+              @click="modalDialog = true"
             >
               <q-tooltip>เพิ่มผู้ประเมิน</q-tooltip>
             </q-btn>
-            <!-- <q-select
-              v-model="status"
-              outlined
-              label="สถานะการประเมิน"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="store.statusOptions"
-              style="min-width: 180px"
-              emit-value
-              map-options
-              @update:model-value="changRound"
-            /> -->
           </div>
-
           <q-space />
-          <div class="row q-gutter-sm">
+
-            <q-input
+          <q-input
-              outlined
+            outlined
-              dense
+            dense
-              v-model="store.formQuery.keyword"
+            v-model="store.formQuery.keyword"
-              label="ค้นหาชื่อผู้ขอรับการประเมิน"
+            label="ค้นหาชื่อผู้ขอรับการประเมิน"
-              @keydown.enter.prevent="changRound"
+            @keydown.enter.prevent="changRound"
-            >
+          >
-              <template v-slot:append>
+            <template v-slot:append>
-                <q-icon
+              <q-icon
-                  v-if="store.formQuery.keyword !== ''"
+                v-if="store.formQuery.keyword !== ''"
-                  name="clear"
+                name="clear"
-                  class="cursor-pointer"
+                class="cursor-pointer"
-                  @click="(store.formQuery.keyword = ''), changRound()"
+                @click="(store.formQuery.keyword = ''), changRound()"
-                />
+              />
-                <q-icon v-else name="search" color="grey-5" />
+              <q-icon v-else name="search" color="grey-5" />
-              </template>
+            </template>
-            </q-input>
+          </q-input>
-            <q-select
+          <q-select
-              v-model="visibleColumns"
+            class="q-ml-sm"
-              multiple
+            v-model="visibleColumns"
-              outlined
+            multiple
-              dense
+            outlined
-              options-dense
+            dense
-              :display-value="$q.lang.table.columns"
+            options-dense
-              emit-value
+            :display-value="$q.lang.table.columns"
-              map-options
+            emit-value
-              :options="columns"
+            map-options
-              option-value="name"
+            :options="columns"
-              style="min-width: 140px"
+            option-value="name"
-            />
+            style="min-width: 140px"
-          </div>
+          />
-        </q-toolbar>
+        </div>
+
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select
+                v-model="store.formQuery.round"
+                outlined
+                label="รอบการประเมิน"
+                dense
+                option-label="name"
+                option-value="id"
+                :options="roundOp"
+                style="min-width: 150px"
+                emit-value
+                map-options
+                @update:model-value="changRound"
+                :disable="year === null"
+              />
+
+              <q-select
+                v-model="formQuery.status"
+                label="สถานะการประเมิน"
+                class="select_ellipsis3"
+                dense
+                emit-value
+                map-options
+                :options="statusOp"
+                option-value="id"
+                option-label="name"
+                lazy-rules
+                hide-bottom-space
+                outlined
+                @update:model-value="(formQuery.page = 1), fetchList()"
+                use-input
+                @clear="
+                  (formQuery.status = ''), (statusOp = store.statusOptions)
+                "
+                input-debounce="0"
+                style="width: 460px"
+                :clearable="formQuery.status !== ''"
+                @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'status'
+                )"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
+              <q-select
+                v-model="formQuery.results"
+                label="ผลการประเมิน"
+                class="select_ellipsis3"
+                dense
+                emit-value
+                map-options
+                :options="resultOp"
+                option-value="id"
+                option-label="name"
+                lazy-rules
+                hide-bottom-space
+                outlined
+                @update:model-value="(formQuery.page = 1), fetchList()"
+                use-input
+                @clear="
+                  (formQuery.results = ''), (resultOp = store.resultsOptions)
+                "
+                input-debounce="0"
+                style="width: 300px"
+                :clearable="formQuery.results !== ''"
+                @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'result'
+              )"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+          </q-card>
+        </div>
         <div class="col-12">
           <d-table
             ref="table"
@@ -334,7 +445,6 @@ onMounted(async () => {
             dense
             :rows-per-page-options="[10, 25, 50, 100]"
             :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
             @update:pagination="updatePagination"
           >
             <template v-slot:header="props">
@@ -375,12 +485,7 @@ onMounted(async () => {
                   </q-btn>
                 </q-td>
                 <q-td v-for="col in props.cols" :key="col.id">
-                  <div v-if="col.name === 'name'">
+                  <div>
-                    {{
-                      `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
-                    }}
-                  </div>
-                  <div v-else>
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
@@ -402,8 +507,8 @@ onMounted(async () => {
             </template>
           </d-table>
         </div>
-      </q-card>
+      </div>
-    </div>
+    </q-card>
   </div>
 
   <DialogEvalute v-model:modal="modalDialog" />

src/modules/14_KPI/views/03_results.vue

@@ -1,36 +1,25 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/**
+/** import type*/
- * import type
- */
 import type { ItemsTab } from "@/modules/14_KPI/interface/index/Main";
 import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
 
-/**
+/** import components*/
- * import components
- */
 import TableResults from "@/modules/14_KPI/components/results/tableResults.vue";
 import TableIndividual from "@/modules/14_KPI/components/results/tableIndividual.vue";
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/14_KPI/store";
 
-/**
+/** use*/
- *  use
- */
 const store = useKpiDataStore();
 const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
 
-/**
- * ตัวแปร
- */
 const tab = ref<string>("COMPLETE");
 const tabItems = ref<ItemsTab[]>([
   { name: "COMPLETE", label: " รอประกาศผล" },
@@ -44,12 +33,10 @@ const maxPage = ref<number>(1);
 const total = ref<number>(1);
 const keyword = ref<string>("");
 
-/**
+/** function fetch รายการประกาศผล*/
- * function fetch รายการประกาศผล
+async function fetcDataList() {
- */
-function fetcDataList() {
   showLoader();
-  http
+  await http
     .post(config.API.evaluationUser, {
       status: tab.value,
       page: page.value,
@@ -57,8 +44,8 @@ function fetcDataList() {
       keyword: keyword.value,
       kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
     })
-    .then((res) => {
+    .then(async (res) => {
-      const data = res.data.result;
+      const data = await res.data.result;
       dataList.value = data.data;
       total.value = data.total;
       maxPage.value = Math.ceil(total.value / pageSize.value);
@@ -71,17 +58,14 @@ function fetcDataList() {
     });
 }
 
-// /**
+/** ทำงานเมื่อมีการเปลี่ยน Tab */
-//  * ทำงานเมื่อมีการเปลี่ยน Tab
-//  */
 watch(tab, () => {
   page.value = 1;
   keyword.value = "";
+  dataList.value = [];
 });
 
-/**
+/** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
- * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
- */
 watch(pageSize, () => {
   fetcDataList();
 });

src/modules/15_development/components/scholarship/DetailView.vue

@@ -48,7 +48,7 @@ const budgetSourceOp = ref<DataOption[]>([
   { id: "HOSPITAL", name: "เงินบำรุงโรงพยาบาล" },
   { id: "FUND", name: "เงินกองทุน" },
   { id: "SUBSIDY", name: "เงินอุดหนุน" },
-  { id: "OTHER", name: "เงินอื่น ๆ" },
+  { id: "OTHER", name: "เงินอื่นๆ" },
 ]);
 
 const scholarshipTypeOp = ref<DataOption[]>([

src/modules/15_development/store/listDevelopment.ts

@@ -54,7 +54,7 @@ export const uselistDevelopmentDataStore = defineStore(
       },
       {
         value: "other1",
-        label: "อื่น ๆ (ระบุ)",
+        label: "อื่นๆ (ระบุ)",
       },
     ]);
     //20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
@@ -64,7 +64,7 @@ export const uselistDevelopmentDataStore = defineStore(
       { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
       { value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
       { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
-      { value: "other2", label: "อื่น ๆ (ระบุ)" },
+      { value: "other2", label: "อื่นๆ (ระบุ)" },
     ]);
     //10 การฝึกอบรมอื่นๆ
     const dataDevelopment10 = ref<DataItemsDevelopment[]>([
@@ -87,7 +87,7 @@ export const uselistDevelopmentDataStore = defineStore(
       },
       { value: "meeting", label: "การประชุม (Meeting)" },
       { value: "seminar", label: "การสัมมนา (Seminar)" },
-      { value: "other3", label: "อื่น ๆ (ระบุ)" },
+      { value: "other3", label: "อื่นๆ (ระบุ)" },
     ]);
     return {
       dataDevelopment70,

src/modules/16_positionEmployee/interface/response/organizational.ts

@@ -88,7 +88,7 @@ interface Position {
   posExecutiveName: string; // ตำแหน่งทางการบริหาร
   positionExecutiveField: string; // ด้านทางการบริหาร
   positionArea: string; // ด้าน/สาขา
-  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้นๆ หรือไม่?
 }
 
 interface PosMaster {
@@ -107,7 +107,7 @@ interface PosMaster {
   posExecutiveName: string; // ตำแหน่งทางการบริหาร
   positionExecutiveField: string; // ด้านทางการบริหาร
   positionArea: string; // ด้าน/สาขา
-  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้นๆ หรือไม่?
   fullNameCurrentHolder: string | null;
   fullNameNextHolder: string | null;
   positions: Position[]; // ตำแหน่ง
@@ -128,7 +128,7 @@ interface Position2 {
   posExecutiveName: string; // ตำแหน่งทางการบริหาร
   positionExecutiveField: string; // ด้านทางการบริหาร
   positionArea: string; // ด้าน/สาขา
-  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้นๆ หรือไม่?
 }
 
 interface PosMaster2 {
@@ -147,7 +147,7 @@ interface PosMaster2 {
   posExecutiveName: string; // ตำแหน่งทางการบริหาร
   positionExecutiveField: string; // ด้านทางการบริหาร
   positionArea: string; // ด้าน/สาขา
-  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้นๆ หรือไม่?
   positions: Position[]; // ตำแหน่ง
 }
 

src/plugins/filters.ts

@@ -1,11 +1,11 @@
 /**
  * GLOABL Filters
- *   - ไฟล์นี้จะไว้เก็บฟังก์ชันง่าย ๆ พวก Helper Functions ทั้งหลาย
+ *   - ไฟล์นี้จะไว้เก็บฟังก์ชันง่ายๆ พวก Helper Functions ทั้งหลาย
  */
 
 const filters = {
   /**
-   * ฟังก์ชัน compactNumber ใช้แปลงตัวเลขยาว ๆ ให้กลายเป็นเลขสั้น ๆ แบบที่พวก Social Media ชอบใช้กัน เช่น 1,000 แปลงเป็น 1K หรือ 1,000,000 แปลงเป็น 1M
+   * ฟังก์ชัน compactNumber ใช้แปลงตัวเลขยาวๆ ให้กลายเป็นเลขสั้นๆ แบบที่พวก Social Media ชอบใช้กัน เช่น 1,000 แปลงเป็น 1K หรือ 1,000,000 แปลงเป็น 1M
    * วิธีใช้ : {{ $filters.compactNumber(value) }}
    *
    * @param val รับค่าพารามิเตอร์เป็นตัวแปรชนิดตัวเลข

src/style/quasar-variables.sass

@@ -187,3 +187,6 @@ h3.resigtry-tab-title
     text-overflow: ellipsis
     width: auto
     max-width: 60ch
+
+.filter-card
+    background-color: #f1f1f1b0