Merge branch 'main' of github.com:Frappet/bma-ehr-checkin

2024-07-09 17:05:36 +07:00 · 2024-07-09 17:05:36 +07:00 · b60eb0f557
commit b60eb0f557
parent c634c2540c a69d986340
5 changed files with 134 additions and 111 deletions
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@ -1,10 +1,14 @@
 <script setup lang="ts">
-import type { QTableProps } from 'quasar'
 import { ref, watch } from 'vue'
+import type { QTableProps } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'

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

+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+
 const stores = useChekIn()
 const selected = ref<string[]>([])

@ -50,43 +54,6 @@ const tab = ref<string>(props.tab?.toString())

 const emit = defineEmits(['update:change-page'])

-// Pagination - initial pagination
-const initialPagination = ref<any>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
-})
-
-// Pagination - page & change page & get new data
-const currentPage = ref<number>(1)
-watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
-  () => {
-    emit(
-      'update:change-page',
-      currentPage.value,
-      initialPagination.value.rowsPerPage,
-      keyword.value
-    )
-  }
-)
-
-// Pagination - update rowsPerPage
-async function updatePagination(newPagination: any) {
-  initialPagination.value = newPagination
-  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
-}
-
-async function filterFn() {
-  emit(
-    'update:change-page',
-    1,
-    initialPagination.value.rowsPerPage,
-    keyword.value
-  )
-}
-
 /** column history table */
 const columns = ref<QTableProps['columns']>(
  props.tab == 'history'
@ -157,11 +124,11 @@ const columns = ref<QTableProps['columns']>(
      ]
    : [
        {
-          name: 'checkInDate',
+          name: 'checkInDateTime',
          align: 'left',
          label: 'วัน/เดือน/ปี',
          sortable: true,
-          field: 'checkInDate',
+          field: (v) => date2Thai(v.checkInDateTime),
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px; width:15%;',
        },
@ -204,6 +171,7 @@ const columns = ref<QTableProps['columns']>(
      ]
 )
 const visibleColumns = ref<string[]>([
+  'checkInDateTime',
  'checkInDate',
  'checkInTime',
  'checkInLocation',
@ -212,11 +180,51 @@ const visibleColumns = ref<string[]>([
  'checkOutLocation',
  'checkOutStatus',
 ])
+
+// Pagination - initial pagination
+const initialPagination = ref({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
+})
+
+// Pagination - page & change page & get new data
+const currentPage = ref<number>(1)
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => {
+    emit(
+      'update:change-page',
+      currentPage.value,
+      initialPagination.value.rowsPerPage,
+      keyword.value
+    )
+  }
+)
+
+// Pagination - update rowsPerPage
+async function updatePagination(newPagination: any) {
+  initialPagination.value = newPagination
+  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+}
+
+async function filterFn() {
+  emit(
+    'update:change-page',
+    1,
+    initialPagination.value.rowsPerPage,
+    keyword.value
+  )
+}
+
 // popup
 const modalPopup = ref<boolean>(false)
 const titlePopup = ref<string>('')
 const dataRow = ref<any>()
 function openPopup(data: any) {
+  console.log(data)
+
  const title = 'แก้ไขลงเวลา'
  modalPopup.value = true
  titlePopup.value = title
@ -327,7 +335,7 @@ function onClickOpenPopupRejrct(data: any) {
            {{ props.row.checkOutStatus }}
          </div>
          <div v-else>
-            {{ col.value }}
+            {{ col.value ?? '-' }}
          </div>
        </q-td>
        <q-td v-if="tab === 'history'">
--- a/src/interface/index/Main.ts
+++ b/src/interface/index/Main.ts
@ -25,10 +25,18 @@ interface LocationObject {
  longitude: number
 }

+interface Pagination {
+  sortBy: string
+  descending: boolean
+  page: number
+  rowsPerPage: number
+}
+
 export type {
  DataOption,
  FormRef,
  notiType,
  DataDateMonthObject,
  LocationObject,
+  Pagination,
 }
--- a/src/interface/response/checkin.ts
+++ b/src/interface/response/checkin.ts
@ -7,6 +7,7 @@ interface FormRef {
 interface FormData {
  checkInId: string
  checkInDate: Date | null
+  checkOutDate: Date | null
  checkInDateTime: Date
  checkInTime: string
  checkOutTime: string
--- a/src/stores/chekin.ts
+++ b/src/stores/chekin.ts
@ -2,14 +2,14 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type { FormData, Datalist } from '@/interface/response/checkin'
 import { useCounterMixin } from '@/stores/mixin'
-import moment from 'moment'
+
 const mixin = useCounterMixin()
 const { date2Thai } = mixin

 /** store for checkin history*/
 export const useChekIn = defineStore('checkin', () => {
  const year = ref<number>(new Date().getFullYear())
-  const rows = ref<Datalist[]>()
+  const rows = ref<Datalist[]>([])
  const tab = ref<string>('history')

  /**
@ -22,7 +22,7 @@ export const useChekIn = defineStore('checkin', () => {
    const dataList: Datalist[] = await data.map((e: FormData) => ({
      checkInId: e.checkInId,
      checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : null,
-      checkInDateTime: e.checkInDate,
+      checkInDateTime: e.checkInDate ? e.checkInDate : e.checkOutDate,
      checkInTime: e.checkInTime,
      checkOutTime: e.checkOutTime != '' ? e.checkOutTime : '-',
      checkInStatus: e.checkInStatus ? convertStatus(e.checkInStatus) : '-',
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@ -1,17 +1,25 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
+import http from '@/plugins/http'
+import config from '@/app.config'

+/**
+ * import Components
+ */
 import TableHistory 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
+/**
+ * importStores
+ */
 import { useChekIn } from '@/stores/chekin'
+import { useCounterMixin } from '@/stores/mixin'

+/**
+ * use
+ */
 const mixin = useCounterMixin()
 const router = useRouter()
 const stores = useChekIn()
@ -19,8 +27,6 @@ const { showLoader, hideLoader, messageError } = mixin
 const { fetchHistoryList } = stores
 const $q = useQuasar() //ใช้ noti quasar

-const tab = ref<string>('history')
-
 // paging
 const page = ref<number>(1)
 const year = ref<number>(new Date().getFullYear())
@ -130,73 +136,73 @@ watch(
        <div
          class="bg-secondary text-white col-12 row items-center q-px-md q-py-sm"
        >
-            <q-btn
-              icon="arrow_back"
-              round
-              dense
-              flat
-              color="white"
-              @click="router.go(-1)"
-            />
+          <q-btn
+            icon="arrow_back"
+            round
+            dense
+            flat
+            color="white"
+            @click="router.go(-1)"
+          />
          <span class="text-body1 text-weight-bold q-pl-md"
            >ประวัติการลงเวลา
          </span>
        </div>
        <div class="col-12 text-grey-9">
-            <q-tabs
-              v-model="stores.tab"
-              dense
-              align="left"
-              inline-label
-              class="rounded-borders"
-              indicator-color="primary"
-              active-bg-color="teal-1"
-              active-class="text-primary"
-            >
-              <q-tab name="history" label="ประวัติการลงเวลา" />
-              <q-tab name="time" label="รายการลงเวลากรณีพิเศษ" />
-            </q-tabs>
+          <q-tabs
+            v-model="stores.tab"
+            dense
+            align="left"
+            inline-label
+            class="rounded-borders"
+            indicator-color="primary"
+            active-bg-color="teal-1"
+            active-class="text-primary"
+          >
+            <q-tab name="history" label="ประวัติการลงเวลา" />
+            <q-tab name="time" label="รายการลงเวลากรณีพิเศษ" />
+          </q-tabs>

-            <q-separator />
+          <q-separator />

-            <q-tab-panels v-model="stores.tab" animated>
-              <q-tab-panel name="history">
-                <ToolBar
-                  :fetchData="functionFetch"
-                  @update:year="updateYear"
-                  :tab="stores.tab"
-                />
-                <TableHistory
-                  :fetchData="functionFetch"
-                  :page-size="pageSize"
-                  :total="total"
-                  :page="page"
-                  :paging="true"
-                  @update:change-page="changePage"
-                  :max-page="maxPage"
-                  :tab="stores.tab"
-                />
-              </q-tab-panel>
+          <q-tab-panels v-model="stores.tab" animated>
+            <q-tab-panel name="history">
+              <ToolBar
+                :fetchData="functionFetch"
+                @update:year="updateYear"
+                :tab="stores.tab"
+              />
+              <TableHistory
+                :fetchData="functionFetch"
+                :page-size="pageSize"
+                :total="total"
+                :page="page"
+                :paging="true"
+                @update:change-page="changePage"
+                :max-page="maxPage"
+                :tab="stores.tab"
+              />
+            </q-tab-panel>

-              <q-tab-panel name="time">
-                <ToolBar
-                  :fetchData="functionFetch"
-                  @update:year="updateYear"
-                  :tab="stores.tab"
-                />
-                <TableHistory
-                  :fetchData="functionFetch"
-                  :page-size="pageSize"
-                  :total="total"
-                  :page="page"
-                  :paging="true"
-                  @update:change-page="changePage"
-                  :max-page="maxPage"
-                  :tab="stores.tab"
-                />
-              </q-tab-panel>
-            </q-tab-panels>
-            <!-- </q-card> -->
+            <q-tab-panel name="time">
+              <ToolBar
+                :fetchData="functionFetch"
+                @update:year="updateYear"
+                :tab="stores.tab"
+              />
+              <TableHistory
+                :fetchData="functionFetch"
+                :page-size="pageSize"
+                :total="total"
+                :page="page"
+                :paging="true"
+                @update:change-page="changePage"
+                :max-page="maxPage"
+                :tab="stores.tab"
+              />
+            </q-tab-panel>
+          </q-tab-panels>
+          <!-- </q-card> -->
          <!-- <Table
            :fetchData="fetchlistHistory"
            :page-size="pageSize"
@ -210,4 +216,4 @@ watch(
      </q-card>
    </div>
  </div>
-</template>
+</template>