Initial load and display of public form

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
+	globals: {
+		appName: true,
+	},
 	extends: [
 		'@nextcloud',
 	]

lib/Controller/PageController.php

@@ -47,6 +47,7 @@ use OCP\IGroupManager;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUserSession;
+use OCP\IInitialStateService;
 use OCP\Util;
 
 class PageController extends Controller {
@@ -70,6 +71,9 @@ class PageController extends Controller {
 	
 	/** @var IUserSession */
 	private $userSession;
+	
+	/** @var IInitialStateService */
+	private $initialStateService;
 
 	public function __construct(string $appName,
 								IRequest $request,
@@ -80,7 +84,8 @@ class PageController extends Controller {
 								OptionMapper $optionMapper,
 								SubmissionMapper $SubmissionMapper,
 								AnswerMapper $AnswerMapper,
-								IUserSession $userSession) {
+								IUserSession $userSession,
+								IInitialStateService $initialStateService) {
 		parent::__construct($appName, $request);
 
 		$this->groupManager = $groupManager;
@@ -92,6 +97,7 @@ class PageController extends Controller {
 		$this->submissionMapper = $SubmissionMapper;
 		$this->answerMapper = $AnswerMapper;
 		$this->userSession = $userSession;
+		$this->initialStateService = $initialStateService;
 	}
 
 	/**
@@ -156,6 +162,45 @@ class PageController extends Controller {
 		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
 	 * @NoCSRFRequired
@@ -176,7 +221,7 @@ class PageController extends Controller {
 		}
 
 		// Does the user have permissions to display
-		if ($this->hasUserAccess($form)) {
+		if (!$this->hasUserAccess($form)) {
 			return new TemplateResponse('forms', 'notfound');
 		}
 
@@ -188,6 +233,7 @@ class PageController extends Controller {
 		$renderAs = $this->userSession->isLoggedIn() ? 'user' : 'public';
 
 		Util::addScript($this->appName, 'submit');
+		$this->initialStateService->provideInitialState($this->appName, 'form', $this->getForm($form->getId()));
 		return new TemplateResponse($this->appName, 'main', [], $renderAs);
 	}
 

package-lock.json

@@ -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": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/@nextcloud/l10n/-/l10n-1.2.3.tgz",

package.json

@@ -73,6 +73,7 @@
 		"@nextcloud/axios": "^1.3.2",
 		"@nextcloud/dialogs": "^1.2.2",
 		"@nextcloud/event-bus": "^1.1.3",
+		"@nextcloud/initial-state": "^1.1.2",
 		"@nextcloud/l10n": "^1.2.3",
 		"@nextcloud/moment": "^1.1.1",
 		"@nextcloud/router": "^1.0.2",

src/components/Questions/Question.vue

@@ -28,7 +28,8 @@
 		@click="enableEdit">
 		<!-- Drag handle -->
 		<!-- 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')" />
 
 		<!-- Header -->
@@ -45,7 +46,7 @@
 				@input="onInput"
 				@keyup="onTitleChange">
 			<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">
 					{{ t('forms', 'Delete question') }}
 				</ActionButton>
@@ -96,6 +97,10 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		readOnly: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	methods: {
@@ -107,14 +112,18 @@ export default {
 		 * Enable the edit mode
 		 */
 		enableEdit() {
-			this.$emit('update:edit', true)
+			if (!this.readOnly) {
+				this.$emit('update:edit', true)
+			}
 		},
 
 		/**
 		 * Disable the edit mode
 		 */
 		disableEdit() {
-			this.$emit('update:edit', false)
+			if (!this.readOnly) {
+				this.$emit('update:edit', false)
+			}
 		},
 
 		/**

src/components/Questions/QuestionLong.vue

@@ -32,7 +32,7 @@
 			<textarea ref="textarea"
 				:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"
 				:placeholder="t('forms', 'Long answer text')"
-				:readonly="edit"
+				:required="true /* TODO: implement required option */"
 				:value="values[0]"
 				class="question__text"
 				maxlength="1024"

src/components/Questions/QuestionMultiple.vue

@@ -28,7 +28,7 @@
 		:edit.sync="edit"
 		@delete="onDelete"
 		@update:text="onTitleChange">
-		<ul class="question__content" :role="isUnique ? 'radiogroup' : ''">
+		<ul class="question__content">
 			<template v-for="(answer, index) in options">
 				<li v-if="!edit" :key="answer.id" class="question__item">
 					<!-- Answer radio/checkbox + label -->
@@ -42,7 +42,7 @@
 							'checkbox question__checkbox': !isUnique,
 						}"
 						:name="`${id}-answer`"
-						:readonly="true"
+						:required="true /* TODO: implement required option */"
 						:type="isUnique ? 'radio' : 'checkbox'">
 					<label v-if="!edit"
 						ref="label"
@@ -230,13 +230,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .question__content {
 	display: flex;
 	flex-direction: column;
 }
 
 .question__item {
+	position: relative;
 	display: inline-flex;
 	align-items: center;
 	height: 44px;
@@ -247,11 +248,6 @@ export default {
 			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
@@ -265,4 +261,12 @@ export default {
 	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>

src/components/Questions/QuestionShort.vue

@@ -32,7 +32,7 @@
 			<input ref="input"
 				:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
 				:placeholder="t('forms', 'Short answer text')"
-				:readonly="edit"
+				:required="true /* TODO: implement required option */"
 				:value="values[0]"
 				class="question__input"
 				maxlength="256"

src/models/AnswerTypes.js

@@ -38,12 +38,16 @@ export default {
 		icon: 'icon-answer-multiple',
 		label: t('forms', 'Multiple choice'),
 		unique: true,
+		// Define conditions where this questions is not ok
+		validate: question => question.options.length > 0,
 	},
 
 	multiple: {
 		component: QuestionMultiple,
 		icon: 'icon-answer-checkbox',
 		label: t('forms', 'Checkboxes'),
+		// Define conditions where this questions is not ok
+		validate: question => question.options.length > 0,
 	},
 
 	short: {

src/views/Create.vue

@@ -392,7 +392,7 @@ export default {
 			font-size: 2em;
 			font-weight: bold;
 			padding-left: 14px; // align with description (compensate font size diff)
-			overflow-x: hidden;
+			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}

src/views/Submit.vue

@@ -21,11 +21,143 @@
  -->
 
 <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>
 
 <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 {
 	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>
+<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>

webpack.common.js

@@ -4,8 +4,8 @@ const webpack = require('webpack')
 const StyleLintPlugin = require('stylelint-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
-const appName = process.env.npm_package_name
-const appVersion = process.env.npm_package_version
+const appName = process.env.npm_package_name.toString()
+const appVersion = process.env.npm_package_version.toString()
 console.info('Building', appName, appVersion, '\n')
 
 module.exports = {