unified notifications

frontend/src/App.vue

@@ -63,11 +63,6 @@ export default {
     this.$store.dispatch("initLang");
     this.darkModeSystemCheck();
     this.darkModeAddEventListener();
-
-    this.flashMessage.success({
-      title: "Success Message Title",
-      message: "Hoorah, it is my fist npm package and it works!",
-    });
   },
 
   data: () => ({
@@ -100,4 +95,34 @@ 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;
+  margin-right: 60px;
+  margin-bottom: -5px;
+  opacity: 0.9 !important;
+}
 </style>

frontend/src/api/api-utils.js

@@ -1,20 +1,14 @@
 const baseURL = "/api/";
 import axios from "axios";
-import { vueApp } from "../main";
+import utils from "../utils";
-
 // look for data.snackbar in response
 function processResponse(response) {
   try {
-    vueApp.flashMessage.show({
+    utils.notify.show(response.data.snackbar.text, response.data.snackbar.type);
-      status: response.data.snackbar.type,
-      title: 'Error Message Title',
-      message: response.data.snackbar.text
-    });
   } catch (err) {
     return;
   }
 
-
   return;
 }
 
@@ -37,7 +31,7 @@ const apiReq = {
         return response;
       } else return;
     });
-    // processResponse(response);
+    processResponse(response);
     return response;
   },
 

frontend/src/api/themes.js

@@ -1,14 +1,14 @@
 import { baseURL } from "./api-utils";
 import { apiReq } from "./api-utils";
 
-const prefix = baseURL + "themes/";
+const prefix = baseURL + "themes";
 
 const settingsURLs = {
   allThemes: `${baseURL}themes`,
-  specificTheme: themeName => `${prefix}${themeName}`,
+  specificTheme: themeName => `${prefix}/${themeName}`,
-  createTheme: `${prefix}create`,
+  createTheme: `${prefix}/create`,
-  updateTheme: themeName => `${prefix}${themeName}`,
+  updateTheme: themeName => `${prefix}/${themeName}`,
-  deleteTheme: themeName => `${prefix}${themeName}`,
+  deleteTheme: themeName => `${prefix}/${themeName}`,
 };
 
 export default {
@@ -33,6 +33,7 @@ export default {
       colors: colors,
     };
     let response = await apiReq.put(settingsURLs.updateTheme(themeName), body);
+    console.log(response.data);
     return response.data;
   },
 

frontend/src/components/Recipe/RecipeViewer.vue

@@ -158,12 +158,6 @@ export default {
       disabledSteps: [],
     };
   },
