64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { useEventSource } from '@vueuse/core'
|
|
import { computed, onMounted, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useStatusStore } from '@/stores/status.ts'
|
|
import { useIssueStore } from '@/stores/issue.ts'
|
|
|
|
const route = useRoute()
|
|
const issueStore = useIssueStore()
|
|
const statusStore = useStatusStore()
|
|
|
|
interface IssueSseEvent {
|
|
type: string
|
|
}
|
|
|
|
const { data } = useEventSource<string[], IssueSseEvent>(
|
|
'http://localhost:3333/api/issues/events',
|
|
['issue.created', 'issue.updated', 'issue.deleted'],
|
|
{
|
|
serializer: { read: (v) => (v ? JSON.parse(v) : null) },
|
|
autoReconnect: {
|
|
retries: 3,
|
|
delay: 1000,
|
|
onFailed() {
|
|
console.log('Failed to connect EventSource after 3 retries')
|
|
},
|
|
},
|
|
autoConnect: true,
|
|
},
|
|
)
|
|
|
|
watch(data, () => {
|
|
if (
|
|
data.value?.type === 'issue.created' ||
|
|
data.value?.type === 'issue.updated' ||
|
|
data.value?.type === 'issue.deleted'
|
|
) {
|
|
issueStore.getStat()
|
|
}
|
|
})
|
|
|
|
const layout = computed(() => {
|
|
const layout = route?.meta?.layout
|
|
return layout ? `${layout}Layout` : 'DefaultLayout'
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await statusStore.list()
|
|
await issueStore.getStat()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<component :is="layout">
|
|
<router-view v-slot="{ Component, route }">
|
|
<div :key="route.name">
|
|
<component :is="Component" />
|
|
</div>
|
|
</router-view>
|
|
</component>
|
|
</template>
|
|
|
|
<style scoped></style>
|