From 2b66fb1abe5417759105821408acd1cb440fa795 Mon Sep 17 00:00:00 2001
From: grey-cat-1908 <grey.cat1908@gmail.com>
Date: Tue, 3 Sep 2024 21:28:16 +0300
Subject: [PATCH] color empty required field in view

---
 src/components/forms/ScaleQuestion.vue    | 6 +++++-
 src/components/forms/SelectorQuestion.vue | 6 +++++-
 src/components/forms/TextQuestion.vue     | 6 +++++-
 src/views/form/View.vue                   | 9 +++++++++
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/ScaleQuestion.vue b/src/components/forms/ScaleQuestion.vue
index 3ca6fce..89a1285 100644
--- a/src/components/forms/ScaleQuestion.vue
+++ b/src/components/forms/ScaleQuestion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="default-card">
+  <div class="default-card" :class="{ 'form-red': isEmpty }">
     <div class="view-form-q-title">
       <h3 class="form-q-title">{{ label }}</h3>
       <p class="form-q-description">{{ description }}</p>
@@ -72,6 +72,10 @@ const props = defineProps({
   isRequired: {
     type: Boolean,
     default: true
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false
   }
 })
 
diff --git a/src/components/forms/SelectorQuestion.vue b/src/components/forms/SelectorQuestion.vue
index c06d0e9..bf09da4 100644
--- a/src/components/forms/SelectorQuestion.vue
+++ b/src/components/forms/SelectorQuestion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="default-card" :class="{ 'form-red': error }">
+  <div class="default-card" :class="{ 'form-red': error || isEmpty }">
     <div class="view-form-q-title">
       <h3 class="form-q-title">{{ label }}</h3>
       <p class="form-q-description">{{ description }}</p>
@@ -78,6 +78,10 @@ const props = defineProps({
   isRequired: {
     type: Boolean,
     default: true
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false
   }
 })
 
diff --git a/src/components/forms/TextQuestion.vue b/src/components/forms/TextQuestion.vue
index 8e8c7a3..4b450f4 100644
--- a/src/components/forms/TextQuestion.vue
+++ b/src/components/forms/TextQuestion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="default-card" :class="{ 'form-red': error }">
+  <div class="default-card" :class="{ 'form-red': error || isEmpty }">
     <div class="view-form-q-title">
       <h3 class="form-q-title">{{ label }}</h3>
       <p class="form-q-description">{{ description }}</p>
@@ -63,6 +63,10 @@ const props = defineProps({
   isRequired: {
     type: Boolean,
     default: true
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false
   }
 })
 
diff --git a/src/views/form/View.vue b/src/views/form/View.vue
index 3a11610..18acafd 100644
--- a/src/views/form/View.vue
+++ b/src/views/form/View.vue
@@ -22,6 +22,8 @@ const answers = ref([])
 const isFormNotFound = ref(true)
 const isSent = ref(false)
 
+const emptyQuestions = ref({});
+
 async function prepareNewPage() {
   currentPage.value = data.value.pages[currentPageNumber.value]
   currentPage.value.questions.forEach((q) => {
@@ -36,6 +38,8 @@ function beforeSubmitValidate() {
   for (let question of currentPage.value.questions) {
     const answer = answers.value[question.id]
 
+    emptyQuestions.value[question.id] = true;
+
     if (!answer) return false
     if (question.required && !answer.value && !answer.values) return false
 
@@ -50,6 +54,8 @@ function beforeSubmitValidate() {
     ) {
       return false
     }
+
+    delete emptyQuestions.value[question.id]
   }
   return true
 }
@@ -122,6 +128,7 @@ onMounted(async () => {
                   :maxLength="question.max_length"
                   :validator="question.validator"
                   :isRequired="question.required"
+                  :isEmpty="emptyQuestions[question.id]"
                   v-model="answers[question.id].value"
                   @input="answers[question.id].value = $event"
                 />
@@ -134,6 +141,7 @@ onMounted(async () => {
                   :maxValues="question.max_values"
                   :options="question.options"
                   :isRequired="question.required"
+                  :isEmpty="emptyQuestions[question.id]"
                   v-model="answers[question.id].values"
                   @input="answers[question.id].values = $event"
                 />
@@ -147,6 +155,7 @@ onMounted(async () => {
                   :minLabel="question.min_label"
                   :maxLabel="question.max_label"
                   :isRequired="question.required"
+                  :isEmpty="emptyQuestions[question.id]"
                   v-model="answers[question.id].value"
                   @input="answers[question.id].value = $event"
                 />