1<template>
2 <div
3 class="grid gap-2 py-3.5 px-4 items-center"
4 :style="{
5 gridTemplateColumns: getGridTemplateColumnsForTable(props.columns),
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 === 'start_time' || column.key === 'end_time'">
14 {{ formatTime(props.row[column.key]) }}
15 </div>
16 <div v-else class="ms-2">
17 <select
18 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"
19 v-model="props.row[column.key]"
20 >
21 <option
22 v-for="option in workDayOptions"
23 :key="option.value"
24 :value="option.value"
25 >
26 {{ option.label }}
27 </option>
28 </select>
29 </div>
30 </div>
31 <div class="flex justify-end">
32 <Dropdown
33 align="end"
34 :options="dropdownOptions"
35 @update:open="(open) => open && (isConfirmingDelete = false)"
36 >
37 <Button icon="lucide-more-horizontal" variant="ghost" />
38 </Dropdown>
39 </div>
40 </div>
41 <hr v-if="!props.isLast" />
42 <WorkDayModal
43 v-model="dialog"
44 :workDaysList="slaData.support_and_resolution"
45 />
46</template>
47
48<script setup lang="ts">
49import { ref } from "vue";
50import { Button, Dropdown } from "frappe-ui";
51import WorkDayModal from "./Modals/WorkDayModal.vue";
52import { ConfirmDelete, getGridTemplateColumnsForTable } from "@/utils";
53import { slaData } from "@/stores/sla";
54
55interface Column {
56 key: string;
57 label: string;
58 isRequired?: boolean;
59}
60
61interface WorkDay {
62 id: string;
63 workday: string;
64 start_time: string;
65 end_time: string;
66}
67
68const props = defineProps<{
69 columns: Column[];
70 row: WorkDay;
71 isLast?: boolean;
72}>();
73
74const workDayOptions = [
75 { label: "Monday", value: "Monday" },
76 { label: "Tuesday", value: "Tuesday" },
77 { label: "Wednesday", value: "Wednesday" },
78 { label: "Thursday", value: "Thursday" },
79 { label: "Friday", value: "Friday" },
80 { label: "Saturday", value: "Saturday" },
81 { label: "Sunday", value: "Sunday" },
82];
83
84const dialog = ref({
85 show: false,
86 isEditing: false,
87 data: {},
88});
89
90const isConfirmingDelete = ref(false);
91
92const dropdownOptions = [
93 {
94 label: "Edit",
95 onClick: () => editWorkDay(),
96 icon: "lucide-edit",
97 },
98 ...ConfirmDelete({
99 onConfirmDelete: () => deleteWorkDay(),
100 isConfirmingDelete,
101 }),
102];
103
104const deleteWorkDay = () => {
105 if (!isConfirmingDelete.value) {
106 isConfirmingDelete.value = true;
107 return;
108 }
109
110 const item = slaData.value.support_and_resolution.indexOf(props.row);
111 if (item !== -1) {
112 slaData.value.support_and_resolution.splice(item, 1);
113 }
114};
115
116const editWorkDay = () => {
117 dialog.value.show = true;
118 dialog.value.isEditing = true;
119 dialog.value.data = {
120 workday: props.row.workday,
121 start_time: props.row.start_time,
122 end_time: props.row.end_time,
123 };
124};
125
126const formatTime = (time) => {
127 if (!time) return "00:00";
128 const [hours, minutes] = time.split(":");
129 const date = new Date();
130 date.setHours(parseInt(hours) || 0, parseInt(minutes) || 0, 0);
131
132 return date.toLocaleTimeString([], {
133 hour: "2-digit",
134 minute: "2-digit",
135 hour12: true,
136 });
137};
138</script>
139