view page error checking

src/components/FormNotFound.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h2>Форма недоступна</h2>
+</template>
+
+<style scoped></style>

src/components/forms/ScaleQuestion.vue

@@ -16,7 +16,9 @@
         <span>{{ n }}</span>
       </label>
     </div>
-    <button v-if="selectedValue !== null" @click="cancelSelection">Отменить выбор</button>
+    <button v-if="selectedValue !== null" @click="cancelSelection">
+      Отменить выбор
+    </button>
   </div>
 </template>
 
@@ -54,7 +56,7 @@ const emit = defineEmits(['input'])
 const selectedValue = ref(props.value)
 
 const range = computed(() => {
-  return Array.from({ length: props.max - props.min + 1 }, (_, i) => props.min + i)
+  return Array.from({length: props.max - props.min + 1}, (_, i) => props.min + i)
 })
 
 function updateValue() {

src/router/index.ts

@@ -9,7 +9,7 @@ const router = createRouter({
       component: () => import('@/views/Index.vue')
     },
     {
-      path: '/form/view',
+      path: '/form/view/:id',
       name: 'View Form',
       component: () => import('@/views/form/View.vue')
     }

src/utils/http.ts

@@ -4,7 +4,7 @@ export function makeAPIRequest(
     query: any = {},
     body: any = {},
     useAuthorization: boolean = false
-): Promise<any> {
+): Promise < any > {
   return new Promise(async (resolve, _) => {
     let options: any = {
       method,
@@ -23,13 +23,18 @@ export function makeAPIRequest(
       finalPath += '?' + new URLSearchParams(query)
     }
 
-    const r = await fetch(finalPath, options)
+    await fetch(finalPath, options)
-      .then((r) => r.json())
+        .then(async (r) => {
+          return resolve({
+            json: await r.json(),
+            status: r.status
+          })
+        })
         .catch((err) => {
           console.error(err)
-        return resolve({ error: 'CRITICAL_ERROR' })
+          return resolve({
+            error: 'CRITICAL_ERROR'
+          })
         })
-
-    return resolve(r.data)
   })
 }

src/views/form/View.vue

@@ -4,11 +4,18 @@ import { makeAPIRequest } from '@/utils/http'
 import Scale from '@/components/forms/ScaleQuestion.vue'
 import TextQuestion from '@/components/forms/TextQuestion.vue'
 import SelectorQuestion from '@/components/forms/SelectorQuestion.vue'
+import FormNotFound from '@/components/FormNotFound.vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 
 const data = ref({})
 const currentPageNumber = ref(0)
+const pageCount = ref(0)
 const currentPage = ref({})
 const answers = ref([])
+const isFormNotFound = ref(true)
+const isSent = ref(false)
 
 async function prepareNewPage() {
   currentPage.value = data.value.pages[currentPageNumber.value]
@@ -41,22 +48,33 @@ async function submitForm() {
       await makeAPIRequest(
           '/answer/create',
           'POST',
-        { form_id: 1 },
+          { form_id: Number(route.params.id) },
           {
             values: Array.from(Object.keys(answers.value).map((val) => answers.value[val]))
           }
       )
+      isSent.value = true
     }
   }
 }
 
 onMounted(async () => {
-  data.value = await makeAPIRequest('/form/get', 'GET', { id: 1 })
+  const formResponse = await makeAPIRequest('/form/get', 'GET', { id: Number(route.params.id) })
+  if (!formResponse.json || formResponse.status !== 200) {
+    return
+  }
+  data.value = formResponse.json.data
+  pageCount.value = data.value.pages.length
+  isFormNotFound.value = false
   await prepareNewPage()
 })
 </script>
 
 <template>
+  <FormNotFound v-if="isFormNotFound" />
+  <div v-else>
+    <div v-if="isSent">Форма была успешно отправлена.</div>
+    <div v-else>
       <h2>{{ data.name }}</h2>
       <p>{{ currentPage.text }}</p>
 
@@ -93,8 +111,13 @@ onMounted(async () => {
               @input="answers[question.id].value = $event"
           />
         </div>
-    <button type="submit">Отправить</button>
+        <button type="submit" v-if="currentPageNumber === pageCount - 1">
+          Отправить
+        </button>
+        <button type="submit" v-else>Дальше</button>
       </form>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>