1<template>
2 <Dialog v-model:open="dialog" title="Edit response and resolution">
3 <template #default>
4 <div class="flex flex-col gap-4">
5 <FormControl
6 :type="'select'"
7 size="sm"
8 variant="subtle"
9 placeholder="Select Priority"
10 label="Priority"
11 v-model="priorityData.priority"
12 :options="priorityOptions"
13 required
14 />
15 <div>
16 <FormLabel label="Response time" required />
17 <Popover bare>
18 <template #trigger>
19 <div
20 class="mt-2 w-full bg-surface-gray-2 rounded-4 p-1.5 px-2 text-base text-ink-gray-8"
21 >
22 <div v-if="priorityData.response_time">
23 {{ formatTimeHMS(priorityData.response_time) }}
24 </div>
25 <div v-else class="text-ink-gray-4">Select time</div>
26 </div>
27 </template>
28 <template #default>
29 <div class="absolute bg-surface-base top-2">
30 <DurationPicker
31 v-model="priorityData.response_time"
32 :options="{ seconds: false }"
33 />
34 </div>
35 </template>
36 </Popover>
37 </div>
38 <div>
39 <FormLabel label="Resolution time" required />
40 <Popover bare>
41 <template #trigger>
42 <div
43 class="mt-2 w-full bg-surface-gray-2 rounded-4 p-1.5 px-2 text-base text-ink-gray-8"
44 >
45 <div v-if="priorityData.resolution_time">
46 {{ formatTimeHMS(priorityData.resolution_time) }}
47 </div>
48 <div v-else class="text-ink-gray-4">Select time</div>
49 </div>
50 </template>
51 <template #default>
52 <div class="absolute bg-surface-base top-2">
53 <DurationPicker
54 v-model="priorityData.resolution_time"
55 :options="{ seconds: false }"
56 />
57 </div>
58 </template>
59 </Popover>
60 </div>
61 <Checkbox
62 v-model="priorityData.default_priority"
63 label="Set default priority"
64 />
65 </div>
66 </template>
67 <template #actions>
68 <div class="flex justify-between">
69 <div>
70 <Button
71 variant="subtle"
72 :theme="isConfirmingDelete ? 'red' : 'gray'"
73 :label="isConfirmingDelete ? 'Confirm Delete' : 'Delete'"
74 @click="deleteItem"
75 icon-left="lucide-trash-2"
76 />
77 </div>
78 <div class="flex gap-2">
79 <Button
80 variant="subtle"
81 theme="gray"
82 @click="dialog = false"
83 label="Cancel"
84 />
85 <Button variant="solid" @click="onSave" label="Save" />
86 </div>
87 </div>
88 </template>
89 </Dialog>
90</template>
91
92<script setup lang="ts">
93import {
94 Button,
95 Checkbox,
96 Dialog,
97 FormControl,
98 FormLabel,
99 Popover,
100 toast,
101} from "frappe-ui";
102import { inject, ref } from "vue";
103import { formatTimeHMS } from "../utils";
104import DurationPicker from "@/components/frappe-ui/DurationPicker.vue";
105import { slaData } from "@/stores/sla";
106
107const dialog = defineModel<boolean>();
108const emit = defineEmits(["onDefaultPriorityChange"]);
109const isConfirmingDelete = ref(false);
110
111const props = defineProps({
112 row: {
113 type: Object,
114 required: true,
115 },
116});
117
118const priorityOptions = inject("priorityOptions");
119
120const priorityData = ref({
121 priority: props.row.priority,
122 resolution_time: props.row.resolution_time,
123 response_time: props.row.response_time,
124 default_priority: props.row.default_priority,
125});
126
127const validateForm = () => {
128 if (!priorityData.value.priority) {
129 toast.error("Please select a priority");
130 return false;
131 }
132
133 const resolutionTime = parseInt(priorityData.value.resolution_time);
134 if (isNaN(resolutionTime) || resolutionTime <= 0) {
135 toast.error("Resolution time must be a positive number");
136 return false;
137 }
138
139 const responseTime = parseInt(priorityData.value.response_time);
140 if (isNaN(responseTime) || responseTime <= 0) {
141 toast.error("Response time must be a positive number");
142 return false;
143 }
144
145 if (priorityData.value.default_priority) {
146 slaData.value.priorities.forEach((priority) => {
147 priority.default_priority = false;
148 });
149 }
150
151 return true;
152};
153
154const deleteItem = (event) => {
155 event.preventDefault();
156 if (!isConfirmingDelete.value) {
157 isConfirmingDelete.value = true;
158 return;
159 }
160
161 slaData.value.priorities.splice(
162 slaData.value.priorities.indexOf(props.row),
163 1
164 );
165};
166
167const onSave = () => {
168 if (!validateForm()) return;
169 props.row.priority = priorityData.value.priority;
170 props.row.resolution_time = priorityData.value.resolution_time;
171 props.row.response_time = priorityData.value.response_time;
172 props.row.default_priority = priorityData.value.default_priority;
173
174 dialog.value = false;
175};
176</script>
177