Merge branch 'develop' into NiceDev

# Conflicts:
#	src/modules/06_evaluate/components/DialogMain.vue

src/modules/06_evaluate/components/DialogMain.vue

@@ -12,6 +12,7 @@ const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useEvaluateStore();
+const slide = ref<string>('1');
 
 const { dialogConfirm } = mixin;
 
@@ -38,6 +39,7 @@ function prevStep() {
 }
 
 function onCklicNext() {
+<<<<<<< HEAD
   dialogConfirm(
     $q,
     () => {
@@ -50,6 +52,10 @@ function onCklicNext() {
     "ยืนยันการดำเนินการ",
     "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
   );
+=======
+  const type = props.menu ? props.menu.val?.toLowerCase() : "";
+  router.push(`/evaluate/add/${type}`);
+>>>>>>> develop
 }
 
 const thumbStyle = ref<any>({
@@ -75,180 +81,244 @@ watch(props, () => {
 
 <template>
   <q-dialog v-model="props.modal">
-    <q-card style="width: 800px; max-width: 90vw">
+    <q-card style="width: 800px; max-width: 90vw; border-radius: 20px">
       <DialogHeader
+        class="text-center text-edit"
         :tittle="`ขั้นตอนการ${props.menu ? props.menu.label : ''}`"
         :close="props.close"
         elevated
       />
       <q-separator />
+        <q-carousel
+          v-model="slide"
+          transition-prev="scale"
+          transition-next="scale"
+          swipeable
+          animated
+          control-type="regular"
+          control-color="grey-5"
+          navigation
+          padding
+          arrows
+          
+          height="auto"
+          class="text-dark rounded-borders"
+        >
+        <template v-slot:navigation-icon="{ active, btnProps, onClick }">
+        <q-btn v-if="active" size="xs" :icon="btnProps.icon" color="edit" flat round dense @click="onClick" />
+        <q-btn v-else size="xs" :icon="btnProps.icon" color="grey" flat round dense @click="onClick" />
+      </template>
+          <q-carousel-slide name="1" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page1.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ตรวจสอบคุณสมบัติ</div>
+								</div>
+                ตรวจสอบคุณสมบัติของตนเอง เพื่อทำการยื่นขอประเมิน
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-      <q-scroll-area
-        :thumb-style="thumbStyle"
-        :bar-style="barStyle"
-        style="height: 500px"
-      >
-        <q-card-section class="q-pt-none">
-          <p class="q-mt-md">
-            การ{{ props.menu ? props.menu.label : "" }}มีทั้งหมด 9 ขั้นตอน
-          </p>
+          
+          <q-carousel-slide name="2" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page2.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">จัดเตรียมเอกสารเล่ม 1</div>
+								</div>
+                ดาวน์โหลดเอกสารต้นแบบ ทำการกรอกข้อมูลในฟอร์มให้ครบ และอัปโหลดเข้าสู่ระบบ
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-          <q-stepper
-            v-model="step"
-            class="q-pt-none"
-            vertical
-            animated
-            flat
-            ref="stepper"
-            :bordered="false"
-            header-nav
-          >
-            <q-step
-              keep-alive
-              :name="1"
-              prefix="1"
-              title="ตรวจสอบคุณสมบัติ"
-              icon="settings"
-              :done="step > 1"
-            >
-              ตรวจสอบคุณสมบัติของตนเอง เพื่อทำการยื่นขอประเมิน
-              โดยมีหัวข้อตรวจสอบดังนี้
-              <ol>
-                <li>คุณวุฒิการศึกษา</li>
-                <li>ประวัติการรับราชการ</li>
-                <li>ประสบการณ์ในการปฏิบัติงาน</li>
-                <li>
-                  ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
-                </li>
-                <li>
-                  มีคุณสมบัติตรงตามคุณสมบัติเฉพาะ สำหรับตำแหน่งที่กำหนด
-                  ในมาตรฐานกำหนดตำแหน่ง
-                </li>
-                <li>
-                  มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ และ/หรือ
-                  คุณวุฒิเพิ่มเติมครบถ้วนตามที่ ก.ก. กำหนด (แพทย์พยาบาล
-                  วิศวกรโยธา สถาปนิก ฯลฯ)
-                </li>
-                <li>
-                  มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคย
-                  ดำรงตำแหน่งในสายงานที่จะคัดเลือก
-                  ตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก
-                </li>
-              </ol>
-            </q-step>
+          <q-carousel-slide name="3" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page3.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ตรวจสอบเอกสารเล่ม 1</div>
+								</div>
+                ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 1 และยืนยันการยื่นเอกสาร
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="2"
-              prefix="2"
-              title="จัดเตรียมเอกสารเล่ม 1"
-              :done="step >= 2"
-            >
-              ดาวน์โหลดเอกสารต้นแบบ ทำการกรอกข้อมูลในฟอร์มให้ครบ
-              และอัปโหลดเข้าสู่ระบบ โดยมีรายการเอกสารดังนี้
-              <ol>
-                <li>แบบพิจารณาคุณสมบัติบุคคล</li>
-                <li>แบบแสดงรายละเอียดการเสนอผลงาน</li>
-                <li>
-                  แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-                  (เอกสารแบบ ก.)
-                </li>
-                <li>แบบประเมินคุณลักษณะบุคคล</li>
-                <li>แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)</li>
-                <li>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</li>
-              </ol>
-            </q-step>
+          <q-carousel-slide name="4" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page4.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">รอตรวจสอบคุณสมบัติ</div>
+								</div>
+                ขั้นตอนนี้คำขอของคุณจะถูกส่งไปยังเจ้าหน้าที่ที่รับผิดชอบ และทางเจ้าหน้าที่จะทำการตรวจสอบคุณสมบัติ
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="3"
-              prefix="3"
-              title="ตรวจสอบเอกสารเล่ม 1"
-              :done="step >= 3"
-            >
-              ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 1 และยืนยันการยื่นเอกสาร
-            </q-step>
+          <q-carousel-slide name="5" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page5.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-5-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ประกาศบนเว็บไซต์</div>
+								</div>
+                เอกสารที่เกี่ยวข้องจะถูกประกาศขึ้นบนเว็บไซต์เป็นเวลา 30 วัน
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="4"
-              prefix="4"
-              title="รอตรวจสอบคุณสมบัติ"
-              :done="step >= 4"
-            >
-              ขั้นตอนนี้คำขอของคุณจะถูกส่งไปยังเจ้าหน้าที่ที่รับผิดชอบ
-              และทางเจ้าหน้าที่จะทำการตรวจสอบคุณสมบัติ
-            </q-step>
+          <q-carousel-slide name="6" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page6.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-6-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">จัดเตรียมเอกสารเล่ม 2</div>
+								</div>
+                ผู้ประเมินทำการอัปโหลดเอกสารเล่ม 2 โดยมีระยะเวลาการส่งผลงานหลังจากประกาศบนเว็บไซต์แล้ว 6 เดือน
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="5"
-              prefix="5"
-              title="ประกาศบนเว็บไซต์"
-              :done="step >= 5"
-            >
-              เอกสารที่เกี่ยวข้องจะถูกประกาศขึ้นบนเว็บไซต์เป็นเวลา 30 วัน
-            </q-step>
+          <q-carousel-slide name="7" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page7.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-7-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ตรวจสอบเอกสารเล่ม 2</div>
+								</div>
+                ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 2 และยืนยันการยื่นเอกสาร
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="6"
-              prefix="6"
-              title="จัดเตรียมเอกสารเล่ม 2"
-              :done="step >= 6"
-            >
-              ผู้ประเมินทำการอัปโหลดเอกสารเล่ม 2
-              โดยมีระยะเวลาการส่งผลงานหลังจากประกาศบนเว็บไซต์แล้ว 6 เดือน
-            </q-step>
+          <q-carousel-slide name="8" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page8.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-8-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">รอพิจารณาผล</div>
+								</div>
+                เจ้าหน้าที่ทำการพิจารณาผลการประเมิน และดำเนินการดาวน์โหลดเอกสารต้นแบบ กรอกข้อมูลในฟอร์มให้ครบ และอัปโหลดเข้าสู่ระบบ
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step
-              :name="7"
-              prefix="7"
-              title="ตรวจสอบเอกสารเล่ม 2"
-              :done="step >= 7"
-            >
-              ผู้ประเมินทำการตรวจสอบเอกสารเล่ม 2 และยืนยันการยื่นเอกสาร
-            </q-step>
+          <q-carousel-slide name="9" class="no-wrap">
+            <q-card bordered>
+              <q-card-section class="bg-grey-2" style="height: 150px;">
+                <div class="text-center">
+                  <q-img
+                    class="absolute-center"
+                    src="@/modules/06_evaluate/components/img/page9.png"
+                    spinner-color="white"
+                    style="height: auto; max-width: 100px;"
+                  />
+                </div>
+              </q-card-section>
+              <q-card-actions vertical align="left" class="q-pa-lg">
+                <div class="flex">
+									<q-icon name="mdi-numeric-9-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">เสร็จสิ้น</div>
+								</div>
+                เสร็จสิ้นการประเมิน
+              </q-card-actions>
+            </q-card>
+          </q-carousel-slide>
 
-            <q-step :name="8" prefix="8" title="รอพิจารณาผล" :done="step >= 8">
-              เจ้าหน้าที่ทำการพิจารณาผลการประเมิน
-              และดำเนินการดาวน์โหลดเอกสารต้นแบบ กรอกข้อมูลในฟอร์มให้ครบ
-              และอัปโหลดเข้าสู่ระบบ
-              โดยมีรายการเอกสารที่เกี่ยวข้องกับการประเมินดังนี้
-              <ol>
-                <li>
-                  แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน
-                  (เอกสารแบบ ค)
-                </li>
-                <li>บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)</li>
-                <li>แบบประเมินผลงาน (เอกสารหมายเลข 16)</li>
-                <li>แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)</li>
-                <li>แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)</li>
-                <li>แบบสรุปผลการประเมิน (เอกสารแบบ ง)</li>
-              </ol>
-
-              ผู้ประเมินสามารถแก้ไขเอกสารเล่ม 2 โดยการอัปโหลดเอกสารเล่ม 2
-              (ฉบับแก้ไข) ได้
-            </q-step>
-
-            <q-step :name="9" prefix="9" title="เสร็จสิ้น" :done="step >= 9">
-              เสร็จสิ้นการประเมิน
-            </q-step>
-          </q-stepper>
-        </q-card-section>
-      </q-scroll-area>
 
+        </q-carousel>
       <q-separator />
-      <q-card-actions align="right">
+      <q-card-actions align="right" class="bg-edit q-px-md">
         <q-btn
-          v-if="step > 1"
+          style="border-radius: 10px; padding: 5px 20px"
           unelevated
+          icon-right="mdi-arrow-right"
           outline
-          color="public"
-          label="ก่อนหน้า"
-          @click="prevStep()"
-        />
-        <q-btn
-          unelevated
-          :outline="!(step == 9)"
-          color="public"
-          :label="step == 9 ? 'ดำเนินการต่อ' : 'ถัดไป'"
-          @click="step == 9 ? onCklicNext() : nextStep()"
+          color="white"
+          label="ข้าม"
+          @click="onCklicNext()"
         />
       </q-card-actions>
     </q-card>