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>

frontend/src/components/Fallbacks/NoRecipe.vue

@@ -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>
+
+
+

frontend/src/components/Fallbacks/The404.vue

@@ -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>

frontend/src/components/MealPlan/MealPlanCard.vue

@@ -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>

frontend/src/components/MealPlan/MealPlanEditor.vue

@@ -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);

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -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;
       }

frontend/src/components/Recipe/CardImage.vue

@@ -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>

frontend/src/components/Recipe/RecipeCard.vue

@@ -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>

frontend/src/components/UI/Buttons/TheCopyButton.vue

@@ -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 {

frontend/src/components/UI/Dialogs/BaseDialog.vue

@@ -64,7 +64,7 @@ export default {
       default: false,
     },
     top: {
-      default: false,
+      default: null,
     },
     submitText: {
       default: () => i18n.t("general.create"),

frontend/src/components/UI/Search/SearchDialog.vue

@@ -74,8 +74,6 @@ export default {
     },
     open() {
       this.dialog = true;
-      this.$refs.mealSearchBar.resetSearch();
-      this.$router.push("#search");
     },
     toggleDialog(open) {
       if (open) {

frontend/src/components/UI/TheSiteMenu.vue

@@ -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"),