diff --git a/docs/docs/changelog.md b/docs/docs/changelog.md index 91cd53766..80d9f4c7e 100644 --- a/docs/docs/changelog.md +++ b/docs/docs/changelog.md @@ -1,5 +1,10 @@ # Release Notes +## v0.3.0 - Draft! + +### Features and Improvements + - Unified and improved snackbar notifications + ## v0.2.0 - Now with Test! This is, what I think, is a big release! Tons of new features and some great quality of life improvements with some additional features. You may find that I made promises to include some fixes/features in v0.2.0. The short of is I greatly underestimated the work needed to refactor the database to a usable state and integrate categories in a way that is useful for users. This shouldn't be taken as a sign that I'm dropping those feature requests or ignoring them. I felt it was better to push a release in the current state rather than drag on development to try and fulfil all of the promises I made. diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c0eeb2608..1f26196a0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1385,6 +1385,11 @@ "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==", "dev": true }, + "@smartweb/vue-flash-message": { + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/@smartweb/vue-flash-message/-/vue-flash-message-0.6.10.tgz", + "integrity": "sha512-ceDUUzXI6FDscev36kZQvc2BO+MayOt6uJ2HSh9zoOkfa0PVIhmaoB56InlTTsK7MmlSIvPJpRB+Habdx3MtNw==" + }, "@soda/friendly-errors-webpack-plugin": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz", @@ -2011,16 +2016,6 @@ "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", "dev": true }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, "cacache": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz", @@ -2047,53 +2042,6 @@ "unique-filename": "^1.1.1" } }, - "chalk": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", - "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -2110,16 +2058,6 @@ "minipass": "^3.1.1" } }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - }, "terser-webpack-plugin": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", @@ -2136,18 +2074,6 @@ "terser": "^4.6.12", "webpack-sources": "^1.4.3" } - }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.1.2", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz", - "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - } } } }, @@ -11935,6 +11861,87 @@ } } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.1.2", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz", + "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", + "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue-router": { "version": "3.4.9", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz", diff --git a/frontend/package.json b/frontend/package.json index 94b82846c..35b4ca173 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@adapttive/vue-markdown": "^3.0.3", + "@smartweb/vue-flash-message": "^0.6.10", "axios": "^0.21.1", "core-js": "^3.8.2", "fuse.js": "^6.4.6", diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 93103d324..ffd80d668 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -29,6 +29,7 @@ + @@ -94,5 +95,34 @@ export default { diff --git a/frontend/src/api/api-utils.js b/frontend/src/api/api-utils.js index d52a4c7e5..852a0d521 100644 --- a/frontend/src/api/api-utils.js +++ b/frontend/src/api/api-utils.js @@ -1,23 +1,20 @@ const baseURL = "/api/"; import axios from "axios"; -import store from "../store/store"; - +import utils from "../utils"; // look for data.snackbar in response function processResponse(response) { try { - store.commit("setSnackBar", { - text: response.data.snackbar.text, - type: response.data.snackbar.type, - }); + utils.notify.show(response.data.snackbar.text, response.data.snackbar.type); } catch (err) { return; } + return; } const apiReq = { - post: async function (url, data) { - let response = await axios.post(url, data).catch(function (error) { + post: async function(url, data) { + let response = await axios.post(url, data).catch(function(error) { if (error.response) { processResponse(error.response); return error.response; @@ -27,8 +24,19 @@ const apiReq = { return response; }, - put: async function (url, data) { - let response = await axios.put(url, data).catch(function (error) { + put: async function(url, data) { + let response = await axios.put(url, data).catch(function(error) { + if (error.response) { + processResponse(error.response); + return response; + } else return; + }); + processResponse(response); + return response; + }, + + get: async function(url, data) { + let response = await axios.get(url, data).catch(function(error) { if (error.response) { processResponse(error.response); return response; @@ -38,19 +46,8 @@ const apiReq = { return response; }, - get: async function (url, data) { - let response = await axios.get(url, data).catch(function (error) { - if (error.response) { - processResponse(error.response); - return response; - } else return; - }); - // processResponse(response); - return response; - }, - - delete: async function (url, data) { - let response = await axios.delete(url, data).catch(function (error) { + delete: async function(url, data) { + let response = await axios.delete(url, data).catch(function(error) { if (error.response) { processResponse(error.response); return response; diff --git a/frontend/src/api/themes.js b/frontend/src/api/themes.js index bfac6d179..6ff7a85ee 100644 --- a/frontend/src/api/themes.js +++ b/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}themes/${themeName}`, - createTheme: `${prefix}themes/create`, - updateTheme: (themeName) => `${prefix}themes/${themeName}`, - deleteTheme: (themeName) => `${prefix}themes/${themeName}`, + specificTheme: themeName => `${prefix}/${themeName}`, + createTheme: `${prefix}/create`, + updateTheme: 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; }, diff --git a/frontend/src/main.js b/frontend/src/main.js index 09b6d8f79..d8040e6b2 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -5,7 +5,9 @@ import store from "./store/store"; import VueRouter from "vue-router"; import { routes } from "./routes"; import i18n from "./i18n"; +import FlashMessage from "@smartweb/vue-flash-message"; +Vue.use(FlashMessage); Vue.config.productionTip = false; Vue.use(VueRouter); @@ -14,16 +16,16 @@ const router = new VueRouter({ mode: process.env.NODE_ENV === "production" ? "history" : "hash", }); -new Vue({ +const vueApp = new Vue({ vuetify, store, router, i18n, - render: (h) => h(App), + render: h => h(App), }).$mount("#app"); // Truncate -let truncate = function (text, length, clamp) { +let truncate = function(text, length, clamp) { clamp = clamp || "..."; let node = document.createElement("div"); node.innerHTML = text; @@ -31,11 +33,12 @@ let truncate = function (text, length, clamp) { return content.length > length ? content.slice(0, length) + clamp : content; }; -let titleCase = function (value) { - return value.replace(/(?:^|\s|-)\S/g, (x) => x.toUpperCase()); +let titleCase = function(value) { + return value.replace(/(?:^|\s|-)\S/g, x => x.toUpperCase()); }; Vue.filter("truncate", truncate); Vue.filter("titleCase", titleCase); +export { vueApp }; export { router }; diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js index 58c516363..e86b91143 100644 --- a/frontend/src/plugins/vuetify.js +++ b/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", diff --git a/frontend/src/utils.js b/frontend/src/utils.js index f2038b6c6..fba99dc50 100644 --- a/frontend/src/utils.js +++ b/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); + }, + }, }; diff --git a/mealie/routes/backup_routes.py b/mealie/routes/backup_routes.py index 229d4c60a..24edf1103 100644 --- a/mealie/routes/backup_routes.py +++ b/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") diff --git a/mealie/routes/meal_routes.py b/mealie/routes/meal_routes.py index 6145676fd..8f523b736 100644 --- a/mealie/routes/meal_routes.py +++ b/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"]) diff --git a/mealie/routes/migration_routes.py b/mealie/routes/migration_routes.py index 26845607b..8fc2f0b76 100644 --- a/mealie/routes/migration_routes.py +++ b/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") diff --git a/mealie/routes/recipe/category_routes.py b/mealie/routes/recipe/category_routes.py index 67a4c213e..57873afef 100644 --- a/mealie/routes/recipe/category_routes.py +++ b/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}") diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py index af2e89253..80681e71e 100644 --- a/mealie/routes/recipe/recipe_crud_routes.py +++ b/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") diff --git a/mealie/routes/recipe/tag_routes.py b/mealie/routes/recipe/tag_routes.py index ce527f01c..c18846407 100644 --- a/mealie/routes/recipe/tag_routes.py +++ b/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}") diff --git a/mealie/routes/theme_routes.py b/mealie/routes/theme_routes.py index d2c5da7f1..3c244931c 100644 --- a/mealie/routes/theme_routes.py +++ b/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: - # except: - # raise HTTPException( - # status_code=400, detail=SnackResponse.error("Unable to Update Theme") - # ) - - return SnackResponse.success("Theme Updated") + return SnackResponse.info(f"Theme Updated: {theme_name}") @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}") diff --git a/mealie/utils/snackbar.py b/mealie/utils/snackbar.py index 766bb5fd7..dd4ee9de2 100644 --- a/mealie/utils/snackbar.py +++ b/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)