Started moving snackbars to vue store, still needs to be separated into its own module

app/imports/ui/creature/character/CharacterSheet.vue

@@ -58,20 +58,6 @@
         </v-tabs-items>
       </div>
     </v-fade-transition>
-    <v-snackbar
-      v-for="snackbar in snackbars"
-      :key="snackbar._id"
-      :value="snackbar.open"
-    >
-      {{ snackbar.text.split(/\n+/).pop() }}
-      <v-btn
-        flat
-        icon
-        @click="snackbar.open = false"
-      >
-        <v-icon>close</v-icon>
-      </v-btn>
-    </v-snackbar>
   </div>
 </template>
 
@@ -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
+          });
         },
       });
     },

app/imports/ui/layouts/AppLayout.vue

@@ -67,6 +67,31 @@
       name="rightDrawer"
     />
     <dialog-stack />
+    <v-snackbar
+      v-for="snackbar in snackbars"
+      :key="snackbar._id"
+      :value="snackbar.open"
+      auto-height
+      bottom
+    >
+      {{ snackbar.text.split(/\n+/).pop() }}
+      <v-btn
+        v-if="snackbar.callback"
+        flat
+        icon
+        @click="snackbar.callback"
+      >
+        <v-icon>{{ snackbar.callbackName }}</v-icon>
+      </v-btn>
+      <v-btn
+        v-if="snackbar.showCloseButton"
+        flat
+        icon
+        @click="snackbar.open = false"
+      >
+        <v-icon>close</v-icon>
+      </v-btn>
+    </v-snackbar>
   </v-app>
 </template>
 

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;