frontend implementation

Signed-off-by: dartcafe <github@dartcafe.de>

2 files changed, 115 insertions, 17 deletions

diff --git a/src/js/components/Actions/ActionSendConfirmedOptions.vue b/src/js/components/Actions/ActionSendConfirmedOptions.vue
new file mode 100644
index 00000000..d2c48d06
--- /dev/null
+++ b/src/js/components/Actions/ActionSendConfirmedOptions.vue
@@ -0,0 +1,115 @@
+<!--
+  - @copyright Copyright (c) 2021 René Gieling <github@dartcafe.de>
+  -
+  - @author René Gieling <github@dartcafe.de>
+  -
+  - @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>
+	<div class="action send-confirmations">
+		<div class="confirmation-button">
+			<h2>{{ headerCaption }}</h2>
+			<VueButton v-tooltip="caption" @click="clickAction()">
+				<template #icon>
+					<EmailCheckIcon />
+				</template>
+				{{ t('polls', 'Send Confirmation mails') }}
+			</VueButton>
+		</div>
+		<div v-if="confirmations" class="confirmation-info">
+			<div v-if="confirmations.sent" class="sent-confirmations">
+				<h2>{{ t('polls', 'Sent mails to:') }}</h2>
+				<ul>
+					<li v-for="(item) in confirmations.sent" :key="item">
+						{{ item }}
+					</li>
+				</ul>
+			</div>
+			<div v-if="confirmations.error" class="error-confirmations">
+				<h2>{{ t('polls', 'Mails could not be sent:') }}</h2>
+				<ul>
+					<li v-for="(item) in confirmations.error" :key="item">
+						{{ item }}
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Button as VueButton } from '@nextcloud/vue'
+import EmailCheckIcon from 'vue-material-design-icons/EmailCheck.vue' // view-comfy-outline
+import { showError, showSuccess } from '@nextcloud/dialogs'
+
+export default {
+	name: 'ActionSendConfirmedOptions',
+
+	components: {
+		EmailCheckIcon,
+		VueButton,
+	},
+
+	data() {
+		return {
+			caption: t('polls', 'Send information about confirmed options per mail'),
+			confirmations: null,
+			headerCaption: t('polls', 'Inform your participants about the confirmed options'),
+		}
+	},
+
+	methods: {
+		async clickAction() {
+			this.confirmations = await this.$store.dispatch('poll/sendConfirmation')
+			this.headerCaption = t('polls', 'Confirmations processed')
+			this.confirmations.sent.forEach((confirmation) => {
+				showSuccess(t('polls', `Confirmation sent to ${confirmation}`))
+			})
+			this.confirmations.error.forEach((confirmation) => {
+				showError(t('polls', `Confirmation could not be sent to ${confirmation}`))
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.action.send-confirmations {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 44px;
+}
+
+.confirmation-result {
+	display: flex;
+}
+
+.confirmation-info {
+	display: flex;
+	flex-wrap: wrap;
+	flex: auto;
+	gap: 12px;
+}
+
+.sent-confirmations {
+	flex: auto;
+}
+.error-confirmations {
+	flex: auto;
+}
+</style>
diff --git a/src/js/components/Configuration/ConfigClosing.vue b/src/js/components/Configuration/ConfigClosing.vue
index b7529c07..925fbbeb 100644
--- a/src/js/components/Configuration/ConfigClosing.vue
+++ b/src/js/components/Configuration/ConfigClosing.vue
@@ -29,12 +29,6 @@
 			</template>
 			{{ closed ? t('polls', 'Reopen poll'): t('polls', 'Close poll') }}
 		</VueButton>
-		<VueButton @click="sendConfirmation()">
-			<template #icon>
-				<OpenPollIcon v-if="closed" />
-			</template>
-			{{ t('polls', 'Send Confirmation') }}
-		</VueButton>
 		<CheckboxRadioSwitch v-show="!closed" :checked.sync="useExpire" type="switch">
 			{{ t('polls', 'Poll closing date') }}
 		</CheckboxRadioSwitch>
@@ -44,7 +38,6 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 import { Button as VueButton, DatetimePicker, CheckboxRadioSwitch } from '@nextcloud/vue'
 import OpenPollIcon from 'vue-material-design-icons/LockOpenVariant.vue'
@@ -127,16 +120,6 @@ export default {
 			this.$emit('change')
 
 		},
-
-		async sendConfirmation() {
-			const confirmations = await this.$store.dispatch('poll/sendConfirmation')
-			confirmations.sent.forEach((confirmation) => {
-				showSuccess(t('polls', `Confirmation sent to ${confirmation}`))
-			})
-			confirmations.error.forEach((confirmation) => {
-				showError(t('polls', `Confirmation could not be sent to ${confirmation}`))
-			})
-		},
 	},
 }
 </script>