70d6632fd0
Removes unnecessary manual watcher cleanup via stopWatchQueryChange across multiple Vue components. Vue 3's watch() automatically handles cleanup when components are unmounted, making explicit stopWatchQueryChange calls and onBeforeUnmount handlers redundant. This change: - Improves code maintainability - Reduces boilerplate code - Follows Vue 3 best practices for reactive system cleanup
45 lines
1 KiB
Vue
45 lines
1 KiB
Vue
<script setup>
|
|
import AnimatedList from '@/components/spark-ui/AnimatedList.vue'
|
|
import Notification from '@/components/spark-ui/Notification.vue'
|
|
|
|
const time = inject('time')
|
|
const filters = inject('filters')
|
|
const logs = ref([])
|
|
const logskey = ref(0)
|
|
|
|
async function getEvents() {
|
|
const data = await useAPI('/api/logs/events', {
|
|
query: {
|
|
startAt: time.value.startAt,
|
|
endAt: time.value.endAt,
|
|
...filters.value,
|
|
},
|
|
})
|
|
logs.value = data?.reverse()
|
|
logskey.value = Date.now()
|
|
}
|
|
|
|
watch([time, filters], getEvents, {
|
|
deep: true,
|
|
})
|
|
|
|
onMounted(async () => {
|
|
getEvents()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<AnimatedList v-if="logs.length" :key="logskey" class="md:w-72">
|
|
<template #default>
|
|
<Notification
|
|
v-for="item in logs"
|
|
:key="item.id"
|
|
:name="item.slug"
|
|
:description="[item.os, item.browser].filter(Boolean).join(' ')"
|
|
:icon="getFlag(item.country)"
|
|
:time="item.timestamp"
|
|
class="w-full"
|
|
/>
|
|
</template>
|
|
</AnimatedList>
|
|
</template>
|