mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
feature/mealplanner-rewrite (#417)
* multiple recipes per day * fix update * meal-planner rewrite * disable meal-tests * spacing Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
parent
4b3fc45c1c
commit
ef87f2231d
42 changed files with 1502 additions and 491 deletions
77
frontend/src/api/apiRoutes.js
Normal file
77
frontend/src/api/apiRoutes.js
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
// This Content is Auto Generated
|
||||
const prefix = '/api'
|
||||
export const API_ROUTES = {
|
||||
aboutEvents: "/api/about/events",
|
||||
aboutEventsNotifications: "/api/about/events/notifications",
|
||||
aboutEventsNotificationsTest: "/api/about/events/notifications/test",
|
||||
authRefresh: "/api/auth/refresh",
|
||||
authToken: "/api/auth/token",
|
||||
authTokenLong: "/api/auth/token/long",
|
||||
backupsAvailable: "/api/backups/available",
|
||||
backupsExportDatabase: "/api/backups/export/database",
|
||||
backupsUpload: "/api/backups/upload",
|
||||
categories: "/api/categories",
|
||||
categoriesEmpty: "/api/categories/empty",
|
||||
debug: "/api/debug",
|
||||
debugLastRecipeJson: "/api/debug/last-recipe-json",
|
||||
debugLog: "/api/debug/log",
|
||||
debugStatistics: "/api/debug/statistics",
|
||||
debugVersion: "/api/debug/version",
|
||||
groups: "/api/groups",
|
||||
groupsSelf: "/api/groups/self",
|
||||
mealPlansAll: "/api/meal-plans/all",
|
||||
mealPlansCreate: "/api/meal-plans/create",
|
||||
mealPlansThisWeek: "/api/meal-plans/this-week",
|
||||
mealPlansToday: "/api/meal-plans/today",
|
||||
mealPlansTodayImage: "/api/meal-plans/today/image",
|
||||
migrations: "/api/migrations",
|
||||
recipesCategory: "/api/recipes/category",
|
||||
recipesCreate: "/api/recipes/create",
|
||||
recipesCreateUrl: "/api/recipes/create-url",
|
||||
recipesSummary: "/api/recipes/summary",
|
||||
recipesSummaryUncategorized: "/api/recipes/summary/uncategorized",
|
||||
recipesSummaryUntagged: "/api/recipes/summary/untagged",
|
||||
recipesTag: "/api/recipes/tag",
|
||||
shoppingLists: "/api/shopping-lists",
|
||||
siteSettings: "/api/site-settings",
|
||||
siteSettingsCustomPages: "/api/site-settings/custom-pages",
|
||||
siteSettingsWebhooksTest: "/api/site-settings/webhooks/test",
|
||||
tags: "/api/tags",
|
||||
tagsEmpty: "/api/tags/empty",
|
||||
themes: "/api/themes",
|
||||
themesCreate: "/api/themes/create",
|
||||
users: "/api/users",
|
||||
usersApiTokens: "/api/users-tokens",
|
||||
usersSelf: "/api/users/self",
|
||||
usersSignUps: "/api/users/sign-ups",
|
||||
utilsDownload: "/api/utils/download",
|
||||
|
||||
aboutEventsId: (id) => `${prefix}/about/events/${id}`,
|
||||
aboutEventsNotificationsId: (id) => `${prefix}/about/events/notifications/${id}`,
|
||||
backupsFileNameDelete: (file_name) => `${prefix}/backups/${file_name}/delete`,
|
||||
backupsFileNameDownload: (file_name) => `${prefix}/backups/${file_name}/download`,
|
||||
backupsFileNameImport: (file_name) => `${prefix}/backups/${file_name}/import`,
|
||||
categoriesCategory: (category) => `${prefix}/categories/${category}`,
|
||||
debugLogNum: (num) => `${prefix}/debug/log/${num}`,
|
||||
groupsId: (id) => `${prefix}/groups/${id}`,
|
||||
mealPlansIdShoppingList: (id) => `${prefix}/meal-plans/${id}/shopping-list`,
|
||||
mealPlansPlanId: (plan_id) => `${prefix}/meal-plans/${plan_id}`,
|
||||
mediaRecipesRecipeSlugAssetsFileName: (recipe_slug, file_name) => `${prefix}/media/recipes/${recipe_slug}/assets/${file_name}`,
|
||||
mediaRecipesRecipeSlugImagesFileName: (recipe_slug, file_name) => `${prefix}/media/recipes/${recipe_slug}/images/${file_name}`,
|
||||
migrationsImportTypeFileNameDelete: (import_type, file_name) => `${prefix}/migrations/${import_type}/${file_name}/delete`,
|
||||
migrationsImportTypeFileNameImport: (import_type, file_name) => `${prefix}/migrations/${import_type}/${file_name}/import`,
|
||||
migrationsImportTypeUpload: (import_type) => `${prefix}/migrations/${import_type}/upload`,
|
||||
recipesRecipeSlug: (recipe_slug) => `${prefix}/recipes/${recipe_slug}`,
|
||||
recipesRecipeSlugAssets: (recipe_slug) => `${prefix}/recipes/${recipe_slug}/assets`,
|
||||
recipesRecipeSlugImage: (recipe_slug) => `${prefix}/recipes/${recipe_slug}/image`,
|
||||
shoppingListsId: (id) => `${prefix}/shopping-lists/${id}`,
|
||||
siteSettingsCustomPagesId: (id) => `${prefix}/site-settings/custom-pages/${id}`,
|
||||
tagsTag: (tag) => `${prefix}/tags/${tag}`,
|
||||
themesId: (id) => `${prefix}/themes/${id}`,
|
||||
usersApiTokensTokenId: (token_id) => `${prefix}/users-tokens/${token_id}`,
|
||||
usersId: (id) => `${prefix}/users/${id}`,
|
||||
usersIdImage: (id) => `${prefix}/users/${id}/image`,
|
||||
usersIdPassword: (id) => `${prefix}/users/${id}/password`,
|
||||
usersIdResetPassword: (id) => `${prefix}/users/${id}/reset-password`,
|
||||
usersSignUpsToken: (token) => `${prefix}/users/sign-ups/${token}`,
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ import { signupAPI } from "./signUps";
|
|||
import { groupAPI } from "./groups";
|
||||
import { siteSettingsAPI } from "./siteSettings";
|
||||
import { aboutAPI } from "./about";
|
||||
import { shoppingListsAPI } from "./shoppingLists";
|
||||
|
||||
/**
|
||||
* The main object namespace for interacting with the backend database
|
||||
|
|
@ -32,4 +33,5 @@ export const api = {
|
|||
signUps: signupAPI,
|
||||
groups: groupAPI,
|
||||
about: aboutAPI,
|
||||
shoppingLists: shoppingListsAPI,
|
||||
};
|
||||
|
|
|
|||
33
frontend/src/api/shoppingLists.js
Normal file
33
frontend/src/api/shoppingLists.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
// This Content is Auto Generated
|
||||
import { API_ROUTES } from "./apiRoutes";
|
||||
import { apiReq } from "./api-utils";
|
||||
|
||||
export const shoppingListsAPI = {
|
||||
/** Create Shopping List in the Database
|
||||
*/
|
||||
async createShoppingList(data) {
|
||||
const response = await apiReq.post(API_ROUTES.shoppingLists, data);
|
||||
return response.data;
|
||||
},
|
||||
/** Get Shopping List from the Database
|
||||
* @param id
|
||||
*/
|
||||
async getShoppingList(id) {
|
||||
const response = await apiReq.get(API_ROUTES.shoppingListsId(id));
|
||||
return response.data;
|
||||
},
|
||||
/** Update Shopping List in the Database
|
||||
* @param id
|
||||
*/
|
||||
async updateShoppingList(id, data) {
|
||||
const response = await apiReq.put(API_ROUTES.shoppingListsId(id), data);
|
||||
return response.data;
|
||||
},
|
||||
/** Delete Shopping List from the Database
|
||||
* @param id
|
||||
*/
|
||||
async deleteShoppingList(id) {
|
||||
const response = await apiReq.delete(API_ROUTES.shoppingListsId(id));
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
17
frontend/src/components/Fallbacks/NoRecipe.vue
Normal file
17
frontend/src/components/Fallbacks/NoRecipe.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<The404>
|
||||
<h1 class="mx-auto">No Recipe Found</h1>
|
||||
</The404>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import The404 from "./The404.vue";
|
||||
export default {
|
||||
components: { The404 },
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
51
frontend/src/components/Fallbacks/The404.vue
Normal file
51
frontend/src/components/Fallbacks/The404.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-card-title>
|
||||
<slot>
|
||||
<h1 class="mx-auto">{{ $t("404.page-not-found") }}</h1>
|
||||
</slot>
|
||||
</v-card-title>
|
||||
<div class="d-flex justify-space-around">
|
||||
<div class="d-flex">
|
||||
<p>4</p>
|
||||
<v-icon color="primary" class="mx-auto" size="200">
|
||||
mdi-silverware-variant
|
||||
</v-icon>
|
||||
<p>4</p>
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<slot name="actions">
|
||||
<v-btn v-for="(button, index) in buttons" :key="index" :to="button.to" color="primary">
|
||||
<v-icon left> {{ button.icon }} </v-icon>
|
||||
{{ button.text }}
|
||||
</v-btn>
|
||||
</slot>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
buttons: [
|
||||
{ icon: "mdi-home", to: "/", text: "Home" },
|
||||
{ icon: "mdi-silverware-variant", to: "/recipes/all", text: "All Recipes" },
|
||||
{ icon: "mdi-magnify", to: "/search", text: "Search" },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
p {
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
color: var(--v-primary-base);
|
||||
font-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,76 @@
|
|||
<template>
|
||||
<v-row>
|
||||
<SearchDialog ref="mealselect" @select="setSlug" />
|
||||
<v-col cols="12" sm="12" md="6" lg="4" xl="3" v-for="(meal, index) in value" :key="index">
|
||||
<BaseDialog
|
||||
title="Custom Meal"
|
||||
title-icon="mdi-silverware-variant"
|
||||
submit-text="Save"
|
||||
:top="true"
|
||||
ref="customMealDialog"
|
||||
@submit="pushCustomMeal"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-text-field autofocus v-model="customMeal.name" label="Name"> </v-text-field>
|
||||
<v-textarea v-model="customMeal.description" label="Description"> </v-textarea>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<v-col cols="12" sm="12" md="6" lg="4" xl="3" v-for="(planDay, index) in value" :key="index">
|
||||
<v-hover v-slot="{ hover }" :open-delay="50">
|
||||
<v-card :class="{ 'on-hover': hover }" :elevation="hover ? 12 : 2">
|
||||
<v-img height="200" :src="getImage(meal.slug)" @click="openSearch(index)"></v-img>
|
||||
<CardImage large :slug="planDay.meals[0].slug" icon-size="200" @click="openSearch(index, modes.primary)">
|
||||
<v-fade-transition>
|
||||
<v-btn v-if="hover" small color="info" class="ma-1" @click.stop="addCustomItem(index, modes.primary)">
|
||||
<v-icon left>
|
||||
mdi-square-edit-outline
|
||||
</v-icon>
|
||||
No Recipe
|
||||
</v-btn>
|
||||
</v-fade-transition>
|
||||
</CardImage>
|
||||
|
||||
<v-card-title class="my-n3 mb-n6">
|
||||
{{ $d(new Date(meal.date.split("-")), "short") }}
|
||||
{{ $d(new Date(planDay.date.split("-")), "short") }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle> {{ meal.name }}</v-card-subtitle>
|
||||
<v-card-subtitle class="mb-0 pb-0"> {{ planDay.meals[0].name }}</v-card-subtitle>
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-fade-transition>
|
||||
<v-btn v-if="hover" small color="info" text @click.stop="addCustomItem(index, modes.sides)">
|
||||
<v-icon left>
|
||||
mdi-square-edit-outline
|
||||
</v-icon>
|
||||
No Recipe
|
||||
</v-btn>
|
||||
</v-fade-transition>
|
||||
<v-btn color="info" outlined small @click="openSearch(index, modes.sides)">
|
||||
<v-icon small class="mr-1">
|
||||
mdi-plus
|
||||
</v-icon>
|
||||
Side
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-hover>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-list dense>
|
||||
<v-list-item v-for="(recipe, i) in planDay.meals.slice(1)" :key="i">
|
||||
<v-list-item-avatar color="accent">
|
||||
<v-img :alt="recipe.slug" :src="getImage(recipe.slug)"></v-img>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="recipe.name"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-icon>
|
||||
<v-btn icon @click="removeSide(index, i + 1)">
|
||||
<v-icon color="error">
|
||||
mdi-delete
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-icon>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
|
|
@ -17,38 +79,101 @@
|
|||
|
||||
<script>
|
||||
import SearchDialog from "../UI/Search/SearchDialog";
|
||||
import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
|
||||
import { api } from "@/api";
|
||||
import CardImage from "../Recipe/CardImage.vue";
|
||||
export default {
|
||||
components: {
|
||||
SearchDialog,
|
||||
CardImage,
|
||||
BaseDialog,
|
||||
},
|
||||
props: {
|
||||
value: Array,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
recipeData: [],
|
||||
cardData: [],
|
||||
activeIndex: 0,
|
||||
mode: "PRIMARY",
|
||||
modes: {
|
||||
primary: "PRIMARY",
|
||||
sides: "SIDES",
|
||||
},
|
||||
customMeal: {
|
||||
slug: null,
|
||||
name: "",
|
||||
description: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
console.log(val);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.value);
|
||||
},
|
||||
methods: {
|
||||
getImage(slug) {
|
||||
if (slug) {
|
||||
return api.recipes.recipeSmallImage(slug);
|
||||
}
|
||||
},
|
||||
setSlug(name, slug) {
|
||||
let index = this.activeIndex;
|
||||
this.value[index]["slug"] = slug;
|
||||
this.value[index]["name"] = name;
|
||||
setSide(name, slug = null, description = "") {
|
||||
const meal = { name: name, slug: slug, description: description };
|
||||
this.value[this.activeIndex]["meals"].push(meal);
|
||||
},
|
||||
openSearch(index) {
|
||||
setPrimary(name, slug, description = "") {
|
||||
this.value[this.activeIndex]["meals"][0]["slug"] = slug;
|
||||
this.value[this.activeIndex]["meals"][0]["name"] = name;
|
||||
this.value[this.activeIndex]["meals"][0]["description"] = description;
|
||||
},
|
||||
setSlug(name, slug) {
|
||||
switch (this.mode) {
|
||||
case this.modes.primary:
|
||||
this.setPrimary(name, slug);
|
||||
break;
|
||||
default:
|
||||
this.setSide(name, slug);
|
||||
break;
|
||||
}
|
||||
},
|
||||
openSearch(index, mode) {
|
||||
this.mode = mode;
|
||||
this.activeIndex = index;
|
||||
this.$refs.mealselect.open();
|
||||
},
|
||||
removeSide(dayIndex, sideIndex) {
|
||||
this.value[dayIndex]["meals"].splice(sideIndex, 1);
|
||||
},
|
||||
addCustomItem(index, mode) {
|
||||
this.mode = mode;
|
||||
this.activeIndex = index;
|
||||
this.$refs.customMealDialog.open();
|
||||
},
|
||||
pushCustomMeal() {
|
||||
switch (this.mode) {
|
||||
case this.modes.primary:
|
||||
this.setPrimary(this.customMeal.name, this.customMeal.slug, this.customMeal.description);
|
||||
break;
|
||||
default:
|
||||
this.setSide(this.customMeal.name, this.customMeal.slug, this.customMeal.description);
|
||||
break;
|
||||
}
|
||||
console.log("Hello World");
|
||||
this.customMeal = { name: "", slug: null, description: "" };
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style>
|
||||
.relative-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<v-divider></v-divider>
|
||||
|
||||
<v-card-text>
|
||||
<MealPlanCard v-model="mealPlan.meals" />
|
||||
<MealPlanCard v-model="mealPlan.planDays" />
|
||||
<v-row align="center" justify="end">
|
||||
<v-card-actions>
|
||||
<v-btn color="success" text @click="update">
|
||||
|
|
@ -30,6 +30,9 @@ export default {
|
|||
props: {
|
||||
mealPlan: Object,
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.mealPlan);
|
||||
},
|
||||
methods: {
|
||||
formatDate(timestamp) {
|
||||
let dateObject = new Date(timestamp);
|
||||
|
|
|
|||
|
|
@ -63,14 +63,14 @@
|
|||
</v-card-text>
|
||||
|
||||
<v-card-text v-if="startDate">
|
||||
<MealPlanCard v-model="meals" />
|
||||
<MealPlanCard v-model="planDays" />
|
||||
</v-card-text>
|
||||
<v-row align="center" justify="end">
|
||||
<v-card-actions class="mr-5">
|
||||
<v-btn color="success" @click="random" v-if="meals.length > 0" text>
|
||||
<v-btn color="success" @click="random" v-if="planDays.length > 0" text>
|
||||
{{ $t("general.random") }}
|
||||
</v-btn>
|
||||
<v-btn color="success" @click="save" text :disabled="meals.length == 0">
|
||||
<v-btn color="success" @click="save" text :disabled="planDays.length == 0">
|
||||
{{ $t("general.save") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
|
|
@ -92,7 +92,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
meals: [],
|
||||
planDays: [],
|
||||
items: [],
|
||||
|
||||
// Dates
|
||||
|
|
@ -106,11 +106,17 @@ export default {
|
|||
|
||||
watch: {
|
||||
dateDif() {
|
||||
this.meals = [];
|
||||
this.planDays = [];
|
||||
for (let i = 0; i < this.dateDif; i++) {
|
||||
this.meals.push({
|
||||
slug: "empty",
|
||||
this.planDays.push({
|
||||
date: this.getDate(i),
|
||||
meals: [
|
||||
{
|
||||
name: "",
|
||||
slug: "empty",
|
||||
description: "empty",
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -172,10 +178,10 @@ export default {
|
|||
},
|
||||
random() {
|
||||
this.usedRecipes = [1];
|
||||
this.meals.forEach((element, index) => {
|
||||
this.planDays.forEach((element, index) => {
|
||||
let recipe = this.getRandom(this.filteredRecipes);
|
||||
this.meals[index]["slug"] = recipe.slug;
|
||||
this.meals[index]["name"] = recipe.name;
|
||||
this.planDays[index]["meals"][0]["slug"] = recipe.slug;
|
||||
this.planDays[index]["meals"][0]["name"] = recipe.name;
|
||||
this.usedRecipes.push(recipe);
|
||||
});
|
||||
},
|
||||
|
|
@ -193,11 +199,11 @@ export default {
|
|||
group: this.groupSettings.name,
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate,
|
||||
meals: this.meals,
|
||||
planDays: this.planDays,
|
||||
};
|
||||
if (await api.mealPlans.create(mealBody)) {
|
||||
this.$emit(CREATE_EVENT);
|
||||
this.meals = [];
|
||||
this.planDays = [];
|
||||
this.startDate = null;
|
||||
this.endDate = null;
|
||||
}
|
||||
|
|
|
|||
99
frontend/src/components/Recipe/CardImage.vue
Normal file
99
frontend/src/components/Recipe/CardImage.vue
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div @click="$emit('click')">
|
||||
<v-img
|
||||
:height="height"
|
||||
v-if="!fallBackImage"
|
||||
:src="getImage(slug)"
|
||||
@load="fallBackImage = false"
|
||||
@error="fallBackImage = true"
|
||||
>
|
||||
<slot> </slot>
|
||||
</v-img>
|
||||
<div class="icon-slot" v-else>
|
||||
<div>
|
||||
<slot> </slot>
|
||||
</div>
|
||||
<v-icon color="primary" class="icon-position" :size="iconSize">
|
||||
mdi-silverware-variant
|
||||
</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
props: {
|
||||
tiny: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
large: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
iconSize: {
|
||||
default: 100,
|
||||
},
|
||||
slug: {
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
default: 200,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
imageSize() {
|
||||
if (this.tiny) return "tiny";
|
||||
if (this.small) return "small";
|
||||
if (this.large) return "large";
|
||||
return "large";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
slug() {
|
||||
this.fallBackImage = false;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fallBackImage: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getImage(image) {
|
||||
switch (this.imageSize) {
|
||||
case "tiny":
|
||||
return api.recipes.recipeTinyImage(image);
|
||||
case "small":
|
||||
return api.recipes.recipeSmallImage(image);
|
||||
case "large":
|
||||
return api.recipes.recipeImage(image);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon-slot {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-slot > div {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.icon-position {
|
||||
opacity: 0.8;
|
||||
display: flex !important;
|
||||
position: relative;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,10 +7,7 @@
|
|||
@click="$emit('click')"
|
||||
min-height="275"
|
||||
>
|
||||
<v-img height="200" class="d-flex" :src="getImage(slug)" @error="fallBackImage = true">
|
||||
<v-icon v-if="fallBackImage" color="primary" class="icon-position" size="200">
|
||||
mdi-silverware-variant
|
||||
</v-icon>
|
||||
<CardImage icon-size="200" :slug="slug">
|
||||
<v-expand-transition v-if="description">
|
||||
<div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal " style="height: 100%;">
|
||||
<v-card-text class="v-card--text-show white--text">
|
||||
|
|
@ -18,7 +15,7 @@
|
|||
</v-card-text>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</v-img>
|
||||
</CardImage>
|
||||
<v-card-title class="my-n3 mb-n6 ">
|
||||
<div class="headerClass">
|
||||
{{ name }}
|
||||
|
|
@ -38,6 +35,7 @@
|
|||
<script>
|
||||
import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
|
||||
import ContextMenu from "@/components/Recipe/ContextMenu";
|
||||
import CardImage from "@/components/Recipe/CardImage";
|
||||
import Rating from "@/components/Recipe/Parts/Rating";
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
|
|
@ -45,6 +43,7 @@ export default {
|
|||
RecipeChips,
|
||||
ContextMenu,
|
||||
Rating,
|
||||
CardImage,
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
|
|
@ -91,12 +90,4 @@ export default {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.icon-position {
|
||||
opacity: 0.8;
|
||||
display: flex !important;
|
||||
position: relative;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
ref="copyToolTip"
|
||||
v-model="show"
|
||||
color="success lighten-1"
|
||||
right
|
||||
top
|
||||
:open-on-hover="false"
|
||||
:open-on-click="true"
|
||||
close-delay="500"
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<template v-slot:activator="{ on }">
|
||||
<v-btn
|
||||
icon
|
||||
color="primary"
|
||||
:color="color"
|
||||
@click="
|
||||
on.click;
|
||||
textToClipboard();
|
||||
|
|
@ -27,8 +27,7 @@
|
|||
<v-icon left dark>
|
||||
mdi-clipboard-check
|
||||
</v-icon>
|
||||
{{ $t('general.coppied')}}!
|
||||
|
||||
{{ $t("general.coppied") }}!
|
||||
</span>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
|
|
@ -39,6 +38,9 @@ export default {
|
|||
copyText: {
|
||||
default: "Default Copy Text",
|
||||
},
|
||||
color: {
|
||||
default: "primary",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
top: {
|
||||
default: false,
|
||||
default: null,
|
||||
},
|
||||
submitText: {
|
||||
default: () => i18n.t("general.create"),
|
||||
|
|
|
|||
|
|
@ -74,8 +74,6 @@ export default {
|
|||
},
|
||||
open() {
|
||||
this.dialog = true;
|
||||
this.$refs.mealSearchBar.resetSearch();
|
||||
this.$router.push("#search");
|
||||
},
|
||||
toggleDialog(open) {
|
||||
if (open) {
|
||||
|
|
|
|||
|
|
@ -63,6 +63,12 @@ export default {
|
|||
nav: "/meal-plan/planner",
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: "mdi-format-list-checks",
|
||||
title: "Shopping Lists",
|
||||
nav: "/shopping-list",
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: "mdi-logout",
|
||||
title: this.$t("user.logout"),
|
||||
|
|
|
|||
|
|
@ -1,22 +1,13 @@
|
|||
<template>
|
||||
<v-container class="text-center">
|
||||
<v-row>
|
||||
<v-col cols="2"></v-col>
|
||||
<v-col>
|
||||
<v-card height="">
|
||||
<v-card-text>
|
||||
<h1>{{ $t("404.page-not-found") }}</h1>
|
||||
</v-card-text>
|
||||
<v-btn text block @click="$router.push('/')"> {{ $t("404.take-me-home") }} </v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="2"></v-col>
|
||||
</v-row>
|
||||
<The404 />
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
import The404 from "@/components/Fallbacks/The404";
|
||||
export default {
|
||||
components: { The404 },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<v-container>
|
||||
<EditPlan v-if="editMealPlan" :meal-plan="editMealPlan" @updated="planUpdated" />
|
||||
<NewMeal v-else @created="requestMeals" class="mb-5" />
|
||||
<ShoppingListDialog ref="shoppingList" />
|
||||
|
||||
<v-card class="my-2">
|
||||
<v-card-title class="headline">
|
||||
|
|
@ -13,14 +12,48 @@
|
|||
<v-row dense>
|
||||
<v-col :sm="6" :md="6" :lg="4" :xl="3" v-for="(mealplan, i) in plannedMeals" :key="i">
|
||||
<v-card class="mt-1">
|
||||
<v-card-title>
|
||||
<v-card-title class="mb-0 pb-0">
|
||||
{{ $d(new Date(mealplan.startDate.split("-")), "short") }} -
|
||||
{{ $d(new Date(mealplan.endDate.split("-")), "short") }}
|
||||
</v-card-title>
|
||||
<v-list nav>
|
||||
<v-list-item-group color="primary">
|
||||
<v-divider class="mx-2 pa-1"></v-divider>
|
||||
<v-card-actions class="mb-0 px-2 py-0">
|
||||
<v-btn text small v-if="!mealplan.shoppingList" color="info" @click="createShoppingList(mealplan.uid)">
|
||||
<v-icon left small>
|
||||
mdi-cart-check
|
||||
</v-icon>
|
||||
Create Shopping List
|
||||
</v-btn>
|
||||
<v-btn
|
||||
text
|
||||
small
|
||||
v-else
|
||||
color="info"
|
||||
class="mx-0"
|
||||
:to="{ path: '/shopping-list', query: { list: mealplan.shoppingList } }"
|
||||
>
|
||||
<v-icon left small>
|
||||
mdi-cart-check
|
||||
</v-icon>
|
||||
Shopping List
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
<v-list class="mt-0 pt-0">
|
||||
<v-list-group v-for="(planDay, pdi) in mealplan.planDays" :key="`planDays-${pdi}`">
|
||||
<template v-slot:activator>
|
||||
<v-list-item-avatar color="primary" class="headline font-weight-light white--text">
|
||||
<v-img :src="getImage(planDay['meals'][0].slug)"></v-img>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-html="$d(new Date(planDay.date.split('-')), 'short')"></v-list-item-title>
|
||||
<v-list-item-subtitle v-html="planDay['meals'][0].name"></v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</template>
|
||||
|
||||
<v-list-item
|
||||
v-for="(meal, index) in mealplan.meals"
|
||||
three-line
|
||||
v-for="(meal, index) in planDay.meals"
|
||||
:key="generateKey(meal.slug, index)"
|
||||
:to="meal.slug ? `/recipe/${meal.slug}` : null"
|
||||
>
|
||||
|
|
@ -28,23 +61,21 @@
|
|||
<v-img :src="getImage(meal.slug)"></v-img>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="meal.name"></v-list-item-title>
|
||||
<v-list-item-subtitle v-text="$d(new Date(meal.date.split('-')), 'short')"> </v-list-item-subtitle>
|
||||
<v-list-item-title v-html="meal.name"></v-list-item-title>
|
||||
<v-list-item-subtitle v-html="meal.description"> </v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list-group>
|
||||
</v-list>
|
||||
<v-card-actions class="mt-n5">
|
||||
<v-btn color="accent lighten-2" class="mx-0" text @click="openShoppingList(mealplan.uid)">
|
||||
{{ $t("meal-plan.shopping-list") }}
|
||||
|
||||
<v-card-actions class="mt-n3">
|
||||
<v-btn color="error lighten-2" small outlined @click="deletePlan(mealplan.uid)">
|
||||
{{ $t("general.delete") }}
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="accent lighten-2" class="mx-0" text @click="editPlan(mealplan.uid)">
|
||||
<v-btn color="info" small @click="editPlan(mealplan.uid)">
|
||||
{{ $t("general.edit") }}
|
||||
</v-btn>
|
||||
<v-btn color="error lighten-2" class="mx-2" text @click="deletePlan(mealplan.uid)">
|
||||
{{ $t("general.delete") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
|
@ -57,13 +88,11 @@ import { api } from "@/api";
|
|||
import { utils } from "@/utils";
|
||||
import NewMeal from "@/components/MealPlan/MealPlanNew";
|
||||
import EditPlan from "@/components/MealPlan/MealPlanEditor";
|
||||
import ShoppingListDialog from "@/components/MealPlan/ShoppingListDialog";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NewMeal,
|
||||
EditPlan,
|
||||
ShoppingListDialog,
|
||||
},
|
||||
data: () => ({
|
||||
plannedMeals: [],
|
||||
|
|
@ -76,6 +105,7 @@ export default {
|
|||
async requestMeals() {
|
||||
const response = await api.mealPlans.all();
|
||||
this.plannedMeals = response.data;
|
||||
console.log(this.plannedMeals);
|
||||
},
|
||||
generateKey(name, index) {
|
||||
return utils.generateUniqueKey(name, index);
|
||||
|
|
@ -100,8 +130,13 @@ export default {
|
|||
this.requestMeals();
|
||||
}
|
||||
},
|
||||
openShoppingList(id) {
|
||||
this.$refs.shoppingList.openDialog(id);
|
||||
async createShoppingList(id) {
|
||||
await api.mealPlans.shoppingList(id);
|
||||
this.requestMeals();
|
||||
this.$store.dispatch("requestCurrentGroup");
|
||||
},
|
||||
redirectToList(id) {
|
||||
this.$router.push(id);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,43 +1,45 @@
|
|||
<template>
|
||||
<v-container fill-height>
|
||||
<v-row>
|
||||
<v-col sm="12">
|
||||
<v-card v-for="(meal, index) in mealPlan.meals" :key="index" class="my-2">
|
||||
<v-row dense no-gutters align="center" justify="center">
|
||||
<v-col order="1" md="6" sm="12">
|
||||
<v-card flat class="align-center justify-center" align="center" justify="center">
|
||||
<v-card-title class="justify-center">
|
||||
{{ meal.name }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle> {{ $d(new Date(meal.date), "short") }}</v-card-subtitle>
|
||||
|
||||
<v-card-text> {{ meal.description }} </v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn align="center" color="secondary" text @click="$router.push(`/recipe/${meal.slug}`)">
|
||||
{{ $t("recipe.view-recipe") }}
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col order-sm="0" :order-md="getOrder(index)" md="6" sm="12">
|
||||
<v-card flat>
|
||||
<v-img :src="getImage(meal.slug)" max-height="300"> </v-img>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-container>
|
||||
<div v-for="(planDay, index) in mealPlan.planDays" :key="index" class="mb-5">
|
||||
<v-card-title class="headline">
|
||||
{{ $d(new Date(planDay.date), "short") }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-row>
|
||||
<v-col cols="12" md="5" sm="12">
|
||||
<v-card-title class="headline">Main</v-card-title>
|
||||
<RecipeCard
|
||||
:name="planDay.meals[0].name"
|
||||
:slug="planDay.meals[0].slug"
|
||||
:description="planDay.meals[0].description"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="6" md="6" sm="12">
|
||||
<v-card-title class="headline">Sides</v-card-title>
|
||||
<MobileRecipeCard
|
||||
class="mb-1"
|
||||
v-for="(side, index) in planDay.meals.slice(1)"
|
||||
:key="`side-${index}`"
|
||||
:name="side.name"
|
||||
:slug="side.slug"
|
||||
:description="side.description"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import { utils } from "@/utils";
|
||||
import RecipeCard from "@/components/Recipe/RecipeCard";
|
||||
import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
|
||||
export default {
|
||||
components: {
|
||||
RecipeCard,
|
||||
MobileRecipeCard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mealPlan: {},
|
||||
|
|
@ -48,6 +50,7 @@ export default {
|
|||
if (!this.mealPlan) {
|
||||
utils.notify.warning(this.$t("meal-plan.no-meal-plan-defined-yet"));
|
||||
}
|
||||
console.log(this.mealPlan);
|
||||
},
|
||||
methods: {
|
||||
getOrder(index) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
<v-card v-if="skeleton" :color="`white ${theme.isDark ? 'darken-2' : 'lighten-4'}`" class="pa-3">
|
||||
<v-skeleton-loader class="mx-auto" height="700px" type="card"></v-skeleton-loader>
|
||||
</v-card>
|
||||
<v-card v-else id="myRecipe" class="d-print-none">
|
||||
<NoRecipe v-else-if="loadFailed" />
|
||||
<v-card v-else-if="!loadFailed" id="myRecipe" class="d-print-none">
|
||||
<v-img height="400" :src="getImage(recipeDetails.slug)" class="d-print-none" :key="imageKey">
|
||||
<RecipeTimeCard
|
||||
:class="isMobile ? undefined : 'force-bottom'"
|
||||
|
|
@ -48,6 +49,7 @@ import PrintView from "@/components/Recipe/PrintView";
|
|||
import RecipeEditor from "@/components/Recipe/RecipeEditor";
|
||||
import RecipeTimeCard from "@/components/Recipe/RecipeTimeCard.vue";
|
||||
import EditorButtonRow from "@/components/Recipe/EditorButtonRow";
|
||||
import NoRecipe from "@/components/Fallbacks/NoRecipe";
|
||||
import { user } from "@/mixins/user";
|
||||
import { router } from "@/routes";
|
||||
|
||||
|
|
@ -59,6 +61,7 @@ export default {
|
|||
EditorButtonRow,
|
||||
RecipeTimeCard,
|
||||
PrintView,
|
||||
NoRecipe,
|
||||
},
|
||||
mixins: [user],
|
||||
inject: {
|
||||
|
|
@ -68,6 +71,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
loadFailed: false,
|
||||
skeleton: true,
|
||||
form: false,
|
||||
jsonEditor: false,
|
||||
|
|
@ -99,6 +103,7 @@ export default {
|
|||
|
||||
async mounted() {
|
||||
await this.getRecipeDetails();
|
||||
|
||||
this.jsonEditor = false;
|
||||
this.form = this.$route.query.edit === "true" && this.loggedIn;
|
||||
|
||||
|
|
@ -141,6 +146,12 @@ export default {
|
|||
this.saveImage();
|
||||
},
|
||||
async getRecipeDetails() {
|
||||
if (this.currentRecipe === "null") {
|
||||
this.skeleton = false;
|
||||
this.loadFailed = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.recipeDetails = await api.recipes.requestDetails(this.currentRecipe);
|
||||
this.skeleton = false;
|
||||
},
|
||||
|
|
|
|||
280
frontend/src/pages/ShoppingList/index.vue
Normal file
280
frontend/src/pages/ShoppingList/index.vue
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<v-app-bar color="transparent" flat class="mt-n1 rounded">
|
||||
<v-btn v-if="list" color="info" @click="list = null">
|
||||
<v-icon left>
|
||||
mdi-arrow-left-bold
|
||||
</v-icon>
|
||||
All Lists
|
||||
</v-btn>
|
||||
<v-icon v-if="!list" large left>
|
||||
mdi-format-list-checks
|
||||
</v-icon>
|
||||
<v-toolbar-title v-if="!list" class="headline"> Shopping Lists </v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<BaseDialog title="New List" title-icon="mdi-format-list-checks" submit-text="Create" @submit="createNewList">
|
||||
<template v-slot:open="{ open }">
|
||||
<v-btn color="info" @click="open">
|
||||
<v-icon left>
|
||||
mdi-plus
|
||||
</v-icon>
|
||||
New List
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-card-text>
|
||||
<v-text-field autofocus v-model="newList.name" label="List Name"> </v-text-field>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
</v-app-bar>
|
||||
|
||||
<v-slide-x-transition hide-on-leave>
|
||||
<v-row v-if="list == null">
|
||||
<v-col cols="12" :sm="6" :md="6" :lg="4" :xl="3" v-for="(item, index) in group.shoppingLists" :key="index">
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
{{ item.name }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-actions>
|
||||
<v-btn text color="error" @click="deleteList(item.id)">
|
||||
<v-icon left>
|
||||
mdi-delete
|
||||
</v-icon>
|
||||
Delete
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="info" @click="list = item.id">
|
||||
<v-icon left>
|
||||
mdi-cart-check
|
||||
</v-icon>
|
||||
View
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-card v-else-if="activeList">
|
||||
<v-card-title class="headline">
|
||||
<TheCopyButton v-if="!edit" :copy-text="listAsText" color="info" />
|
||||
<v-text-field label="Name" single-line dense v-if="edit" v-model="activeList.name"> </v-text-field>
|
||||
<div v-else>
|
||||
{{ activeList.name }}
|
||||
</div>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="edit" color="success" @click="saveList">
|
||||
Save
|
||||
</v-btn>
|
||||
<v-btn v-else color="info" @click="edit = true">
|
||||
Edit
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2 mb-1"></v-divider>
|
||||
|
||||
<SearchDialog ref="searchRecipe" @select="importIngredients" />
|
||||
<v-card-text>
|
||||
<v-row dense v-for="(item, index) in activeList.items" :key="index">
|
||||
<v-col v-if="edit" cols="12" class="d-flex no-wrap align-center">
|
||||
<p class="mb-0">Quantity: {{ item.quantity }}</p>
|
||||
<div v-if="edit">
|
||||
<v-btn x-small text class="ml-1" @click="activeList.items[index].quantity -= 1">
|
||||
<v-icon>
|
||||
mdi-minus
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<v-btn x-small text class="mr-1" @click="activeList.items[index].quantity += 1">
|
||||
<v-icon>
|
||||
mdi-plus
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="edit" icon @click="removeItemByIndex(index)" color="error">
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" class="d-flex no-wrap align-center">
|
||||
<v-checkbox
|
||||
v-if="!edit"
|
||||
hide-details
|
||||
v-model="activeList.items[index].checked"
|
||||
class="pt-0 my-auto py-auto"
|
||||
color="secondary"
|
||||
@change="saveList"
|
||||
></v-checkbox>
|
||||
|
||||
<p v-if="!edit" class="mb-0">{{ item.quantity }}</p>
|
||||
|
||||
<v-icon v-if="!edit" small class="mx-3">
|
||||
mdi-window-close
|
||||
</v-icon>
|
||||
|
||||
<vue-markdown v-if="!edit" class="dense-markdown" :source="item.text"> </vue-markdown>
|
||||
<v-textarea
|
||||
single-line
|
||||
rows="1"
|
||||
auto-grow
|
||||
class="mb-n2 pa-0"
|
||||
dense
|
||||
v-else
|
||||
v-model="activeList.items[index].text"
|
||||
></v-textarea>
|
||||
</v-col>
|
||||
<v-divider class="ma-1"></v-divider>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="edit" color="success" @click="openSearch">
|
||||
<v-icon left>
|
||||
mdi-silverware-variant
|
||||
</v-icon>
|
||||
From Recipe
|
||||
</v-btn>
|
||||
<v-btn v-if="edit" color="success" @click="newItem">
|
||||
<v-icon left>
|
||||
mdi-plus
|
||||
</v-icon>
|
||||
New
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-slide-x-transition>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
|
||||
import SearchDialog from "@/components/UI/Search/SearchDialog";
|
||||
import TheCopyButton from "@/components/UI/Buttons/TheCopyButton";
|
||||
import VueMarkdown from "@adapttive/vue-markdown";
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
components: {
|
||||
BaseDialog,
|
||||
SearchDialog,
|
||||
TheCopyButton,
|
||||
VueMarkdown,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newList: {
|
||||
name: "",
|
||||
group: "",
|
||||
items: [],
|
||||
},
|
||||
activeList: null,
|
||||
|
||||
edit: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
group() {
|
||||
return this.$store.getters.getCurrentGroup;
|
||||
},
|
||||
list: {
|
||||
set(list) {
|
||||
this.$router.replace({ query: { ...this.$route.query, list } });
|
||||
},
|
||||
get() {
|
||||
return this.$route.query.list;
|
||||
},
|
||||
},
|
||||
listAsText() {
|
||||
const formatList = this.activeList.items.map(x => {
|
||||
return `${x.quantity} - ${x.text}`;
|
||||
});
|
||||
|
||||
return formatList.join("\n");
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
group: {
|
||||
immediate: true,
|
||||
handler: "setActiveList",
|
||||
},
|
||||
list: {
|
||||
immediate: true,
|
||||
handler: "setActiveList",
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openSearch() {
|
||||
this.$refs.searchRecipe.open();
|
||||
},
|
||||
async importIngredients(_, slug) {
|
||||
const recipe = await api.recipes.requestDetails(slug);
|
||||
|
||||
const ingredients = recipe.recipeIngredient.map(x => ({
|
||||
title: "",
|
||||
text: x,
|
||||
quantity: 1,
|
||||
checked: false,
|
||||
}));
|
||||
|
||||
this.activeList.items = [...this.activeList.items, ...ingredients];
|
||||
this.consolidateList();
|
||||
},
|
||||
consolidateList() {
|
||||
const allText = this.activeList.items.map(x => x.text);
|
||||
|
||||
const uniqueText = allText.filter((item, index) => {
|
||||
return allText.indexOf(item) === index;
|
||||
});
|
||||
|
||||
const newItems = uniqueText.map(x => {
|
||||
let matchingItems = this.activeList.items.filter(y => y.text === x);
|
||||
matchingItems[0].quantity = this.sumQuantiy(matchingItems);
|
||||
return matchingItems[0];
|
||||
});
|
||||
|
||||
this.activeList.items = newItems;
|
||||
},
|
||||
sumQuantiy(itemList) {
|
||||
let quantity = 0;
|
||||
itemList.forEach(element => {
|
||||
quantity += element.quantity;
|
||||
});
|
||||
return quantity;
|
||||
},
|
||||
setActiveList() {
|
||||
if (!this.list) return null;
|
||||
if (!this.group.shoppingLists) return null;
|
||||
this.activeList = this.group.shoppingLists.find(x => x.id == this.list);
|
||||
},
|
||||
async createNewList() {
|
||||
this.newList.group = this.group.name;
|
||||
|
||||
await api.shoppingLists.createShoppingList(this.newList);
|
||||
|
||||
this.$store.dispatch("requestCurrentGroup");
|
||||
},
|
||||
async deleteList(id) {
|
||||
await api.shoppingLists.deleteShoppingList(id);
|
||||
this.$store.dispatch("requestCurrentGroup");
|
||||
},
|
||||
removeItemByIndex(index) {
|
||||
this.activeList.items.splice(index, 1);
|
||||
},
|
||||
newItem() {
|
||||
this.activeList.items.push({
|
||||
title: null,
|
||||
text: "",
|
||||
quantity: 1,
|
||||
checked: false,
|
||||
});
|
||||
},
|
||||
async saveList() {
|
||||
await this.consolidateList();
|
||||
await api.shoppingLists.updateShoppingList(this.activeList.id, this.activeList);
|
||||
this.edit = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style >
|
||||
</style>
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import SearchPage from "@/pages/SearchPage";
|
||||
import HomePage from "@/pages/HomePage";
|
||||
import ShoppingList from "@/pages/ShoppingList";
|
||||
|
||||
export const generalRoutes = [
|
||||
{ path: "/", name: "home", component: HomePage },
|
||||
{ path: "/mealie", component: HomePage },
|
||||
{ path: "/shopping-list", component: ShoppingList },
|
||||
{
|
||||
path: "/search",
|
||||
component: SearchPage,
|
||||
|
|
|
|||
|
|
@ -5,18 +5,14 @@ import { store } from "@/store";
|
|||
|
||||
export const utils = {
|
||||
recipe: recipe,
|
||||
getImageURL(image) {
|
||||
return `/api/recipes/${image}/image?image_type=small`;
|
||||
},
|
||||
generateUniqueKey(item, index) {
|
||||
const uniqueKey = `${item}-${index}`;
|
||||
return uniqueKey;
|
||||
},
|
||||
getDateAsPythonDate(dateObject) {
|
||||
const month = dateObject.getUTCMonth() + 1;
|
||||
const day = dateObject.getUTCDate();
|
||||
const month = dateObject.getMonth() + 1;
|
||||
const day = dateObject.getDate();
|
||||
const year = dateObject.getFullYear();
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
notify: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue