e2959be243
Bumps [sass-loader](https://github.com/webpack-contrib/sass-loader) from 9.0.1 to 9.0.2. - [Release notes](https://github.com/webpack-contrib/sass-loader/releases) - [Changelog](https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack-contrib/sass-loader/compare/v9.0.1...v9.0.2) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Bump @nextcloud/vue from 2.2.0 to 2.2.1 Bumps [@nextcloud/vue](https://github.com/nextcloud/nextcloud-vue) from 2.2.0 to 2.2.1. - [Release notes](https://github.com/nextcloud/nextcloud-vue/releases) - [Commits](https://github.com/nextcloud/nextcloud-vue/compare/v2.2.0...v2.2.1) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Bump vuedraggable from 2.23.2 to 2.24.0 Bumps [vuedraggable](https://github.com/SortableJS/Vue.Draggable) from 2.23.2 to 2.24.0. - [Release notes](https://github.com/SortableJS/Vue.Draggable/releases) - [Commits](https://github.com/SortableJS/Vue.Draggable/compare/v2.23.2...v2.24.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Bump @nextcloud/axios from 1.3.2 to 1.3.3 Bumps [@nextcloud/axios](https://github.com/nextcloud/nextcloud-axios) from 1.3.2 to 1.3.3. - [Release notes](https://github.com/nextcloud/nextcloud-axios/releases) - [Changelog](https://github.com/nextcloud/nextcloud-axios/blob/master/CHANGELOG.md) - [Commits](https://github.com/nextcloud/nextcloud-axios/compare/v1.3.2...v1.3.3) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> [tx-robot] updated from transifex Move to webpack vue global config & clean routes Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> Lint fix Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> @nextcloud/webpack-vue-config@1.0.3 Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> [tx-robot] updated from transifex [tx-robot] updated from transifex Bump @nextcloud/webpack-vue-config from 1.0.3 to 1.1.0 Bumps [@nextcloud/webpack-vue-config](https://github.com/nextcloud/webpack-vue-config) from 1.0.3 to 1.1.0. - [Release notes](https://github.com/nextcloud/webpack-vue-config/releases) - [Commits](https://github.com/nextcloud/webpack-vue-config/compare/v1.0.3...v1.1.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Bump @babel/core from 7.10.4 to 7.10.5 Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.10.4 to 7.10.5. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.10.5/packages/babel-core) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> [tx-robot] updated from transifex Add screenshot of response visualization, adjust readme Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net> [tx-robot] updated from transifex [tx-robot] updated from transifex Revert "Allow navigation through edit via Tab-Key" v2.0.0-rc.1 Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> [tx-robot] updated from transifex Bump webpack from 4.43.0 to 4.44.0 Bumps [webpack](https://github.com/webpack/webpack) from 4.43.0 to 4.44.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v4.43.0...v4.44.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> [tx-robot] updated from transifex Update stylelint config Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> Fix actions Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com> [tx-robot] updated from transifex Fix dropdown submission insert Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> 2.0.0 Force enable for master Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> [tx-robot] updated from transifex Fix substring utf8 Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com> 2.0.1 [Security] Bump elliptic from 6.5.0 to 6.5.3 Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.0 to 6.5.3. **This update includes a security fix.** - [Release notes](https://github.com/indutny/elliptic/releases) - [Commits](https://github.com/indutny/elliptic/compare/v6.5.0...v6.5.3) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> [tx-robot] updated from transifex Increase description length Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com> 2.0.2 Bump webpack from 4.44.0 to 4.44.1 Bumps [webpack](https://github.com/webpack/webpack) from 4.44.0 to 4.44.1. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v4.44.0...v4.44.1) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Bump @babel/core from 7.10.5 to 7.11.0 Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.10.5 to 7.11.0. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.11.0/packages/babel-core) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Bump @babel/preset-env from 7.10.4 to 7.11.0 Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.10.4 to 7.11.0. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.11.0/packages/babel-preset-env) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> [tx-robot] updated from transifex [tx-robot] updated from transifex
281 lines
7 KiB
Vue
281 lines
7 KiB
Vue
<!--
|
|
- @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
|
|
-
|
|
- @author John Molakvoæ <skjnldsv@protonmail.com>
|
|
-
|
|
- @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/>.
|
|
-
|
|
-->
|
|
|
|
<template>
|
|
<Content app-name="forms">
|
|
<AppContent>
|
|
<!-- Forms title & description-->
|
|
<header>
|
|
<h2 class="form-title">
|
|
{{ formTitle }}
|
|
</h2>
|
|
<!-- Do not wrap the following line between tags! `white-space:pre-line` respects `\n` but would produce additional empty first line -->
|
|
<!-- eslint-disable-next-line -->
|
|
<p v-if="!loading && !success" class="form-desc">{{ form.description }}</p>
|
|
<!-- Only visible if at least one question is marked as mandatory-->
|
|
<p v-if="mandatoryUsed && !loading && !success" class="info-mandatory">
|
|
* {{ t('forms', 'Required questions') }}
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Questions list -->
|
|
<form v-if="!loading && !success"
|
|
ref="form"
|
|
@submit.prevent="onSubmit">
|
|
<ul>
|
|
<Questions
|
|
:is="answerTypes[question.type].component"
|
|
v-for="(question, index) in validQuestions"
|
|
ref="questions"
|
|
:key="question.id"
|
|
:read-only="true"
|
|
:answer-type="answerTypes[question.type]"
|
|
:index="index + 1"
|
|
:max-string-lengths="maxStringLengths"
|
|
v-bind="question"
|
|
:values.sync="answers[question.id]"
|
|
@keydown.enter="onKeydownEnter"
|
|
@keydown.ctrl.enter="onKeydownCtrlEnter" />
|
|
</ul>
|
|
<input ref="submitButton"
|
|
class="primary"
|
|
type="submit"
|
|
:value="t('forms', 'Submit')"
|
|
:disabled="loading"
|
|
:aria-label="t('forms', 'Submit form')">
|
|
</form>
|
|
|
|
<EmptyContent v-else-if="loading" icon="icon-loading">
|
|
{{ t('forms', 'Submitting form …') }}
|
|
</EmptyContent>
|
|
|
|
<EmptyContent v-else-if="success" icon="icon-checkmark">
|
|
{{ t('forms', 'Thank you for completing the form!') }}
|
|
</EmptyContent>
|
|
</AppContent>
|
|
</Content>
|
|
</template>
|
|
|
|
<script>
|
|
import { loadState } from '@nextcloud/initial-state'
|
|
import { generateUrl } from '@nextcloud/router'
|
|
import { showError } from '@nextcloud/dialogs'
|
|
import axios from '@nextcloud/axios'
|
|
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
|
|
import Content from '@nextcloud/vue/dist/Components/Content'
|
|
|
|
import answerTypes from '../models/AnswerTypes'
|
|
|
|
import EmptyContent from '../components/EmptyContent'
|
|
import Question from '../components/Questions/Question'
|
|
import QuestionLong from '../components/Questions/QuestionLong'
|
|
import QuestionShort from '../components/Questions/QuestionShort'
|
|
import QuestionMultiple from '../components/Questions/QuestionMultiple'
|
|
import SetWindowTitle from '../utils/SetWindowTitle'
|
|
|
|
export default {
|
|
name: 'Submit',
|
|
|
|
components: {
|
|
AppContent,
|
|
Content,
|
|
EmptyContent,
|
|
Question,
|
|
QuestionLong,
|
|
QuestionShort,
|
|
QuestionMultiple,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
form: loadState('forms', 'form'),
|
|
maxStringLengths: loadState('forms', 'maxStringLengths'),
|
|
answerTypes,
|
|
answers: {},
|
|
loading: false,
|
|
success: false,
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
/**
|
|
* Return form title, or placeholder if not set
|
|
* @returns {string}
|
|
*/
|
|
formTitle() {
|
|
if (this.form.title) {
|
|
return this.form.title
|
|
}
|
|
return t('forms', 'New form')
|
|
},
|
|
|
|
validQuestions() {
|
|
return this.form.questions.filter(question => {
|
|
// All questions must have a valid title
|
|
if (question.text?.trim() === '') {
|
|
return false
|
|
}
|
|
|
|
// If specific conditions provided, test against them
|
|
if ('validate' in answerTypes[question.type]) {
|
|
return answerTypes[question.type].validate(question)
|
|
}
|
|
return true
|
|
})
|
|
},
|
|
|
|
/**
|
|
* Check if at least one question is mandatory
|
|
* @returns {Boolean}
|
|
*/
|
|
mandatoryUsed() {
|
|
return this.form.questions.reduce(
|
|
(isUsed, question) => isUsed || question.mandatory
|
|
, false)
|
|
},
|
|
},
|
|
|
|
beforeMount() {
|
|
SetWindowTitle(this.formTitle)
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* On Enter, focus next form-element
|
|
* Last form element is the submit button, the form submits on enter then
|
|
* @param {Object} event The fired event.
|
|
*/
|
|
onKeydownEnter(event) {
|
|
const formInputs = Array.from(this.$refs.form)
|
|
const sourceInputIndex = formInputs.findIndex(input => input === event.originalTarget)
|
|
|
|
// Focus next form element
|
|
formInputs[sourceInputIndex + 1].focus()
|
|
},
|
|
|
|
/**
|
|
* Ctrl+Enter typically fires submit on forms.
|
|
* Some inputs do automatically, while some need explicit handling
|
|
*/
|
|
onKeydownCtrlEnter() {
|
|
// Using button-click event to not bypass validity-checks and use our specified behaviour
|
|
this.$refs.submitButton.click()
|
|
},
|
|
|
|
/**
|
|
* Submit the form after the browser validated it 🚀
|
|
*/
|
|
async onSubmit() {
|
|
this.loading = true
|
|
|
|
try {
|
|
await axios.post(generateUrl('/apps/forms/api/v1/submission/insert'), {
|
|
formId: this.form.id,
|
|
answers: this.answers,
|
|
})
|
|
this.success = true
|
|
} catch (error) {
|
|
console.error(error)
|
|
showError(t('forms', 'There was an error submitting the form'))
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.app-content {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
// Force hide navigation toggle as there is no navigation
|
|
// stylelint-disable-next-line selector-pseudo-element-no-unknown
|
|
::v-deep .app-navigation-toggle {
|
|
display: none !important;
|
|
}
|
|
|
|
header,
|
|
form {
|
|
width: 100%;
|
|
max-width: 750px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// Title & description header
|
|
header {
|
|
margin-top: 44px;
|
|
margin-bottom: 24px;
|
|
|
|
.form-title,
|
|
.form-desc,
|
|
.info-mandatory {
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
border: none;
|
|
}
|
|
.form-title {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: var(--color-main-text);
|
|
min-height: 36px;
|
|
margin: 32px 0;
|
|
padding-left: 14px; // align with description (compensate font size diff)
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.form-desc {
|
|
font-size: 100%;
|
|
line-height: 150%;
|
|
padding-bottom: 20px;
|
|
resize: none;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.info-mandatory {
|
|
font-size: 100%;
|
|
padding-bottom: 20px;
|
|
resize: none;
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
}
|
|
|
|
form {
|
|
.question {
|
|
// Less padding needed as submit view does not have drag handles
|
|
padding-left: 16px;
|
|
}
|
|
|
|
input[type=submit] {
|
|
align-self: flex-end;
|
|
margin: 5px;
|
|
margin-bottom: 160px;
|
|
padding: 10px 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|