Add delete action component with undelete

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

6 files changed, 132 insertions, 77 deletions

diff --git a/src/js/components/Actions/ActionDelete.vue b/src/js/components/Actions/ActionDelete.vue
new file mode 100644
index 00000000..6ace310d
--- /dev/null
+++ b/src/js/components/Actions/ActionDelete.vue
@@ -0,0 +1,89 @@
+<!--
+  - @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>
+	<Actions>
+		<ActionButton v-if="deleteTimeout" icon="icon-history" @click="cancelDelete()">
+			{{ n('polls', 'Deleting in {countdown} second', 'Deleting in {countdown} seconds', countdown, { countdown }) }}
+		</ActionButton>
+		<ActionButton v-else icon="icon-delete" @click="deleteItem()">
+			{{ deleteCaption }}
+		</ActionButton>
+	</Actions>
+</template>
+
+<script>
+import { Actions, ActionButton } from '@nextcloud/vue'
+
+export default {
+	name: 'ActionDelete',
+	components: {
+		Actions,
+		ActionButton,
+	},
+
+	props: {
+		useTimeOut: {
+			type: Number,
+			default: 7,
+		},
+		deleteCaption: {
+			type: String,
+			default: t('polls', 'Delete'),
+		},
+	},
+
+	data() {
+		return {
+			deleteInterval: null,
+			deleteTimeout: null,
+			countdown: 7,
+		}
+	},
+
+	methods: {
+		deleteItem() {
+			this.countDown = this.useTimeOut
+			this.deleteInterval = setInterval(() => {
+				this.countdown -= 1
+				if (this.countdown < 0) {
+					this.countdown = 0
+				}
+			}, 1000)
+			this.deleteTimeout = setTimeout(async() => {
+				this.$emit('delete')
+				this.deleteTimeout = null
+				this.deleteInterval = null
+				this.countdown = this.useTimeOut
+			}, this.useTimeOut * 1000)
+		},
+
+		cancelDelete() {
+			clearTimeout(this.deleteTimeout)
+			clearInterval(this.deleteInterval)
+			this.deleteTimeout = null
+			this.deleteInterval = null
+			this.countdown = this.useTimeOut
+		},
+	},
+}
+</script>
diff --git a/src/js/components/Comments/CommentItem.vue b/src/js/components/Comments/CommentItem.vue
index 754ebdac..661ccb8b 100644
--- a/src/js/components/Comments/CommentItem.vue
+++ b/src/js/components/Comments/CommentItem.vue
@@ -30,28 +30,22 @@
 				{{ comment.comment }}
 			</div>
 		</div>
-		<Actions v-if="comment.userId === acl.userId || acl.isOwner">
-			<ActionButton v-if="deleteTimeout" icon="icon-history" @click="cancelDeleteComment()">
-				{{ n('polls', 'Deleting in {countdown} second', 'Deleting in {countdown} seconds', countdown, { countdown }) }}
-			</ActionButton>
-			<ActionButton v-else icon="icon-delete" @click="deleteComment()">
-				{{ t('polls', 'Delete comment') }}
-			</ActionButton>
-		</Actions>
+		<ActionDelete v-if="comment.userId === acl.userId || acl.isOwner"
+			:delete-caption="t('polls', 'Delete comment')"
+			@delete="deleteComment()" />
 	</div>
 </template>
 
 <script>
 import moment from '@nextcloud/moment'
 import { showError } from '@nextcloud/dialogs'
-import { Actions, ActionButton } from '@nextcloud/vue'
 import { mapState } from 'vuex'
