From fbeed920c51eef39c7f6d1dff0499cc43eef61eb Mon Sep 17 00:00:00 2001
From: grey-cat-1908 <grey.cat1908@gmail.com>
Date: Fri, 20 Sep 2024 18:02:17 +0300
Subject: [PATCH] bug fix && textarea support

---
 src/components/answers/TextValue.vue  |  9 +++++-
 src/components/edit/QuestionEdit.vue  | 10 +++++-
 src/components/edit/TextPreview.vue   |  9 +++++-
 src/components/forms/TextQuestion.vue | 20 +++++++++++-
 src/views/Profile.vue                 | 46 +++++++++++++--------------
 src/views/form/Answers.vue            |  1 +
 src/views/form/Edit.vue               |  1 +
 src/views/form/View.vue               | 10 ++++--
 8 files changed, 77 insertions(+), 29 deletions(-)

diff --git a/src/components/answers/TextValue.vue b/src/components/answers/TextValue.vue
index f10cc01..37515ae 100644
--- a/src/components/answers/TextValue.vue
+++ b/src/components/answers/TextValue.vue
@@ -4,7 +4,10 @@
       <h3 class="form-q-title">{{ label }}</h3>
       <p class="form-q-description">{{ description }}</p>
     </div>
-    <div class="text-question">
+    <div v-if="textarea" class="text-question">
+      <textarea class="text-question-input" :value="modelValue" readonly />
+    </div>
+    <div v-else class="text-question">
       <input class="text-question-input" type="text" :value="modelValue" readonly />
     </div>
   </div>
@@ -25,6 +28,10 @@ const props = defineProps({
   modelValue: {
     type: Array,
     default: () => []
+  },
+  textarea: {
+    type: Boolean,
+    default: null
   }
 })
 </script>
diff --git a/src/components/edit/QuestionEdit.vue b/src/components/edit/QuestionEdit.vue
index 2265504..ccf42ed 100644
--- a/src/components/edit/QuestionEdit.vue
+++ b/src/components/edit/QuestionEdit.vue
@@ -19,7 +19,8 @@ const props = defineProps({
       min_value: 1,
       max_value: 5,
       min_label: null,
-      max_label: null
+      max_label: null,
+      textarea: false
     }
   }
 })
