| 1 | <template> |
| 2 | <div class="customer-ai-triggers-form flex grow flex-col justify-between"> |
| 3 | <div class="form-box"> |
| 4 | <n-spin v-model:show="loading"> |
| 5 | <n-form :label-width="80" :model="form"> |
| 6 | <n-form-item label="Enabled" path="enabled"> |
| 7 | <n-switch v-model:value="form.enabled" /> |
| 8 | </n-form-item> |
| 9 | </n-form> |
| 10 | </n-spin> |
| 11 | </div> |
| 12 | <div class="buttons-box flex justify-between gap-3"> |
| 13 | <div class="flex gap-3"> |
| 14 | <slot name="additionalActions" :loading></slot> |
| 15 | </div> |
| 16 | <div class="flex gap-3"> |
| 17 | <n-button secondary :disabled="loading" @click="reset()">Reset</n-button> |
| 18 | <n-button type="primary" :loading @click="submit()">Submit</n-button> |
| 19 | </div> |
| 20 | </div> |
| 21 | </div> |
| 22 | </template> |
| 23 | |
| 24 | <script setup lang="ts"> |
| 25 | import type { AITriggerPayload } from "@/api/endpoints/incidentManagement/aiTriggers" |
| 26 | import type { AITrigger } from "@/types/incidentManagement/aiTriggers.d" |
| 27 | import { NButton, NForm, NFormItem, NSpin, NSwitch, useMessage } from "naive-ui" |
| 28 | import { onMounted, ref, watch } from "vue" |
| 29 | import Api from "@/api" |
| 30 | |
| 31 | interface AITriggerForm { |
| 32 | enabled: boolean |
| 33 | } |
| 34 | |
| 35 | const { aiTrigger, customerCode } = defineProps<{ |
| 36 | aiTrigger?: AITrigger |
| 37 | customerCode: string |
| 38 | }>() |
| 39 | |
| 40 | const emit = defineEmits<{ |
| 41 | (e: "submitted", value: AITrigger): void |
| 42 | (e: "startLoading"): void |
| 43 | (e: "stopLoading"): void |
| 44 | ( |
| 45 | e: "mounted", |
| 46 | value: { |
| 47 | reset: () => void |
| 48 | } |
| 49 | ): void |
| 50 | }>() |
| 51 | |
| 52 | const message = useMessage() |
| 53 | const form = ref<AITriggerForm>(getClearForm(aiTrigger)) |
| 54 | const loading = ref(false) |
| 55 | |
| 56 | watch(loading, val => { |
| 57 | if (val) { |
| 58 | emit("startLoading") |
| 59 | } else { |
| 60 | emit("stopLoading") |
| 61 | } |
| 62 | }) |
| 63 | |
| 64 | function getClearForm(aiTrigger?: AITrigger): AITriggerForm { |
| 65 | return { |
| 66 | enabled: aiTrigger?.enabled ?? false |
| 67 | } |
| 68 | } |
| 69 | |
| 70 | function reset(aiTrigger?: AITrigger) { |
| 71 | if (!loading.value) { |
| 72 | form.value = getClearForm(aiTrigger) |
| 73 | } |
| 74 | } |
| 75 | |
| 76 | function submit() { |
| 77 | loading.value = true |
| 78 | |
| 79 | const payload: AITriggerPayload = { |
| 80 | customer_code: customerCode, |
| 81 | enabled: form.value.enabled |
| 82 | } |
| 83 | |
| 84 | Api.incidentManagement.aiTriggers |
| 85 | .setAITrigger(payload) |
| 86 | .then(res => { |
| 87 | if (res.data.success) { |
| 88 | message.success(res.data?.message || "AI Trigger saved successfully") |
| 89 | emit("submitted", { ...payload, id: aiTrigger?.id || 0 }) |
| 90 | } else { |
| 91 | message.warning(res.data?.message || "An error occurred. Please try again later.") |
| 92 | } |
| 93 | }) |
| 94 | .catch(err => { |
| 95 | message.error(err.response?.data?.message || "An error occurred. Please try again later.") |
| 96 | }) |
| 97 | .finally(() => { |
| 98 | loading.value = false |
| 99 | }) |
| 100 | } |
| 101 | |
| 102 | onMounted(() => { |
| 103 | emit("mounted", { |
| 104 | reset |
| 105 | }) |
| 106 | }) |
| 107 | </script> |