diff --git a/docs/docs/changelog.md b/docs/docs/changelog.md
index 91cd537664f4..4d982d00dd7a 100644
--- a/docs/docs/changelog.md
+++ b/docs/docs/changelog.md
@@ -1,5 +1,20 @@
# Release Notes
+## v0.3.0 - Draft!
+
+### Features and Improvements
+ - Open search with `/` hotkey!
+ - Unified and improved snackbar notifications
+ - Recipe Viewer
+ - Categories, Tags, and Notes will not be displayed below the steps on smaller screens
+ - Recipe Editor
+ - Text areas now auto grow to fit content
+ - Description, Steps, and Notes support Markdown! This includes inline html in Markdown.
+
+### Development / Misc
+ - Added async file response for images, downloading files.
+ - Breakup recipe view component
+
## 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 c0eeb2608fc1..1f26196a03f2 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 94b82846c625..35b4ca1734c9 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 93103d324d81..4509b55a5a4c 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,16 +1,22 @@
-
- mdi-silverware-variant
-
+
+
+ mdi-silverware-variant
+
+
+
- Mealie
+ Mealie
+
+
@@ -54,6 +61,13 @@ export default {
this.search = false;
},
},
+ created() {
+ window.addEventListener("keyup", e => {
+ if (e.key == "/") {
+ this.search = !this.search;
+ }
+ });
+ },
mounted() {
this.$store.dispatch("initTheme");
@@ -94,5 +108,34 @@ export default {
diff --git a/frontend/src/api.js b/frontend/src/api.js
index eafe13005c22..3c6c04c0c833 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -8,7 +8,7 @@ import myUtils from "./api/upload";
import category from "./api/category";
import meta from "./api/meta";
-// import api from "../api";
+// import api from "@/api";
export default {
recipes: recipe,
diff --git a/frontend/src/api/api-utils.js b/frontend/src/api/api-utils.js
index d52a4c7e5409..c1ef8f9a8bc5 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 beeec4710702..6ff7a85eebab 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}/${themeName}`,
+ specificTheme: themeName => `${prefix}/${themeName}`,
createTheme: `${prefix}/create`,
- updateTheme: (themeName) => `${prefix}/${themeName}`,
- deleteTheme: (themeName) => `${prefix}/${themeName}`,
+ 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/api/upload.js b/frontend/src/api/upload.js
index 1c7655185e6b..12a1c08c2e77 100644
--- a/frontend/src/api/upload.js
+++ b/frontend/src/api/upload.js
@@ -1,7 +1,7 @@
import { apiReq } from "./api-utils";
export default {
- // import api from "../api";
+ // import api from "@/api";
async uploadFile(url, fileObject) {
let response = await apiReq.post(url, fileObject, {
headers: {
diff --git a/frontend/src/components/MealPlan/MealPlanCard.vue b/frontend/src/components/MealPlan/MealPlanCard.vue
index 2eb11a595892..b5c176638176 100644
--- a/frontend/src/components/MealPlan/MealPlanCard.vue
+++ b/frontend/src/components/MealPlan/MealPlanCard.vue
@@ -26,7 +26,7 @@
-
-
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue b/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
new file mode 100644
index 000000000000..70a8c798ca0f
--- /dev/null
+++ b/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
@@ -0,0 +1,34 @@
+
+
+
{{ $t("recipe.ingredients") }}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/RecipeViewer/Notes.vue b/frontend/src/components/Recipe/RecipeViewer/Notes.vue
new file mode 100644
index 000000000000..e25701d272ee
--- /dev/null
+++ b/frontend/src/components/Recipe/RecipeViewer/Notes.vue
@@ -0,0 +1,36 @@
+
+
+
{{ $t("recipe.notes") }}
+
+ {{ note.title }}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue b/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
new file mode 100644
index 000000000000..cde5d99c34b1
--- /dev/null
+++ b/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
@@ -0,0 +1,26 @@
+
+
+
{{ title }}
+
+ {{ category }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/RecipeViewer/Steps.vue b/frontend/src/components/Recipe/RecipeViewer/Steps.vue
new file mode 100644
index 000000000000..4b674668e056
--- /dev/null
+++ b/frontend/src/components/Recipe/RecipeViewer/Steps.vue
@@ -0,0 +1,67 @@
+
+
+
{{ $t("recipe.instructions") }}
+
+
+ {{
+ $t("recipe.step-index", { step: index + 1 })
+ }}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/RecipeViewer/index.vue b/frontend/src/components/Recipe/RecipeViewer/index.vue
new file mode 100644
index 000000000000..845c63c959e8
--- /dev/null
+++ b/frontend/src/components/Recipe/RecipeViewer/index.vue
@@ -0,0 +1,130 @@
+
+
+
+ {{ name }}
+
+
+
+
+
+
+ {{ yields }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t("recipe.original-url") }}
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/components/Settings/Backup/AvailableBackupCard.vue b/frontend/src/components/Settings/Backup/AvailableBackupCard.vue
index 67b83aa51b82..7254e5808494 100644
--- a/frontend/src/components/Settings/Backup/AvailableBackupCard.vue
+++ b/frontend/src/components/Settings/Backup/AvailableBackupCard.vue
@@ -38,8 +38,8 @@