feat(date): add dateMin and dateMax fields to question settings

Signed-off-by: Christian Hartmann <[email protected]>

Author: Chartman123

lib/Constants.php

@@ -145,6 +145,11 @@ class Constants {
 		'allowedFileExtensions' => ['array'],
 		'maxAllowedFilesCount' => ['integer'],
 		'maxFileSize' => ['integer'],
+	];	
+
+	public const EXTRA_SETTINGS_DATE = [
+		'dateMax' => ['integer'],
+		'dateMin' => ['integer'],
 	];
 
 	// should be in sync with FileTypes.js

lib/ResponseDefinitions.php

@@ -23,6 +23,8 @@
  *   allowOtherAnswer?: bool,
  *   allowedFileExtensions?: list<string>,
  *   allowedFileTypes?: list<string>,
+ *   dateMax?: int,
+ *   dateMin?: int,
  *   maxAllowedFilesCount?: int,
  *   maxFileSize?: int,
  *   optionsLimitMax?: int,

lib/Service/FormsService.php

@@ -629,6 +629,9 @@ public function areExtraSettingsValid(array $extraSettings, string $questionType
 			case Constants::ANSWER_TYPE_FILE:
 				$allowed = Constants::EXTRA_SETTINGS_FILE;
 				break;
+			case Constants::ANSWER_TYPE_DATE:
+				$allowed = Constants::EXTRA_SETTINGS_DATE;
+				break;
 			default:
 				$allowed = [];
 		}

src/components/Questions/QuestionDate.vue

@@ -9,6 +9,23 @@
 		:title-placeholder="answerType.titlePlaceholder"
 		:warning-invalid="answerType.warningInvalid"
 		v-on="commonListeners">
+		<template v-if="answerType.pickerType === 'date'" #actions>
+			<NcActionInput
+				v-model="dateMin"
+				:aria-label="t('forms', 'Pick minimum date')"
+				:formatter="extraSettingsFormatter"
+				type="date"
+				clearable>
+				{{ t('forms', 'Pick minimum date') }}
+			</NcActionInput>
+			<NcActionInput
+				v-model="dateMax"
+				:aria-label="t('forms', 'Pick maximum date')"
+				:formatter="extraSettingsFormatter"
+				type="date">
+				{{ t('forms', 'Pick maximum date') }}
+			</NcActionInput>
+		</template>
 		<div class="question__content">
 			<NcDateTimePicker
 				:value="time"
@@ -17,6 +34,7 @@
 				:placeholder="datetimePickerPlaceholder"
 				:show-second="false"
 				:type="answerType.pickerType"
+				:disabled-date="disabledDates"
 				:input-attr="inputAttr"
 				@change="onValueChange" />
 		</div>
@@ -27,12 +45,14 @@
 import moment from '@nextcloud/moment'
 
 import QuestionMixin from '../../mixins/QuestionMixin.js'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
 
 export default {
 	name: 'QuestionDate',
 
 	components: {
+		NcActionInput,
 		NcDateTimePicker,
 	},
 
@@ -44,6 +64,10 @@ export default {
 				stringify: this.stringify,
 				parse: this.parse,
 			},
+			extraSettingsFormatter: {
+				stringify: this.stringifyDate,
+				parse: this.parseTimestampToDate,
+			},
 		}
 	},
 
@@ -70,6 +94,40 @@ export default {
 		time() {
 			return this.values ? this.parse(this.values[0]) : null
 		},
+
+		dateMax: {
+			get() {
+				return moment(this.extraSettings?.dateMax, 'X').toDate() ?? null
+			},
+			set(value) {
+				if (!value) {
+					this.onExtraSettingsChange({
+						dateMax: null,
+					})
+				} else {
+					this.onExtraSettingsChange({
+						dateMax: parseInt(moment(value).format('X')),
+					})
+				}
+			},
+		},
+
+		dateMin: {
+			get() {
+				return moment(this.extraSettings?.dateMin, 'X').toDate() ?? null
+			},
+			set(value) {
+				if (!value) {
+					this.onExtraSettingsChange({
+						dateMax: null,
+					})
+				} else {
+					this.onExtraSettingsChange({
+						dateMin: parseInt(moment(value).format('X')),
+					})
+				}
+			},
+		},
 	},
 
 	methods: {
@@ -106,6 +164,39 @@ export default {
 				moment(date).format(this.answerType.storageFormat),
 			])
 		},
+
+		/**
+		 * Determines if a given date should be disabled.
+		 *
+		 * @param {Date} date - The date to check.
+		 * @return {boolean} - Returns true if the date should be disabled, otherwise false.
+		 */
+		disabledDates(date) {
+			return (
+				(this.dateMin && date < this.dateMin) ||
+				(this.dateMax && date > this.dateMax)
+			)
+		},
+
+		/**
+		 * Datepicker timestamp to string
+		 *
+		 * @param {Date} datetime the datepicker Date
+		 * @return {string}
+		 */
+		stringifyDate(datetime) {
+			return moment(datetime).format('L')
+		},
+
+		/**
+		 * Form expires timestamp to Date of the datepicker
+		 *
+		 * @param {number} value the expires timestamp
+		 * @return {Date}
+		 */
+		parseTimestampToDate(value) {
+			return moment(value, 'X').toDate()
+		},
 	},
 }
 </script>