diff --git a/app/imports/ui/creature/character/CharacterSheet.vue b/app/imports/ui/creature/character/CharacterSheet.vue index 932794c2..070f5919 100644 --- a/app/imports/ui/creature/character/CharacterSheet.vue +++ b/app/imports/ui/creature/character/CharacterSheet.vue @@ -58,20 +58,6 @@ - - {{ snackbar.text.split(/\n+/).pop() }} - - close - - @@ -140,10 +126,9 @@ if (that.$store.state.rightDrawer) return; if (that.snackbars.some(o => o._id === doc._id)) return; doc.open = true; - that.snackbars.push(doc); - setTimeout(function(){ - that.snackbars = that.snackbars.filter(bar => bar._id === doc._id); - }, 8000); + that.$store.commit('snackbar', { + doc + }); }, }); }, diff --git a/app/imports/ui/layouts/AppLayout.vue b/app/imports/ui/layouts/AppLayout.vue index 22f95294..fae76472 100644 --- a/app/imports/ui/layouts/AppLayout.vue +++ b/app/imports/ui/layouts/AppLayout.vue @@ -67,6 +67,31 @@ name="rightDrawer" /> + + {{ snackbar.text.split(/\n+/).pop() }} + + {{ snackbar.callbackName }} + + + close + + diff --git a/app/imports/ui/vuexStore.js b/app/imports/ui/vuexStore.js index a9050040..5cafd273 100644 --- a/app/imports/ui/vuexStore.js +++ b/app/imports/ui/vuexStore.js @@ -12,6 +12,8 @@ const store = new Vuex.Store({ drawer: undefined, rightDrawer: undefined, pageTitle: undefined, + snackbars: [], + snackbarTimout: undefined, }, mutations: { toggleDrawer (state) { @@ -30,7 +32,43 @@ const store = new Vuex.Store({ state.pageTitle = value; document.title = value; }, + addSnackbar(state, value){ + value.open = true; + state.snackbars.push(value) + }, + closeCurrentSnackbar (state){ + state.snackbars.shift(); + }, + cancelSnackbarTimeout (state){ + if(state.snackbarTimout){ + clearTimeout(state.snackbarTimout); + } + }, + setSnackbarTimout(state, value){ + state.snackbarTimout = value; + }, }, + actions: { + snackbar({commit}, value){ + // value = { + // text, + // showCloseButton, + // callback, + // callbackName + // } + commit('addSnackbar', value); + }, + closeSnackbar({dispatch, commit, state}){ + commit('closeCurrentSnackbar'); + commit('cancelSnackbarTimeout'); + if (state.snackbars.length){ + commit('setSnackbarTimout'); + state.snackbarTimout = setTimeout(() => { + dispatch('closeSnackbar'); + }, 5000); + } + }, + } }); export default store;