98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
|
<modal
|
|
:show="show"
|
|
compact-header
|
|
inner-padding=""
|
|
@close="emit('close')"
|
|
>
|
|
<template #icon>
|
|
<Icon
|
|
name="heroicons:clock"
|
|
size="40px"
|
|
/>
|
|
</template>
|
|
<template #title>
|
|
Past Events
|
|
</template>
|
|
|
|
<UTable
|
|
:loading="integrationEventsLoading"
|
|
:columns="columns"
|
|
:rows="integrationEvents"
|
|
>
|
|
<template #status-data="{ row }">
|
|
<Badge :color="row.status === 'Success' ? 'green' : 'red'">
|
|
{{ row.status }}
|
|
</Badge>
|
|
</template>
|
|
<template #data-data="{ row }">
|
|
<vue-json-pretty
|
|
v-if="row.data && Object.keys(row.data).length > 0"
|
|
:data="row.data"
|
|
:collapsed-node-length="0"
|
|
:show-length="true"
|
|
:show-icon="true"
|
|
/>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</UTable>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-center gap-x-2">
|
|
<v-button
|
|
color="white"
|
|
@click.prevent="emit('close')"
|
|
>
|
|
Close
|
|
</v-button>
|
|
</div>
|
|
</template>
|
|
</modal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import VueJsonPretty from "vue-json-pretty"
|
|
import "vue-json-pretty/lib/styles.css"
|
|
|
|
const props = defineProps({
|
|
show: { type: Boolean, required: true },
|
|
form: { type: Object, required: true },
|
|
formIntegrationId: { type: Number, required: true },
|
|
})
|
|
|
|
const emit = defineEmits(["close"])
|
|
const formIntegrationEventEndpoint =
|
|
"/open/forms/{formid}/integration/{integrationid}/events"
|
|
const columns = [
|
|
{ key: "date", label: "Date", sortable: true },
|
|
{ key: "status", label: "Status", sortable: true },
|
|
{ key: "data", label: "Info" },
|
|
]
|
|
const integrationEvents = ref([])
|
|
const integrationEventsLoading = ref(false)
|
|
|
|
watch(
|
|
() => props.show,
|
|
() => {
|
|
fetchEvents()
|
|
},
|
|
)
|
|
|
|
const fetchEvents = () => {
|
|
if (props.show) {
|
|
nextTick(() => {
|
|
integrationEventsLoading.value = true
|
|
integrationEvents.value = []
|
|
opnFetch(
|
|
formIntegrationEventEndpoint
|
|
.replace("{formid}", props.form.id)
|
|
.replace("{integrationid}", props.formIntegrationId),
|
|
).then((data) => {
|
|
integrationEvents.value = data
|
|
integrationEventsLoading.value = false
|
|
})
|
|
})
|
|
}
|
|
}
|
|
</script>
|