feat: add color question type

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

Author: Chartman123

lib/Constants.php

@@ -66,37 +66,39 @@ class Constants {
 	 */
 
 	// Available AnswerTypes
-	public const ANSWER_TYPE_MULTIPLE = 'multiple';
-	public const ANSWER_TYPE_MULTIPLEUNIQUE = 'multiple_unique';
-	public const ANSWER_TYPE_DROPDOWN = 'dropdown';
-	public const ANSWER_TYPE_SHORT = 'short';
-	public const ANSWER_TYPE_LONG = 'long';
+	public const ANSWER_TYPE_COLOR = 'color';
 	public const ANSWER_TYPE_DATE = 'date';
 	public const ANSWER_TYPE_DATETIME = 'datetime';
-	public const ANSWER_TYPE_TIME = 'time';
+	public const ANSWER_TYPE_DROPDOWN = 'dropdown';
 	public const ANSWER_TYPE_FILE = 'file';
 	public const ANSWER_TYPE_LINEARSCALE = 'linearscale';
+	public const ANSWER_TYPE_LONG = 'long';
+	public const ANSWER_TYPE_MULTIPLE = 'multiple';
+	public const ANSWER_TYPE_MULTIPLEUNIQUE = 'multiple_unique';
+	public const ANSWER_TYPE_SHORT = 'short';
+	public const ANSWER_TYPE_TIME = 'time';
 
 	// All AnswerTypes
 	public const ANSWER_TYPES = [
-		self::ANSWER_TYPE_MULTIPLE,
-		self::ANSWER_TYPE_MULTIPLEUNIQUE,
-		self::ANSWER_TYPE_DROPDOWN,
-		self::ANSWER_TYPE_SHORT,
-		self::ANSWER_TYPE_LONG,
+		self::ANSWER_TYPE_COLOR,
 		self::ANSWER_TYPE_DATE,
 		self::ANSWER_TYPE_DATETIME,
-		self::ANSWER_TYPE_TIME,
+		self::ANSWER_TYPE_DROPDOWN,
 		self::ANSWER_TYPE_FILE,
 		self::ANSWER_TYPE_LINEARSCALE,
+		self::ANSWER_TYPE_LONG,
+		self::ANSWER_TYPE_MULTIPLE,
+		self::ANSWER_TYPE_MULTIPLEUNIQUE,
+		self::ANSWER_TYPE_SHORT,
+		self::ANSWER_TYPE_TIME,
 	];
 
 	// AnswerTypes, that need/have predefined Options
 	public const ANSWER_TYPES_PREDEFINED = [
-		self::ANSWER_TYPE_MULTIPLE,
-		self::ANSWER_TYPE_MULTIPLEUNIQUE,
 		self::ANSWER_TYPE_DROPDOWN,
 		self::ANSWER_TYPE_LINEARSCALE,
+		self::ANSWER_TYPE_MULTIPLE,
+		self::ANSWER_TYPE_MULTIPLEUNIQUE,
 	];
 
 	// AnswerTypes for date/time questions
@@ -194,10 +196,10 @@ class Constants {
 	 * !! Keep in sync with src/mixins/ShareTypes.js !!
 	 */
 	public const SHARE_TYPES_USED = [
-		IShare::TYPE_USER,
+		IShare::TYPE_CIRCLE,
 		IShare::TYPE_GROUP,
 		IShare::TYPE_LINK,
-		IShare::TYPE_CIRCLE
+		IShare::TYPE_USER,
 	];
 
 	/**
@@ -214,18 +216,18 @@ class Constants {
 
 	public const PERMISSION_ALL = [
 		self::PERMISSION_EDIT,
+		self::PERMISSION_EMBED,
 		self::PERMISSION_RESULTS,
 		self::PERMISSION_RESULTS_DELETE,
 		self::PERMISSION_SUBMIT,
-		self::PERMISSION_EMBED,
 	];
 
 	/**
 	 * !! Keep in sync with src/FormsEmptyContent.vue !!
 	 * InitialStates for emptyContent to render as...
 	 */
-	public const EMPTY_NOTFOUND = 'notfound';
 	public const EMPTY_EXPIRED = 'expired';
+	public const EMPTY_NOTFOUND = 'notfound';
 
 	/**
 	 * Constants related to extra settings for questions

lib/Service/SubmissionService.php

@@ -453,6 +453,11 @@ public function validateSubmission(array $questions, array $answers, string $for
 				throw new \InvalidArgumentException(sprintf('Invalid input for question "%s".', $question['text']));
 			}
 
+			// Handle color questions
+			if ($question['type'] === Constants::ANSWER_TYPE_COLOR && !preg_match('/^#[a-f0-9]{6}$/i', $answers[$questionId][0])) {
+				throw new \InvalidArgumentException(sprintf('Invalid color string for question "%s".', $question['text']));
+			}
+
 			// Handle file questions
 			if ($question['type'] === Constants::ANSWER_TYPE_FILE) {
 				$maxAllowedFilesCount = $question['extraSettings']['maxAllowedFilesCount'] ?? 0;

src/components/Icons/IconPalette.vue

@@ -0,0 +1,45 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Christian Hartmann <chris-hartmann@gmx.de>
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<span
+		:aria-hidden="!title"
+		:aria-label="title"
+		class="material-design-icon palette-icon"
+		role="img"
+		v-bind="$attrs"
+		@click="$emit('click', $event)">
+		<svg
+			:fill="fillColor"
+			class="material-design-icon__svg"
+			:height="size"
+			:width="size"
+			viewBox="0 -960 960 960">
+			<path
+				d="M480-96q-78.72 0-148.8-30.24-70.08-30.24-122.4-82.56-52.32-52.32-82.56-122.4Q96-401.28 96-480q0-80 30.5-149.5t84-122Q264-804 335.5-834t152.75-30q77.39 0 146.07 27Q703-810 754-763t80.5 110Q864-590 864-518q0 96-67.08 163-67.09 67-162.92 67h-67.76q-8.24 0-14.24 5t-6 12.67Q546-255 561-245q15 10 15 53 0 37-27 66.5T480-96ZM264-444q25 0 42.5-17.5T324-504q0-25-17.5-42.5T264-564q-25 0-42.5 17.5T204-504q0 25 17.5 42.5T264-444Zm120-144q25 0 42.5-17.5T444-648q0-25-17.5-42.5T384-708q-25 0-42.5 17.5T324-648q0 25 17.5 42.5T384-588Zm192 0q25 0 42.5-17.5T636-648q0-25-17.5-42.5T576-708q-25 0-42.5 17.5T516-648q0 25 17.5 42.5T576-588Zm120 144q25 0 42.5-17.5T756-504q0-25-17.5-42.5T696-564q-25 0-42.5 17.5T636-504q0 25 17.5 42.5T696-444Z" />
+			<title v-if="title">{{ title }}</title>
+		</svg>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'IconPalette',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+		size: {
+			type: Number,
+			default: 20,
+		},
+	},
+}
+</script>

src/components/Questions/QuestionColor.vue

@@ -0,0 +1,79 @@
+<!--
+  - 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">
+		<div class="question__content">
+			<NcColorPicker
+				:model-value="pickedColor"
+				advanced-fields
+				@update:model-value="onUpdatePickedColor">
+				<NcButton :disabled="!readOnly">{{
+					colorPickerPlaceholder
+				}}</NcButton>
+			</NcColorPicker>
+			<div :style="{ 'background-color': pickedColor }" class="color__field" />
+		</div>
+	</Question>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcColorPicker from '@nextcloud/vue/components/NcColorPicker'
+
+import QuestionMixin from '../../mixins/QuestionMixin.js'
+
+export default {
+	name: 'QuestionColor',
+
+	components: {
+		NcButton,
+		NcColorPicker,
+	},
+
+	mixins: [QuestionMixin],
+
+	data() {
+		return {
+			isLoading: false,
+		}
+	},
+
+	computed: {
+		colorPickerPlaceholder() {
+			return this.readOnly
+				? this.answerType.submitPlaceholder
+				: this.answerType.createPlaceholder
+		},
+
+		pickedColor() {
+			return this.values[0]
+		},
+	},
+
+	methods: {
+		onUpdatePickedColor(color) {
+			this.$emit('update:values', [color])
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.question__content {
+	display: flex;
+	gap: var(--clickable-area-small);
+}
+
+.color__field {
+	width: 100px;
+	height: var(--default-clickable-area);
+	border-radius: var(--border-radius-element);
+}
+</style>

src/components/Results/Answer.vue

@@ -22,6 +22,14 @@
 				</a>
 			</p>
 		</template>
+		<template v-else-if="questionType === 'color'">
+			<div class="color__result">
+				<NcHighlight :text="answerText" :search="highlight" />
+				<div
+					:style="{ 'background-color': answerText }"
+					class="color__field" />
+			</div>
+		</template>
 		<p v-else class="answer__text" dir="auto">
 			<NcHighlight :text="answerText" :search="highlight" />
 		</p>
@@ -54,6 +62,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		questionType: {
+			type: String,
+			required: true,
+		},
 		highlight: {
 			type: String,
 			required: false,
@@ -81,5 +93,17 @@ export default {
 			top: 4px;
 		}
 	}
+
+	.color__field {
+		width: 100px;
+		height: var(--default-clickable-area);
+		border-radius: var(--border-radius-element);
+	}
+
+	.color__result {
+		align-items: center;
+		display: flex;
+		gap: var(--clickable-area-small);
+	}
 }
 </style>

src/components/Results/ResultsSummary.vue

@@ -48,6 +48,15 @@
 						{{ answer.text }}
 					</a>
 				</template>
+				<template v-else-if="question.type === 'color'">
+					<div class="color__result">
+						{{ answer.text }}
+						<div
+							v-if="answer.id !== 0"
+							:style="{ 'background-color': answer.text }"
+							class="color__field" />
+					</div>
+				</template>
 				<template v-else>
 					{{ answer.text }}
 				</template>
@@ -368,5 +377,17 @@ export default {
 			}
 		}
 	}
+
+	.color__field {
+		width: 100px;
+		height: var(--default-clickable-area);
+		border-radius: var(--border-radius-element);
+	}
+
+	.color__result {
+		align-items: center;
+		display: flex;
+		gap: var(--clickable-area-small);
+	}
 }
 </style>

src/components/Results/Submission.vue

@@ -39,7 +39,8 @@
 			:highlight="highlight"
 			:answer-text="question.squashedAnswers"
 			:answers="question.answers"
-			:question-text="question.text" />
+			:question-text="question.text"
+			:question-type="question.type" />
 	</div>
 </template>
 
@@ -120,6 +121,7 @@ export default {
 					answeredQuestionsArray.push({
 						id: question.id,
 						text: question.text,
+						type: question.type,
 						answers: answers.map((answer) => {
 							return {
 								id: answer.id,
@@ -138,6 +140,7 @@ export default {
 					answeredQuestionsArray.push({
 						id: question.id,
 						text: question.text,
+						type: question.type,
 						squashedAnswers,
 					})
 				} else {
@@ -148,6 +151,7 @@ export default {
 					answeredQuestionsArray.push({
 						id: question.id,
 						text: question.text,
+						type: question.type,
 						squashedAnswers,
 					})
 				}

src/models/AnswerTypes.js

@@ -3,6 +3,7 @@
  * 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'
@@ -17,6 +18,7 @@ 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/File.vue'
 import IconLinearScale from '../components/Icons/IconLinearScale.vue'
+import IconPalette from '../components/Icons/IconPalette.vue'
 import IconRadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'
 import IconTextLong from 'vue-material-design-icons/TextLong.vue'
 import IconTextShort from 'vue-material-design-icons/TextShort.vue'
@@ -32,6 +34,7 @@ import IconTextShort from 'vue-material-design-icons/TextShort.vue'
  * @property {string} datetime Date and Time Answer
  * @property {string} time Time Answer
  * @property {string} linearscale Linear Scale Answer
+ * @property {string} color Color Answer
  */
 export default {
 	/**
@@ -198,4 +201,16 @@ export default {
 		titlePlaceholder: t('forms', 'Linear scale question title'),
 		warningInvalid: t('forms', 'This question needs a title!'),
 	},
+
+	color: {
+		component: QuestionColor,
+		icon: IconPalette,
+		label: t('forms', 'Color'),
+		predefined: false,
+
+		titlePlaceholder: t('forms', 'Color question title'),
+		createPlaceholder: t('forms', 'People can pick a color'),
+		submitPlaceholder: t('forms', 'Pick a color'),
+		warningInvalid: t('forms', 'This question needs a title!'),
+	},
 }

tests/Integration/Api/RespectAdminSettingsTest.php

@@ -128,10 +128,10 @@ private static function sharedTestForms(): array {
 				'submissionMessage' => '',
 				'permissions' => [
 					'edit',
+					'embed',
 					'results',
 					'results_delete',
 					'submit',
-					'embed',
 				],
 				'canSubmit' => true,
 				'submissionCount' => 0,