From 73bca6f4e913060287b3018ac61cebb210d590eb Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 1 Nov 2023 11:52:22 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=87?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HelloWorld.vue                 |  20 +-
 .../checkin/componenst/tableHistory.vue       |   2 +-
 src/modules/checkin/views/HistoryView.vue     | 233 ++++++++++++++++++
 src/router/index.ts                           |   7 +-
 4 files changed, 250 insertions(+), 12 deletions(-)
 create mode 100644 src/modules/checkin/views/HistoryView.vue

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index de9abf0..fb6da1c 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -3,8 +3,8 @@
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-card flat class="row col-12 cardNone">
         <div :class="getClass(checkIn)">
-          <!-- <div class="col-2">
-            <q-btn
+          <div class="col-2">
+            <!-- <q-btn
               icon="mdi-arrow-left"
               unelevated
               round
@@ -12,15 +12,15 @@
               flat
               color="white"
               @click="router.go(-1)"
-            />
-          </div> -->
-          <span class="text-body1 text-weight-bold col-12 text-center">
+            /> -->
+          </div>
+          <span class="text-body1 text-weight-bold col-8 text-center">
             <span v-if="checkIn">ลงเวลาเข้างาน</span>
             <span v-else>ลงเวลาออกงาน</span>
           </span>
-          <!-- <div class="col-2 text-right">
+          <div class="col-2 text-right">
             <q-btn
-              icon="mdi-history"
+              icon="history"
               unelevated
               rounded
               dense
@@ -30,7 +30,7 @@
               :class="$q.screen.gt.xs ? 'q-px-sm' : ''"
               @click="router.push('/check-in/history')"
             />
-          </div> -->
+          </div>
         </div>
         <div class="col-12 q-pa-md text-grey-9">
           <div class="col-12 row justify-center">
@@ -257,12 +257,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-// import { useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import moment, { Moment } from "moment";
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
-// const router = useRouter();
+const router = useRouter();
 const dateNow = ref(new Date());
 const Thai = ref(dateNow.value);
 const checkIn = ref(true); //เช็คการเช็คอิน ถ้าลงเวลาครั้งแรกเป็นเช็คอิน(สีเขียว) true แต่ถ้าครั้ง 2 เป็นเช็คเอ้าท์(สีแดง)