+import ActionDelete from '../Actions/ActionDelete'
 
 export default {
 	name: 'CommentItem',
 	components: {
-		Actions,
-		ActionButton,
+		ActionDelete,
 	},
 
 	props: {
@@ -79,25 +73,12 @@ export default {
 	},
 
 	methods: {
-		deleteComment() {
-			this.deleteInterval = setInterval(() => {
-				this.countdown -= 1
-				if (this.countdown < 0) {
-					this.countdown = 0
-				}
-			}, 1000)
-			this.deleteTimeout = setTimeout(async() => {
-				try {
-					await this.$store.dispatch({ type: 'comments/delete', comment: this.comment })
-				} catch {
-					showError(t('polls', 'Error while deleting the comment'))
-				} finally {
-					clearInterval(this.deleteInterval)
-					this.deleteTimeout = null
-					this.deleteInterval = null
-					this.countdown = 7
-				}
-			}, 7000)
+		async deleteComment() {
+			try {
+				await this.$store.dispatch({ type: 'comments/delete', comment: this.comment })
+			} catch {
+				showError(t('polls', 'Error while deleting the comment'))
+			}
 		},
 
 		cancelDeleteComment() {
diff --git a/src/js/components/Options/OptionItemOwner.vue b/src/js/components/Options/OptionItemOwner.vue
index cb9527a8..fe2cfc8d 100644
--- a/src/js/components/Options/OptionItemOwner.vue
+++ b/src/js/components/Options/OptionItemOwner.vue
@@ -22,11 +22,10 @@
 
 <template>
 	<div class="option-item-owner">
-		<Actions v-if="!acl.allowEdit && acl.userId === option.owner" class="action">
-			<ActionButton icon="icon-delete" @click="removeOption(option)">
-				{{ t('polls', 'Delete your proposal') }}
-			</ActionButton>
-		</Actions>
+		<ActionDelete v-if="!acl.allowEdit && acl.userId === option.owner"
+			:delete-caption="t('polls', 'Delete option')"
+			@delete="removeOption(option)" />
+
 		<Avatar v-else-if="option.owner && option.owner !== pollOwner"
 			:user="option.owner"
 			:display-name="option.ownerDisplayName"
@@ -39,16 +38,16 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Actions, ActionButton, Avatar } from '@nextcloud/vue'
+import { Avatar } from '@nextcloud/vue'
 import { removeOption } from '../../mixins/optionMixins'
+import ActionDelete from '../Actions/ActionDelete'
 
 export default {
 	name: 'OptionItemOwner',
 
 	components: {
 		Avatar,
-		Actions,
-		ActionButton,
+		ActionDelete,
 	},
 
 	mixins: [
diff --git a/src/js/components/Options/OptionsDate.vue b/src/js/components/Options/OptionsDate.vue
index 18c8688c..0765843b 100644
--- a/src/js/components/Options/OptionsDate.vue
+++ b/src/js/components/Options/OptionsDate.vue
@@ -37,12 +37,9 @@
 						class="owner" />
 				</template>
 				<template #actions>
-					<Actions v-if="acl.allowEdit" class="action">
-						<ActionButton icon="icon-delete" @click="removeOption(option)">
-							{{ t('polls', 'Delete option') }}
-						</ActionButton>
-					</Actions>
-
+					<ActionDelete v-if="acl.allowEdit"
+						:delete-caption="t('polls', 'Delete option')"
+						@delete="removeOption(option)" />
 					<Actions v-if="acl.allowEdit" class="action">
 						<ActionButton v-if="!pollIsClosed" icon="icon-polls-clone" @click="cloneOptionModal(option)">
 							{{ t('polls', 'Clone option') }}
@@ -74,6 +71,7 @@
 import { mapGetters, mapState } from 'vuex'
 import moment from '@nextcloud/moment'
 import { Actions, ActionButton, EmptyContent, Modal } from '@nextcloud/vue'
+import ActionDelete from '../Actions/ActionDelete'
 import OptionCloneDate from './OptionCloneDate'
 import OptionsDateAdd from './OptionsDateAdd'
 import OptionItem from './OptionItem'
@@ -87,6 +85,7 @@ export default {
 	components: {
 		Actions,
 		ActionButton,
+		ActionDelete,
 		EmptyContent,
 		Modal,
 		OptionCloneDate,
diff --git a/src/js/components/Options/OptionsText.vue b/src/js/components/Options/OptionsText.vue
index 81c0f793..5a09dbe2 100644
--- a/src/js/components/Options/OptionsText.vue
+++ b/src/js/components/Options/OptionsText.vue
@@ -36,11 +36,9 @@
 							class="owner" />
 					</template>
 					<template #actions>
-						<Actions v-if="acl.allowEdit" class="action">
-							<ActionButton icon="icon-delete" @click="removeOption(option)">
-								{{ t('polls', 'Delete option') }}
-							</ActionButton>
-						</Actions>
+						<ActionDelete v-if="acl.allowEdit"
+							:delete-caption="t('polls', 'Delete option')"
+							@delete="removeOption(option)" />
 						<Actions v-if="acl.allowEdit" class="action">
 							<ActionButton v-if="pollIsClosed"
 								:icon="option.confirmed ? 'icon-polls-yes' : 'icon-checkmark'"
@@ -66,6 +64,7 @@
 import { mapGetters, mapState } from 'vuex'
 import { Actions, ActionButton, EmptyContent } from '@nextcloud/vue'
 import draggable from 'vuedraggable'
+import ActionDelete from '../Actions/ActionDelete'
 import OptionItem from './OptionItem'
 import OptionItemOwner from '../Options/OptionItemOwner'
 import OptionsTextAdd from './OptionsTextAdd'
@@ -77,6 +76,7 @@ export default {
 	components: {
 		Actions,
 		ActionButton,
+		ActionDelete,
 		EmptyContent,
 		draggable,
 		OptionItem,
diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue
index 961cc723..04d58fe9 100644
--- a/src/js/components/VoteTable/VoteTable.vue
+++ b/src/js/components/VoteTable/VoteTable.vue
@@ -30,13 +30,14 @@
 				v-bind="participant"
 				:class="{currentuser: (participant.userId === acl.userId) }">
 				<UserMenu v-if="participant.userId === acl.userId" />
-				<Actions v-if="acl.allowEdit" class="action">
-					<ActionButton icon="icon-delete" @click="confirmDelete(participant.userId)">
-						{{ t('polls', 'Delete votes') }}
-					</ActionButton>
-				</Actions>
+
+				<ActionDelete v-if="acl.allowEdit"
+					:delete-caption="t('polls', 'Delete votes')"
+					@delete="removeUser(participant.userId)" />
 			</UserItem>
+
 			<div v-if="proposalsExist" class="owner" />
+
 			<div v-if="acl.allowEdit && closed" class="confirm" />
 		</div>
 
@@ -52,13 +53,16 @@
 					:counter-style="viewMode === 'table-view' ? 'iconStyle' : 'barStyle'"
 					:show-no="viewMode === 'list-view'" />
 				<CalendarPeek v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek" :option="option" />
+
 				<div v-for="(participant) in participants"
 					:key="participant.userId"
 					class="vote-item-wrapper"
 					:class="{currentuser: participant.userId === acl.userId}">
 					<VoteItem :user-id="participant.userId" :option="option" />
 				</div>
+
 				<OptionItemOwner v-if="proposalsExist" :option="option" class="owner" />
+
 				<Actions v-if="acl.allowEdit && closed" class="action confirm">
 					<ActionButton v-if="closed"
 						:icon="option.confirmed ? 'icon-polls-confirmed' : 'icon-polls-unconfirmed'"
@@ -68,24 +72,14 @@
 				</Actions>
 			</div>
 		</transition-group>
-
-		<Modal v-if="modal">
-			<div class="modal__content">
-				<h2>{{ t('polls', 'Do you want to remove {username} from poll?', { username: userToRemove }) }}</h2>
-				<div class="modal__buttons">
-					<ButtonDiv :title="t('polls', 'No')" @click="modal = false" />
-					<ButtonDiv :primary="true" :title="t('polls', 'Yes')" @click="removeUser()" />
-				</div>
-			</div>
-		</Modal>
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { showSuccess } from '@nextcloud/dialogs'
-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
-import ButtonDiv from '../Base/ButtonDiv'
+import { Actions, ActionButton } from '@nextcloud/vue'
+import ActionDelete from '../Actions/ActionDelete'
 import CalendarPeek from '../Calendar/CalendarPeek'
 import Counter from '../Options/Counter'
 import Confirmation from '../Options/Confirmation'
@@ -100,11 +94,10 @@ export default {
 	components: {
 		Actions,
 		ActionButton,
-		ButtonDiv,
+		ActionDelete,
 		CalendarPeek,
 		Counter,
 		Confirmation,
-		Modal,
 		UserMenu,
 		VoteTableHeaderItem,
 		VoteItem,
@@ -146,17 +139,11 @@ export default {
 	},
 
 	methods: {
-		async removeUser() {
-			this.modal = false
-			await this.$store.dispatch('votes/deleteUser', { userId: this.userToRemove })
-			showSuccess(t('polls', 'User {userId} removed', { userId: this.userToRemove }))
-			this.userToRemove = ''
+		async removeUser(userId) {
+			await this.$store.dispatch('votes/deleteUser', { userId })
+			showSuccess(t('polls', 'User {userId} removed', { userId }))
 		},
 
-		confirmDelete(userId) {
-			this.userToRemove = userId
-			this.modal = true
-		},
 	},
 }
 </script>