From d97203c7185240f13c58d687af07aa90507669b3 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Thu, 11 Apr 2024 11:05:41 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AA=E0=B8=A1=E0=B8=A3=E0=B8=A3=E0=B8=96?=
 =?UTF-8?q?=E0=B8=99=E0=B8=B0:=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=80=E0=B8=81=E0=B8=93=E0=B8=91=E0=B9=8C=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99+validation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Forms/04_FormExecutivePosition.vue        | 177 +++++++++---------
 .../Forms/05_FormExecutiveLevel.vue           | 131 ++++++-------
 2 files changed, 155 insertions(+), 153 deletions(-)

diff --git a/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue b/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
index 105cc93e5..54f23df4c 100644
--- a/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
+++ b/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -21,8 +21,16 @@ const {
   success,
   date2Thai,
 } = mixin;
-const L1Editor = ref<string>("");
-const competencyName = ref<string>("");
+
+const formData = reactive({
+  competencyType: "",
+  competencyName: "",
+  definition: "",
+  level1: "",
+  level2: "",
+  level3: "",
+  evaluation: "",
+});
 async function onSubmit() {
   dialogConfirm($q, async () => {});
 }
@@ -32,12 +40,19 @@ async function onSubmit() {
   <div class="full-width">
     <q-form @submit.prevent greedy @validation-success="onSubmit()">
       <div class="col-12">
-        <q-input outlined v-model="competencyName" dense label="ชื่อสมรรถนะ" />
+        <q-input
+          outlined
+          v-model="formData.competencyName"
+          dense
+          label="ชื่อสมรรถนะ"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`]"
+        />
       </div>
       <q-card-section class="col-12 q-px-none">
         <div>
           <q-editor
-            v-model="L1Editor"
+            v-model="formData.definition"
             :dense="$q.screen.lt.md"
             min-height="7rem"
             placeholder="คำจำกัดความ"
@@ -83,34 +98,25 @@ async function onSubmit() {
               </span>
             </q-card-section>
             <q-card-section class="q-pa-none col-6">
-              <div class="q-py-md q-mr-md">
-                <q-editor
-                  v-model="L1Editor"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
-
-                    ['unordered', 'ordered'],
+              <div class="q-mr-md">
+                <q-field
+                  ref="fieldRef"
+                  v-model="formData.level1"
+                  label-slot
+                  borderless
+                  :rules="[
+                    (val) => !!val || 'กรุณากรอก L1 ระดับ หัวหน้าฝ่ายในสังกัด',
                   ]"
-                  :fonts="{
-                    arial: 'Arial',
-                    arial_black: 'Arial Black',
-                    comic_sans: 'Comic Sans MS',
-                    courier_new: 'Courier New',
-                    impact: 'Impact',
-                    lucida_grande: 'Lucida Grande',
-                    times_new_roman: 'Times New Roman',
-                    verdana: 'Verdana',
-                  }"
-                />
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      v-model="formData.level1"
+                      min-height="5rem"
+                      class="full-width"
+                    />
+                  </template>
+                </q-field>
               </div>
             </q-card-section>
           </div>
@@ -121,34 +127,26 @@ async function onSubmit() {
               </span>
             </q-card-section>
             <q-card-section class="q-pa-none col-6">
-              <div class="q-py-md q-mr-md">
-                <q-editor
-                  v-model="L1Editor"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
-
-                    ['unordered', 'ordered'],
+              <div class="q-mr-md">
+                <q-field
+                  ref="fieldRef"
+                  v-model="formData.level2"
+                  label-slot
+                  borderless
+                  :rules="[
+                    (val) =>
+                      !!val || 'กรุณากรอก L2 ระดับ ผู้ช่วยผู้อำนวยการเขต',
                   ]"
-                  :fonts="{
-                    arial: 'Arial',
-                    arial_black: 'Arial Black',
-                    comic_sans: 'Comic Sans MS',
-                    courier_new: 'Courier New',
-                    impact: 'Impact',
-                    lucida_grande: 'Lucida Grande',
-                    times_new_roman: 'Times New Roman',
-                    verdana: 'Verdana',
-                  }"
-                />
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      v-model="formData.level2"
+                      min-height="5rem"
+                      class="full-width"
+                    />
+                  </template>
+                </q-field>
               </div>
             </q-card-section>
           </div>
@@ -159,52 +157,51 @@ async function onSubmit() {
               </span>
             </q-card-section>
             <q-card-section class="q-pa-none col-6">
-              <div class="q-py-md q-mr-md">
-                <q-editor
-                  v-model="L1Editor"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
-
-                    ['unordered', 'ordered'],
+              <div class="q-mr-md">
+                <q-field
+                  ref="fieldRef"
+                  v-model="formData.level3"
+                  label-slot
+                  borderless
+                  :rules="[
+                    (val) => !!val || 'กรุณากรอก L3 ระดับ ผู้อำนวยการเขต',
                   ]"
-                  :fonts="{
-                    arial: 'Arial',
-                    arial_black: 'Arial Black',
-                    comic_sans: 'Comic Sans MS',
-                    courier_new: 'Courier New',
-                    impact: 'Impact',
-                    lucida_grande: 'Lucida Grande',
-                    times_new_roman: 'Times New Roman',
-                    verdana: 'Verdana',
-                  }"
-                />
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      v-model="formData.level3"
+                      min-height="5rem"
+                      class="full-width"
+                    />
+                  </template>
+                </q-field>
               </div>
             </q-card-section>
           </div>
         </q-card>
+        <div class="col-12 q-mt-md">
+          <q-input
+            v-model="formData.evaluation"
+            label="กำหนดเกณฑ์การประเมิน"
+            dense
+            type="textarea"
+            outlined
+          />
+        </div>
         <q-separator color="grey-4" />
-        <q-toolbar class="fit row wrap justify-end items-start content-start">
+        <div class="col-12 row justify-end q-mt-md">
           <q-btn
             dense
             unelevated
             label="บันทึก"
-            id="onSubmit"
-            type="submit"
             color="public"
             class="q-px-md"
+            type="submit"
           >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
-        </q-toolbar>
+        </div>
       </div>
     </q-form>
   </div>
diff --git a/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue b/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
index a4a0f6b24..f62435599 100644
--- a/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
+++ b/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -21,8 +21,16 @@ const {
   success,
   date2Thai,
 } = mixin;
-const L1Editor = ref<string>("");
-const competencyName = ref<string>("");
+
+const formData = reactive({
+  competencyType: "",
+  competencyName: "",
+  definition: "",
+  level1: "",
+  level2: "",
+  evaluation: "",
+});
+
 async function onSubmit() {
   dialogConfirm($q, async () => {});
 }
@@ -32,12 +40,19 @@ async function onSubmit() {
   <div class="full-width">
     <q-form @submit.prevent greedy @validation-success="onSubmit()">
       <div class="col-12">
-        <q-input outlined v-model="competencyName" dense label="ชื่อสมรรถนะ" />
+        <q-input
+          outlined
+          v-model="formData.competencyName"
+          dense
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`]"
+          label="ชื่อสมรรถนะ"
+        />
       </div>
       <q-card-section class="col-12 q-px-none">
         <div>
           <q-editor
