add date question, add datetime question

Signed-off-by: Simon Vieille <simon@deblan.fr> fix date/datetime css Signed-off-by: Simon Vieille <simon@deblan.fr> add email question Signed-off-by: Simon Vieille <simon@deblan.fr> update icons Signed-off-by: Simon Vieille <simon@deblan.fr> optimize icons Signed-off-by: Simon Vieille <simon@deblan.fr> refactoring of questions (date, datetime, short) Signed-off-by: Simon Vieille <simon@deblan.fr> add tel question type Signed-off-by: Simon Vieille <simon@deblan.fr> clean svg Signed-off-by: Simon Vieille <simon@deblan.fr> add date question, add datetime question Signed-off-by: Simon Vieille <simon@deblan.fr> fix date/datetime css Signed-off-by: Simon Vieille <simon@deblan.fr> add email question Signed-off-by: Simon Vieille <simon@deblan.fr> update icons Signed-off-by: Simon Vieille <simon@deblan.fr> optimize icons Signed-off-by: Simon Vieille <simon@deblan.fr> refactoring of questions (date, datetime, short) add tel question type clean svg
2020-07-10 14:47:44 +02:00 · 2020-07-10 14:47:44 +02:00 · e3002ea31f
parent 1f707f7358
commit e3002ea31f
12 changed files with 283 additions and 3 deletions
--- a/css/icons.scss
+++ b/css/icons.scss
@ -29,6 +29,10 @@
@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('answer-email', 'forms', 1);
+@include icon-black-white('answer-tel', 'forms', 1);
@include icon-black-white('drag-handle', 'forms', 1);

 .icon-yes {
--- a/img/answer-date.svg
+++ b/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>
--- a/img/answer-datetime.svg
+++ b/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>
--- a/img/answer-email.svg
+++ b/img/answer-email.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <g>
+    <path d="M12.156 3.326q.775.775 1.211 1.861.443 1.08.443 2.422 0 .968-.277 1.971-.277.996-.692 1.654h-3.5l-.11-.54q-.395.263-.762.422-.366.152-1.058.152-1.128 0-1.827-.927-.698-.934-.698-2.511 0-.844.235-1.474.235-.636.643-1.106.38-.443.92-.692.54-.25 1.073-.25.456 0 .809.174.353.166.547.353v-.43h1.604v5.646h1.177q.249-.547.366-1.183.125-.644.125-1.232 0-1.169-.325-2.047-.326-.886-.9-1.467-.588-.595-1.376-.886-.79-.29-1.71-.29-.878 0-1.673.346-.789.346-1.39.934-.616.602-1.004 1.508-.38.906-.38 1.985 0 1.176.36 2.083.366.906.968 1.508.602.595 1.397.906.796.311 1.681.311.588 0 1.335-.11.755-.104 1.336-.277v1.342q-.644.145-1.28.221-.637.076-1.39.076-1.267 0-2.346-.435-1.072-.436-1.86-1.239-.782-.795-1.225-1.923-.436-1.128-.436-2.463 0-1.286.457-2.38.456-1.1 1.259-1.916.781-.802 1.867-1.266 1.093-.463 2.318-.463 1.217 0 2.269.429 1.058.429 1.82 1.203zM9.078 9.4V5.914q-.284-.146-.526-.208-.242-.069-.546-.069-.664 0-1.024.581t-.36 1.591q0 1.093.298 1.619.297.526.982.526.36 0 .63-.139.27-.145.546-.415z"/>
+  </g>
+</svg>
--- a/img/answer-tel.svg
+++ b/img/answer-tel.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <path d="M6.225 1.345c-1.479 0-2.218 0-2.218 1.72v9.87c0 1.72.74 1.72 2.218 1.72h3.55c1.479 0 2.218 0 2.218-1.72v-9.87c0-1.72-.74-1.72-2.218-1.72zm-1.33 1.331h6.21v9.317h-6.21zM8 12.584a.74.74 0 0 1 .74.74.74.74 0 0 1-.74.74.74.74 0 0 1-.74-.74.74.74 0 0 1 .74-.74z"/>
+</svg>
--- a/lib/Db/Question.php
+++ b/lib/Db/Question.php
@ -53,7 +53,11 @@ class Question extends Entity {
 		'long',
 		'multiple',
 		'multiple_unique',
-		'dropdown'
+		'dropdown',
+		'date',
+		'datetime',
+		'email',
+		'tel',
 	];

 	public function __construct() {
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@ -0,0 +1,37 @@
+<!--
+  - @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/>.
+  -
+  -->
+
+<script>
+import QuestionShort from './QuestionShort'
+
+export default {
+	name: 'QuestionDate',
+
+	mixins: [QuestionShort],
+
+	data() {
+		return {
+			type: 'date',
+		}
+	},
+}
+</script>
--- a/src/components/Questions/QuestionDatetime.vue
+++ b/src/components/Questions/QuestionDatetime.vue
@ -0,0 +1,87 @@
+<!--
+  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @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">
+			<input ref="input"
+				:aria-label="t('forms', 'A answer for the question “{text}”', { text })"
+				:placeholder="submissionInputPlaceholder"
+				:disabled="!readOnly"
+				:required="mandatory"
+				:value="values[0]"
+				class="question__input"
+				:maxlength="maxStringLengths.answerText"
+				minlength="1"
+				type="datetime-local"
+				@input="onInput"
+				@keydown.enter.exact.prevent="onKeydownEnter">
+		</div>
+	</Question>
+</template>
+
+<script>
+import QuestionShort from './QuestionShort'
+
+export default {
+	name: 'QuestionDatetime',
+
+	mixins: [QuestionShort],
+
+	data() {
+		return {
+			type: 'datetime-local',
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// Using type to have a higher order than the input styling of server
+.question__input[type=datetime-local] {
+	width: 100%;
+	min-height: 44px;
+	margin: 0;
+	padding: 6px 0;
+	border: 0;
+	border-bottom: 1px dotted var(--color-border-dark);
+	border-radius: 0;
+
+	&:disabled {
+		// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
+	}
+}
+
+</style>
--- a/src/components/Questions/QuestionEmail.vue
+++ b/src/components/Questions/QuestionEmail.vue
@ -0,0 +1,37 @@
+<!--
+  - @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/>.
+  -
+  -->
+
+<script>
+import QuestionShort from './QuestionShort'
+
+export default {
+	name: 'QuestionEmail',
+
+	mixins: [QuestionShort],
+
+	data() {
+		return {
+			type: 'email',
+		}
+	},
+}
+</script>
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@ -43,7 +43,7 @@
 				class="question__input"
 				:maxlength="maxStringLengths.answerText"
 				minlength="1"
-				type="text"
+				v-bind:type="type"
 				@input="onInput"
 				@keydown.enter.exact.prevent="onKeydownEnter">
 		</div>
@ -58,6 +58,12 @@ export default {

 	mixins: [QuestionMixin],

+	data() {
+		return {
+			type: 'text',
+		}
+	},
+
 	computed: {
 		submissionInputPlaceholder() {
 			if (this.readOnly) {
@ -72,13 +78,17 @@ export default {
 			const input = this.$refs.input
 			this.$emit('update:values', [input.value])
 		},
+
+		getType() {
+			return 'text'
+		}
 	},
 }
 </script>

 <style lang="scss" scoped>
 // Using type to have a higher order than the input styling of server
-.question__input[type=text] {
+.question__input {
 	width: 100%;
 	min-height: 44px;
 	margin: 0;
--- a/src/components/Questions/QuestionTel.vue
+++ b/src/components/Questions/QuestionTel.vue
@ -0,0 +1,37 @@
+<!--
+  - @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/>.
+  -
+  -->
+
+<script>
+import QuestionShort from './QuestionShort'
+
+export default {
+	name: 'QuestionTel',
+
+	mixins: [QuestionShort],
+
+	data() {
+		return {
+			type: 'tel',
+		}
+	},
+}
+</script>
--- a/src/models/AnswerTypes.js
+++ b/src/models/AnswerTypes.js
@ -24,6 +24,10 @@ 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'
+import QuestionDatetime from '../components/Questions/QuestionDatetime'
+import QuestionEmail from '../components/Questions/QuestionEmail'
+import QuestionTel from '../components/Questions/QuestionTel'

 /**
 * @typedef {Object} AnswerTypes
@ -105,4 +109,47 @@ 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', ''),
+		submitPlaceholder: t('forms', 'Enter a date'),
+		warningInvalid: t('forms', 'This question needs a title!'),
+	},
+
+	datetime: {
+		component: QuestionDatetime,
+		icon: 'icon-answer-datetime',
+		label: t('forms', 'Datetime'),
+
+		titlePlaceholder: t('forms', 'Datetime question title'),
+		createPlaceholder: t('forms', ''),
+		submitPlaceholder: t('forms', 'Enter a date'),
+		warningInvalid: t('forms', 'This question needs a title!'),
+	},
+
+	email: {
+		component: QuestionEmail,
+		icon: 'icon-answer-email',
+		label: t('forms', 'Email'),
+
+		titlePlaceholder: t('forms', 'Email question title'),
+		createPlaceholder: t('forms', ''),
+		submitPlaceholder: t('forms', 'Enter an email'),
+		warningInvalid: t('forms', 'This question needs a title!'),
+	},
+
+	tel: {
+		component: QuestionTel,
+		icon: 'icon-answer-tel',
+		label: t('forms', 'Phone number'),
+
+		titlePlaceholder: t('forms', 'Phone number question title'),
+		createPlaceholder: t('forms', ''),
+		submitPlaceholder: t('forms', 'Enter a phone number'),
+		warningInvalid: t('forms', 'This question needs a title!'),
+	},
 }