feat: Add Household Filter to Meal Plan Rules (#4231)

frontend/components/Domain/Household/GroupHouseholdSelector.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-select
+    v-model="selected"
+    :items="households"
+    :label="label"
+    :hint="description"
+    :persistent-hint="!!description"
+    item-text="name"
+    :multiple="multiselect"
+    :prepend-inner-icon="$globals.icons.household"
+    return-object
+  >
+    <template #selection="data">
+      <v-chip
+        :key="data.index"
+        class="ma-1"
+        :input-value="data.selected"
+        small
+        close
+        label
+        color="accent"
+        dark
+        @click:close="removeByIndex(data.index)"
+      >
+        {{ data.item.name || data.item }}
+      </v-chip>
+    </template>
+  </v-select>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, useContext } from "@nuxtjs/composition-api";
+import { useHouseholdStore } from "~/composables/store/use-household-store";
+
+interface HouseholdLike {
+  id: string;
+  name: string;
+}
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Array as () => HouseholdLike[],
+      required: true,
+    },
+    multiselect: {
+      type: Boolean,
+      default: false,
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props, context) {
+    const selected = computed({
+      get: () => props.value,
+      set: (val) => {
+        context.emit("input", val);
+      },
+    });
+
+    onMounted(() => {
+      if (selected.value === undefined) {
+        selected.value = [];
+      }
+    });
+
+    const { i18n } = useContext();
+    const label = computed(
+      () => props.multiselect ? i18n.tc("household.households") : i18n.tc("household.household")
+    );
+
+    const { store: households } = useHouseholdStore();
+    function removeByIndex(index: number) {
+      if (selected.value === undefined) {
+        return;
+      }
+      const newSelected = selected.value.filter((_, i) => i !== index);
+      selected.value = [...newSelected];
+    }
+
+    return {
+      selected,
+      label,
+      households,
+      removeByIndex,
+    };
+  },
+});
+</script>

frontend/components/Domain/Household/GroupMealPlanRuleForm.vue

@@ -5,8 +5,15 @@
       <v-select v-model="inputEntryType" :items="MEAL_TYPE_OPTIONS" :label="$t('meal-plan.meal-type')"></v-select>
     </div>
 
