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

:recycle: working static onboarding flow

tags/0.0.3^2
juancarbajal98 3 лет назад
Родитель
Сommit
0efb977dd8

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

24
             required: true,
24
             required: true,
25
             type: Array,
25
             type: Array,
26
         },
26
         },
27
-        currentStep: {
28
-            required: true,
29
-            type: Number,
30
-            default: 0,
31
-        },
32
     },
27
     },
33
     emits: ['handle-submit', 'update-answers'],
28
     emits: ['handle-submit', 'update-answers'],
29
+    async created() {
30
+        this.aspectQuestions.forEach((q,i) => {
31
+            console.log(`Aspect #${i}: ${JSON.stringify(q)}`) 
32
+        })
33
+    },
34
     methods: {
34
     methods: {
35
         updateRadio(onRadioSelect) {
35
         updateRadio(onRadioSelect) {
36
             answered[onRadioSelect.id] = onRadioSelect.answer
36
             answered[onRadioSelect.id] = onRadioSelect.answer

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

27
     }),
27
     }),
28
     methods: {
28
     methods: {
29
         onUpdate(e) {
29
         onUpdate(e) {
30
-            this.$emit('updated', { ...this.question, answer: e + 1 })
30
+            console.log('event: ', e)
31
+            // this.$emit('updated', { ...this.question, answer: e + 1 })
31
         },
32
         },
32
     },
33
     },
33
 }
34
 }

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

2
 .splash
2
 .splash
3
     .splash--icon(style='width: 347px; height: 347px; background-color: red')
3
     .splash--icon(style='width: 347px; height: 347px; background-color: red')
4
     div(style='text-align: center')
4
     div(style='text-align: center')
5
-        w-button.ma1.grow(@click='this.$emit("go-to-step", currentStep + 1)') GET STARTED
5
+        w-button.ma1.grow(@click='handleSubmit') GET STARTED
6
+
6
 </template>
7
 </template>
7
 
8
 
8
 <script>
9
 <script>
15
             default: 0,
16
             default: 0,
16
         },
17
         },
17
     },
18
     },
19
+    emits: ['update-answers'],
20
+    methods: {
21
+        handleSubmit() {
22
+            this.$emit('update-answers', null)
23
+        },
24
+    },
25
+
18
 }
26
 }
19
 </script>
27
 </script>

+ 1
- 0
frontend/src/entities/survey/survey.js Просмотреть файл

35
         /**  Fields */
35
         /**  Fields */
36
         this.steps = [...questionSteps] // ! required
36
         this.steps = [...questionSteps] // ! required
37
         this.aspectQuestions = _formatAspectQuestions(this.steps)
37
         this.aspectQuestions = _formatAspectQuestions(this.steps)
38
+        console.log('this.aspectQuestions: ', JSON.stringify(this.aspectQuestions))
38
     }
39
     }
39
 
40
 
40
     isValid() {
41
     isValid() {

+ 13
- 10
frontend/src/utils/lang.js Просмотреть файл

3
 // TODO: Combine these two
3
 // TODO: Combine these two
4
 const allSteps = {
4
 const allSteps = {
5
     usa: {
5
     usa: {
6
-        email: 'email',
6
+        splash: 'splash',
7
         name: 'name',
7
         name: 'name',
8
-        pronouns: 'pronouns',
9
-        seeking: 'seeking',
10
-        urgency: 'urgency',
11
-        experience: 'experience',
12
-        roles: 'role',
13
-        duration: 'duration',
14
-        presence: 'presence',
15
-        language: 'language',
8
+        email: 'email',
9
+        password: 'password',
10
+        // pronouns: 'pronouns',
11
+        // seeking: 'seeking',
12
+        // urgency: 'urgency',
13
+        // experience: 'experience',
14
+        // roles: 'role',
15
+        // duration: 'duration',
16
+        // presence: 'presence',
17
+        // language: 'language',
16
         zipcode: 'zipcode',
18
         zipcode: 'zipcode',
17
-        distance: 'distance',
19
+        // distance: 'distance',
18
         blurb: 'blurb',
20
         blurb: 'blurb',
19
         image: 'image',
21
         image: 'image',
22
+        aspects: 'aspects'
20
     },
23
     },
21
 }
24
 }
22
 
25
 

+ 15
- 12
frontend/src/utils/survey.js Просмотреть файл

3
 import { possible } from './lang.js'
3
 import { possible } from './lang.js'
4
 
4
 
5
 const promptToComponent = {
5
 const promptToComponent = {
6
-    email: 'FormInput',
6
+    splash: 'Splash',
7
     name: 'FormInput',
7
     name: 'FormInput',
8
-    seeking: 'FormDropdown',
9
-    urgency: 'FormDropdown',
10
-    presence: 'FormDropdown',
11
-    duration: 'FormDropdown',
12
-    experience: 'FormTags',
13
-    pronouns: 'FormDropdown',
14
-    language: 'FormDropdown',
15
-    image: 'FormInput',
16
-    distance: 'FormInput',
8
+    email: 'FormInput',
9
+    password: 'FormInput',
17
     zipcode: 'FormInput',
10
     zipcode: 'FormInput',
11
+    // seeking: 'FormDropdown',
12
+    // urgency: 'FormDropdown',
13
+    // presence: 'FormDropdown',
14
+    // duration: 'FormDropdown',
15
+    // experience: 'FormTags',
16
+    // pronouns: 'FormDropdown',
17
+    // language: 'FormDropdown',
18
+    image: 'FormInput',
19
+    // distance: 'FormInput',
18
     blurb: 'FormInput',
20
     blurb: 'FormInput',
19
     aspects: 'Aspects'
21
     aspects: 'Aspects'
20
 }
22
 }
64
             console.log('withComponent :>> ', withComponent)
66
             console.log('withComponent :>> ', withComponent)
65
             return withComponent
67
             return withComponent
66
         })
