102 lines
3.0 KiB
Vue
102 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { useEventSource } from '@vueuse/core'
|
|
import { storeToRefs } from 'pinia'
|
|
import { computed, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useStatusStore } from '@/stores/status.ts'
|
|
import { useIssueTypeStore } from '@/stores/issue-type.ts'
|
|
import { useIssueStore } from '@/stores/issue.ts'
|
|
import { useProjectStore } from '@/stores/project.ts'
|
|
import { authClient } from '@/lib/auth-client.ts'
|
|
import { usePushNotifications } from '@/composables/usePushNotifications.ts'
|
|
import SnackbarQueue from '@/components/SnackbarQueue.vue'
|
|
|
|
const route = useRoute()
|
|
const issueStore = useIssueStore()
|
|
const statusStore = useStatusStore()
|
|
const issueTypeStore = useIssueTypeStore()
|
|
const projectStore = useProjectStore()
|
|
const session = authClient.useSession()
|
|
const push = usePushNotifications()
|
|
|
|
const { currentProjectId } = storeToRefs(projectStore)
|
|
|
|
interface IssueSseEvent {
|
|
type: string
|
|
}
|
|
|
|
const { event, open, close } = useEventSource<string[], IssueSseEvent>(
|
|
`${window.location.origin}/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: false,
|
|
},
|
|
)
|
|
|
|
watch(event, () => {
|
|
if (event.value === 'issue.created' || event.value === 'issue.updated' || event.value === 'issue.deleted') {
|
|
issueStore.getStat(currentProjectId.value)
|
|
}
|
|
})
|
|
|
|
// FID сохраняется на бэкенде под текущим пользователем, поэтому стартуем только с сессией
|
|
watch(
|
|
() => session.value.data?.user.id,
|
|
(userId) => {
|
|
if (userId) push.autoStart().catch((e) => console.error('Failed to start push', e))
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
const layout = computed(() => {
|
|
const layout = route?.meta?.layout
|
|
return layout ? `${layout}Layout` : 'DefaultLayout'
|
|
})
|
|
|
|
// Все эти ресурсы требуют авторизации: грузим при появлении сессии и чистим при выходе,
|
|
// иначе запросы, ушедшие до логина, падают с 401 и больше не повторяются
|
|
watch(
|
|
() => session.value.data?.user.id,
|
|
async (userId) => {
|
|
if (!userId) {
|
|
close()
|
|
statusStore.reset()
|
|
issueTypeStore.reset()
|
|
issueStore.reset()
|
|
projectStore.reset()
|
|
return
|
|
}
|
|
|
|
open()
|
|
try {
|
|
await Promise.all([statusStore.list(), issueTypeStore.list()])
|
|
await issueStore.getStat(currentProjectId.value)
|
|
} catch (e) {
|
|
console.error('Failed to load dictionaries', e)
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<component :is="layout">
|
|
<router-view v-slot="{ Component, route }">
|
|
<div :key="route.name" class="h-100">
|
|
<component :is="Component" />
|
|
</div>
|
|
</router-view>
|
|
</component>
|
|
<snackbar-queue />
|
|
</template>
|
|
|
|
<style scoped></style>
|