- แก้ไขการแสดงผลหน้ารายการลงเวลาพิเศษ โดยปิดแสดงสถานะ

- coment code
2024-01-25 15:23:27 +07:00 · 2024-01-25 15:23:27 +07:00 · b24f4461ab
commit b24f4461ab
parent 373d36199d
8 changed files with 146 additions and 130 deletions
--- a/package.json
+++ b/package.json
@ -34,7 +34,7 @@
    "register-service-worker": "^1.7.2",
    "simple-vue-camera": "^1.1.3",
    "vite-plugin-pwa": "^0.16.7",
-    "vue": "^3.2.45",
+    "vue": "^3.4.15",
    "vue-router": "^4.1.6",
    "vue3-google-map": "^0.18.0"
  },
--- a/src/components/PopUp.vue
+++ b/src/components/PopUp.vue
@ -41,7 +41,7 @@ watch(
 </script>
 <template>
  <q-dialog v-model="props.modal" persistent>
-    <q-card class="column" :style="$q.screen.lt.sm ? 'width: 100%;': 'width: 450px;'">
+    <q-card class="column" :style="$q.screen.lt.sm ? 'width: 100%;': 'width: 320px;'">
      <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
      <FormTime
        :dataById="data"
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@ -2,11 +2,8 @@
 import type { QTableProps } from 'quasar'
 import { ref, watch } from 'vue'

-// importStores
 import { useChekIn } from '@/stores/chekin'
-
-// importComponent
-import Popup from '@/components/PopUp.vue'
+import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ

 const stores = useChekIn()
 const selected = ref<string[]>([])
@ -38,36 +35,6 @@ const props = defineProps({
    defualt: '',
    required: true,
  },
-  nornmalData: {
-    type: Boolean,
-    defualt: false,
-  },
-  nextPageVisible: {
-    type: Boolean,
-    defualt: false,
-  },
-  publicData: {
-    type: Boolean,
-    defualt: true,
-    required: false,
-  },
-  updateData: {
-    type: Boolean,
-    defualt: true,
-    required: false,
-  },
-  statusPayment: {
-    type: Boolean,
-    required: false,
-  },
-  setSeat: {
-    type: Boolean,
-    required: false,
-  },
-  publicNoBtn: {
-    type: Boolean,
-    defualt: false,
-  },
  fetchData: {
    type: Function,
    default: () => console.log('not function'),
@ -121,71 +88,121 @@ async function filterFn() {
 }

 /** column history table */
-const columns = ref<QTableProps['columns']>([
-  {
-    name: 'checkInDate',
-    align: 'left',
-    label: 'วัน/เดือน/ปี',
-    sortable: true,
-    field: 'checkInDate',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-  {
-    name: 'checkInTime',
-    align: 'left',
-    label: 'เวลาเข้างาน',
-    sortable: true,
-    field: 'checkInTime',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-  {
-    name: 'checkInLocation',
-    align: 'left',
-    label: 'พิกัด',
-    sortable: true,
-    field: 'checkInLocation',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-  },
-  {
-    name: 'checkInStatus',
-    align: 'left',
-    label: 'สถานะช่วงเช้า',
-    sortable: true,
-    field: 'checkInStatus',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-  {
-    name: 'checkOutTime',
-    align: 'left',
-    label: 'เวลาออกงาน',
-    sortable: true,
-    field: 'checkOutTime',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-  {
-    name: 'checkOutLocation',
-    align: 'left',
-    label: 'พิกัด',
-    sortable: true,
-    field: 'checkOutLocation',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-  },
-  {
-    name: 'checkOutStatus',
-    align: 'left',
-    label: 'สถานะช่วงบ่าย',
-    sortable: true,
-    field: 'checkOutStatus',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-])
+const columns = ref<QTableProps['columns']>(
+  props.tab == 'history'
+    ? [
+        {
+          name: 'checkInDate',
+          align: 'left',
+          label: 'วัน/เดือน/ปี',
+          sortable: true,
+          field: 'checkInDate',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkInTime',
+          align: 'left',
+          label: 'เวลาเข้างาน',
+          sortable: true,
+          field: 'checkInTime',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkInLocation',
+          align: 'left',
+          label: 'พิกัด',
+          sortable: true,
+          field: 'checkInLocation',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px',
+        },
+        {
+          name: 'checkInStatus',
+          align: 'left',
+          label: 'สถานะช่วงเช้า',
+          sortable: true,
+          field: 'checkInStatus',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkOutTime',
+          align: 'left',
+          label: 'เวลาออกงาน',
+          sortable: true,
+          field: 'checkOutTime',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkOutLocation',
+          align: 'left',
+          label: 'พิกัด',
+          sortable: true,
+          field: 'checkOutLocation',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px',
+        },
+        {
+          name: 'checkOutStatus',
+          align: 'left',
+          label: 'สถานะช่วงบ่าย',
+          sortable: true,
+          field: 'checkOutStatus',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+      ]
+    : [
+        {
+          name: 'checkInDate',
+          align: 'left',
+          label: 'วัน/เดือน/ปี',
+          sortable: true,
+          field: 'checkInDate',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkInTime',
+          align: 'left',
+          label: 'เวลาเข้างาน',
+          sortable: true,
+          field: 'checkInTime',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkInLocation',
+          align: 'left',
+          label: 'พิกัด',
+          sortable: true,
+          field: 'checkInLocation',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px',
+        },
+        {
+          name: 'checkOutTime',
+          align: 'left',
+          label: 'เวลาออกงาน',
+          sortable: true,
+          field: 'checkOutTime',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkOutLocation',
+          align: 'left',
+          label: 'พิกัด',
+          sortable: true,
+          field: 'checkOutLocation',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px',
+        },
+      ]
+)
 const visibleColumns = ref<string[]>([
  'checkInDate',
  'checkInTime',
--- a/src/interface/response/Main.ts
+++ b/src/interface/response/Main.ts
@ -5,7 +5,7 @@ interface Noti {
  type: string
  payload: null
  isOpen: false
-  receiveDate: Date | null
+  receiveDate: Date
  openDate: null
  createdFullName: string
 }
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@ -47,10 +47,7 @@ function functionFetch() {
  stores.tab === 'history' ? fetchlistHistory() : fetchlistTime()
 }

-/**
- * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง
- * @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง
- */
+/*** ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง */
 async function fetchlistHistory() {
  showLoader()
  await http
@ -74,6 +71,7 @@ async function fetchlistHistory() {
    })
 }

+/** ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ */
 async function fetchlistTime() {
  showLoader()
  await http
@ -124,6 +122,7 @@ watch(
  }
 )
 </script>
+
 <template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-12">
@ -211,4 +210,4 @@ watch(
      </q-card>
    </div>
  </div>
-</template>
+</template>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -1,20 +1,12 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
-import keycloak from '@/plugins/keycloak'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
 import http from '@/plugins/http'
 import config from '@/app.config'
-
-// import Type
 import type { FormRef } from '@/interface/response/checkin'
-
-// import components
 import MapCheck from '@/components/AscGISMap.vue'
-
-// import Stores
 import { useCounterMixin } from '@/stores/mixin'

 const mixin = useCounterMixin()
--- a/src/views/MianView.vue
+++ b/src/views/MianView.vue
@ -6,16 +6,13 @@ import keycloak from '@/plugins/keycloak'
 import http from '@/plugins/http'
 import config from '@/app.config'

-// import Type
 import type { notiType } from '@/interface/index/Main'
-
-// import Stores
 import { useCounterMixin } from '@/stores/mixin'
+import type { Noti } from '@/interface/response/Main'

 const mixin = useCounterMixin()
 const {
  date2Thai,
-  showLoader,
  hideLoader,
  messageError,
  dialogRemove,
@ -28,19 +25,24 @@ const notiTrigger = ref<boolean>(false)
 const notiList = ref<notiType[]>([])
 const totalNotiList = ref<number>(0)
 const totalNoti = ref<number>(0)
+/*** ฟังก์ชั่นดึงข้อมูลจำนวนการแจ้งเตือน */
 async function fetchTotolNotificate() {
  await http
    .get(config.API.msgNotificateTotal)
    .then((res) => {
      totalNoti.value = res.data.result
    })
-    .catch((err) => {
-      messageError($q, err)
-    })
+    // .catch((err) => {
+    //   messageError($q, err)
+    // })
 }

 const statusLoad = ref<boolean>(false)
-/** function เรียกข้อมุลแจ้งเตือน */
+/**
+ * ฟังก์ชั่นดึงข้อมูลรายการแจ้งเตือน
+ * @param index page ที่ต้องการโหลดข้อมูล
+ * @param type DEL คือโหลดหลังลบข้อความ, NOMAL คือกรณีโหลดข้อมูลปกติ
+ */
 async function fetchNotifications(index: number, type: string) {
  await http
    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
@ -51,7 +53,7 @@ async function fetchNotifications(index: number, type: string) {
      if (type === 'DEL') {
        notiList.value = []
      }
-      response.map((e: any) => {
+      response.map((e: Noti) => {
        list.push({
          id: e.id,
          sender:
@ -66,12 +68,9 @@ async function fetchNotifications(index: number, type: string) {
      notiList.value.push(...list)
      statusLoad.value = totalNotiList.value === 0 ? true : false
    })
-    .catch((err) => {
-      messageError($q, err)
-    })
-    .finally(() => {
-      // hideLoader()
-    })
+    // .catch((err) => {
+    //   messageError($q, err)
+    // })
 }

 /**
@ -114,7 +113,13 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
  hour: '2-digit',
  minute: '2-digit',
 }
+
 const page = ref<number>(0)
+/**
+ * โหลดรายการแจ้งเตือนเพิ่มเมื่อ scroll
+ * @param index 
+ * @param done 
+ */
 function onLoad(index: any, done: any) {
  if (
    notiList.value.length < totalNotiList.value ||
@ -150,6 +155,7 @@ onMounted(async () => {
  }
 })
 </script>
+
 <template>
  <q-layout view="hHh LpR fFr">
    <!-- header -->
@ -351,6 +357,7 @@ onMounted(async () => {
    </q-page-container>
  </q-layout>
 </template>
+
 <style>
 .bg-drawer {
  background: #242a3d;
--- a/src/views/SampleCamera.vue
+++ b/src/views/SampleCamera.vue
@ -1,3 +1,4 @@
+<!-- File test function -->
 <script setup lang="ts">
 import Camera from 'simple-vue-camera'
 import { ref } from 'vue'