1<template>
2 <div class="rounded-5 border px-2 border-outline-gray-2 text-sm">
3 <div
4 class="grid p-2 px-4 items-center"
5 :style="{
6 gridTemplateColumns: getGridTemplateColumnsForTable(columns),
7 }"
8 v-if="slaData.support_and_resolution?.length !== 0"
9 >
10 <div
11 v-for="column in columns"
12 :key="column.key"
13 class="text-ink-gray-5 overflow-hidden whitespace-nowrap text-ellipsis"
14 :class="{
15 'ms-2': column.key === 'workday',
16 }"
17 >
18 {{ column.label }}
19 <span v-if="column.isRequired" class="text-ink-red-6">*</span>
20 </div>
21 </div>
22 <hr v-if="slaData.support_and_resolution?.length !== 0" />
23 <SlaWorkDaysListItem
24 v-for="(row, index) in slaData.support_and_resolution"
25 :key="index + row.workday + row.id"
26 :row="row"
27 :columns="columns"
28 :isLast="index === slaData.support_and_resolution.length - 1"
29 />
30 <div
31 v-if="slaData.support_and_resolution?.length === 0"
32 class="text-center p-4 text-ink-gray-5"
33 >
34 No workdays in the list
35 </div>
36 </div>
37 <div class="flex items-center justify-between mt-2.5">
38 <Button
39 v-if="slaData.support_and_resolution.length < 7"
40 variant="subtle"
41 label="Add row"
42 @click="addWorkDay"
43 icon-left="lucide-plus"
44 />
45 <ErrorMessage :message="slaDataErrors.support_and_resolution" />
46 </div>
47</template>
48
49<script setup lang="ts">
50import { Button } from "frappe-ui";
51import SlaWorkDaysListItem from "./SlaWorkDaysListItem.vue";
52import { slaData, slaDataErrors } from "@/stores/sla";
53import { getGridTemplateColumnsForTable } from "@/utils";
54
55interface Column {
56 key: string;
57 label: string;
58 isRequired?: boolean;
59}
60
61const allDays = [
62 "Monday",
63 "Tuesday",
64 "Wednesday",
65 "Thursday",
66 "Friday",
67 "Saturday",
68 "Sunday",
69];
70
71const addWorkDay = () => {
72 const usedDays = new Set(
73 slaData.value.support_and_resolution.map((day) => day.workday)
74 );
75 const nextDay = allDays.find((day) => !usedDays.has(day)) || allDays[0];
76
77 slaData.value.support_and_resolution.push({
78 workday: nextDay,
79 start_time: "09:00:00",
80 end_time: "17:00:00",
81 id: Math.random().toString(36).substring(2, 9),
82 });
83};
84
85const columns: Column[] = [
86 {
87 label: "Day",
88 key: "workday",
89 isRequired: true,
90 },
91 {
92 label: "Start time",
93 key: "start_time",
94 isRequired: true,
95 },
96 {
97 label: "End time",
98 key: "end_time",
99 isRequired: true,
100 },
101];
102</script>
103