ต่อ api history

src/views/HistoryView.vue

@@ -1,73 +1,98 @@
 <script setup lang="ts">
 import type { QTableProps } from 'quasar'
 import { ref, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
 import Table from '@/components/TableHistory.vue'
 import ToolBar from '@/components/ToolBar.vue'
-
+import http from '@/plugins/http'
+import config from '@/app.config'
+import { useCounterMixin } from '@/stores/mixin'
 // importStores
 import { useChekIn } from '@/stores/chekin'
 
+const mixin = useCounterMixin()
 const router = useRouter()
 const stores = useChekIn()
+const { showLoader, hideLoader, messageError } = mixin
+const { fetchHistoryList } = stores
+const $q = useQuasar() //ใช้ noti quasar
 
 onMounted(() => {
-  fetchlist()
+  // fetchlist()
+  fetchlistHistory()
 })
 
-function fetchlist() {
-  const listData = [
-    {
-      no: '1',
-      date: '13/08/66',
-      in: '11:20',
-      loIn: 'สำนักงาน ก.ก ',
-      out: '',
-      loOut: '',
-      status: '',
-      Morningstatus: '1',
-      AfternoonStatus: '1',
-      statusEdit: 'wait',
-    },
-    {
-      no: '2',
-      date: '12/08/66',
-      in: '08:04',
-      loIn: 'สำนักงาน ก.ก ',
-      out: '17:01',
-      loOut: 'สำนักงาน ก.ก ',
-      status: 'ลงเวลาเรียบร้อย',
-      Morningstatus: '2',
-      AfternoonStatus: '2',
-      statusEdit: 'edit',
-    },
-    {
-      no: '3',
-      date: '11/08/66',
-      in: '08:34',
-      loIn: 'สำนักงาน ก.ก ',
-      out: '17:36',
-      loOut: 'สำนักงาน ก.ก ',
-      status: 'สาย ทำงานครบ',
-      Morningstatus: '3',
-      AfternoonStatus: '2',
-      statusEdit: 'edit',
-    },
-    {
-      no: '4',
-      date: '10/08/66',
-      in: '08:48',
-      loIn: 'สำนักงาน ก.ก ',
-      out: '17:00',
-      loOut: 'สำนักงาน ก.ก ',
-      status: 'สาย ทำงานไม่ครบ',
-      Morningstatus: '3',
-      AfternoonStatus: '3',
-      statusEdit: 'approve',
-    },
-  ]
-  stores.fetchHistoryList(listData)
+//นำข้อมูลมาแสดง
+const fetchlistHistory = async () => {
+  showLoader()
+  await http
+    .get(config.API.history())
+    .then((res) => {
+      const data = res.data.result
+      fetchHistoryList(data)
+    })
+    .catch((err) => {
+      messageError($q, err)
+    })
+    .finally(() => {
+      hideLoader()
+    })
 }
+
+// function fetchlist() {
+//   const listData = [
+//     {
+//       no: '1',
+//       date: '13/08/66',
+//       in: '11:20',
+//       loIn: 'สำนักงาน ก.ก ',
+//       out: '',
+//       loOut: '',
+//       status: '',
+//       Morningstatus: '1',
+//       AfternoonStatus: '1',
+//       statusEdit: 'wait',
+//     },
+//     {
+//       no: '2',
+//       date: '12/08/66',
+//       in: '08:04',
+//       loIn: 'สำนักงาน ก.ก ',
+//       out: '17:01',
+//       loOut: 'สำนักงาน ก.ก ',
+//       status: 'ลงเวลาเรียบร้อย',
+//       Morningstatus: '2',
+//       AfternoonStatus: '2',
+//       statusEdit: 'edit',
+//     },
+//     {
+//       no: '3',
+//       date: '11/08/66',
+//       in: '08:34',
+//       loIn: 'สำนักงาน ก.ก ',
+//       out: '17:36',
+//       loOut: 'สำนักงาน ก.ก ',
+//       status: 'สาย ทำงานครบ',
+//       Morningstatus: '3',
+//       AfternoonStatus: '2',
+//       statusEdit: 'edit',
+//     },
+//     {
+//       no: '4',
+//       date: '10/08/66',
+//       in: '08:48',
+//       loIn: 'สำนักงาน ก.ก ',
+//       out: '17:00',
+//       loOut: 'สำนักงาน ก.ก ',
+//       status: 'สาย ทำงานไม่ครบ',
+//       Morningstatus: '3',
+//       AfternoonStatus: '3',
+//       statusEdit: 'approve',
+//     },
+//   ]
+//   stores.fetchHistoryList(listData)
+// }
 </script>
 <template>
   <div class="col-12 row justify-center">