@cryptotaxi247 / CoPilot
Code Commits Issues Pulls Sessions CI/CD
main
main
vue 151 lines 3.92 KB
Raw
1 <template>
2 <div class="customer-provision flex flex-col gap-4">
3 <transition name="form-fade" mode="out-in">
4 <div v-if="editing">
5 <CustomerProvisionWizard :customer-name="customerNameSanitized" :customer-code @submitted="submitted">
6 <template #additionalActions>
7 <n-button @click="editing = false">Close</n-button>
8 </template>
9 </CustomerProvisionWizard>
10 </div>
11 <div v-else class="flex flex-col gap-4">
12 <div v-if="customerMeta" class="flex items-center justify-end gap-4">
13 <n-button size="small" type="error" ghost :loading="loadingDelete" @click="handleDelete">
14 <template #icon>
15 <Icon :name="DeleteIcon" :size="15" />
16 </template>
17 Decommission
18 </n-button>
19 </div>
20 <div v-else class="flex items-center justify-between gap-4">
21 <n-button size="small" type="primary" @click="editing = true">
22 <template #icon>
23 <Icon :name="AddIcon" :size="14" />
24 </template>
25 Create Provision
26 </n-button>
27 </div>
28
29 <div class="grid-auto-fit-200 grid gap-2">
30 <CardKV v-for="(value, key) of customerMeta" :key>
31 <template #key>
32 {{ key }}
33 </template>
34 <template #value>
35 {{ formatValue(key, value) }}
36 </template>
37 </CardKV>
38 </div>
39 </div>
40 </transition>
41 </div>
42 </template>
43
44 <script setup lang="ts">
45 // TODO-FE: refactor
46 import type { CustomerMeta } from "@/types/customers.d"
47 import { NButton, useDialog, useMessage } from "naive-ui"
48 import { computed, h, ref, toRefs } from "vue"
49 import Api from "@/api"
50 import CardKV from "@/components/common/cards/CardKV.vue"
51 import Icon from "@/components/common/Icon.vue"
52 import CustomerProvisionWizard from "./CustomerProvisionWizard.vue"
53
54 const props = defineProps<{
55 customerMeta?: CustomerMeta | null
56 customerName?: string | null
57 customerCode: string
58 }>()
59
60 const emit = defineEmits<{
61 (e: "delete"): void
62 (e: "submitted", value: CustomerMeta): void
63 }>()
64
65 const { customerMeta, customerCode, customerName } = toRefs(props)
66
67 const DeleteIcon = "ph:trash"
68 const AddIcon = "carbon:add-alt"
69
70 const loadingDelete = ref(false)
71 const editing = ref(false)
72 const dialog = useDialog()
73 const message = useMessage()
74
75 const customerNameSanitized = computed<string>(() => customerName.value || customerMeta.value?.customer_name || "")
76
77 function formatValue(key: string, value: any): string {
78 if (!value) return "-"
79
80 // Add field-specific formatting rules here
81 const formatRules: Record<string, (val: any) => string> = {
82 customer_meta_index_retention: val => `${val} days`
83 // Add more formatting rules as needed:
84 // another_field: (val) => `${val} units`,
85 }
86
87 return formatRules[key] ? formatRules[key](value) : value
88 }
89
90 function submitted(newData: CustomerMeta) {
91 emit("submitted", newData)
92 editing.value = false
93 }
94
95 function decommissionCustomer() {
96 loadingDelete.value = true
97
98 Api.customers
99 .decommissionCustomer(customerCode.value)
100 .then(res => {
101 if (res.data.success) {
102 emit("delete")
103 } else {
104 message.warning(res.data?.message || "An error occurred. Please try again later.")
105 }
106 })
107 .catch(err => {
108 message.error(err.response?.data?.message || "An error occurred. Please try again later.")
109 })
110 .finally(() => {
111 loadingDelete.value = false
112 })
113 }
114
115 function handleDelete() {
116 dialog.warning({
117 title: "Confirm",
118 content: () =>
119 h("div", {
120 innerHTML: `Are you sure you want to dismiss Customer: <strong>${customerCode.value}</strong> ?`
121 }),
122 positiveText: "Yes I'm sure",
123 negativeText: "Cancel",
124 onPositiveClick: () => {
125 decommissionCustomer()
126 },
127 onNegativeClick: () => {
128 message.info("Decommission canceled")
129 }
130 })
131 }
132 </script>
133
134 <style lang="scss" scoped>
135 .customer-provision {
136 .form-fade-enter-active,
137 .form-fade-leave-active {
138 transition:
139 opacity 0.2s ease-in-out,
140 transform 0.3s ease-in-out;
141 }
142 .form-fade-enter-from {
143 opacity: 0;
144 transform: translateY(10px);
145 }
146 .form-fade-leave-to {
147 opacity: 0;
148 transform: translateY(-10px);
149 }
150 }
151 </style>