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

เพิ่มวันหยุดในปฏิทิน

Browse source
This commit is contained in:
AnandaTon 2024-01-04 15:18:18 +07:00
parent 346ba79606
commit 23cb1649f5
2 changed files with 312 additions and 340 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/api/leave/api.leave.ts
View file

@ -2,6 +2,7 @@ import env from "../index"
const retirementResign = `${env.API_URI}/retirement` const retirementResign = `${env.API_URI}/retirement`
const leave = `${env.API_URI}/leave` const leave = `${env.API_URI}/leave`
const holiday = `${env.API_URI}/metadata/holiday/`
export default { export default {
listUser: () => `${retirementResign}/resign/user`, listUser: () => `${retirementResign}/resign/user`,
@ -24,4 +25,6 @@ export default {
leaveCheck: () => `${leave}/user/check`, leaveCheck: () => `${leave}/user/check`,
leaveReport: (id: string) => `${leave}/report/${id}`, leaveReport: (id: string) => `${leave}/report/${id}`,
leaveSendReport: () => `${leave}/report-template/docx`, leaveSendReport: () => `${leave}/report-template/docx`,
listHolidayHistoryYearMonth: (year: number, month: number) => `${holiday}${year}/${month}`,
} }

649
src/modules/05_leave/components/Calendar.vue
View file

@ -1,153 +1,184 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue"
import { useQuasar } from "quasar"; import { useQuasar } from "quasar"
import keycloak from "@/plugins/keycloak"; import keycloak from "@/plugins/keycloak"
import http from "@/plugins/http"; import http from "@/plugins/http"
import config from "@/app.config"; import config from "@/app.config"
/**import calendar*/ /**import calendar*/
import FullCalendar from "@fullcalendar/vue3"; import FullCalendar from "@fullcalendar/vue3"
import dayGridPlugin from "@fullcalendar/daygrid"; import dayGridPlugin from "@fullcalendar/daygrid"
import type { CalendarOptions } from "@fullcalendar/core"; import type { CalendarOptions } from "@fullcalendar/core"
import timeGridPlugin from "@fullcalendar/timegrid"; import timeGridPlugin from "@fullcalendar/timegrid"
import interactionPlugin from "@fullcalendar/interaction"; import interactionPlugin from "@fullcalendar/interaction"
import allLocales from "@fullcalendar/core/locales-all"; import allLocales from "@fullcalendar/core/locales-all"
import listPlugin from "@fullcalendar/list"; import listPlugin from "@fullcalendar/list"
/** import type*/ /** import type*/
import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"; import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"
import type { import type { DataCalendar, LeaveType } from "@/modules/05_leave/interface/response/leave"
DataCalendar,
LeaveType,
} from "@/modules/05_leave/interface/response/leave";
/** import componest*/ /** import componest*/
import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"; import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
/** import stort*/ /** import stort*/
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin"
const mixin = useCounterMixin(); const mixin = useCounterMixin()
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } = const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai, dateToISO } = mixin
mixin;
const $q = useQuasar(); const $q = useQuasar()
const emit = defineEmits(["update:dateYear"]); const emit = defineEmits(["update:dateYear"])
const fullName = ref<string>(""); const fullName = ref<string>("")
const mainData = ref<DataCalendar[]>([]); const mainData = ref<DataCalendar[]>([])
const keycloakId = ref<string>( const keycloakId = ref<string>(keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : "")
keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
);
/** /**
* Option ของปฏิทิน * Option ของปฏิทิน
*/ */
const fullCalendar = ref<any>(); //ref calendar const fullCalendar = ref<any>() //ref calendar
const calendarOptions = ref<CalendarOptions>({ const calendarOptions = ref<any>({
plugins: [ plugins: [
dayGridPlugin, dayGridPlugin,
timeGridPlugin, timeGridPlugin,
interactionPlugin, // needed for dateClick interactionPlugin, // needed for dateClick
listPlugin, listPlugin,
], ],
headerToolbar: false, headerToolbar: false,
initialView: "dayGridMonth", initialView: "dayGridMonth",
initialEvents: [], // alternatively, use the `events` setting to fetch from a feed initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
selectable: true, selectable: true,
dayMaxEvents: true, dayMaxEvents: true,
weekends: true, weekends: true,
locale: "th", locale: "th",
locales: allLocales, locales: allLocales,
expandRows: true, expandRows: true,
nowIndicator: true, nowIndicator: true,
height: "100%", height: "100%",
eventColor: "#4CAF4F", eventColor: "#4CAF4F",
eventTextColor: "#fff", eventTextColor: "#fff",
eventBorderColor: "#50a5fc", eventBorderColor: "#50a5fc",
displayEventTime: false, displayEventTime: false,
editable: true, editable: true,
events: [], events: [],
}); })
const dateMonth = ref<DataDateMonthObject>({ const dateMonth = ref<DataDateMonthObject>({
month: new Date().getMonth(), month: new Date().getMonth(),
year: new Date().getFullYear(), year: new Date().getFullYear(),
}); })
/** function เรียกข้อมูล calendar*/ /** function เรียกข้อมูล calendar*/
async function fetchDataCalendar() { async function fetchDataCalendar() {
showLoader(); showLoader()
await http await http
.post(config.API.leaveCalendar(), { .post(config.API.leaveCalendar(), {
year: dateMonth.value.year, year: dateMonth.value.year,
}) })
.then((res) => { .then(res => {
mainData.value = res.data.result; mainData.value = res.data.result
const double_name = [ const double_name = [...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId))]
...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)), filterLists.value = []
]; for (let i = 1; i <= double_name.length; i++) {
filterLists.value = []; const name = double_name[i - 1]
for (let i = 1; i <= double_name.length; i++) { const filterName = {
const name = double_name[i - 1]; id: name,
const filterName = { name: convertKeycloakId(name),
id: name, color: name === keycloakId.value ? "green" : "grey",
name: convertKeycloakId(name), }
color: name === keycloakId.value ? "green" : "grey", filterLists.value.push(filterName)
}; }
console.log(double_name)
filterLists.value.push(filterName); if (filterVal.value.length !== 0) {
} const data = mainData.value.filter((e: any) => e.keycloakId === keycloakId.value)
if (filterVal.value.length !== 0) { const event = data
const data = mainData.value.filter( .filter((x: any) => x.status != "REJECT" && x.status != "DELETE")
(e: any) => e.keycloakId === keycloakId.value .map((e: DataCalendar) => ({
); id: e.id,
title: `${e.fullName} (${e.leaveTypeName})`,
start: e.leaveStartDate,
end: new Date(new Date(e.leaveEndDate).setHours(23, 59, 59)).toISOString(),
allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
textColor: "black",
}))
calendarOptions.value.events = event
console.log(calendarOptions.value.events)
}
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
hideLoader()
})
await fetchData()
}
const event = data /**
.filter((x: any) => x.status != "REJECT" && x.status != "DELETE") * fetch วันหยุดในปฏิทิน
.map((e: DataCalendar) => ({ */
id: e.id, const fetchData = async () => {
title: `${e.fullName} (${e.leaveTypeName})`, showLoader()
start: e.leaveStartDate, await http
end: new Date( .get(config.API.listHolidayHistoryYearMonth(dateMonth.value.year, dateMonth.value.month + 1))
new Date(e.leaveEndDate).setHours(23, 59, 59) .then(res => {
).toISOString(), const dataNormal = res.data.result.normal
allDay: e.leaveStartDate === e.leaveEndDate ? true : false, const dataSixDays = res.data.result.sixDays
color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC", const data = dataNormal
textColor: "black", const event = data.map((e: any) => ({
})); id: e.id,
calendarOptions.value.events = event; title: `${e.name} `,
} start: e.holidayDate,
}) end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(),
allDay: e.holidayDate === e.holidayDate ? true : false,
.catch((err) => { color: " #CCE5FF",
messageError($q, err); textColor: "#0080FF",
}) }))
.finally(() => { calendarOptions.value.events = [...calendarOptions.value.events, ...event]
hideLoader(); // const dataSix = dataSixDays
}); // const eventSix = dataSix.map((e: any) => ({
// id: e.id,
// title: `${e.name} `,
// start: e.holidayDate,
// end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(),
// allDay: e.holidayDate === e.holidayDate ? true : false,
// color: "#FFE5CC",
// textColor: "#FF8000",
// }))
// calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix]
console.log(calendarOptions.value.events)
})
.catch(e => {
messageError($q, e)
})
.finally(async () => {
hideLoader()
})
} }
function convertKeycloakId(id: any) { function convertKeycloakId(id: any) {
const filterName = mainData.value.find((e: any) => e.keycloakId === id); const filterName = mainData.value.find((e: any) => e.keycloakId === id)
return filterName?.fullName; return filterName?.fullName
} }
const leaveType = ref<LeaveType[]>([]); const leaveType = ref<LeaveType[]>([])
/** function เรียกประเภทการลา */ /** function เรียกประเภทการลา */
async function fectOptionType() { async function fectOptionType() {
await http await http
.get(config.API.leaveType()) .get(config.API.leaveType())
.then(async (res) => { .then(async res => {
leaveType.value = res.data.result; leaveType.value = res.data.result
}) })
.catch((err) => { .catch(err => {
messageError($q, err); messageError($q, err)
}); })
} }
/** /**
@ -155,234 +186,172 @@ async function fectOptionType() {
* @param val datepicker แบบเลือกปีและเดือน * @param val datepicker แบบเลือกปีและเดือน
*/ */
function monthYearThai(val: DataDateMonthObject) { function monthYearThai(val: DataDateMonthObject) {
if (val == null) return ""; if (val == null) return ""
else return monthYear2Thai(val.month, val.year); else return monthYear2Thai(val.month, val.year)
} }
/** function อัปเดท Calendar */ /** function อัปเดท Calendar */
async function updateMonth() { async function updateMonth() {
await fetchDataCalendar(); await fetchDataCalendar()
const calen = fullCalendar.value.getApi(); await fetchData()
const date = new Date(dateMonth.value.year, dateMonth.value.month); const calen = fullCalendar.value.getApi()
calen.gotoDate(date); const date = new Date(dateMonth.value.year, dateMonth.value.month)
calen.gotoDate(date)
} }
const modal = ref<boolean>(false); const modal = ref<boolean>(false)
const leaveId = ref<string>(""); const leaveId = ref<string>("")
/** /**
* function openPopupDateail * function openPopupDateail
* @param id การลา * @param id การลา
*/ */
async function onCilckview(id: string) { async function onCilckview(id: string) {
modal.value = true; modal.value = true
leaveId.value = id; leaveId.value = id
} }
/** function closePopup*/ /** function closePopup*/
async function onClickClose() { async function onClickClose() {
modal.value = false; modal.value = false
} }
/** filter calendar left */ /** filter calendar left */
const filterLists = ref<any>([]); const filterLists = ref<any>([])
const filterVal = ref<any>([]); const filterVal = ref<any>([])
watch( watch(
() => filterVal.value, () => filterVal.value,
() => { () => {
const eventData = filterVal.value.map((item: any) => { const eventData = filterVal.value.map((item: any) => {
return mainData.value return mainData.value
.filter( .filter((e: DataCalendar) => e.keycloakId === item && e.status != "REJECT" && e.status != "DELETE")
(e: DataCalendar) => .map(e => ({
e.keycloakId === item && id: e.id,
e.status != "REJECT" && title: `${e.fullName} (${e.leaveTypeName})`,
e.status != "DELETE" start: e.leaveStartDate,
) end: new Date(new Date(e.leaveEndDate).setHours(23, 59, 59)).toISOString(),
.map((e) => ({ allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
id: e.id, color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
title: `${e.fullName} (${e.leaveTypeName})`, textColor: "black",
start: e.leaveStartDate, }))
end: new Date( })
new Date(e.leaveEndDate).setHours(23, 59, 59) const allEventData = [].concat(...eventData)
).toISOString(), calendarOptions.value.events = allEventData
allDay: e.leaveStartDate === e.leaveEndDate ? true : false, }
color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC", )
textColor: "black",
}));
});
const allEventData = [].concat(...eventData);
calendarOptions.value.events = allEventData;
}
);
onMounted(async () => { onMounted(async () => {
filterVal.value.push(keycloakId.value); filterVal.value.push(keycloakId.value)
await fetchDataCalendar()
await fetchDataCalendar(); await fectOptionType()
await fectOptionType(); })
});
</script> </script>
<template> <template>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm row"> <div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm row">
<q-card class="col-12" flat bordered> <q-card class="col-12" flat bordered>
<div class="q-gutter-sm col-12"> <div class="q-gutter-sm col-12">
<q-list class="rounded-borders q-pt-sm" dense> <q-list class="rounded-borders q-pt-sm" dense>
<q-item <q-item v-for="(item, i) in filterLists" :key="i" tag="label" v-ripple>
v-for="(item, i) in filterLists" <q-checkbox size="sm" v-model="filterVal" :val="item.id" :color="item.color" />
:key="i" <q-item-section>
tag="label" <q-item-label>{{ item.name }}</q-item-label>
v-ripple </q-item-section>
> </q-item>
<q-checkbox </q-list>
size="sm" </div>
v-model="filterVal" </q-card>
:val="item.id" </div>
:color="item.color"
/>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div>
<div class="col-sm-12 col-md-9 row"> <div class="col-sm-12 col-md-9 row">
<div class="q-mt-sm col-12"> <div class="q-mt-sm col-12">
<div class="row col-12 q-gutter-sm"> <div class="row col-12 q-gutter-sm">
<div class="demo-app-main"> <div class="demo-app-main">
<q-card <q-card bordered flat class="q-pa-sm q-mb-sm col-12 row bg-grey-1 shadow-0">
bordered <div class="items-center col-12 row q-col-gutter-sm">
flat <!-- filter เลือกเดือนปี -->
class="q-pa-sm q-mb-sm col-12 row bg-grey-1 shadow-0" <datepicker v-model="dateMonth" :locale="'th'" autoApply month-picker :enableTimePicker="false" @update:modelValue="updateMonth">
> <template #year="{ year }">{{ year + 543 }}</template>
<div class="items-center col-12 row q-col-gutter-sm"> <template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
<!-- filter เลือกเดือนปี --> <template #trigger>
<datepicker <q-input :model-value="monthYearThai(dateMonth)" dense outlined bg-color="white" style="width: 130px">
v-model="dateMonth" <template v-slot:prepend>
:locale="'th'" <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
autoApply </template>
month-picker </q-input>
:enableTimePicker="false" </template>
@update:modelValue="updateMonth" </datepicker>
> </div>
<template #year="{ year }">{{ year + 543 }}</template> </q-card>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:model-value="monthYearThai(dateMonth)"
dense
outlined
bg-color="white"
style="width: 130px"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</q-card>
<div class="main-content"> <div class="main-content">
<FullCalendar <FullCalendar ref="fullCalendar" class="demo-app-calendar" :options="calendarOptions">
ref="fullCalendar" <template v-slot:eventContent="arg">
class="demo-app-calendar" <div class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`">
:options="calendarOptions" <div class="textHover col-10" @click="onCilckview(arg.event.id)">
> {{ arg.event.title }}
<template v-slot:eventContent="arg"> </div>
<div </div>
class="row col-12 items-center no-wrap" </template>
:style="`background: + ${arg.event.color}`" </FullCalendar>
> </div>
<div </div>
class="textHover col-10" </div>
@click="onCilckview(arg.event.id)" <div class="row q-col-gutter-lg justify-end">
> <div class="items-center row">
{{ arg.event.title }} <q-icon size="10px" color="blue" name="mdi-circle" class="q-mr-sm" />
</div> <span class="text-caption text-grey-8">วันหยุด</span>
</div> </div>
</template> <div class="items-center row">
</FullCalendar> <q-icon size="10px" color="green-7" name="mdi-circle" class="q-mr-sm" />
</div> <span class="text-caption text-grey-8">การลาของฉัน</span>
</div> </div>
</div> <div class="items-center row">
<div class="row q-col-gutter-lg justify-end"> <q-icon size="10px" color="grey-6" name="mdi-circle" class="q-mr-sm" />
<div class="items-center row"> <span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
<q-icon </div>
size="10px" </div>
color="green-7" </div>
name="mdi-circle" </div>
class="q-mr-sm" </div>
/>
<span class="text-caption text-grey-8">การลาของฉัน</span>
</div>
<div class="items-center row">
<q-icon
size="10px"
color="grey-6"
name="mdi-circle"
class="q-mr-sm"
/>
<span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
</div>
</div>
</div>
</div>
</div>
<DialogDetail <DialogDetail :modal="modal" :leaveId="leaveId" :onClickClose="onClickClose" :leaveType="leaveType" />
:modal="modal"
:leaveId="leaveId"
:onClickClose="onClickClose"
:leaveType="leaveType"
/>
</template> </template>
<style scope lang="scss"> <style scope lang="scss">
.main-content { .main-content {
height: 70vh; height: 70vh;
} }
.padding-content { .padding-content {
padding: 10px; padding: 10px;
} }
.demo-app-main { .demo-app-main {
flex-grow: 1; flex-grow: 1;
/* padding: 3em; */ /* padding: 3em; */
} }
.fc { .fc {
/* the calendar root */ /* the calendar root */
max-width: 1100px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
} }
.fc-day-today { .fc-day-today {
background-color: #f8f8f8 !important; background-color: #f8f8f8 !important;
} }
.fc-day-today .fc-daygrid-day-number { .fc-day-today .fc-daygrid-day-number {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
/* border: 2px solid #17a259; */ /* border: 2px solid #17a259; */
/* border-radius: 50%; /* border-radius: 50%;
height: 25px; height: 25px;
width: 25px; width: 25px;
font-weight: bold; font-weight: bold;
@ -391,123 +360,123 @@ onMounted(async () => {
} }
.fc-day-today .fc-daygrid-day-frame { .fc-day-today .fc-daygrid-day-frame {
padding: 5%; padding: 5%;
} }
.fc .fc-button-group > .fc-button { .fc .fc-button-group > .fc-button {
color: black; color: black;
background-color: #fafafa; background-color: #fafafa;
border: none; border: none;
} }
.fc .fc-button-group > .fc-button:active { .fc .fc-button-group > .fc-button:active {
color: white; color: white;
background-color: #22a15e; background-color: #22a15e;
border: none; border: none;
} }
.fc .fc-button-group > .fc-button.fc-button-active { .fc .fc-button-group > .fc-button.fc-button-active {
color: white; color: white;
background-color: #22a15e; background-color: #22a15e;
border: none; border: none;
} }
.fc-header-toolbar { .fc-header-toolbar {
background-color: white; background-color: white;
padding: 0px 10px 0px 10px; padding: 0px 10px 0px 10px;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
} }
.fc .fc-scrollgrid-liquid > thead { .fc .fc-scrollgrid-liquid > thead {
background-color: white; background-color: white;
} }
.dp-custom-cell { .dp-custom-cell {
border-radius: 50%; border-radius: 50%;
} }
.dp__today { .dp__today {
border: 1px solid var(--q-primary); border: 1px solid var(--q-primary);
} }
.dp__range_end, .dp__range_end,
.dp__range_start, .dp__range_start,
.dp__active_date { .dp__active_date {
background: var(--q-primary); background: var(--q-primary);
color: var(--dp-primary-text-color); color: var(--dp-primary-text-color);
} }
.datepicker .q-field__label { .datepicker .q-field__label {
padding-left: 5px; padding-left: 5px;
} }
.datepicker .q-field__messages { .datepicker .q-field__messages {
padding-left: 20px; padding-left: 20px;
} }
.datepicker .q-field__native { .datepicker .q-field__native {
padding-left: 5px; padding-left: 5px;
color: var(--q-primary) !important; color: var(--q-primary) !important;
} }
.datepicker .q-field__prepend { .datepicker .q-field__prepend {
padding-left: 6px; padding-left: 6px;
} }
.datepicker .q-field__append { .datepicker .q-field__append {
padding-right: 6px; padding-right: 6px;
} }
.datepicker .q-field__after { .datepicker .q-field__after {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
} }
.fc .fc-popover { .fc .fc-popover {
z-index: 6000; z-index: 6000;
} }
.fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start { .fc-direction-rtl .fc-daygrid-event.fc-event-start {
cursor: pointer; cursor: pointer;
} }
.subName { .subName {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
} }
.subInput { .subInput {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.fc-event { .fc-event {
overflow: hidden; overflow: hidden;
border-color: transparent !important; border-color: transparent !important;
font-weight: 500; font-weight: 500;
} }
.fc-event-main { .fc-event-main {
text-align: left; text-align: left;
padding: 0px 5px; padding: 0px 5px;
} }
.fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start { .fc-direction-rtl .fc-daygrid-event.fc-event-start {
padding-left: 0px; padding-left: 0px;
} }
.fc-theme-standard td, .fc-theme-standard td,
.fc-theme-standard th { .fc-theme-standard th {
border: 1px solid #ebe9f1; border: 1px solid #ebe9f1;
} }
.textHover:hover { .textHover:hover {
color: var(--q-primary); color: var(--q-primary);
} }
</style> </style>