From eefe613aafe7af651df8eea60d6963c9d4d4c2f8 Mon Sep 17 00:00:00 2001
From: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
Date: Tue, 29 Jul 2025 23:43:13 +0200
Subject: [PATCH] fix: QueryFilter Hydration & script setup (#5839)

---
 .../Domain/Cookbook/CookbookEditor.vue        | 112 ++-
 .../Domain/Cookbook/CookbookPage.vue          | 112 ++-
 .../components/Domain/QueryFilterBuilder.vue  | 672 +++++++++---------
 .../Domain/Recipe/RecipeOrganizerSelector.vue | 292 ++++----
 .../pages/g/[groupSlug]/cookbooks/index.vue   |   4 +-
 5 files changed, 534 insertions(+), 658 deletions(-)

diff --git a/frontend/components/Domain/Cookbook/CookbookEditor.vue b/frontend/components/Domain/Cookbook/CookbookEditor.vue
index 1ee47067d..5598fcb1d 100644
--- a/frontend/components/Domain/Cookbook/CookbookEditor.vue
+++ b/frontend/components/Domain/Cookbook/CookbookEditor.vue
@@ -44,78 +44,54 @@
   </div>
 </template>
 
-<script lang="ts">
-import type { ReadCookBook } from "~/lib/api/types/cookbook";
+<script setup lang="ts">
 import { Organizer } from "~/lib/api/types/non-generated";
 import QueryFilterBuilder from "~/components/Domain/QueryFilterBuilder.vue";
 import type { FieldDefinition } from "~/composables/use-query-filter-builder";
+import type { ReadCookBook } from "~/lib/api/types/cookbook";
 
-export default defineNuxtComponent({
-  components: { QueryFilterBuilder },
-  props: {
-    modelValue: {
-      type: Object as () => ReadCookBook,
-      required: true,
-    },
-    actions: {
-      type: Object as () => any,
-      required: true,
-    },
+const modelValue = defineModel<ReadCookBook>({ required: true });
+const i18n = useI18n();
+const cookbook = toRef(modelValue);
+function handleInput(value: string | undefined) {
+  cookbook.value.queryFilterString = value || "";
+}
+
+const fieldDefs: FieldDefinition[] = [
+  {
+    name: "recipe_category.id",
+    label: i18n.t("category.categories"),
+    type: Organizer.Category,
   },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const i18n = useI18n();
-
-    const cookbook = toRef(() => props.modelValue);
-
-    function handleInput(value: string | undefined) {
-      cookbook.value.queryFilterString = value || "";
-      emit("update:modelValue", cookbook.value);
-    }
-
-    const fieldDefs: FieldDefinition[] = [
-      {
-        name: "recipe_category.id",
-        label: i18n.t("category.categories"),
-        type: Organizer.Category,
-      },
-      {
-        name: "tags.id",
-        label: i18n.t("tag.tags"),
-        type: Organizer.Tag,
-      },
-      {
-        name: "recipe_ingredient.food.id",
-        label: i18n.t("recipe.ingredients"),
-        type: Organizer.Food,
-      },
-      {
-        name: "tools.id",
-        label: i18n.t("tool.tools"),
-        type: Organizer.Tool,
-      },
-      {
-        name: "household_id",
-        label: i18n.t("household.households"),
-        type: Organizer.Household,
-      },
-      {
-        name: "created_at",
-        label: i18n.t("general.date-created"),
-        type: "date",
-      },
-      {
-        name: "updated_at",
-        label: i18n.t("general.date-updated"),
-        type: "date",
-      },
-    ];
-
-    return {
-      cookbook,
-      handleInput,
-      fieldDefs,
-    };
+  {
+    name: "tags.id",
+    label: i18n.t("tag.tags"),
+    type: Organizer.Tag,
   },
-});
+  {
+    name: "recipe_ingredient.food.id",
+    label: i18n.t("recipe.ingredients"),
+    type: Organizer.Food,
+  },
+  {
+    name: "tools.id",
+    label: i18n.t("tool.tools"),
+    type: Organizer.Tool,
+  },
+  {
+    name: "household_id",
+    label: i18n.t("household.households"),
+    type: Organizer.Household,
+  },
+  {
+    name: "created_at",
+    label: i18n.t("general.date-created"),
+    type: "date",
+  },
+  {
+    name: "updated_at",
+    label: i18n.t("general.date-updated"),
+    type: "date",
+  },
+];
 </script>
diff --git a/frontend/components/Domain/Cookbook/CookbookPage.vue b/frontend/components/Domain/Cookbook/CookbookPage.vue
index 8793cef26..a8cff6753 100644
--- a/frontend/components/Domain/Cookbook/CookbookPage.vue
+++ b/frontend/components/Domain/Cookbook/CookbookPage.vue
@@ -17,7 +17,6 @@
       <v-card-text>
         <CookbookEditor
           v-model="editTarget"
-          :actions="actions"
         />
       </v-card-text>
     </BaseDialog>
@@ -65,7 +64,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useLazyRecipes } from "~/composables/recipes";
 import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
 import { useCookbookStore } from "~/composables/store/use-cookbook-store";
@@ -74,81 +73,58 @@ import { useLoggedInState } from "~/composables/use-logged-in-state";
 import type { RecipeCookBook } from "~/lib/api/types/cookbook";
 import CookbookEditor from "~/components/Domain/Cookbook/CookbookEditor.vue";
 
-export default defineNuxtComponent({
-  components: { RecipeCardSection, CookbookEditor },
-  setup() {
-    const $auth = useMealieAuth();
-    const { isOwnGroup } = useLoggedInState();
+const $auth = useMealieAuth();
+const { isOwnGroup } = useLoggedInState();
 
-    const route = useRoute();
-    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
 
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
-    const slug = route.params.slug as string;
-    const { getOne } = useCookbook(isOwnGroup.value ? null : groupSlug.value);
-    const { actions } = useCookbookStore();
-    const router = useRouter();
+const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
+const slug = route.params.slug as string;
+const { getOne } = useCookbook(isOwnGroup.value ? null : groupSlug.value);
+const { actions } = useCookbookStore();
+const router = useRouter();
 
-    const tab = ref(null);
-    const book = getOne(slug);
+const book = getOne(slug);
 
-    const isOwnHousehold = computed(() => {
-      if (!($auth.user.value && book.value?.householdId)) {
-        return false;
-      }
+const isOwnHousehold = computed(() => {
+  if (!($auth.user.value && book.value?.householdId)) {
+    return false;
+  }
 
-      return $auth.user.value.householdId === book.value.householdId;
-    });
-    const canEdit = computed(() => isOwnGroup.value && isOwnHousehold.value);
+  return $auth.user.value.householdId === book.value.householdId;
+});
+const canEdit = computed(() => isOwnGroup.value && isOwnHousehold.value);
 
-    const dialogStates = reactive({
-      edit: false,
-    });
+const dialogStates = reactive({
+  edit: false,
+});
 
-    const editTarget = ref<RecipeCookBook | null>(null);
-    function handleEditCookbook() {
-      dialogStates.edit = true;
-      editTarget.value = book.value;
-    }
+const editTarget = ref<RecipeCookBook | null>(null);
+function handleEditCookbook() {
+  dialogStates.edit = true;
+  editTarget.value = book.value;
+}
 
-    async function editCookbook() {
-      if (!editTarget.value) {
-        return;
-      }
-      const response = await actions.updateOne(editTarget.value);
+async function editCookbook() {
+  if (!editTarget.value) {
+    return;
+  }
+  const response = await actions.updateOne(editTarget.value);
 
-      if (response?.slug && book.value?.slug !== response?.slug) {
-        // if name changed, redirect to new slug
-        router.push(`/g/${route.params.groupSlug}/cookbooks/${response?.slug}`);
-      }
-      else {
-        // otherwise reload the page, since the recipe criteria changed
-        router.go(0);
-      }
-      dialogStates.edit = false;
-      editTarget.value = null;
-    }
+  if (response?.slug && book.value?.slug !== response?.slug) {
+    // if name changed, redirect to new slug
+    router.push(`/g/${route.params.groupSlug}/cookbooks/${response?.slug}`);
+  }
+  else {
+    // otherwise reload the page, since the recipe criteria changed
+    router.go(0);
+  }
+  dialogStates.edit = false;
+  editTarget.value = null;
+}
 
-    useSeoMeta({
-      title: book?.value?.name || "Cookbook",
-    });
-
-    return {
-      book,
-      slug,
-      tab,
-      appendRecipes,
-      assignSorted,
-      recipes,
-      removeRecipe,
-      replaceRecipes,
-      canEdit,
-      dialogStates,
-      editTarget,
-      handleEditCookbook,
-      editCookbook,
-      actions,
-    };
-  },
+useSeoMeta({
+  title: book?.value?.name || "Cookbook",
 });
 </script>
diff --git a/frontend/components/Domain/QueryFilterBuilder.vue b/frontend/components/Domain/QueryFilterBuilder.vue
index 721b540a8..a86e822ab 100644
--- a/frontend/components/Domain/QueryFilterBuilder.vue
+++ b/frontend/components/Domain/QueryFilterBuilder.vue
@@ -163,14 +163,14 @@
                 max-width="290px"
                 min-width="auto"
               >
-                <template #activator="{ props }">
+                <template #activator="{ props: activatorProps }">
                   <v-text-field
                     v-model="field.value"
                     persistent-hint
                     :prepend-icon="$globals.icons.calendar"
                     variant="underlined"
                     color="primary"
-                    v-bind="props"
+                    v-bind="activatorProps"
                     readonly
                   />
                 </template>
@@ -184,53 +184,48 @@
               </v-menu>
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Category"
-                :model-value="field.organizers"
+                v-model="field.organizers"
                 :selector-type="Organizer.Category"
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
-                @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Tag"
-                :model-value="field.organizers"
+                v-model="field.organizers"
                 :selector-type="Organizer.Tag"
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
-                @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Tool"
-                :model-value="field.organizers"
+                v-model="field.organizers"
                 :selector-type="Organizer.Tool"
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
-                @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Food"
-                :model-value="field.organizers"
+                v-model="field.organizers"
                 :selector-type="Organizer.Food"
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
-                @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Household"
-                :model-value="field.organizers"
+                v-model="field.organizers"
                 :selector-type="Organizer.Household"
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
-                @update:model-value="setOrganizerValues(field, index, $event)"
               />
             </v-col>
             <!-- right parenthesis -->
@@ -297,7 +292,7 @@
   </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VueDraggable } from "vue-draggable-plus";
 import { useDebounceFn } from "@vueuse/core";
 import { useHouseholdSelf } from "~/composables/use-households";
@@ -307,365 +302,338 @@ import type { LogicalOperator, QueryFilterJSON, QueryFilterJSONPart, RelationalK
 import { useCategoryStore, useFoodStore, useHouseholdStore, useTagStore, useToolStore } from "~/composables/store";
 import { type Field, type FieldDefinition, type FieldValue, type OrganizerBase, useQueryFilterBuilder } from "~/composables/use-query-filter-builder";
 
-export default defineNuxtComponent({
-  components: {
-    VueDraggable,
-    RecipeOrganizerSelector,
+const props = defineProps({
+  fieldDefs: {
+    type: Array as () => FieldDefinition[],
+    required: true,
   },
-  props: {
-    fieldDefs: {
-      type: Array as () => FieldDefinition[],
-      required: true,
-    },
-    initialQueryFilter: {
-      type: Object as () => QueryFilterJSON | null,
-      default: null,
-    },
+  initialQueryFilter: {
+    type: Object as () => QueryFilterJSON | null,
+    default: null,
   },
-  emits: ["input", "inputJSON"],
-  setup(props, context) {
-    const { household } = useHouseholdSelf();
-    const { logOps, relOps, buildQueryFilterString, getFieldFromFieldDef, isOrganizerType } = useQueryFilterBuilder();
+});
 
-    const firstDayOfWeek = computed(() => {
-      return household.value?.preferences?.firstDayOfWeek || 0;
-    });
+const emit = defineEmits<{
+  (event: "input", value: string | undefined): void;
+  (event: "inputJSON", value: QueryFilterJSON | undefined): void;
+}>();
 
-    const state = reactive({
-      showAdvanced: false,
-      qfValid: false,
-      datePickers: [] as boolean[],
-      drag: false,
-    });
+const { household } = useHouseholdSelf();
+const { logOps, relOps, buildQueryFilterString, getFieldFromFieldDef, isOrganizerType } = useQueryFilterBuilder();
 
-    const storeMap = {
-      [Organizer.Category]: useCategoryStore(),
-      [Organizer.Tag]: useTagStore(),
-      [Organizer.Tool]: useToolStore(),
-      [Organizer.Food]: useFoodStore(),
-      [Organizer.Household]: useHouseholdStore(),
-    };
+const firstDayOfWeek = computed(() => {
+  return household.value?.preferences?.firstDayOfWeek || 0;
+});
 
-    function onDragEnd(event: any) {
-      state.drag = false;
+const state = reactive({
+  showAdvanced: false,
+  qfValid: false,
+  datePickers: [] as boolean[],
+  drag: false,
+});
+const { showAdvanced, datePickers, drag } = toRefs(state);
 
-      const oldIndex: number = event.oldIndex;
-      const newIndex: number = event.newIndex;
-      state.datePickers[oldIndex] = false;
-      state.datePickers[newIndex] = false;
+const storeMap = {
+  [Organizer.Category]: useCategoryStore(),
+  [Organizer.Tag]: useTagStore(),
+  [Organizer.Tool]: useToolStore(),
+  [Organizer.Food]: useFoodStore(),
+  [Organizer.Household]: useHouseholdStore(),
+};
+
+function onDragEnd(event: any) {
+  state.drag = false;
+
+  const oldIndex: number = event.oldIndex;
+  const newIndex: number = event.newIndex;
+  state.datePickers[oldIndex] = false;
+  state.datePickers[newIndex] = false;
+}
+
+// add id to fields to prevent reactivity issues
+type FieldWithId = Field & { id: number };
+const fields = ref<FieldWithId[]>([]);
+
+const uid = ref(1); // init uid to pass to fields
+function useUid() {
+  return uid.value++;
+}
+function addField(field: FieldDefinition) {
+  fields.value.push({
+    ...getFieldFromFieldDef(field),
+    id: useUid(),
+  });
+  state.datePickers.push(false);
+}
+
+function setField(index: number, fieldLabel: string) {
+  state.datePickers[index] = false;
+  const fieldDef = props.fieldDefs.find(fieldDef => fieldDef.label === fieldLabel);
+  if (!fieldDef) {
+    return;
+  }
+
+  const resetValue = (fieldDef.type !== fields.value[index].type) || (fieldDef.fieldOptions !== fields.value[index].fieldOptions);
+  const updatedField = { ...fields.value[index], ...fieldDef };
+
+  // we have to set this explicitly since it might be undefined
+  updatedField.fieldOptions = fieldDef.fieldOptions;
+
+  fields.value[index] = {
+    ...getFieldFromFieldDef(updatedField, resetValue),
+    id: fields.value[index].id, // keep the id
+  };
+}
+
+function setLeftParenthesisValue(field: FieldWithId, index: number, value: string) {
+  fields.value[index].leftParenthesis = value;
+}
+
+function setRightParenthesisValue(field: FieldWithId, index: number, value: string) {
+  fields.value[index].rightParenthesis = value;
+}
+
+function setLogicalOperatorValue(field: FieldWithId, index: number, value: LogicalOperator | undefined) {
+  if (!value) {
+    value = logOps.value.AND.value;
+  }
+
+  fields.value[index].logicalOperator = value ? logOps.value[value] : undefined;
+}
+
+function setRelationalOperatorValue(field: FieldWithId, index: number, value: RelationalKeyword | RelationalOperator) {
+  fields.value[index].relationalOperatorValue = relOps.value[value];
+}
+
+function setFieldValue(field: FieldWithId, index: number, value: FieldValue) {
+  state.datePickers[index] = false;
+  fields.value[index].value = value;
+}
+
+function setFieldValues(field: FieldWithId, index: number, values: FieldValue[]) {
+  fields.value[index].values = values;
+}
+
+function removeField(index: number) {
+  fields.value.splice(index, 1);
+  state.datePickers.splice(index, 1);
+}
+
+const fieldsUpdater = useDebounceFn((/* newFields: typeof fields.value */) => {
+  /* newFields.forEach((field, index) => {
+		const updatedField = getFieldFromFieldDef(field);
+		fields.value[index] = updatedField; // recursive!!!
+	}); */
+
+  const qf = buildQueryFilterString(fields.value, state.showAdvanced);
+  if (qf) {
+    console.debug(`Set query filter: ${qf}`);
+  }
+  state.qfValid = !!qf;
+
+  emit("input", qf || undefined);
+  emit("inputJSON", qf ? buildQueryFilterJSON() : undefined);
+}, 500);
+
+watch(fields, fieldsUpdater, { deep: true });
+
+async function hydrateOrganizers(field: FieldWithId, _index: number) {
+  if (!field.values?.length || !isOrganizerType(field.type)) {
+    return;
+  }
+
+  const { store, actions } = storeMap[field.type];
+  if (!store.value.length) {
+    await actions.refresh();
+  }
+
+  const organizers = field.values.map((value) => {
+    const organizer = store.value.find(item => item?.id?.toString() === value);
+    if (!organizer) {
+      console.error(`Could not find organizer with id ${value}`);
+      return undefined;
+    }
+    return organizer;
+  });
+
+  field.organizers = organizers.filter(organizer => organizer !== undefined) as OrganizerBase[];
+  return field;
+}
+
+function initFieldsError(error = "") {
+  if (error) {
+    console.error(error);
+  }
+
+  fields.value = [];
+  if (props.fieldDefs.length) {
+    addField(props.fieldDefs[0]);
+  }
+}
+
+async function initializeFields() {
+  if (!props.initialQueryFilter?.parts?.length) {
+    return initFieldsError();
+  }
+
+  const initFields: FieldWithId[] = [];
+  let error = false;
+
+  for (const [index, part] of props.initialQueryFilter.parts.entries()) {
+    const fieldDef = props.fieldDefs.find(fieldDef => fieldDef.name === part.attributeName);
+    if (!fieldDef) {
+      error = true;
+      return initFieldsError(`Invalid query filter; unknown attribute name "${part.attributeName || ""}"`);
     }
 
-		// add id to fields to prevent reactivity issues
-		type FieldWithId = Field & { id: number };
-		const fields = ref<FieldWithId[]>([]);
+    const field: FieldWithId = {
+      ...getFieldFromFieldDef(fieldDef),
+      id: useUid(),
+    };
+    field.leftParenthesis = part.leftParenthesis || field.leftParenthesis;
+    field.rightParenthesis = part.rightParenthesis || field.rightParenthesis;
+    field.logicalOperator = part.logicalOperator
+      ? logOps.value[part.logicalOperator]
+      : field.logicalOperator;
+    field.relationalOperatorValue = part.relationalOperator
+      ? relOps.value[part.relationalOperator]
+      : field.relationalOperatorValue;
 
-		const uid = ref(1); // init uid to pass to fields
-		function useUid() {
-		  return uid.value++;
-		}
-		function addField(field: FieldDefinition) {
-		  fields.value.push({
-		    ...getFieldFromFieldDef(field),
-		    id: useUid(),
-		  });
-		  state.datePickers.push(false);
-		};
+    if (field.leftParenthesis || field.rightParenthesis) {
+      state.showAdvanced = true;
+    }
 
-		function setField(index: number, fieldLabel: string) {
-		  state.datePickers[index] = false;
-		  const fieldDef = props.fieldDefs.find(fieldDef => fieldDef.label === fieldLabel);
-		  if (!fieldDef) {
-		    return;
-		  }
+    if (field.fieldOptions?.length || isOrganizerType(field.type)) {
+      if (typeof part.value === "string") {
+        field.values = part.value ? [part.value] : [];
+      }
+      else {
+        field.values = part.value || [];
+      }
 
-		  const resetValue = (fieldDef.type !== fields.value[index].type) || (fieldDef.fieldOptions !== fields.value[index].fieldOptions);
-		  const updatedField = { ...fields.value[index], ...fieldDef };
+      if (isOrganizerType(field.type)) {
+        await hydrateOrganizers(field, index);
+      }
+    }
+    else if (field.type === "boolean") {
+      const boolString = part.value || "false";
+      field.value = (
+        boolString[0].toLowerCase() === "t"
+        || boolString[0].toLowerCase() === "y"
+        || boolString[0] === "1"
+      );
+    }
+    else if (field.type === "number") {
+      field.value = Number(part.value as string || "0");
+      if (isNaN(field.value)) {
+        error = true;
+        return initFieldsError(`Invalid query filter; invalid number value "${(part.value || "").toString()}"`);
+      }
+    }
+    else if (field.type === "date") {
+      field.value = part.value as string || "";
+      const date = new Date(field.value);
+      if (isNaN(date.getTime())) {
+        error = true;
+        return initFieldsError(`Invalid query filter; invalid date value "${(part.value || "").toString()}"`);
+      }
+    }
+    else {
+      field.value = part.value as string || "";
+    }
 
-		  // we have to set this explicitly since it might be undefined
-		  updatedField.fieldOptions = fieldDef.fieldOptions;
+    initFields.push(field);
+  }
 
-		  fields.value[index] = {
-		    ...getFieldFromFieldDef(updatedField, resetValue),
-		    id: fields.value[index].id, // keep the id
-		  };
-		}
+  if (initFields.length && !error) {
+    fields.value = initFields;
+  }
+  else {
+    initFieldsError();
+  }
+}
 
-		function setLeftParenthesisValue(field: FieldWithId, index: number, value: string) {
-		  fields.value[index].leftParenthesis = value;
-		}
+onMounted(async () => {
+  try {
+    await initializeFields();
+  }
+  catch (error) {
+    initFieldsError(`Error initializing fields: ${(error || "").toString()}`);
+  }
+});
 
-		function setRightParenthesisValue(field: FieldWithId, index: number, value: string) {
-		  fields.value[index].rightParenthesis = value;
-		}
+function buildQueryFilterJSON(): QueryFilterJSON {
+  const parts = fields.value.map((field) => {
+    const part: QueryFilterJSONPart = {
+      attributeName: field.name,
+      leftParenthesis: field.leftParenthesis,
+      rightParenthesis: field.rightParenthesis,
+      logicalOperator: field.logicalOperator?.value,
+      relationalOperator: field.relationalOperatorValue?.value,
+    };
 
-		function setLogicalOperatorValue(field: FieldWithId, index: number, value: LogicalOperator | undefined) {
-		  if (!value) {
-		    value = logOps.value.AND.value;
-		  }
+    if (field.fieldOptions?.length || isOrganizerType(field.type)) {
+      part.value = field.values.map(value => value.toString());
+    }
+    else if (field.type === "boolean") {
+      part.value = field.value ? "true" : "false";
+    }
+    else {
+      part.value = (field.value || "").toString();
+    }
 
-		  fields.value[index].logicalOperator = value ? logOps.value[value] : undefined;
-		}
+    return part;
+  });
 
-		function setRelationalOperatorValue(field: FieldWithId, index: number, value: RelationalKeyword | RelationalOperator) {
-		  fields.value[index].relationalOperatorValue = relOps.value[value];
-		}
+  const qfJSON = { parts } as QueryFilterJSON;
+  console.debug(`Built query filter JSON: ${JSON.stringify(qfJSON)}`);
+  return qfJSON;
+}
 
-		function setFieldValue(field: FieldWithId, index: number, value: FieldValue) {
-		  state.datePickers[index] = false;
-		  fields.value[index].value = value;
-		}
-
-		function setFieldValues(field: FieldWithId, index: number, values: FieldValue[]) {
-		  fields.value[index].values = values;
-		}
-
-		function setOrganizerValues(field: FieldWithId, index: number, values: OrganizerBase[]) {
-		  setFieldValues(field, index, values.map(value => value.id.toString()));
-		  fields.value[index].organizers = values;
-		}
-
-		function removeField(index: number) {
-		  fields.value.splice(index, 1);
-		  state.datePickers.splice(index, 1);
-		};
-
-		const fieldsUpdater = useDebounceFn((/* newFields: typeof fields.value */) => {
-		  /* newFields.forEach((field, index) => {
-				const updatedField = getFieldFromFieldDef(field);
-				fields.value[index] = updatedField; // recursive!!!
-			}); */
-
-		  const qf = buildQueryFilterString(fields.value, state.showAdvanced);
-		  if (qf) {
-		    console.debug(`Set query filter: ${qf}`);
-		  }
-		  state.qfValid = !!qf;
-
-		  context.emit("input", qf || undefined);
-		  context.emit("inputJSON", qf ? buildQueryFilterJSON() : undefined);
-		}, 500);
-
-		watch(fields, fieldsUpdater, { deep: true });
-
-		async function hydrateOrganizers(field: FieldWithId, index: number) {
-		  if (!field.values?.length || !isOrganizerType(field.type)) {
-		    return;
-		  }
-
-		  field.organizers = [];
-
-		  const { store, actions } = storeMap[field.type];
-		  if (!store.value.length) {
-		    await actions.refresh();
-		  }
-
-		  const organizers = field.values.map((value) => {
-		    const organizer = store.value.find(item => item?.id?.toString() === value);
-		    if (!organizer) {
-		      console.error(`Could not find organizer with id ${value}`);
-		      return undefined;
-		    }
-		    return organizer;
-		  });
-		  field.organizers = organizers.filter(organizer => organizer !== undefined) as OrganizerBase[];
-		  setOrganizerValues(field, index, field.organizers);
-		}
-
-		function initFieldsError(error = "") {
-		  if (error) {
-		    console.error(error);
-		  }
-
-		  fields.value = [];
-		  if (props.fieldDefs.length) {
-		    addField(props.fieldDefs[0]);
-		  }
-		}
-
-		function initializeFields() {
-		  if (!props.initialQueryFilter?.parts?.length) {
-		    return initFieldsError();
-		  };
-
-		  const initFields: FieldWithId[] = [];
-		  let error = false;
-		  props.initialQueryFilter.parts.forEach((part: QueryFilterJSONPart, index: number) => {
-		    const fieldDef = props.fieldDefs.find(fieldDef => fieldDef.name === part.attributeName);
-		    if (!fieldDef) {
-		      error = true;
-		      return initFieldsError(`Invalid query filter; unknown attribute name "${part.attributeName || ""}"`);
-		    }
-
-		    const field: FieldWithId = {
-		      ...getFieldFromFieldDef(fieldDef),
-		      id: useUid(),
-		    };
-		    field.leftParenthesis = part.leftParenthesis || field.leftParenthesis;
-		    field.rightParenthesis = part.rightParenthesis || field.rightParenthesis;
-		    field.logicalOperator = part.logicalOperator
-		      ? logOps.value[part.logicalOperator]
-		      : field.logicalOperator;
-		    field.relationalOperatorValue = part.relationalOperator
-		      ? relOps.value[part.relationalOperator]
-		      : field.relationalOperatorValue;
-
-		    if (field.leftParenthesis || field.rightParenthesis) {
-		      state.showAdvanced = true;
-		    }
-
-		    if (field.fieldOptions?.length || isOrganizerType(field.type)) {
-		      if (typeof part.value === "string") {
-		        field.values = part.value ? [part.value] : [];
-		      }
-		      else {
-		        field.values = part.value || [];
-		      }
-
-		      if (isOrganizerType(field.type)) {
-		        hydrateOrganizers(field, index);
-		      }
-		    }
-		    else if (field.type === "boolean") {
-		      const boolString = part.value || "false";
-		      field.value = (
-		        boolString[0].toLowerCase() === "t"
-		        || boolString[0].toLowerCase() === "y"
-		        || boolString[0] === "1"
-		      );
-		    }
-		    else if (field.type === "number") {
-		      field.value = Number(part.value as string || "0");
-		      if (isNaN(field.value)) {
-		        error = true;
-		        return initFieldsError(`Invalid query filter; invalid number value "${(part.value || "").toString()}"`);
-		      }
-		    }
-		    else if (field.type === "date") {
-		      field.value = part.value as string || "";
-		      const date = new Date(field.value);
-		      if (isNaN(date.getTime())) {
-		        error = true;
-		        return initFieldsError(`Invalid query filter; invalid date value "${(part.value || "").toString()}"`);
-		      }
-		    }
-		    else {
-		      field.value = part.value as string || "";
-		    }
-
-		    initFields.push(field);
-		  });
-
-		  if (initFields.length && !error) {
-		    fields.value = initFields;
-		  }
-		  else {
-		    initFieldsError();
-		  }
-		};
-
-		try {
-		  initializeFields();
-		}
-		catch (error) {
-		  initFieldsError(`Error initializing fields: ${(error || "").toString()}`);
-		}
-
-		function buildQueryFilterJSON(): QueryFilterJSON {
-		  const parts = fields.value.map((field) => {
-		    const part: QueryFilterJSONPart = {
-		      attributeName: field.name,
-		      leftParenthesis: field.leftParenthesis,
-		      rightParenthesis: field.rightParenthesis,
-		      logicalOperator: field.logicalOperator?.value,
-		      relationalOperator: field.relationalOperatorValue?.value,
-		    };
-
-		    if (field.fieldOptions?.length || isOrganizerType(field.type)) {
-		      part.value = field.values.map(value => value.toString());
-		    }
-		    else if (field.type === "boolean") {
-		      part.value = field.value ? "true" : "false";
-		    }
-		    else {
-		      part.value = (field.value || "").toString();
-		    }
-
-		    return part;
-		  });
-
-		  const qfJSON = { parts } as QueryFilterJSON;
-		  console.debug(`Built query filter JSON: ${JSON.stringify(qfJSON)}`);
-		  return qfJSON;
-		}
-
-		const config = computed(() => {
-		  const baseColMaxWidth = 55;
-		  return {
-		    col: {
-		      class: "d-flex justify-center align-end field-col pa-1",
-		    },
-		    select: {
-		      textClass: "d-flex justify-center text-center",
-		    },
-		    items: {
-		      icon: {
-		        cols: 1,
-		        style: "width: fit-content;",
-		      },
-		      leftParens: {
-		        cols: state.showAdvanced ? 1 : 0,
-		        style: `min-width: ${state.showAdvanced ? baseColMaxWidth : 0}px;`,
-		      },
-		      logicalOperator: {
-		        cols: 1,
-		        style: `min-width: ${baseColMaxWidth}px;`,
-		      },
-		      fieldName: {
-		        cols: state.showAdvanced ? 2 : 3,
-		        style: `min-width: ${state.showAdvanced ? baseColMaxWidth * 2 : baseColMaxWidth * 3}px;`,
-		      },
-		      relationalOperator: {
-		        cols: 2,
-		        style: `min-width: ${baseColMaxWidth * 2}px;`,
-		      },
-		      fieldValue: {
-		        cols: state.showAdvanced ? 3 : 4,
-		        style: `min-width: ${state.showAdvanced ? baseColMaxWidth * 2 : baseColMaxWidth * 3}px;`,
-		      },
-		      rightParens: {
-		        cols: state.showAdvanced ? 1 : 0,
-		        style: `min-width: ${state.showAdvanced ? baseColMaxWidth : 0}px;`,
-		      },
-		      fieldActions: {
-		        cols: 1,
-		        style: `min-width: ${baseColMaxWidth}px;`,
-		      },
-		    },
-		  };
-		});
-
-		return {
-		  Organizer,
-		  ...toRefs(state),
-		  logOps,
-		  relOps,
-		  config,
-		  firstDayOfWeek,
-		  onDragEnd,
-		  // Fields
-		  fields,
-		  addField,
-		  setField,
-		  setLeftParenthesisValue,
-		  setRightParenthesisValue,
-		  setLogicalOperatorValue,
-		  setRelationalOperatorValue,
-		  setFieldValue,
-		  setFieldValues,
-		  setOrganizerValues,
-		  removeField,
-		};
-  },
+const config = computed(() => {
+  const baseColMaxWidth = 55;
+  return {
+    col: {
+      class: "d-flex justify-center align-end field-col pa-1",
+    },
+    select: {
+      textClass: "d-flex justify-center text-center",
+    },
+    items: {
+      icon: {
+        cols: 1,
+        style: "width: fit-content;",
+      },
+      leftParens: {
+        cols: state.showAdvanced ? 1 : 0,
+        style: `min-width: ${state.showAdvanced ? baseColMaxWidth : 0}px;`,
+      },
+      logicalOperator: {
+        cols: 1,
+        style: `min-width: ${baseColMaxWidth}px;`,
+      },
+      fieldName: {
+        cols: state.showAdvanced ? 2 : 3,
+        style: `min-width: ${state.showAdvanced ? baseColMaxWidth * 2 : baseColMaxWidth * 3}px;`,
+      },
+      relationalOperator: {
+        cols: 2,
+        style: `min-width: ${baseColMaxWidth * 2}px;`,
+      },
+      fieldValue: {
+        cols: state.showAdvanced ? 3 : 4,
+        style: `min-width: ${state.showAdvanced ? baseColMaxWidth * 2 : baseColMaxWidth * 3}px;`,
+      },
+      rightParens: {
+        cols: state.showAdvanced ? 1 : 0,
+        style: `min-width: ${state.showAdvanced ? baseColMaxWidth : 0}px;`,
+      },
+      fieldActions: {
+        cols: 1,
+        style: `min-width: ${baseColMaxWidth}px;`,
+      },
+    },
+  };
 });
 </script>
 
diff --git a/frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue b/frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue
index 26ec7413a..6706eb582 100644
--- a/frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue
+++ b/frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue
@@ -3,7 +3,7 @@
     v-model="selected"
     v-bind="inputAttrs"
     v-model:search="searchInput"
-    :items="storeItem"
+    :items="items"
     :label="label"
     chips
     closable-chips
@@ -46,180 +46,138 @@
   </v-autocomplete>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { IngredientFood, RecipeCategory, RecipeTag } from "~/lib/api/types/recipe";
 import type { RecipeTool } from "~/lib/api/types/admin";
 import { Organizer, type RecipeOrganizer } from "~/lib/api/types/non-generated";
 import type { HouseholdSummary } from "~/lib/api/types/household";
 import { useCategoryStore, useFoodStore, useHouseholdStore, useTagStore, useToolStore } from "~/composables/store";
 
-export default defineNuxtComponent({
-  props: {
-    modelValue: {
-      type: Array as () => (
-        | HouseholdSummary
-        | RecipeTag
-        | RecipeCategory
-        | RecipeTool
-        | IngredientFood
-        | string
-      )[] | undefined,
-      required: true,
-    },
-    /**
-     * The type of organizer to use.
-     */
-    selectorType: {
-      type: String as () => RecipeOrganizer,
-      required: true,
-    },
-    inputAttrs: {
-      type: Object as () => Record<string, any>,
-      default: () => ({}),
-    },
-    returnObject: {
-      type: Boolean,
-      default: true,
-    },
-    showAdd: {
-      type: Boolean,
-      default: true,
-    },
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-    showIcon: {
-      type: Boolean,
-      default: true,
-    },
-    variant: {
-      type: String as () => "filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled",
-      default: "outlined",
-    },
-  },
-  emits: ["update:modelValue"],
+interface Props {
+  selectorType: RecipeOrganizer;
+  inputAttrs?: Record<string, any>;
+  returnObject?: boolean;
+  showAdd?: boolean;
+  showLabel?: boolean;
+  showIcon?: boolean;
+  variant?: "filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled";
+}
 
-  setup(props, context) {
-    const selected = computed({
-      get: () => props.modelValue,
-      set: (val) => {
-        context.emit("update:modelValue", val);
-      },
-    });
-
-    onMounted(() => {
-      if (selected.value === undefined) {
-        selected.value = [];
-      }
-    });
-
-    const i18n = useI18n();
-    const { $globals } = useNuxtApp();
-
-    const label = computed(() => {
-      if (!props.showLabel) {
-        return "";
-      }
-
-      switch (props.selectorType) {
-        case Organizer.Tag:
-          return i18n.t("tag.tags");
-        case Organizer.Category:
-          return i18n.t("category.categories");
-        case Organizer.Tool:
-          return i18n.t("tool.tools");
-        case Organizer.Food:
-          return i18n.t("general.foods");
-        case Organizer.Household:
-          return i18n.t("household.households");
-        default:
-          return i18n.t("general.organizer");
-      }
-    });
-
-    const icon = computed(() => {
-      if (!props.showIcon) {
-        return "";
-      }
-
-      switch (props.selectorType) {
-        case Organizer.Tag:
-          return $globals.icons.tags;
-        case Organizer.Category:
-          return $globals.icons.categories;
-        case Organizer.Tool:
-          return $globals.icons.tools;
-        case Organizer.Food:
-          return $globals.icons.foods;
-        case Organizer.Household:
-          return $globals.icons.household;
-        default:
-          return $globals.icons.tags;
-      }
-    });
-
-    // ===========================================================================
-    // Store & Items Setup
-
-    const storeMap = {
-      [Organizer.Category]: useCategoryStore(),
-      [Organizer.Tag]: useTagStore(),
-      [Organizer.Tool]: useToolStore(),
-      [Organizer.Food]: useFoodStore(),
-      [Organizer.Household]: useHouseholdStore(),
-    };
-
-    const store = computed(() => {
-      const { store } = storeMap[props.selectorType];
-      return store.value;
-    });
-
-    const items = computed(() => {
-      if (!props.returnObject) {
-        return store.value.map(item => item.name);
-      }
-      return store.value;
-    });
-
-    function removeByIndex(index: number) {
-      if (selected.value === undefined) {
-        return;
-      }
-      const newSelected = selected.value.filter((_, i) => i !== index);
-      selected.value = [...newSelected];
-    }
-
-    function appendCreated(item: any) {
-      if (selected.value === undefined) {
-        return;
-      }
-
-      selected.value = [...selected.value, item];
-    }
-
-    const dialog = ref(false);
-
-    const searchInput = ref("");
-
-    function resetSearchInput() {
-      searchInput.value = "";
-    }
-
-    return {
-      Organizer,
-      appendCreated,
-      dialog,
-      storeItem: items,
-      label,
-      icon,
-      selected,
-      removeByIndex,
-      searchInput,
-      resetSearchInput,
-    };
-  },
+const props = withDefaults(defineProps<Props>(), {
+  inputAttrs: () => ({}),
+  returnObject: true,
+  showAdd: true,
+  showLabel: true,
+  showIcon: true,
+  variant: "outlined",
 });
+
+const selected = defineModel<(
+  | HouseholdSummary
+  | RecipeTag
+  | RecipeCategory
+  | RecipeTool
+  | IngredientFood
+  | string
+)[] | undefined>({ required: true });
+
+onMounted(() => {
+  if (selected.value === undefined) {
+    selected.value = [];
+  }
+});
+
+const i18n = useI18n();
+const { $globals } = useNuxtApp();
+
+const label = computed(() => {
+  if (!props.showLabel) {
+    return "";
+  }
+
+  switch (props.selectorType) {
+    case Organizer.Tag:
+      return i18n.t("tag.tags");
+    case Organizer.Category:
+      return i18n.t("category.categories");
+    case Organizer.Tool:
+      return i18n.t("tool.tools");
+    case Organizer.Food:
+      return i18n.t("general.foods");
+    case Organizer.Household:
+      return i18n.t("household.households");
+    default:
+      return i18n.t("general.organizer");
+  }
+});
+
+const icon = computed(() => {
+  if (!props.showIcon) {
+    return "";
+  }
+
+  switch (props.selectorType) {
+    case Organizer.Tag:
+      return $globals.icons.tags;
+    case Organizer.Category:
+      return $globals.icons.categories;
+    case Organizer.Tool:
+      return $globals.icons.tools;
+    case Organizer.Food:
+      return $globals.icons.foods;
+    case Organizer.Household:
+      return $globals.icons.household;
+    default:
+      return $globals.icons.tags;
+  }
+});
+
+// ===========================================================================
+// Store & Items Setup
+
+const storeMap = {
+  [Organizer.Category]: useCategoryStore(),
+  [Organizer.Tag]: useTagStore(),
+  [Organizer.Tool]: useToolStore(),
+  [Organizer.Food]: useFoodStore(),
+  [Organizer.Household]: useHouseholdStore(),
+};
+
+const store = computed(() => {
+  const { store } = storeMap[props.selectorType];
+  return store.value;
+});
+
+const items = computed(() => {
+  if (!props.returnObject) {
+    return store.value.map(item => item.name);
+  }
+  return store.value;
+});
+
+function removeByIndex(index: number) {
+  if (selected.value === undefined) {
+    return;
+  }
+  const newSelected = selected.value.filter((_, i) => i !== index);
+  selected.value = [...newSelected];
+}
+
+function appendCreated(item: any) {
+  if (selected.value === undefined) {
+    return;
+  }
+
+  selected.value = [...selected.value, item];
+}
+
+const dialog = ref(false);
+
+const searchInput = ref("");
+
+function resetSearchInput() {
+  searchInput.value = "";
+}
 </script>
 
 <style scoped>
diff --git a/frontend/pages/g/[groupSlug]/cookbooks/index.vue b/frontend/pages/g/[groupSlug]/cookbooks/index.vue
index 6dfc3554e..5df57cb94 100644
--- a/frontend/pages/g/[groupSlug]/cookbooks/index.vue
+++ b/frontend/pages/g/[groupSlug]/cookbooks/index.vue
@@ -16,7 +16,7 @@
       @cancel="deleteCreateTarget()"
     >
       <v-card-text>
-        <CookbookEditor :key="createTargetKey" v-model="createTarget" :actions="actions" />
+        <CookbookEditor :key="createTargetKey" v-model="createTarget" />
       </v-card-text>
     </BaseDialog>
 
@@ -105,9 +105,7 @@
             <v-expansion-panel-text>
               <CookbookEditor
                 v-model="myCookbooks[index]"
-                :actions="actions"
                 :collapsable="false"
-                @delete="deleteEventHandler"
               />
               <v-card-actions>
                 <v-spacer />