hrms-bangkok/hrms-checkin
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix format consent / pdpa popup

Browse source
This commit is contained in:
Warunee Tamkoo 2026-01-19 12:36:26 +07:00
parent 06cfd0e751
commit 338d4806b3
1 changed files with 59 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/components/PopupPrivacy.vue
View file

@ -20,7 +20,7 @@ const privacyContent = {
items: [
'เพื่อยืนยันตัวตนของผู้ปฏิบัติงานในการบันทึกเวลาเข้า-ออกการปฏิบัติราชการ',
'เพื่อใช้เป็นหลักฐานประกอบการบริหารงานด้านทรัพยากรบุคคล การจ่ายค่าตอบแหน และการกำกับ ดูแลการปฏิบัติราชการ',
'เพื่อรักษาความถูกต้อง โปร่งใส และป้องกันการทุจริตในการบันทึกเวลาการปฏิบัติงานข้าพเจ้าทราบและเข้าใจว่า',
'เพื่อรักษาความถูกต้อง โปร่งใส และป้องกันการทุจริตในการบันทึกเวลาการปฏิบัติงาน',
],
},
understanding: {
@ -50,6 +50,7 @@ const privacyContent = {
const hasScrolledToBottom = ref(false)
const acceptPrivacy = ref(false)
const showDetails = ref(false)
const isAcceptDisabled = computed(() => !acceptPrivacy.value)
const handleScroll = (event: Event) => {
@ -75,6 +76,10 @@ const handleAccept = async () => {
const handleDecline = () => {
modal.value = false
}
const toggleDetails = () => {
showDetails.value = !showDetails.value
}
</script>
<template>
@ -85,10 +90,10 @@ const handleDecline = () => {
transition-hide="slide-down"
:maximized="$q.screen.lt.sm"
>
<q-card class="privacy-card" style="max-width: 520px; max-height: 95vh">
<q-card class="privacy-card" style="max-width: 560px; max-height: 95vh">
<!-- Header -->
<q-card-section class="bg-primary text-white q-pa-lg">
<div class="text-h5 text-center">
<q-card-section class="bg-primary text-white q-pa-sm">
<div class="text-h6 text-center">
{{ privacyContent.title }}
</div>
<q-btn
@ -97,7 +102,6 @@ const handleDecline = () => {
round
dense
class="absolute-top-right q-ma-sm"
style="opacity: 0.8"
v-close-popup
@click="handleDecline"
/>
@ -106,34 +110,39 @@ const handleDecline = () => {
<!-- Scrollable Content -->
<q-card-section
ref="scrollContainer"
class="col scroll q-px-md"
class="col scroll q-px-lg q-pb-none"
@scroll="handleScroll"
>
<!-- Main Content -->
<div class="q-pt-lg q-pb-md">
<p class="main-text">{{ privacyContent.mainText }}</p>
<div class="q-my-md">
<p class="main-text">
{{ privacyContent.mainText }}
<q-link @click.stop="toggleDetails" class="privacy-link text-blue-7"
>นโยบายคุ้มครองข้อมูลส่วนบุคคล (Privacy Policy)</q-link
>
</p>
<q-banner
inline-actions
class="bg-amber-1 q-mt-md rounded-borders text-center"
style="border-left: 4px solid #f0ad4e; color: #f0ad4e"
class="bg-amber-1 rounded-borders text-center text-amber-7"
style="border-left: 4px solid #f0ad4e"
>
{{ privacyContent.warningText }}
</q-banner>
</div>
<!-- Details Section -->
<div class="bg-white q-mb-md q-pa-sm rounded-borders details-section">
<p class="detail-intro q-mb-md text-grey-8">
<div
v-show="showDetails"
class="bg-white rounded-borders q-pa-sm details-section"
>
<p class="detail-intro q-mb-md">
{{ privacyContent.detailIntro }}
</p>
<!-- วัตถุประสงค์ -->
<div class="q-mb-md">
<div class="section-header text-blue-grey-10">
{{ privacyContent.purposes.title }}
</div>
<ol class="q-pl-lg text-grey-8 list-style">
<ol class="q-pl-lg list-style">
<li
v-for="(item, index) in privacyContent.purposes.items"
:key="`p-${index}`"
@ -145,8 +154,9 @@ const handleDecline = () => {
</div>
<!-- ข้าพเจ้าทราบและเข้าใจว่า -->
<div class="q-ml-md q-mb-md">
<ul class="q-pl-lg text-grey-8 list-style-disc">
<div class="q-mx-sm">
ข้าพเจ้าทราบและเข้าใจว่า
<ul class="q-mt-sm">
<li
v-for="(item, index) in privacyContent.understanding.items"
:key="`u-${index}`"
@ -159,10 +169,10 @@ const handleDecline = () => {
<!-- สิทธิ์ของเจ้าของข้อมูล -->
<div>
<div class="section-header text-blue-grey-10">
<p>
{{ privacyContent.rights.title }}
</div>
<ul class="q-pl-lg text-grey-8 list-style-disc">
</p>
<ul>
<li
v-for="(item, index) in privacyContent.rights.items"
:key="`r-${index}`"
@ -171,20 +181,21 @@ const handleDecline = () => {
{{ item }}
</li>
</ul>
<p class="consent-text q-mt-lg">{{ privacyContent.consentText }}</p>
</div>
</div>
</q-card-section>
<!-- Fixed Bottom Section -->
<q-card-section class="bg-white q-pa-md">
<q-separator class="q-mb-md" />
<q-card-section class="bg-white q-px-lg">
<!-- Checkbox -->
<div
class="consent-box rounded-borders q-pa-md row items-center cursor-pointer"
class="consent-box rounded-borders q-pa-sm row items-center"
:class="{
'consent-checked': acceptPrivacy,
'consent-disabled': !hasScrolledToBottom,
'cursor-pointer': hasScrolledToBottom,
}"
@click="hasScrolledToBottom && (acceptPrivacy = !acceptPrivacy)"
>
@ -195,9 +206,12 @@ const handleDecline = () => {
:disable="!hasScrolledToBottom"
class="q-mr-sm"
/>
<span class="col text-grey-9 consent-text">{{
privacyContent.consentText
}}</span>
<div class="col">
ข้าพเจ้าได้อ่านและยอมรับ
<q-link @click.stop="toggleDetails" class="privacy-link text-blue-7"
>นโยบายคุ้มครองข้อมูลส่วนบุคคล</q-link
>
</div>
</div>
</q-card-section>
@ -241,9 +255,7 @@ const handleDecline = () => {
}
.main-text {
font-size: 15px;
line-height: 1.8;
text-indent: 2em;
font-size: 1rem;
}
.details-section {
@ -251,24 +263,21 @@ const handleDecline = () => {
}
.detail-intro {
font-size: 13px;
line-height: 1.7;
text-indent: 2em;
}
.section-header {
font-weight: 600;
font-size: 15px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #e9ecef;
}
.list-style,
/* .list-style,
.list-style-disc {
font-size: 13px;
line-height: 1.8;
}
} */
.list-style {
list-style-type: decimal;
@ -302,9 +311,8 @@ const handleDecline = () => {
background: #f8f9fa;
}
.consent-text {
font-size: 13px;
line-height: 1.5;
p {
text-indent: 2em;
}
.action-btn {
@ -312,4 +320,16 @@ const handleDecline = () => {
max-width: 180px;
font-weight: 500;
}
.privacy-link {
text-decoration: underline;
text-decoration-color: #c4d0dd;
cursor: pointer;
font-weight: bold;
}
.privacy-link:hover {
color: #7cadde;
text-decoration-color: #7cadde;
}
</style>