Skip to content

Commit cf82e73

Browse files
EkaterinaVuEkaterinaVu
committed
Add questions as components to support-page example
1 parent 3e7fdea commit cf82e73

File tree

2 files changed

+89
-91
lines changed

2 files changed

+89
-91
lines changed

‎examples/support-page/Example.vue‎

Lines changed: 88 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,90 @@
66
<flow-form
77
ref="flowform"
88
v-on:complete="onComplete"
9-
v-bind:questions="questions"
109
v-bind:language="language"
1110
v-bind:progressbar="false"
1211
v-bind:standalone="true"
1312
>
13+
<question
14+
type="multipleChoice"
15+
id="multiple_choice"
16+
tagline="Welcome to our demo support page!"
17+
title="Hi 👋, how can we help you today?"
18+
v-bind:multiple="false"
19+
v-bind:helpTextShow="false"
20+
v-bind:options="[
21+
{
22+
label: 'I have a technical issue',
23+
value: 'technical_issue'
24+
},
25+
{
26+
label: 'I wish to check my ticket status',
27+
value: 'enter_ticket'
28+
},
29+
]"
30+
v-bind:jump="{
31+
technical_issue: 'technical_issue',
32+
enter_ticket: 'enter_ticket'
33+
}"
34+
>
35+
</question>
36+
<question
37+
type="multipleChoice"
38+
id="technical_issue"
39+
tagline="Submit issue > Step 1/3"
40+
title="Have you read our technical FAQ?"
41+
v-bind:multiple="false"
42+
required
43+
v-bind:helpTextShow="false"
44+
description="Here you'll find answers to"
45+
v-bind:descriptionLink="[
46+
{
47+
url: '#',
48+
text: 'FAQs',
49+
target: '_self'
50+
}
51+
]"
52+
v-bind:options="[
53+
{
54+
label: 'Yes, but I couldn’t find the answer',
55+
value: 'faq_no'
56+
}
57+
]"
58+
v-bind:jump="{
59+
faq_no: 'faq_no'
60+
}"
61+
>
62+
</question>
63+
<question
64+
type="text"
65+
id="enter_ticket"
66+
tagline="Support page > Ticket status"
67+
title="Please enter your 6-digit code."
68+
subtitle="You received this when you reported your problem."
69+
v-bind:multiple="false"
70+
required
71+
mask="#-#-#-#-#-#"
72+
placeholder="#-#-#-#-#-#"
73+
v-bind:jump="{
74+
_other: '_submit'
75+
}"
76+
v-model="ticket"
77+
>
78+
</question>
79+
<question
80+
id="faq_no"
81+
tagline="Submit issue > Step 2/3"
82+
title="Please describe your problem."
83+
type="longText"
84+
required
85+
placeholder="Start typing here..."
86+
>
87+
</question>
88+
1489
<!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
15-
<!-- We've overriden the default "complete" slot content -->
1690
<template v-slot:complete>
1791
<div class="f-section-wrap">
18-
<div v-if="questions[0].answer === 'technical_issue'">
92+
<div v-if="answer === 'technical_issue'">
1993
<span class="f-tagline">Submit issue &gt; Step 3/3</span>
2094
<div v-if="loading">
2195
<span class="fh2">Please wait, submitting...</span>
@@ -27,18 +101,13 @@
27101
</div>
28102
<div v-else>
29103
<span class="f-tagline">Support page &gt; Ticket status</span>
30-
<span class="fh2">Good news - the wheels are turning, your ticket is being processed!😉</span>
104+
<span class="fh2">Good news - the wheels are turning, your ticket {{ ticket }} is being processed!😉</span>
31105
<p class="f-description"><span>Have a great day!</span></p>
32106
</div>
33107
</div>
34108
</template>
35-
36-
<!-- We've overriden the default "completeButton" slot content -->
37-
<template v-slot:completeButton>
38-
<div class="f-submit">
39-
<!-- Leave empty to hide default submit button -->
40-
</div>
41-
</template>
109+
<!-- We've overriden the default "complete" slot content -->
110+
42111
</flow-form>
43112
</div>
44113
</template>
@@ -51,95 +120,24 @@
51120
52121
// Import necessary components and classes
53122
import FlowForm from '../../src/components/FlowForm.vue'
54-
import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel'
123+
import Question from '../../src/components/Question.vue'
55124
import LanguageModel from '../../src/models/LanguageModel'
56125
// If using the npm package, use the following line instead of the ones above.
57126
// import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LinkOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
58127
59128
export default {
60129
name: 'example',
61130
components: {
62-
FlowForm
131+
FlowForm,
132+
Question
63133
},
64134
data() {
65135
return {
66136
loading: false,
67137
completed: false,
68138
language: new LanguageModel(),
69-
// Create question list with QuestionModel instances
70-
questions: [
71-
new QuestionModel({
72-
id: 'multiple_choice',
73-
tagline: "Welcome to our demo support page!",
74-
title: 'Hi 👋, how can we help you today?',
75-
type: QuestionType.MultipleChoice,
76-
multiple: false,
77-
required: true,
78-
helpTextShow: false,
79-
options: [
80-
new ChoiceOption({
81-
label: 'I have a technical issue',
82-
value: 'technical_issue'
83-
}),
84-
new ChoiceOption({
85-
label: 'I wish to check my ticket status',
86-
value: 'enter_ticket'
87-
}),
88-
],
89-
jump: {
90-
technical_issue: 'technical_issue',
91-
enter_ticket: 'enter_ticket'
92-
}
93-
}),
94-
new QuestionModel({
95-
id: 'technical_issue',
96-
tagline: 'Submit issue > Step 1/3',
97-
title: 'Have you read our technical FAQ?',
98-
type: QuestionType.MultipleChoice,
99-
multiple: false,
100-
required: true,
101-
helpTextShow: false,
102-
description: "Here you'll find answers to",
103-
descriptionLink: [
104-
new LinkOption({
105-
url: '#',
106-
text: 'FAQs',
107-
target: '_self'
108-
})
109-
],
110-
options: [
111-
new ChoiceOption({
112-
label: 'Yes, but I couldn’t find the answer',
113-
value: 'faq_no'
114-
}),
115-
],
116-
jump: {
117-
faq_no: 'faq_no'
118-
}
119-
}),
120-
new QuestionModel({
121-
id: 'enter_ticket',
122-
tagline: 'Support page > Ticket status',
123-
title: 'Please enter your 6-digit code.',
124-
subtitle: 'You received this when you reported your problem.',
125-
type: QuestionType.Text,
126-
multiple: false,
127-
required: true,
128-
mask: '#-#-#-#-#-#',
129-
placeholder: '#-#-#-#-#-#',
130-
jump: {
131-
_other: '_submit'
132-
}
133-
}),
134-
new QuestionModel({
135-
id: 'faq_no',
136-
tagline: 'Submit issue > Step 2/3',
137-
title: 'Please describe your problem.',
138-
type: QuestionType.LongText,
139-
required: true,
140-
placeholder: 'Start typing here...',
141-
})
142-
]
139+
answer: '',
140+
ticket: '',
143141
}
144142
},
145143
methods: {
@@ -157,7 +155,7 @@
157155
158156
onSendData() {
159157
const self = this
160-
const data = this.getData()
158+
// const data = this.getData()
161159
162160
this.loading = true
163161
@@ -177,7 +175,7 @@
177175
self.loading = false
178176
}, 1500)
179177
},
180-
178+
/*
181179
getData() {
182180
const data = {
183181
questions: [],
@@ -197,7 +195,7 @@
197195
})
198196
199197
return data
200-
},
198+
},*/
201199
202200
getTicket() {
203201
return Math.floor(Math.random() * (999999 - 100000) + 100000).toString()

‎vue.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module.exports = {
1010
// Replace with your .js entry file path.
1111
// To see the quiz example, use 'examples/quiz/main.js'
1212
// To see the support page example, use 'examples/support-page/main.js'
13-
entry: entry || 'examples/questionnaire/main.js',
13+
entry: entry || 'examples/support-page/main.js',
1414
template: 'public/index.html',
1515
filename: 'index.html'
1616
}

0 commit comments

Comments
 (0)