1<template>
2 <div class="flex items-center justify-between">
3 <div class="flex flex-col gap-1">
4 <div class="text-md-semibold text-ink-gray-8">
5 {{ __("Work Schedule and Holidays") }}
6 </div>
7 <div class="text-p-sm text-ink-gray-6 max-w-lg">
8 {{
9 __(
10 "Set working days, hours, and holidays by selecting a predefined schedule or creating a new one."
11 )
12 }}
13 </div>
14 </div>
15 <Popover bare align="end" :offset="8">
16 <template #trigger="{ open }">
17 <Button
18 class="text-sm"
19 :icon-right="open ? 'lucide-chevron-up' : 'lucide-chevron-down'"
20 :label="slaData.holiday_list"
21 />
22 </template>
23 <template #default>
24 <div
25 class="min-w-40 rounded-6 bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
26 >
27 <div class="max-h-52 overflow-y-auto p-1">
28 <div
29 v-for="holiday in holidayListData.data"
30 :key="holiday.name"
31 class="flex items-center justify-between gap-4 rounded-4 px-2 py-1.5 text-base text-ink-gray-8 cursor-pointer hover:bg-surface-gray-3"
32 @click="slaData.holiday_list = holiday.name"
33 >
34 <div class="flex items-center gap-2 w-full">
35 <input
36 name="holiday_list"
37 :checked="holiday.name === slaData.holiday_list"
38 type="radio"
39 />
40 <div class="select-none">{{ holiday.holiday_list_name }}</div>
41 </div>
42 <div class="flex cursor-pointer items-center gap-1">
43 <Button
44 variant="ghost"
45 @click.stop="editHolidayList(holiday)"
46 icon="lucide-edit"
47 />
48 </div>
49 </div>
50 </div>
51 <div
52 class="mt-1.5 flex flex-col gap-1 border-t border-outline-elevation-2 pt-1.5 p-1"
53 >
54 <Button
55 class="w-full !justify-start !text-ink-gray-5"
56 variant="ghost"
57 :label="__('Create new business holiday')"
58 @click="createNewHolidayList()"
59 icon-left="lucide-plus"
60 />
61 </div>
62 </div>
63 </template>
64 </Popover>
65 </div>
66 <div class="mt-5">
67 <SlaWorkDaysList />
68 </div>
69</template>
70
71<script setup lang="ts">
72import { Button, createListResource, Popover } from "frappe-ui";
73import SlaWorkDaysList from "./SlaWorkDaysList.vue";
74import { setActiveSettingsTab } from "../settingsModal";
75import {
76 holidayListActiveScreen,
77 resetHolidayData,
78} from "@/stores/holidayList";
79import { watchDebounced } from "@vueuse/core";
80import { slaData, validateSlaData } from "@/stores/sla";
81
82const createNewHolidayList = () => {
83 setActiveSettingsTab("Business Holidays");
84 holidayListActiveScreen.value = {
85 screen: "view",
86 data: null,
87 previousScreen: {
88 screen: "view",
89 data: slaData.value.name,
90 },
91 };
92 resetHolidayData();
93};
94
95const editHolidayList = (data: any) => {
96 setActiveSettingsTab("Business Holidays");
97 holidayListActiveScreen.value = {
98 screen: "view",
99 data: data,
100 previousScreen: {
101 screen: "view",
102 data: slaData.value.name,
103 },
104 };
105};
106
107const holidayListData = createListResource({
108 doctype: "OD Service Holiday List",
109 fields: ["name", "holiday_list_name"],
110 auto: true,
111});
112
113watchDebounced(
114 slaData.value.support_and_resolution,
115 () => {
116 validateSlaData("support_and_resolution");
117 },
118 { debounce: 300 }
119);
120</script>
121
122<style scoped>
123input[type="radio"] {
124 display: flex;
125 align-items: center;
126 gap: 8px;
127 cursor: pointer;
128 border: 2px solid #c5c2c2;
129 border-radius: 50%;
130 outline: none;
131 transition: all 0.2s ease;
132 background-color: white;
133}
134
135input[type="radio"]:checked {
136 background-color: black;
137 border: 2px solid #000;
138}
139
140input[type="radio"]:checked::after {
141 content: "";
142 background-color: #fff;
143}
144
145input[type="radio"]:focus {
146 outline: none !important;
147 box-shadow: none !important;
148}
149</style>
150