feat: show error on question page

Author: tumidi

frontend/src/components/question/QuestionCard.vue

@@ -8,14 +8,14 @@
     <BCard :variant="cardVariant">
         <BCardText>
             <!-- TODO: Show Question -->
-            <CollapsibleCard v-if="isDetailedServerError(data)" variant="danger">
-                <template #button-title>{{ data.error }}</template>
+            <CollapsibleCard v-if="isDetailedServerError(error)" variant="danger">
+                <template #button-title>{{ error.error }}</template>
                 <p>The package could not parse the question state.</p>
                 <code>
-                    <pre>{{ data.details }}</pre>
+                    <pre>{{ error.details }}</pre>
                 </code>
             </CollapsibleCard>
-            <pre v-else>{{ data }}</pre>
+            <pre v-if="data">{{ data }}</pre>
         </BCardText>
         <ButtonGroup>
             <!-- TODO: Implement clone -->
@@ -59,9 +59,10 @@ import useAppStateStore from '@/stores/useAppStateStore'
 import { isDetailedServerError } from '@/types'
 import type { DetailedServerError, OptionsFormData } from '@/types'
 
-const { questionId } = defineProps<{
+const { data, questionId } = defineProps<{
     questionId: string
-    data: OptionsFormData | DetailedServerError
+    data?: OptionsFormData
+    error?: DetailedServerError
 }>()
 
 const questionLocation = { name: 'question', params: { questionId } } as const

frontend/src/components/question/QuestionList.vue

@@ -11,12 +11,13 @@
         <template #button-title>Saved questions ({{ questionCount }})</template>
         <InvalidQuestionStateError v-if="hasInvalidStates" class="mb-3" />
         <QuestionCard
-            v-for="[questionId, data] in Object.entries(questions)"
+            v-for="[questionId, question] in Object.entries(questions)"
             class="question-card"
             :id="`question-${questionId}`"
             :key="questionId"
             :questionId="questionId"
-            :data="data"
+            :data="question.data"
+            :error="question.error"
         />
         <BAlert v-if="questionCount === 0" :model-value="true" class="mb-0" variant="info"
             >This package has no questions yet.</BAlert
@@ -29,12 +30,23 @@ import { computed } from 'vue'
 
 import { useQuestionStatesQuery } from '@/queries'
 import { isDetailedServerError } from '@/types'
+import type { DetailedServerError, OptionsFormData } from '@/types'
 
 const { asyncStatus, error, data } = useQuestionStatesQuery()
 
-const questions = computed(() => data.value ?? {})
+const questions = computed<Record<string, { data?: OptionsFormData; error?: DetailedServerError }>>(() => {
+    if (data.value === undefined) {
+        return {}
+    }
+    const entries = Object.entries(data.value).map(([questionId, value]) => [
+        questionId,
+        isDetailedServerError(value) ? { data: undefined, error: value } : { data: value, error: undefined },
+    ])
+    return Object.fromEntries(entries)
+})
+
 const questionCount = computed(() => Object.keys(questions.value).length)
-const hasInvalidStates = computed(() => Object.values(questions.value).some(isDetailedServerError))
+const hasInvalidStates = computed(() => Object.values(questions.value).some((q) => q.error))
 </script>
 
 <style lang="scss" scoped>

frontend/src/pages/question/[questionId]/index.vue

@@ -8,7 +8,7 @@
     <IconButton :to="{ name: 'index' }" :icon-component="IMdiArrowLeft" class="ps-0 mb-2" variant="link"
         >Back to Package Preview</IconButton
     >
-    <QuestionCard class="mb-3" :question-id="params.questionId" :data="formData?.data ?? {}" />
+    <QuestionCard class="mb-3" :question-id="params.questionId" :data="formData?.data" :error="detailedServerError" />
     <ButtonGroup class="mb-4">
         <IconButton :icon-component="IMdiImport" variant="link" @click="importAttempt">Import attempt</IconButton>
         <IconButton :icon-component="IMdiAdd" @click="createAttempt" variant="primary">New attempt</IconButton>
@@ -20,15 +20,16 @@
 import IMdiAdd from '~icons/mdi/add'
 import IMdiArrowLeft from '~icons/mdi/arrow-left'
 import IMdiImport from '~icons/mdi/import'
-import { watch } from 'vue'
+import { computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useCreateAttempt } from '@/composables/attempt'
-import { useOptionsFormDataQuery } from '@/queries'
+import { FetchError, useOptionsFormDataQuery } from '@/queries'
+import type { DetailedServerError } from '@/types'
 
 const route = useRouter()
 const { params } = useRoute('question')
-const { data: formData } = useOptionsFormDataQuery(params.questionId)
+const { data: formData, error } = useOptionsFormDataQuery(params.questionId)
 const createAttempt = useCreateAttempt(params.questionId)
 
 // If question doesn't exist, show index instead
@@ -45,6 +46,12 @@ watch(
 function importAttempt() {
     // TODO: import question
 }
+
+const detailedServerError = computed(() =>
+    error.value instanceof FetchError && error.value.message === 'InvalidQuestionStateError'
+        ? ({ error: error.value.message, details: error.value.details } satisfies DetailedServerError)
+        : undefined,
+)
 </script>
 
 <route lang="json">