@@ -83,6 +84,13 @@ async function submitForm() {
           <div class="question-data">
             <div class="" v-if="data.question_type === 1">
               <div class="">
+                <div class="">
+                  <p>Развернутый?</p>
+                  <label class="switch">
+                    <input v-model="data.textarea" type="checkbox" />
+                    <span class="slider"></span>
+                  </label>
+                </div>
                 <p>Валидатор</p>
                 <select v-model="data.validator" id="question-type">
                   <option :value="null">Текст</option>
diff --git a/src/components/edit/TextPreview.vue b/src/components/edit/TextPreview.vue
index f117e2d..f86d24c 100644
--- a/src/components/edit/TextPreview.vue
+++ b/src/components/edit/TextPreview.vue
@@ -3,7 +3,10 @@
     <h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
     <p class="form-q-description">{{ description }}</p>
   </div>
-  <div class="text-question">
+  <div v-if="textarea" class="text-question">
+    <textarea class="text-question-input" placeholder="Ответ на вопрос" readonly />
+  </div>
+  <div v-else class="text-question">
     <input class="text-question-input" placeholder="Ответ на вопрос" type="text" readonly />
   </div>
 </template>
@@ -23,6 +26,10 @@ const props = defineProps({
   required: {
     type: Boolean,
     default: null
+  },
+  textarea: {
+    type: Boolean,
+    default: null
   }
 })
 </script>
diff --git a/src/components/forms/TextQuestion.vue b/src/components/forms/TextQuestion.vue
index 4ae198d..e7c78a8 100644
--- a/src/components/forms/TextQuestion.vue
+++ b/src/components/forms/TextQuestion.vue
@@ -5,7 +5,21 @@
       <p class="form-q-description">{{ description }}</p>
     </div>
     <img v-if="imageUrl" :src="imageUrl" alt="image by user" />
-    <div class="text-question">
+    <div v-if="isTextarea" class="text-question">
+      <textarea
+        class="text-question-input"
+        v-model="inputValue"
+        :maxlength="maxLength"
+        :required="isRequired"
+        @input="validateInput"
+        @blur="validateInput"
+        placeholder="Ваш ответ"
+      />
+      <p v-if="error" class="text-question-error">
+        <PhXCircle class="text-question-error--sign" :size="23" />{{ error }}
+      </p>
+    </div>
+    <div v-else class="text-question">
       <input
         class="text-question-input"
         type="text"
@@ -67,6 +81,10 @@ const props = defineProps({
   isEmpty: {
     type: Boolean,
     default: false
+  },
+  isTextarea: {
+    type: Boolean,
+    default: false
   }
 })
 
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 15c47c9..2dbef57 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -8,7 +8,7 @@ import { makeAPIRequest } from '@/utils/http'
 const authStore = useAuthStore()
 const userForms = ref([])
 
-import {PhEye, PhInfo, PhPen, PhPencil, PhTrash, PhUserList} from '@phosphor-icons/vue'
+import { PhEye, PhInfo, PhPen, PhPencil, PhTrash, PhUserList } from '@phosphor-icons/vue'
 
 onMounted(async () => {
   await authStore.prepareStore()
@@ -53,30 +53,41 @@ async function createForm() {
       <h1 class="profile-title">Профиль пользователя</h1>
       <div class="profile-ctrl-card">
         <div class="profile-ctrl-buttons">
-          <button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn--create">Создать форму</button>
-<!--          <button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn&#45;&#45;creat">Очистить все формы</button>-->
-          <button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn--deleteacc">Удалить аккаунт</button>
+          <button
+            @click="createForm"
+            class="default-button profile-ctrl-btn profile-ctrl-btn--create"
+          >
+            Создать форму
+          </button>
+          <!--          <button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn&#45;&#45;creat">Очистить все формы</button>-->
+          <button
+            @click="createForm"
+            class="default-button profile-ctrl-btn profile-ctrl-btn--deleteacc"
+          >
+            Удалить аккаунт
+          </button>
           <div class="profile-ctrl-info">
-            <PhInfo :size="22" class="profile-ctrl-info--sign" /> После удаления аккаунта вернуть данные невозможно
+            <PhInfo :size="22" class="profile-ctrl-info--sign" /> После удаления аккаунта вернуть
+            данные невозможно
           </div>
         </div>
       </div>
       <div class="profile-cards">
         <div class="profile-card" v-for="(form, index) in userForms" v-if="userForms.length > 0">
           <div class="profile-card-title">
-<!--            <code class="profile-card-num">001</code>-->
+            <!--            <code class="profile-card-num">001</code>-->
             {{ form.data.name }}
           </div>
           <div class="profile-card-buttons">
             <button
-                class="profile-card-btn profile-card-btn--upd"
-                @click="$router.push('/form/edit/' + form.id)"
+              class="profile-card-btn profile-card-btn--upd"
+              @click="$router.push('/form/edit/' + form.id)"
             >
               <div class="profile-card-btn-inner"><PhPencil :size="26" /></div>
             </button>
             <button
-                class="profile-card-btn profile-card-btn--upd"
-                @click="$router.push('/form/edit/' + form.id)"
+              class="profile-card-btn profile-card-btn--upd"
+              @click="$router.push('/form/answers/' + form.id)"
             >
               <div class="profile-card-btn-inner"><PhUserList :size="26" /></div>
             </button>
@@ -104,7 +115,6 @@ async function createForm() {
   margin: 40px 0;
 
   &-ctrl {
-
     &-info {
       display: flex;
       align-items: center;
@@ -143,15 +153,12 @@ async function createForm() {
         border: 1px solid var(--color-third-border);
       }
 
-
-
       @media (max-width: 500px) {
         width: 100%;
       }
 
       &--create {
         color: var(--color-main);
-
       }
 
       &--deleteacc {
@@ -161,7 +168,6 @@ async function createForm() {
     }
   }
 
-
   &-cards {
     margin-top: 30px;
     display: flex;
@@ -181,11 +187,9 @@ async function createForm() {
     //cursor: pointer;
 
     &:hover {
-
       //background: var(--color-main-border);
-
     }
-    
+
     @media (max-width: 680px) {
       flex-direction: column;
       align-items: start;
@@ -227,9 +231,7 @@ async function createForm() {
       display: flex;
       justify-content: center;
       align-items: center;
-      transition:  0.25s ease;
-
-
+      transition: 0.25s ease;
 
       &:hover {
         opacity: 0.7;
@@ -238,7 +240,6 @@ async function createForm() {
       &--delete {
         color: var(--color-red);
       }
-
     }
 
     &-title {
@@ -262,5 +263,4 @@ async function createForm() {
     }
   }
 }
-
 </style>
diff --git a/src/views/form/Answers.vue b/src/views/form/Answers.vue
index 196bfb1..b01610e 100644
--- a/src/views/form/Answers.vue
+++ b/src/views/form/Answers.vue
@@ -61,6 +61,7 @@ onMounted(async () => {
           v-if="questionsData[value.question_id].question_type === 1"
           :label="questionsData[value.question_id].label"
           :description="questionsData[value.question_id].description"
+          :textarea="questionsData[value.question_id].textarea"
           v-model="value.value"
         />
         <SelectorValue
diff --git a/src/views/form/Edit.vue b/src/views/form/Edit.vue
index 161b731..345c98c 100644
--- a/src/views/form/Edit.vue
+++ b/src/views/form/Edit.vue
@@ -125,6 +125,7 @@ onMounted(async () => {
               :label="element.label"
               :description="element.description"
               :required="element.required"
+              :textarea="element.textarea"
             />
             <SelectorPreview
               v-if="element.question_type === 2"
diff --git a/src/views/form/View.vue b/src/views/form/View.vue
index 7a3d486..0ac3ff9 100644
--- a/src/views/form/View.vue
+++ b/src/views/form/View.vue
@@ -18,7 +18,7 @@ const data = ref({})
 const currentPageNumber = ref(0)
 const pageCount = ref(0)
 const currentPage = ref({})
-const answers = ref([])
+const answers = ref({})
 const isFormNotFound = ref(true)
 const isSent = ref(false)
 
@@ -29,7 +29,9 @@ async function prepareNewPage() {
   currentPage.value.questions.forEach((q) => {
     answers.value[q.id] = {
       question_id: q.id,
-      question_type: q.question_type
+      question_type: q.question_type,
+      value: null,
+      values: null
     }
   })
 }
@@ -120,6 +122,7 @@ onMounted(async () => {
             <div class="view-form-q view-form-container">
               <div v-for="question in currentPage.questions">
                 <TextQuestion
+                  :key="question.id"
                   v-if="question.question_type === 1"
                   :label="question.label"
                   :description="question.description"
@@ -128,11 +131,13 @@ onMounted(async () => {
                   :maxLength="question.max_length"
                   :validator="question.validator"
                   :isRequired="question.required"
+                  :isTextarea="question.textarea"
                   :isEmpty="emptyQuestions[question.id]"
                   v-model="answers[question.id].value"
                   @input="answers[question.id].value = $event"
                 />
                 <SelectorQuestion
+                  :key="question.id"
                   v-if="question.question_type === 2"
                   :label="question.label"
                   :description="question.description"
@@ -146,6 +151,7 @@ onMounted(async () => {
                   @input="answers[question.id].values = $event"
                 />
                 <Scale
+                  :key="question.id"
                   v-if="question.question_type === 3"
                   :label="question.label"
                   :description="question.description"