mirror of
https://github.com/grey-cat-1908/formaptix-web.git
synced 2024-09-22 19:21:59 +03:00
view page error checking
This commit is contained in:
parent
1e2ee1c2a3
commit
b99f1d403d
7 changed files with 150 additions and 113 deletions
7
src/components/FormNotFound.vue
Normal file
7
src/components/FormNotFound.vue
Normal file
|
@ -0,0 +1,7 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<h2>Форма недоступна</h2>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
|
@ -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() {
|
||||
|
|
|
@ -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')
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
.then((r) => r.json())
|
||||
await fetch(finalPath, options)
|
||||
.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)
|
||||
})
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue