ปรับ ui form

src/components/FormTime.vue

@@ -4,7 +4,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import moment, { Moment } from "moment";
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, covertDateObject } = mixin;
 
 const props = defineProps({
   dataById: {
@@ -42,105 +42,103 @@ function onCkickSave() {
 }
 </script>
 <template>
-  <!-- <q-card style="width: 350px; max-width: 80vw; higth: 100%"> -->
+  <q-card-section class="col q-pt-none">
-  <div class="row q-pa-md q-col-q-gutter-sm">
+    <div class="row q-pa-sm q-col-q-gutter-sm">
-    <q-card
+      <q-card
-      flat
+        flat
-      bordered
+        bordered
-      :class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
+        :class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
-    >
-      <q-card-section class="bg-primary text-white" v-if="!$q.screen.gt.xs">
-        <div class="text-center">เวลาปัจจุบัน</div>
-      </q-card-section>
-      <div v-else class="q-pa-sm text-primary">เวลาปัจจุบัน</div>
-      <q-card-section class="text-center">
-        <div class="row q-gutter-md">
-          <!-- <div class="col">{{ data.date }}</div>
-                    <div class="col">{{ data.in }} น.</div> -->
-          <div class="col">{{ date2Thai(dateNow) }}</div>
-          <div class="col">{{ timeNoew }}</div>
-        </div>
-      </q-card-section>
-    </q-card>
-
-    <q-card flat bordered class="q-pa-sm col-12 q-mt-sm" v-if="statusAction">
-      <VueDatePicker
-        v-model="date"
-        :locale="'th'"
-        autoApply
-        borderless
-        :enableTimePicker="false"
-        week-start="0"
       >
-        <template #year="{ year }">
+        <q-card-section class="bg-primary text-white" v-if="!$q.screen.gt.xs">
-          {{ year + 543 }}
+          <div class="text-center">เวลาปัจจุบัน</div>
-        </template>
+        </q-card-section>
-        <template #year-overlay-value="{ value }">
+        <div v-else class="q-pa-sm text-primary">เวลาปัจจุบัน</div>
-          {{ parseInt(value + 543) }}
+        <q-card-section class="text-center">
-        </template>
+          <div class="row q-gutter-md">
-        <template #trigger>
+            <div class="col">{{ date2Thai(dateNow) }}</div>
-          <q-input
+            <div class="col">{{ timeNoew }}</div>
-            borderless
+          </div>
-            dense
+        </q-card-section>
-            :model-value="date !== null ? date2Thai(date) : null"
+      </q-card>
-            :label="`${'กรอกวันที่'}`"
-          >
-            <template v-slot:prepend>
-              <q-icon
-                name="event"
-                class="cursor-pointer"
-                style="color: var(--q-primary)"
-              >
-              </q-icon>
-            </template>
-          </q-input> </template
-      ></VueDatePicker>
-    </q-card>
 
-    <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
+      <q-card flat bordered class="q-pa-sm col-12 q-mt-sm" v-if="statusAction">
-      <div class="row q-gutter-md text-grey-5">
+        <VueDatePicker
-        <div class="col-1">
+          v-model="date"
-          <q-icon color="grey-5" name="calendar_today" />
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              borderless
+              dense
+              :model-value="date !== null ? date2Thai(date) : null"
+              :label="`${'กรอกวันที่'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input> </template
+        ></VueDatePicker>
+      </q-card>
+
+      <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
+        <div class="row q-gutter-md text-grey-5">
+          <div class="col-1">
+            <q-icon color="grey-5" name="calendar_today" />
+          </div>
+          <div class="col">{{ covertDateObject(dataById.date) }}</div>
         </div>
-        <div class="col">31 ต.ค. 56</div>
+      </q-card>
-      </div>
+      <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
-    </q-card>
+        <div class="row q-gutter-xs">
-    <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
+          <div class="col-12">
-      <div class="row q-gutter-xs">
+            <q-checkbox
-        <div class="col-12">
+              keep-color
-          <q-checkbox
+              color="primary"
-            keep-color
+              v-model="checkboxIn"
-            color="primary"
+              label="ขอแก้ไขเวลาเข้างาน"
-            v-model="checkboxIn"
+            />
-            label="ขอแก้ไขเวลาเข้างาน"
+          </div>
-          />
+          <div class="col-12">
+            <q-checkbox
+              keep-color
+              v-model="checkboxOut"
+              color="primary"
+              label="ขอแก้ไขเวลาออกงาน"
+            />
+          </div>
         </div>
-        <div class="col-12">
+      </q-card>
-          <q-checkbox
+      <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
-            keep-color
+        <q-input
-            v-model="checkboxOut"
+          borderless
-            color="primary"
+          v-model="reason"
-            label="ขอแก้ไขเวลาออกงาน"
+          label="เหตุผล"
-          />
+          type="textarea"
-        </div>
+          :rows="$q.screen.gt.xs ? '5' : '1'"
-      </div>
+          label-color="grey-5"
-    </q-card>
+        />
-    <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
+      </q-card>
-      <q-input
+    </div>
-        borderless
+  </q-card-section>
-        v-model="reason"
-        label="เหตุผล"
-        type="textarea"
-        rows="1"
-        label-color="grey-5"
-      />
-    </q-card>
-  </div>
   <q-separator />
   <q-card-actions align="right">
     <q-btn dense color="secondary" label="บันทึก" @click="onCkickSave" />
   </q-card-actions>
-  <!-- </q-card> -->
 </template>
 
 <style scoped></style>

src/components/MapCheckin.vue

@@ -21,8 +21,7 @@ function findNearestPlace() {
           lng: position.coords.longitude,
         };
 
-        // ส่ง userLocation ไปยัง API เพื่อหาสถานที่ที่ใกล้ที่สุด
+        // ส่ง Location ไปยัง API เพื่อหาสถานที่ที่ใกล้ที่สุด
-
         findNearestPlaceFromAPI(userLocation);
         center.value = userLocation;
       },
@@ -42,22 +41,14 @@ function findNearestPlaceFromAPI(userLocation: any) {
 
   const request = {
     location: userLocation,
-    radius: 500, // รัศมีในเมตร
+    radius: 1000, // รัศมีในเมตร
-    types: [
+    types: ["point_of_interest"], // ประเภทของสถานที่ที่คุณต้องการค้นหา
-      "hospital",
-      "school",
-      "stadium",
-      "cafe",
-      "gym",
-      "store",
-      "accounting",
-      "amusement_park",
-    ], // ประเภทของสถานที่ที่คุณต้องการค้นหา
   };
 
   placesService.nearbySearch(request, (results: any, status: any) => {
     if (status === google.maps.places.PlacesServiceStatus.OK) {
-      console.log("Nearby places:", results);
+      console.log("Nearby places:", results[0].name);
+      location.value = results[0].name;
     } else {
       console.error("Error fetching nearby places:", status);
     }
@@ -70,20 +61,26 @@ function findNearestPlaceFromAPI(userLocation: any) {
     bordered
     flat
     class="col-12 bg-grey-2 shadow-0"
-    :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
+    :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 360px;'"
   >
     <div style="width: 100%; height: 90%">
       <GoogleMap
         api-key="AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58"
         style="width: 100%; height: 100%"
         :center="center"
-        :zoom="15"
+        :zoom="17"
       >
         <Marker :options="{ position: center }" />
       </GoogleMap>
     </div>
 
-    <div class="q-pa-md text-weight-medium text-grey-8">
+    <div
+      :class="
+        $q.screen.gt.xs
+          ? 'q-pa-sm text-weight-medium text-grey-8'
+          : ' text-weight-medium text-grey-8'
+      "
+    >
       พื้นที่ใกล้เคียง
       <span class="q-px-sm">:</span>
       {{ location }}

src/components/PopUp.vue

@@ -34,15 +34,8 @@ watch(props, () => {
 });
 </script>
 <template>
-  <!-- <q-dialog v-model="props.modal" full-height>
-    <q-card class="column full-height" style="width: 300px">
-      <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
-      <FormTime :dataById="data" />
-    </q-card>
-  </q-dialog> -->
-
   <q-dialog v-model="props.modal" full-height>
-    <q-card class="column full-height" style="width: 350px">
+    <q-card class="column full-height" style="width: 300px">
       <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
       <FormTime :dataById="data" />
     </q-card>

src/components/TableHistory.vue

@@ -110,6 +110,10 @@ function classStatus(status: string) {
       break;
   }
 }
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <q-table
@@ -122,6 +126,7 @@ function classStatus(status: string) {
     :virtual-scroll-sticky-size-start="48"
     :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
     :grid="$q.screen.gt.xs ? false : true"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -152,13 +157,19 @@ function classStatus(status: string) {
         </q-td>
         <q-td>
           <q-btn
+            v-if="props.row.statusEdit === 'edit'"
             outline
-            rounded
             icon="edit"
             label="ขอแก้ไข"
             color="info"
             @click="openPopup(props.row)"
           />
+          <q-chip
+            v-else
+            :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
+            :text-color="`${stores.classColorStatus(props.row.statusEdit)}-7`"
+            >{{ props.row.statusEditName }}</q-chip
+          >
         </q-td>
       </q-tr>
     </template>
@@ -190,20 +201,48 @@ function classStatus(status: string) {
               <q-separator />
             </q-item>
           </q-list>
-          <q-card-section class="q-card-section-last">
+          <q-card-section>
-            <q-btn
+            <div class="row">
-              outline
+              <div class="col" v-if="props.row.statusEdit === 'edit'">
-              rounded
+                <q-btn
-              icon="edit"
+                  class="full-width text-cen"
-              label="ขอแก้ไข"
+                  outline
-              color="info"
+                  rounded
-              size="sm"
+                  icon="edit"
-              @click="openPopup(props.row)"
+                  label="ขอแก้ไข"
-            />
+                  color="info"
+                  size="sm"
+                  @click="openPopup(props.row)"
+                />
+              </div>
+              <div class="col" v-else>
+                <q-chip
+                  class="full-width"
+                  :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
+                  :text-color="`${stores.classColorStatus(
+                    props.row.statusEdit
+                  )}-7`"
+                >
+                  {{ props.row.statusEditName }}
+                </q-chip>
+              </div>
+            </div>
           </q-card-section>
         </q-card>
       </div>
     </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
   </q-table>
 
   <Popup
@@ -219,6 +258,11 @@ function classStatus(status: string) {
   color: #4154b3;
 }
 
+.items-center {
+  align-items: center;
+  justify-content: center;
+}
+
 .custom-table2 {
   .q-table tr:nth-child(odd) td {
     background: white;

src/stores/chekin.ts

@@ -16,6 +16,8 @@ export const useChekIn = defineStore("checkin", () => {
       status: e.status,
       Morningstatus: convertStatus(e.Morningstatus),
       AfternoonStatus: convertStatus(e.AfternoonStatus),
+      statusEdit: e.statusEdit,
+      statusEditName: convertStatusEdit(e.statusEdit),
     }));
     rows.value = datalist;
   }
@@ -32,9 +34,28 @@ export const useChekIn = defineStore("checkin", () => {
         return "";
     }
   }
+  function convertStatusEdit(val: string) {
+    switch (val) {
+      case "edit":
+        return "ขอแก้ไข";
+      case "wait":
+        return "รออนุมัติ";
+      case "approve":
+        return "อนุมัติ";
+    }
+  }
+  function classColorStatus(val: string) {
+    switch (val) {
+      case "wait":
+        return "orange";
+      case "approve":
+        return "green";
+    }
+  }
 
   return {
     rows,
     fetchHistoryList,
+    classColorStatus,
   };
 });

src/stores/mixin.ts

@@ -68,8 +68,21 @@ export const useCounterMixin = defineStore("mixin", () => {
       dstTime
     );
   }
+  function covertDateObject(date: string) {
+    if (date) {
+      const dateParts = date.split("/");
+      // ประกาศตัวแปรเพื่อเก็บค่าวันที่, เดือน, และ ปี
+      const day = parseInt(dateParts[0], 10);
+      const month = parseInt(dateParts[1], 10) - 1;
+      const year = parseInt(dateParts[2], 10) + 2500;
+      // สร้างอ็อบเจ็กต์ Date ด้วยค่าที่ได้
+      const dateObject = new Date(year, month, day);
+      return date2Thai(dateObject);
+    }
+  }
 
   return {
     date2Thai,
+    covertDateObject,
   };
 });

src/views/HistoryView.vue

@@ -27,6 +27,7 @@ function fetchlist() {
       status: "",
       Morningstatus: "1",
       AfternoonStatus: "1",
+      statusEdit: "wait",
     },
     {
       no: "2",
@@ -38,6 +39,7 @@ function fetchlist() {
       status: "ลงเวลาเรียบร้อย",
       Morningstatus: "2",
       AfternoonStatus: "2",
+      statusEdit: "edit",
     },
     {
       no: "3",
@@ -49,6 +51,7 @@ function fetchlist() {
       status: "สาย ทำงานครบ",
       Morningstatus: "3",
       AfternoonStatus: "2",
+      statusEdit: "edit",
     },
     {
       no: "4",
@@ -60,6 +63,7 @@ function fetchlist() {
       status: "สาย ทำงานไม่ครบ",
       Morningstatus: "3",
       AfternoonStatus: "3",
+      statusEdit: "approve",
     },
   ];
   stores.fetchHistoryList(listData);
@@ -92,84 +96,6 @@ function fetchlist() {
         <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>

src/views/HomeView.vue

@@ -39,7 +39,7 @@ function updateClock() {
 setInterval(updateClock, 1000);
 
 //location
-const location = ref<string>("สำนักงาน ก.ก");
+const location = ref<string>("");
 const coordinates = ref<string>("13° 43’ 45” N  100° 31’ 26” E");
 const workplace = ref<string>("in-place");
 const useLocation = ref<string | null>("");
@@ -252,25 +252,6 @@ const getClass = (val: boolean) => {
             <div class="col-xs-12 col-md-11 row q-col-gutter-md">
               <div class="col-12 col-sm-8">
                 <MapCheck />
-                <!-- <q-card
-                  bordered
-                  flat
-                  class="col-12 bg-grey-2 shadow-0"
-                  :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
-                >
-                  <MapCheck />
-                  <q-img
-                    src="@/assets/map1.png"
-                    :style="
-                      $q.screen.gt.xs ? 'height: 300px;' : 'height: 168px;'
-                    "
-                  ></q-img>
-                  <div class="q-pa-md text-weight-medium text-grey-8">
-                    พื้นที่ใกล้เคียง
-                    <span class="q-px-sm">:</span>
-                    {{ location }}
-                  </div>
-                </q-card> -->
               </div>
               <div class="col-12 col-sm-4">
                 <q-card
@@ -373,7 +354,7 @@ const getClass = (val: boolean) => {
                   </div>
                   <div
                     class="col-xs-12 col-sm-6 col-md-4"
-                    v-if="model == 'อื่นๆ'"
+                    v-if="model == 'อื่นๆ' && workplace === 'off-site'"
                   >
                     <q-input
                       ref="useLocationRef"
@@ -387,28 +368,39 @@ const getClass = (val: boolean) => {
                     />
                   </div>
                 </q-card>
+                <div class="col-12 text-right">
+                  <q-separator />
+                  <div class="col-12 q-pa-md">
+                    <p
+                      :class="
+                        $q.screen.gt.xs
+                          ? 'text-red text-caption '
+                          : 'text-red text-caption text-center'
+                      "
+                    >
+                      *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
+                    </p>
+                    <q-btn
+                      :label="
+                        stetusCheckin == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'
+                      "
+                      :color="
+                        stetusCheckin == true && img == null
+                          ? 'grey-6'
+                          : 'primary'
+                      "
+                      push
+                      size="14px"
+                      :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
+                      :disable="camera && img ? false : true"
+                      @click="validateForm"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="col-12 text-right" v-if="camera && img">
-          <div class="col-12">
-            <q-separator />
-          </div>
-          <div class="col-12 q-pa-md">
-            <p class="text-red text-caption">
-              *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-            </p>
-            <q-btn
-              :label="stetusCheckin == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
-              :color="stetusCheckin == true ? 'primary' : 'red-9'"
-              push
-              size="14px"
-              :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
-              @click="validateForm"
-            />
-          </div>
-        </div>
       </q-card>
     </div>
   </div>
@@ -424,7 +416,7 @@ const getClass = (val: boolean) => {
       <q-card-section class="row col-12 justify-center">
         <div class="bg-grey-2 rounded-borders q-pa-md col-11">
           <div class="col-12 text-subtitle1 text-center text-weight-medium">
-            {{ Thai }}
+            {{ date2Thai(Thai) }}
           </div>
           <div class="row col-12 justify-center q-pt-sm">
             <div class="text-h3 text-weight-bold">