mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-06 14:05:21 +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
|
|
@ -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>
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
:icon="$globals.icons.tags"
|
||||
item-type="categories"
|
||||
@delete="actions.deleteOne"
|
||||
@update="actions.updateOne"
|
||||
>
|
||||
<template #title> {{ $tc("category.categories") }} </template>
|
||||
</RecipeOrganizerPage>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue