upload new version

src/views/HistoryView.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import Table from "@/components/TableHistory.vue";
+import ToolBar from "@/components/ToolBar.vue";
+
+// importStores
+import { useChekIn } from "@/stores/chekin";
+
+const router = useRouter();
+const stores = useChekIn();
+
+onMounted(() => {
+  fetchlist();
+});
+
+function fetchlist() {
+  const listData = [
+    {
+      no: "1",
+      date: "13/08/66",
+      in: "11:20",
+      loIn: "สำนักงาน ก.ก ",
+      out: "",
+      loOut: "",
+      status: "",
+      Morningstatus: "1",
+      AfternoonStatus: "1",
+    },
+    {
+      no: "2",
+      date: "12/08/66",
+      in: "08:04",
+      loIn: "สำนักงาน ก.ก ",
+      out: "17:01",
+      loOut: "สำนักงาน ก.ก ",
+      status: "ลงเวลาเรียบร้อย",
+      Morningstatus: "2",
+      AfternoonStatus: "2",
+    },
+    {
+      no: "3",
+      date: "11/08/66",
+      in: "08:34",
+      loIn: "สำนักงาน ก.ก ",
+      out: "17:36",
+      loOut: "สำนักงาน ก.ก ",
+      status: "สาย ทำงานครบ",
+      Morningstatus: "3",
+      AfternoonStatus: "2",
+    },
+    {
+      no: "4",
+      date: "10/08/66",
+      in: "08:48",
+      loIn: "สำนักงาน ก.ก ",
+      out: "17:00",
+      loOut: "สำนักงาน ก.ก ",
+      status: "สาย ทำงานไม่ครบ",
+      Morningstatus: "3",
+      AfternoonStatus: "3",
+    },
+  ];
+  stores.fetchHistoryList(listData);
+}
+</script>
+<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">
+          <ToolBar />
+          <Table />
+          <!-- <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>