-    <RecipeOrganizerSelector v-model="inputCategories" selector-type="categories" />
-    <RecipeOrganizerSelector v-model="inputTags" selector-type="tags" />
+    <div class="mb-5">
+      <RecipeOrganizerSelector v-model="inputCategories" selector-type="categories" />
+      <RecipeOrganizerSelector v-model="inputTags" selector-type="tags" />
+      <GroupHouseholdSelector
+        v-model="inputHouseholds"
+        multiselect
+        :description="$tc('meal-plan.mealplan-households-description')"
+      />
+    </div>
 
     <!-- TODO: proper pluralization of inputDay -->
     {{ $t('meal-plan.this-rule-will-apply', {
@@ -18,11 +25,13 @@
 
 <script lang="ts">
 import { defineComponent, computed, useContext } from "@nuxtjs/composition-api";
+import GroupHouseholdSelector from "~/components/Domain/Household/GroupHouseholdSelector.vue";
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
-import { RecipeTag, RecipeCategory } from "~/lib/api/types/recipe";
+import { PlanCategory, PlanHousehold, PlanTag } from "~/lib/api/types/meal-plan";
 
 export default defineComponent({
   components: {
+    GroupHouseholdSelector,
     RecipeOrganizerSelector,
   },
   props: {
@@ -35,11 +44,15 @@ export default defineComponent({
       default: "unset",
     },
     categories: {
-      type: Array as () => RecipeCategory[],
+      type: Array as () => PlanCategory[],
       default: () => [],
     },
     tags: {
-      type: Array as () => RecipeTag[],
+      type: Array as () => PlanTag[],
+      default: () => [],
+    },
+    households: {
+      type: Array as () => PlanHousehold[],
       default: () => [],
     },
     showHelp: {
@@ -105,6 +118,15 @@ export default defineComponent({
       },
     });
 
+    const inputHouseholds = computed({
+      get: () => {
+        return props.households;
+      },
+      set: (val) => {
+        context.emit("update:households", val);
+      },
+    });
+
     return {
       MEAL_TYPE_OPTIONS,
       MEAL_DAY_OPTIONS,
@@ -112,6 +134,7 @@ export default defineComponent({
       inputEntryType,
       inputCategories,
       inputTags,
+      inputHouseholds,
     };
   },
 });

frontend/lang/messages/en-US.json

@@ -315,6 +315,10 @@
     "mealplan-settings": "Mealplan Settings",
     "mealplan-update-failed": "Mealplan update failed",
     "mealplan-updated": "Mealplan Updated",
+    "mealplan-households-description": "If no household is selected, recipes can be added from any household",
+    "any-category": "Any Category",
+    "any-tag": "Any Tag",
+    "any-household": "Any Household",
     "no-meal-plan-defined-yet": "No meal plan defined yet",
     "no-meal-planned-for-today": "No meal planned for today",
     "numberOfDays-hint": "Number of days on page load",

frontend/lib/api/types/meal-plan.ts

@@ -31,13 +31,24 @@ export interface ListItem {
   quantity?: number;
   checked?: boolean;
 }
+export interface PlanCategory {
+  id: string;
+  name: string;
+  slug: string;
+}
+export interface PlanHousehold {
+  id: string;
+  name: string;
+  slug: string;
+}
 export interface PlanRulesCreate {
   day?: PlanRulesDay & string;
   entryType?: PlanRulesType & string;
-  categories?: Category[];
-  tags?: Tag[];
+  categories?: PlanCategory[];
+  tags?: PlanTag[];
+  households?: PlanHousehold[];
 }
-export interface Tag {
+export interface PlanTag {
   id: string;
   name: string;
   slug: string;
@@ -45,8 +56,9 @@ export interface Tag {
 export interface PlanRulesOut {
   day?: PlanRulesDay & string;
   entryType?: PlanRulesType & string;
-  categories?: Category[];
-  tags?: Tag[];
+  categories?: PlanCategory[];
+  tags?: PlanTag[];
+  households?: PlanHousehold[];
   groupId: string;
   householdId: string;
   id: string;
@@ -54,8 +66,9 @@ export interface PlanRulesOut {
 export interface PlanRulesSave {
   day?: PlanRulesDay & string;
   entryType?: PlanRulesType & string;
-  categories?: Category[];
-  tags?: Tag[];
+  categories?: PlanCategory[];
+  tags?: PlanTag[];
+  households?: PlanHousehold[];
   groupId: string;
   householdId: string;
 }

frontend/pages/household/mealplan/settings.vue

@@ -20,6 +20,7 @@
           :entry-type.sync="createData.entryType"
           :categories.sync="createData.categories"
           :tags.sync="createData.tags"
+          :households.sync="createData.households"
         />
       </v-card-text>
       <v-card-actions class="justify-end">
@@ -58,12 +59,58 @@
               <template v-if="!editState[rule.id]">
                 <div v-if="rule.categories">
                   <h4 class="py-1">{{ $t("category.categories") }}:</h4>
-                  <RecipeChips :items="rule.categories" small />
+                  <RecipeChips v-if="rule.categories.length" :items="rule.categories" small class="pb-3" />
+                  <v-card-text
+                    v-else
+                    label
+                    class="ma-0 px-0 pt-0 pb-3"
+                    text-color="accent"
+                    small
+                    dark
+                  >
+                    {{ $tc("meal-plan.any-category") }}
+                  </v-card-text>
                 </div>
 
                 <div v-if="rule.tags">
                   <h4 class="py-1">{{ $t("tag.tags") }}:</h4>
-                  <RecipeChips :items="rule.tags" url-prefix="tags" small />
+                  <RecipeChips v-if="rule.tags.length" :items="rule.tags" url-prefix="tags" small class="pb-3" />
+                  <v-card-text
+                    v-else
+                    label
+                    class="ma-0 px-0 pt-0 pb-3"
+                    text-color="accent"
+                    small
+                    dark
+                  >
+                    {{ $tc("meal-plan.any-tag") }}
+                  </v-card-text>
+                </div>
+                <div v-if="rule.households">
+                  <h4 class="py-1">{{ $t("household.households") }}:</h4>
+                  <div v-if="rule.households.length">
+                    <v-chip
+                      v-for="household in rule.households"
+                      :key="household.id"
+                      label
+                      class="ma-1"
+                      color="accent"
+                      small
+                      dark
+                    >
+                      {{ household.name }}
+                    </v-chip>
+                  </div>
+                  <v-card-text
+                    v-else
+                    label
+                    class="ma-0 px-0 pt-0 pb-3"
+                    text-color="accent"
+                    small
+                    dark
+                  >
+                    {{ $tc("meal-plan.any-household") }}
+                  </v-card-text>
                 </div>
               </template>
               <template v-else>
@@ -72,6 +119,7 @@
                   :entry-type.sync="allRules[idx].entryType"
                   :categories.sync="allRules[idx].categories"
                   :tags.sync="allRules[idx].tags"
+                  :households.sync="allRules[idx].households"
                 />
                 <div class="d-flex justify-end">
                   <BaseButton update @click="updateRule(rule)" />
@@ -138,6 +186,7 @@ export default defineComponent({
       day: "unset",
       categories: [],
       tags: [],
+      households: [],
     });
 
     async function createRule() {
@@ -149,6 +198,7 @@ export default defineComponent({
           day: "unset",
           categories: [],
           tags: [],
+          households: [],
         };
       }
     }