diff --git a/app/imports/ui/components/snackbars/Snackbars.vue b/app/imports/ui/components/snackbars/Snackbars.vue
new file mode 100644
index 00000000..6f3907fb
--- /dev/null
+++ b/app/imports/ui/components/snackbars/Snackbars.vue
@@ -0,0 +1,41 @@
+
+
+ {{ snackbar.text }}
+
+ {{ snackbar.callbackName }}
+
+
+ close
+
+
+
+
+
+
+
diff --git a/app/imports/ui/components/snackbars/snackboxStore.js b/app/imports/ui/components/snackbars/snackboxStore.js
new file mode 100644
index 00000000..9ea306ef
--- /dev/null
+++ b/app/imports/ui/components/snackbars/snackboxStore.js
@@ -0,0 +1,47 @@
+const snackbarStore = {
+ state: {
+ snackbars: [],
+ snackbarTimout: undefined,
+ },
+ mutations: {
+ addSnackbar(state, value){
+ 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({dispatch, commit}, value){
+ // value = {
+ // text,
+ // showCloseButton,
+ // callback,
+ // callbackName
+ // }
+ commit('addSnackbar', value);
+ commit('setSnackbarTimout', setTimeout(() => {
+ dispatch('closeSnackbar');
+ }, 5000));
+ },
+ closeSnackbar({dispatch, commit, state}){
+ commit('closeCurrentSnackbar');
+ commit('cancelSnackbarTimeout');
+ if (state.snackbars.length){
+ commit('setSnackbarTimout', setTimeout(() => {
+ dispatch('closeSnackbar');
+ }, 5000));
+ }
+ },
+ }
+};
+
+export default snackbarStore;
diff --git a/app/imports/ui/creature/character/CharacterSheet.vue b/app/imports/ui/creature/character/CharacterSheet.vue
index 070f5919..fa3b7898 100644
--- a/app/imports/ui/creature/character/CharacterSheet.vue
+++ b/app/imports/ui/creature/character/CharacterSheet.vue
@@ -93,9 +93,6 @@
required: true,
},
},
- data(){return {
- snackbars: [],
- }},
reactiveProvide: {
name: 'context',
include: ['creature', 'editPermission'],
@@ -124,10 +121,10 @@
added(doc){
if (!that.$subReady.singleCharacter) return;
if (that.$store.state.rightDrawer) return;
- if (that.snackbars.some(o => o._id === doc._id)) return;
- doc.open = true;
- that.$store.commit('snackbar', {
- doc
+ if (that.$store.state.snackbars.snackbars.some(o => o._id === doc._id)) return;
+ that.$store.dispatch('snackbar', {
+ text: doc.text,
+ showCloseButton: true,
});
},
});
diff --git a/app/imports/ui/layouts/AppLayout.vue b/app/imports/ui/layouts/AppLayout.vue
index fae76472..3bcf8676 100644
--- a/app/imports/ui/layouts/AppLayout.vue
+++ b/app/imports/ui/layouts/AppLayout.vue
@@ -67,31 +67,7 @@
name="rightDrawer"
/>
-
- {{ snackbar.text.split(/\n+/).pop() }}
-
- {{ snackbar.callbackName }}
-
-
- close
-
-
+
@@ -101,11 +77,13 @@
import DialogStack from '/imports/ui/dialogStack/DialogStack.vue';
import { theme, darkTheme } from '/imports/ui/theme.js';
import { mapMutations } from 'vuex';
+ import Snackbars from '/imports/ui/components/snackbars/Snackbars.vue';
export default {
components: {
Sidebar,
DialogStack,
+ Snackbars,
},
data(){return {
name: 'Home',
diff --git a/app/imports/ui/vuexStore.js b/app/imports/ui/vuexStore.js
index 5cafd273..605832fb 100644
--- a/app/imports/ui/vuexStore.js
+++ b/app/imports/ui/vuexStore.js
@@ -1,19 +1,19 @@
import Vue from 'vue';
import Vuex from 'vuex';
import dialogStackStore from '/imports/ui/dialogStack/dialogStackStore.js';
+import snackbarStore from '/imports/ui/components/snackbars/snackboxStore.js';
Vue.use(Vuex);
const store = new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
modules: {
dialogStack: dialogStackStore,
+ snackbars: snackbarStore,
},
state: {
drawer: undefined,
rightDrawer: undefined,
pageTitle: undefined,
- snackbars: [],
- snackbarTimout: undefined,
},
mutations: {
toggleDrawer (state) {
@@ -32,43 +32,7 @@ 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;