mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
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
This commit is contained in:
Hayden
GitHub
parent
b06517fdf4
commit
9650ba9b00
14 changed files with 205 additions and 538 deletions
|
|
@ -61,7 +61,7 @@
|
|||
v-if="!$vuetify.breakpoint.xsOnly"
|
||||
:items="[
|
||||
{
|
||||
title: $t('general.toggle-view'),
|
||||
title: $tc('general.toggle-view'),
|
||||
icon: $globals.icons.eye,
|
||||
event: 'toggle-dense-view',
|
||||
},
|
||||
|
|
@ -81,7 +81,6 @@
|
|||
:image="recipe.image"
|
||||
:tags="recipe.tags"
|
||||
:recipe-id="recipe.id"
|
||||
@delete="$emit('delete', recipe.slug)"
|
||||
/>
|
||||
</v-lazy>
|
||||
</v-col>
|
||||
|
|
@ -105,7 +104,6 @@
|
|||
:image="recipe.image"
|
||||
:tags="recipe.tags"
|
||||
:recipe-id="recipe.id"
|
||||
@delete="$emit('delete', recipe.slug)"
|
||||
/>
|
||||
</v-lazy>
|
||||
</v-col>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<v-app-bar sticky dark color="primary lighten-1" :rounded="!$vuetify.breakpoint.xs">
|
||||
<v-text-field
|
||||
id="arrow-search"
|
||||
v-model="search"
|
||||
v-model="search.query.value"
|
||||
autofocus
|
||||
solo
|
||||
flat
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</v-card-actions>
|
||||
|
||||
<RecipeCardMobile
|
||||
v-for="(recipe, index) in searchResults"
|
||||
v-for="(recipe, index) in search.data.value"
|
||||
:key="index"
|
||||
:tabindex="index"
|
||||
class="ma-1 arrow-nav"
|
||||
|
|
@ -55,10 +55,10 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, ref, watch, useRoute } from "@nuxtjs/composition-api";
|
||||
import { watchDebounced } from "@vueuse/shared";
|
||||
import RecipeCardMobile from "./RecipeCardMobile.vue";
|
||||
import { RecipeSummary } from "~/lib/api/types/recipe";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
|
||||
const SELECTED_EVENT = "selected";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -69,7 +69,6 @@ export default defineComponent({
|
|||
const state = reactive({
|
||||
loading: false,
|
||||
selectedIndex: -1,
|
||||
searchResults: [] as RecipeSummary[],
|
||||
});
|
||||
|
||||
// ===========================================================================
|
||||
|
|
@ -79,9 +78,9 @@ export default defineComponent({
|
|||
// Reset or Grab Recipes on Change
|
||||
watch(dialog, (val) => {
|
||||
if (!val) {
|
||||
search.value = "";
|
||||
search.query.value = "";
|
||||
state.selectedIndex = -1;
|
||||
state.searchResults = [];
|
||||
search.data.value = [];
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -142,30 +141,8 @@ export default defineComponent({
|
|||
// ===========================================================================
|
||||
// Basic Search
|
||||
const api = useUserApi();
|
||||
const search = ref("");
|
||||
const search = useRecipeSearch(api);
|
||||
|
||||
watchDebounced(
|
||||
search,
|
||||
async (val) => {
|
||||
console.log(val);
|
||||
if (val) {
|
||||
state.loading = true;
|
||||
const { data, error } = await api.recipes.search({ search: val, page: 1, perPage: 10 });
|
||||
|
||||
if (error || !data) {
|
||||
console.error(error);
|
||||
state.searchResults = [];
|
||||
} else {
|
||||
state.searchResults = data.items;
|
||||
}
|
||||
|
||||
state.loading = false;
|
||||
}
|
||||
},
|
||||
{ debounce: 500, maxWait: 1000 }
|
||||
);
|
||||
|
||||
// ===========================================================================
|
||||
// Select Handler
|
||||
|
||||
function handleSelect(recipe: RecipeSummary) {
|
||||
|
|
@ -173,7 +150,14 @@ export default defineComponent({
|
|||
context.emit(SELECTED_EVENT, recipe);
|
||||
}
|
||||
|
||||
return { ...toRefs(state), dialog, open, close, handleSelect, search };
|
||||
return {
|
||||
...toRefs(state),
|
||||
dialog,
|
||||
open,
|
||||
close,
|
||||
handleSelect,
|
||||
search,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div v-if="items">
|
||||
<RecipeOrganizerDialog v-model="dialog" :item-type="itemType" />
|
||||
<RecipeOrganizerDialog v-model="dialogs.organizer" :item-type="itemType" />
|
||||
|
||||
<BaseDialog
|
||||
v-if="deleteTarget"
|
||||
v-model="deleteDialog"
|
||||
v-model="dialogs.delete"
|
||||
:title="$t('general.delete-with-name', { name: deleteTarget.name })"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
|
|
@ -13,38 +13,43 @@
|
|||
<v-card-text> {{ $t("general.confirm-delete-generic-with-name", { name: deleteTarget.name }) }} </v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BaseDialog v-if="updateTarget" v-model="dialogs.update" :title="$t('general.update')" @confirm="updateOne()">
|
||||
<v-card-text>
|
||||
<v-text-field v-model="updateTarget.name" label="Name"> </v-text-field>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
{{ dialogs.update }}
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model="searchString"
|
||||
outlined
|
||||
autofocus
|
||||
color="primary accent-3"
|
||||
:placeholder="$t('search.search-placeholder')"
|
||||
:prepend-inner-icon="$globals.icons.search"
|
||||
clearable
|
||||
>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model="searchString"
|
||||
outlined
|
||||
autofocus
|
||||
color="primary accent-3"
|
||||
:placeholder="$t('search.search-placeholder')"
|
||||
:prepend-inner-icon="$globals.icons.search"
|
||||
clearable
|
||||
>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-app-bar color="transparent" flat class="mt-n1 rounded align-center">
|
||||
<v-icon large left>
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
<v-toolbar-title class="headline">
|
||||
<slot name="title">
|
||||
{{ headline }}
|
||||
</slot>
|
||||
<slot name="title"> </slot>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<BaseButton create @click="dialog = true" />
|
||||
<BaseButton create @click="dialogs.organizer = true" />
|
||||
</v-app-bar>
|
||||
<section v-for="(itms, key, idx) in showItems" :key="'header' + idx" :class="idx === 1 ? null : 'my-4'">
|
||||
<BaseCardSectionTitle v-if="key.length === 1" :title="key"> </BaseCardSectionTitle>
|
||||
<section v-for="(itms, key, idx) in itemsSorted" :key="'header' + idx" :class="idx === 1 ? null : 'my-4'">
|
||||
<BaseCardSectionTitle v-if="isTitle(key)" :title="key" />
|
||||
<v-row>
|
||||
<v-col v-for="(item, index) in itms" :key="'cat' + index" cols="12" :sm="12" :md="6" :lg="4" :xl="3">
|
||||
<v-card class="left-border" hover :to="`/recipes/${itemType}/${item.slug}`">
|
||||
<v-card v-if="item" class="left-border" hover :to="`/?${itemType}=${item.id}`">
|
||||
<v-card-actions>
|
||||
<v-icon>
|
||||
{{ icon }}
|
||||
|
|
@ -53,7 +58,11 @@
|
|||
{{ item.name }}
|
||||
</v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<ContextMenu :items="[presets.delete]" @delete="confirmDelete(item)" />
|
||||
<ContextMenu
|
||||
:items="[presets.delete, presets.edit]"
|
||||
@delete="confirmDelete(item)"
|
||||
@edit="openUpdateDialog(item)"
|
||||
/>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
|
@ -69,9 +78,10 @@ import { useContextPresets } from "~/composables/use-context-presents";
|
|||
import RecipeOrganizerDialog from "~/components/Domain/Recipe/RecipeOrganizerDialog.vue";
|
||||
import { RecipeOrganizer } from "~/lib/api/types/non-generated";
|
||||
import { useRouteQuery } from "~/composables/use-router";
|
||||
import { deepCopy } from "~/composables/use-utils";
|
||||
|
||||
interface GenericItem {
|
||||
id?: string;
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
}
|
||||
|
|
@ -109,14 +119,75 @@ export default defineComponent({
|
|||
keys: ["name"],
|
||||
},
|
||||
});
|
||||
|
||||
// =================================================================
|
||||
// Context Menu
|
||||
|
||||
const dialogs = ref({
|
||||
organizer: false,
|
||||
update: false,
|
||||
delete: false,
|
||||
});
|
||||
|
||||
const presets = useContextPresets();
|
||||
|
||||
const deleteTarget = ref<GenericItem | null>(null);
|
||||
const updateTarget = ref<GenericItem | null>(null);
|
||||
|
||||
function confirmDelete(item: GenericItem) {
|
||||
deleteTarget.value = item;
|
||||
dialogs.value.delete = true;
|
||||
}
|
||||
|
||||
function deleteOne() {
|
||||
if (!deleteTarget.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit("delete", deleteTarget.value.id);
|
||||
}
|
||||
|
||||
function openUpdateDialog(item: GenericItem) {
|
||||
updateTarget.value = deepCopy(item);
|
||||
dialogs.value.update = true;
|
||||
}
|
||||
|
||||
function updateOne() {
|
||||
if (!updateTarget.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit("update", updateTarget.value);
|
||||
}
|
||||
|
||||
// ================================================================
|
||||
// Search Functions
|
||||
|
||||
const searchString = useRouteQuery("q", "");
|
||||
|
||||
const fuse = computed(() => {
|
||||
return new Fuse(props.items, state.options);
|
||||
});
|
||||
|
||||
const fuzzyItems = computed<GenericItem[]>(() => {
|
||||
if (searchString.value.trim() === "") {
|
||||
return props.items;
|
||||
}
|
||||
const result = fuse.value.search(searchString.value.trim() as string);
|
||||
return result.map((x) => x.item);
|
||||
});
|
||||
|
||||
// =================================================================
|
||||
// Sorted Items
|
||||
|
||||
const itemsSorted = computed(() => {
|
||||
const byLetter: { [key: string]: Array<GenericItem> } = {};
|
||||
|
||||
if (!props.items) return byLetter;
|
||||
if (!fuzzyItems.value) {
|
||||
return byLetter;
|
||||
}
|
||||
|
||||
props.items
|
||||
fuzzyItems.value
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.forEach((item) => {
|
||||
const letter = item.name[0].toUpperCase();
|
||||
|
|
@ -129,63 +200,22 @@ export default defineComponent({
|
|||
return byLetter;
|
||||
});
|
||||
|
||||
// =================================================================
|
||||
// Context Menu
|
||||
const presets = useContextPresets();
|
||||
|
||||
const deleteTarget = ref<GenericItem | null>(null);
|
||||
const deleteDialog = ref(false);
|
||||
|
||||
function confirmDelete(item: GenericItem) {
|
||||
deleteTarget.value = item;
|
||||
deleteDialog.value = true;
|
||||
function isTitle(str: number | string) {
|
||||
return typeof str === "string" && str.length === 1;
|
||||
}
|
||||
|
||||
function deleteOne() {
|
||||
if (!deleteTarget.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit("delete", deleteTarget.value.id);
|
||||
}
|
||||
|
||||
const dialog = ref(false);
|
||||
|
||||
// ================================================================
|
||||
// Search Functions
|
||||
|
||||
const searchString = useRouteQuery("q", "");
|
||||
|
||||
const fuse = computed(() => {
|
||||
return new Fuse(props.items, state.options);
|
||||
});
|
||||
|
||||
const fuzzyItems = computed(() => {
|
||||
if (searchString.value.trim() === "") {
|
||||
return props.items;
|
||||
}
|
||||
const result = fuse.value.search(searchString.value.trim() as string);
|
||||
return result.map((x) => x.item);
|
||||
});
|
||||
|
||||
const showItems = computed(() => {
|
||||
if (searchString.value.trim() === "") {
|
||||
return itemsSorted.value;
|
||||
} else {
|
||||
return fuzzyItems;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
dialog,
|
||||
isTitle,
|
||||
dialogs,
|
||||
confirmDelete,
|
||||
openUpdateDialog,
|
||||
updateOne,
|
||||
updateTarget,
|
||||
deleteOne,
|
||||
deleteDialog,
|
||||
deleteTarget,
|
||||
presets,
|
||||
itemsSorted,
|
||||
searchString,
|
||||
showItems,
|
||||
};
|
||||
},
|
||||
// Needed for useMeta
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue