diff options
author | Raimund Schlüßler <raimund.schluessler@mailbox.org> | 2020-03-06 22:32:28 +0300 |
---|---|---|
committer | Raimund Schlüßler <raimund.schluessler@mailbox.org> | 2020-03-06 22:32:28 +0300 |
commit | d0bc6e06a2ad844c67a1d36d8c409b9ff7a182be (patch) | |
tree | d4487e6bf9f7e45270554903400d15c66f226f3e /src | |
parent | 75bc10497c0b5aac773fb723ca9f5ab46203afed (diff) |
Add undo delete task
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/TaskBody.vue | 66 |
1 files changed, 54 insertions, 12 deletions
diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue index 2f12098b..809f5ef6 100644 --- a/src/components/TaskBody.vue +++ b/src/components/TaskBody.vue @@ -23,7 +23,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>. <template> <li v-show="showTask" :task-id="task.uri" - :class="{done: task.completed, readOnly: task.calendar.readOnly}" + :class="{done: task.completed, readOnly: task.calendar.readOnly, deleted: !!deleteTimeout}" :data-priority="[task.priority]" class="task-item" @dragstart="dragStart($event)"> @@ -85,7 +85,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>. <div v-if="task.due" :class="{overdue: overdue(task.dueMoment)}" class="duedate"> <span>{{ dueDateString }}</span> </div> - <Actions class="reactive no-nav" menu-align="right"> + <Actions v-if="!deleteTimeout" class="reactive no-nav" menu-align="right"> <ActionButton v-if="!task.calendar.readOnly" :close-after-click="true" class="reactive no-nav" @@ -108,10 +108,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>. <ActionButton v-if="!readOnly" class="reactive no-nav" icon="icon-delete" - @click="removeTask()"> + @click="scheduleDelete"> {{ $t('tasks', 'Delete task') }} </ActionButton> </Actions> + <Actions v-if="!!deleteTimeout"> + <ActionButton + icon="icon-history" + @click.prevent.stop="cancelDelete"> + {{ $n('tasks', 'Deleting the task in {countdown} second', 'Deleting the task in {countdown} seconds', countdown, { countdown: countdown }) }} + </ActionButton> + </Actions> <button class="inline task-star reactive no-nav" @click="toggleStarred(task)"> <span :class="[iconStar, {'disabled': task.calendar.readOnly}]" class="icon" /> </button> @@ -154,6 +161,8 @@ import TaskDragContainer from './TaskDragContainer' import Actions from '@nextcloud/vue/dist/Components/Actions' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' +const CD_DURATION = 7 + export default { name: 'TaskBody', directives: { @@ -183,6 +192,10 @@ export default { justOpened: false, newTaskName: '', isAddingTask: false, + // Deleting + deleteInterval: null, + deleteTimeout: null, + countdown: CD_DURATION, } }, computed: { @@ -370,16 +383,45 @@ export default { /** * Deletes the task */ - removeTask() { - // Close the details view if necessary - if (this.isTaskOpen() || this.isDescendantOpen()) { - if (this.$route.params.calendarId) { - this.$router.push({ name: 'calendars', params: { calendarId: this.$route.params.calendarId } }) - } else { - this.$router.push({ name: 'collections', params: { collectionId: this.$route.params.collectionId } }) + scheduleDelete() { + this.deleteInterval = setInterval(() => { + this.countdown-- + if (this.countdown < 0) { + this.countdown = 0 } - } - this.deleteTask({ task: this.task, dav: true }) + }, 1000) + this.deleteTimeout = setTimeout(async() => { + try { + // Close the details view if necessary + if (this.isTaskOpen() || this.isDescendantOpen()) { + if (this.$route.params.calendarId) { + this.$router.push({ name: 'calendars', params: { calendarId: this.$route.params.calendarId } }) + } else { + this.$router.push({ name: 'collections', params: { collectionId: this.$route.params.collectionId } }) + } + } + await this.deleteTask({ task: this.task, dav: true }) + } catch (error) { + this.$toast.error(this.$t('tasks', 'An error occurred, unable to delete the task.')) + console.error(error) + } finally { + clearInterval(this.deleteInterval) + this.deleteTimeout = null + this.deleteInterval = null + this.countdown = CD_DURATION + } + }, 1e3 * CD_DURATION) + }, + + /** + * Cancels the deletion of the task + */ + cancelDelete() { + clearTimeout(this.deleteTimeout) + clearInterval(this.deleteInterval) + this.deleteTimeout = null + this.deleteInterval = null + this.countdown = CD_DURATION }, /** |