feat: introduce Section as a new question type

Signed-off-by: ailkiv <a.ilkiv.ye@gmail.com>

Author: AIlkiv

lib/Constants.php

@@ -76,6 +76,7 @@ class Constants {
 	public const ANSWER_TYPE_LONG = 'long';
 	public const ANSWER_TYPE_MULTIPLE = 'multiple';
 	public const ANSWER_TYPE_MULTIPLEUNIQUE = 'multiple_unique';
+	public const ANSWER_TYPE_SECTION = 'section';
 	public const ANSWER_TYPE_SHORT = 'short';
 	public const ANSWER_TYPE_TIME = 'time';
 
@@ -95,6 +96,7 @@ class Constants {
 		self::ANSWER_TYPE_LONG,
 		self::ANSWER_TYPE_MULTIPLE,
 		self::ANSWER_TYPE_MULTIPLEUNIQUE,
+		self::ANSWER_TYPE_SECTION,
 		self::ANSWER_TYPE_SHORT,
 		self::ANSWER_TYPE_TIME,
 	];

lib/Controller/ApiController.php

@@ -1187,10 +1187,13 @@ public function getSubmissions(int $formId, ?string $query = null, ?int $limit =
 		}
 		$questions = [];
 		foreach ($this->formsService->getQuestions($formId) as $question) {
+			if ($question['type'] === Constants::ANSWER_TYPE_SECTION) {
+				continue;
+			}
+
 			$questions[$question['id']] = $question;
 		}
 
-
 		// Append Display Names
 		$submissions = array_map(function (array $submission) use ($questions) {
 			if (!empty($submission['answers'])) {

lib/ResponseDefinitions.php

@@ -43,8 +43,8 @@
  *   questionType?: string,
  * }
  *
- * @psalm-type FormsQuestionType = "dropdown"|"multiple"|"multiple_unique"|"date"|"time"|"short"|"long"|"file"|"datetime"|"grid"
- * @psalm-type FormsQuestionGridCellType = "checkbox"|"number"|"radio"
+ * @psalm-type FormsQuestionType = "dropdown"|"multiple"|"multiple_unique"|"date"|"time"|"short"|"long"|"file"|"datetime"|"grid"|"section"
+ * @psalm-type FormsQuestionGridCellType = "checkbox"|"number"|"radio"|"section"
  *
  * @psalm-type FormsQuestion = array{
  *   id: int,

lib/Service/SubmissionService.php

@@ -233,6 +233,11 @@ public function getSubmissionsData(Form $form, string $fileFormat, ?File $file =
 		$submissionEntities = array_reverse($submissionEntities);
 
 		$questions = $this->questionMapper->findByForm($form->getId());
+
+		$questions = array_filter($questions, function (Question $question) {
+			return $question->getType() !== Constants::ANSWER_TYPE_SECTION;
+		});
+
 		$defaultTimeZone = $this->config->getSystemValueString('default_timezone', 'UTC');
 
 		if (!$this->currentUser) {

openapi.json

@@ -548,7 +548,8 @@
                     "long",
                     "file",
                     "datetime",
-                    "grid"
+                    "grid",
+                    "section"
                 ]
             },
             "Share": {

src/components/Questions/Question.vue

@@ -8,6 +8,7 @@
 		class="question"
 		:class="{
 			'question--editable': !readOnly,
+			'question--section': readOnly && isSection,
 		}"
 		:aria-label="t('forms', 'Question number {index}', { index })">
 		<!-- Drag handle -->
@@ -91,13 +92,15 @@
 						</IconOverlay>
 					</template>
 					<NcActionCheckbox
+						v-if="!isSection"
 						:model-value="isRequired"
 						@update:model-value="onRequiredChange">
 						<!-- TRANSLATORS Making this question necessary to be answered when submitting to a form -->
 						{{ t('forms', 'Required') }}
 					</NcActionCheckbox>
 					<slot name="actions" />
 					<NcActionInput
+						v-if="!isSection"
 						:label="t('forms', 'Technical name of the question')"
 						:label-outside="false"
 						:show-trailing-button="false"
@@ -259,6 +262,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		type: {
+			type: String,
+			default: '',
+		},
 	},
 
 	emits: [
@@ -309,6 +316,10 @@ export default {
 		hasDescription() {
 			return this.description !== ''
 		},
+
+		isSection() {
+			return this.type === 'section'
+		},
 	},
 
 	// Ensure description is sized correctly on initial render
@@ -520,4 +531,22 @@ export default {
 		}
 	}
 }
+
+.question--section {
+	margin-block-end: 16px;
+	position: sticky;
+	top: 0;
+	background: var(--color-main-background);
+	z-index: 2;
+
+	h3 {
+		font-size: 24px !important;
+		border-bottom: 1px solid;
+	}
+
+	.question__header__description {
+		max-height: calc(var(--default-font-size) * 8);
+		overflow-y: auto;
+	}
+}
 </style>

src/components/Questions/QuestionSection.vue

@@ -0,0 +1,25 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<Question
+		v-bind="questionProps"
+		:title-placeholder="answerType.titlePlaceholder"
+		:warning-invalid="answerType.warningInvalid"
+		v-on="commonListeners">
+	</Question>
+</template>
+
+<script>
+import QuestionMixin from '../../mixins/QuestionMixin.js'
+import Question from './Question.vue'
+export default {
+	name: 'QuestionSection',
+	components: {
+		Question,
+	},
+	mixins: [QuestionMixin],
+}
+</script>

src/models/AnswerTypes.js

@@ -3,11 +3,22 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import QuestionColor from '../components/Questions/QuestionColor.vue'
+import QuestionDate from '../components/Questions/QuestionDate.vue'
+import QuestionDropdown from '../components/Questions/QuestionDropdown.vue'
+import QuestionFile from '../components/Questions/QuestionFile.vue'
+import QuestionLinearScale from '../components/Questions/QuestionLinearScale.vue'
+import QuestionLong from '../components/Questions/QuestionLong.vue'
+import QuestionMultiple from '../components/Questions/QuestionMultiple.vue'
+import QuestionSection from '../components/Questions/QuestionSection.vue'
+import QuestionShort from '../components/Questions/QuestionShort.vue'
+
 import IconArrowDownDropCircleOutline from 'vue-material-design-icons/ArrowDownDropCircleOutline.vue'
 import IconCalendar from 'vue-material-design-icons/CalendarOutline.vue'
 import IconCheckboxOutline from 'vue-material-design-icons/CheckboxOutline.vue'
 import IconClockOutline from 'vue-material-design-icons/ClockOutline.vue'
 import IconFile from 'vue-material-design-icons/FileOutline.vue'
+import IconFormatSection from 'vue-material-design-icons/FormatSection.vue'
 import IconGrid from 'vue-material-design-icons/Grid.vue'
 import IconNumeric from 'vue-material-design-icons/Numeric.vue'
 import IconRadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'
@@ -263,4 +274,14 @@ export default {
 		submitPlaceholder: t('forms', 'Pick a color'),
 		warningInvalid: t('forms', 'This question needs a title!'),
 	},
+
+	section: {
+		component: QuestionSection,
+		icon: IconFormatSection,
+		label: t('forms', 'Section'),
+		predefined: false,
+
+		titlePlaceholder: t('forms', 'Section title'),
+		warningInvalid: t('forms', 'This section needs a title!'),
+	},
 }

src/views/Create.vue

@@ -138,6 +138,7 @@
 							:answer-type="answerTypes[question.type]"
 							:index="index + 1"
 							:max-string-lengths="maxStringLengths"
+							:type="question.type"
 							v-bind.sync="form.questions[index]"
 							@clone="cloneQuestion(question)"
 							@delete="deleteQuestion(question.id)"

src/views/Submit.vue

@@ -105,22 +105,41 @@
 
 			<!-- Questions list -->
 			<form v-else ref="form" @submit.prevent="onSubmit">
-				<ul>
-					<component
-						:is="answerTypes[question.type].component"
-						v-for="(question, index) in validQuestions"
-						ref="questions"
-						:key="question.id"
-						read-only
-						:answer-type="answerTypes[question.type]"
-						:index="index + 1"
-						:max-string-lengths="maxStringLengths"
-						:values="answers[question.id]"
-						v-bind="question"
-						@keydown.enter="onKeydownEnter"
-						@keydown.ctrl.enter="onKeydownCtrlEnter"
-						@update:values="(values) => onUpdate(question, values)" />
-				</ul>
+				<template v-for="(group, groupIndex) in groupedQuestions">
+					<ul :key="`group-${groupIndex}`">
+						<Questions
+							v-if="group.section"
+							:is="answerTypes[group.section.type].component"
+							ref="questions"
+							:key="group.section.id"
+							read-only
+							:answer-type="answerTypes[group.section.type]"
+							:index="group.displayIndex"
+							:max-string-lengths="maxStringLengths"
+							:type="group.section.type"
+							v-bind="group.section" />
+
+						<template v-if="group.questions.length > 0">
+							<component
+								:is="answerTypes[question.type].component"
+								v-for="question in group.questions"
+								ref="questions"
+								:key="question.id"
+								read-only
+								:answer-type="answerTypes[question.type]"
+								:index="question.displayIndex"
+								:max-string-lengths="maxStringLengths"
+								:type="question.type"
+								:values="answers[question.id]"
+								v-bind="question"
+								@keydown.enter="onKeydownEnter"
+								@keydown.ctrl.enter="onKeydownCtrlEnter"
+								@update:values="
+									(values) => onUpdate(question, values)
+								" />
+						</template>
+					</ul>
+				</template>
 				<div class="form-buttons">
 					<NcButton
 						alignment="center-reverse"
@@ -334,6 +353,46 @@ export default {
 			})
 		},
 
+		/**
+		 * Group questions by sections
+		 * Each section contains its questions and the section itself
+		 */
+		groupedQuestions() {
+			const groups = []
+			let currentGroup = { section: null, questions: [] }
+			let questionIndex = 1
+
+			for (const question of this.validQuestions) {
+				if (question.type === 'section') {
+					// Save current group if it has content
+					if (currentGroup.section || currentGroup.questions.length > 0) {
+						groups.push(currentGroup)
+					}
+
+					// Start new group with section
+					currentGroup = {
+						section: question,
+						displayIndex: questionIndex,
+						questions: [],
+					}
+				} else {
+					// Add question to current group
+					currentGroup.questions.push({
+						...question,
+						displayIndex: questionIndex,
+					})
+				}
+				questionIndex++
+			}
+
+			// Add the last group if it has content
+			if (currentGroup.section || currentGroup.questions.length > 0) {
+				groups.push(currentGroup)
+			}
+
+			return groups
+		},
+
 		validQuestionsIds() {
 			return new Set(this.validQuestions.map((question) => question.id))
 		},