@cryptotaxi247 / CoPilot
Code Commits Issues Pulls Sessions CI/CD
main
main
vue 130 lines 3.41 KB
Raw
1 <template>
2 <div class="customer-notifications-workflows flex flex-col gap-4">
3 <transition name="form-fade" mode="out-in">
4 <div v-if="showForm" class="flex flex-col gap-4">
5 <h4>Create a Notification</h4>
6 <CustomerNotificationsWorkflowsForm
7 :customer-code
8 @mounted="formCTX = $event"
9 @submitted="refreshList()"
10 >
11 <template #additionalActions="{ loading: loadingForm }">
12 <n-button :disabled="loadingForm" @click="closeForm()">Close</n-button>
13 </template>
14 </CustomerNotificationsWorkflowsForm>
15 </div>
16 <div v-else class="flex flex-col gap-4">
17 <n-spin :show="loading" class="min-h-48">
18 <template v-if="list.length">
19 <div class="min-h-52">
20 <CustomerNotificationsWorkflowsItem
21 v-for="item of list"
22 :key="item.id"
23 :incident-notification="item"
24 embedded
25 class="item-appear item-appear-bottom item-appear-005 mb-2"
26 @updated="getCustomerNetworkConnectors()"
27 />
28 </div>
29 </template>
30 <template v-else>
31 <n-empty v-if="!loading" class="h-48 justify-center">
32 <div class="flex flex-col items-center gap-4">
33 <p>No Notification found</p>
34
35 <n-button size="small" type="primary" @click="openForm()">
36 <template #icon>
37 <Icon :name="AddIcon" :size="14" />
38 </template>
39 Create a Notification
40 </n-button>
41 </div>
42 </n-empty>
43 </template>
44 </n-spin>
45 </div>
46 </transition>
47 </div>
48 </template>
49
50 <script setup lang="ts">
51 import type { IncidentNotification } from "@/types/incidentManagement/notifications.d"
52 import { NButton, NEmpty, NSpin, useMessage } from "naive-ui"
53 import { defineAsyncComponent, onBeforeMount, ref } from "vue"
54 import Api from "@/api"
55 import Icon from "@/components/common/Icon.vue"
56
57 const { customerCode } = defineProps<{
58 customerCode: string
59 }>()
60 const CustomerNotificationsWorkflowsItem = defineAsyncComponent(
61 () => import("./CustomerNotificationsWorkflowsItem.vue")
62 )
63 const CustomerNotificationsWorkflowsForm = defineAsyncComponent(
64 () => import("./CustomerNotificationsWorkflowsForm.vue")
65 )
66
67 const AddIcon = "carbon:add-alt"
68
69 const message = useMessage()
70 const showForm = ref(false)
71 const loading = ref(false)
72 const list = ref<IncidentNotification[]>([])
73 const formCTX = ref<{ reset: (incidentNotification?: IncidentNotification) => void } | null>(null)
74
75 function getCustomerNetworkConnectors() {
76 loading.value = true
77
78 Api.incidentManagement.notification
79 .getNotifications(customerCode)
80 .then(res => {
81 if (res.data.success) {
82 list.value = res.data?.notifications || []
83 } else {
84 message.warning(res.data?.message || "An error occurred. Please try again later.")
85 }
86 })
87 .catch(err => {
88 message.error(err.response?.data?.message || "An error occurred. Please try again later.")
89 })
90 .finally(() => {
91 loading.value = false
92 })
93 }
94
95 function openForm() {
96 showForm.value = true
97 }
98
99 function closeForm() {
100 showForm.value = false
101 }
102
103 function refreshList() {
104 closeForm()
105 getCustomerNetworkConnectors()
106 }
107
108 onBeforeMount(() => {
109 getCustomerNetworkConnectors()
110 })
111 </script>
112
113 <style lang="scss" scoped>
114 .customer-notifications-workflows {
115 .form-fade-enter-active,
116 .form-fade-leave-active {
117 transition:
118 opacity 0.2s ease-in-out,
119 transform 0.3s ease-in-out;
120 }
121 .form-fade-enter-from {
122 opacity: 0;
123 transform: translateY(10px);
124 }
125 .form-fade-leave-to {
126 opacity: 0;
127 transform: translateY(-10px);
128 }
129 }
130 </style>