Add date and datetime question-type

Original Author: Simon Vieille <simon@deblan.fr>
Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>

css/icons.scss

@@ -29,6 +29,8 @@
 @include icon-black-white('answer-dropdown', 'forms', 1);
 @include icon-black-white('answer-short', 'forms', 1);
 @include icon-black-white('answer-long', 'forms', 1);
+@include icon-black-white('answer-date', 'forms', 1);
+@include icon-black-white('answer-datetime', 'forms', 1);
 @include icon-black-white('drag-handle', 'forms', 1);
 
 .icon-yes {

img/answer-date.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <rect style="marker:none" width="11.678" height="11.469" x="2.161" y="2.266" ry="0" rx="0" color="#000" overflow="visible" fill="none" stroke="#000" stroke-width="1.358" stroke-linecap="square" paint-order="fill markers stroke"/>
+  <path style="marker:none" color="#000" overflow="visible" stroke="#000" stroke-width=".351" stroke-linecap="square" paint-order="stroke markers fill" d="M9.837 9.978h2.209v2.169H9.837z"/>
+  <rect style="marker:none" width="11.873" height="2.124" x="2.064" y="2.168" ry="0" rx="0" color="#000" overflow="visible" stroke="#000" stroke-width="1.163" stroke-linecap="square" paint-order="fill markers stroke"/>
+</svg>

img/answer-datetime.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <rect style="marker:none" width="11.678" height="11.469" x="2.161" y="2.266" ry="5.734" rx="5.734" color="#000" overflow="visible" fill="none" stroke="#000" stroke-width="1.358" stroke-linecap="square" paint-order="fill markers stroke"/>
+  <path d="M6.893 4.811l.822 3.516 3.795 2.023" fill="none" stroke="#000"/>
+</svg>

lib/Db/Question.php

@@ -53,7 +53,9 @@ class Question extends Entity {
 		'long',
 		'multiple',
 		'multiple_unique',
-		'dropdown'
+		'dropdown',
+		'date',
+		'datetime',
 	];
 
 	public function __construct() {

src/components/Questions/QuestionDate.vue

@@ -0,0 +1,135 @@
+<!--
+  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author Simon Vieille <contact@deblan.fr>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<Question
+		v-bind.sync="$attrs"
+		:text="text"
+		:mandatory="mandatory"
+		:edit.sync="edit"
+		:read-only="readOnly"
+		:max-question-length="maxStringLengths.questionText"
+		:title-placeholder="answerType.titlePlaceholder"
+		:warning-invalid="answerType.warningInvalid"
+		@update:text="onTitleChange"
+		@update:mandatory="onMandatoryChange"
+		@delete="onDelete">
+		<div class="question__content">
+			<DatetimePicker
+				v-model="time"
+				value-type="format"
+				:disabled="!readOnly"
+				:formatter="formatter"
+				:placeholder="datetimePickerPlaceholder"
+				:show-second="false"
+				:type="datetimePickerType"
+				@change="onValueChange" />
+		</div>
+	</Question>
+</template>
+
+<script>
+import moment from '@nextcloud/moment'
+
+import QuestionMixin from '../../mixins/QuestionMixin'
+import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker'
+
+export default {
+	name: 'QuestionDate',
+
+	components: {
+		DatetimePicker,
+	},
+
+	mixins: [QuestionMixin],
+
+	data() {
+		return {
+			time: null,
+			formatter: {
+				stringify: this.stringify,
+				parse: this.parse,
+			},
+		}
+	},
+
+	computed: {
+		// Allow picking time or not, depending on variable in answerType.
+		datetimePickerType() {
+			return this.answerType.includeTime ? 'datetime' : 'date'
+		},
+
+		datetimePickerPlaceholder() {
+			if (this.readOnly) {
+				return this.answerType.submitPlaceholder
+			}
+			return this.answerType.createPlaceholder
+		},
+
+		/**
+		 * Calculating the format, that moment should use. With or without time.
+		 * @returns {String}
+		 */
+		getMomentFormat() {
+			if (this.datetimePickerType === 'datetime') {
+				return 'LLL'
+			}
+			return 'LL'
+		},
+	},
+
+	methods: {
+		/**
+		 * DateTimepicker show date-text
+		 * Format depends on component-type date/datetime
+		 * @param {Date} date the selected datepicker Date
+		 * @returns {String}
+		 */
+		stringify(date) {
+			return moment(date).format(this.getMomentFormat)
+		},
+		/**
+		 * Reinterpret the stringified date
+		 * @param {String} dateString Stringified date
+		 * @returns {Date}
+		 */
+		parse(dateString) {
+			return moment(dateString, this.getMomentFormat).toDate()
+		},
+
+		/**
+		 * Store Value
+		 * @param {String} dateString The parsed string to store
+		 */
+		onValueChange(dateString) {
+			this.$emit('update:values', [dateString])
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.mx-datepicker {
+	// Enlarging a bit (originally 210px) to have enough space for placeholder
+	width: 250px;
+}
+</style>

src/models/AnswerTypes.js

@@ -24,6 +24,7 @@ import QuestionMultiple from '../components/Questions/QuestionMultiple'
 import QuestionDropdown from '../components/Questions/QuestionDropdown'
 import QuestionShort from '../components/Questions/QuestionShort'
 import QuestionLong from '../components/Questions/QuestionLong'
+import QuestionDate from '../components/Questions/QuestionDate'
 
 /**
  * @typedef {Object} AnswerTypes
@@ -32,6 +33,8 @@ import QuestionLong from '../components/Questions/QuestionLong'
  * @property {string} dropdown
  * @property {string} short
  * @property {string} long
+ * @property {string} date
+ * @property {string} datetime
  */
 export default {
 	/**
@@ -106,4 +109,28 @@ export default {
 		warningInvalid: t('forms', 'This question needs a title!'),
 	},
 
+	date: {
+		component: QuestionDate,
+		icon: 'icon-answer-date',
+		label: t('forms', 'Date'),
+
+		titlePlaceholder: t('forms', 'Date question title'),
+		createPlaceholder: t('forms', 'People can pick a date'),
+		submitPlaceholder: t('forms', 'Pick a date'),
+		warningInvalid: t('forms', 'This question needs a title!'),
+	},
+
+	datetime: {
+		component: QuestionDate,
+		icon: 'icon-answer-datetime',
+		label: t('forms', 'Datetime'),
+
+		titlePlaceholder: t('forms', 'Datetime question title'),
+		createPlaceholder: t('forms', 'People can pick a date and time'),
+		submitPlaceholder: t('forms', 'Pick a date and time'),
+		warningInvalid: t('forms', 'This question needs a title!'),
+
+		// Using the same vue-component as date, this specifies that the component renders as datetime.
+		includeTime: true,
+	},
 }