Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-25 08:09:41 +02:00
Code Issues Releases Activity

feat: Filter Recipes By Household (and a ton of bug fixes) (#4207)

Browse source 
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Michael Genson 2024-09-22 09:59:20 -05:00 • committed by GitHub
parent 2a6922a85c
commit 7c274de778
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
65 changed files with 896 additions and 590 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/composables/api/index.ts
View file

@ -1,3 +1,3 @@
export { useAppInfo } from "./use-app-info";
export { useStaticRoutes } from "./static-routes";
export { useAdminApi, useUserApi } from "./api-client";
export { useAdminApi, usePublicApi, usePublicExploreApi, useUserApi } from "./api-client";

3
frontend/composables/partials/types.ts Normal file
View file

@ -0,0 +1,3 @@
export type BoundT = {
id?: string | number | null;
};

15
frontend/composables/partials/use-actions-factory.ts
View file

@ -1,18 +1,15 @@
import { Ref, useAsync } from "@nuxtjs/composition-api";
import { useAsyncKey } from "../use-utils";
import { BoundT } from "./types";
import { BaseCRUDAPI, BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
import { QueryValue } from "~/lib/api/base/route";
type BoundT = {
id?: string | number | null;
};
interface PublicStoreActions<T extends BoundT> {
interface ReadOnlyStoreActions<T extends BoundT> {
getAll(page?: number, perPage?: number, params?: any): Ref<T[] | null>;
refresh(): Promise<void>;
}
interface StoreActions<T extends BoundT> extends PublicStoreActions<T> {
interface StoreActions<T extends BoundT> extends ReadOnlyStoreActions<T> {
createOne(createData: T): Promise<T | null>;
updateOne(updateData: T): Promise<T | null>;
deleteOne(id: string | number): Promise<T | null>;
@ -20,16 +17,16 @@ interface StoreActions<T extends BoundT> extends PublicStoreActions<T> {
/**
* usePublicStoreActions is a factory function that returns a set of methods
* useReadOnlyActions is a factory function that returns a set of methods
* that can be reused to manage the state of a data store without using
* Vuex. This is primarily used for basic GET/GETALL operations that required
* a lot of refreshing hooks to be called on operations
*/
export function usePublicStoreActions<T extends BoundT>(
export function useReadOnlyActions<T extends BoundT>(
api: BaseCRUDAPIReadOnly<T>,
allRef: Ref<T[] | null> | null,
loading: Ref<boolean>
): PublicStoreActions<T> {
): ReadOnlyStoreActions<T> {
function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
params.orderBy ??= "name";
params.orderDirection ??= "asc";

53
frontend/composables/partials/use-store-factory.ts Normal file
View file

@ -0,0 +1,53 @@
import { ref, reactive, Ref } from "@nuxtjs/composition-api";
import { useReadOnlyActions, useStoreActions } from "./use-actions-factory";
import { BoundT } from "./types";
import { BaseCRUDAPI, BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
export const useData = function<T extends BoundT>(defaultObject: T) {
const data = reactive({ ...defaultObject });
function reset() {
Object.assign(data, defaultObject);
};
return { data, reset };
}
export const useReadOnlyStore = function<T extends BoundT>(
store: Ref<T[]>,
loading: Ref<boolean>,
api: BaseCRUDAPIReadOnly<T>,
) {
const actions = {
...useReadOnlyActions(api, store, loading),
flushStore() {
store.value = [];
},
};
if (!loading.value && (!store.value || store.value.length === 0)) {
const result = actions.getAll();
store.value = result.value || [];
}
return { store, actions };
}
export const useStore = function<T extends BoundT>(
store: Ref<T[]>,
loading: Ref<boolean>,
api: BaseCRUDAPI<unknown, T, unknown>,
) {
const actions = {
...useStoreActions(api, store, loading),
flushStore() {
store = ref([]);
},
};
if (!loading.value && (!store.value || store.value.length === 0)) {
const result = actions.getAll();
store.value = result.value || [];
}
return { store, actions };
}

1
frontend/composables/recipes/use-recipes.ts
View file

@ -32,6 +32,7 @@ export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
searchSeed: query?._searchSeed, // unused, but pass it along for completeness of data
search: query?.search,
cookbook: query?.cookbook,
households: query?.households,
categories: query?.categories,
requireAllCategories: query?.requireAllCategories,
tags: query?.tags,

11
frontend/composables/store/index.ts
View file

@ -1,6 +1,7 @@
export { useFoodStore, useFoodData } from "./use-food-store";
export { useUnitStore, useUnitData } from "./use-unit-store";
export { useCategoryStore, usePublicCategoryStore, useCategoryData } from "./use-category-store";
export { useFoodStore, usePublicFoodStore, useFoodData } from "./use-food-store";
export { useHouseholdStore, usePublicHouseholdStore } from "./use-household-store";
export { useLabelStore, useLabelData } from "./use-label-store";
export { useToolStore, useToolData } from "./use-tool-store";
export { useCategoryStore, useCategoryData } from "./use-category-store";
export { useTagStore, useTagData } from "./use-tag-store";
export { useTagStore, usePublicTagStore, useTagData } from "./use-tag-store";
export { useToolStore, usePublicToolStore, useToolData } from "./use-tool-store";
export { useUnitStore, useUnitData } from "./use-unit-store";

79
frontend/composables/store/use-category-store.ts
View file

@ -1,73 +1,26 @@
import { reactive, ref, Ref } from "@nuxtjs/composition-api";
import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
import { usePublicExploreApi } from "../api/api-client";
import { useUserApi } from "~/composables/api";
import { ref, Ref } from "@nuxtjs/composition-api";
import { useData, useReadOnlyStore, useStore } from "../partials/use-store-factory";
import { RecipeCategory } from "~/lib/api/types/recipe";
import { usePublicExploreApi, useUserApi } from "~/composables/api";
const categoryStore: Ref<RecipeCategory[]> = ref([]);
const publicStoreLoading = ref(false);
const storeLoading = ref(false);
const store: Ref<RecipeCategory[]> = ref([]);
const loading = ref(false);
const publicLoading = ref(false);
export function useCategoryData() {
const data = reactive({
export const useCategoryData = function () {
return useData<RecipeCategory>({
id: "",
name: "",
slug: undefined,
slug: "",
});
function reset() {
data.id = "";
data.name = "";
data.slug = undefined;
}
return {
data,
reset,
};
}
export function usePublicCategoryStore(groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
const loading = publicStoreLoading;
const actions = {
...usePublicStoreActions<RecipeCategory>(api.categories, categoryStore, loading),
flushStore() {
categoryStore.value = [];
},
};
if (!loading.value && (!categoryStore.value || categoryStore.value?.length === 0)) {
actions.getAll();
}
return {
items: categoryStore,
actions,
loading,
};
}
export function useCategoryStore() {
// passing the group slug switches to using the public API
export const useCategoryStore = function () {
const api = useUserApi();
const loading = storeLoading;
const actions = {
...useStoreActions<RecipeCategory>(api.categories, categoryStore, loading),
flushStore() {
categoryStore.value = [];
},
};
if (!loading.value && (!categoryStore.value || categoryStore.value?.length === 0)) {
actions.getAll();
}
return {
items: categoryStore,
actions,
loading,
};
return useStore<RecipeCategory>(store, loading, api.categories);
}
export const usePublicCategoryStore = function (groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
return useReadOnlyStore<RecipeCategory>(store, publicLoading, api.categories);
}

73
frontend/composables/store/use-food-store.ts
View file

@ -1,73 +1,28 @@
import { ref, reactive, Ref } from "@nuxtjs/composition-api";
import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
import { usePublicExploreApi } from "../api/api-client";
import { useUserApi } from "~/composables/api";
import { ref, Ref } from "@nuxtjs/composition-api";
import { useData, useReadOnlyStore, useStore } from "../partials/use-store-factory";
import { IngredientFood } from "~/lib/api/types/recipe";
import { usePublicExploreApi, useUserApi } from "~/composables/api";
let foodStore: Ref<IngredientFood[] | null> = ref([]);
const publicStoreLoading = ref(false);
const storeLoading = ref(false);
const store: Ref<IngredientFood[]> = ref([]);
const loading = ref(false);
const publicLoading = ref(false);
/**
* useFoodData returns a template reactive object
* for managing the creation of foods. It also provides a
* function to reset the data back to the initial state.
*/
export const useFoodData = function () {
const data: IngredientFood = reactive({
return useData<IngredientFood>({
id: "",
name: "",
description: "",
labelId: undefined,
onHand: false,
});
function reset() {
data.id = "";
data.name = "";
data.description = "";
data.labelId = undefined;
data.onHand = false;
}
return {
data,
reset,
};
};
export const usePublicFoodStore = function (groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
const loading = publicStoreLoading;
const actions = {
...usePublicStoreActions(api.foods, foodStore, loading),
flushStore() {
foodStore = ref([]);
},
};
if (!loading.value && (!foodStore.value || foodStore.value.length === 0)) {
foodStore = actions.getAll();
}
return { foods: foodStore, actions };
};
}
export const useFoodStore = function () {
const api = useUserApi();
const loading = storeLoading;
return useStore<IngredientFood>(store, loading, api.foods);
}
const actions = {
...useStoreActions(api.foods, foodStore, loading),
flushStore() {
foodStore.value = [];
},
};
if (!loading.value && (!foodStore.value || foodStore.value.length === 0)) {
foodStore = actions.getAll();
}
return { foods: foodStore, actions };
};
export const usePublicFoodStore = function (groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
return useReadOnlyStore<IngredientFood>(store, publicLoading, api.foods);
}

18
frontend/composables/store/use-household-store.ts Normal file
View file

@ -0,0 +1,18 @@
import { ref, Ref } from "@nuxtjs/composition-api";
import { useReadOnlyStore } from "../partials/use-store-factory";
import { HouseholdSummary } from "~/lib/api/types/household";
import { usePublicExploreApi, useUserApi } from "~/composables/api";
const store: Ref<HouseholdSummary[]> = ref([]);
const loading = ref(false);
const publicLoading = ref(false);
export const useHouseholdStore = function () {
const api = useUserApi();
return useReadOnlyStore<HouseholdSummary>(store, loading, api.households);
}
export const usePublicHouseholdStore = function (groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
return useReadOnlyStore<HouseholdSummary>(store, publicLoading, api.households);
}

45
frontend/composables/store/use-label-store.ts
View file

@ -1,50 +1,21 @@
import { reactive, ref, Ref } from "@nuxtjs/composition-api";
import { useStoreActions } from "../partials/use-actions-factory";
import { ref, Ref } from "@nuxtjs/composition-api";
import { useData, useStore } from "../partials/use-store-factory";
import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
import { useUserApi } from "~/composables/api";
let labelStore: Ref<MultiPurposeLabelOut[] | null> = ref([]);
const storeLoading = ref(false);
const store: Ref<MultiPurposeLabelOut[]> = ref([]);
const loading = ref(false);
export function useLabelData() {
const data = reactive({
export const useLabelData = function () {
return useData<MultiPurposeLabelOut>({
groupId: "",
id: "",
name: "",
color: "",
});
function reset() {
data.groupId = "";
data.id = "";
data.name = "";
data.color = "";
}
return {
data,
reset,
};
}
export function useLabelStore() {
export const useLabelStore = function () {
const api = useUserApi();
const loading = storeLoading;
const actions = {
...useStoreActions<MultiPurposeLabelOut>(api.multiPurposeLabels, labelStore, loading),
flushStore() {
labelStore.value = [];
},
};
if (!loading.value && (!labelStore.value || labelStore.value?.length === 0)) {
labelStore = actions.getAll();
}
return {
labels: labelStore,
actions,
loading,
};
return useStore<MultiPurposeLabelOut>(store, loading, api.multiPurposeLabels);
}

78
frontend/composables/store/use-tag-store.ts
View file

@ -1,72 +1,26 @@
import { reactive, ref, Ref } from "@nuxtjs/composition-api";
import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
import { usePublicExploreApi } from "../api/api-client";
import { useUserApi } from "~/composables/api";
import { ref, Ref } from "@nuxtjs/composition-api";
import { useData, useReadOnlyStore, useStore } from "../partials/use-store-factory";
import { RecipeTag } from "~/lib/api/types/recipe";
import { usePublicExploreApi, useUserApi } from "~/composables/api";
const items: Ref<RecipeTag[]> = ref([]);
const publicStoreLoading = ref(false);
const storeLoading = ref(false);
const store: Ref<RecipeTag[]> = ref([]);
const loading = ref(false);
const publicLoading = ref(false);
export function useTagData() {
const data = reactive({
export const useTagData = function () {
return useData<RecipeTag>({
id: "",
name: "",
slug: undefined,
slug: "",
});
function reset() {
data.id = "";
data.name = "";
data.slug = undefined;
}
return {
data,
reset,
};
}
export function usePublicTagStore(groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
const loading = publicStoreLoading;
const actions = {
...usePublicStoreActions<RecipeTag>(api.tags, items, loading),
flushStore() {
items.value = [];
},
};
if (!loading.value && (!items.value || items.value?.length === 0)) {
actions.getAll();
}
return {
items,
actions,
loading,
};
}
export function useTagStore() {
export const useTagStore = function () {
const api = useUserApi();
const loading = storeLoading;
const actions = {
...useStoreActions<RecipeTag>(api.tags, items, loading),
flushStore() {
items.value = [];
},
};
if (!loading.value && (!items.value || items.value?.length === 0)) {
actions.getAll();
}
return {
items,
actions,
loading,
};
return useStore<RecipeTag>(store, loading, api.tags);
}
export const usePublicTagStore = function (groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
return useReadOnlyStore<RecipeTag>(store, publicLoading, api.tags);
}

79
frontend/composables/store/use-tool-store.ts
View file

@ -1,74 +1,27 @@
import { reactive, ref, Ref } from "@nuxtjs/composition-api";
import { usePublicExploreApi } from "../api/api-client";
import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
import { useUserApi } from "~/composables/api";
import { ref, Ref } from "@nuxtjs/composition-api";
import { useData, useReadOnlyStore, useStore } from "../partials/use-store-factory";
import { RecipeTool } from "~/lib/api/types/recipe";
import { usePublicExploreApi, useUserApi } from "~/composables/api";
const toolStore: Ref<RecipeTool[]> = ref([]);
const publicStoreLoading = ref(false);
const storeLoading = ref(false);
const store: Ref<RecipeTool[]> = ref([]);
const loading = ref(false);
const publicLoading = ref(false);
export function useToolData() {
const data = reactive({
export const useToolData = function () {
return useData<RecipeTool>({
id: "",
name: "",
slug: undefined,
slug: "",
onHand: false,
});
function reset() {
data.id = "";
data.name = "";
data.slug = undefined;
data.onHand = false;
}
return {
data,
reset,
};
}
export function usePublicToolStore(groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
const loading = publicStoreLoading;
const actions = {
...usePublicStoreActions<RecipeTool>(api.tools, toolStore, loading),
flushStore() {
toolStore.value = [];
},
};
if (!loading.value && (!toolStore.value || toolStore.value?.length === 0)) {
actions.getAll();
}
return {
items: toolStore,
actions,
loading,
};
}
export function useToolStore() {
export const useToolStore = function () {
const api = useUserApi();
const loading = storeLoading;
const actions = {
...useStoreActions<RecipeTool>(api.tools, toolStore, loading),
flushStore() {
toolStore.value = [];
},
};
if (!loading.value && (!toolStore.value || toolStore.value?.length === 0)) {
actions.getAll();
}
return {
items: toolStore,
actions,
loading,
};
return useStore<RecipeTool>(store, loading, api.tools);
}
export const usePublicToolStore = function (groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
return useReadOnlyStore<RecipeTool>(store, publicLoading, api.tools);
}

49
frontend/composables/store/use-unit-store.ts
View file

@ -1,53 +1,22 @@
import { ref, reactive, Ref } from "@nuxtjs/composition-api";
import { useStoreActions } from "../partials/use-actions-factory";
import { useUserApi } from "~/composables/api";
import { ref, Ref } from "@nuxtjs/composition-api";
import { useData, useStore } from "../partials/use-store-factory";
import { IngredientUnit } from "~/lib/api/types/recipe";
import { useUserApi } from "~/composables/api";
let unitStore: Ref<IngredientUnit[] | null> = ref([]);
const storeLoading = ref(false);
const store: Ref<IngredientUnit[]> = ref([]);
const loading = ref(false);
/**
* useUnitData returns a template reactive object
* for managing the creation of units. It also provides a
* function to reset the data back to the initial state.
*/
export const useUnitData = function () {
const data: IngredientUnit = reactive({
return useData<IngredientUnit>({
id: "",
name: "",
fraction: true,
abbreviation: "",
description: "",
});
function reset() {
data.id = "";
data.name = "";
data.fraction = true;
data.abbreviation = "";
data.description = "";
}
return {
data,
reset,
};
};
}
export const useUnitStore = function () {
const api = useUserApi();
const loading = storeLoading;
const actions = {
...useStoreActions<IngredientUnit>(api.units, unitStore, loading),
flushStore() {
unitStore.value = [];
},
};
if (!loading.value && (!unitStore.value || unitStore.value.length === 0)) {
unitStore = actions.getAll();
}
return { units: unitStore, actions };
};
return useStore<IngredientUnit>(store, loading, api.units);
}

6
frontend/composables/use-households.ts
View file

@ -1,5 +1,5 @@
import { computed, ref, Ref, useAsync } from "@nuxtjs/composition-api";
import { useUserApi } from "~/composables/api";
import { useAdminApi, useUserApi } from "~/composables/api";
import { HouseholdCreate, HouseholdInDB } from "~/lib/api/types/household";
const householdSelfRef = ref<HouseholdInDB | null>(null);
@ -46,8 +46,8 @@ export const useHouseholdSelf = function () {
return { actions, household };
};
export const useHouseholds = function () {
const api = useUserApi();
export const useAdminHouseholds = function () {
const api = useAdminApi();
const loading = ref(false);
function getAllHouseholds() {

53
frontend/composables/use-users/user-ratings.ts
View file

@ -7,34 +7,37 @@ const loading = ref(false);
const ready = ref(false);
export const useUserSelfRatings = function () {
const { $auth } = useContext();
const api = useUserApi();
const { $auth } = useContext();
const api = useUserApi();
async function refreshUserRatings() {
if (loading.value) {
return;
}
loading.value = true;
const { data } = await api.users.getSelfRatings();
userRatings.value = data?.ratings || [];
loading.value = false;
ready.value = true;
async function refreshUserRatings() {
if (!$auth.user || loading.value) {
return;
}
async function setRating(slug: string, rating: number | null, isFavorite: boolean | null) {
loading.value = true;
const userId = $auth.user?.id || "";
await api.users.setRating(userId, slug, rating, isFavorite);
loading.value = false;
await refreshUserRatings();
}
loading.value = true;
const { data } = await api.users.getSelfRatings();
userRatings.value = data?.ratings || [];
loading.value = false;
ready.value = true;
}
async function setRating(slug: string, rating: number | null, isFavorite: boolean | null) {
loading.value = true;
const userId = $auth.user?.id || "";
await api.users.setRating(userId, slug, rating, isFavorite);
loading.value = false;
await refreshUserRatings();
}
if (!ready.value) {
refreshUserRatings();
return {
userRatings,
refreshUserRatings,
setRating,
ready,
}
}
return {
userRatings,
refreshUserRatings,
setRating,
ready,
}
}