feat: Query Filter Builder for Cookbooks and Meal Plans (#4346)

frontend/components/Domain/Cookbook/CookbookEditor.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
-    <v-card-text v-if="cookbook">
+    <v-card-text v-if="cookbook" class="px-1">
       <v-text-field v-model="cookbook.name" :label="$t('cookbook.cookbook-name')"></v-text-field>
       <v-textarea v-model="cookbook.description" auto-grow :rows="2" :label="$t('recipe.description')"></v-textarea>
-      <RecipeOrganizerSelector v-model="cookbook.categories" selector-type="categories" />
-      <RecipeOrganizerSelector v-model="cookbook.tags" selector-type="tags" />
-      <RecipeOrganizerSelector v-model="cookbook.tools" selector-type="tools" />
+      <QueryFilterBuilder
+        :field-defs="fieldDefs"
+        :initial-query-filter="cookbook.queryFilter"
+        @input="handleInput"
+      />
       <v-switch v-model="cookbook.public" hide-details single-line>
         <template #label>
           {{ $t('cookbook.public-cookbook') }}
@@ -14,33 +16,19 @@
           </HelpIcon>
         </template>
       </v-switch>
-      <div class="mt-4">
-        <h3 class="text-subtitle-1 d-flex align-center mb-0 pb-0">
-          {{ $t('cookbook.filter-options') }}
-          <HelpIcon right small class="ml-2">
-            {{ $t('cookbook.filter-options-description') }}
-          </HelpIcon>
-        </h3>
-        <v-switch v-model="cookbook.requireAllCategories" class="mt-0" hide-details single-line>
-          <template #label> {{ $t('cookbook.require-all-categories') }} </template>
-        </v-switch>
-        <v-switch v-model="cookbook.requireAllTags" hide-details single-line>
-          <template #label> {{ $t('cookbook.require-all-tags') }} </template>
-        </v-switch>
-        <v-switch v-model="cookbook.requireAllTools" hide-details single-line>
-          <template #label> {{ $t('cookbook.require-all-tools') }} </template>
-        </v-switch>
-      </div>
     </v-card-text>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { defineComponent, useContext } from "@nuxtjs/composition-api";
 import { ReadCookBook } from "~/lib/api/types/cookbook";
-import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
+import { Organizer } from "~/lib/api/types/non-generated";
+import QueryFilterBuilder from "~/components/Domain/QueryFilterBuilder.vue";
+import { FieldDefinition } from "~/composables/use-query-filter-builder";
+
 export default defineComponent({
-  components: { RecipeOrganizerSelector },
+  components: { QueryFilterBuilder },
   props: {
     cookbook: {
       type: Object as () => ReadCookBook,
@@ -51,5 +39,50 @@ export default defineComponent({
       required: true,
     },
   },
+  setup(props) {
+    const { i18n } = useContext();
+
+    function handleInput(value: string | undefined) {
+      props.cookbook.queryFilterString = value || "";
+    }
+
+    const fieldDefs: FieldDefinition[] = [
+      {
+        name: "recipe_category.id",
+        label: i18n.tc("category.categories"),
+        type: Organizer.Category,
+      },
+      {
+        name: "tags.id",
+        label: i18n.tc("tag.tags"),
+        type: Organizer.Tag,
+      },
+      {
+        name: "tools.id",
+        label: i18n.tc("tool.tools"),
+        type: Organizer.Tool,
+      },
+      {
+        name: "household_id",
+        label: i18n.tc("household.households"),
+        type: Organizer.Household,
+      },
+      {
+        name: "created_at",
+        label: i18n.tc("general.date-created"),
+        type: "date",
+      },
+      {
+        name: "updated_at",
+        label: i18n.tc("general.date-updated"),
+        type: "date",
+      },
+    ];
+
+    return {
+      handleInput,
+      fieldDefs,
+    };
+  },
 });
 </script>

frontend/components/Domain/Cookbook/CookbookPage.vue

@@ -4,11 +4,13 @@
     <BaseDialog
       v-if="editTarget"
       v-model="dialogStates.edit"
-      :width="650"
+      width="100%"
+      max-width="1100px"
       :icon="$globals.icons.pages"
       :title="$t('general.edit')"
       :submit-icon="$globals.icons.save"
       :submit-text="$tc('general.save')"
+      :submit-disabled="!editTarget.queryFilterString"
       @submit="editCookbook"
     >
       <v-card-text>