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/pages/404Page.vue

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

frontend/src/pages/MealPlan/Planner.vue

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

frontend/src/pages/MealPlan/ThisWeek.vue

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

frontend/src/pages/Recipe/ViewRecipe.vue

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

frontend/src/pages/ShoppingList/index.vue

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