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