-            v-model="L1Editor"
+            v-model="formData.definition"
             :dense="$q.screen.lt.md"
             min-height="7rem"
             placeholder="คำจำกัดความ"
@@ -83,34 +98,25 @@ async function onSubmit() {
               </span>
             </q-card-section>
             <q-card-section class="q-pa-none col-6">
-              <div class="q-py-md q-mr-md">
-                <q-editor
-                  v-model="L1Editor"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
-
-                    ['unordered', 'ordered'],
+              <div class="q-mr-md">
+                <q-field
+                  ref="fieldRef"
+                  v-model="formData.level1"
+                  label-slot
+                  borderless
+                  :rules="[
+                    (val) => !!val || 'กรุณากรอก L1 ประเภทอำนวยการ ระดับสูง',
                   ]"
-                  :fonts="{
-                    arial: 'Arial',
-                    arial_black: 'Arial Black',
-                    comic_sans: 'Comic Sans MS',
-                    courier_new: 'Courier New',
-                    impact: 'Impact',
-                    lucida_grande: 'Lucida Grande',
-                    times_new_roman: 'Times New Roman',
-                    verdana: 'Verdana',
-                  }"
-                />
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      v-model="formData.level1"
+                      min-height="5rem"
+                      class="full-width"
+                    />
+                  </template>
+                </q-field>
               </div>
             </q-card-section>
           </div>
@@ -121,52 +127,51 @@ async function onSubmit() {
               </span>
             </q-card-section>
             <q-card-section class="q-pa-none col-6">
-              <div class="q-py-md q-mr-md">
-                <q-editor
-                  v-model="L1Editor"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
-
-                    ['unordered', 'ordered'],
+              <div class="q-mr-md">
+                <q-field
+                  ref="fieldRef"
+                  v-model="formData.level2"
+                  label-slot
+                  borderless
+                  :rules="[
+                    (val) => !!val || 'กรุณากรอก L2 ประเภทบริหาร ระดับสูง',
                   ]"
-                  :fonts="{
-                    arial: 'Arial',
-                    arial_black: 'Arial Black',
-                    comic_sans: 'Comic Sans MS',
-                    courier_new: 'Courier New',
-                    impact: 'Impact',
-                    lucida_grande: 'Lucida Grande',
-                    times_new_roman: 'Times New Roman',
-                    verdana: 'Verdana',
-                  }"
-                />
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      v-model="formData.level2"
+                      min-height="5rem"
+                      class="full-width"
+                    />
+                  </template>
+                </q-field>
               </div>
             </q-card-section>
           </div>
         </q-card>
+        <div class="col-12 q-mt-md">
+          <q-input
+            v-model="formData.evaluation"
+            outlined
+            label="กำหนดเกณฑ์การประเมิน"
+            type="textarea"
+            dense
+          />
+        </div>
         <q-separator color="grey-4" />
-        <q-toolbar class="fit row wrap justify-end items-start content-start">
+        <div class="col-12 row justify-end q-mt-md">
           <q-btn
             dense
             unelevated
             label="บันทึก"
-            id="onSubmit"
-            type="submit"
             color="public"
             class="q-px-md"
+            type="submit"
           >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
-        </q-toolbar>
+        </div>
       </div>
     </q-form>
   </div>