1<template>
2 <SettingsLayoutBase>
3 <template #title>
4 <h1 class="text-md-semibold text-ink-gray-8">
5 {{ __("Service Level Agreements (SLAs)") }}
6 </h1>
7 </template>
8 <template #description>
9 <p class="text-p-sm max-w-md text-ink-gray-6">
10 {{
11 __(
12 "SLAs align your team and customers with defined timelines for a reliable experience. Learn more about SLA "
13 )
14 }}
15 <a
16 href="https://github.com/ikhsanddy/opendesk"
17 target="_blank"
18 class="underline"
19 >{{ __("here.") }}
20 </a>
21 </p>
22 </template>
23 <template #header-actions>
24 <Button
25 :label="__('New')"
26 theme="gray"
27 variant="solid"
28 @click="goToNew()"
29 icon-left="lucide-plus"
30 class="rtl:flex-row-reverse"
31 />
32 </template>
33 <template
34 v-if="slaPolicyList.data?.length > 9 || slaSearchQuery.length"
35 #header-bottom
36 >
37 <div class="relative">
38 <TextInput
39 :model-value="slaSearchQuery"
40 @update:model-value="slaSearchQuery = $event"
41 :placeholder="__('Search')"
42 type="text"
43 class="focus:ring-0 border-outline-gray-2"
44 :debounce="300"
45 >
46 <template #prefix>
47 <LucideSearch class="size-4" />
48 </template>
49 </TextInput>
50 <Button
51 v-if="slaSearchQuery"
52 icon="lucide-x"
53 variant="ghost"
54 @click="slaSearchQuery = ''"
55 class="absolute end-1 top-1/2 -translate-y-1/2"
56 />
57 </div>
58 </template>
59 <template #content>
60 <SlaPolicyList />
61 </template>
62 </SettingsLayoutBase>
63</template>
64
65<script setup lang="ts">
66import { resetSlaData, slaActiveScreen } from "@/stores/sla";
67import { Button } from "frappe-ui";
68import SlaPolicyList from "./SlaPolicyList.vue";
69import { inject, Ref, watch } from "vue";
70import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
71import { SlaPolicyListResourceSymbol } from "@/types";
72
73const slaPolicyList = inject(SlaPolicyListResourceSymbol);
74const slaSearchQuery = inject<Ref>("slaSearchQuery");
75
76const goToNew = () => {
77 resetSlaData();
78 slaActiveScreen.value = {
79 screen: "view",
80 data: null,
81 fetchData: true,
82 };
83};
84
85watch(slaSearchQuery, (newValue) => {
86 slaPolicyList.filters = {
87 name: ["like", `%${newValue}%`],
88 };
89 // no pager on this list, so a shrunken pageLength would hide the rest for good
90 if (!newValue) slaPolicyList.start = 0;
91 slaPolicyList.reload();
92});
93</script>
94