From e4689a430626cef36c0755db55eb05e383370d18 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 10 Jul 2020 14:53:49 +0200
Subject: [PATCH] add email question

Signed-off-by: Simon Vieille <simon@deblan.fr>
---
 css/icons.scss                             |  1 +
 img/answer-email.svg                       | 59 +++++++++++++
 lib/Db/Question.php                        |  1 +
 src/components/Questions/QuestionEmail.vue | 97 ++++++++++++++++++++++
 src/models/AnswerTypes.js                  | 12 +++
 5 files changed, 170 insertions(+)
 create mode 100644 img/answer-email.svg
 create mode 100644 src/components/Questions/QuestionEmail.vue

diff --git a/css/icons.scss b/css/icons.scss
index 114b94f..a282308 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -31,6 +31,7 @@
 @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('drag-handle', 'forms', 1);
 
 .icon-yes {
diff --git a/img/answer-email.svg b/img/answer-email.svg
new file mode 100644
index 0000000..06756dc
--- /dev/null
+++ b/img/answer-email.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16px"
+   height="16px"
+   version="1.1"
+   id="svg957"
+   sodipodi:docname="answer-email.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata963">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs961" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1918"
+     inkscape:window-height="1027"
+     id="namedview959"
+     showgrid="false"
+     inkscape:zoom="23.71875"
+     inkscape:cx="5.7986639"
+     inkscape:cy="9.3162873"
+     inkscape:window-x="1920"
+     inkscape:window-y="21"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg957" />
+  <g
+     aria-label="@"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.16788292px;line-height:125%;font-family:Tahoma;-inkscape-font-specification:'Tahoma, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.66412991px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     id="text1127">
+    <path
+       d="m 12.156402,3.3263982 q 0.774806,0.7748061 1.210635,1.8609182 0.442746,1.0791942 0.442746,2.4212691 0,0.9685076 -0.276716,1.9716048 Q 13.25635,10.57637 12.841276,11.233571 H 9.3408124 L 9.2301258,10.693974 q -0.394321,0.262881 -0.7609703,0.421993 -0.3666493,0.152194 -1.0584405,0.152194 -1.1276195,0 -1.8263286,-0.927 -0.6987091,-0.9339185 -0.6987091,-2.5112023 0,-0.8439853 0.235209,-1.4735152 Q 5.3560953,5.7199956 5.7642521,5.2495776 6.1447372,4.8068313 6.6843343,4.5577865 7.2239314,4.3087417 7.7566106,4.3087417 q 0.4565822,0 0.8093957,0.1729478 0.3528135,0.1660298 0.546515,0.3528134 V 4.4055924 h 1.6049557 v 5.6450156 h 1.176045 q 0.249045,-0.5465147 0.366649,-1.1829626 0.124522,-0.6433658 0.124522,-1.2313883 0,-1.169127 -0.325141,-2.0477018 Q 11.73441,4.7030626 11.160223,4.121958 10.572201,3.5270177 9.7835587,3.2364654 8.9949168,2.9459131 8.0748346,2.9459131 7.1962598,2.9459131 6.4007,3.2918087 5.612058,3.6377042 5.0101997,4.2257267 4.3945056,4.827585 4.0071026,5.7338314 3.6266174,6.6400779 3.6266174,7.7192721 q 0,1.1760449 0.3597314,2.0822914 0.3666493,0.9062465 0.9685076,1.5081045 0.6018583,0.594941 1.3974182,0.906247 0.7955598,0.311306 1.6810525,0.311306 0.5880225,0 1.3351569,-0.110687 0.754052,-0.103769 1.335157,-0.276716 v 1.342074 q -0.643366,0.145277 -1.2798137,0.221374 -0.6364478,0.0761 -1.3905002,0.0761 -1.2659778,0 -2.345172,-0.435829 Q 4.6158788,12.907706 3.8272368,12.105228 3.0455128,11.309668 2.6027665,10.182049 2.1669381,9.054429 2.1669381,7.7192721 q 0,-1.2867316 0.4565821,-2.3797616 0.4565822,-1.099948 1.2590599,-1.9162615 0.7817241,-0.8024778 1.8678362,-1.2659778 1.09303,-0.4635001 2.3175003,-0.4635001 1.2175525,0 2.2690754,0.4289105 1.05844,0.4289105 1.81941,1.2037166 z M 9.0779317,9.4003246 V 5.9136971 Q 8.7942974,5.768421 8.5521705,5.7061598 8.3100436,5.6369807 8.0056554,5.6369807 q -0.6641195,0 -1.0238509,0.5811046 -0.3597314,0.5811045 -0.3597314,1.5911196 0,1.0930301 0.2974702,1.6187913 0.2974702,0.5257613 0.9823435,0.5257613 0.3597314,0 0.6295299,-0.1383582 0.2697986,-0.1452762 0.546515,-0.4150747 z"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Verdana;-inkscape-font-specification:Verdana;stroke-width:0.66412991px"
+       id="path1148" />
+  </g>
+</svg>
diff --git a/lib/Db/Question.php b/lib/Db/Question.php
index 16dbeb6..8403afb 100644
--- a/lib/Db/Question.php
+++ b/lib/Db/Question.php
@@ -56,6 +56,7 @@ class Question extends Entity {
 		'dropdown',
 		'date',
 		'datetime',
+		'email',
 	];
 
 	public function __construct() {
diff --git a/src/components/Questions/QuestionEmail.vue b/src/components/Questions/QuestionEmail.vue
new file mode 100644
index 0000000..2ac0300
--- /dev/null
+++ b/src/components/Questions/QuestionEmail.vue
@@ -0,0 +1,97 @@
+<!--
+  - @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 short answer for the question “{text}”', { text })"
+				:placeholder="submissionInputPlaceholder"
+				:disabled="!readOnly"
+				:required="mandatory"
+				:value="values[0]"
+				class="question__input"
+				:maxlength="maxStringLengths.answerText"
+				minlength="1"
+				type="email"
+				@input="onInput"
+				@keydown.enter.exact.prevent="onKeydownEnter">
+		</div>
+	</Question>
+</template>
+
+<script>
+import QuestionMixin from '../../mixins/QuestionMixin'
+
+export default {
+	name: 'QuestionEmail',
+
+	mixins: [QuestionMixin],
+
+	computed: {
+		submissionInputPlaceholder() {
+			if (this.readOnly) {
+				return this.answerType.submitPlaceholder
+			}
+			return this.answerType.createPlaceholder
+		},
+	},
+
+	methods: {
+		onInput() {
+			const input = this.$refs.input
+			this.$emit('update:values', [input.value])
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// Using type to have a higher order than the input styling of server
+.question__input[type=email] {
+	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>
diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js
index 3d909af..e07ff7c 100644
--- a/src/models/AnswerTypes.js
+++ b/src/models/AnswerTypes.js
@@ -26,6 +26,7 @@ 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'
 
 /**
  * @typedef {Object} AnswerTypes
@@ -128,4 +129,15 @@ export default {
 		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!'),
+	},
 }