Feature/automated meal planner (#939)

* cleanup oversized buttons

* add get all by category function to reciep repos

* fix shopping-list can_merge logic

* use randomized data for testing

* add random getter to repository for meal-planner

* add stub route for random meals

* cleanup global namespace

* add rules database type

* fix type

* add plan rules schema

* test plan rules methods

* add mealplan rules controller

* add new repository

* update frontend types

* formatting

* fix regression

* update autogenerated types

* add api class for mealplan rules

* add tests and fix bugs

* fix data returns

* proof of concept rules editor

* add tag support

* remove old group categories

* add tag support

* implement random by rules api

* change snack to sides

* remove incorrect typing

* split repo for custom methods

* fix query and use and_ clause

* use repo function

* remove old test

* update changelog

frontend/pages/group/mealplan/planner.vue

@@ -70,7 +70,10 @@
         </v-btn>
       </div>
     </div>
-    <v-switch v-model="edit" label="Editor"></v-switch>
+    <div class="d-flex align-center justify-space-between">
+      <v-switch v-model="edit" label="Editor"></v-switch>
+      <ButtonLink :icon="$globals.icons.calendar" to="/group/mealplan/settings" text="Settings" />
+    </div>
     <v-row class="">
       <v-col
         v-for="(plan, index) in mealsByDate"
@@ -143,9 +146,6 @@
                   </v-list>
                 </v-menu>
                 <v-spacer></v-spacer>
-                <v-btn color="info" class="mr-2" small icon>
-                  <v-icon>{{ $globals.icons.cartCheck }}</v-icon>
-                </v-btn>
                 <v-btn color="error" small icon @click="actions.deleteOne(mealplan.id)">
                   <v-icon>{{ $globals.icons.delete }}</v-icon>
                 </v-btn>
@@ -154,20 +154,50 @@
           </draggable>
 
           <!-- Day Column Actions -->
-          <v-card outlined class="mt-auto">
-            <v-card-actions class="d-flex">
-              <div style="width: 50%">
-                <v-btn block text @click="randomMeal(plan.date)">
-                  <v-icon large>{{ $globals.icons.diceMultiple }}</v-icon>
-                </v-btn>
-              </div>
-              <div style="width: 50%">
-                <v-btn block text @click="openDialog(plan.date)">
-                  <v-icon large>{{ $globals.icons.createAlt }}</v-icon>
-                </v-btn>
-              </div>
-            </v-card-actions>
-          </v-card>
+          <div class="d-flex justify-end">
+            <BaseButtonGroup
+              :buttons="[
+                {
+                  icon: $globals.icons.diceMultiple,
+                  text: 'Random Meal',
+                  event: 'random',
+                  children: [
+                    {
+                      icon: $globals.icons.dice,
+                      text: 'Breakfast',
+                      event: 'randomBreakfast',
+                    },
+
+                    {
+                      icon: $globals.icons.dice,
+                      text: 'Lunch',
+                      event: 'randomLunch',
+                    },
+                  ],
+                },
+                {
+                  icon: $globals.icons.potSteam,
+                  text: 'Random Dinner',
+                  event: 'randomDinner',
+                },
+                {
+                  icon: $globals.icons.bolwMixOutline,
+                  text: 'Random Side',
+                  event: 'randomSide',
+                },
+                {
+                  icon: $globals.icons.createAlt,
+                  text: $t('general.new'),
+                  event: 'create',
+                },
+              ]"
+              @create="openDialog(plan.date)"
+              @randomBreakfast="randomMeal(plan.date, 'breakfast')"
+              @randomLunch="randomMeal(plan.date, 'lunch')"
+              @randomDinner="randomMeal(plan.date, 'dinner')"
+              @randomSide="randomMeal(plan.date, 'side')"
+            />
+          </div>
         </template>
         <template v-else-if="plan.meals">
           <RecipeCard
@@ -211,6 +241,7 @@ import { useRecipes, allRecipes } from "~/composables/recipes";
 import RecipeCardImage from "~/components/Domain/Recipe/RecipeCardImage.vue";
 import RecipeCard from "~/components/Domain/Recipe/RecipeCard.vue";
 import { PlanEntryType } from "~/types/api-types/meal-plan";
