Skip to content

Commit 272d1d1

Browse files
phre1phre1
authored
Merge pull request #116 from ditdot-dev/support-page
New example - Support page
2 parents 5652b45 + 3daacc3 commit 272d1d1

File tree

5 files changed

+273
-16
lines changed

5 files changed

+273
-16
lines changed

‎examples/support-page/Example.vue‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
// Create and setup your form here
2+
3+
<template>
4+
<div>
5+
6+
<flow-form
7+
ref="flowform"
8+
v-on:complete="onComplete"
9+
v-on:submit="onSubmit"
10+
v-bind:questions="questions"
11+
v-bind:language="language"
12+
v-bind:progressbar="false"
13+
>
14+
<!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
15+
<!-- We've overriden the default "complete" slot content -->
16+
<template v-slot:complete>
17+
<div class="section-wrap">
18+
<p>
19+
<span class="fh2">Thank you for visiting our technical support page. 🙏</span>
20+
<span class="section-text">
21+
Have a great day!
22+
</span>
23+
</p>
24+
</div>
25+
</template>
26+
27+
<!-- We've overriden the default "completeButton" slot content -->
28+
<template v-slot:completeButton>
29+
<div class="f-submit" v-if="!submitted">
30+
<!-- Leave empty to hide default submit button -->
31+
</div>
32+
</template>
33+
</flow-form>
34+
</div>
35+
</template>
36+
37+
<script>
38+
/*
39+
Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
40+
https://www.ditdot.hr/en
41+
*/
42+
43+
// Import necessary components and classes
44+
import FlowForm from '../../src/components/FlowForm.vue'
45+
import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel'
46+
import LanguageModel from '../../src/models/LanguageModel'
47+
// If using the npm package, use the following line instead of the ones above.
48+
// import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
49+
50+
export default {
51+
name: 'example',
52+
components: {
53+
FlowForm
54+
},
55+
data() {
56+
return {
57+
submitted: false,
58+
completed: false,
59+
language: new LanguageModel(),
60+
// Create question list with QuestionModel instances
61+
questions: [
62+
new QuestionModel({
63+
id: 'multiple_choice',
64+
tagline: "Welcome to our support page!",
65+
title: 'Hi 👋, how can we help you today?',
66+
type: QuestionType.MultipleChoice,
67+
multiple: false,
68+
required: true,
69+
helpTextShow: false,
70+
options: [
71+
new ChoiceOption({
72+
label: 'I have a technical issue',
73+
value: 'technical_issue'
74+
}),
75+
new ChoiceOption({
76+
label: 'I wish to check my ticket status',
77+
value: 'enter_ticket'
78+
}),
79+
],
80+
jump: {
81+
technical_issue: 'technical_issue',
82+
enter_ticket: 'enter_ticket'
83+
}
84+
}),
85+
new QuestionModel({
86+
id: 'technical_issue',
87+
tagline: 'Submit issue > Step 1/3',
88+
title: 'Have you read our technical FAQ?',
89+
type: QuestionType.MultipleChoice,
90+
multiple: false,
91+
required: true,
92+
helpTextShow: false,
93+
description: "Here you'll find answers to",
94+
descriptionLink: [
95+
new LinkOption({
96+
url: '#',
97+
text: 'FAQs',
98+
target: '_self'
99+
})
100+
],
101+
options: [
102+
new ChoiceOption({
103+
label: 'Yes, but still couldn’t find the answer.',
104+
value: 'faq_no'
105+
}),
106+
],
107+
jump: {
108+
faq_no: 'faq_no'
109+
}
110+
}),
111+
new QuestionModel({
112+
id: 'enter_ticket',
113+
tagline: 'Support page > Ticket status',
114+
title: 'Please enter your 6-digit code',
115+
subtitle: 'You received this when you reported your problem',
116+
type: QuestionType.Number,
117+
multiple: false,
118+
required: true,
119+
mask: '#-#-#-#-#-#',
120+
placeholder: '#-#-#-#-#-#'
121+
}),
122+
new QuestionModel({
123+
id: 'ticket_status',
124+
tagline: 'Support page > Ticket status',
125+
title: 'Good news - the wheels are turning, your ticket is being processed!😉',
126+
type: QuestionType.SectionBreak,
127+
jump: {
128+
_other: '_submit'
129+
}
130+
}),
131+
new QuestionModel({
132+
id: 'faq_no',
133+
tagline: 'Submit issue > Step 2/3',
134+
title: 'Please describe your problem',
135+
type: QuestionType.LongText,
136+
required: true,
137+
placeholder: 'Start typing here...',
138+
}),
139+
new QuestionModel({
140+
id: 'ticket',
141+
tagline: 'Submit issue > Step 3/3',
142+
title: 'Your ticket number is: ' + this.getTicket(),
143+
description: 'Thank You. Our support team will contact you as soon as possible.',
144+
type: QuestionType.SectionBreak,
145+
jump: {
146+
_other: '_submit'
147+
}
148+
})
149+
]
150+
}
151+
},
152+
mounted() {
153+
document.addEventListener('keyup', this.onKeyListener)
154+
},
155+
beforeDestroy() {
156+
document.removeEventListener('keyup', this.onKeyListener)
157+
},
158+
methods: {
159+
onKeyListener($event) {
160+
// We've overriden the default "complete" slot so
161+
// we need to implement the "keyup" listener manually.
162+
163+
if ($event.key === 'Enter' && this.completed && !this.submitted) {
164+
this.onSendData()
165+
}
166+
},
167+
168+
/* eslint-disable-next-line no-unused-vars */
169+
onComplete(completed, questionList) {
170+
// This method is called whenever the "completed" status is changed.
171+
this.completed = completed
172+
},
173+
174+
/* eslint-disable-next-line no-unused-vars */
175+
onSubmit(questionList) {
176+
// This method will only be called if you don't override the
177+
// completeButton slot.
178+
this.onSendData()
179+
},
180+
181+
onSendData() {
182+
// Set `submitted` to true so the form knows not to allow back/forward
183+
// navigation anymore.
184+
this.$refs.flowform.submitted = true
185+
186+
this.submitted = true
187+
188+
/* eslint-disable-next-line no-unused-vars */
189+
const data = this.getData()
190+
/*
191+
You can use Fetch API to send the data to your server, eg.:
192+
193+
fetch(url, {
194+
method: 'POST',
195+
headers: {
196+
'Content-Type': 'application/json'
197+
},
198+
body: JSON.stringify(data)
199+
})
200+
*/
201+
},
202+
203+
getData() {
204+
const data = {
205+
questions: [],
206+
answers: []
207+
}
208+
209+
this.questions.forEach(question => {
210+
if (question.title) {
211+
let answer = question.answer
212+
if (typeof answer === 'object') {
213+
answer = answer.join(', ')
214+
}
215+
216+
data.questions.push(question.title)
217+
data.answers.push(answer)
218+
}
219+
})
220+
221+
return data
222+
},
223+
224+
getTicket() {
225+
const ticket = Math.floor(Math.random() * (999999 - 100000) + 100000).toString();
226+
return ticket
227+
}
228+
}
229+
}
230+
</script>
231+
232+
<style lang="css">
233+
@import '../../src/assets/css/themes/theme-green.css';
234+
/* If using the npm package, use the following lines instead of the one above */
235+
/* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css'; */
236+
/* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-green.css'; */
237+
</style>