diff --git a/src/modules/checkin/componenst/tableHistory.vue b/src/modules/checkin/componenst/tableHistory.vue
index fa32f23..1fdd3e5 100644
--- a/src/modules/checkin/componenst/tableHistory.vue
+++ b/src/modules/checkin/componenst/tableHistory.vue
@@ -108,7 +108,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, defineProps, defineEmits } from "vue";
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
diff --git a/src/modules/checkin/views/HistoryView.vue b/src/modules/checkin/views/HistoryView.vue
new file mode 100644
index 0000000..ebb85d9
--- /dev/null
+++ b/src/modules/checkin/views/HistoryView.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <q-card flat class="row col-12 cardNone">
+        <div
+          class="bg-secondary text-white col-12 row items-center q-px-md q-py-sm"
+        >
+          <div class="col-2">
+            <q-btn
+              icon="arrow_backt"
+              unelevated
+              round
+              dense
+              flat
+              color="white"
+              @click="router.go(-1)"
+            />
+          </div>
+          <q-space />
+          <span class="text-body1 text-weight-bold col-8 text-center"
+            >ประวัติการลงเวลา</span
+          >
+          <div class="col-2"></div>
+        </div>
+        <div class="col-12 q-pa-md text-grey-9">
+          <Table
+            :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
+            :rows="rows"
+            :columns="columns"
+            :filter="filter"
+            :visible-columns="visibleColumns"
+            v-model:inputfilter="filter"
+            v-model:inputvisible="visibleColumns"
+            :pagination="initialPagination"
+            :inputShow="false"
+            :grid="$q.screen.gt.xs ? false : true"
+          >
+            <template #columns="props">
+              <q-tr :props="props">
+                <q-td key="no" :props="props">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="date" :props="props">
+                  {{ props.row.date }}
+                </q-td>
+                <q-td key="in" :props="props">
+                  {{ props.row.in }}
+                </q-td>
+                <q-td key="loIn" :props="props">
+                  {{ props.row.loIn }}
+                </q-td>
+                <q-td key="out" :props="props">
+                  {{ props.row.out }}
+                </q-td>
+                <q-td key="loOut" :props="props">
+                  {{ props.row.loOut }}
+                </q-td>
+                <q-td key="status" :props="props">
+                  <span
+                    :class="
+                      props.row.status == 'ลงเวลาเรียบร้อย'
+                        ? 'text-blue'
+                        : 'text-orange'
+                    "
+                    >{{ props.row.status }}</span
+                  >
+                </q-td>
+              </q-tr>
+            </template>
+            <template #item="props">
+              <div
+                class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+              >
+                <q-card bordered flat class="q-py-sm shadow-0">
+                  <q-list dense>
+                    <q-item
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <q-item-section>
+                        <q-item-label caption>{{ col.label }}</q-item-label>
+                      </q-item-section>
+                      <q-item-section side>
+                        <q-item-label>
+                          <span
+                            v-if="col.name == 'status'"
+                            :class="
+                              props.row.status == 'ลงเวลาเรียบร้อย'
+                                ? 'text-blue'
+                                : 'text-orange'
+                            "
+                            >{{ col.value }}</span
+                          >
+                          <span v-else class="text-black">{{ col.value }}</span>
+                        </q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
+          </Table>
+        </div>
+      </q-card>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import Table from "@/modules/checkin/componenst/tableHistory.vue";
+
+const router = useRouter();
+
+const filter = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "no",
+  "date",
+  "in",
+  "loIn",
+  "out",
+  "loOut",
+  "status",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5%;",
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วัน/เดือน/ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "in",
+    align: "left",
+    label: "เวลาเข้างาน",
+    sortable: true,
+    field: "in",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "loIn",
+    align: "left",
+    label: "พิกัด",
+    sortable: true,
+    field: "loIn",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "out",
+    align: "left",
+    label: "เวลาออกงาน",
+    sortable: true,
+    field: "out",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "loOut",
+    align: "left",
+    label: "พิกัด",
+    sortable: true,
+    field: "loOut",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:10%;",
+  },
+]);
+const rows = ref<any>([
+  {
+    no: "1",
+    date: "13/08/66",
+    in: "11:20",
+    loIn: "สำนักงาน ก.ก ",
+    out: "",
+    loOut: "",
+    status: "",
+  },
+  {
+    no: "2",
+    date: "12/08/66",
+    in: "08:04",
+    loIn: "สำนักงาน ก.ก ",
+    out: "17:01",
+    loOut: "สำนักงาน ก.ก ",
+    status: "ลงเวลาเรียบร้อย",
+  },
+  {
+    no: "3",
+    date: "11/08/66",
+    in: "08:34",
+    loIn: "สำนักงาน ก.ก ",
+    out: "17:36",
+    loOut: "สำนักงาน ก.ก ",
+    status: "สาย ทำงานครบ",
+  },
+  {
+    no: "4",
+    date: "10/08/66",
+    in: "08:48",
+    loIn: "สำนักงาน ก.ก ",
+    out: "17:00",
+    loOut: "สำนักงาน ก.ก ",
+    status: "สาย ทำงานไม่ครบ",
+  },
+]);
+const initialPagination = ref({
+  rowsPerPage: 0,
+});
+</script>
diff --git a/src/router/index.ts b/src/router/index.ts
index ae16338..65ac2b1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import HomeView from "../views/HomeView.vue";
-
+import history from "../modules/checkin/views/HistoryView.vue";
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
@@ -16,6 +16,11 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   },
+  {
+    path: "/check-in/history",
+    name: "history",
+    component: history,
+  },
 ];
 
 const router = createRouter({