From 6b78719b5912d8b8554c72ee4bf590df2d1effdc Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Mon, 20 Mar 2023 13:01:27 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B8=A1=E0=B9=88?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B8=A5=E0=B8=9A=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A8=E0=B8=B6=E0=B8=81=E0=B8=A9?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .dockerignore                                 |  5 +
 Dockerfile                                    | 12 +++
 nginx.conf                                    | 30 ++++++
 src/components/DialogFooter.vue               |  4 +-
 src/components/Table.vue                      | 30 ++++--
 src/components/top.vue                        | 48 ++++++++-
 src/main.ts                                   |  4 +-
 src/modules/01_exam/components/ExamDetail.vue |  2 +-
 src/modules/01_exam/components/ExamForm.vue   | 69 +++++++++++--
 .../01_exam/components/Form/Career.vue        | 98 ++++++++++++++-----
 .../01_exam/components/Form/Document.vue      | 63 +++++++-----
 .../01_exam/components/Form/Education.vue     | 98 ++++++++++++++-----
 .../components/Form/Profile/Information.vue   |  2 +-
 src/modules/01_exam/views/ExamDetail.vue      | 49 ++++++++--
 src/router/index.ts                           | 28 +++---
 src/views/MainLayout.vue                      | 37 ++++---
 16 files changed, 432 insertions(+), 147 deletions(-)
 create mode 100644 .dockerignore
 create mode 100644 Dockerfile
 create mode 100644 nginx.conf

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..b82d800
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,5 @@
+**/node_modules
+**/dist
+Dockerfile
+docker-compose.yaml
+
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..5c805e9
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,12 @@
+# docker build . -t docker.frappet.com/demo/fe:latest
+FROM node:latest as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY ./ .
+RUN npm run build
+
+FROM nginx as production-stage
+RUN mkdir /app
+COPY --from=build-stage /app/dist /app
+COPY nginx.conf /etc/nginx/nginx.conf
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..6f61d6c
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,30 @@
+user  nginx;
+worker_processes  1;
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+events {
+  worker_connections  1024;
+}
+http {
+  include       /etc/nginx/mime.types;
+  default_type  application/octet-stream;
+  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+  access_log  /var/log/nginx/access.log  main;
+  sendfile        on;
+  keepalive_timeout  65;
+  server {
+    listen       80;
+    server_name  localhost;
+    location / {
+      root   /app;
+      index  index.html;
+      try_files $uri $uri/ /index.html;
+    }
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+      root   /usr/share/nginx/html;
+    }
+  }
+}
diff --git a/src/components/DialogFooter.vue b/src/components/DialogFooter.vue
index 3855e85..c2426f3 100644
--- a/src/components/DialogFooter.vue
+++ b/src/components/DialogFooter.vue
@@ -32,7 +32,7 @@
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
       <div v-else>
-        <q-btn
+        <!-- <q-btn
           flat
           round
           :disabled="!editvisible"
@@ -43,7 +43,7 @@
           v-if="modalEdit == true"
         >
           <q-tooltip>ยกเลิก</q-tooltip>
-        </q-btn>
+        </q-btn> -->
         <q-btn
           flat
           round
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 4329748..30392db 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -5,15 +5,18 @@
       v-model:edit="editBtn"
       :header="name"
       :icon="icon"
-      :add="checkAdd"
+      :add="clickAdd"
+      :editBtn="clickEdit"
+      :cancel="clickCancel"
       :history="false"
-      v-if="nameHeader"
+      :addData="false"
     />
-    <div class="q-pl-sm">
+    <!-- v-if="nameHeader" -->
+    <!-- <div class="q-pl-sm">
       <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus" v-if="addData">
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
-    </div>
+    </div> -->
     <q-space />
     <div class="items-center" style="display: flex">
       <!-- ค้นหาข้อความใน table -->
@@ -75,6 +78,7 @@
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
+        <q-th auto-width v-if="editBtn == true" />
       </q-tr>
     </template>
     <template #body="props">
@@ -83,7 +87,7 @@
   </q-table>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue'
+import { ref, useAttrs, watch } from 'vue'
 import HeaderTop from '@/components/top.vue'
 import type { Pagination } from '@/modules/01_exam/interface/index/Main'
 
