1<template>
2 <div
3 class="grid gap-2 py-3.5 px-4 items-center"
4 :style="{
5 gridTemplateColumns,
6 }"
7 >
8 <div
9 v-for="column in props.columns"
10 :key="column.key"
11 class="w-full overflow-hidden whitespace-nowrap text-ellipsis"
12 >
13 <div v-if="column.key === 'default_priority'">
14 <Checkbox
15 v-model="props.row.default_priority"
16 @update:modelValue="(e) => onDefaultPriorityChange(e)"
17 />
18 </div>
19 <div
20 v-else-if="
21 column.key === 'response_time' || column.key === 'resolution_time'
22 "
23 >
24 <Popover bare>
25 <template #trigger>
26 <div
27 class="min-h-7 w-full cursor-pointer select-none leading-5 p-1 px-2 hover:bg-surface-gray-3 rounded-4"
28 >
29 {{ formatTimeHMS(props.row[column.key]) }}
30 </div>
31 </template>
32 <template #default>
33 <div class="absolute bg-surface-base top-2">
34 <DurationPicker v-model="props.row[column.key]" />
35 </div>
36 </template>
37 </Popover>
38 </div>
39 <div v-else class="ms-2">
40 <select
41 class="w-full h-7 text-base hover:bg-surface-gray-3 rounded-5 p-0 ps-2 pe-5 bg-transparent -ms-2 border-0 text-ink-gray-8 focus-visible:!ring-0 bg-none truncate"
42 v-model="props.row[column.key]"
43 >
44 <option
45 v-for="option in priorityOptions"
46 :key="option.value"
47 :value="option.value"
48 >
49 {{ option.label }}
50 </option>
51 </select>
52 </div>
53 </div>
54 <div class="flex justify-end">
55 <Dropdown
56 align="end"
57 :options="dropdownOptions"
58 @update:open="(open) => open && (isConfirmingDelete = false)"
59 >
60 <Button icon="lucide-more-horizontal" variant="ghost" />
61 </Dropdown>
62 </div>
63 </div>
64 <hr v-if="!props.isLast" />
65 <EditResponseResolutionModal v-model="dialog" :row="props.row" />
66</template>
67
68<script setup lang="ts">
69import DurationPicker from "@/components/frappe-ui/DurationPicker.vue";
70import { slaData } from "@/stores/sla";
71import { ConfirmDelete } from "@/utils";
72import { Button, Checkbox, Dropdown, Popover } from "frappe-ui";
73import { inject, ref } from "vue";
74import EditResponseResolutionModal from "./Modals/EditResponseResolutionModal.vue";
75import { formatTimeHMS } from "./utils";
76
77const props = defineProps({
78 columns: {
79 type: Array<any>,
80 required: true,
81 },
82 row: {
83 type: Object,
84 required: true,
85 },
86 isLast: {
87 type: Boolean,
88 default: false,
89 },
90});
91
92const isConfirmingDelete = ref(false);
93const dialog = ref(false);
94const priorityData = ref({
95 priority: props.row.priority,
96 resolution_time: props.row.resolution_time,
97 response_time: props.row.response_time,
98 default_priority: props.row.default_priority,
99});
100
101const priorityOptions = inject<Array<any>>("priorityOptions");
102
103const dropdownOptions = [
104 {
105 label: "Edit",
106 onClick: () => editItem(),
107 icon: "lucide-edit",
108 },
109 ...ConfirmDelete({
110 onConfirmDelete: () => deleteItem(),
111 isConfirmingDelete,
112 }),
113];
114
115const gridTemplateColumns = inject<string>("gridTemplateColumns");
116
117const deleteItem = () => {
118 if (!isConfirmingDelete.value) {
119 isConfirmingDelete.value = true;
120 return;
121 }
122
123 slaData.value.priorities.splice(
124 slaData.value.priorities.indexOf(props.row),
125 1
126 );
127};
128
129const editItem = () => {
130 dialog.value = true;
131 priorityData.value = {
132 priority: props.row.priority,
133 resolution_time: props.row.resolution_time,
134 response_time: props.row.response_time,
135 default_priority: props.row.default_priority,
136 };
137};
138
139const onDefaultPriorityChange = (defaultPriority) => {
140 slaData.value.priorities.forEach((priority) => {
141 priority.default_priority = false;
142 });
143 props.row.default_priority = defaultPriority;
144};
145</script>
146