mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 05:25:26 +02:00
refactor: unify recipe-organizer components (#1340)
* use generic context menu * implement organizer stores * add basic organizer types * refactor selectors to apply for all organizers * remove legacy organizer composables
This commit is contained in:
Hayden
GitHub
parent
bc175d4ca9
commit
12f480eb75
26 changed files with 719 additions and 857 deletions
|
|
@ -36,14 +36,9 @@
|
|||
<v-card-text v-if="cookbooks">
|
||||
<v-text-field v-model="cookbooks[index].name" label="Cookbook Name"></v-text-field>
|
||||
<v-textarea v-model="cookbooks[index].description" auto-grow :rows="2" label="Description"></v-textarea>
|
||||
<RecipeOrganizerSelector
|
||||
v-model="cookbooks[index].categories"
|
||||
:items="allCategories || []"
|
||||
selector-type="category"
|
||||
/>
|
||||
|
||||
<RecipeOrganizerSelector v-model="cookbooks[index].tags" :items="allTags || []" selector-type="tag" />
|
||||
<RecipeOrganizerSelector v-model="cookbooks[index].tools" :items="tools || []" selector-type="tool" />
|
||||
<RecipeOrganizerSelector v-model="cookbooks[index].categories" selector-type="categories" />
|
||||
<RecipeOrganizerSelector v-model="cookbooks[index].tags" selector-type="tags" />
|
||||
<RecipeOrganizerSelector v-model="cookbooks[index].tools" selector-type="tools" />
|
||||
<v-switch v-model="cookbooks[index].public" hide-details single-line>
|
||||
<template #label>
|
||||
Public Cookbook
|
||||
|
|
@ -102,26 +97,15 @@ import { defineComponent } from "@nuxtjs/composition-api";
|
|||
import draggable from "vuedraggable";
|
||||
import { useCookbooks } from "@/composables/use-group-cookbooks";
|
||||
import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
|
||||
import { useCategories, useTags, useTools } from "~/composables/recipes";
|
||||
|
||||
export default defineComponent({
|
||||
components: { draggable, RecipeOrganizerSelector },
|
||||
setup() {
|
||||
const { cookbooks, actions } = useCookbooks();
|
||||
|
||||
const { tools } = useTools();
|
||||
const { allCategories, useAsyncGetAll: getAllCategories } = useCategories();
|
||||
const { allTags, useAsyncGetAll: getAllTags } = useTags();
|
||||
|
||||
getAllCategories();
|
||||
getAllTags();
|
||||
|
||||
return {
|
||||
allCategories,
|
||||
allTags,
|
||||
cookbooks,
|
||||
actions,
|
||||
tools,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@
|
|||
@submit="dialog.callback"
|
||||
>
|
||||
<v-card-text v-if="dialog.mode == MODES.tag">
|
||||
<RecipeCategoryTagSelector v-model="toSetTags" :tag-selector="true" />
|
||||
<RecipeOrganizerSelector v-model="toSetTags" selector-type="tags" />
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.category">
|
||||
<RecipeCategoryTagSelector v-model="toSetCategories" />
|
||||
<RecipeOrganizerSelector v-model="toSetCategories" selector-type="categories" />
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.delete">
|
||||
<p class="h4">Are you sure you want to delete the following recipes? This action cannot be undone.</p>
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, useContext, onMounted } from "@nuxtjs/composition-api";
|
||||
import RecipeDataTable from "~/components/Domain/Recipe/RecipeDataTable.vue";
|
||||
import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
|
||||
import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useRecipes, allRecipes } from "~/composables/recipes";
|
||||
import { Recipe } from "~/types/api-types/recipe";
|
||||
|
|
@ -165,7 +165,7 @@ const MODES = {
|
|||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: { RecipeDataTable, RecipeCategoryTagSelector, GroupExportData },
|
||||
components: { RecipeDataTable, RecipeOrganizerSelector, GroupExportData },
|
||||
scrollToTop: true,
|
||||
setup() {
|
||||
const { getAllRecipes, refreshRecipes } = useRecipes(true, true);
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@
|
|||
hide-details
|
||||
class="pt-0 my-auto py-auto"
|
||||
color="secondary"
|
||||
@change="updateTool(recipe.tools[index])"
|
||||
@change="toolStore.actions.updateOne(recipe.tools[index])"
|
||||
>
|
||||
</v-checkbox>
|
||||
<v-list-item-content>
|
||||
|
|
@ -256,12 +256,12 @@
|
|||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
<RecipeCategoryTagSelector
|
||||
<RecipeOrganizerSelector
|
||||
v-if="form"
|
||||
v-model="recipe.recipeCategory"
|
||||
:return-object="true"
|
||||
:show-add="true"
|
||||
:show-label="false"
|
||||
selector-type="categories"
|
||||
/>
|
||||
<RecipeChips v-else :items="recipe.recipeCategory" />
|
||||
</v-card-text>
|
||||
|
|
@ -274,13 +274,12 @@
|
|||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
<RecipeCategoryTagSelector
|
||||
<RecipeOrganizerSelector
|
||||
v-if="form"
|
||||
v-model="recipe.tags"
|
||||
:return-object="true"
|
||||
:show-add="true"
|
||||
:tag-selector="true"
|
||||
:show-label="false"
|
||||
selector-type="tags"
|
||||
/>
|
||||
<RecipeChips v-else :items="recipe.tags" url-prefix="tags" />
|
||||
</v-card-text>
|
||||
|
|
@ -291,7 +290,7 @@
|
|||
<v-card-title class="py-2"> Required Tools </v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text class="pt-0">
|
||||
<RecipeTools v-model="recipe.tools" :edit="form" />
|
||||
<RecipeOrganizerSelector v-model="recipe.tools" selector-type="tools" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
|
|
@ -344,12 +343,12 @@
|
|||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
<RecipeCategoryTagSelector
|
||||
<RecipeOrganizerSelector
|
||||
v-if="form"
|
||||
v-model="recipe.recipeCategory"
|
||||
:return-object="true"
|
||||
:show-add="true"
|
||||
:show-label="false"
|
||||
selector-type="categories"
|
||||
/>
|
||||
<RecipeChips v-else :items="recipe.recipeCategory" />
|
||||
</v-card-text>
|
||||
|
|
@ -362,14 +361,14 @@
|
|||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
<RecipeCategoryTagSelector
|
||||
<RecipeOrganizerSelector
|
||||
v-if="form"
|
||||
v-model="recipe.tags"
|
||||
:return-object="true"
|
||||
:show-add="true"
|
||||
:tag-selector="true"
|
||||
:show-label="false"
|
||||
selector-type="tags"
|
||||
/>
|
||||
|
||||
<RecipeChips v-else :items="recipe.tags" url-prefix="tags" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
|
@ -484,7 +483,7 @@ import VueMarkdown from "@adapttive/vue-markdown";
|
|||
import draggable from "vuedraggable";
|
||||
import { invoke, until, useWakeLock } from "@vueuse/core";
|
||||
import { onUnmounted } from "vue-demi";
|
||||
import RecipeCategoryTagSelector from "@/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
|
||||
import RecipeOrganizerSelector from "@/components/Domain/Recipe/RecipeOrganizerSelector.vue";
|
||||
import RecipeDialogBulkAdd from "@/components/Domain/Recipe//RecipeDialogBulkAdd.vue";
|
||||
import { useUserApi, useStaticRoutes } from "~/composables/api";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
|
|
@ -503,9 +502,10 @@ import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientE
|
|||
import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
|
||||
import RecipeTools from "~/components/Domain/Recipe/RecipeTools.vue";
|
||||
import RecipeComments from "~/components/Domain/Recipe/RecipeComments.vue";
|
||||
import { Recipe, RecipeTool } from "~/types/api-types/recipe";
|
||||
import { Recipe } from "~/types/api-types/recipe";
|
||||
import { uuid4, deepCopy } from "~/composables/use-utils";
|
||||
import { useRouteQuery } from "~/composables/use-router";
|
||||
import { useToolStore } from "~/composables/store";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -516,7 +516,7 @@ export default defineComponent({
|
|||
return import(/* webpackChunkName: "RecipeAssets" */ "~/components/Domain/Recipe/RecipeAssets.vue");
|
||||
}
|
||||
},
|
||||
RecipeCategoryTagSelector,
|
||||
RecipeOrganizerSelector,
|
||||
RecipeChips,
|
||||
RecipeComments,
|
||||
RecipeDialogBulkAdd,
|
||||
|
|
@ -758,18 +758,7 @@ export default defineComponent({
|
|||
// ===============================================================
|
||||
// Recipe Tools
|
||||
|
||||
async function updateTool(tool: RecipeTool) {
|
||||
if (tool.id === undefined) return;
|
||||
|
||||
const { response } = await api.tools.updateOne(tool.id, tool);
|
||||
|
||||
if (response?.status === 200) {
|
||||
console.log("Update Successful");
|
||||
}
|
||||
}
|
||||
|
||||
// ===============================================================
|
||||
// Recipe API Extras
|
||||
const toolStore = useToolStore();
|
||||
|
||||
const apiNewKey = ref("");
|
||||
|
||||
|
|
@ -864,13 +853,13 @@ export default defineComponent({
|
|||
deleteRecipe,
|
||||
printRecipe,
|
||||
closeEditor,
|
||||
updateTool,
|
||||
updateRecipe,
|
||||
uploadImage,
|
||||
validators,
|
||||
recipeImage,
|
||||
addIngredient,
|
||||
removeApiExtra,
|
||||
toolStore,
|
||||
};
|
||||
},
|
||||
head: {},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div flat>
|
||||
<div>
|
||||
<v-card-title class="headline"> Recipe Bulk Importer </v-card-title>
|
||||
<v-card-text>
|
||||
The Bulk recipe importer allows you to import multiple recipes at once by queing the sites on the backend and
|
||||
|
|
@ -38,8 +38,7 @@
|
|||
<v-col cols="12" xs="12" sm="6">
|
||||
<RecipeOrganizerSelector
|
||||
v-model="bulkUrls[idx].categories"
|
||||
:items="allCategories || []"
|
||||
selector-type="category"
|
||||
selector-type="categories"
|
||||
:input-attrs="{
|
||||
filled: true,
|
||||
singleLine: true,
|
||||
|
|
@ -54,8 +53,7 @@
|
|||
<v-col cols="12" xs="12" sm="6">
|
||||
<RecipeOrganizerSelector
|
||||
v-model="bulkUrls[idx].tags"
|
||||
:items="allTags || []"
|
||||
selector-type="tag"
|
||||
selector-type="tags"
|
||||
:input-attrs="{
|
||||
filled: true,
|
||||
singleLine: true,
|
||||
|
|
@ -109,7 +107,6 @@ import { whenever } from "@vueuse/shared";
|
|||
import { useUserApi } from "~/composables/api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
|
||||
import { useCategories, useTags } from "~/composables/recipes";
|
||||
import { ReportSummary } from "~/types/api-types/reports";
|
||||
import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
|
||||
|
||||
|
|
@ -152,12 +149,6 @@ export default defineComponent({
|
|||
fetchReports();
|
||||
}
|
||||
|
||||
const { allTags, useAsyncGetAll: getAllTags } = useTags();
|
||||
const { allCategories, useAsyncGetAll: getAllCategories } = useCategories();
|
||||
|
||||
getAllTags();
|
||||
getAllCategories();
|
||||
|
||||
// =========================================================
|
||||
// Reports
|
||||
|
||||
|
|
@ -189,8 +180,6 @@ export default defineComponent({
|
|||
assignUrls,
|
||||
reports,
|
||||
deleteReport,
|
||||
allTags,
|
||||
allCategories,
|
||||
bulkCreate,
|
||||
bulkUrls,
|
||||
lockBulkImport,
|
||||
|
|
|
|||
|
|
@ -1,44 +1,36 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<RecipeCategoryTagToolPage v-if="categories" :items="categories" item-type="categories" @delete="removeCat" />
|
||||
<RecipeOrganizerPage
|
||||
v-if="items"
|
||||
:items="items"
|
||||
:icon="$globals.icons.tags"
|
||||
item-type="categories"
|
||||
@delete="actions.deleteOne"
|
||||
>
|
||||
<template #title> {{ $tc("category.categories") }} </template>
|
||||
</RecipeOrganizerPage>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, useAsync } from "@nuxtjs/composition-api";
|
||||
import RecipeCategoryTagToolPage from "~/components/Domain/Recipe/RecipeCategoryTagToolPage.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import RecipeOrganizerPage from "~/components/Domain/Recipe/RecipeOrganizerPage.vue";
|
||||
import { useCategoryStore } from "~/composables/store";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
RecipeCategoryTagToolPage,
|
||||
RecipeOrganizerPage,
|
||||
},
|
||||
setup() {
|
||||
const userApi = useUserApi();
|
||||
const categories = useAsync(async () => {
|
||||
const { data } = await userApi.categories.getAll();
|
||||
|
||||
if (data) {
|
||||
return data;
|
||||
}
|
||||
}, useAsyncKey());
|
||||
|
||||
function removeCat(id: string) {
|
||||
if (categories.value) {
|
||||
for (let i = 0; i < categories.value.length; i++) {
|
||||
if (categories.value[i].id === id) {
|
||||
categories.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const { items, actions } = useCategoryStore();
|
||||
|
||||
return {
|
||||
categories,
|
||||
removeCat,
|
||||
items,
|
||||
actions,
|
||||
};
|
||||
},
|
||||
head: {
|
||||
title: "Tags",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,36 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<RecipeCategoryTagToolPage v-if="tools" :items="tools" item-type="tags" @delete="removeTag" />
|
||||
<RecipeOrganizerPage
|
||||
v-if="items"
|
||||
:items="items"
|
||||
:icon="$globals.icons.tags"
|
||||
item-type="tags"
|
||||
@delete="actions.deleteOne"
|
||||
>
|
||||
<template #title> Tags </template>
|
||||
</RecipeOrganizerPage>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, useAsync } from "@nuxtjs/composition-api";
|
||||
import RecipeCategoryTagToolPage from "~/components/Domain/Recipe/RecipeCategoryTagToolPage.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import RecipeOrganizerPage from "~/components/Domain/Recipe/RecipeOrganizerPage.vue";
|
||||
import { useTagStore } from "~/composables/store";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
RecipeCategoryTagToolPage,
|
||||
RecipeOrganizerPage,
|
||||
},
|
||||
setup() {
|
||||
const userApi = useUserApi();
|
||||
const tools = useAsync(async () => {
|
||||
const { data } = await userApi.tags.getAll();
|
||||
|
||||
if (data) {
|
||||
return data;
|
||||
}
|
||||
}, useAsyncKey());
|
||||
|
||||
function removeTag(id: string) {
|
||||
if (tools.value) {
|
||||
for (let i = 0; i < tools.value.length; i++) {
|
||||
if (tools.value[i].id === id) {
|
||||
tools.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const { items, actions } = useTagStore();
|
||||
|
||||
return {
|
||||
tools,
|
||||
removeTag,
|
||||
items,
|
||||
actions,
|
||||
};
|
||||
},
|
||||
head: {
|
||||
title: "Tags",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,38 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<RecipeCategoryTagToolPage v-if="tools" :items="tools" item-type="tools" @delete="removeTool" />
|
||||
<RecipeOrganizerPage
|
||||
v-if="tools"
|
||||
:icon="$globals.icons.potSteam"
|
||||
:items="tools"
|
||||
item-type="tools"
|
||||
@delete="actions.deleteOne"
|
||||
>
|
||||
<template #title> Tools </template>
|
||||
</RecipeOrganizerPage>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, useAsync } from "@nuxtjs/composition-api";
|
||||
import RecipeCategoryTagToolPage from "~/components/Domain/Recipe/RecipeCategoryTagToolPage.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
||||
import RecipeOrganizerPage from "~/components/Domain/Recipe/RecipeOrganizerPage.vue";
|
||||
import { useToolStore } from "~/composables/store";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
RecipeCategoryTagToolPage,
|
||||
RecipeOrganizerPage,
|
||||
},
|
||||
setup() {
|
||||
const userApi = useUserApi();
|
||||
const tools = useAsync(async () => {
|
||||
const { data } = await userApi.tools.getAll();
|
||||
|
||||
if (data) {
|
||||
return data;
|
||||
}
|
||||
}, useAsyncKey());
|
||||
|
||||
function removeTool(id: string) {
|
||||
if (tools.value) {
|
||||
for (let i = 0; i < tools.value.length; i++) {
|
||||
if (tools.value[i].id === id) {
|
||||
tools.value.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const toolStore = useToolStore();
|
||||
const dialog = ref(false);
|
||||
|
||||
return {
|
||||
tools,
|
||||
removeTool,
|
||||
dialog,
|
||||
tools: toolStore.items,
|
||||
actions: toolStore.actions,
|
||||
};
|
||||
},
|
||||
head: {
|
||||
title: "Tools",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -35,23 +35,30 @@
|
|||
<v-expand-transition>
|
||||
<v-row v-show="state" dense class="my-0 dense flex-row align-center justify-space-around">
|
||||
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
|
||||
<RecipeCategoryTagSelector
|
||||
<RecipeOrganizerSelector
|
||||
v-model="includeCategories"
|
||||
hide-details
|
||||
:solo="true"
|
||||
:dense="false"
|
||||
:input-attrs="{
|
||||
solo: true,
|
||||
hideDetails: true,
|
||||
dense: false,
|
||||
}"
|
||||
:show-add="false"
|
||||
:return-object="false"
|
||||
selector-type="categories"
|
||||
/>
|
||||
<RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
|
||||
</v-col>
|
||||
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
|
||||
<RecipeCategoryTagSelector
|
||||
<RecipeOrganizerSelector
|
||||
v-model="includeTags"
|
||||
hide-details
|
||||
:solo="true"
|
||||
:dense="false"
|
||||
:input-attrs="{
|
||||
solo: true,
|
||||
hideDetails: true,
|
||||
dense: false,
|
||||
}"
|
||||
:show-add="false"
|
||||
:return-object="false"
|
||||
:tag-selector="true"
|
||||
selector-type="tags"
|
||||
/>
|
||||
<RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
|
||||
</v-col>
|
||||
|
|
@ -106,7 +113,7 @@
|
|||
import Fuse from "fuse.js";
|
||||
import { defineComponent, toRefs, computed, reactive } from "@nuxtjs/composition-api";
|
||||
import RecipeSearchFilterSelector from "~/components/Domain/Recipe/RecipeSearchFilterSelector.vue";
|
||||
import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
|
||||
import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
|
||||
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
|
||||
import { useRecipes, allRecipes } from "~/composables/recipes";
|
||||
import { RecipeSummary } from "~/types/api-types/recipe";
|
||||
|
|
@ -121,7 +128,7 @@ interface GenericFilter {
|
|||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
RecipeCategoryTagSelector,
|
||||
RecipeOrganizerSelector,
|
||||
RecipeSearchFilterSelector,
|
||||
RecipeCardSection,
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue