2019-05-14 01:15:45 +02:00
|
|
|
<!--
|
|
|
|
- @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
|
|
|
|
-
|
|
|
|
- @author René Gieling <github@dartcafe.de>
|
|
|
|
- @author Nick Gallo
|
|
|
|
-
|
|
|
|
- @license GNU AGPL version 3 or any later version
|
|
|
|
-
|
|
|
|
- This program is free software: you can redistribute it and/or modify
|
|
|
|
- it under the terms of the GNU Affero General Public License as
|
|
|
|
- published by the Free Software Foundation, either version 3 of the
|
|
|
|
- License, or (at your option) any later version.
|
|
|
|
-
|
|
|
|
- This program is distributed in the hope that it will be useful,
|
|
|
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
- GNU Affero General Public License for more details.
|
|
|
|
-
|
|
|
|
- You should have received a copy of the GNU Affero General Public License
|
|
|
|
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- UPDATE: Adds Quiz option and takes the input:
|
|
|
|
- is yet to store input of quizzes and cannot represtent them
|
|
|
|
- requires quizFormItem.vue (should be added to svn)
|
|
|
|
-->
|
|
|
|
|
|
|
|
<template>
|
2020-03-20 12:22:07 +01:00
|
|
|
<AppContent>
|
2020-02-26 14:00:27 +01:00
|
|
|
<Controls :intitle="title">
|
2019-05-14 01:15:45 +02:00
|
|
|
<template slot="after">
|
2020-03-21 19:07:46 +01:00
|
|
|
<button :disabled="writingForm" class="button btn primary" @click="debounceWriteForm">
|
2019-05-14 01:15:45 +02:00
|
|
|
<span>{{ saveButtonTitle }}</span>
|
|
|
|
<span v-if="writingForm" class="icon-loading-small" />
|
|
|
|
</button>
|
|
|
|
<button class="button symbol icon-settings" @click="switchSidebar" />
|
|
|
|
</template>
|
2020-02-26 14:00:27 +01:00
|
|
|
</Controls>
|
2019-05-14 01:15:45 +02:00
|
|
|
|
|
|
|
<div class="workbench">
|
|
|
|
<div>
|
|
|
|
<h2>{{ t('forms', 'Form description') }}</h2>
|
|
|
|
|
|
|
|
<label>{{ t('forms', 'Title') }}</label>
|
2020-02-26 13:39:50 +01:00
|
|
|
<input id="formTitle"
|
|
|
|
v-model="form.event.title"
|
|
|
|
:class="{ error: titleEmpty }"
|
|
|
|
type="text">
|
2019-05-14 01:15:45 +02:00
|
|
|
|
|
|
|
<label>{{ t('forms', 'Description') }}</label>
|
2020-02-26 14:00:27 +01:00
|
|
|
<textarea id="formDesc" v-model="form.event.description" style="resize: vertical; width: 100%;" />
|
2019-05-14 01:15:45 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
<h2>{{ t('forms', 'Make a Form') }}</h2>
|
|
|
|
<div v-show="form.event.type === 'quizForm'" id="quiz-form-selector-text">
|
|
|
|
<!--shows inputs for question types: drop down box to select the type, text box for question, and button to add-->
|
|
|
|
<label for="ans-type">Answer Type: </label>
|
|
|
|
<select v-model="selected">
|
|
|
|
<option value="" disabled>
|
|
|
|
Select
|
|
|
|
</option>
|
2019-09-03 10:32:32 +02:00
|
|
|
<option v-for="option in options" :key="option.value" :value="option.value">
|
2019-05-14 01:15:45 +02:00
|
|
|
{{ option.text }}
|
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
<input v-model="newQuizQuestion" :placeholder=" t('forms', 'Add Question') " @keyup.enter="addQuestion()">
|
|
|
|
<button id="questButton"
|
2020-02-26 13:39:50 +01:00
|
|
|
@click="addQuestion()">
|
2019-05-14 01:15:45 +02:00
|
|
|
{{ t('forms', 'Add Question') }}
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<!--Transition group to list the already added questions (in the form of quizFormItems)-->
|
|
|
|
<transitionGroup
|
|
|
|
v-show="form.mode == 'create'"
|
|
|
|
id="form-list"
|
|
|
|
name="list"
|
|
|
|
tag="ul"
|
2020-02-26 13:39:50 +01:00
|
|
|
class="form-table">
|
2019-05-14 01:15:45 +02:00
|
|
|
<li
|
|
|
|
is="quiz-form-item"
|
|
|
|
v-for="(question, index) in form.options.formQuizQuestions"
|
|
|
|
:key="question.id"
|
|
|
|
:question="question"
|
|
|
|
:type="question.type"
|
2019-11-20 10:08:17 +01:00
|
|
|
@add-answer="addAnswer"
|
|
|
|
@remove-answer="removeAnswer"
|
2020-02-26 13:39:50 +01:00
|
|
|
@remove="form.options.formQuizQuestions.splice(index, 1)" />
|
2019-05-14 01:15:45 +02:00
|
|
|
</transitionGroup>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-03-20 12:22:07 +01:00
|
|
|
</AppContent>
|
2019-05-14 01:15:45 +02:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-02-25 20:28:30 +01:00
|
|
|
import axios from '@nextcloud/axios'
|
2020-02-26 14:00:27 +01:00
|
|
|
import moment from '@nextcloud/moment'
|
2020-03-21 19:07:46 +01:00
|
|
|
import debounce from 'debounce'
|
2020-02-26 14:00:27 +01:00
|
|
|
|
2020-03-20 12:22:07 +01:00
|
|
|
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
|
2020-03-21 19:07:46 +01:00
|
|
|
import { showError, showSuccess } from '@nextcloud/dialogs'
|
2020-03-20 12:22:07 +01:00
|
|
|
|
2020-02-26 14:00:27 +01:00
|
|
|
import Controls from '../components/_base-Controls'
|
|
|
|
import QuizFormItem from '../components/quizFormItem'
|
2019-05-14 01:15:45 +02:00
|
|
|
|
2020-03-20 12:22:07 +01:00
|
|
|
import ViewsMixin from '../mixins/ViewsMixin'
|
|
|
|
|
2019-05-14 01:15:45 +02:00
|
|
|
export default {
|
|
|
|
name: 'Create',
|
|
|
|
components: {
|
2020-03-20 12:22:07 +01:00
|
|
|
AppContent,
|
2020-02-26 14:00:27 +01:00
|
|
|
Controls,
|
2020-02-26 13:39:50 +01:00
|
|
|
QuizFormItem,
|
2019-05-14 01:15:45 +02:00
|
|
|
},
|
|
|
|
|
2020-03-20 12:22:07 +01:00
|
|
|
mixins: [ViewsMixin],
|
|
|
|
|
2019-05-14 01:15:45 +02:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
placeholder: '',
|
|
|
|
newQuizAnswer: '',
|
|
|
|
newQuizQuestion: '',
|
|
|
|
nextQuizAnswerId: 1,
|
|
|
|
nextQuizQuestionId: 1,
|
|
|
|
writingForm: false,
|
|
|
|
loadingForm: true,
|
|
|
|
titleEmpty: false,
|
|
|
|
selected: '',
|
|
|
|
uniqueName: false,
|
|
|
|
uniqueAns: false,
|
|
|
|
haveAns: false,
|
|
|
|
options: [
|
|
|
|
{ text: 'Radio Buttons', value: 'radiogroup' },
|
|
|
|
{ text: 'Checkboxes', value: 'checkbox' },
|
2019-05-14 09:03:59 +02:00
|
|
|
{ text: 'Short Response', value: 'text' },
|
|
|
|
{ text: 'Long Response', value: 'comment' },
|
2020-02-26 13:39:50 +01:00
|
|
|
{ text: 'Drop Down', value: 'dropdown' },
|
|
|
|
],
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
langShort() {
|
|
|
|
return this.lang.split('-')[0]
|
|
|
|
},
|
|
|
|
|
|
|
|
title() {
|
|
|
|
if (this.form.event.title === '') {
|
|
|
|
return t('forms', 'Create new form')
|
|
|
|
} else {
|
|
|
|
return this.form.event.title
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
saveButtonTitle() {
|
|
|
|
if (this.writingForm) {
|
|
|
|
return t('forms', 'Writing form')
|
|
|
|
} else if (this.form.mode === 'edit') {
|
|
|
|
return t('forms', 'Update form')
|
|
|
|
} else {
|
2019-05-14 09:03:59 +02:00
|
|
|
return t('forms', 'Done')
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
localeData() {
|
|
|
|
return moment.localeData(moment.locale(this.locale))
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
title() {
|
|
|
|
// only used when the title changes after page load
|
|
|
|
document.title = t('forms', 'Forms') + ' - ' + this.title
|
2020-02-26 13:39:50 +01:00
|
|
|
},
|
2020-03-21 19:07:46 +01:00
|
|
|
|
|
|
|
form: {
|
|
|
|
deep: true,
|
|
|
|
handler: function() {
|
|
|
|
this.debounceWriteForm()
|
|
|
|
},
|
|
|
|
},
|
2019-05-14 01:15:45 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
created() {
|
|
|
|
if (this.$route.name === 'create') {
|
2020-03-21 19:07:46 +01:00
|
|
|
// TODO: manage this from Forms.vue, request a new form to the server
|
2019-05-14 01:15:45 +02:00
|
|
|
this.form.event.owner = OC.getCurrentUser().uid
|
|
|
|
this.loadingForm = false
|
|
|
|
} else if (this.$route.name === 'edit') {
|
2020-03-21 19:07:46 +01:00
|
|
|
// TODO: fetch & update form?
|
2019-05-14 01:15:45 +02:00
|
|
|
this.form.mode = 'edit'
|
|
|
|
} else if (this.$route.name === 'clone') {
|
2020-03-21 19:07:46 +01:00
|
|
|
// TODO: CLONE
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
switchSidebar() {
|
|
|
|
this.sidebar = !this.sidebar
|
|
|
|
},
|
|
|
|
|
|
|
|
checkNames() {
|
|
|
|
this.uniqueName = true
|
|
|
|
this.form.options.formQuizQuestions.forEach(q => {
|
|
|
|
if (q.text === this.newQuizQuestion) {
|
|
|
|
this.uniqueName = false
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
addQuestion() {
|
|
|
|
this.checkNames()
|
|
|
|
if (this.selected === '') {
|
2020-03-21 19:07:46 +01:00
|
|
|
showError(t('forms', 'Select a question type!'), { duration: 3000 })
|
2019-05-14 01:15:45 +02:00
|
|
|
} else if (!this.uniqueName) {
|
2020-03-21 19:07:46 +01:00
|
|
|
showError(t('forms', 'Cannot have the same question!'))
|
2019-05-14 01:15:45 +02:00
|
|
|
} else {
|
2019-05-14 09:03:59 +02:00
|
|
|
if (this.newQuizQuestion !== null & this.newQuizQuestion !== '' & (/\S/.test(this.newQuizQuestion))) {
|
2019-05-14 01:15:45 +02:00
|
|
|
this.form.options.formQuizQuestions.push({
|
|
|
|
id: this.nextQuizQuestionId++,
|
|
|
|
text: this.newQuizQuestion,
|
|
|
|
type: this.selected,
|
2020-02-26 13:39:50 +01:00
|
|
|
answers: [],
|
2019-05-14 01:15:45 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
this.newQuizQuestion = ''
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
checkAnsNames(item, question) {
|
|
|
|
this.uniqueAnsName = true
|
|
|
|
question.answers.forEach(q => {
|
|
|
|
if (q.text === item.newQuizAnswer) {
|
|
|
|
this.uniqueAnsName = false
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
removeAnswer(item, question, index) {
|
|
|
|
item.formQuizAnswers.splice(index, 1)
|
|
|
|
question.answers.splice(index, 1)
|
|
|
|
},
|
|
|
|
|
|
|
|
addAnswer(item, question) {
|
|
|
|
this.checkAnsNames(item, question)
|
|
|
|
if (!this.uniqueAnsName) {
|
2020-03-21 19:07:46 +01:00
|
|
|
showError(t('forms', 'Two answers cannot be the same!'), { duration: 3000 })
|
2019-05-14 01:15:45 +02:00
|
|
|
} else {
|
2019-05-14 09:03:59 +02:00
|
|
|
if (item.newQuizAnswer !== null & item.newQuizAnswer !== '' & (/\S/.test(item.newQuizAnswer))) {
|
2019-05-14 01:15:45 +02:00
|
|
|
item.formQuizAnswers.push({
|
|
|
|
id: item.nextQuizAnswerId,
|
2020-02-26 13:39:50 +01:00
|
|
|
text: item.newQuizAnswer,
|
2019-05-14 01:15:45 +02:00
|
|
|
})
|
|
|
|
question.answers.push({
|
|
|
|
id: item.nextQuizAnswerId,
|
2020-02-26 13:39:50 +01:00
|
|
|
text: item.newQuizAnswer,
|
2019-05-14 01:15:45 +02:00
|
|
|
})
|
|
|
|
item.nextQuizAnswerId++
|
|
|
|
}
|
|
|
|
item.newQuizAnswer = ''
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
allHaveAns() {
|
|
|
|
this.haveAns = true
|
|
|
|
this.form.options.formQuizQuestions.forEach(q => {
|
2019-05-14 09:03:59 +02:00
|
|
|
if (q.type !== 'text' && q.type !== 'comment' && q.answers.length === 0) {
|
2019-05-14 01:15:45 +02:00
|
|
|
this.haveAns = false
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
2020-03-21 19:07:46 +01:00
|
|
|
debounceWriteForm: debounce(function() {
|
|
|
|
this.writeForm()
|
|
|
|
}, 200),
|
|
|
|
|
|
|
|
writeForm() {
|
2019-05-14 01:15:45 +02:00
|
|
|
this.allHaveAns()
|
2019-05-14 09:03:59 +02:00
|
|
|
if (this.form.event.title.length === 0 | !(/\S/.test(this.form.event.title))) {
|
2019-05-14 01:15:45 +02:00
|
|
|
this.titleEmpty = true
|
2020-03-21 19:07:46 +01:00
|
|
|
showError(t('forms', 'Title must not be empty!'), { duration: 3000 })
|
2019-05-14 01:15:45 +02:00
|
|
|
} else if (this.form.options.formQuizQuestions.length === 0) {
|
2020-03-21 19:07:46 +01:00
|
|
|
showError(t('forms', 'Must have at least one question!'), { duration: 3000 })
|
2019-05-14 01:15:45 +02:00
|
|
|
} else if (!this.haveAns) {
|
2020-03-21 19:07:46 +01:00
|
|
|
showError(t('forms', 'All questions need answers!'), { duration: 3000 })
|
2019-05-14 09:03:59 +02:00
|
|
|
} else if (this.form.event.expiration & this.form.event.expirationDate === '') {
|
2020-03-21 19:07:46 +01:00
|
|
|
showError(t('forms', 'Need to pick an expiration date!'), { duration: 3000 })
|
2019-05-14 01:15:45 +02:00
|
|
|
} else {
|
|
|
|
this.writingForm = true
|
|
|
|
this.titleEmpty = false
|
|
|
|
|
2019-09-03 11:58:51 +02:00
|
|
|
axios.post(OC.generateUrl('apps/forms/write/form'), this.form)
|
2019-05-14 01:15:45 +02:00
|
|
|
.then((response) => {
|
|
|
|
this.form.mode = 'edit'
|
|
|
|
this.form.event.hash = response.data.hash
|
|
|
|
this.form.event.id = response.data.id
|
|
|
|
this.writingForm = false
|
2020-03-21 19:07:46 +01:00
|
|
|
showSuccess(t('forms', '%n successfully saved', 1, this.form.event.title), { duration: 3000 })
|
2019-05-14 01:15:45 +02:00
|
|
|
}, (error) => {
|
|
|
|
this.form.event.hash = ''
|
|
|
|
this.writingForm = false
|
2020-03-21 19:07:46 +01:00
|
|
|
showError(t('forms', 'Error on saving form, see console'))
|
2019-05-14 01:15:45 +02:00
|
|
|
/* eslint-disable-next-line no-console */
|
|
|
|
console.log(error.response)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
2020-02-26 13:39:50 +01:00
|
|
|
},
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
#app-content {
|
2020-03-21 19:07:46 +01:00
|
|
|
input.hasTimepicker {
|
|
|
|
width: 75px;
|
|
|
|
}
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.warning {
|
2020-03-21 19:07:46 +01:00
|
|
|
color: var(--color-error);
|
|
|
|
font-weight: bold;
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.forms-content {
|
2020-03-21 19:07:46 +01:00
|
|
|
display: flex;
|
|
|
|
padding-top: 45px;
|
|
|
|
flex-grow: 1;
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
input[type="text"] {
|
2020-03-21 19:07:46 +01:00
|
|
|
display: block;
|
|
|
|
width: 100%;
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.workbench {
|
2020-03-21 19:07:46 +01:00
|
|
|
margin-top: 45px;
|
|
|
|
display: flex;
|
|
|
|
flex-grow: 1;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
|
|
|
> div {
|
|
|
|
min-width: 245px;
|
|
|
|
max-width: 540px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-grow: 1;
|
|
|
|
padding: 8px;
|
|
|
|
}
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/* Transitions for inserting and removing list items */
|
|
|
|
.list-enter-active,
|
|
|
|
.list-leave-active {
|
2020-03-21 19:07:46 +01:00
|
|
|
transition: all 0.5s ease;
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.list-enter,
|
|
|
|
.list-leave-to {
|
2020-03-21 19:07:46 +01:00
|
|
|
opacity: 0;
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.list-move {
|
2020-03-21 19:07:46 +01:00
|
|
|
transition: transform 0.5s;
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
/* */
|
|
|
|
|
|
|
|
#form-item-selector-text {
|
2020-03-21 19:07:46 +01:00
|
|
|
> input {
|
|
|
|
width: 100%;
|
|
|
|
}
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.form-table {
|
2020-03-21 19:07:46 +01:00
|
|
|
> li {
|
|
|
|
display: flex;
|
|
|
|
align-items: baseline;
|
|
|
|
padding-left: 8px;
|
|
|
|
padding-right: 8px;
|
|
|
|
line-height: 24px;
|
|
|
|
min-height: 24px;
|
|
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
&:active,
|
|
|
|
&:hover {
|
|
|
|
transition: var(--background-dark) 0.3s ease;
|
|
|
|
background-color: var(--color-background-dark); //$hover-color;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
> div {
|
|
|
|
display: flex;
|
|
|
|
flex-grow: 1;
|
|
|
|
font-size: 1.2em;
|
|
|
|
opacity: 0.7;
|
|
|
|
white-space: normal;
|
|
|
|
padding-right: 4px;
|
|
|
|
&.avatar {
|
|
|
|
flex-grow: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
> div:nth-last-child(1) {
|
|
|
|
justify-content: center;
|
|
|
|
flex-grow: 0;
|
|
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
}
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
2020-03-21 19:07:46 +01:00
|
|
|
&.button-inline {
|
|
|
|
border: 0;
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.tab {
|
2020-03-21 19:07:46 +01:00
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
.selectUnit {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
> label {
|
|
|
|
padding-right: 4px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#shiftDates {
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-position: 10px center;
|
|
|
|
min-width: 16px;
|
|
|
|
min-height: 16px;
|
|
|
|
padding: 10px;
|
|
|
|
padding-left: 34px;
|
|
|
|
text-align: left;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
</style>
|