@cryptotaxi247 / CoPilot
Code Commits Issues Pulls Sessions CI/CD
main
main
vue 127 lines 3.37 KB
Raw
1 <template>
2 <div v-if="!loading && !integrationData" class="flex min-h-80 items-center justify-center">
3 <n-empty description="No metadata found" />
4 </div>
5 <div v-else class="flex grow flex-col">
6 <n-collapse-transition :show="mode === 'edit'">
7 <CustomerIntegrationMetaForm v-if="integrationData" :integration-data @success="successHandler()">
8 <template #extraActions>
9 <n-button secondary @click="setViewMode()">
10 <template #icon>
11 <Icon :name="BackIcon" />
12 </template>
13 Back
14 </n-button>
15 </template>
16 </CustomerIntegrationMetaForm>
17 </n-collapse-transition>
18 <n-collapse-transition :show="mode === 'view'" class="flex grow flex-col">
19 <n-spin
20 :show="loading"
21 content-class="flex grow flex-col justify-between gap-14"
22 class="flex grow flex-col"
23 >
24 <!-- Read-only View (when not editing) -->
25 <div class="grid-auto-fit-200 grid gap-2">
26 <CardKV v-for="(value, key) of integrationData" :key>
27 <template #key>
28 {{ getMetaFieldLabel(`${key}`) }}
29 </template>
30 <template #value>
31 {{ value || "—" }}
32 </template>
33 </CardKV>
34 </div>
35
36 <!-- Bottom Actions -->
37 <div class="flex items-center justify-end">
38 <div class="flex gap-3">
39 <n-button secondary :loading @click="loadMetaData()">
40 <template #icon>
41 <Icon :name="RefreshIcon" />
42 </template>
43 Refresh
44 </n-button>
45 <n-button secondary type="primary" @click="setEditMode()">
46 <template #icon>
47 <Icon :name="EditIcon" />
48 </template>
49 Edit
50 </n-button>
51 </div>
52 </div>
53 </n-spin>
54 </n-collapse-transition>
55 </div>
56 </template>
57
58 <script setup lang="ts">
59 import type { CustomerIntegrationMetaNetwork, CustomerIntegrationMetaThirdParty } from "@/types/integrations.d"
60 import { NButton, NCollapseTransition, NEmpty, NSpin, useMessage } from "naive-ui"
61 import { onBeforeMount, ref } from "vue"
62 import Api from "@/api"
63 import CardKV from "@/components/common/cards/CardKV.vue"
64 import Icon from "@/components/common/Icon.vue"
65 import CustomerIntegrationMetaForm from "./CustomerIntegrationMetaForm.vue"
66 import { getMetaFieldLabel } from "./utils"
67
68 const { customerCode, integrationName } = defineProps<{
69 customerCode: string
70 integrationName: string
71 }>()
72
73 type Mode = "view" | "edit"
74
75 const RefreshIcon = "carbon:renew"
76 const EditIcon = "carbon:edit"
77 const BackIcon = "carbon:arrow-left"
78
79 const message = useMessage()
80 const loading = ref(false)
81 const mode = ref<Mode>("view")
82 const integrationData = ref<CustomerIntegrationMetaThirdParty | CustomerIntegrationMetaNetwork | null>(null)
83
84 function setMode(newMode: Mode): void {
85 mode.value = newMode
86 }
87
88 function setEditMode() {
89 setMode("edit")
90 }
91
92 function setViewMode() {
93 setMode("view")
94 }
95
96 function successHandler() {
97 setViewMode()
98 loadMetaData()
99 }
100
101 function loadMetaData() {
102 loading.value = true
103
104 Api.integrations
105 .getMetaAuto(customerCode, integrationName)
106 .then(res => {
107 if (res.data.success) {
108 integrationData.value = res.data.data
109 } else {
110 message.warning(res.data?.message || "Failed to load metadata")
111 integrationData.value = null
112 }
113 })
114 .catch(err => {
115 const errorMsg = err.response?.data?.message || "An error occurred while loading metadata"
116 message.error(errorMsg)
117 integrationData.value = null
118 })
119 .finally(() => {
120 loading.value = false
121 })
122 }
123
124 onBeforeMount(() => {
125 loadMetaData()
126 })
127 </script>