remove flash message, switch to global snackbar

frontend/package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@adapttive/vue-markdown": "^4.0.1",
-    "@smartweb/vue-flash-message": "^0.6.10",
     "axios": "^0.21.1",
     "core-js": "^3.9.1",
     "fast-levenshtein": "^3.0.0",
@@ -31,7 +30,7 @@
     "@mdi/font": "^5.9.55",
     "@vue/cli-plugin-babel": "^4.5.11",
     "@vue/cli-plugin-eslint": "^4.5.11",
-    "@vue/cli-service": "^4.1.1",
+    "@vue/cli-service": "^4.5.12",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",

frontend/src/App.vue

@@ -6,14 +6,15 @@
       <v-banner v-if="demo" sticky
         ><div class="text-center"><b> This is a Demo</b> | Username: changeme@email.com | Password: demo</div></v-banner
       >
+      <GlobalSnackbar />
       <router-view></router-view>
     </v-main>
-    <FlashMessage :position="'right bottom'"></FlashMessage>
   </v-app>
 </template>
 
 <script>
 import TheAppBar from "@/components/UI/TheAppBar";
+import GlobalSnackbar from "@/components/UI/GlobalSnackbar";
 import Vuetify from "./plugins/vuetify";
 import { user } from "@/mixins/user";
 
@@ -22,6 +23,7 @@ export default {
 
   components: {
     TheAppBar,
+    GlobalSnackbar,
   },
 
   mixins: [user],
@@ -71,38 +73,6 @@ export default {
 </script>
 
 <style>
-.notify-info-color {
-  border: 1px, solid, var(--v-info-base) !important;
-  border-left: 3px, solid, var(--v-info-base) !important;
-  background-color: var(--v-info-base) !important;
-}
-
-.notify-warning-color {
-  border: 1px, solid, var(--v-warning-base) !important;
-  border-left: 3px, solid, var(--v-warning-base) !important;
-  background-color: var(--v-warning-base) !important;
-}
-
-.notify-error-color {
-  border: 1px, solid, var(--v-error-base) !important;
-  border-left: 3px, solid, var(--v-error-base) !important;
-  background-color: var(--v-error-base) !important;
-}
-
-.notify-success-color {
-  border: 1px, solid, var(--v-success-base) !important;
-  border-left: 3px, solid, var(--v-success-base) !important;
-  background-color: var(--v-success-base) !important;
-}
-
-.notify-base {
-  color: white !important;
-  /* min-height: 50px; */
-  margin-right: 60px;
-  margin-bottom: -5px;
-  opacity: 0.9 !important;
-}
-
 *::-webkit-scrollbar {
   width: 0.25rem;
 }

frontend/src/components/UI/GlobalSnackbar.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="text-center ma-2">
+    <v-snackbar v-model="snackbar.open" top :color="snackbar.color" timeout="3500">
+      {{ snackbar.title }}
+      {{ snackbar.text }}
+
+      <template v-slot:action="{ attrs }">
+        <v-btn text v-bind="attrs" @click="snackbar.open = false">
+          {{ $t("general.cancel") }}
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({}),
+  computed: {
+    snackbar: {
+      set(val) {
+        this.$store.commit("setSnackbar", val);
+      },
+      get() {
+        console.log(this.$store.getters.getSnackbar);
+        return this.$store.getters.getSnackbar;
+      },
+    },
+  },
+};
+</script>

frontend/src/main.js

@@ -5,11 +5,9 @@ import store from "./store";
 import VueRouter from "vue-router";
 import { router } from "./routes";
 import i18n from "./i18n";
-import FlashMessage from "@smartweb/vue-flash-message";
 import "@mdi/font/css/materialdesignicons.css";
 import "typeface-roboto/index.css";
 
-Vue.use(FlashMessage);
 Vue.config.productionTip = false;
 Vue.use(VueRouter);
 

frontend/src/store/index.js

@@ -7,6 +7,7 @@ import language from "./modules/language";
 import siteSettings from "./modules/siteSettings";
 import recipes from "./modules/recipes";
 import groups from "./modules/groups";
+import snackbar from "./modules/snackbar";
 
 Vue.use(Vuex);
 
@@ -22,6 +23,7 @@ const store = new Vuex.Store({
     siteSettings,
     groups,
     recipes,
+    snackbar,
   },
   state: {
     // All Recipe Data Store

frontend/src/store/modules/snackbar.js

@@ -0,0 +1,23 @@
+const state = {
+  snackbar: {
+    open: true,
+    text: "Hello From The Store",
+    color: "info",
+  },
+};
+
+const mutations = {
+  setSnackbar(state, payload) {
+    state.snackbar = payload;
+  },
+};
+
+const getters = {
+  getSnackbar: state => state.snackbar,
+};
+
+export default {
+  state,
+  mutations,
+  getters,
+};

frontend/src/utils/index.js

@@ -1,14 +1,7 @@
-import { vueApp } from "../main";
 import { recipe } from "@/utils/recipe";
+import { store } from "@/store";
 
 // TODO: Migrate to Mixins
-const notifyHelpers = {
-  baseCSS: "notify-base",
-  error: "notify-error-color",
-  warning: "notify-warning-color",
-  success: "notify-success-color",
-  info: "notify-info-color",
-};
 
 export const utils = {
   recipe: recipe,
@@ -27,27 +20,37 @@ export const utils = {
     return `${year}-${month}-${day}`;
   },
   notify: {
-    show: function(text, type = "info", title = null) {
+    info: function(text, title = null) {
-      vueApp.flashMessage.show({
+      store.commit("setSnackbar", {
-        status: type,
+        open: true,
         title: title,
-        message: text,
+        text: text,
-        time: 3000,
+        color: "info",
-        blockClass: `${notifyHelpers.baseCSS} ${notifyHelpers[type]}`,
-        contentClass: `${notifyHelpers.baseCSS} ${notifyHelpers[type]}`,
       });
     },
-    info: function(text, title = null) {
-      this.show(text, "info", title);
-    },
     success: function(text, title = null) {
-      this.show(text, "success", title);
+      store.commit("setSnackbar", {
+        open: true,
+        title: title,
+        text: text,
+        color: "success",
+      });
     },
     error: function(text, title = null) {
-      this.show(text, "error", title);
+      store.commit("setSnackbar", {
+        open: true,
+        title: title,
+        text: text,
+        color: "error",
+      });
     },
     warning: function(text, title = null) {
-      this.show(text, "warning", title);
+      store.commit("setSnackbar", {
+        open: true,
+        title: title,
+        text: text,
+        color: "warning",
+      });
     },
   },
 };