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..2b32f1787 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -29,6 +29,7 @@ + @@ -62,6 +63,11 @@ 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: () => ({ @@ -94,5 +100,4 @@ export default { diff --git a/frontend/src/api/api-utils.js b/frontend/src/api/api-utils.js index d52a4c7e5..20c23f9d2 100644 --- a/frontend/src/api/api-utils.js +++ b/frontend/src/api/api-utils.js @@ -1,23 +1,26 @@ const baseURL = "/api/"; import axios from "axios"; -import store from "../store/store"; +import { vueApp } from "../main"; // look for data.snackbar in response function processResponse(response) { try { - store.commit("setSnackBar", { - text: response.data.snackbar.text, - type: response.data.snackbar.type, + vueApp.flashMessage.show({ + status: response.data.snackbar.type, + title: 'Error Message Title', + message: response.data.snackbar.text }); } 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 +30,8 @@ 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; @@ -38,8 +41,8 @@ const apiReq = { return response; }, - get: async function (url, data) { - let response = await axios.get(url, data).catch(function (error) { + get: async function(url, data) { + let response = await axios.get(url, data).catch(function(error) { if (error.response) { processResponse(error.response); return response; @@ -49,8 +52,8 @@ const apiReq = { 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..01c3b38a3 100644 --- a/frontend/src/api/themes.js +++ b/frontend/src/api/themes.js @@ -5,10 +5,10 @@ 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 { diff --git a/frontend/src/components/Recipe/RecipeViewer.vue b/frontend/src/components/Recipe/RecipeViewer.vue index 3fbc04646..e7a0094fd 100644 --- a/frontend/src/components/Recipe/RecipeViewer.vue +++ b/frontend/src/components/Recipe/RecipeViewer.vue @@ -158,6 +158,12 @@ 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)) { 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 };