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