Add undo button to notification when marking a task as done
This commit is contained in:
parent
a4acfb5ef2
commit
5972476735
6 changed files with 92 additions and 34 deletions
|
@ -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,
|
||||
|
|
39
src/components/global/notification.vue
Normal file
39
src/components/global/notification.vue
Normal 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>
|
|
@ -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)
|
||||
|
|
|
@ -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') {
|
||||
|
|
|
@ -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),
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -8,36 +8,40 @@ export default {
|
|||
context.loading = false
|
||||
};
|
||||
},
|
||||
error(e, context) {
|
||||
// Build the notification text from error response
|
||||
let err = e.message
|
||||
if (e.response && e.response.data && e.response.data.message) {
|
||||
err += '<br/>' + e.response.data.message
|
||||
}
|
||||
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) {
|
||||
err += '<br/>' + e.response.data.message
|
||||
}
|
||||
|
||||
// Fire a notification
|
||||
context.$notify({
|
||||
type: 'error',
|
||||
title: 'Error',
|
||||
text: err
|
||||
})
|
||||
// Fire a notification
|
||||
context.$notify({
|
||||
type: 'error',
|
||||
title: 'Error',
|
||||
text: err,
|
||||
actions: actions,
|
||||
})
|
||||
|
||||
context.loading = false
|
||||
},
|
||||
success(e, context) {
|
||||
// Build the notification text from error response
|
||||
let err = e.message
|
||||
if (e.response && e.response.data && e.response.data.message) {
|
||||
err += '<br/>' + e.response.data.message
|
||||
}
|
||||
},
|
||||
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) {
|
||||
err += '<br/>' + e.response.data.message
|
||||
}
|
||||
|
||||
// Fire a notification
|
||||
context.$notify({
|
||||
type: 'success',
|
||||
title: 'Success',
|
||||
text: err
|
||||
})
|
||||
// Fire a notification
|
||||
context.$notify({
|
||||
type: 'success',
|
||||
title: 'Success',
|
||||
text: err,
|
||||
data: {
|
||||
actions: actions,
|
||||
},
|
||||
})
|
||||
|
||||
context.loading = false
|
||||
},
|
||||
},
|
||||
}
|
Loading…
Reference in a new issue