68
         })
67
-        const unseen = this.questionsFromDb.filter(
68
-            q => !seenIds.includes(q.response_key_id),
69
+        // temporary extra condition in filter 
70
+        let unseen = this.questionsFromDb.filter(
71
+            q => !seenIds.includes(q.response_key_id) && [1,2,3,4,5,6].includes(q.response_key_id),
69
         )
72
         )
70
         return [...stepsInCommon, ...unseen]
73
         return [...stepsInCommon, ...unseen]
71
     }
74
     }

+ 8
- 29
frontend/src/views/OnboardingView.vue Просмотреть файл

11
                 :question='step'
11
                 :question='step'
12
                 @handle-submit='onSubmit'
12
                 @handle-submit='onSubmit'
13
                 @update-answers='updateAnswers'
13
                 @update-answers='updateAnswers'
14
-                v-if='step.component'
14
+                v-if='step && currentStep == i'
15
             )
15
             )
16
-            p(v-else) {{ step }}
17
-            p step: {{ i + 1 }} of {{ survey.steps.length }}
18
-            //- component(
19
-            //-     :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
20
-            //-     :is='step.component'
21
-            //-     :question='step'
22
-            //-     @handle-submit='onSubmit'
23
-            //-     @update-answers='updateAnswers'
24
-            //-     v-if='step && currentStep == i'
25
-            //- )
26
-            //- p(v-if='currentStep == i') step: {{ i+1 }} of {{ survey.steps.length }}
27
 </template>
16
 </template>
28
 
17
 
29
 <script>
18
 <script>
46
     }),
35
     }),
47
     async created() {
36
     async created() {
48
         this.survey = await surveyFactory.createSurvey(allSteps['usa'])
37
         this.survey = await surveyFactory.createSurvey(allSteps['usa'])
49
-        this.configureAspectStep()
50
     },
38
     },
51
     methods: {
39
     methods: {
52
-        configureAspectStep(){
53
-            // remove all steps regarding aspects
54
-            this.survey.steps = this.survey.steps.slice(0,this.survey.steps.length-6)
55
-            // insert single step to render Aspects component
56
-            this.survey.steps.push({
57
-                response_key_id:1,
58
-                response_key_category:"profile",
59
-                response_key_prompt:"aspects",
60
-                response_key_description:"",
61
-                responses:[],
62
-                component:"Aspects"
63
-            })
64
-        },
65
         onSubmit() {
40
         onSubmit() {
66
             console.log(JSON.stringify(this.answered))
41
             console.log(JSON.stringify(this.answered))
67
         },
42
         },
69
             this.currentStep = num
44
             this.currentStep = num
70
         },
45
         },
71
         updateAnswers(payload) {
46
         updateAnswers(payload) {
72
-            const k = payload.question.response_key_prompt
73
-            this.answered[k] = payload.answer
74
-            console.log(`${k}:`, this.answered[k])
47
+            // null payload is passed on splash page
48
+            if(payload){
49
+                const k = payload.question.response_key_prompt
50
+                this.answered[k] = payload.answer
51
+                console.log(`${k}:`, this.answered[k])
52
+                console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
53
+            }
75
             this.goToStep(this.currentStep + 1)
54
             this.goToStep(this.currentStep + 1)
76
         },
55
         },
77
     },
56
     },

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