+import { useUserApi } from "~/composables/api";
 
 export default defineComponent({
   components: {
@@ -234,6 +265,8 @@ export default defineComponent({
       };
     });
 
+    const api = useUserApi();
+
     const { mealplans, actions, loading } = useMealplans(weekRange);
 
     useRecipes(true, true);
@@ -329,19 +362,15 @@ export default defineComponent({
       newMeal.recipeId = undefined;
     }
 
-    async function randomMeal(date: Date) {
-      // TODO: Refactor to use API call to get random recipe
-      const randomRecipe = allRecipes.value?.[Math.floor(Math.random() * allRecipes.value.length)];
-      if (!randomRecipe) return;
+    async function randomMeal(date: Date, type: PlanEntryType) {
+      const { data } = await api.mealplans.setRandom({
+        date: format(date, "yyyy-MM-dd"),
+        entryType: type,
+      });
 
-      newMeal.date = format(date, "yyyy-MM-dd");
-
-      newMeal.recipeId = randomRecipe.id;
-
-      console.log(newMeal.recipeId, randomRecipe.id);
-
-      await actions.createOne({ ...newMeal });
-      resetDialog();
+      if (data) {
+        actions.refreshAll();
+      }
     }
 
     return {

frontend/pages/group/mealplan/settings.vue

@@ -0,0 +1,179 @@
+<template>
+  <v-container class="md-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="100" max-width="100" :src="require('~/static/svgs/manage-cookbooks.svg')"></v-img>
+      </template>
+      <template #title> Meal Plan Rules </template>
+      Here you can set rules for auto selecting recipes for you meal plans. These rules are used by the server to
+      determine the random pool of recipes to select from when creating meal plans. Note that if rules have the same
+      day/type constraints then the categories of the rules will be merged. In practice, it's unnecessary to create
+      duplicate rules, but it's possible to do so.
+    </BasePageTitle>
+
+    <v-card>
+      <v-card-title class="headline"> New Rule </v-card-title>
+      <v-divider class="mx-2"></v-divider>
+      <v-card-text>
+        When creating a new rule for a meal plan you can restrict the rule to be applicable for a specific day of the
+        week and/or a specific type of meal. To apply a rule to all days or all meal types you can set the rule to "Any"
+        which will apply it to all the possible values for the day and/or meal type.
+
+        <GroupMealPlanRuleForm
+          class="mt-2"
+          :day.sync="createData.day"
+          :entry-type.sync="createData.entryType"
+          :categories.sync="createData.categories"
+          :tags.sync="createData.tags"
+        />
+      </v-card-text>
+      <v-card-actions class="justify-end">
+        <BaseButton create @click="createRule" />
+      </v-card-actions>
+    </v-card>
+
+    <section>
+      <BaseCardSectionTitle class="mt-10" title="Recipe Rules" />
+      <div>
+        <div v-for="(rule, idx) in allRules" :key="rule.id">
+          <v-card class="my-2">
+            <v-card-title>
+              {{ rule.day }} - {{ rule.entryType }}
+              <span class="ml-auto">
+                <BaseButtonGroup
+                  :buttons="[
+                    {
+                      icon: $globals.icons.edit,
+                      text: $t('general.edit'),
+                      event: 'edit',
+                    },
+                    {
+                      icon: $globals.icons.delete,
+                      text: $t('general.delete'),
+                      event: 'delete',
+                    },
+                  ]"
+                  @delete="deleteRule(rule.id)"
+                  @edit="toggleEditState(rule.id)"
+                />
+              </span>
+            </v-card-title>
+            <v-card-text>
+              <template v-if="!editState[rule.id]">
+                <div>Categories: {{ rule.categories.map((c) => c.name).join(", ") }}</div>
+                <div>Tags: {{ rule.tags.map((t) => t.name).join(", ") }}</div>
+              </template>
+              <template v-else>
+                <GroupMealPlanRuleForm
+                  :day.sync="allRules[idx].day"
+                  :entry-type.sync="allRules[idx].entryType"
+                  :categories.sync="allRules[idx].categories"
+                  :tags.sync="allRules[idx].tags"
+                />
+                <div class="d-flex justify-end">
+                  <BaseButton update @click="updateRule(rule)" />
+                </div>
+              </template>
+            </v-card-text>
+          </v-card>
+        </div>
+      </div>
+    </section>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, useAsync } from "@nuxtjs/composition-api";
+import { useUserApi } from "~/composables/api";
+import { PlanRulesCreate, PlanRulesOut } from "~/types/api-types/meal-plan";
+import GroupMealPlanRuleForm from "~/components/Domain/Group/GroupMealPlanRuleForm.vue";
+import { useAsyncKey } from "~/composables/use-utils";
+
+export default defineComponent({
+  components: {
+    GroupMealPlanRuleForm,
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    const api = useUserApi();
+
+    // ======================================================
+    // Manage All
+    const editState = ref<{ [key: string]: boolean }>({});
+    const allRules = ref<PlanRulesOut[]>([]);
+
+    function toggleEditState(id: string) {
+      editState.value[id] = !editState.value[id];
+      editState.value = { ...editState.value };
+    }
+
+    async function refreshAll() {
+      const { data } = await api.mealplanRules.getAll();
+
+      if (data) {
+        allRules.value = data;
+      }
+    }
+
+    useAsync(async () => {
+      await refreshAll();
+    }, useAsyncKey());
+
+    // ======================================================
+    // Creating Rules
+
+    const createData = ref<PlanRulesCreate>({
+      entryType: "unset",
+      day: "unset",
+      categories: [],
+      tags: [],
+    });
+
+    async function createRule() {
+      const { data } = await api.mealplanRules.createOne(createData.value);
+      if (data) {
+        refreshAll();
+        createData.value = {
+          entryType: "unset",
+          day: "unset",
+          categories: [],
+          tags: [],
+        };
+      }
+    }
+
+    async function deleteRule(ruleId: string) {
+      const { data } = await api.mealplanRules.deleteOne(ruleId);
+      if (data) {
+        refreshAll();
+      }
+    }
+
+    async function updateRule(rule: PlanRulesOut) {
+      const { data } = await api.mealplanRules.updateOne(rule.id, rule);
+      if (data) {
+        refreshAll();
+        toggleEditState(rule.id);
+      }
+    }
+
+    return {
+      allRules,
+      createData,
+      createRule,
+      deleteRule,
+      editState,
+      updateRule,
+      toggleEditState,
+    };
+  },
+  head: {
+    title: "Meal Plan Settings",
+  },
+});
+</script>

frontend/pages/user/group/index.vue

@@ -7,16 +7,6 @@
       <template #title> Group Settings </template>
       These items are shared within your group. Editing one of them will change it for the whole group!
     </BasePageTitle>
-    <section>
-      <BaseCardSectionTitle title="Mealplan Categories">
-        Set the categories below for the ones that you want to be included in your mealplan random generation.
-      </BaseCardSectionTitle>
-      <DomainRecipeCategoryTagSelector v-if="categories" v-model="categories" />
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <BaseButton save @click="actions.updateAll()" />
-      </v-card-actions>
-    </section>
 
     <section v-if="group">
       <BaseCardSectionTitle class="mt-10" title="Group Preferences"></BaseCardSectionTitle>
@@ -82,14 +72,13 @@
     </section>
   </v-container>
 </template>
-    
+
 <script lang="ts">
 import { defineComponent, useContext } from "@nuxtjs/composition-api";
-import { useGroupCategories, useGroupSelf } from "~/composables/use-groups";
+import { useGroupSelf } from "~/composables/use-groups";
 
 export default defineComponent({
   setup() {
-    const { categories, actions } = useGroupCategories();
     const { group, actions: groupActions } = useGroupSelf();
 
     const { i18n } = useContext();
@@ -126,8 +115,6 @@ export default defineComponent({
     ];
 
     return {
-      categories,
-      actions,
       group,
       groupActions,
       allDays,
@@ -140,5 +127,3 @@ export default defineComponent({
   },
 });
 </script>
-    
-