Initial load and display of public form
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
f29d89557b
commit
7462be7bfe
|
@ -1,4 +1,7 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
globals: {
|
||||||
|
appName: true,
|
||||||
|
},
|
||||||
extends: [
|
extends: [
|
||||||
'@nextcloud',
|
'@nextcloud',
|
||||||
]
|
]
|
||||||
|
|
9516
js/submit.js
9516
js/submit.js
File diff suppressed because it is too large
Load diff
|
@ -47,6 +47,7 @@ use OCP\IGroupManager;
|
||||||
use OCP\IRequest;
|
use OCP\IRequest;
|
||||||
use OCP\IURLGenerator;
|
use OCP\IURLGenerator;
|
||||||
use OCP\IUserSession;
|
use OCP\IUserSession;
|
||||||
|
use OCP\IInitialStateService;
|
||||||
use OCP\Util;
|
use OCP\Util;
|
||||||
|
|
||||||
class PageController extends Controller {
|
class PageController extends Controller {
|
||||||
|
@ -70,6 +71,9 @@ class PageController extends Controller {
|
||||||
|
|
||||||
/** @var IUserSession */
|
/** @var IUserSession */
|
||||||
private $userSession;
|
private $userSession;
|
||||||
|
|
||||||
|
/** @var IInitialStateService */
|
||||||
|
private $initialStateService;
|
||||||
|
|
||||||
public function __construct(string $appName,
|
public function __construct(string $appName,
|
||||||
IRequest $request,
|
IRequest $request,
|
||||||
|
@ -80,7 +84,8 @@ class PageController extends Controller {
|
||||||
OptionMapper $optionMapper,
|
OptionMapper $optionMapper,
|
||||||
SubmissionMapper $SubmissionMapper,
|
SubmissionMapper $SubmissionMapper,
|
||||||
AnswerMapper $AnswerMapper,
|
AnswerMapper $AnswerMapper,
|
||||||
IUserSession $userSession) {
|
IUserSession $userSession,
|
||||||
|
IInitialStateService $initialStateService) {
|
||||||
parent::__construct($appName, $request);
|
parent::__construct($appName, $request);
|
||||||
|
|
||||||
$this->groupManager = $groupManager;
|
$this->groupManager = $groupManager;
|
||||||
|
@ -92,6 +97,7 @@ class PageController extends Controller {
|
||||||
$this->submissionMapper = $SubmissionMapper;
|
$this->submissionMapper = $SubmissionMapper;
|
||||||
$this->answerMapper = $AnswerMapper;
|
$this->answerMapper = $AnswerMapper;
|
||||||
$this->userSession = $userSession;
|
$this->userSession = $userSession;
|
||||||
|
$this->initialStateService = $initialStateService;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -156,6 +162,45 @@ class PageController extends Controller {
|
||||||
return new TemplateResponse($this->appName, 'main');
|
return new TemplateResponse($this->appName, 'main');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private function getOptions(int $questionId): array {
|
||||||
|
$optionList = [];
|
||||||
|
try{
|
||||||
|
$optionEntities = $this->optionMapper->findByQuestion($questionId);
|
||||||
|
foreach ($optionEntities as $optionEntity) {
|
||||||
|
$optionList[] = $optionEntity->read();
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (DoesNotExistException $e) {
|
||||||
|
//handle silently
|
||||||
|
} finally {
|
||||||
|
return $optionList;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getQuestions(int $formId): array {
|
||||||
|
$questionList = [];
|
||||||
|
try{
|
||||||
|
$questionEntities = $this->questionMapper->findByForm($formId);
|
||||||
|
foreach ($questionEntities as $questionEntity) {
|
||||||
|
$question = $questionEntity->read();
|
||||||
|
$question['options'] = $this->getOptions($question['id']);
|
||||||
|
$questionList[] = $question;
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (DoesNotExistException $e) {
|
||||||
|
//handle silently
|
||||||
|
}finally{
|
||||||
|
return $questionList;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getForm(int $id): array {
|
||||||
|
$form = $this->formMapper->findById($id);
|
||||||
|
$result = $form->read();
|
||||||
|
$result['questions'] = $this->getQuestions($id);
|
||||||
|
return $result;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @NoAdminRequired
|
* @NoAdminRequired
|
||||||
* @NoCSRFRequired
|
* @NoCSRFRequired
|
||||||
|
@ -176,7 +221,7 @@ class PageController extends Controller {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Does the user have permissions to display
|
// Does the user have permissions to display
|
||||||
if ($this->hasUserAccess($form)) {
|
if (!$this->hasUserAccess($form)) {
|
||||||
return new TemplateResponse('forms', 'notfound');
|
return new TemplateResponse('forms', 'notfound');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -188,6 +233,7 @@ class PageController extends Controller {
|
||||||
$renderAs = $this->userSession->isLoggedIn() ? 'user' : 'public';
|
$renderAs = $this->userSession->isLoggedIn() ? 'user' : 'public';
|
||||||
|
|
||||||
Util::addScript($this->appName, 'submit');
|
Util::addScript($this->appName, 'submit');
|
||||||
|
$this->initialStateService->provideInitialState($this->appName, 'form', $this->getForm($form->getId()));
|
||||||
return new TemplateResponse($this->appName, 'main', [], $renderAs);
|
return new TemplateResponse($this->appName, 'main', [], $renderAs);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
8
package-lock.json
generated
8
package-lock.json
generated
|
@ -1600,6 +1600,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@nextcloud/initial-state": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@nextcloud/initial-state/-/initial-state-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-AmewfDmsCgL9j062VWkgWPg+dfyu63xxqv29ErAJ1WZiEQK/gb2IyiILDMTXdVeNHGDY874mzBcAAkpFO/DxnQ==",
|
||||||
|
"requires": {
|
||||||
|
"core-js": "^3.6.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@nextcloud/l10n": {
|
"@nextcloud/l10n": {
|
||||||
"version": "1.2.3",
|
"version": "1.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/@nextcloud/l10n/-/l10n-1.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/@nextcloud/l10n/-/l10n-1.2.3.tgz",
|
||||||
|
|
|
@ -73,6 +73,7 @@
|
||||||
"@nextcloud/axios": "^1.3.2",
|
"@nextcloud/axios": "^1.3.2",
|
||||||
"@nextcloud/dialogs": "^1.2.2",
|
"@nextcloud/dialogs": "^1.2.2",
|
||||||
"@nextcloud/event-bus": "^1.1.3",
|
"@nextcloud/event-bus": "^1.1.3",
|
||||||
|
"@nextcloud/initial-state": "^1.1.2",
|
||||||
"@nextcloud/l10n": "^1.2.3",
|
"@nextcloud/l10n": "^1.2.3",
|
||||||
"@nextcloud/moment": "^1.1.1",
|
"@nextcloud/moment": "^1.1.1",
|
||||||
"@nextcloud/router": "^1.0.2",
|
"@nextcloud/router": "^1.0.2",
|
||||||
|
|
|
@ -28,7 +28,8 @@
|
||||||
@click="enableEdit">
|
@click="enableEdit">
|
||||||
<!-- Drag handle -->
|
<!-- Drag handle -->
|
||||||
<!-- TODO: implement arrow key mapping to reorder question -->
|
<!-- TODO: implement arrow key mapping to reorder question -->
|
||||||
<div class="question__drag-handle icon-drag-handle"
|
<div v-if="!readOnly"
|
||||||
|
class="question__drag-handle icon-drag-handle"
|
||||||
:aria-label="t('forms', 'Drag to reorder the questions')" />
|
:aria-label="t('forms', 'Drag to reorder the questions')" />
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
|
@ -45,7 +46,7 @@
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@keyup="onTitleChange">
|
@keyup="onTitleChange">
|
||||||
<h3 v-else class="question__header-title" v-text="text" />
|
<h3 v-else class="question__header-title" v-text="text" />
|
||||||
<Actions class="question__header-menu" :force-menu="true">
|
<Actions v-if="!readOnly" class="question__header-menu" :force-menu="true">
|
||||||
<ActionButton icon="icon-delete" @click="onDelete">
|
<ActionButton icon="icon-delete" @click="onDelete">
|
||||||
{{ t('forms', 'Delete question') }}
|
{{ t('forms', 'Delete question') }}
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
|
@ -96,6 +97,10 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
readOnly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -107,14 +112,18 @@ export default {
|
||||||
* Enable the edit mode
|
* Enable the edit mode
|
||||||
*/
|
*/
|
||||||
enableEdit() {
|
enableEdit() {
|
||||||
this.$emit('update:edit', true)
|
if (!this.readOnly) {
|
||||||
|
this.$emit('update:edit', true)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Disable the edit mode
|
* Disable the edit mode
|
||||||
*/
|
*/
|
||||||
disableEdit() {
|
disableEdit() {
|
||||||
this.$emit('update:edit', false)
|
if (!this.readOnly) {
|
||||||
|
this.$emit('update:edit', false)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
<textarea ref="textarea"
|
<textarea ref="textarea"
|
||||||
:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"
|
:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"
|
||||||
:placeholder="t('forms', 'Long answer text')"
|
:placeholder="t('forms', 'Long answer text')"
|
||||||
:readonly="edit"
|
:required="true /* TODO: implement required option */"
|
||||||
:value="values[0]"
|
:value="values[0]"
|
||||||
class="question__text"
|
class="question__text"
|
||||||
maxlength="1024"
|
maxlength="1024"
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
:edit.sync="edit"
|
:edit.sync="edit"
|
||||||
@delete="onDelete"
|
@delete="onDelete"
|
||||||
@update:text="onTitleChange">
|
@update:text="onTitleChange">
|
||||||
<ul class="question__content" :role="isUnique ? 'radiogroup' : ''">
|
<ul class="question__content">
|
||||||
<template v-for="(answer, index) in options">
|
<template v-for="(answer, index) in options">
|
||||||
<li v-if="!edit" :key="answer.id" class="question__item">
|
<li v-if="!edit" :key="answer.id" class="question__item">
|
||||||
<!-- Answer radio/checkbox + label -->
|
<!-- Answer radio/checkbox + label -->
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
'checkbox question__checkbox': !isUnique,
|
'checkbox question__checkbox': !isUnique,
|
||||||
}"
|
}"
|
||||||
:name="`${id}-answer`"
|
:name="`${id}-answer`"
|
||||||
:readonly="true"
|
:required="true /* TODO: implement required option */"
|
||||||
:type="isUnique ? 'radio' : 'checkbox'">
|
:type="isUnique ? 'radio' : 'checkbox'">
|
||||||
<label v-if="!edit"
|
<label v-if="!edit"
|
||||||
ref="label"
|
ref="label"
|
||||||
|
@ -230,13 +230,14 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
.question__content {
|
.question__content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.question__item {
|
.question__item {
|
||||||
|
position: relative;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
|
@ -247,11 +248,6 @@ export default {
|
||||||
margin: 14px !important;
|
margin: 14px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// make sure to respect readonly on radio/checkbox
|
|
||||||
input[readonly] {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Using type to have a higher order than the input styling of server
|
// Using type to have a higher order than the input styling of server
|
||||||
|
@ -265,4 +261,12 @@ export default {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input.question__radio,
|
||||||
|
input.question__checkbox {
|
||||||
|
z-index: -1;
|
||||||
|
// make sure browser warnings are properly
|
||||||
|
// displayed at the correct location
|
||||||
|
left: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
<input ref="input"
|
<input ref="input"
|
||||||
:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
|
:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
|
||||||
:placeholder="t('forms', 'Short answer text')"
|
:placeholder="t('forms', 'Short answer text')"
|
||||||
:readonly="edit"
|
:required="true /* TODO: implement required option */"
|
||||||
:value="values[0]"
|
:value="values[0]"
|
||||||
class="question__input"
|
class="question__input"
|
||||||
maxlength="256"
|
maxlength="256"
|
||||||
|
|
|
@ -38,12 +38,16 @@ export default {
|
||||||
icon: 'icon-answer-multiple',
|
icon: 'icon-answer-multiple',
|
||||||
label: t('forms', 'Multiple choice'),
|
label: t('forms', 'Multiple choice'),
|
||||||
unique: true,
|
unique: true,
|
||||||
|
// Define conditions where this questions is not ok
|
||||||
|
validate: question => question.options.length > 0,
|
||||||
},
|
},
|
||||||
|
|
||||||
multiple: {
|
multiple: {
|
||||||
component: QuestionMultiple,
|
component: QuestionMultiple,
|
||||||
icon: 'icon-answer-checkbox',
|
icon: 'icon-answer-checkbox',
|
||||||
label: t('forms', 'Checkboxes'),
|
label: t('forms', 'Checkboxes'),
|
||||||
|
// Define conditions where this questions is not ok
|
||||||
|
validate: question => question.options.length > 0,
|
||||||
},
|
},
|
||||||
|
|
||||||
short: {
|
short: {
|
||||||
|
|
|
@ -392,7 +392,7 @@ export default {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-left: 14px; // align with description (compensate font size diff)
|
padding-left: 14px; // align with description (compensate font size diff)
|
||||||
overflow-x: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,11 +21,143 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<span>TODO</span>
|
<Content app-name="forms">
|
||||||
|
<AppContent>
|
||||||
|
<!-- Forms title & description-->
|
||||||
|
<header>
|
||||||
|
<h3 id="form-title">
|
||||||
|
{{ form.title }}
|
||||||
|
</h3>
|
||||||
|
<p id="form-desc">
|
||||||
|
{{ form.description }}
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Questions list -->
|
||||||
|
<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"
|
||||||
|
:model="answerTypes[question.type]"
|
||||||
|
:index="index + 1"
|
||||||
|
v-bind="question" />
|
||||||
|
</ul>
|
||||||
|
<input class="primary" type="submit" :value="t('forms', 'Submit')" :aria-label="t('forms', 'Submit form')">
|
||||||
|
</form>
|
||||||
|
</AppContent>
|
||||||
|
</Content>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { loadState } from '@nextcloud/initial-state'
|
||||||
|
|
||||||
|
import answerTypes from '../models/AnswerTypes'
|
||||||
|
|
||||||
|
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
|
||||||
|
import Content from '@nextcloud/vue/dist/Components/Content'
|
||||||
|
|
||||||
|
import Question from '../components/Questions/Question'
|
||||||
|
import QuestionLong from '../components/Questions/QuestionLong'
|
||||||
|
import QuestionShort from '../components/Questions/QuestionShort'
|
||||||
|
import QuestionMultiple from '../components/Questions/QuestionMultiple'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Submit',
|
name: 'Submit',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
AppContent,
|
||||||
|
Content,
|
||||||
|
Question,
|
||||||
|
QuestionLong,
|
||||||
|
QuestionShort,
|
||||||
|
QuestionMultiple,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: loadState('forms', 'form'),
|
||||||
|
answerTypes,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
validQuestions() {
|
||||||
|
return this.form.questions.filter(question => {
|
||||||
|
// All questions must have a valid title
|
||||||
|
if (question.text && 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
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onSubmit(e) {
|
||||||
|
console.info(e)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// Replace with new vue components release
|
||||||
|
#app-content,
|
||||||
|
#app-content-vue {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
header,
|
||||||
|
form {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 750px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Title & description header
|
||||||
|
header {
|
||||||
|
margin: 44px;
|
||||||
|
|
||||||
|
#form-title,
|
||||||
|
#form-desc {
|
||||||
|
width: 100%;
|
||||||
|
margin: 16px 0; // aerate the header
|
||||||
|
padding: 0 16px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
#form-title {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 14px; // align with description (compensate font size diff)
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
#form-desc {
|
||||||
|
min-height: 60px;
|
||||||
|
max-height: 200px;
|
||||||
|
margin-top: 0;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
input[type=submit] {
|
||||||
|
align-self: flex-end;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -4,8 +4,8 @@ const webpack = require('webpack')
|
||||||
const StyleLintPlugin = require('stylelint-webpack-plugin')
|
const StyleLintPlugin = require('stylelint-webpack-plugin')
|
||||||
const VueLoaderPlugin = require('vue-loader/lib/plugin')
|
const VueLoaderPlugin = require('vue-loader/lib/plugin')
|
||||||
|
|
||||||
const appName = process.env.npm_package_name
|
const appName = process.env.npm_package_name.toString()
|
||||||
const appVersion = process.env.npm_package_version
|
const appVersion = process.env.npm_package_version.toString()
|
||||||
console.info('Building', appName, appVersion, '\n')
|
console.info('Building', appName, appVersion, '\n')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
Loading…
Reference in a new issue