Add undo button to notification when marking a task as done

This commit is contained in:
kolaente 2020-03-02 21:19:26 +01:00
parent a4acfb5ef2
commit 5972476735
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
6 changed files with 92 additions and 34 deletions

View file

@ -184,7 +184,7 @@
</div>
</div>
</div>
<notifications position="bottom left"/>
<notification/>
</div>
<div class="app offline" v-else>
<div class="offline-message">
@ -203,10 +203,11 @@
import authTypes from './models/authTypes'
import swEvents from './ServiceWorker/events'
import Notification from "./components/global/notification";
export default {
name: 'app',
components: {Notification},
data() {
return {
user: auth.user,

View file

@ -0,0 +1,39 @@
<template>
<notifications position="bottom left">
<template slot="body" slot-scope="props">
<div :class="['vue-notification-template', 'vue-notification', props.item.type]">
<div
v-if="props.item.title"
class="notification-title"
v-html="props.item.title"
>
</div>
<div
class="notification-content"
v-html="props.item.text"
>
</div>
<div class="buttons is-right" v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
<button
class="button noshadow is-small"
@click="action.callback"
v-for="(action, i) in props.item.data.actions" :key="'action_'+i">
{{ action.title }}
</button>
</div>
</div>
</template>
</notifications>
</template>
<script>
export default {
name: 'notification'
}
</script>
<style scoped>
.buttons {
margin-top: .5em;
}
</style>

View file

@ -259,7 +259,14 @@
this.taskService.update(task)
.then(() => {
this.sortTasks()
this.success({message: 'The task was successfully ' + (task.done ? '' : 'un-') + 'marked as done.'}, this)
this.success(
{message: 'The task was successfully ' + (task.done ? '' : 'un-') + 'marked as done.'},
this,
[{
title: 'Undo',
callback: () => this.markAsDone({target: {id: e.target.id, checked: !e.target.checked}}),
}]
)
})
.catch(e => {
this.error(e, this)

View file

@ -414,7 +414,7 @@
this.taskTitle = taskTitle
}
},
saveTask() {
saveTask(undoCallback = null) {
// If no end date is being set, but a start date and due date,
// use the due date as the end date
@ -425,7 +425,14 @@
this.taskService.update(this.task)
.then(r => {
this.$set(this, 'task', r)
this.success({message: 'The task was saved successfully.'}, this)
let actions = []
if (undoCallback !== null) {
actions = [{
title: 'Undo',
callback: undoCallback,
}]
}
this.success({message: 'The task was saved successfully.'}, this, actions)
this.setActiveFields()
})
.catch(e => {
@ -460,7 +467,7 @@
},
toggleTaskDone() {
this.task.done = !this.task.done
this.saveTask()
this.saveTask(() => this.toggleTaskDone())
},
setDescriptionChanged(e) {
if (e.key === 'Enter' || e.key === 'Control') {

View file

@ -138,8 +138,8 @@ Vue.mixin({
methods: {
formatDateSince: date => moment(date).fromNow(),
formatDate: date => moment(date).format('LLL'),
error: (e, context) => message.error(e, context),
success: (s, context) => message.success(s, context),
error: (e, context, actions = []) => message.error(e, context, actions),
success: (s, context, actions = []) => message.success(s, context, actions),
}
})

View file

@ -8,7 +8,7 @@ export default {
context.loading = false
};
},
error(e, context) {
error(e, context, actions = []) {
// Build the notification text from error response
let err = e.message
if (e.response && e.response.data && e.response.data.message) {
@ -19,12 +19,13 @@ export default {
context.$notify({
type: 'error',
title: 'Error',
text: err
text: err,
actions: actions,
})
context.loading = false
},
success(e, context) {
success(e, context, actions = []) {
// Build the notification text from error response
let err = e.message
if (e.response && e.response.data && e.response.data.message) {
@ -35,7 +36,10 @@ export default {
context.$notify({
type: 'success',
title: 'Success',
text: err
text: err,
data: {
actions: actions,
},
})
context.loading = false