From e8da7a6c17f69edb82d52a3bcd2d38894ea1e89b Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Sat, 17 Oct 2020 16:06:27 +0200
Subject: [PATCH] Moved snackbars to their own store and component

---
 .../ui/components/snackbars/Snackbars.vue     | 41 ++++++++++++++++
 .../ui/components/snackbars/snackboxStore.js  | 47 +++++++++++++++++++
 .../ui/creature/character/CharacterSheet.vue  | 11 ++---
 app/imports/ui/layouts/AppLayout.vue          | 28 ++---------
 app/imports/ui/vuexStore.js                   | 40 +---------------
 5 files changed, 97 insertions(+), 70 deletions(-)
 create mode 100644 app/imports/ui/components/snackbars/Snackbars.vue
 create mode 100644 app/imports/ui/components/snackbars/snackboxStore.js

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 @@
+<template lang="html">
+  <v-snackbar
+    v-if="snackbar"
+    :key="snackbar.text"
+    auto-height
+    bottom
+    :value="true"
+    :timeout="0"
+  >
+    {{ snackbar.text }}
+    <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="$store.dispatch('closeSnackbar')"
+    >
+      <v-icon>close</v-icon>
+    </v-btn>
+  </v-snackbar>
+</template>
+
+<script>
+export default {
+  computed: {
+    snackbar(){
+      return this.$store.state.snackbars.snackbars[0];
+    }
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>
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"
     />
     <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>
+    <snackbars />
   </v-app>
 </template>
 
@@ -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;