1<template>
2 <CFConditions
3 v-if="props.conditions.length > 0"
4 :conditions="props.conditions"
5 :level="0"
6 :disableAddCondition="slaDataErrors.condition != ''"
7 />
8 <div
9 v-if="props.conditions.length == 0"
10 class="flex p-4 items-center cursor-pointer justify-center gap-2 text-sm border border-outline-gray-2 text-ink-gray-5 rounded-5"
11 @click="props.conditions.push(['', '', ''])"
12 >
13 <LucidePlus class="size-4" />
14 {{ __("Add a custom condition") }}
15 </div>
16 <div class="flex items-center justify-between mt-2">
17 <Dropdown
18 v-if="props.conditions.length > 0"
19 v-slot="{ open }"
20 :options="dropdownOptions"
21 >
22 <Button
23 :disabled="slaDataErrors.condition != ''"
24 :icon-right="open ? 'lucide-chevron-up' : 'lucide-chevron-down'"
25 :label="__('Add condition')"
26 />
27 </Dropdown>
28 <ErrorMessage :message="slaDataErrors.condition" />
29 </div>
30</template>
31
32<script setup lang="ts">
33import LucidePlus from "~icons/lucide/plus";
34import { Button, Dropdown, ErrorMessage } from "frappe-ui";
35import { slaDataErrors, validateSlaData } from "@/stores/sla";
36import { watchDebounced } from "@vueuse/core";
37import CFConditions from "@/components/conditions-filter/CFConditions.vue";
38import { validateConditions } from "@/utils";
39
40const props = defineProps({
41 conditions: {
42 type: Array<any>,
43 required: true,
44 },
45});
46
47const getConjunction = () => {
48 let conjunction = "and";
49 props.conditions.forEach((condition) => {
50 if (typeof condition == "string") {
51 conjunction = condition;
52 }
53 });
54 return conjunction;
55};
56
57const dropdownOptions = [
58 {
59 label: "Add condition",
60 onClick: () => {
61 addCondition();
62 },
63 },
64 {
65 label: "Add condition group",
66 onClick: () => {
67 const conjunction = getConjunction();
68 props.conditions.push(conjunction, [[]]);
69 },
70 },
71];
72
73const addCondition = () => {
74 const isValid = validateConditions(props.conditions);
75
76 if (!isValid) {
77 return;
78 }
79 const conjunction = getConjunction();
80
81 props.conditions.push(conjunction, ["", "", ""]);
82};
83
84watchDebounced(
85 () => [...props.conditions],
86 () => {
87 validateSlaData("condition");
88 },
89 { deep: true, debounce: 100 }
90);
91</script>
92