refactor: comment fetchKeycloakPosition existingData

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

src/components/PopupPrivacy.vue

@@ -16,41 +16,26 @@ const modal = defineModel<boolean>('modal', {
 
 // Privacy content data
 const privacyContent = {
-  title: 'การคุ้มครองข้อมูลส่วนบุคคล',
+  title: 'ประกาศความเป็นส่วนตัว',
   mainText:
-    'ระบบนี้มีการเก็บ และใช้ภาพถ่ายของท่าน เพื่อยืนยันตัวตนในการลงเวลาปฏิบัติราชการ ข้อมูลจะถูกใช้เฉพาะตามวัตถุประสงค์ของระบบ และจัดเก็บอย่างปลอดภัยตามกฎหมายคุ้มครองข้อมูลส่วนบุคคล (PDPA)',
+    'ประกาศความเป็นส่วนตัวสำหรับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์ในระบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA – HRMS)',
   warningText: '* หากท่านไม่กดยอมรับ อาจทำให้ไม่สามารถใช้งานระบบได้',
   detailIntro:
-    'ข้าพเจ้าตกลงให้กรุงเทพมหานครเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลประเภทภาพถ่ายของข้าพเจ้า ซึ่งได้มาจากการใช้งานระบบลงเวลาปฏิบัติราชการอิเล็กทรอนิกส์ ของระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA - HRMS) ทั้งนี้ เพื่อวัตถุประสงค์ดังต่อไปนี้',
+    'กรุงเทพมหานครเก็บรวบรวมและใช้ข้อมูลส่วนบุคคลของท่าน ได้แก่ ข้อมูลวันและเวลาลงเวลาปฏิบัติราชการ พิกัดสถานที่ ณ ขณะลงเวลา ภาพถ่าย ณ ขณะลงเวลา ข้อมูลหน่วยงานหรือสถานที่ปฏิบัติงาน และข้อมูลทางเทคนิคที่จำเป็นต่อการใช้งานระบบ เพื่อวัตถุประสงค์ในการยืนยันการมาปฏิบัติราชการ ป้องกันการลงเวลาแทนกัน ตรวจสอบความถูกต้องของข้อมูล บริหารวันและเวลาปฏิบัติราชการ การลา การประเมินผลการปฏิบัติราชการ การพิจารณาเลื่อนเงินเดือน ตลอดจนการบริหารทรัพยากรบุคคลตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ที่เกี่ยวข้อง',
-  purposes: {
+
-    title: 'วัตถุประสงค์การใช้ข้อมูล',
+  paragraphs: [
-    items: [
+    'การเก็บรวบรวมและใช้ข้อมูลดังกล่าวเป็นการดำเนินการโดยอาศัยฐานการปฏิบัติหน้าที่ในการดำเนินภารกิจเพื่อประโยชน์สาธารณะหรือการใช้อำนาจรัฐตามมาตรา 24 (4) และฐานการปฏิบัติตามกฎหมายของ ผู้ควบคุมข้อมูลส่วนบุคคลตามมาตรา 24 (6) แห่งพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 โดยมิได้อาศัยความยินยอมของเจ้าของข้อมูลส่วนบุคคล',
-      'เพื่อยืนยันตัวตนของผู้ปฏิบัติงานในการบันทึกเวลาเข้า-ออกการปฏิบัติราชการ',
+    'ระบบจะเข้าถึงข้อมูลพิกัดและกล้องถ่ายภาพเฉพาะในขณะที่ท่านดำเนินการลงเวลาเข้าและออกจากการปฏิบัติราชการเท่านั้น โดยไม่มีการติดตามหรือบันทึกพิกัดของท่านอย่างต่อเนื่องภายหลังจากการลงเวลาเสร็จสิ้น',
-      'เพื่อใช้เป็นหลักฐานประกอบการบริหารงานด้านทรัพยากรบุคคล การจ่ายค่าตอบแทน และการกำกับ ดูแลการปฏิบัติราชการ',
+    'กรุงเทพมหานครจะเก็บรักษาข้อมูลภาพถ่าย พิกัด ณ ขณะลงเวลา และข้อมูลรายละเอียดการลงเวลาไว้ตามรอบการประเมินผลการปฏิบัติราชการเป็นระยะเวลาไม่เกิน 6 เดือนนับแต่วันที่เก็บรวบรวม หรือจนกว่าการตรวจสอบข้อมูลในรอบการประเมินนั้นจะแล้วเสร็จ แล้วแต่ระยะเวลาใดจะยาวกว่า เมื่อครบกำหนด กรุงเทพมหานครจะลบ ทำลาย หรือทำให้ข้อมูลดังกล่าวไม่สามารถระบุตัวบุคคลได้ตามวิธีการและมาตรการรักษาความมั่นคงปลอดภัยที่กำหนด',
-      'เพื่อรักษาความถูกต้อง โปร่งใส และป้องกันการทุจริตในการบันทึกเวลาการปฏิบัติงาน',
+    'กรณีข้อมูลดังกล่าวเกี่ยวข้องกับการร้องเรียน การโต้แย้ง การตรวจสอบ การดำเนินการทางวินัยการอุทธรณ์ การดำเนินคดี หรือการใช้สิทธิเรียกร้องตามกฎหมาย กรุงเทพมหานครอาจเก็บรักษาข้อมูลไว้เกินกว่า 6 เดือนได้เท่าที่จำเป็น จนกว่ากระบวนการดังกล่าวจะถึงที่สุดหรือพ้นระยะเวลาที่กฎหมายกำหนด',
-    ],
+    'ทั้งนี้ ข้อมูลสรุปเกี่ยวกับวันเวลาปฏิบัติราชการ การลา การมาสาย การขาดราชการ ผลการประเมินผลการปฏิบัติราชการ และผลการพิจารณาเลื่อนเงินเดือน ซึ่งเป็นส่วนหนึ่งของทะเบียนประวัติหรือเอกสารด้านการบริหารทรัพยากรบุคคล อาจได้รับการเก็บรักษาตามระยะเวลาที่กฎหมาย ระเบียบ หลักเกณฑ์งานบุคคล และระเบียบงานสารบรรณกำหนด ซึ่งอาจมีระยะเวลาแตกต่างจากข้อมูลภาพถ่ายและพิกัดที่ใช้ประกอบการลงเวลา',
-  },
+    'กรุงเทพมหานครจะจำกัดการเข้าถึงข้อมูลเฉพาะเจ้าหน้าที่หรือผู้ปฏิบัติงานที่มีหน้าที่เกี่ยวข้อง และจะไม่นำข้อมูลไปใช้หรือเปิดเผยเพื่อวัตถุประสงค์อื่นที่ไม่สอดคล้องกับวัตถุประสงค์ที่ได้แจ้งไว้ เว้นแต่เป็นกรณีที่กฎหมายกำหนดหรืออนุญาตให้ดำเนินการได้',
-  understanding: {
+    'ท่านมีสิทธิขอเข้าถึง ขอรับสำเนา ขอแก้ไข ขอคัดค้าน ขอระงับการใช้ หรือขอให้ลบข้อมูลส่วนบุคคลของท่านได้ตามหลักเกณฑ์และเงื่อนไขที่พระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 กำหนด โดยการใช้สิทธิดังกล่าวไม่กระทบต่อหน้าที่ในการลงเวลาปฏิบัติราชการและการปฏิบัติตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ของกรุงเทพมหานคร',
-    items: [
+  ],
-      'การเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลดังกล่าว จะดำเนินการ เท่าที่จำเป็นตามวัตถุประสงค์ที่ระบุไว้เท่านั้น',
-      'หน่วยงานจะจัดให้มีมาตรการรักษาความมั่นคงปลอดภัยของข้อมูลส่วนบุคคล ตามที่กฎหมายกำหนด',
-      'ข้อมูลส่วนบุคคลของข้าพเจ้าจะถูกเก็บรักษา ตามระยะเวลาที่จำเป็น ต่อการปฏิบัติงานหรือเป็นไปตามที่กฎหมายกำหนด',
-    ],
-  },
-  rights: {
-    title:
-      'ข้าพเจ้าทราบถึง สิทธิของเจ้าของข้อมูลส่วนบุคคล ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. ๒๕๖๒ ได้แก่',
-    items: [
-      'สิทธิขอเข้าถึงและขอรับสำเนาข้อมูล',
-      'สิทธิขอแก้ไขข้อมูลให้ถูกต้อง',
-      'สิทธิขอถอนความยินยอม (ทั้งนี้ การถอนความยินยอมอาจส่งผลต่อการใช้งานระบบลงเวลาการปฏิบัติราชการ)',
-      'สิทธิร้องเรียนต่อคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล',
-    ],
-  },
   consentText:
-    'ข้าพเจ้าได้อ่านและเข้าใจรายละเอียดทั้งหมดแล้ว และยินยอมให้เก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคล ประเภทภาพถ่ายของข้าพเจ้า ตามที่ระบุไว้ข้างต้นโดยสมัครใจ',
+    'ข้าพเจ้าได้รับทราบประกาศความเป็นส่วนตัวเกี่ยวกับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์แล้ว',
   buttons: {
-    accept: 'ยอมรับ',
+    accept: 'รับทราบและดำเนินการต่อ',
     decline: 'ไม่ยอมรับ',
   },
 }
@@ -97,7 +82,8 @@ const toggleDetails = () => {
 
 const checkIfScrollable = () => {
   nextTick(() => {
-    const container = (scrollContainer.value as any)?.$el || scrollContainer.value
+    const container =
+      (scrollContainer.value as any)?.$el || scrollContainer.value
     if (container) {
       const { scrollHeight, clientHeight } = container
 
@@ -167,50 +153,18 @@ const checkIfScrollable = () => {
             {{ privacyContent.detailIntro }}
           </p>
 
-          <!-- วัตถุประสงค์ -->
+          <!-- เนื้อหาประกาศความเป็นส่วนตัว -->
           <div class="q-mb-md">
-            <ol class="q-pl-lg list-style">
+            <p
-              <li
+              v-for="(paragraph, index) in privacyContent.paragraphs"
-                v-for="(item, index) in privacyContent.purposes.items"
+              :key="`p-${index}`"
-                :key="`p-${index}`"
+              class="q-mb-sm"
-                class="q-mb-xs"
+            >
-              >
+              {{ paragraph }}
-                {{ item }}
-              </li>
-            </ol>
-          </div>
-
-          <!-- ข้าพเจ้าทราบและเข้าใจว่า -->
-          <div class="q-mx-sm">
-            ข้าพเจ้าทราบและเข้าใจว่า
-            <ul class="q-mt-sm">
-              <li
-                v-for="(item, index) in privacyContent.understanding.items"
-                :key="`u-${index}`"
-                class="q-mb-xs"
-              >
-                {{ item }}
-              </li>
-            </ul>
-          </div>
-
-          <!-- สิทธิ์ของเจ้าของข้อมูล -->
-          <div>
-            <p>
-              {{ privacyContent.rights.title }}
             </p>
-            <ul>
-              <li
-                v-for="(item, index) in privacyContent.rights.items"
-                :key="`r-${index}`"
-                class="q-mb-xs"
-              >
-                {{ item }}
-              </li>
-            </ul>
-
-            <p class="consent-text q-mt-lg">{{ privacyContent.consentText }}</p>
           </div>
+
+          <p class="consent-text q-mt-lg">{{ privacyContent.consentText }}</p>
         </div>
       </q-card-section>
 

src/components/TableHistory.vue

@@ -13,20 +13,15 @@ import SkeletonTable from '@/components/SkeletonTable.vue' // skeleton table
 const { date2Thai } = useCounterMixin()
 const stores = useCheckIn()
 
+const page = defineModel<number>('page', { required: true })
+const pageSize = defineModel<number>('pageSize', { required: true })
+
 /** props ข้อมูลจาก Components Page HistoryView */
 const props = defineProps({
   paging: {
     type: Boolean,
     default: false,
   },
-  pageSize: {
-    type: Number,
-    default: 10,
-  },
-  page: {
-    type: Number,
-    default: 1,
-  },
   maxPage: {
     type: Number,
     default: 1,
@@ -194,31 +189,20 @@ const visibleColumns = ref<string[]>([
   'checkOutLocation',
   'checkOutStatus',
 ])
-
+const pagination = ref({
-const currentPage = ref<number>(1) //หน้าปัจจุบัน
+  page: page.value,
-// Pagination - initial pagination
+  rowsPerPage: pageSize.value,
-const initialPagination = ref<Pagination>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
 })
 
 // Pagination - update rowsPerPage
 async function updatePagination(newPagination: Pagination) {
-  initialPagination.value = newPagination
+  pageSize.value = newPagination.rowsPerPage
-  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
 async function filterFn() {
-  // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
+  emit('update:change-page', 1, pageSize.value, keyword.value)
-  emit(
-    'update:change-page',
-    1,
-    initialPagination.value.rowsPerPage,
-    keyword.value
-  )
 }
+
 const modalPopup = ref<boolean>(false) //  popup แก้ไขลงเวลา
 const titlePopup = ref<string>('') //  หัวขข้อ popup แก้ไขลงเวลา
 const dataRow = ref<DataCheckIn>() // ข้อมูลการลงเวลา
@@ -276,17 +260,15 @@ function onClickOpenPopupRejrct(data: DataCheckIn) {
   }
 }
 
-/** watch currentPage และ rowsPerPage*/
+function onUpdatePage(val: number) {
+  emit('update:change-page', val, pageSize.value, keyword.value)
+}
+
+/** watch pageSize*/
 watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => pageSize.value,
   () => {
-    // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
+    emit('update:change-page', 1, pageSize.value, keyword.value)
-    emit(
-      'update:change-page',
-      currentPage.value,
-      initialPagination.value.rowsPerPage,
-      keyword.value
-    )
   }
 )
 </script>
@@ -340,10 +322,10 @@ watch(
     v-model:selected="selected"
     :virtual-scroll-sticky-size-start="48"
     :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
-    :rows-per-page-options="[10, 25, 50, 100]"
+    :rows-per-page-options="[1, 10, 25, 50, 100]"
     :grid="$q.screen.gt.xs ? false : true"
-    :pagination="initialPagination"
     @update:pagination="updatePagination"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -476,10 +458,11 @@ watch(
         </q-card>
       </div>
     </template>
+
     <template v-slot:pagination>
       ทั้งหมด {{ props.total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="page"
         active-color="primary"
         color="dark"
         :max-pages="5"
@@ -487,6 +470,7 @@ watch(
         boundary-links
         direction-links
         :max="Number(props.maxPage)"
+        @update:model-value="onUpdatePage"
       ></q-pagination>
     </template>
   </q-table>

src/interface/index/Main.ts

@@ -29,7 +29,7 @@ interface Pagination {
   sortBy: string | null
   descending: boolean
   page: number
-  rowsPerPage: number | undefined
+  rowsPerPage: number
 }
 interface DataCheckIn {
   checkInDate: string

src/views/HistoryView.vue

@@ -115,6 +115,7 @@ async function fetchlistTime() {
 async function updateYear(y: number, m: number) {
   stores.tab === 'history' ? (year.value = y) : (year2.value = y)
   month.value = m
+  page.value = 1 // รีเซ็ตหน้าเป็นหน้าแรกเมื่อปีหรือเดือนเปลี่ยนแปลง
   await functionFetch() // เรียกใช้งานฟังก์ชัน functionFetch เพื่อดึงข้อมูลใหม่
 }
 
@@ -177,9 +178,9 @@ watch(
               />
               <TableHistory
                 :fetch-data="functionFetch"
-                :page-size="pageSize"
+                v-model:page-size="pageSize"
                 :total="total"
-                :page="page"
+                v-model:page="page"
                 :paging="true"
                 @update:change-page="changePage"
                 :max-page="maxPage"
@@ -196,9 +197,9 @@ watch(
               />
               <TableHistory
                 :fetch-data="functionFetch"
-                :page-size="pageSize"
+                v-model:page-size="pageSize"
                 :total="total"
-                :page="page"
+                v-model:page="page"
                 :paging="true"
                 @update:change-page="changePage"
                 :max-page="maxPage"

src/views/HomeView.vue

@@ -1298,7 +1298,10 @@ watch(notificationCounter, () => {
 
           <div class="col-12 text-grey-9">
             <div class="col-12 row justify-center">
-              <div class="col-12 row q-pt-md justify-center gt-xs">
+              <div
+                v-if="$q.screen.gt.xs"
+                class="col-12 row q-pt-md justify-center"
+              >
                 <div
                   class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
                 >
@@ -1348,7 +1351,7 @@ watch(notificationCounter, () => {
                     {{ crossDayCheckoutWarning }}
                   </q-banner>
                 </div>
-                <div class="col-xs-12 col-sm-8 gt-xs">
+                <div v-if="$q.screen.gt.xs" class="col-xs-12 col-sm-8">
                   <div class="col-12">
                     <MapCheck
                       ref="mapRefDesktop"
@@ -1853,7 +1856,7 @@ watch(notificationCounter, () => {
   </q-page>
 
   <!--  top page sticky  หน้ามือถือ-->
-  <q-page-sticky expand position="top" v-if="$q.screen.xs">
+  <q-page-sticky expand position="top" v-show="$q.screen.xs">
     <div
       class="row q-col-gutter-sm col bg-white col-12 q-pa-md"
       style="height: 100px"

src/views/MainView.vue

@@ -178,31 +178,32 @@ const landingPageUrl = ref<string>(configParam.landingPageUrl)
 /** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
 async function fetchKeycloakPosition() {
   // เช็คว่ามีข้อมูลใน store อยู่แล้วหรือไม่ (จาก localStorage)
-  const existingData = positionKeycloakStore.dataPositionKeycloak
+  // จะช่วยลดจำนวนครั้งในการเรียก API และปรับปรุงประสิทธิภาพของแอปพลิเคชัน
+  // const existingData = positionKeycloakStore.dataPositionKeycloak
 
-  if (existingData) {
+  // if (existingData) {
-    // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
+  //   // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
 
-    // เช็คว่ามีข้อมูลสังกัด (organization) หรือไม่
+  //   // เช็คว่ามีข้อมูลสังกัด (organization) หรือไม่
-    const hasOrganization =
+  //   const hasOrganization =
-      existingData.organization &&
+  //     existingData.organization &&
-      (existingData.organization.root ||
+  //     (existingData.organization.root ||
-        existingData.organization.child1 ||
+  //       existingData.organization.child1 ||
-        existingData.organization.child2 ||
+  //       existingData.organization.child2 ||
-        existingData.organization.child3 ||
+  //       existingData.organization.child3 ||
-        existingData.organization.child4)
+  //       existingData.organization.child4)
 
-    if (!hasOrganization) {
+  //   if (!hasOrganization) {
-      // ไม่มีข้อมูลสังกัด redirect ไปหน้า NoPosition
+  //     // ไม่มีข้อมูลสังกัด redirect ไปหน้า NoPosition
-      router.replace('/no-position')
+  //     router.replace('/no-position')
-      return
+  //     return
-    }
+  //   }
 
-    privacyStore.modalPrivacy = !existingData.privacyCheckin
+  //   privacyStore.modalPrivacy = !existingData.privacyCheckin
-    privacyStore.setAccepted(existingData.privacyCheckin)
+  //   privacyStore.setAccepted(existingData.privacyCheckin)
 
-    return
+  //   return
-  }
+  // }
 
   // ไม่มีข้อมูล ให้ fetch จาก API
   await http