122 lines
4.4 KiB
Vue
122 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<h2 class="title">{{ name }}</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="tabs is-centered is-fullwidth is-large">
|
|
<ul>
|
|
<li :class="{'is-active': step == 'name'}" @click="step = 'name'">
|
|
<a>Name</a>
|
|
</li>
|
|
<li :class="{'is-active': step == 'questions'}" @click="step = 'questions'">
|
|
<a>Questions</a>
|
|
</li>
|
|
<li :class="{'is-active': step == 'review'}" @click="step = 'review'">
|
|
<a>Review</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column is-half is-offset-one-quarter">
|
|
|
|
<div class="name" v-show="step === 'name'">
|
|
<div class="field">
|
|
<label class="label is-large" for="name">Survey name:</label>
|
|
<div class="control">
|
|
<input type="text" class="input is-large" id="name" v-model="name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="questions" v-show="step === 'questions'">
|
|
<new-question v-on:questionComplete="appendQuestion"/>
|
|
</div>
|
|
|
|
<div class="review" v-show="step === 'review'">
|
|
<ul>
|
|
<li class="question" v-for="(question, qIdx) in questions" :key="`question-${qIdx}`">
|
|
<div class="title">
|
|
{{ question.question }}
|
|
<span class="icon is-medium is-pulled-right delete-question"
|
|
@click.stop="removeQuestion(question)">
|
|
<i class="fa fa-times" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
<ul>
|
|
<li v-for="(choice , cIdx) in question.choices" :key="`choice-${cIdx}`">
|
|
{{ cIdx + 1 }}. {{ choice }}
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="control">
|
|
<a class="button is-large is-primary" @click="submitSurvey">Submit</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import NewQuestion from '@/components/NewQuestion'
|
|
|
|
export default {
|
|
components: { NewQuestion },
|
|
data () {
|
|
return {
|
|
step: 'name',
|
|
name: '',
|
|
questions: []
|
|
}
|
|
},
|
|
methods: {
|
|
appendQuestion (newQuestion) {
|
|
this.questions.push(newQuestion)
|
|
},
|
|
removeQuestion (question) {
|
|
const idx = this.questions.findIndex(q => q.question === question.question)
|
|
this.questions.splice(idx, 1)
|
|
},
|
|
submitSurvey () {
|
|
this.$store.dispatch('submitNewSurvey', {
|
|
name: this.name,
|
|
questions: this.questions
|
|
})
|
|
.then(() => this.$router.push('/'))
|
|
.catch((error) => {
|
|
console.log('Error creating survey', error)
|
|
this.$router.push('/')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.question {
|
|
margin: 10px 20px 25px 10px;
|
|
}
|
|
|
|
.delete-question {
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
}
|
|
|
|
.delete-question:hover {
|
|
background-color: lightgray;
|
|
border-radius: 50%;
|
|
}
|
|
</style> |