Initial load and display of public form

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

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>