-  mounted() {
-    this.flashMessage.success({
-      title: "Success Message Recipe",
-      message: "Hoorah, it is my fist npm package and it works!",
-    });
-  },
   methods: {
     toggleDisabled(stepIndex) {
       if (this.disabledSteps.includes(stepIndex)) {

frontend/src/plugins/vuetify.js

@@ -6,6 +6,8 @@ Vue.use(Vuetify);
 const vuetify = new Vuetify({
   theme: {
     dark: false,
+    options: { customProperties: true },
+
     themes: {
       light: {
         primary: "#E58325",

frontend/src/utils.js

@@ -1,6 +1,15 @@
 // import utils from "../../utils";
 // import Vue from "vue";
 // import Vuetify from "./plugins/vuetify";
+import { vueApp } from "./main";
+
+const notifyHelpers = {
+  baseCSS: "notify-base",
+  error: "notify-error-color",
+  warning: "notify-warning-color",
+  success: "notify-success-color",
+  info: "notify-info-color",
+};
 
 const days = [
   "Sunday",
@@ -72,4 +81,28 @@ export default {
 
     return `${year}-${month}-${day}`;
   },
+  notify: {
+    show: function(text, type = "info", title = null) {
+      vueApp.flashMessage.show({
+        status: type,
+        title: title,
+        message: text,
+        time: 3000,
+        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);
+    },
+    error: function(text, title = null) {
+      this.show(text, "error", title);
+    },
+    warning: function(text, title = null) {
+      this.show(text, "warning", title);
+    },
+  },
 };

mealie/routes/backup_routes.py

@@ -110,4 +110,4 @@ def delete_backup(file_name: str):
             detail=SnackResponse.error("Unable to Delete Backup. See Log File"),
         )
 
-    return SnackResponse.success(f"{file_name} Deleted")
+    return SnackResponse.error(f"{file_name} Deleted")

mealie/routes/meal_routes.py

@@ -53,7 +53,7 @@ def update_meal_plan(
     #         detail=SnackResponse.error("Unable to Update Mealplan"),
     #     )
 
-    return SnackResponse.success("Mealplan Updated")
+    return SnackResponse.info("Mealplan Updated")
 
 
 @router.delete("/{plan_id}")
@@ -62,7 +62,7 @@ def delete_meal_plan(plan_id, db: Session = Depends(generate_session)):
 
     MealPlan.delete(db, plan_id)
 
-    return SnackResponse.success("Mealplan Deleted")
+    return SnackResponse.error("Mealplan Deleted")
 
 
 @router.get("/today", tags=["Meal Plan"])

mealie/routes/migration_routes.py

@@ -62,7 +62,7 @@ def delete_migration_data(type: str, file_name: str):
     else:
         SnackResponse.error("File/Folder not found.")
 
-    return SnackResponse.info(f"Migration Data Remove: {remove_path.absolute()}")
+    return SnackResponse.error(f"Migration Data Remove: {remove_path.absolute()}")
 
 
 @router.post("/{type}/upload")

mealie/routes/recipe/category_routes.py

@@ -4,6 +4,8 @@ from fastapi import APIRouter, Depends
 from models.category_models import RecipeCategoryResponse
 from sqlalchemy.orm.session import Session
 
+from utils.snackbar import SnackResponse
+
 router = APIRouter(
     prefix="/api/categories",
     tags=["Recipe Categories"],
@@ -33,3 +35,5 @@ async def delete_recipe_category(
     from any recipes that contain it """
 
     db.categories.delete(session, category)
+
+    return SnackResponse(f"Category Deleted: {category}")

mealie/routes/recipe/recipe_crud_routes.py

@@ -62,7 +62,7 @@ def delete_recipe(recipe_slug: str, db: Session = Depends(generate_session)):
             status_code=404, detail=SnackResponse.error("Unable to Delete Recipe")
         )
 
-    return SnackResponse.success("Recipe Deleted")
+    return SnackResponse.error(f"Recipe {recipe_slug} Deleted")
 
 
 @router.get("/{recipe_slug}/image")

mealie/routes/recipe/tag_routes.py

@@ -3,6 +3,8 @@ from db.db_setup import generate_session
 from fastapi import APIRouter, Depends
 from sqlalchemy.orm.session import Session
 
+from utils.snackbar import SnackResponse
+
 router = APIRouter(tags=["Recipes"])
 
 router = APIRouter(
@@ -30,3 +32,5 @@ async def delete_recipe_tag(tag: str, session: Session = Depends(generate_sessio
     from any recipes that contain it"""
 
     db.tags.delete(session, tag)
+
+    return SnackResponse.error(f"Tag Deleted: {tag}")

mealie/routes/theme_routes.py

@@ -18,12 +18,6 @@ def get_all_themes(db: Session = Depends(generate_session)):
 def create_theme(data: SiteTheme, db: Session = Depends(generate_session)):
     """ Creates a site color theme database entry """
     data.save_to_db(db)
-    # try:
-    #     data.save_to_db()
-    # except:
-    #     raise HTTPException(
-    #         status_code=400, detail=SnackResponse.error("Unable to Save Theme")
-    #     )
 
     return SnackResponse.success("Theme Saved")
 
@@ -41,24 +35,12 @@ def update_theme(
     """ Update a theme database entry """
     data.update_document(db)
 
-    # try:
+    return SnackResponse.info(f"Theme Updated: {theme_name}")
-    # except:
-    #     raise HTTPException(
-    #         status_code=400, detail=SnackResponse.error("Unable to Update Theme")
-    #     )
-
-    return SnackResponse.success("Theme Updated")
 
 
 @router.delete("/themes/{theme_name}")
 def delete_theme(theme_name: str, db: Session = Depends(generate_session)):
     """ Deletes theme from the database """
     SiteTheme.delete_theme(db, theme_name)
-    # try:
-    #     SiteTheme.delete_theme(theme_name)
-    # except:
-    #     raise HTTPException(
-    #         status_code=400, detail=SnackResponse.error("Unable to Delete Theme")
-    #     )
 
-    return SnackResponse.success("Theme Deleted")
+    return SnackResponse.error(f"Theme Deleted: {theme_name}")

mealie/utils/snackbar.py

@@ -9,18 +9,6 @@ class SnackResponse:
 
         return snackbar
 
-    @staticmethod
-    def primary(message: str, additional_data: dict = None) -> dict:
-        return SnackResponse._create_response(message, "primary", additional_data)
-
-    @staticmethod
-    def accent(message: str, additional_data: dict = None) -> dict:
-        return SnackResponse._create_response(message, "accent", additional_data)
-
-    @staticmethod
-    def secondary(message: str, additional_data: dict = None) -> dict:
-        return SnackResponse._create_response(message, "secondary", additional_data)
-
     @staticmethod
     def success(message: str, additional_data: dict = None) -> dict:
         return SnackResponse._create_response(message, "success", additional_data)