‎examples/support-page/main.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
3+
https://github.com/ditdot-dev/vue-flow-form
4+
https://www.ditdot.hr/en
5+
*/
6+
7+
import Vue from 'vue'
8+
import Example from './Example.vue'
9+
10+
new Vue({
11+
render: h => h(Example)
12+
}).$mount('#app')

‎src/assets/css/common.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -421,7 +421,7 @@ span.f-text {
421421

422422
span.f-sub {
423423
margin-bottom: 8px;
424-
margin-top: 6px;
424+
margin-top: 5px;
425425
}
426426

427427
span.f-sub span:not(.f-uppercase) {
@@ -463,7 +463,7 @@ ul.f-radios {
463463
}
464464

465465
ul.f-radios li {
466-
padding: .5rem .6rem .5rem;
466+
padding: .6rem .6rem .6rem;
467467
margin: .5rem 0 .6rem;
468468
font-weight: 300;
469469
line-height: 1.2;
@@ -716,7 +716,7 @@ a.f-disabled {
716716
}
717717

718718
.v-form {
719-
margin-top: 10vh;
719+
margin-top: 12vh;
720720
}
721721

722722
}

‎src/assets/css/themes/theme-green.css‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
*/
1010

1111
:root {
12-
--bg-color: #41B883;
12+
--bg-color: #3EAF7C;
1313
--main-text-color: #fff;
14-
--secondary-text-color: #B2E2CD;
15-
--tertiary-text-color: #67C69C;
14+
--secondary-text-color: #B5EBD3;
15+
--tertiary-text-color: #52B789;
1616
--main-accent-color: #111;
17-
--secondary-accent-color: #BBEBD5;
17+
--secondary-accent-color: #ECF80D;
1818
}
1919

2020
body,
@@ -94,19 +94,24 @@ a:active {
9494
/*field-multiplechoicetype*/
9595
ul.f-radios li {
9696
border: 1px solid var(--secondary-text-color);
97+
font-weight: 900;
98+
color: var(--secondary-text-color);
9799
}
98100

99101
ul.f-radios li.f-other.f-selected input {
100102
color: inherit;
101103
}
102104

103-
ul.f-radios li.f-selected, ul.f-radios li:active {
105+
ul.f-radios li.f-selected,
106+
ul.f-radios li:active {
104107
border-color: var(--main-text-color);
108+
color: var(--main-text-color);
105109
background-color: var(--tertiary-text-color);
106110
}
107111

108112
.f-key{
109-
color: var(--secondary-text-color);
113+
color: var(--secondary-accent-color);
114+
font-weight: 300;
110115
}
111116

112117
/*field-dropdowntype*/
@@ -171,7 +176,13 @@ p.description,
171176
}
172177

173178
p.text-success {
174-
color: yellow;
179+
color: #ECF80D;
180+
}
181+
182+
@media screen and (max-width:479px) {
183+
.f-footer .footer-inner-wrap {
184+
background-color: rgba(55,158,112,0.6);
185+
}
175186
}
176187

177188
/*
@@ -248,18 +259,14 @@ p.text-success {
248259
}
249260

250261
/*field-multiplechoicetype*/
251-
ul.f-radios li.f-selected{
252-
color: var(--main-accent-color);
253-
}
254262

255263
ul.f-radios li{
256-
font-weight: 900;
257264
color: var(--secondary-text-color);
258265
}
259266

260267
.f-key{
261-
font-weight: 400;
262268
color: var(--main-accent-color);
269+
font-weight: 300;
263270
}
264271

265-
}
272+
}

‎vue.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ module.exports = {
44
index: {
55
// Replace with your .js entry file path.
66
// To see the quiz example, use 'examples/quiz/main.js'
7+
// To see the support page example, use 'examples/support-page/main.js'
78
entry: 'examples/questionnaire/main.js',
89
template: 'public/index.html',
910
filename: 'index.html'

0 commit comments

Comments
 (0)