@@ -127,6 +131,10 @@ const props = defineProps({
 
 const emit = defineEmits(['update:inputfilter', 'update:inputvisible', 'update:editvisible'])
 
+watch(props, (count: any, prevCount: any) => {
+  editBtn.value = props.editvisible
+})
+
 const updateEdit = (value: Boolean) => {
   emit('update:editvisible', value)
 }
@@ -141,11 +149,21 @@ const paginationLabel = (start: string, end: string, total: string) => {
   return start + '-' + end + ' ใน ' + total
 }
 
-const checkAdd = () => {
+const clickAdd = () => {
   //   props.validate();
   props.add()
 }
 
+const clickEdit = () => {
+  //   props.validate();
+  props.edit()
+}
+
+const clickCancel = () => {
+  //   props.validate();
+  props.cancel()
+}
+
 const edit = async () => {
   updateEdit(!props.editvisible)
   props.edit()
diff --git a/src/components/top.vue b/src/components/top.vue
index 87144c1..4341451 100644
--- a/src/components/top.vue
+++ b/src/components/top.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center">
-    <div class="flex items-center">
+    <div class="flex items-center" v-if="header != ''">
       <q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" />
       <div class="text-weight-medium text-dark col-12 row items-center text-header">
         {{ header }}
@@ -45,9 +45,42 @@
       </q-btn>
     </div>
     <div class="q-pl-sm" v-else>
-      <!-- <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus">
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="edit"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :disabled="!edit"
+        :color="!edit ? 'grey-7' : 'add'"
+        @click="add"
+        icon="mdi-plus"
+      >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-      </q-btn> -->
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :disabled="!edit"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
     </div>
     <q-space />
   </div>
@@ -56,12 +89,12 @@
 const props = defineProps({
   header: {
     type: String,
-    default: 'ข้อความ',
+    default: '',
     required: true
   },
   icon: {
     type: String,
-    default: 'mdi-help',
+    default: '',
     required: true
   },
   edit: {
@@ -89,6 +122,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
+  editBtn: {
+    type: Function,
+    default: () => console.log('not function')
+  },
   changeBtn: {
     type: Function,
     default: () => console.log('not function')
@@ -103,6 +140,7 @@ const updateEdit = (value: any) => {
 
 const ClickEdit = () => {
   updateEdit(!props.edit)
+  props.editBtn()
   props.changeBtn()
 }
 
diff --git a/src/main.ts b/src/main.ts
index 5cfd907..27e8ef4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -32,8 +32,8 @@ app.use(
       }
     },
     lang: th
-  },
-  quasarUserOptions
+  }
+  //   quasarUserOptions
 )
 
 app.component(
diff --git a/src/modules/01_exam/components/ExamDetail.vue b/src/modules/01_exam/components/ExamDetail.vue
index 171b13a..9205d72 100644
--- a/src/modules/01_exam/components/ExamDetail.vue
+++ b/src/modules/01_exam/components/ExamDetail.vue
@@ -54,7 +54,7 @@
     </div>
 
     <div class="row justify-center q-pa-md">
-      <q-btn color="primary" class="q-ml-md" label="สมัครสอบ" @click="applyCandidate" />
+      <q-btn color="primary" class="q-ml-md" label="ต่อไป" @click="applyCandidate" />
     </div>
   </div>
 </template>
diff --git a/src/modules/01_exam/components/ExamForm.vue b/src/modules/01_exam/components/ExamForm.vue
index 241d41a..1caf704 100644
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@@ -18,18 +18,22 @@
     <q-tab-panels v-model="tab" animated class="bg-white">
       <!-- ข้อมูลส่วนบุคคล -->
       <q-tab-panel name="profile">
-        <Profile :loader="loader" v-model:statusEdit="statusEditProfile" :step="step" />
+        <Profile :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
       </q-tab-panel>
 
       <!-- ประวัติการศีกษา -->
-      <q-tab-panel name="education"><Education :loader="loader" :step="step" /></q-tab-panel>
+      <q-tab-panel name="education"
+        ><Education :loader="loader" v-model:statusEdit="statusEdit" :step="step"
+      /></q-tab-panel>
 
       <!-- ประวัติการทำงาน/ฝึกงาน -->
-      <q-tab-panel name="career"><Career :loader="loader" :step="step" /></q-tab-panel>
+      <q-tab-panel name="career"
+        ><Career :loader="loader" v-model:statusEdit="statusEdit" :step="step"
+      /></q-tab-panel>
 
       <!-- ไฟล์ -->
       <q-tab-panel name="document">
-        <Document :loader="loader" v-model:statusEdit="statusEditDocument" :step="step" />
+        <Document :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
       </q-tab-panel>
     </q-tab-panels>
 
@@ -37,17 +41,34 @@
       <q-checkbox
         v-model="acceptTermOfUse"
         :disable="step !== 2"
+        v-if="step !== 2 || tab == 'document'"
         label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
       />
     </div>
 
     <div class="row justify-center q-pa-md">
+      <q-btn
+        color="primary"
+        class="q-ml-md"
+        label="กลับ"
+        @click="clickPreview(tab)"
+        v-if="step === 2 && (tab == 'education' || tab == 'career' || tab == 'document')"
+        icon="mdi-chevron-left"
+      />
+      <q-btn
+        color="primary"
+        class="q-ml-md"
+        label="ต่อไป"
+        @click="clickNext(tab)"
+        v-if="step === 2 && (tab == 'profile' || tab == 'education' || tab == 'career')"
+        icon-right="mdi-chevron-right"
+      />
       <q-btn
         color="primary"
         class="q-ml-md"
         label="สมัครสอบ"
         @click="okModalComfirm"
-        v-if="step === 2"
+        v-if="step === 2 && tab == 'document'"
         :disable="!acceptTermOfUse"
       />
     </div>
@@ -90,8 +111,7 @@ const props = defineProps({
 const tab = ref<string>('profile')
 const tabRaw = ref<string>('profile')
 const loader = ref<boolean>(false)
-const statusEditProfile = ref<boolean>(false)
-const statusEditDocument = ref<boolean>(false)
+const statusEdit = ref<boolean>(false)
 const acceptTermOfUse = ref<boolean>(false)
 const modalComfirm = ref<boolean>(false)
 const modalComfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
@@ -107,7 +127,7 @@ onMounted(async () => {
 })
 
 const okModalComfirm = () => {
-  if (statusEditProfile.value == true || statusEditDocument.value == true) {
+  if (statusEdit.value == true) {
     modalNoEditTittle.value = 'ไม่สามารถสมัครสอบได้?'
     modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
     modalNoEdit.value = true
@@ -128,8 +148,39 @@ const applyCandidate = () => {
   props.fetchStep()
 }
 
+const clickPreview = (val: string) => {
+  console.log(val)
+  switch (val) {
+    case 'profile':
+      return (tab.value = 'profile')
+    case 'education':
+      return (tab.value = 'profile')
+    case 'career':
+      return (tab.value = 'education')
+    case 'document':
+      return (tab.value = 'career')
+    default:
+      return (tab.value = 'profile')
+  }
+}
+
+const clickNext = (val: string) => {
+  switch (val) {
+    case 'profile':
+      return (tab.value = 'education')
+    case 'education':
+      return (tab.value = 'career')
+    case 'career':
+      return (tab.value = 'document')
+    case 'document':
+      return (tab.value = 'profile')
+    default:
+      return (tab.value = 'profile')
+  }
+}
+
 const changeTab = () => {
-  if (statusEditProfile.value == true || statusEditDocument.value == true) {
+  if (statusEdit.value == true) {
     modalNoEditTittle.value = 'ไม่สามารถเปลี่ยนแท็ปได้?'
     modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
     tab.value = tabRaw.value
diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 5d4f63f..8cb9506 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -2,14 +2,17 @@
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <q-form ref="myForm">
-      <ProfileTable
+      <Table
         :rows="rows"
         :columns="columns"
         :filter="filter"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
+        v-model:editvisible="edit"
         :add="clickAdd"
+        :edit="clickEdit"
+        :cancel="clickCancel"
         :nameHeader="false"
         :addData="addData"
       >
@@ -32,9 +35,20 @@
                 {{ col.value }}
               </div>
             </q-td>
+            <q-td auto-width v-if="edit === true">
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-trash-can-outline"
+                @click="clickDeleteRow(props.row)"
+              />
+            </q-td>
           </q-tr>
         </template>
-      </ProfileTable>
+      </Table>
     </q-form>
   </q-card>
   <!-- popup Edit window-->
@@ -171,7 +185,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 import { useExamDataStore } from '@/modules/01_exam/store'
-import ProfileTable from '@/components/Table.vue'
+import Table from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
 import { useQuasar } from 'quasar'
@@ -194,6 +208,10 @@ const props = defineProps({
   step: {
     type: Number,
     required: true
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true
   }
 })
 
@@ -232,7 +250,7 @@ const closeModalError = () => {
   }
 }
 
-const emit = defineEmits(['update:loader'])
+const emit = defineEmits(['update:loader', 'update:statusEdit'])
 
 const rows = ref<RequestItemsObject[]>([
   {
@@ -317,6 +335,10 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
   await changeExamColumns('career', count)
 })
 
+watch(edit, (count: boolean, prevCount: boolean) => {
+  emit('update:statusEdit', count)
+})
+
 onMounted(async () => {
   //   await fetchData()
   rawHistory.value = rows.value
@@ -331,7 +353,7 @@ const fetchData = async () => {}
  * กดดูข้อมูลก่อนหน้า
  */
 const clickPrevious = () => {
-  edit.value = false
+  //   edit.value = false
   rowIndex.value -= 1
   const row = rows.value[rowIndex.value]
   location.value = row.location
@@ -347,7 +369,7 @@ const clickPrevious = () => {
  * กดดูข้อมูลต่อไป
  */
 const clickNext = () => {
-  edit.value = false
+  //   edit.value = false
   rowIndex.value += 1
   const row = rows.value[rowIndex.value]
   location.value = row.location
@@ -391,6 +413,7 @@ const checkRowPage = () => {
  * กดปุ่มแก้ไขใน dialog
  */
 const clickEdit = () => {
+  edit.value = true
   next.value = false
   previous.value = false
 }
@@ -402,6 +425,23 @@ const clickAdd = () => {
   addRow()
 }
 
+/**
+ * ลบข้อมูลใน table
+ */
+const clickDeleteRow = (row: RequestItemsObject) => {
+  $q.dialog({
+    title: 'ยืนยันการลบข้อมูล',
+    message: 'หากต้องการลบกดให้กดตกลง',
+    cancel: true,
+    persistent: true
+  })
+    .onOk(() => {
+      rows.value = rows.value.filter((val: any) => val.id != row.id)
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {})
+}
+
 /**
  * กดบันทึกใน dialog
  */
@@ -447,7 +487,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  edit.value = false
+  //   edit.value = false
   editRow.value = false
 
   //   loader.value = true;
@@ -501,7 +541,7 @@ const clickClose = async () => {
 const selectData = (props: DataProps) => {
   modalEdit.value = true
   modal.value = true
-  edit.value = false
+  //   edit.value = false
   rawItem.value = props.row
   rowIndex.value = props.rowIndex
   location.value = props.row.location
@@ -510,7 +550,12 @@ const selectData = (props: DataProps) => {
   duration.value = props.row.duration
   reason.value = props.row.reason
   id.value = props.row.id
-  checkRowPage()
+  if (edit.value == true) {
+    next.value = false
+    previous.value = false
+  } else {
+    checkRowPage()
+  }
 }
 
 /**
@@ -519,7 +564,7 @@ const selectData = (props: DataProps) => {
 const addRow = () => {
   modalEdit.value = false
   modal.value = true
-  edit.value = true
+  //   edit.value = true
   location.value = ''
   position.value = ''
   salary.value = null
@@ -531,22 +576,23 @@ const addRow = () => {
  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
 const clickCancel = async () => {
-  if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
-      cancel: 'ยกเลิก',
-      ok: 'ยืนยัน',
-      persistent: true
-    }).onOk(async () => {
-      edit.value = false
-      checkRowPage()
-      await getData()
-    })
-  } else {
-    edit.value = false
-    checkRowPage()
-  }
+  //   if (editRow.value == true) {
+  //     $q.dialog({
+  //       title: `ข้อมูลมีการแก้ไข`,
+  //       message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
+  //       cancel: 'ยกเลิก',
+  //       ok: 'ยืนยัน',
+  //       persistent: true
+  //     }).onOk(async () => {
+  //       //   edit.value = false
+  //       checkRowPage()
+  //       await getData()
+  //     })
+  //   } else {
+  //     // edit.value = false
+  //     checkRowPage()
+  //   }
+  edit.value = false
 }
 
 /**
diff --git a/src/modules/01_exam/components/Form/Document.vue b/src/modules/01_exam/components/Form/Document.vue
index 816489c..dd15887 100644
--- a/src/modules/01_exam/components/Form/Document.vue
+++ b/src/modules/01_exam/components/Form/Document.vue
@@ -1,6 +1,6 @@
 <!-- card เอกสารหลักฐาน -->
 <template>
-  <q-card flat bordered class="col-12 row q-px-lg q-py-md q-mt-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <HeaderTop
       v-model:edit="edit"
       header="เอกสารหลักฐาน(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
@@ -21,42 +21,52 @@
               <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
             </q-item-section>
             <q-item-section top side>
-              <div class="row col-12">
+              <div class="q-gutter-sm">
+                <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
+                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+                </q-btn>
                 <q-btn
-                  class="gt-xs"
-                  size="12px"
-                  flat
-                  dense
-                  round
-                  color="blue"
-                  icon="mdi-download-outline"
-                />
-                <q-btn
-                  class="gt-xs"
                   size="12px"
                   flat
                   dense
                   round
+                  color="red"
                   icon="mdi-delete-outline"
-                  v-show="edit"
-                />
+                  v-if="edit"
+                >
+                  <q-tooltip>ลบไฟล์</q-tooltip>
+                </q-btn>
               </div>
             </q-item-section>
           </q-item>
         </q-list>
       </q-card>
-      <q-uploader
-        v-show="edit"
-        color="blue"
-        type="file"
-        flat
-        auto-upload
-        :factory="fileUpload"
-        class="full-width"
-        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-        bordered
-        label="[ไฟล์ jpg,png,pdf,csv,doc]"
-      />
+      <div v-if="edit" class="col-12 q-ma-none">
+        <q-separator class="q-mt-sm" />
+        <q-input
+          class="q-my-sm"
+          hide-bottom-space
+          :outlined="edit"
+          dense
+          lazy-rules
+          :readonly="!edit"
+          :borderless="!edit"
+          v-model="name"
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
+          :label="`${'ชื่อเอกสาร'}`"
+        />
+        <q-uploader
+          color="blue"
+          type="file"
+          flat
+          auto-upload
+          :factory="fileUpload"
+          class="full-width"
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+          bordered
+          label="[ไฟล์ jpg,png,pdf,csv,doc]"
+        />
+      </div>
     </div>
   </q-card>
 </template>
@@ -86,6 +96,7 @@ const props = defineProps({
 
 const edit = ref<boolean>(false)
 const addData = ref<boolean>(true)
+const name = ref<string>('')
 const files = ref<any>([
   {
     key: 1,
diff --git a/src/modules/01_exam/components/Form/Education.vue b/src/modules/01_exam/components/Form/Education.vue
index 42933f5..e9de0e0 100644
--- a/src/modules/01_exam/components/Form/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@@ -2,14 +2,17 @@
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <q-form ref="myForm">
-      <ProfileTable
+      <Table
         :rows="rows"
         :columns="columns"
         :filter="filter"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
+        v-model:editvisible="edit"
         :add="clickAdd"
+        :edit="clickEdit"
+        :cancel="clickCancel"
         :nameHeader="false"
         :addData="addData"
       >
@@ -29,9 +32,20 @@
                 {{ col.value }}
               </div>
             </q-td>
+            <q-td auto-width v-if="edit === true">
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-trash-can-outline"
+                @click="clickDeleteRow(props.row)"
+              />
+            </q-td>
           </q-tr>
         </template>
-      </ProfileTable>
+      </Table>
     </q-form>
   </q-card>
   <!-- popup Edit window-->
@@ -172,7 +186,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 import { useExamDataStore } from '@/modules/01_exam/store'
-import ProfileTable from '@/components/Table.vue'
+import Table from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
 import { useQuasar } from 'quasar'
@@ -196,6 +210,10 @@ const props = defineProps({
   step: {
     type: Number,
     required: true
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true
   }
 })
 
@@ -235,7 +253,7 @@ const closeModalError = () => {
     // fetchData();
   }
 }
-const emit = defineEmits(['update:loader'])
+const emit = defineEmits(['update:loader', 'update:statusEdit'])
 
 const rows = ref<RequestItemsObject[]>([
   {
@@ -322,6 +340,10 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
   await changeExamColumns('education', count)
 })
 
+watch(edit, (count: boolean, prevCount: boolean) => {
+  emit('update:statusEdit', count)
+})
+
 onMounted(async () => {
   //   await fetchData()
   //   await fetchQualification()
@@ -355,7 +377,7 @@ const fetchData = async () => {}
  * กดดูข้อมูลก่อนหน้า
  */
 const clickPrevious = () => {
-  edit.value = false
+  //   edit.value = false
   rowIndex.value -= 1
   const row = rows.value[rowIndex.value]
   qualification.value = row.qualification
@@ -372,7 +394,7 @@ const clickPrevious = () => {
  * กดดูข้อมูลต่อไป
  */
 const clickNext = () => {
-  edit.value = false
+  //   edit.value = false
   rowIndex.value += 1
   const row = rows.value[rowIndex.value]
   qualification.value = row.qualification
@@ -418,6 +440,7 @@ const checkRowPage = () => {
  * กดปุ่มแก้ไขใน dialog
  */
 const clickEdit = () => {
+  edit.value = true
   next.value = false
   previous.value = false
 }
@@ -429,6 +452,23 @@ const clickAdd = () => {
   addRow()
 }
 
+/**
+ * ลบข้อมูลใน table
+ */
+const clickDeleteRow = (row: RequestItemsObject) => {
+  $q.dialog({
+    title: 'ยืนยันการลบข้อมูล',
+    message: 'หากต้องการลบกดให้กดตกลง',
+    cancel: true,
+    persistent: true
+  })
+    .onOk(() => {
+      rows.value = rows.value.filter((val: any) => val.id != row.id)
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {})
+}
+
 /**
  * กดบันทึกใน dialog
  */
@@ -474,7 +514,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  edit.value = false
+  //   edit.value = false
   editRow.value = false
 
   //   loader.value = true;
@@ -528,7 +568,7 @@ const clickClose = async () => {
 const selectData = (props: DataProps) => {
   modalEdit.value = true
   modal.value = true
-  edit.value = false
+  //   edit.value = false
   rawItem.value = props.row
   rowIndex.value = props.rowIndex
   qualification.value = props.row.qualification
@@ -538,7 +578,12 @@ const selectData = (props: DataProps) => {
   name.value = props.row.name
   duration.value = props.row.duration
   id.value = props.row.id
-  checkRowPage()
+  if (edit.value == true) {
+    next.value = false
+    previous.value = false
+  } else {
+    checkRowPage()
+  }
 }
 
 /**
@@ -547,7 +592,7 @@ const selectData = (props: DataProps) => {
 const addRow = () => {
   modalEdit.value = false
   modal.value = true
-  edit.value = true
+  //   edit.value = true
   qualification.value = ''
   qualificationId.value = ''
   major.value = ''
@@ -560,22 +605,23 @@ const addRow = () => {
  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
 const clickCancel = async () => {
-  if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
-      cancel: 'ยกเลิก',
-      ok: 'ยืนยัน',
-      persistent: true
-    }).onOk(async () => {
-      edit.value = false
-      checkRowPage()
-      await getData()
-    })
-  } else {
-    edit.value = false
-    checkRowPage()
-  }
+  //   if (editRow.value == true) {
+  //     $q.dialog({
+  //       title: `ข้อมูลมีการแก้ไข`,
+  //       message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
+  //       cancel: 'ยกเลิก',
+  //       ok: 'ยืนยัน',
+  //       persistent: true
+  //     }).onOk(async () => {
+  //       edit.value = false
+  //       checkRowPage()
+  //       await getData()
+  //     })
+  //   } else {
+  //     edit.value = false
+  //     checkRowPage()
+  //   }
+  edit.value = false
 }
 
 /**
diff --git a/src/modules/01_exam/components/Form/Profile/Information.vue b/src/modules/01_exam/components/Form/Profile/Information.vue
index ccd2e58..9af96b7 100644
--- a/src/modules/01_exam/components/Form/Profile/Information.vue
+++ b/src/modules/01_exam/components/Form/Profile/Information.vue
@@ -314,7 +314,7 @@
             </q-img>
           </q-file>
         </div>
-        <div class="col-12 text-center" v-show="disabledPic">
+        <div class="col-12 text-center" v-if="disabledPic">
           <q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
             <q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
           </q-btn>
diff --git a/src/modules/01_exam/views/ExamDetail.vue b/src/modules/01_exam/views/ExamDetail.vue
index e315967..94a1584 100644
--- a/src/modules/01_exam/views/ExamDetail.vue
+++ b/src/modules/01_exam/views/ExamDetail.vue
@@ -1,9 +1,11 @@
 <!-- page:detail page รายการสอบทั้งหมด -->
 <template>
   <q-toolbar class="q-py-sm q-px-md bg-grey-2">
-    <q-toolbar-title class="toptitle text-dark col-12 row items-center">{{
-      tittle
-    }}</q-toolbar-title>
+    <q-toolbar-title class="toptitle text-dark col-12 row items-center">
+      {{ tittle }}
+      <q-space />
+      <q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" />
+    </q-toolbar-title>
   </q-toolbar>
   <q-card flat class="">
     <div class="justify-center">
@@ -17,15 +19,19 @@
         header-nav
         animated
         done-color="positive"
-        active-color="amber-7"
+        active-color="blue-7"
         inactive-color="positive"
+        done-icon="check"
+        :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil-outline' : 'mdi-eye-outline'"
       >
         <q-step
           :done="step > 1"
           :disable="stepRaw < 1"
           :name="1"
           title="อ่านคำชี้แจง"
-          :icon="stepRaw >= 1 ? 'check' : 'edit'"
+          :icon="
+            stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
+          "
         >
           <ExamDetail :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -33,8 +39,10 @@
           :done="step > 2"
           :disable="stepRaw < 2"
           :name="2"
-          title="กรอกข้อมูล"
-          :icon="stepRaw >= 2 ? 'check' : 'edit'"
+          title="ข้อมูลสมัครสอบ"
+          :icon="
+            stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
+          "
         >
           <ExamForm :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -43,7 +51,9 @@
           :disable="stepRaw < 3"
           :name="3"
           title="ชำระค่าธรรมเนียมการสอบ"
-          :icon="stepRaw >= 3 ? 'check' : 'edit'"
+          :icon="
+            stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
+          "
         >
           <ExamPayment :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -52,7 +62,9 @@
           :disable="stepRaw < 4"
           :name="4"
           title="สำเร็จ"
-          :icon="stepRaw >= 4 ? 'check' : 'edit'"
+          :icon="
+            stepRaw >= 4 ? (stepRaw == 4 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
+          "
         >
           <ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -67,7 +79,10 @@ import ExamDetail from '@/modules/01_exam/components/ExamDetail.vue'
 import ExamForm from '@/modules/01_exam/components/ExamForm.vue'
 import ExamPayment from '@/modules/01_exam/components/ExamPayment.vue'
 import ExamFinished from '@/modules/01_exam/components/ExamFinished.vue'
+import keycloak from '@/plugins/keycloak'
+import { useQuasar } from 'quasar'
 
+const $q = useQuasar()
 const examId = ref<string>('zxc')
 const step = ref<number>(1)
 const stepRaw = ref<number>(1)
@@ -118,4 +133,20 @@ const fetchStep = () => {
   stepRaw.value += 1
   step.value += 1
 }
+
+/**
+ * logout keycloak
+ * confirm ก่อนออกจากระบบ
+ */
+const doLogout = () => {
+  $q.dialog({
+    title: 'ยืนยันการออกจากระบบ',
+    message: `ต้องการออกจากระบบใช้หรือไม่?`,
+    cancel: 'ยกเลิก',
+    ok: 'ยืนยัน',
+    persistent: true
+  }).onOk(() => {
+    keycloak.logout()
+  })
+}
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index a99fef6..24f600a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -65,20 +65,20 @@ const router = createRouter({
 //   ]
 // })
 router.beforeEach((to, from, next) => {
-  if (to.meta.Auth) {
-    if (!keycloak.authenticated) {
-      keycloak.login({
-        redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
-        locale: 'th'
-      })
-    } else {
-      //   keycloak.updateToken(60);
-      next()
-    }
-  } else {
-    next()
-  }
-  //   next();
+  //   if (to.meta.Auth) {
+  //     if (!keycloak.authenticated) {
+  //       keycloak.login({
+  //         redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
+  //         locale: 'th'
+  //       })
+  //     } else {
+  //       //   keycloak.updateToken(60);
+  //       next()
+  //     }
+  //   } else {
+  //     next()
+  //   }
+  next()
 })
 
 export default router
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 941e7b7..7a5dad9 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import { useQuasar } from 'quasar'
 import { ref } from 'vue'
 // import keycloak from '@/plugins/keycloak'
 import { useRoute } from 'vue-router'
 import { menuList, options, notiList } from '../interface/main/index'
+import keycloak from '@/plugins/keycloak'
 
 const route = useRoute()
 
+const $q = useQuasar()
 const miniState = ref<boolean>(false)
 const active = ref<number>(0)
 const drawerL = ref<boolean>(false)
@@ -37,18 +40,15 @@ const activeMenu = (path: string) => {
  * confirm ก่อนออกจากระบบ
  */
 const doLogout = () => {
-  //   this.$q
-  //     .dialog({
-  //       title: "ยืนยันการออกจากระบบ",
-  //       message: `ต้องการออกจากระบบใช้หรือไม่?`,
-  //       cancel: "ยกเลิก",
-  //       ok: "ยืนยัน",
-  //       persistent: true,
-  //     })
-  //     .onOk(() => {
-  //       // this.$router.push("/logout")
-  //   keycloak.logout()
-  // });
+  $q.dialog({
+    title: 'ยืนยันการออกจากระบบ',
+    message: `ต้องการออกจากระบบใช้หรือไม่?`,
+    cancel: 'ยกเลิก',
+    ok: 'ยืนยัน',
+    persistent: true
+  }).onOk(() => {
+    keycloak.logout()
+  })
 }
 
 /**
@@ -92,12 +92,12 @@ const doLogout = () => {
 							<q-icon name="mdi-magnify" size="20px" color="grey-7" />
 						</template>
 					</q-input> -->
-        <q-btn class="bg-grey-3" flat dense round>
+        <!-- <q-btn class="bg-grey-3" flat dense round>
           <q-icon name="mdi-magnify" size="20px" color="grey-7" />
-        </q-btn>
+        </q-btn> -->
 
         <!-- Notification -->
-        <q-btn
+        <!-- <q-btn
           round
           dense
           flat
@@ -145,7 +145,6 @@ const doLogout = () => {
               <q-item v-close-popup class="q-pa-none">
                 <q-item-section avatar>
                   <q-avatar color="grey-3">
-                    <!-- <img src="https://cdn.quasar.dev/img/avatar.png" /> -->
                     <q-icon name="mdi-account" size="22px" color="grey-7" />
                   </q-avatar>
                 </q-item-section>
@@ -164,7 +163,6 @@ const doLogout = () => {
               <div class="column items-center col-12 q-py-md" color="grey-3">
                 <q-avatar size="72px" color="grey-4">
                   <q-icon name="mdi-account" color="grey-7" />
-                  <!-- <img :src="require('@/assets/logo.png')" /> -->
                 </q-avatar>
                 <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
                   {{ fullname }}
@@ -176,14 +174,13 @@ const doLogout = () => {
                   size="sm"
                   v-close-popup
                   @click="doLogout"
-                /><!--  -->
+                />
               </div>
 
               <div class="column col-12">
                 <q-separator />
                 <div class="column q-pb-md justify-center">
                   <div class="text-overline text-grey q-px-md q-pt-sm">เลือกโหมด</div>
-                  <!-- <q-option-group v-model="group" :options="options" color="primary"/> -->
                   <q-list dense v-for="op in options" :key="op.label">
                     <q-item clickable>
                       <q-item-section avatar>
@@ -202,7 +199,7 @@ const doLogout = () => {
               </div>
             </div>
           </q-btn-dropdown>
-        </div>
+        </div> -->
       </q-toolbar>
     </q-header>
     <!-- end header -->