MealPlanRuleForm and add missing evens to QueryBuilder

frontend/components/Domain/Household/GroupMealPlanRuleForm.vue

@@ -5,12 +5,12 @@
       style="gap: 10px"
     >
       <v-select
-        v-model="inputDay"
+        v-model="day"
         :items="MEAL_DAY_OPTIONS"
         :label="$t('meal-plan.rule-day')"
       />
       <v-select
-        v-model="inputEntryType"
+        v-model="entryType"
         :items="MEAL_TYPE_OPTIONS"
         :label="$t('meal-plan.meal-type')"
       />
@@ -19,15 +19,15 @@
     <div class="mb-5">
       <QueryFilterBuilder
         :field-defs="fieldDefs"
-        :initial-query-filter="queryFilter"
+        :initial-query-filter="props.queryFilter"
         @input="handleQueryFilterInput"
       />
     </div>
 
     <!-- TODO: proper pluralization of inputDay -->
     {{ $t('meal-plan.this-rule-will-apply', {
-      dayCriteria: inputDay === "unset" ? $t('meal-plan.to-all-days') : $t('meal-plan.on-days', [inputDay]),
-      mealTypeCriteria: inputEntryType === "unset" ? $t('meal-plan.for-all-meal-types') : $t('meal-plan.for-type-meal-types', [inputEntryType]),
+      dayCriteria: day === "unset" ? $t('meal-plan.to-all-days') : $t('meal-plan.on-days', [day]),
+      mealTypeCriteria: entryType === "unset" ? $t('meal-plan.for-all-meal-types') : $t('meal-plan.for-type-meal-types', [entryType]),
     }) }}
   </div>
 </template>
@@ -39,20 +39,17 @@ import { Organizer } from "~/lib/api/types/non-generated";
 import type { QueryFilterJSON } from "~/lib/api/types/response";
 
 interface Props {
-  day?: string;
-  entryType?: string;
-  queryFilterString?: string;
   queryFilter?: QueryFilterJSON | null;
   showHelp?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
-  day: "unset",
-  entryType: "unset",
-  queryFilterString: "",
   queryFilter: null,
   showHelp: false,
 });
-const emit = defineEmits(["update:day", "update:entry-type", "update:query-filter-string"]);
+
+const day = defineModel<string>("day", { default: "unset" });
+const entryType = defineModel<string>("entryType", { default: "unset" });
+const queryFilterString = defineModel<string>("queryFilterString", { default: "" });
 
 const i18n = useI18n();
 
@@ -75,35 +72,9 @@ const MEAL_DAY_OPTIONS = [
   { title: i18n.t("meal-plan.day-any"), value: "unset" },
 ];
 
-const inputDay = computed({
-  get: () => {
-    return props.day;
-  },
-  set: (val) => {
-    emit("update:day", val);
-  },
-});
-
-const inputEntryType = computed({
-  get: () => {
-    return props.entryType;
-  },
-  set: (val) => {
-    emit("update:entry-type", val);
-  },
-});
-
-const inputQueryFilterString = computed({
-  get: () => {
-    return props.queryFilterString;
-  },
-  set: (val) => {
-    emit("update:query-filter-string", val);
-  },
-});
-
 function handleQueryFilterInput(value: string | undefined) {
-  inputQueryFilterString.value = value || "";
+  console.warn("handleQueryFilterInput called with value:", value);
+  queryFilterString.value = value || "";
 }
 
 const fieldDefs: FieldDefinition[] = [

frontend/components/Domain/QueryFilterBuilder.vue

@@ -147,7 +147,7 @@
                 :model-value="field.value"
                 type="number"
                 variant="underlined"
-                @:model-value="setFieldValue(field, index, $event)"
+                @update:model-value="setFieldValue(field, index, $event)"
               />
               <v-checkbox
                 v-else-if="field.type === 'boolean'"
@@ -190,6 +190,7 @@
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
+                @update:model-value="setFieldOrganizers(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Tag"
@@ -199,6 +200,7 @@
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
+                @update:model-value="setFieldOrganizers(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Tool"
@@ -208,6 +210,7 @@
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
+                @update:model-value="setFieldOrganizers(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Food"
@@ -217,6 +220,7 @@
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
+                @update:model-value="setFieldOrganizers(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Household"
@@ -226,6 +230,7 @@
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
+                @update:model-value="setFieldOrganizers(field, index, $event)"
               />
             </v-col>
             <!-- right parenthesis -->
@@ -414,6 +419,12 @@ function setFieldValues(field: FieldWithId, index: number, values: FieldValue[])
   fields.value[index].values = values;
 }
 
+function setFieldOrganizers(field: FieldWithId, index: number, organizers: OrganizerBase[]) {
+  fields.value[index].organizers = organizers;
+  // Sync the values array with the organizers array
+  fields.value[index].values = organizers.map(org => org.id?.toString() || "").filter(id => id);
+}
+
 function removeField(index: number) {
   fields.value.splice(index, 1);
   state.datePickers.splice(index, 1);