1<template>
2 <SettingsLayoutBase
3 :title="__('Business Holidays')"
4 :description="
5 __(
6 'Set your team’s working days, hours, and holidays using a template or custom schedule.'
7 )
8 "
9 >
10 <template #header-actions>
11 <Button
12 :label="__('New')"
13 theme="gray"
14 variant="solid"
15 @click="goToNew()"
16 icon-left="lucide-plus"
17 class="rtl:flex-row-reverse"
18 />
19 </template>
20 <template
21 v-if="holidayList.data?.length > 9 || holidaySearchRef.length"
22 #header-bottom
23 >
24 <div class="relative">
25 <TextInput
26 :model-value="holidaySearchRef"
27 @update:model-value="holidaySearchRef = $event"
28 :placeholder="__('Search')"
29 type="text"
30 class="focus:ring-0 border-outline-gray-2"
31 :debounce="300"
32 >
33 <template #prefix>
34 <LucideSearch class="size-4" />
35 </template>
36 </TextInput>
37 <Button
38 v-if="holidaySearchRef"
39 icon="lucide-x"
40 variant="ghost"
41 @click="holidaySearchRef = ''"
42 class="absolute end-1 top-1/2 -translate-y-1/2"
43 />
44 </div>
45 </template>
46 <template #content>
47 <HolidayList />
48 </template>
49 </SettingsLayoutBase>
50</template>
51
52<script setup lang="ts">
53import {
54 holidayListActiveScreen,
55 resetHolidayData,
56} from "@/stores/holidayList";
57import HolidayList from "./HolidayList.vue";
58import { inject, Ref, ref, watch } from "vue";
59import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
60import { HolidayListResourceSymbol } from "@/types";
61
62const holidayList = inject(HolidayListResourceSymbol);
63const holidaySearchRef = inject<Ref<string>>("holidaySearchRef");
64
65const goToNew = () => {
66 resetHolidayData();
67 holidayListActiveScreen.value = {
68 screen: "view",
69 data: null,
70 };
71};
72
73watch(holidaySearchRef, (newValue) => {
74 holidayList.filters = {
75 name: ["like", `%${newValue}%`],
76 };
77 // no pager on this list, so a shrunken pageLength would hide the rest for good
78 if (!newValue) holidayList.start = 0;
79 holidayList.reload();
80});
81</script>
82