Просмотр исходного кода

:construction: Finished up custom invalid input messages to user on survey

tags/0.0.3^2
tomit4 3 лет назад
Родитель
Сommit
3340a568e8
1 измененных файлов: 9 добавлений и 7 удалений
  1. 9
    7
      frontend/src/components/onboarding/QuestionResponse.vue

+ 9
- 7
frontend/src/components/onboarding/QuestionResponse.vue Просмотреть файл

1
 <template lang="pug">
1
 <template lang="pug">
2
 w-card.question
2
 w-card.question
3
+    p {{ question }}
3
     p {{question.question}} 
4
     p {{question.question}} 
4
     section.radio-buttons.w-flex.row.justify-space-between
5
     section.radio-buttons.w-flex.row.justify-space-between
5
         p(v-for="label in question.labels") {{label}}
6
         p(v-for="label in question.labels") {{label}}
6
     w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems" color="red")
7
     w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems" color="red")
7
     w-button.ma1.grow(v-if='question.id !== 6' @click="updateAnswers") NEXT
8
     w-button.ma1.grow(v-if='question.id !== 6' @click="updateAnswers") NEXT
8
     w-button.ma1.grow(v-else @click="updateAll") SUBMIT ANSWERS
9
     w-button.ma1.grow(v-else @click="updateAll") SUBMIT ANSWERS
9
-
10
+    p(v-if='noChoiceMade') Tough choices, we know! Just answer to the best of your ability. The team over at Siimee values the answers you provide us so that we can show you results catered to your specific needs.
10
 </template>
11
 </template>
11
 
12
 
12
 <script>
13
 <script>
26
             { answer: 4 },
27
             { answer: 4 },
27
             { answer: 5 },
28
             { answer: 5 },
28
         ],
29
         ],
29
-        isAnswered: false
30
+        isAnswered: false,
31
+        noChoiceMade: null,
30
     }),
32
     }),
31
     methods: {
33
     methods: {
32
         onUpdate(e) {
34
         onUpdate(e) {
33
             this.isAnswered = true
35
             this.isAnswered = true
36
+            this.noChoiceMade = false
34
             this.$emit('updated', { ...this.question, answer: e + 1 })
37
             this.$emit('updated', { ...this.question, answer: e + 1 })
35
         },
38
         },
36
-        // TODO: render message to user on why they cannot proceed
37
         updateAnswers() {
39
         updateAnswers() {
38
             this.isAnswered ?
40
             this.isAnswered ?
39
             this.$emit('update-is-answered', this.question.id) :
41
             this.$emit('update-is-answered', this.question.id) :
40
-            console.error('no selection made')
42
+            this.noChoiceMade = true
41
         },
43
         },
42
         updateAll() {
44
         updateAll() {
43
-            this.isAnswered ? 
44
-            this.$emit('update-all') : 
45
-            console.error('no selection made')
45
+            this.isAnswered ?
46
+            this.$emit('update-all') :
47
+            this.noChoiceMade = true
46
         }
48
         }
47
     },
49
     },
48
 }
50
 }

Загрузка…
Отмена
Сохранить