answers textvalue base

src/components/answers/TextValue.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="text-question-component">
+    <input
+      type="text"
+      :value="modelValue"
+      readonly
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps(['modelValue'])
+</script>
+
+<style scoped>
+.text-question-component {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+
+.error {
+  color: red;
+  margin-top: 5px;
+}
+</style>

src/router/index.ts

@@ -17,6 +17,11 @@ const router = createRouter({
       path: '/form/view/:id',
       name: 'View Form',
       component: () => import('@/views/form/View.vue')
+    },
+    {
+      path: '/form/answers/:id',
+      name: 'Form Answers',
+      component: () => import('@/views/form/Answers.vue')
     }
   ],
   scrollBehavior(to) {

src/views/form/Answers.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { makeAPIRequest } from '@/utils/http'
+import FormNotFound from '@/components/FormNotFound.vue'
+import { useRoute } from 'vue-router'
+import TextValue from "@/components/answers/TextValue.vue";
+
+const route = useRoute()
+
+const data = ref([])
+const currentPageNumber = ref(0);
+const isAnswerNotFound = ref(true)
+const mode = ref(0);
+
+onMounted(async () => {
+  const formResponse = await makeAPIRequest('/answer/get', 'GET', { form_id: Number(route.params.id) }, {}, true)
+  if (!formResponse.json || formResponse.status !== 200) {
+    return
+  }
+  data.value = formResponse.json.answers
+  if (data.value.length > 0) {
+    isAnswerNotFound.value = false;
+  }
+})
+</script>
+
+<template>
+  <FormNotFound v-if="isAnswerNotFound" />
+  <div v-else>
+    <button @click="mode = 0">Отдельный пользователь</button>
+    <div class="" v-if="mode === 0">
+      <button @click="currentPageNumber = Math.max(0, currentPageNumber - 1)"><</button>
+      <button @click="currentPageNumber = Math.min(data.length - 1, currentPageNumber + 1)">></button>
+
+      <div class="" v-for="(value, index) in data[currentPageNumber].data.values">
+        <TextValue v-if="value.question_type === 1" v-model="value.value" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>