refator: reuse search page component (#2240)

* wip: fix recipe card section

* refactor basic search to share composable

* fix dialog results

* use search for cat/tag/tool pages

* update organizer to support name edits

* fix composable typing

frontend/pages/group/mealplan/planner/edit.vue

@@ -50,9 +50,9 @@
             v-if="!dialog.note"
             v-model="newMeal.recipeId"
             :label="$t('meal-plan.meal-recipe')"
-            :items="recipes.data"
-            :loading="recipes.loading"
-            :search-input.sync="recipes.search"
+            :items="search.data.value"
+            :loading="search.loading.value"
+            :search-input.sync="search.query.value"
             cache-items
             item-text="name"
             item-value="id"
@@ -218,6 +218,7 @@ import { PlanEntryType } from "~/lib/api/types/meal-plan";
 import { useUserApi } from "~/composables/api";
 import { useGroupSelf } from "~/composables/use-groups";
 import { RecipeSummary } from "~/lib/api/types/recipe";
+import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
 
 export default defineComponent({
   components: {
@@ -330,44 +331,7 @@ export default defineComponent({
     // =====================================================
     // Search
 
-    const recipes = ref({
-      search: "",
-      loading: false,
-      error: false,
-      data: [] as RecipeSummary[],
-    });
-
-    async function searchRecipes(term: string) {
-      recipes.value.loading = true;
-      const { data, error } = await api.recipes.search({
-        search: term,
-        page: 1,
-        orderBy: "name",
-        orderDirection: "asc",
-        perPage: 20,
-      });
-
-      if (error) {
-        console.error(error);
-        recipes.value.loading = false;
-        recipes.value.data = [];
-        return;
-      }
-
-      if (data) {
-        recipes.value.data = data.items;
-      }
-
-      recipes.value.loading = false;
-    }
-
-    watchDebounced(
-      () => recipes.value.search,
-      async (term: string) => {
-        await searchRecipes(term);
-      },
-      { debounce: 500 }
-    );
+    const search = useRecipeSearch(api);
 
     return {
       state,
@@ -382,7 +346,7 @@ export default defineComponent({
       randomMeal,
 
       // Search
-      recipes,
+      search,
       firstDayOfWeek,
     };
   },

frontend/pages/index.vue

@@ -124,11 +124,9 @@
         :title="$tc('search.results')"
         :recipes="recipes"
         :query="passedQuery"
-        @sortRecipes="assignSorted"
         @replaceRecipes="replaceRecipes"
         @appendRecipes="appendRecipes"
-        @delete="removeRecipe"
-      ></RecipeCardSection>
+      />
     </v-container>
   </v-container>
 </template>

frontend/pages/recipes/categories/_slug.vue

@@ -1,127 +0,0 @@
-<template>
-  <v-container>
-    <RecipeCardSection
-      v-if="category"
-      :icon="$globals.icons.tags"
-      :title="category.name"
-      :recipes="recipes"
-      :query="{ categories: [category.slug] }"
-      @sortRecipes="assignSorted"
-      @replaceRecipes="replaceRecipes"
-      @appendRecipes="appendRecipes"
-      @delete="removeRecipe"
-    >
-      <template #title>
-        <v-btn icon class="mr-1">
-          <v-icon dark large @click="reset">
-            {{ $globals.icons.tags }}
-          </v-icon>
-        </v-btn>
-
-        <template v-if="edit">
-          <v-text-field
-            v-model="category.name"
-            autofocus
-            single-line
-            dense
-            hide-details
-            class="headline"
-            @keyup.enter="updateCategory"
-          >
-          </v-text-field>
-          <v-btn icon @click="updateCategory">
-            <v-icon size="28">
-              {{ $globals.icons.save }}
-            </v-icon>
-          </v-btn>
-          <v-btn icon class="mr-1" @click="reset">
-            <v-icon size="28">
-              {{ $globals.icons.close }}
-            </v-icon>
-          </v-btn>
-        </template>
-
-        <template v-else>
-          <v-tooltip top>
-            <template #activator="{ on, attrs }">
-              <v-toolbar-title v-bind="attrs" style="cursor: pointer" class="headline" v-on="on" @click="edit = true">
-                {{ category.name }}
-              </v-toolbar-title>
-            </template>
-            <span> Click to Edit </span>
-          </v-tooltip>
-        </template>
-      </template>
-    </RecipeCardSection>
-  </v-container>
-</template>
-
-<script lang="ts">
-import { defineComponent, useAsync, useRoute, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
-import { useLazyRecipes } from "~/composables/recipes";
-import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
-import { useUserApi } from "~/composables/api";
-
-export default defineComponent({
-  components: { RecipeCardSection },
-  setup() {
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
-
-    const api = useUserApi();
-    const route = useRoute();
-    const router = useRouter();
-    const slug = route.value.params.slug;
-
-    const state = reactive({
-      initialValue: "",
-      edit: false,
-    });
-
-    const category = useAsync(async () => {
-      const { data } = await api.categories.bySlug(slug);
-      if (data) {
-        state.initialValue = data.name;
-      }
-      return data;
-    }, slug);
-
-    function reset() {
-      state.edit = false;
-
-      if (category.value) {
-        category.value.name = state.initialValue;
-      }
-    }
-
-    async function updateCategory() {
-      state.edit = false;
-
-      if (!category.value) {
-        return;
-      }
-      const { data } = await api.categories.updateOne(category.value.id, category.value);
-
-      if (data) {
-        router.push("/recipes/categories/" + data.slug);
-      }
-    }
-
-    return {
-      category,
-      reset,
-      ...toRefs(state),
-      updateCategory,
-      appendRecipes,
-      assignSorted,
-      recipes,
-      removeRecipe,
-      replaceRecipes,
-    };
-  },
-  head() {
-    return {
-      title: this.$t("category.categories") as string,
-    };
-  },
-});
-</script>

frontend/pages/recipes/categories/index.vue

@@ -6,6 +6,7 @@
       :icon="$globals.icons.tags"
       item-type="categories"
       @delete="actions.deleteOne"
+      @update="actions.updateOne"
     >
       <template #title> {{ $tc("category.categories") }} </template>
     </RecipeOrganizerPage>

frontend/pages/recipes/tags/_slug.vue

@@ -1,127 +0,0 @@
-<template>
-  <v-container>
-    <RecipeCardSection
-      v-if="tag"
-      :icon="$globals.icons.tags"
-      :title="tag.name"
-      :recipes="recipes"
-      :query="{ tags: [tag.slug] }"
-      @sortRecipes="assignSorted"
-      @replaceRecipes="replaceRecipes"
-      @appendRecipes="appendRecipes"
-      @delete="removeRecipe"
-    >
-      <template #title>
-        <v-btn icon class="mr-1">
-          <v-icon dark large @click="reset">
-            {{ $globals.icons.tags }}
-          </v-icon>
-        </v-btn>
-
-        <template v-if="edit">
-          <v-text-field
-            v-model="tag.name"
-            autofocus
-            single-line
-            dense
-            hide-details
-            class="headline"
-            @keyup.enter="updateTags"
-          >
-          </v-text-field>
-          <v-btn icon @click="updateTags">
-            <v-icon size="28">
-              {{ $globals.icons.save }}
-            </v-icon>
-          </v-btn>
-          <v-btn icon class="mr-1" @click="reset">
-            <v-icon size="28">
-              {{ $globals.icons.close }}
-            </v-icon>
-          </v-btn>
-        </template>
-
-        <template v-else>
-          <v-tooltip top>
-            <template #activator="{ on, attrs }">
-              <v-toolbar-title v-bind="attrs" style="cursor: pointer" class="headline" v-on="on" @click="edit = true">
-                {{ tag.name }}
-              </v-toolbar-title>
-            </template>
-            <span> Click to Edit </span>
-          </v-tooltip>
-        </template>
-      </template>
-    </RecipeCardSection>
-  </v-container>
-</template>
-
-<script lang="ts">
-import { defineComponent, useAsync, useRoute, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
-import { useLazyRecipes } from "~/composables/recipes";
-import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
-import { useUserApi } from "~/composables/api";
-
-export default defineComponent({
-  components: { RecipeCardSection },
-  setup() {
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
-
-    const api = useUserApi();
-    const route = useRoute();
-    const router = useRouter();
-    const slug = route.value.params.slug;
-
-    const state = reactive({
-      initialValue: "",
-      edit: false,
-    });
-
-    const tag = useAsync(async () => {
-      const { data } = await api.tags.bySlug(slug);
-      if (data) {
-        state.initialValue = data.name;
-      }
-      return data;
-    }, slug);
-
-    function reset() {
-      state.edit = false;
-
-      if (tag.value) {
-        tag.value.name = state.initialValue;
-      }
-    }
-
-    async function updateTags() {
-      state.edit = false;
-
-      if (!tag.value) {
-        return;
-      }
-      const { data } = await api.tags.updateOne(tag.value.id, tag.value);
-
-      if (data) {
-        router.push("/recipes/tags/" + data.slug);
-      }
-    }
-
-    return {
-      tag,
-      reset,
-      ...toRefs(state),
-      updateTags,
-      appendRecipes,
-      assignSorted,
-      recipes,
-      removeRecipe,
-      replaceRecipes,
-    };
-  },
-  head() {
-    return {
-      title: this.$t("tag.tags") as string,
-    };
-  },
-});
-</script>

frontend/pages/recipes/tags/index.vue

@@ -6,8 +6,9 @@
       :icon="$globals.icons.tags"
       item-type="tags"
       @delete="actions.deleteOne"
+      @update="actions.updateOne"
     >
-      <template #title> {{ $t('tag.tags') }} </template>
+      <template #title> {{ $t("tag.tags") }} </template>
     </RecipeOrganizerPage>
   </v-container>
 </template>
@@ -32,7 +33,7 @@ export default defineComponent({
   head() {
     return {
       title: this.$tc("tag.tags"),
-    }
+    };
   },
 });
 </script>

frontend/pages/recipes/tools/_slug.vue

@@ -1,127 +0,0 @@
-<template>
-  <v-container>
-    <RecipeCardSection
-      v-if="tool"
-      :icon="$globals.icons.potSteam"
-      :title="tool.name"
-      :recipes="recipes"
-      :query="{ tools: [tool.slug] }"
-      @sortRecipes="assignSorted"
-      @replaceRecipes="replaceRecipes"
-      @appendRecipes="appendRecipes"
-      @delete="removeRecipe"
-    >
-      <template #title>
-        <v-btn icon class="mr-1">
-          <v-icon dark large @click="reset">
-            {{ $globals.icons.potSteam }}
-          </v-icon>
-        </v-btn>
-
-        <template v-if="edit">
-          <v-text-field
-            v-model="tool.name"
-            autofocus
-            single-line
-            dense
-            hide-details
-            class="headline"
-            @keyup.enter="updateTools"
-          >
-          </v-text-field>
-          <v-btn icon @click="updateTools">
-            <v-icon size="28">
-              {{ $globals.icons.save }}
-            </v-icon>
-          </v-btn>
-          <v-btn icon class="mr-1" @click="reset">
-            <v-icon size="28">
-              {{ $globals.icons.close }}
-            </v-icon>
-          </v-btn>
-        </template>
-
-        <template v-else>
-          <v-tooltip top>
-            <template #activator="{ on, attrs }">
-              <v-toolbar-title v-bind="attrs" style="cursor: pointer" class="headline" v-on="on" @click="edit = true">
-                {{ tool.name }}
-              </v-toolbar-title>
-            </template>
-            <span> Click to Edit </span>
-          </v-tooltip>
-        </template>
-      </template>
-    </RecipeCardSection>
-  </v-container>
-</template>
-
-<script lang="ts">
-import { defineComponent, useAsync, useRoute, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
-import { useLazyRecipes } from "~/composables/recipes";
-import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
-import { useUserApi } from "~/composables/api";
-
-export default defineComponent({
-  components: { RecipeCardSection },
-  setup() {
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
-
-    const api = useUserApi();
-    const route = useRoute();
-    const router = useRouter();
-    const slug = route.value.params.slug;
-
-    const state = reactive({
-      initialValue: "",
-      edit: false,
-    });
-
-    const tool = useAsync(async () => {
-      const { data } = await api.tools.bySlug(slug);
-      if (data) {
-        state.initialValue = data.name;
-      }
-      return data;
-    }, slug);
-
-    function reset() {
-      state.edit = false;
-
-      if (tool.value) {
-        tool.value.name = state.initialValue;
-      }
-    }
-
-    async function updateTools() {
-      state.edit = false;
-
-      if (!tool.value) {
-        return;
-      }
-      const { data } = await api.tools.updateOne(tool.value.id, tool.value);
-
-      if (data) {
-        router.push("/recipes/tools/" + data.slug);
-      }
-    }
-
-    return {
-      tool,
-      reset,
-      ...toRefs(state),
-      updateTools,
-      appendRecipes,
-      assignSorted,
-      recipes,
-      removeRecipe,
-      replaceRecipes,
-    };
-  },
-  head() {
-    return {
-      title: this.$t("tool.tools") as string,
-    };
-  },
-});
-</script>

frontend/pages/recipes/tools/index.vue

@@ -6,8 +6,9 @@
       :items="tools"
       item-type="tools"
       @delete="actions.deleteOne"
+      @update="actions.updateOne"
     >
-      <template #title> {{ $t('tool.tools') }} </template>
+      <template #title> {{ $t("tool.tools") }} </template>
     </RecipeOrganizerPage>
   </v-container>
 </template>