|
|
@@ -1,86 +1,130 @@
|
|
1
|
1
|
<template lang="pug">
|
|
2
|
2
|
main.view--surveycomplete
|
|
3
|
|
- article(style='display: flex; flex-direction: column; align-items: center; text-align: center;')
|
|
|
3
|
+ article(
|
|
|
4
|
+ style='display: flex; flex-direction: column; align-items: center; text-align: center'
|
|
|
5
|
+ )
|
|
4
|
6
|
h2 Thanks for Completing Our Survey!!
|
|
5
|
7
|
h1 Please review your answers and let us know if you need to change anything.
|
|
|
8
|
+ div(v-for='response in responses')
|
|
|
9
|
+ p Your {{ response.stage }}:
|
|
|
10
|
+ p {{ response.val }}
|
|
|
11
|
+ br
|
|
|
12
|
+ .survey-spacer
|
|
|
13
|
+ div(v-for='aspectResponse in aspectResponses')
|
|
|
14
|
+ p {{ aspectResponse.question }} :
|
|
|
15
|
+ br
|
|
|
16
|
+ p {{ aspectResponse.response }}
|
|
|
17
|
+ br
|
|
6
|
18
|
br
|
|
7
|
|
- p(v-for='input in formInputs')
|
|
8
|
|
- p(v-for='(value, key) in answers')
|
|
9
|
|
- p(v-if='input.survey_stage == key && key !== "password"')
|
|
10
|
|
- p Your {{ key }}: {{ value }}
|
|
11
|
|
- br
|
|
12
|
|
- p(v-for='input in formDropdowns')
|
|
13
|
|
- p(v-for='(value, key) in answers')
|
|
14
|
|
- p(v-if='input.survey_stage == key')
|
|
15
|
|
- p Your {{ key }}: {{ value }}
|
|
16
|
|
- br
|
|
17
|
|
- p(v-for='(response, responseIndex) in questionResponses')
|
|
18
|
|
- p(v-for='(value, key) in answers')
|
|
19
|
|
- p(v-if='response.survey_stage == key')
|
|
20
|
|
- p Survey Question {{ responseIndex + 1 }}:
|
|
21
|
|
- p {{ response.response_key_prompt }}
|
|
22
|
|
- p You Answered: {{ value }}
|
|
23
|
|
- br
|
|
24
|
|
- w-button.ma1(@click="changeAnswers") Change Answers
|
|
25
|
|
- w-button.ma1(@click="finalSubmit") Submit Answers
|
|
|
19
|
+ w-button.ma1(@click='changeAnswers') Change Answers
|
|
26
|
20
|
</template>
|
|
27
|
21
|
|
|
28
|
22
|
<script>
|
|
29
|
|
-import {
|
|
30
|
|
- createProfileForUserId,
|
|
31
|
|
- currentProfile,
|
|
32
|
|
- signUpUser
|
|
33
|
|
-} from '@/services'
|
|
34
|
|
-
|
|
|
23
|
+import { currentProfile } from '../services'
|
|
35
|
24
|
export default {
|
|
36
|
25
|
props: {
|
|
37
|
|
- answers: {
|
|
38
|
|
- type: Object,
|
|
39
|
|
- default: () => ({}),
|
|
40
|
|
- },
|
|
41
|
26
|
surveySteps: {
|
|
42
|
27
|
type: Array,
|
|
43
|
28
|
default: () => [],
|
|
44
|
29
|
},
|
|
45
|
30
|
},
|
|
46
|
31
|
data: () => ({
|
|
47
|
|
- surveyObjects: [],
|
|
48
|
|
- formInputs: [],
|
|
49
|
|
- questionResponses: [],
|
|
50
|
|
- formDropdowns: [],
|
|
|
32
|
+ responses: {},
|
|
|
33
|
+ aspectQuestions: {},
|
|
|
34
|
+ surveyStages: {},
|
|
|
35
|
+ aspectResponses: [],
|
|
51
|
36
|
}),
|
|
52
|
37
|
created() {
|
|
53
|
|
- this.surveySteps.forEach((step) => {
|
|
54
|
|
- switch (step.component) {
|
|
55
|
|
- case 'FormInput':
|
|
56
|
|
- this.formInputs.push(step)
|
|
57
|
|
- break
|
|
58
|
|
- case 'FormDropdown':
|
|
59
|
|
- this.formDropdowns.push(step)
|
|
60
|
|
- break
|
|
61
|
|
- case 'QuestionResponse':
|
|
62
|
|
- this.questionResponses.push(step)
|
|
63
|
|
- break
|
|
64
|
|
- }
|
|
65
|
|
- })
|
|
|
38
|
+ // TODO: Troubleshoot bug where not all responses are returned
|
|
|
39
|
+ console.log('currentProfile :=>', currentProfile)
|
|
|
40
|
+ this.aspectQuestions = this.parseSurvey(this.surveySteps, false)
|
|
|
41
|
+ this.surveyStages = this.parseSurvey(this.surveySteps, true)
|
|
|
42
|
+ this.aspectResponses = this.grabAspectResponses(
|
|
|
43
|
+ currentProfile._profile.responses,
|
|
|
44
|
+ this.aspectQuestions,
|
|
|
45
|
+ )
|
|
|
46
|
+ const responses = this.grabResponsesFromProfile(this.aspectQuestions)
|
|
|
47
|
+ this.responses = this.appendStagesToResponses(
|
|
|
48
|
+ responses,
|
|
|
49
|
+ this.surveyStages,
|
|
|
50
|
+ )
|
|
|
51
|
+ },
|
|
|
52
|
+ methods: {
|
|
|
53
|
+ parseSurvey(surveySteps, isStage) {
|
|
|
54
|
+ const parsedAspects = {}
|
|
|
55
|
+ const parsedStages = {}
|
|
|
56
|
+ surveySteps.forEach(step => {
|
|
|
57
|
+ const isAspect = step.category === 'aspect'
|
|
|
58
|
+ if (isAspect) {
|
|
|
59
|
+ parsedAspects[`${step.response_key_id}`] =
|
|
|
60
|
+ step.response_key_prompt
|
|
|
61
|
+ } else {
|
|
|
62
|
+ parsedStages[`${step.response_key_id}`] = step.survey_stage
|
|
|
63
|
+ }
|
|
|
64
|
+ })
|
|
|
65
|
+ return isStage ? parsedStages : parsedAspects
|
|
|
66
|
+ },
|
|
|
67
|
+ grabResponsesFromProfile(aspectQuestions) {
|
|
|
68
|
+ const aspectQuestionsKeys = Object.keys(aspectQuestions).map(Number)
|
|
|
69
|
+ const responses = currentProfile._profile.responses
|
|
|
70
|
+ .map(response => {
|
|
|
71
|
+ if (
|
|
|
72
|
+ !aspectQuestionsKeys.includes(response.response_key_id)
|
|
|
73
|
+ ) {
|
|
|
74
|
+ return response
|
|
|
75
|
+ }
|
|
|
76
|
+ })
|
|
|
77
|
+ .filter(res => {
|
|
|
78
|
+ return typeof res === 'object'
|
|
|
79
|
+ })
|
|
|
80
|
+ return responses
|
|
|
81
|
+ },
|
|
|
82
|
+ appendStagesToResponses(responses, surveyStages) {
|
|
|
83
|
+ const responsesWithStages = responses.map(response => {
|
|
|
84
|
+ return {
|
|
|
85
|
+ ...response,
|
|
|
86
|
+ stage: surveyStages[`${response.response_key_id}`],
|
|
|
87
|
+ }
|
|
|
88
|
+ })
|
|
|
89
|
+ return responsesWithStages
|
|
|
90
|
+ },
|
|
|
91
|
+ grabAspectResponses(responses, questions) {
|
|
|
92
|
+ return responses
|
|
|
93
|
+ .map(response => {
|
|
|
94
|
+ const prompt = questions[`${response.response_key_id}`]
|
|
|
95
|
+ if (prompt) {
|
|
|
96
|
+ return {
|
|
|
97
|
+ question: questions[`${response.response_key_id}`],
|
|
|
98
|
+ response: response.val,
|
|
|
99
|
+ }
|
|
|
100
|
+ }
|
|
|
101
|
+ })
|
|
|
102
|
+ .filter(res => {
|
|
|
103
|
+ return typeof res === 'object'
|
|
|
104
|
+ })
|
|
|
105
|
+ },
|
|
66
|
106
|
},
|
|
67
|
107
|
methods: {
|
|
68
|
|
- changeAnswers(){
|
|
|
108
|
+ changeAnswers() {
|
|
69
|
109
|
console.log('change answers')
|
|
70
|
|
-
|
|
71
|
110
|
},
|
|
72
|
111
|
|
|
73
|
|
- async finalSubmit(){
|
|
|
112
|
+ async finalSubmit() {
|
|
74
|
113
|
// separate user info from responses
|
|
75
|
|
- const [user, survey] = this._separateUserInfoFromResponses(this.answers)
|
|
|
114
|
+ const [user, survey] = this._separateUserInfoFromResponses(
|
|
|
115
|
+ this.answers,
|
|
|
116
|
+ )
|
|
76
|
117
|
|
|
77
|
118
|
// create user
|
|
78
|
119
|
const createdUser = await signUpUser(user)
|
|
79
|
120
|
if (!createdUser) return
|
|
80
|
121
|
|
|
81
|
|
- // create profile
|
|
82
|
|
- const userProfile = await createProfileForUserId(createdUser.user_id, survey)
|
|
83
|
|
- if(!userProfile) return
|
|
|
122
|
+ // create profile
|
|
|
123
|
+ const userProfile = await createProfileForUserId(
|
|
|
124
|
+ createdUser.user_id,
|
|
|
125
|
+ survey,
|
|
|
126
|
+ )
|
|
|
127
|
+ if (!userProfile) return
|
|
84
|
128
|
|
|
85
|
129
|
/**
|
|
86
|
130
|
* Login only after there is a user and
|
|
|
@@ -92,13 +136,13 @@ export default {
|
|
92
|
136
|
},
|
|
93
|
137
|
|
|
94
|
138
|
// TODO write logic to parse answers
|
|
95
|
|
- _separateUserInfoFromResponses(answers){
|
|
96
|
|
- return ['','']
|
|
|
139
|
+ _separateUserInfoFromResponses(answers) {
|
|
|
140
|
+ return ['', '']
|
|
97
|
141
|
},
|
|
98
|
142
|
|
|
99
|
|
- async _setLoginForProfile(profile){
|
|
|
143
|
+ async _setLoginForProfile(profile) {
|
|
100
|
144
|
const currentId = currentProfile.login(profile.profile_id)
|
|
101
|
|
- if(currentId && profile.responses.length){
|
|
|
145
|
+ if (currentId && profile.responses.length) {
|
|
102
|
146
|
currentProfile.setResponses(profile.responses)
|
|
103
|
147
|
}
|
|
104
|
148
|
if (!currentProfile.isComplete) {
|
|
|
@@ -107,7 +151,12 @@ export default {
|
|
107
|
151
|
)
|
|
108
|
152
|
return
|
|
109
|
153
|
}
|
|
110
|
|
- }
|
|
111
|
|
- }
|
|
|
154
|
+ },
|
|
|
155
|
+ },
|
|
112
|
156
|
}
|
|
113
|
157
|
</script>
|
|
|
158
|
+<style>
|
|
|
159
|
+.survey-spacer {
|
|
|
160
|
+ height: 1.25rem;
|
|
|
161
|
+}
|
|
|
162
|
+</style>
|