1  <script setup>
 2  import { computed, watch } from 'vue'
 3  import { storeToRefs } from 'pinia'
 4  import { useRequestsStore } from '@/stores/requests'
 5  import { useEventsStore } from '@/stores/events'
 6  import { useRoute, useRouter } from 'vue-router'
 7  import StorageRequest from '@/components/StorageRequest.vue'
 8  import SkeletonLoading from '@/components/SkeletonLoading.vue'
 9  
10  const requestsStore = useRequestsStore()
11  const eventsStore = useEventsStore()
12  const { requests, loading, fetched } = storeToRefs(requestsStore)
13  const route = useRoute()
14  const router = useRouter()
15  
16  async function fetchRequest(requestId) {
17    console.log('request id route param changed, fetching...')
18    try {
19      await requestsStore.fetchRequestDetails(requestId)
20    } catch (error) {
21      if (
22        error.message.includes('Unknown request') ||
23        error.message.includes('invalid BytesLike value')
24      ) {
25        router.push({ path: '/404', query: route.query })
26      }
27    }
28  }
29  
30  const request = computed(() => requests.value[route.params.requestId])
31  const detailsLoading = computed(() => requests.value[route.params.requestId]?.loading?.request)
32  
33  watch(() => route.params.requestId, fetchRequest, { immediate: true })
34  
35  function updateModerated(requestId, moderated) {
36    eventsStore.updateModerated(requestId, moderated)
37  }
38  </script>
39  
40  <template>
41    <div>
42      <SkeletonLoading v-if="loading.past || detailsLoading" type="image" />
43      <StorageRequest
44        v-else-if="!!request"
45        :requestId="route.params.requestId"
46        v-model="request"
47        :enableModeration="route.query.enableModeration === 'true'"
48        :slotsLoading="request.loading.slots"
49        :slotsFetched="request.fetched.slots"
50        @updateModerated="updateModerated"
51      />
52    </div>
53  </template>