Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-05 13:35:23 +02:00
Code Issues Releases Activity

chore: script setup #3 - recipe components (#5849)

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 20:37:02 +02:00 • committed by GitHub
parent f2b6512eb1
commit f26e74f0f2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
43 changed files with 2761 additions and 3642 deletions
Download patch file Download diff file Expand all files Collapse all files

100
frontend/components/Domain/Recipe/RecipeActionMenu.vue
View file

@ -18,7 +18,7 @@
<RecipeTimelineBadge v-if="loggedIn" class="ml-1" color="info" button-style :slug="recipe.slug" :recipe-name="recipe.name!" /> <RecipeTimelineBadge v-if="loggedIn" class="ml-1" color="info" button-style :slug="recipe.slug" :recipe-name="recipe.name!" />
<div v-if="loggedIn"> <div v-if="loggedIn">
<v-tooltip v-if="canEdit" location="bottom" color="info"> <v-tooltip v-if="canEdit" location="bottom" color="info">
<template #activator="{ props }"> <template #activator="{ props: tooltipProps }">
<v-btn <v-btn
icon icon
variant="flat" variant="flat"
@ -26,7 +26,7 @@
size="small" size="small"
color="info" color="info"
class="ml-1" class="ml-1"
v-bind="props" v-bind="tooltipProps"
@click="$emit('edit', true)" @click="$emit('edit', true)"
> >
<v-icon size="x-large"> <v-icon size="x-large">
@ -86,7 +86,7 @@
</v-toolbar> </v-toolbar>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeContextMenu from "./RecipeContextMenu.vue"; import RecipeContextMenu from "./RecipeContextMenu.vue";
import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue"; import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
import RecipeTimelineBadge from "./RecipeTimelineBadge.vue"; import RecipeTimelineBadge from "./RecipeTimelineBadge.vue";
@ -97,49 +97,30 @@ const DELETE_EVENT = "delete";
const CLOSE_EVENT = "close"; const CLOSE_EVENT = "close";
const JSON_EVENT = "json"; const JSON_EVENT = "json";
export default defineNuxtComponent({ interface Props {
components: { RecipeContextMenu, RecipeFavoriteBadge, RecipeTimelineBadge }, recipe: Recipe;
props: { slug: string;
recipe: { recipeScale?: number;
required: true, open: boolean;
type: Object as () => Recipe, name: string;
}, loggedIn?: boolean;
slug: { recipeId: string;
required: true, canEdit?: boolean;
type: String, }
}, withDefaults(defineProps<Props>(), {
recipeScale: { recipeScale: 1,
type: Number, loggedIn: false,
default: 1, canEdit: false,
}, });
open: {
required: true,
type: Boolean,
},
name: {
required: true,
type: String,
},
loggedIn: {
type: Boolean,
default: false,
},
recipeId: {
required: true,
type: String,
},
canEdit: {
type: Boolean,
default: false,
},
},
emits: ["print", "input", "delete", "close", "edit"],
setup(_, context) {
const deleteDialog = ref(false);
const i18n = useI18n(); const emit = defineEmits(["print", "input", "delete", "close", "edit"]);
const { $globals } = useNuxtApp();
const editorButtons = [ const deleteDialog = ref(false);
const i18n = useI18n();
const { $globals } = useNuxtApp();
const editorButtons = [
{ {
text: i18n.t("general.delete"), text: i18n.t("general.delete"),
icon: $globals.icons.delete, icon: $globals.icons.delete,
@ -164,36 +145,27 @@ export default defineNuxtComponent({
event: SAVE_EVENT, event: SAVE_EVENT,
color: "success", color: "success",
}, },
]; ];
function emitHandler(event: string) { function emitHandler(event: string) {
switch (event) { switch (event) {
case CLOSE_EVENT: case CLOSE_EVENT:
context.emit(CLOSE_EVENT); emit("close");
context.emit("input", false); emit("input", false);
break; break;
case DELETE_EVENT: case DELETE_EVENT:
deleteDialog.value = true; deleteDialog.value = true;
break; break;
default: default:
context.emit(event); emit(event as any);
break; break;
} }
} }
function emitDelete() { function emitDelete() {
context.emit(DELETE_EVENT); emit("delete");
context.emit("input", false); emit("input", false);
} }
return {
deleteDialog,
editorButtons,
emitHandler,
emitDelete,
};
},
});
</script> </script>
<style scoped> <style scoped>

103
frontend/components/Domain/Recipe/RecipeCard.vue
View file

@ -2,11 +2,11 @@
<!-- Wrap v-hover with a div to provide a proper DOM element for the transition --> <!-- Wrap v-hover with a div to provide a proper DOM element for the transition -->
<div> <div>
<v-hover <v-hover
v-slot="{ isHovering, props }" v-slot="{ isHovering, props: hoverProps }"
:open-delay="50" :open-delay="50"
> >
<v-card <v-card
v-bind="props" v-bind="hoverProps"
:class="{ 'on-hover': isHovering }" :class="{ 'on-hover': isHovering }"
:style="{ cursor }" :style="{ cursor }"
:elevation="isHovering ? 12 : 2" :elevation="isHovering ? 12 : 2"
@ -100,7 +100,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue"; import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
import RecipeChips from "./RecipeChips.vue"; import RecipeChips from "./RecipeChips.vue";
import RecipeContextMenu from "./RecipeContextMenu.vue"; import RecipeContextMenu from "./RecipeContextMenu.vue";
@ -108,69 +108,41 @@ import RecipeCardImage from "./RecipeCardImage.vue";
import RecipeRating from "./RecipeRating.vue"; import RecipeRating from "./RecipeRating.vue";
import { useLoggedInState } from "~/composables/use-logged-in-state"; import { useLoggedInState } from "~/composables/use-logged-in-state";
export default defineNuxtComponent({ interface Props {
components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage }, name: string;
props: { slug: string;
name: { description?: string | null;
type: String, rating?: number;
required: true, ratingColor?: string;
}, image?: string;
slug: { tags?: Array<any>;
type: String, recipeId: string;
required: true, imageHeight?: number;
}, }
description: { const props = withDefaults(defineProps<Props>(), {
type: String, description: null,
default: null, rating: 0,
}, ratingColor: "secondary",
rating: { image: "abc123",
type: Number, tags: () => [],
required: false, imageHeight: 200,
default: 0,
},
ratingColor: {
type: String,
default: "secondary",
},
image: {
type: String,
required: false,
default: "abc123",
},
tags: {
type: Array,
default: () => [],
},
recipeId: {
required: true,
type: String,
},
imageHeight: {
type: Number,
default: 200,
},
},
emits: ["click", "delete"],
setup(props) {
const $auth = useMealieAuth();
const { isOwnGroup } = useLoggedInState();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
const showRecipeContent = computed(() => props.recipeId && props.slug);
const recipeRoute = computed<string>(() => {
return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
});
const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
return {
isOwnGroup,
recipeRoute,
showRecipeContent,
cursor,
};
},
}); });
defineEmits<{
click: [];
delete: [slug: string];
}>();
const $auth = useMealieAuth();
const { isOwnGroup } = useLoggedInState();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
const showRecipeContent = computed(() => props.recipeId && props.slug);
const recipeRoute = computed<string>(() => {
return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
});
const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
</script> </script>
<style> <style>
@ -195,6 +167,7 @@ export default defineNuxtComponent({
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 8; -webkit-line-clamp: 8;
line-clamp: 8;
overflow: hidden; overflow: hidden;
} }
</style> </style>

90
frontend/components/Domain/Recipe/RecipeCardImage.vue
View file

@ -28,66 +28,51 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useStaticRoutes, useUserApi } from "~/composables/api"; import { useStaticRoutes } from "~/composables/api";
export default defineNuxtComponent({ interface Props {
props: { tiny?: boolean | null;
tiny: { small?: boolean | null;
type: Boolean, large?: boolean | null;
default: null, iconSize?: number | string;
}, slug?: string | null;
small: { recipeId: string;
type: Boolean, imageVersion?: string | null;
default: null, height?: number | string;
}, }
large: { const props = withDefaults(defineProps<Props>(), {
type: Boolean, tiny: null,
default: null, small: null,
}, large: null,
iconSize: { iconSize: 100,
type: [Number, String], slug: null,
default: 100, imageVersion: null,
}, height: "100%",
slug: { });
type: String,
default: null,
},
recipeId: {
type: String,
required: true,
},
imageVersion: {
type: String,
default: null,
},
height: {
type: [Number, String],
default: "100%",
},
},
emits: ["click"],
setup(props) {
const api = useUserApi();
const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes(); defineEmits<{
click: [];
}>();
const fallBackImage = ref(false); const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes();
const imageSize = computed(() => {
const fallBackImage = ref(false);
const imageSize = computed(() => {
if (props.tiny) return "tiny"; if (props.tiny) return "tiny";
if (props.small) return "small"; if (props.small) return "small";
if (props.large) return "large"; if (props.large) return "large";
return "large"; return "large";
}); });
watch( watch(
() => props.recipeId, () => props.recipeId,
() => { () => {
fallBackImage.value = false; fallBackImage.value = false;
}, },
); );
function getImage(recipeId: string) { function getImage(recipeId: string) {
switch (imageSize.value) { switch (imageSize.value) {
case "tiny": case "tiny":
return recipeTinyImage(recipeId, props.imageVersion); return recipeTinyImage(recipeId, props.imageVersion);
@ -96,16 +81,7 @@ export default defineNuxtComponent({
case "large": case "large":
return recipeImage(recipeId, props.imageVersion); return recipeImage(recipeId, props.imageVersion);
} }
} }
return {
api,
fallBackImage,
imageSize,
getImage,
};
},
});
</script> </script>
<style scoped> <style scoped>

114
frontend/components/Domain/Recipe/RecipeCardMobile.vue
View file

@ -126,7 +126,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue"; import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
import RecipeContextMenu from "./RecipeContextMenu.vue"; import RecipeContextMenu from "./RecipeContextMenu.vue";
import RecipeCardImage from "./RecipeCardImage.vue"; import RecipeCardImage from "./RecipeCardImage.vue";
@ -134,82 +134,44 @@ import RecipeRating from "./RecipeRating.vue";
import RecipeChips from "./RecipeChips.vue"; import RecipeChips from "./RecipeChips.vue";
import { useLoggedInState } from "~/composables/use-logged-in-state"; import { useLoggedInState } from "~/composables/use-logged-in-state";
export default defineNuxtComponent({ interface Props {
components: { name: string;
RecipeFavoriteBadge, slug: string;
RecipeContextMenu, description: string;
RecipeRating, rating?: number;
RecipeCardImage, image?: string;
RecipeChips, tags?: Array<any>;
}, recipeId: string;
props: { vertical?: boolean;
name: { isFlat?: boolean;
type: String, height?: number;
required: true, disableHighlight?: boolean;
}, }
slug: { const props = withDefaults(defineProps<Props>(), {
type: String, rating: 0,
required: true, image: "abc123",
}, tags: () => [],
description: { vertical: false,
type: String, isFlat: false,
required: true, height: 150,
}, disableHighlight: false,
rating: {
type: Number,
default: 0,
},
image: {
type: String,
required: false,
default: "abc123",
},
tags: {
type: Array,
default: () => [],
},
recipeId: {
type: String,
required: true,
},
vertical: {
type: Boolean,
default: false,
},
isFlat: {
type: Boolean,
default: false,
},
height: {
type: [Number],
default: 150,
},
disableHighlight: {
type: Boolean,
default: false,
},
},
emits: ["selected", "delete"],
setup(props) {
const $auth = useMealieAuth();
const { isOwnGroup } = useLoggedInState();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
const showRecipeContent = computed(() => props.recipeId && props.slug);
const recipeRoute = computed<string>(() => {
return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
});
const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
return {
isOwnGroup,
recipeRoute,
showRecipeContent,
cursor,
};
},
}); });
defineEmits<{
selected: [];
delete: [slug: string];
}>();
const $auth = useMealieAuth();
const { isOwnGroup } = useLoggedInState();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
const showRecipeContent = computed(() => props.recipeId && props.slug);
const recipeRoute = computed<string>(() => {
return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
});
const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
</script> </script>
<style scoped> <style scoped>

180
frontend/components/Domain/Recipe/RecipeCardSection.vue
View file

@ -36,11 +36,11 @@
offset-y offset-y
start start
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-btn <v-btn
variant="text" variant="text"
:icon="$vuetify.display.xs" :icon="$vuetify.display.xs"
v-bind="props" v-bind="activatorProps"
:loading="sortLoading" :loading="sortLoading"
> >
<v-icon :start="!$vuetify.display.xs"> <v-icon :start="!$vuetify.display.xs">
@ -162,7 +162,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useThrottleFn } from "@vueuse/core"; import { useThrottleFn } from "@vueuse/core";
import RecipeCard from "./RecipeCard.vue"; import RecipeCard from "./RecipeCard.vue";
import RecipeCardMobile from "./RecipeCardMobile.vue"; import RecipeCardMobile from "./RecipeCardMobile.vue";
@ -175,83 +175,69 @@ import type { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
const REPLACE_RECIPES_EVENT = "replaceRecipes"; const REPLACE_RECIPES_EVENT = "replaceRecipes";
const APPEND_RECIPES_EVENT = "appendRecipes"; const APPEND_RECIPES_EVENT = "appendRecipes";
export default defineNuxtComponent({ interface Props {
components: { disableToolbar?: boolean;
RecipeCard, disableSort?: boolean;
RecipeCardMobile, icon?: string | null;
}, title?: string | null;
props: { singleColumn?: boolean;
disableToolbar: { recipes?: Recipe[];
type: Boolean, query?: RecipeSearchQuery | null;
default: false, }
}, const props = withDefaults(defineProps<Props>(), {
disableSort: { disableToolbar: false,
type: Boolean, disableSort: false,
default: false, icon: null,
}, title: null,
icon: { singleColumn: false,
type: String, recipes: () => [],
default: null, query: null,
}, });
title: {
type: String,
default: null,
},
singleColumn: {
type: Boolean,
default: false,
},
recipes: {
type: Array as () => Recipe[],
default: () => [],
},
query: {
type: Object as () => RecipeSearchQuery,
default: null,
},
},
setup(props, context) {
const { $vuetify } = useNuxtApp();
const preferences = useUserSortPreferences();
const EVENTS = { const emit = defineEmits<{
replaceRecipes: [recipes: Recipe[]];
appendRecipes: [recipes: Recipe[]];
}>();
const { $vuetify } = useNuxtApp();
const preferences = useUserSortPreferences();
const EVENTS = {
az: "az", az: "az",
rating: "rating", rating: "rating",
created: "created", created: "created",
updated: "updated", updated: "updated",
lastMade: "lastMade", lastMade: "lastMade",
shuffle: "shuffle", shuffle: "shuffle",
}; };
const $auth = useMealieAuth(); const $auth = useMealieAuth();
const { $globals } = useNuxtApp(); const { $globals } = useNuxtApp();
const { isOwnGroup } = useLoggedInState(); const { isOwnGroup } = useLoggedInState();
const useMobileCards = computed(() => { const useMobileCards = computed(() => {
return $vuetify.display.smAndDown.value || preferences.value.useMobileCards; return $vuetify.display.smAndDown.value || preferences.value.useMobileCards;
}); });
const displayTitleIcon = computed(() => { const displayTitleIcon = computed(() => {
return props.icon || $globals.icons.tags; return props.icon || $globals.icons.tags;
}); });
const state = reactive({ const sortLoading = ref(false);
sortLoading: false,
});
const route = useRoute(); const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || ""); const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
const page = ref(1); const page = ref(1);
const perPage = 32; const perPage = 32;
const hasMore = ref(true); const hasMore = ref(true);
const ready = ref(false); const ready = ref(false);
const loading = ref(false); const loading = ref(false);
const { fetchMore, getRandom } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value); const { fetchMore, getRandom } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
const router = useRouter(); const router = useRouter();
const queryFilter = computed(() => { const queryFilter = computed(() => {
return props.query.queryFilter || null; return props.query?.queryFilter || null;
// TODO: allow user to filter out null values when ordering by a value that may be null (such as lastMade) // TODO: allow user to filter out null values when ordering by a value that may be null (such as lastMade)
@ -265,9 +251,9 @@ export default defineNuxtComponent({
// } else { // } else {
// return orderByFilter; // return orderByFilter;
// } // }
}); });
async function fetchRecipes(pageCount = 1) { async function fetchRecipes(pageCount = 1) {
const orderDir = props.query?.orderDirection || preferences.value.orderDirection; const orderDir = props.query?.orderDirection || preferences.value.orderDirection;
const orderByNullPosition = props.query?.orderByNullPosition || orderDir === "asc" ? "first" : "last"; const orderByNullPosition = props.query?.orderByNullPosition || orderDir === "asc" ? "first" : "last";
return await fetchMore( return await fetchMore(
@ -280,17 +266,17 @@ export default defineNuxtComponent({
// we use a computed queryFilter to filter out recipes that have a null value for the property we're sorting by // we use a computed queryFilter to filter out recipes that have a null value for the property we're sorting by
queryFilter.value, queryFilter.value,
); );
} }
onMounted(async () => { onMounted(async () => {
await initRecipes(); await initRecipes();
ready.value = true; ready.value = true;
}); });
let lastQuery: string | undefined = JSON.stringify(props.query); let lastQuery: string | undefined = JSON.stringify(props.query);
watch( watch(
() => props.query, () => props.query,
async (newValue: RecipeSearchQuery | undefined) => { async (newValue: RecipeSearchQuery | undefined | null) => {
const newValueString = JSON.stringify(newValue); const newValueString = JSON.stringify(newValue);
if (lastQuery !== newValueString) { if (lastQuery !== newValueString) {
lastQuery = newValueString; lastQuery = newValueString;
@ -299,9 +285,9 @@ export default defineNuxtComponent({
ready.value = true; ready.value = true;
} }
}, },
); );
async function initRecipes() { async function initRecipes() {
page.value = 1; page.value = 1;
hasMore.value = true; hasMore.value = true;
@ -315,10 +301,10 @@ export default defineNuxtComponent({
// since we doubled the first call, we also need to advance the page // since we doubled the first call, we also need to advance the page
page.value = page.value + 1; page.value = page.value + 1;
context.emit(REPLACE_RECIPES_EVENT, newRecipes); emit(REPLACE_RECIPES_EVENT, newRecipes);
} }
const infiniteScroll = useThrottleFn(async () => { const infiniteScroll = useThrottleFn(async () => {
if (!hasMore.value || loading.value) { if (!hasMore.value || loading.value) {
return; return;
} }
@ -331,14 +317,14 @@ export default defineNuxtComponent({
hasMore.value = false; hasMore.value = false;
} }
if (newRecipes.length) { if (newRecipes.length) {
context.emit(APPEND_RECIPES_EVENT, newRecipes); emit(APPEND_RECIPES_EVENT, newRecipes);
} }
loading.value = false; loading.value = false;
}, 500); }, 500);
async function sortRecipes(sortType: string) { async function sortRecipes(sortType: string) {
if (state.sortLoading || loading.value) { if (sortLoading.value || loading.value) {
return; return;
} }
@ -403,45 +389,29 @@ export default defineNuxtComponent({
page.value = 1; page.value = 1;
hasMore.value = true; hasMore.value = true;
state.sortLoading = true; sortLoading.value = true;
loading.value = true; loading.value = true;
// fetch new recipes // fetch new recipes
const newRecipes = await fetchRecipes(); const newRecipes = await fetchRecipes();
context.emit(REPLACE_RECIPES_EVENT, newRecipes); emit(REPLACE_RECIPES_EVENT, newRecipes);
state.sortLoading = false; sortLoading.value = false;
loading.value = false; loading.value = false;
} }
async function navigateRandom() { async function navigateRandom() {
const recipe = await getRandom(props.query, queryFilter.value); const recipe = await getRandom(props.query, queryFilter.value);
if (!recipe?.slug) { if (!recipe?.slug) {
return; return;
} }
router.push(`/g/${groupSlug.value}/r/${recipe.slug}`); router.push(`/g/${groupSlug.value}/r/${recipe.slug}`);
} }
function toggleMobileCards() { function toggleMobileCards() {
preferences.value.useMobileCards = !preferences.value.useMobileCards; preferences.value.useMobileCards = !preferences.value.useMobileCards;
} }
return {
...toRefs(state),
displayTitleIcon,
EVENTS,
infiniteScroll,
ready,
loading,
navigateRandom,
preferences,
sortRecipes,
toggleMobileCards,
useMobileCards,
};
},
});
</script> </script>
<style> <style>

72
frontend/components/Domain/Recipe/RecipeChips.vue
View file

@ -23,66 +23,38 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import type { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe"; import type { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
export type UrlPrefixParam = "tags" | "categories" | "tools"; export type UrlPrefixParam = "tags" | "categories" | "tools";
export default defineNuxtComponent({ interface Props {
props: { truncate?: boolean;
truncate: { items?: RecipeCategory[] | RecipeTag[] | RecipeTool[];
type: Boolean, title?: boolean;
default: false, urlPrefix?: UrlPrefixParam;
}, limit?: number;
items: { small?: boolean;
type: Array as () => RecipeCategory[] | RecipeTag[] | RecipeTool[], maxWidth?: string | null;
default: () => [], }
}, const props = withDefaults(defineProps<Props>(), {
title: { truncate: false,
type: Boolean, items: () => [],
default: false, title: false,
}, urlPrefix: "categories",
urlPrefix: { limit: 999,
type: String as () => UrlPrefixParam, small: false,
default: "categories", maxWidth: null,
}, });
limit: {
type: Number,
default: 999,
},
small: {
type: Boolean,
default: false,
},
maxWidth: {
type: String,
default: null,
},
},
emits: ["item-selected"],
setup(props) {
const $auth = useMealieAuth();
const route = useRoute(); defineEmits(["item-selected"]);
const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || ""); function truncateText(text: string, length = 20, clamp = "...") {
const baseRecipeRoute = computed<string>(() => {
return `/g/${groupSlug.value}`;
});
function truncateText(text: string, length = 20, clamp = "...") {
if (!props.truncate) return text; if (!props.truncate) return text;
const node = document.createElement("div"); const node = document.createElement("div");
node.innerHTML = text; node.innerHTML = text;
const content = node.textContent || ""; const content = node.textContent || "";
return content.length > length ? content.slice(0, length) + clamp : content; return content.length > length ? content.slice(0, length) + clamp : content;
} }
return {
baseRecipeRoute,
truncateText,
};
},
});
</script> </script>
<style></style> <style></style>

293
frontend/components/Domain/Recipe/RecipeContextMenu.vue
View file

@ -55,12 +55,12 @@
max-width="290px" max-width="290px"
min-width="auto" min-width="auto"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-text-field <v-text-field
v-model="newMealdateString" v-model="newMealdateString"
:label="$t('general.date')" :label="$t('general.date')"
:prepend-icon="$globals.icons.calendar" :prepend-icon="$globals.icons.calendar"
v-bind="props" v-bind="activatorProps"
readonly readonly
/> />
</template> </template>
@ -100,7 +100,7 @@
:open-on-hover="$vuetify.display.mdAndUp" :open-on-hover="$vuetify.display.mdAndUp"
content-class="d-print-none" content-class="d-print-none"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-btn <v-btn
icon icon
:variant="fab ? 'flat' : undefined" :variant="fab ? 'flat' : undefined"
@ -108,7 +108,7 @@
:size="fab ? 'small' : undefined" :size="fab ? 'small' : undefined"
:color="fab ? 'info' : 'secondary'" :color="fab ? 'info' : 'secondary'"
:fab="fab" :fab="fab"
v-bind="props" v-bind="activatorProps"
@click.prevent @click.prevent
> >
<v-icon <v-icon
@ -150,7 +150,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeDialogAddToShoppingList from "./RecipeDialogAddToShoppingList.vue"; import RecipeDialogAddToShoppingList from "./RecipeDialogAddToShoppingList.vue";
import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue"; import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
import RecipeDialogShare from "./RecipeDialogShare.vue"; import RecipeDialogShare from "./RecipeDialogShare.vue";
@ -186,16 +186,22 @@ export interface ContextMenuItem {
isPublic: boolean; isPublic: boolean;
} }
export default defineNuxtComponent({ interface Props {
components: { useItems?: ContextMenuIncludes;
RecipeDialogAddToShoppingList, appendItems?: ContextMenuItem[];
RecipeDialogPrintPreferences, leadingItems?: ContextMenuItem[];
RecipeDialogShare, menuTop?: boolean;
}, fab?: boolean;
props: { color?: string;
useItems: { slug: string;
type: Object as () => ContextMenuIncludes, menuIcon?: string | null;
default: () => ({ name: string;
recipe?: Recipe;
recipeId: string;
recipeScale?: number;
}
const props = withDefaults(defineProps<Props>(), {
useItems: () => ({
delete: true, delete: true,
edit: true, edit: true,
download: true, download: true,
@ -207,98 +213,61 @@ export default defineNuxtComponent({
share: true, share: true,
recipeActions: true, recipeActions: true,
}), }),
}, appendItems: () => [],
// Append items are added at the end of the useItems list leadingItems: () => [],
appendItems: { menuTop: true,
type: Array as () => ContextMenuItem[], fab: false,
default: () => [], color: "primary",
}, menuIcon: null,
// Append items are added at the beginning of the useItems list recipe: undefined,
leadingItems: { recipeScale: 1,
type: Array as () => ContextMenuItem[], });
default: () => [],
},
menuTop: {
type: Boolean,
default: true,
},
fab: {
type: Boolean,
default: false,
},
color: {
type: String,
default: "primary",
},
slug: {
type: String,
required: true,
},
menuIcon: {
type: String,
default: null,
},
name: {
required: true,
type: String,
},
recipe: {
type: Object as () => Recipe,
default: undefined,
},
recipeId: {
required: true,
type: String,
},
recipeScale: {
type: Number,
default: 1,
},
},
emits: ["delete"],
setup(props, context) {
const api = useUserApi();
const state = reactive({ const emit = defineEmits<{
printPreferencesDialog: false, [key: string]: any;
shareDialog: false, delete: [slug: string];
recipeDeleteDialog: false, }>();
mealplannerDialog: false,
shoppingListDialog: false,
recipeDuplicateDialog: false,
recipeName: props.name,
loading: false,
menuItems: [] as ContextMenuItem[],
newMealdate: new Date(),
newMealType: "dinner" as PlanEntryType,
pickerMenu: false,
});
const newMealdateString = computed(() => { const api = useUserApi();
const printPreferencesDialog = ref(false);
const shareDialog = ref(false);
const recipeDeleteDialog = ref(false);
const mealplannerDialog = ref(false);
const shoppingListDialog = ref(false);
const recipeDuplicateDialog = ref(false);
const recipeName = ref(props.name);
const loading = ref(false);
const menuItems = ref<ContextMenuItem[]>([]);
const newMealdate = ref(new Date());
const newMealType = ref<PlanEntryType>("dinner");
const pickerMenu = ref(false);
const newMealdateString = computed(() => {
// Format the date to YYYY-MM-DD in the same timezone as newMealdate // Format the date to YYYY-MM-DD in the same timezone as newMealdate
const year = state.newMealdate.getFullYear(); const year = newMealdate.value.getFullYear();
const month = String(state.newMealdate.getMonth() + 1).padStart(2, "0"); const month = String(newMealdate.value.getMonth() + 1).padStart(2, "0");
const day = String(state.newMealdate.getDate()).padStart(2, "0"); const day = String(newMealdate.value.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
}); });
const i18n = useI18n(); const i18n = useI18n();
const $auth = useMealieAuth(); const $auth = useMealieAuth();
const { $globals } = useNuxtApp(); const { $globals } = useNuxtApp();
const { household } = useHouseholdSelf(); const { household } = useHouseholdSelf();
const { isOwnGroup } = useLoggedInState(); const { isOwnGroup } = useLoggedInState();
const route = useRoute(); const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || ""); const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
const firstDayOfWeek = computed(() => { const firstDayOfWeek = computed(() => {
return household.value?.preferences?.firstDayOfWeek || 0; return household.value?.preferences?.firstDayOfWeek || 0;
}); });
// =========================================================================== // ===========================================================================
// Context Menu Setup // Context Menu Setup
const defaultItems: { [key: string]: ContextMenuItem } = { const defaultItems: { [key: string]: ContextMenuItem } = {
edit: { edit: {
title: i18n.t("general.edit"), title: i18n.t("general.edit"),
icon: $globals.icons.edit, icon: $globals.icons.edit,
@ -362,35 +331,35 @@ export default defineNuxtComponent({
event: "share", event: "share",
isPublic: false, isPublic: false,
}, },
}; };
// Add leading and Appending Items // Add leading and Appending Items
state.menuItems = [...state.menuItems, ...props.leadingItems, ...props.appendItems]; menuItems.value = [...menuItems.value, ...props.leadingItems, ...props.appendItems];
const icon = props.menuIcon || $globals.icons.dotsVertical; const icon = props.menuIcon || $globals.icons.dotsVertical;
// =========================================================================== // ===========================================================================
// Context Menu Event Handler // Context Menu Event Handler
const shoppingLists = ref<ShoppingListSummary[]>(); const shoppingLists = ref<ShoppingListSummary[]>();
const recipeRef = ref<Recipe | undefined>(props.recipe); const recipeRef = ref<Recipe | undefined>(props.recipe);
const recipeRefWithScale = computed(() => const recipeRefWithScale = computed(() =>
recipeRef.value ? { scale: props.recipeScale, ...recipeRef.value } : undefined, recipeRef.value ? { scale: props.recipeScale, ...recipeRef.value } : undefined,
); );
const isAdminAndNotOwner = computed(() => { const isAdminAndNotOwner = computed(() => {
return ( return (
$auth.user.value?.admin $auth.user.value?.admin
&& $auth.user.value?.id !== recipeRef.value?.userId && $auth.user.value?.id !== recipeRef.value?.userId
); );
}); });
const canDelete = computed(() => { const canDelete = computed(() => {
const user = $auth.user.value; const user = $auth.user.value;
const recipe = recipeRef.value; const recipe = recipeRef.value;
return user && recipe && (user.admin || user.id === recipe.userId); return user && recipe && (user.admin || user.id === recipe.userId);
}); });
// Get Default Menu Items Specified in Props // Get Default Menu Items Specified in Props
for (const [key, value] of Object.entries(props.useItems)) { for (const [key, value] of Object.entries(props.useItems)) {
if (!value) continue; if (!value) continue;
// Skip delete if not allowed // Skip delete if not allowed
@ -398,28 +367,28 @@ export default defineNuxtComponent({
const item = defaultItems[key]; const item = defaultItems[key];
if (item && (item.isPublic || isOwnGroup.value)) { if (item && (item.isPublic || isOwnGroup.value)) {
state.menuItems.push(item); menuItems.value.push(item);
}
} }
}
async function getShoppingLists() { async function getShoppingLists() {
const { data } = await api.shopping.lists.getAll(1, -1, { orderBy: "name", orderDirection: "asc" }); const { data } = await api.shopping.lists.getAll(1, -1, { orderBy: "name", orderDirection: "asc" });
if (data) { if (data) {
shoppingLists.value = data.items ?? []; shoppingLists.value = data.items ?? [];
} }
} }
async function refreshRecipe() { async function refreshRecipe() {
const { data } = await api.recipes.getOne(props.slug); const { data } = await api.recipes.getOne(props.slug);
if (data) { if (data) {
recipeRef.value = data; recipeRef.value = data;
} }
} }
const router = useRouter(); const router = useRouter();
const groupRecipeActionsStore = useGroupRecipeActions(); const groupRecipeActionsStore = useGroupRecipeActions();
async function executeRecipeAction(action: GroupRecipeActionOut) { async function executeRecipeAction(action: GroupRecipeActionOut) {
if (!props.recipe) return; if (!props.recipe) return;
const response = await groupRecipeActionsStore.execute(action, props.recipe, props.recipeScale); const response = await groupRecipeActionsStore.execute(action, props.recipe, props.recipeScale);
@ -431,30 +400,30 @@ export default defineNuxtComponent({
alert.error(i18n.t("events.something-went-wrong")); alert.error(i18n.t("events.something-went-wrong"));
} }
} }
} }
async function deleteRecipe() { async function deleteRecipe() {
const { data } = await api.recipes.deleteOne(props.slug); const { data } = await api.recipes.deleteOne(props.slug);
if (data?.slug) { if (data?.slug) {
router.push(`/g/${groupSlug.value}`); router.push(`/g/${groupSlug.value}`);
} }
context.emit("delete", props.slug); emit("delete", props.slug);
} }
const download = useDownloader(); const download = useDownloader();
async function handleDownloadEvent() { async function handleDownloadEvent() {
const { data } = await api.recipes.getZipToken(props.slug); const { data } = await api.recipes.getZipToken(props.slug);
if (data) { if (data) {
download(api.recipes.getZipRedirectUrl(props.slug, data.token), `${props.slug}.zip`); download(api.recipes.getZipRedirectUrl(props.slug, data.token), `${props.slug}.zip`);
} }
} }
async function addRecipeToPlan() { async function addRecipeToPlan() {
const { response } = await api.mealplans.createOne({ const { response } = await api.mealplans.createOne({
date: newMealdateString.value, date: newMealdateString.value,
entryType: state.newMealType, entryType: newMealType.value,
title: "", title: "",
text: "", text: "",
recipeId: props.recipeId, recipeId: props.recipeId,
@ -466,34 +435,34 @@ export default defineNuxtComponent({
else { else {
alert.error(i18n.t("recipe.failed-to-add-recipe-to-mealplan") as string); alert.error(i18n.t("recipe.failed-to-add-recipe-to-mealplan") as string);
} }
} }
async function duplicateRecipe() { async function duplicateRecipe() {
const { data } = await api.recipes.duplicateOne(props.slug, state.recipeName); const { data } = await api.recipes.duplicateOne(props.slug, recipeName.value);
if (data && data.slug) { if (data && data.slug) {
router.push(`/g/${groupSlug.value}/r/${data.slug}`); router.push(`/g/${groupSlug.value}/r/${data.slug}`);
} }
} }
// Note: Print is handled as an event in the parent component // Note: Print is handled as an event in the parent component
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
const eventHandlers: { [key: string]: () => void | Promise<any> } = { const eventHandlers: { [key: string]: () => void | Promise<any> } = {
delete: () => { delete: () => {
state.recipeDeleteDialog = true; recipeDeleteDialog.value = true;
}, },
edit: () => router.push(`/g/${groupSlug.value}/r/${props.slug}` + "?edit=true"), edit: () => router.push(`/g/${groupSlug.value}/r/${props.slug}` + "?edit=true"),
download: handleDownloadEvent, download: handleDownloadEvent,
duplicate: () => { duplicate: () => {
state.recipeDuplicateDialog = true; recipeDuplicateDialog.value = true;
}, },
mealplanner: () => { mealplanner: () => {
state.mealplannerDialog = true; mealplannerDialog.value = true;
}, },
printPreferences: async () => { printPreferences: async () => {
if (!recipeRef.value) { if (!recipeRef.value) {
await refreshRecipe(); await refreshRecipe();
} }
state.printPreferencesDialog = true; printPreferencesDialog.value = true;
}, },
shoppingList: () => { shoppingList: () => {
const promises: Promise<void>[] = [getShoppingLists()]; const promises: Promise<void>[] = [getShoppingLists()];
@ -502,47 +471,27 @@ export default defineNuxtComponent({
} }
Promise.allSettled(promises).then(() => { Promise.allSettled(promises).then(() => {
state.shoppingListDialog = true; shoppingListDialog.value = true;
}); });
}, },
share: () => { share: () => {
state.shareDialog = true; shareDialog.value = true;
}, },
}; };
function contextMenuEventHandler(eventKey: string) { function contextMenuEventHandler(eventKey: string) {
const handler = eventHandlers[eventKey]; const handler = eventHandlers[eventKey];
if (handler && typeof handler === "function") { if (handler && typeof handler === "function") {
handler(); handler();
state.loading = false; loading.value = false;
return; return;
} }
context.emit(eventKey); emit(eventKey);
state.loading = false; loading.value = false;
} }
const planTypeOptions = usePlanTypeOptions(); const planTypeOptions = usePlanTypeOptions();
const recipeActions = groupRecipeActionsStore.recipeActions;
return {
...toRefs(state),
newMealdateString,
recipeRef,
recipeRefWithScale,
executeRecipeAction,
recipeActions: groupRecipeActionsStore.recipeActions,
shoppingLists,
duplicateRecipe,
contextMenuEventHandler,
deleteRecipe,
addRecipeToPlan,
icon,
planTypeOptions,
firstDayOfWeek,
isAdminAndNotOwner,
canDelete,
};
},
});
</script> </script>

76
frontend/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue
View file

@ -33,7 +33,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { whenever } from "@vueuse/core"; import { whenever } from "@vueuse/core";
import { validators } from "~/composables/use-validators"; import { validators } from "~/composables/use-validators";
import type { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe"; import type { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
@ -42,56 +42,47 @@ export interface GenericAlias {
name: string; name: string;
} }
export default defineNuxtComponent({ interface Props {
props: { data: IngredientFood | IngredientUnit;
modelValue: { }
type: Boolean,
default: false,
},
data: {
type: Object as () => IngredientFood | IngredientUnit,
required: true,
},
},
emits: ["submit", "update:modelValue", "cancel"],
setup(props, context) {
// V-Model Support
const dialog = computed({
get: () => {
return props.modelValue;
},
set: (val) => {
context.emit("update:modelValue", val);
},
});
function createAlias() { const props = defineProps<Props>();
const emit = defineEmits<{
submit: [aliases: GenericAlias[]];
cancel: [];
}>();
// V-Model Support
const dialog = defineModel<boolean>({ default: false });
function createAlias() {
aliases.value.push({ aliases.value.push({
name: "", name: "",
}); });
} }
function deleteAlias(index: number) { function deleteAlias(index: number) {
aliases.value.splice(index, 1); aliases.value.splice(index, 1);
} }
const aliases = ref<GenericAlias[]>(props.data.aliases || []); const aliases = ref<GenericAlias[]>(props.data.aliases || []);
function initAliases() { function initAliases() {
aliases.value = [...props.data.aliases || []]; aliases.value = [...props.data.aliases || []];
if (!aliases.value.length) { if (!aliases.value.length) {
createAlias(); createAlias();
} }
} }
initAliases(); initAliases();
whenever( whenever(
() => props.modelValue, () => dialog.value,
() => { () => {
initAliases(); initAliases();
}, },
); );
function saveAliases() { function saveAliases() {
const seenAliasNames: string[] = []; const seenAliasNames: string[] = [];
const keepAliases: GenericAlias[] = []; const keepAliases: GenericAlias[] = [];
aliases.value.forEach((alias) => { aliases.value.forEach((alias) => {
@ -111,17 +102,6 @@ export default defineNuxtComponent({
}); });
aliases.value = keepAliases; aliases.value = keepAliases;
context.emit("submit", keepAliases); emit("submit", keepAliases);
} }
return {
aliases,
createAlias,
dialog,
deleteAlias,
saveAliases,
validators,
};
},
});
</script> </script>

114
frontend/components/Domain/Recipe/RecipeDataTable.vue
View file

@ -62,7 +62,7 @@
</v-data-table> </v-data-table>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import UserAvatar from "../User/UserAvatar.vue"; import UserAvatar from "../User/UserAvatar.vue";
import RecipeChip from "./RecipeChips.vue"; import RecipeChip from "./RecipeChips.vue";
import type { Recipe, RecipeCategory, RecipeTool } from "~/lib/api/types/recipe"; import type { Recipe, RecipeCategory, RecipeTool } from "~/lib/api/types/recipe";
@ -70,8 +70,6 @@ import { useUserApi } from "~/composables/api";
import type { UserSummary } from "~/lib/api/types/user"; import type { UserSummary } from "~/lib/api/types/user";
import type { RecipeTag } from "~/lib/api/types/household"; import type { RecipeTag } from "~/lib/api/types/household";
const INPUT_EVENT = "update:modelValue";
interface ShowHeaders { interface ShowHeaders {
id: boolean; id: boolean;
owner: boolean; owner: boolean;
@ -84,56 +82,43 @@ interface ShowHeaders {
dateAdded: boolean; dateAdded: boolean;
} }
export default defineNuxtComponent({ interface Props {
components: { RecipeChip, UserAvatar }, loading?: boolean;
props: { recipes?: Recipe[];
modelValue: { showHeaders?: ShowHeaders;
type: Array as PropType<Recipe[]>, }
required: false, const props = withDefaults(defineProps<Props>(), {
default: () => [], loading: false,
}, recipes: () => [],
loading: { showHeaders: () => ({
type: Boolean,
required: false,
default: false,
},
recipes: {
type: Array as () => Recipe[],
default: () => [],
},
showHeaders: {
type: Object as () => ShowHeaders,
required: false,
default: () => {
return {
id: true, id: true,
owner: false, owner: false,
tags: true, tags: true,
categories: true, categories: true,
tools: true,
recipeServings: true, recipeServings: true,
recipeYieldQuantity: true, recipeYieldQuantity: true,
recipeYield: true, recipeYield: true,
dateAdded: true, dateAdded: true,
}; }),
}, });
},
},
emits: ["click", "update:modelValue"],
setup(props, context) {
const i18n = useI18n();
const $auth = useMealieAuth();
const groupSlug = $auth.user.value?.groupSlug;
const router = useRouter();
const selected = computed({
get: () => props.modelValue,
set: value => context.emit(INPUT_EVENT, value),
});
// Initialize sort state with default sorting by dateAdded descending defineEmits<{
const sortBy = ref([{ key: "dateAdded", order: "desc" }]); click: [];
}>();
const headers = computed(() => { const selected = defineModel<Recipe[]>({ default: () => [] });
const hdrs: Array<{ title: string; value: string; align?: string; sortable?: boolean }> = [];
const i18n = useI18n();
const $auth = useMealieAuth();
const groupSlug = $auth.user.value?.groupSlug;
const router = useRouter();
// Initialize sort state with default sorting by dateAdded descending
const sortBy = ref([{ key: "dateAdded", order: "desc" as const }]);
const headers = computed(() => {
const hdrs: Array<{ title: string; value: string; align?: "center" | "start" | "end"; sortable?: boolean }> = [];
if (props.showHeaders.id) { if (props.showHeaders.id) {
hdrs.push({ title: i18n.t("general.id"), value: "id" }); hdrs.push({ title: i18n.t("general.id"), value: "id" });
@ -166,58 +151,45 @@ export default defineNuxtComponent({
} }
return hdrs; return hdrs;
}); });
function formatDate(date: string) { function formatDate(date: string) {
try { try {
return i18n.d(Date.parse(date), "medium"); return i18n.d(Date.parse(date), "medium");
} }
catch { catch {
return ""; return "";
} }
} }
// ============ // ============
// Group Members // Group Members
const api = useUserApi(); const api = useUserApi();
const members = ref<UserSummary[]>([]); const members = ref<UserSummary[]>([]);
async function refreshMembers() { async function refreshMembers() {
const { data } = await api.groups.fetchMembers(); const { data } = await api.groups.fetchMembers();
if (data) { if (data) {
members.value = data.items; members.value = data.items;
} }
} }
function filterItems(item: RecipeTag | RecipeCategory | RecipeTool, itemType: string) { function filterItems(item: RecipeTag | RecipeCategory | RecipeTool, itemType: string) {
if (!groupSlug || !item.id) { if (!groupSlug || !item.id) {
return; return;
} }
router.push(`/g/${groupSlug}?${itemType}=${item.id}`); router.push(`/g/${groupSlug}?${itemType}=${item.id}`);
} }
onMounted(() => { onMounted(() => {
refreshMembers(); refreshMembers();
}); });
function getMember(id: string) { function getMember(id: string) {
if (members.value[0]) { if (members.value[0]) {
return members.value.find(m => m.id === id)?.fullName; return members.value.find(m => m.id === id)?.fullName;
} }
return i18n.t("general.none"); return i18n.t("general.none");
} }
return {
selected,
sortBy,
groupSlug,
headers,
formatDate,
members,
getMember,
filterItems,
};
},
});
</script> </script>

131
frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue
View file

@ -51,7 +51,7 @@
<BaseDialog <BaseDialog
v-if="shoppingListIngredientDialog" v-if="shoppingListIngredientDialog"
v-model="dialog" v-model="dialog"
:title="selectedShoppingList ? selectedShoppingList.name : $t('recipe.add-to-list')" :title="selectedShoppingList?.name || $t('recipe.add-to-list')"
:icon="$globals.icons.cartCheck" :icon="$globals.icons.cartCheck"
width="70%" width="70%"
:submit-text="$t('recipe.add-to-list')" :submit-text="$t('recipe.add-to-list')"
@ -137,7 +137,7 @@
color="secondary" color="secondary"
density="compact" density="compact"
/> />
<div :key="ingredientData.ingredient.quantity"> <div :key="`${ingredientData.ingredient.quantity || 'no-qty'}-${i}`">
<RecipeIngredientListItem <RecipeIngredientListItem
:ingredient="ingredientData.ingredient" :ingredient="ingredientData.ingredient"
:disable-amount="ingredientData.disableAmount" :disable-amount="ingredientData.disableAmount"
@ -172,7 +172,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { toRefs } from "@vueuse/core"; import { toRefs } from "@vueuse/core";
import RecipeIngredientListItem from "./RecipeIngredientListItem.vue"; import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
@ -203,61 +203,43 @@ export interface ShoppingListRecipeIngredientSection {
ingredientSections: ShoppingListIngredientSection[]; ingredientSections: ShoppingListIngredientSection[];
} }
export default defineNuxtComponent({ interface Props {
components: { recipes?: RecipeWithScale[];
RecipeIngredientListItem, shoppingLists?: ShoppingListSummary[];
}, }
props: { const props = withDefaults(defineProps<Props>(), {
modelValue: { recipes: undefined,
type: Boolean, shoppingLists: () => [],
default: false, });
},
recipes: {
type: Array as () => RecipeWithScale[],
default: undefined,
},
shoppingLists: {
type: Array as () => ShoppingListSummary[],
default: () => [],
},
},
emits: ["update:modelValue"],
setup(props, context) {
const i18n = useI18n();
const $auth = useMealieAuth();
const api = useUserApi();
const preferences = useShoppingListPreferences();
const ready = ref(false);
// v-model support const dialog = defineModel<boolean>({ default: false });
const dialog = computed({
get: () => {
return props.modelValue;
},
set: (val) => {
context.emit("update:modelValue", val);
initState();
},
});
const state = reactive({ const i18n = useI18n();
const $auth = useMealieAuth();
const api = useUserApi();
const preferences = useShoppingListPreferences();
const ready = ref(false);
const state = reactive({
shoppingListDialog: true, shoppingListDialog: true,
shoppingListIngredientDialog: false, shoppingListIngredientDialog: false,
shoppingListShowAllToggled: false, shoppingListShowAllToggled: false,
}); });
const userHousehold = computed(() => { const { shoppingListDialog, shoppingListIngredientDialog, shoppingListShowAllToggled: _shoppingListShowAllToggled } = toRefs(state);
const userHousehold = computed(() => {
return $auth.user.value?.householdSlug || ""; return $auth.user.value?.householdSlug || "";
}); });
const shoppingListChoices = computed(() => { const shoppingListChoices = computed(() => {
return props.shoppingLists.filter(list => preferences.value.viewAllLists || list.userId === $auth.user.value?.id); return props.shoppingLists.filter(list => preferences.value.viewAllLists || list.userId === $auth.user.value?.id);
}); });
const recipeIngredientSections = ref<ShoppingListRecipeIngredientSection[]>([]); const recipeIngredientSections = ref<ShoppingListRecipeIngredientSection[]>([]);
const selectedShoppingList = ref<ShoppingListSummary | null>(null); const selectedShoppingList = ref<ShoppingListSummary | null>(null);
watchEffect( watchEffect(
() => { () => {
if (shoppingListChoices.value.length === 1 && !state.shoppingListShowAllToggled) { if (shoppingListChoices.value.length === 1 && !state.shoppingListShowAllToggled) {
selectedShoppingList.value = shoppingListChoices.value[0]; selectedShoppingList.value = shoppingListChoices.value[0];
@ -267,9 +249,15 @@ export default defineNuxtComponent({
ready.value = true; ready.value = true;
} }
}, },
); );
async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) { watch(dialog, (val) => {
if (!val) {
initState();
}
});
async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
const recipeSectionMap = new Map<string, ShoppingListRecipeIngredientSection>(); const recipeSectionMap = new Map<string, ShoppingListRecipeIngredientSection>();
for (const recipe of recipes) { for (const recipe of recipes) {
if (!recipe.slug) { if (!recipe.slug) {
@ -277,7 +265,10 @@ export default defineNuxtComponent({
} }
if (recipeSectionMap.has(recipe.slug)) { if (recipeSectionMap.has(recipe.slug)) {
recipeSectionMap.get(recipe.slug).recipeScale += recipe.scale; const existingSection = recipeSectionMap.get(recipe.slug);
if (existingSection) {
existingSection.recipeScale += recipe.scale;
}
continue; continue;
} }
@ -347,19 +338,19 @@ export default defineNuxtComponent({
} }
recipeIngredientSections.value = Array.from(recipeSectionMap.values()); recipeIngredientSections.value = Array.from(recipeSectionMap.values());
} }
function initState() { function initState() {
state.shoppingListDialog = true; state.shoppingListDialog = true;
state.shoppingListIngredientDialog = false; state.shoppingListIngredientDialog = false;
state.shoppingListShowAllToggled = false; state.shoppingListShowAllToggled = false;
recipeIngredientSections.value = []; recipeIngredientSections.value = [];
selectedShoppingList.value = null; selectedShoppingList.value = null;
} }
initState(); initState();
async function openShoppingListIngredientDialog(list: ShoppingListSummary) { async function openShoppingListIngredientDialog(list: ShoppingListSummary) {
if (!props.recipes?.length) { if (!props.recipes?.length) {
return; return;
} }
@ -368,13 +359,13 @@ export default defineNuxtComponent({
await consolidateRecipesIntoSections(props.recipes); await consolidateRecipesIntoSections(props.recipes);
state.shoppingListDialog = false; state.shoppingListDialog = false;
state.shoppingListIngredientDialog = true; state.shoppingListIngredientDialog = true;
} }
function setShowAllToggled() { function setShowAllToggled() {
state.shoppingListShowAllToggled = true; state.shoppingListShowAllToggled = true;
} }
function bulkCheckIngredients(value = true) { function bulkCheckIngredients(value = true) {
recipeIngredientSections.value.forEach((recipeSection) => { recipeIngredientSections.value.forEach((recipeSection) => {
recipeSection.ingredientSections.forEach((ingSection) => { recipeSection.ingredientSections.forEach((ingSection) => {
ingSection.ingredients.forEach((ing) => { ingSection.ingredients.forEach((ing) => {
@ -382,9 +373,9 @@ export default defineNuxtComponent({
}); });
}); });
}); });
} }
async function addRecipesToList() { async function addRecipesToList() {
if (!selectedShoppingList.value) { if (!selectedShoppingList.value) {
return; return;
} }
@ -420,23 +411,7 @@ export default defineNuxtComponent({
state.shoppingListDialog = false; state.shoppingListDialog = false;
state.shoppingListIngredientDialog = false; state.shoppingListIngredientDialog = false;
dialog.value = false; dialog.value = false;
} }
return {
dialog,
preferences,
ready,
shoppingListChoices,
...toRefs(state),
addRecipesToList,
bulkCheckIngredients,
openShoppingListIngredientDialog,
setShowAllToggled,
recipeIngredientSections,
selectedShoppingList,
};
},
});
</script> </script>
<style scoped lang="css"> <style scoped lang="css">

87
frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue
View file

@ -4,9 +4,9 @@
v-model="dialog" v-model="dialog"
width="800" width="800"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<BaseButton <BaseButton
v-bind="props" v-bind="activatorProps"
@click="inputText = inputTextProp" @click="inputText = inputTextProp"
> >
{{ $t("new-recipe.bulk-add") }} {{ $t("new-recipe.bulk-add") }}
@ -89,62 +89,61 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
export default defineNuxtComponent({ interface Props {
props: { inputTextProp?: string;
inputTextProp: { }
type: String, const props = withDefaults(defineProps<Props>(), {
required: false, inputTextProp: "",
default: "", });
},
},
emits: ["bulk-data"],
setup(props, context) {
const state = reactive({
dialog: false,
inputText: props.inputTextProp,
});
function splitText() { const emit = defineEmits<{
return state.inputText.split("\n").filter(line => !(line === "\n" || !line)); "bulk-data": [data: string[]];
} }>();
function removeFirstCharacter() { const dialog = ref(false);
state.inputText = splitText() const inputText = ref(props.inputTextProp);
function splitText() {
return inputText.value.split("\n").filter(line => !(line === "\n" || !line));
}
function removeFirstCharacter() {
inputText.value = splitText()
.map(line => line.substring(1)) .map(line => line.substring(1))
.join("\n"); .join("\n");
} }
const numberedLineRegex = /\d+[.):] /gm; const numberedLineRegex = /\d+[.):] /gm;
function splitByNumberedLine() { function splitByNumberedLine() {
// Split inputText by numberedLineRegex // Split inputText by numberedLineRegex
const matches = state.inputText.match(numberedLineRegex); const matches = inputText.value.match(numberedLineRegex);
matches?.forEach((match, idx) => { matches?.forEach((match, idx) => {
const replaceText = idx === 0 ? "" : "\n"; const replaceText = idx === 0 ? "" : "\n";
state.inputText = state.inputText.replace(match, replaceText); inputText.value = inputText.value.replace(match, replaceText);
}); });
} }
function trimAllLines() { function trimAllLines() {
const splitLines = splitText(); const splitLines = splitText();
splitLines.forEach((element: string, index: number) => { splitLines.forEach((element: string, index: number) => {
splitLines[index] = element.trim(); splitLines[index] = element.trim();
}); });
state.inputText = splitLines.join("\n"); inputText.value = splitLines.join("\n");
} }
function save() { function save() {
context.emit("bulk-data", splitText()); emit("bulk-data", splitText());
state.dialog = false; dialog.value = false;
} }
const i18n = useI18n(); const i18n = useI18n();
const utilities = [ const utilities = [
{ {
id: "trim-whitespace", id: "trim-whitespace",
description: i18n.t("new-recipe.trim-whitespace-description"), description: i18n.t("new-recipe.trim-whitespace-description"),
@ -160,17 +159,5 @@ export default defineNuxtComponent({
description: i18n.t("new-recipe.split-by-numbered-line-description"), description: i18n.t("new-recipe.split-by-numbered-line-description"),
action: splitByNumberedLine, action: splitByNumberedLine,
}, },
]; ];
return {
utilities,
splitText,
trimAllLines,
removeFirstCharacter,
splitByNumberedLine,
save,
...toRefs(state),
};
},
});
</script> </script>

47
frontend/components/Domain/Recipe/RecipeDialogPrintPreferences.vue
View file

@ -44,6 +44,7 @@
<v-switch <v-switch
v-model="preferences.showDescription" v-model="preferences.showDescription"
hide-details hide-details
color="primary"
:label="$t('recipe.description')" :label="$t('recipe.description')"
/> />
</v-row> </v-row>
@ -51,6 +52,7 @@
<v-switch <v-switch
v-model="preferences.showNotes" v-model="preferences.showNotes"
hide-details hide-details
color="primary"
:label="$t('recipe.notes')" :label="$t('recipe.notes')"
/> />
</v-row> </v-row>
@ -63,6 +65,7 @@
<v-switch <v-switch
v-model="preferences.showNutrition" v-model="preferences.showNutrition"
hide-details hide-details
color="primary"
:label="$t('recipe.nutrition')" :label="$t('recipe.nutrition')"
/> />
</v-row> </v-row>
@ -83,45 +86,19 @@
</BaseDialog> </BaseDialog>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import type { Recipe } from "~/lib/api/types/recipe"; import type { Recipe } from "~/lib/api/types/recipe";
import { ImagePosition, useUserPrintPreferences } from "~/composables/use-users/preferences"; import { ImagePosition, useUserPrintPreferences } from "~/composables/use-users/preferences";
import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue"; import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
import type { NoUndefinedField } from "~/lib/api/types/non-generated"; import type { NoUndefinedField } from "~/lib/api/types/non-generated";
export default defineNuxtComponent({ interface Props {
components: { recipe?: NoUndefinedField<Recipe>;
RecipePrintView, }
}, withDefaults(defineProps<Props>(), {
props: { recipe: undefined,
modelValue: {
type: Boolean,
default: false,
},
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
default: undefined,
},
},
emits: ["update:modelValue"],
setup(props, context) {
const preferences = useUserPrintPreferences();
// V-Model Support
const dialog = computed({
get: () => {
return props.modelValue;
},
set: (val) => {
context.emit("update:modelValue", val);
},
});
return {
dialog,
ImagePosition,
preferences,
};
},
}); });
const dialog = defineModel<boolean>({ default: false });
const preferences = useUserPrintPreferences();
</script> </script>

112
frontend/components/Domain/Recipe/RecipeDialogSearch.vue
View file

@ -52,10 +52,6 @@
<div class="mr-auto"> <div class="mr-auto">
{{ $t("search.results") }} {{ $t("search.results") }}
</div> </div>
<!-- <router-link
:to="advancedSearchUrl"
class="text-primary"
> {{ $t("search.advanced-search") }} </router-link> -->
</v-card-actions> </v-card-actions>
<RecipeCardMobile <RecipeCardMobile
@ -76,7 +72,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeCardMobile from "./RecipeCardMobile.vue"; import RecipeCardMobile from "./RecipeCardMobile.vue";
import { useLoggedInState } from "~/composables/use-logged-in-state"; import { useLoggedInState } from "~/composables/use-logged-in-state";
import type { RecipeSummary } from "~/lib/api/types/recipe"; import type { RecipeSummary } from "~/lib/api/types/recipe";
@ -85,114 +81,104 @@ import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
import { usePublicExploreApi } from "~/composables/api/api-client"; import { usePublicExploreApi } from "~/composables/api/api-client";
const SELECTED_EVENT = "selected"; const SELECTED_EVENT = "selected";
export default defineNuxtComponent({
components: {
RecipeCardMobile,
},
setup(_, context) { // Define emits
const $auth = useMealieAuth(); const emit = defineEmits<{
const state = reactive({ selected: [recipe: RecipeSummary];
loading: false, }>();
selectedIndex: -1,
});
// =========================================================================== const $auth = useMealieAuth();
// Dialog State Management const loading = ref(false);
const dialog = ref(false); const selectedIndex = ref(-1);
// Reset or Grab Recipes on Change // ===========================================================================
watch(dialog, (val) => { // Dialog State Management
const dialog = ref(false);
// Reset or Grab Recipes on Change
watch(dialog, (val) => {
if (!val) { if (!val) {
search.query.value = ""; search.query.value = "";
state.selectedIndex = -1; selectedIndex.value = -1;
search.data.value = []; search.data.value = [];
} }
}); });
// =========================================================================== // ===========================================================================
// Event Handlers // Event Handlers
function selectRecipe() { function selectRecipe() {
const recipeCards = document.getElementsByClassName("arrow-nav"); const recipeCards = document.getElementsByClassName("arrow-nav");
if (recipeCards) { if (recipeCards) {
if (state.selectedIndex < 0) { if (selectedIndex.value < 0) {
state.selectedIndex = -1; selectedIndex.value = -1;
document.getElementById("arrow-search")?.focus(); document.getElementById("arrow-search")?.focus();
return; return;
} }
if (state.selectedIndex >= recipeCards.length) { if (selectedIndex.value >= recipeCards.length) {
state.selectedIndex = recipeCards.length - 1; selectedIndex.value = recipeCards.length - 1;
} }
(recipeCards[state.selectedIndex] as HTMLElement).focus(); (recipeCards[selectedIndex.value] as HTMLElement).focus();
}
} }
}
function onUpDown(e: KeyboardEvent) { function onUpDown(e: KeyboardEvent) {
if (e.key === "Enter") { if (e.key === "Enter") {
console.log(document.activeElement); console.log(document.activeElement);
// (document.activeElement as HTMLElement).click(); // (document.activeElement as HTMLElement).click();
} }
else if (e.key === "ArrowUp") { else if (e.key === "ArrowUp") {
e.preventDefault(); e.preventDefault();
state.selectedIndex--; selectedIndex.value--;
} }
else if (e.key === "ArrowDown") { else if (e.key === "ArrowDown") {
e.preventDefault(); e.preventDefault();
state.selectedIndex++; selectedIndex.value++;
} }
else { else {
return; return;
} }
selectRecipe(); selectRecipe();
} }
watch(dialog, (val) => { watch(dialog, (val) => {
if (!val) { if (!val) {
document.removeEventListener("keyup", onUpDown); document.removeEventListener("keyup", onUpDown);
} }
else { else {
document.addEventListener("keyup", onUpDown); document.addEventListener("keyup", onUpDown);
} }
}); });
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || ""); const route = useRoute();
const route = useRoute(); const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
const advancedSearchUrl = computed(() => `/g/${groupSlug.value}`); watch(route, close);
watch(route, close);
function open() { function open() {
dialog.value = true; dialog.value = true;
} }
function close() { function close() {
dialog.value = false; dialog.value = false;
} }
// =========================================================================== // ===========================================================================
// Basic Search // Basic Search
const { isOwnGroup } = useLoggedInState(); const { isOwnGroup } = useLoggedInState();
const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore; const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore;
const search = useRecipeSearch(api); const search = useRecipeSearch(api);
// Select Handler // Select Handler
function handleSelect(recipe: RecipeSummary) {
function handleSelect(recipe: RecipeSummary) {
close(); close();
context.emit(SELECTED_EVENT, recipe); emit(SELECTED_EVENT, recipe);
} }
return { // Expose functions to parent components
...toRefs(state), defineExpose({
advancedSearchUrl,
dialog,
open, open,
close, close,
handleSelect,
search,
};
},
}); });
</script> </script>

134
frontend/components/Domain/Recipe/RecipeDialogShare.vue
View file

@ -14,14 +14,14 @@
max-width="290px" max-width="290px"
min-width="auto" min-width="auto"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-text-field <v-text-field
v-model="expirationDateString" v-model="expirationDateString"
:label="$t('recipe-share.expiration-date')" :label="$t('recipe-share.expiration-date')"
:hint="$t('recipe-share.default-30-days')" :hint="$t('recipe-share.default-30-days')"
persistent-hint persistent-hint
:prepend-icon="$globals.icons.calendar" :prepend-icon="$globals.icons.calendar"
v-bind="props" v-bind="activatorProps"
readonly readonly
/> />
</template> </template>
@ -92,113 +92,92 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useClipboard, useShare, whenever } from "@vueuse/core"; import { useClipboard, useShare, whenever } from "@vueuse/core";
import type { RecipeShareToken } from "~/lib/api/types/recipe"; import type { RecipeShareToken } from "~/lib/api/types/recipe";
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
import { useHouseholdSelf } from "~/composables/use-households"; import { useHouseholdSelf } from "~/composables/use-households";
import { alert } from "~/composables/use-toast"; import { alert } from "~/composables/use-toast";
export default defineNuxtComponent({ interface Props {
props: { recipeId: string;
modelValue: { name: string;
type: Boolean, }
default: false, const props = defineProps<Props>();
},
recipeId: {
type: String,
required: true,
},
name: {
type: String,
required: true,
},
},
emits: ["update:modelValue"],
setup(props, context) {
// V-Model Support
const dialog = computed({
get: () => {
return props.modelValue;
},
set: (val) => {
context.emit("update:modelValue", val);
},
});
const state = reactive({ const dialog = defineModel<boolean>({ default: false });
datePickerMenu: false,
expirationDate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000),
tokens: [] as RecipeShareToken[],
});
const expirationDateString = computed(() => { const datePickerMenu = ref(false);
return state.expirationDate.toISOString().substring(0, 10); const expirationDate = ref(new Date(Date.now() - new Date().getTimezoneOffset() * 60000));
}); const tokens = ref<RecipeShareToken[]>([]);
whenever( const expirationDateString = computed(() => {
() => props.modelValue, return expirationDate.value.toISOString().substring(0, 10);
});
whenever(
() => dialog.value,
() => { () => {
// Set expiration date to today + 30 Days // Set expiration date to today + 30 Days
const today = new Date(); const today = new Date();
state.expirationDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000); expirationDate.value = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
refreshTokens(); refreshTokens();
}, },
); );
const i18n = useI18n(); const i18n = useI18n();
const $auth = useMealieAuth(); const $auth = useMealieAuth();
const { household } = useHouseholdSelf(); const { household } = useHouseholdSelf();
const route = useRoute(); const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || ""); const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
const firstDayOfWeek = computed(() => { const firstDayOfWeek = computed(() => {
return household.value?.preferences?.firstDayOfWeek || 0; return household.value?.preferences?.firstDayOfWeek || 0;
}); });
// ============================================================ // ============================================================
// Token Actions // Token Actions
const userApi = useUserApi(); const userApi = useUserApi();
async function createNewToken() { async function createNewToken() {
// Convert expiration date to timestamp // Convert expiration date to timestamp
const { data } = await userApi.recipes.share.createOne({ const { data } = await userApi.recipes.share.createOne({
recipeId: props.recipeId, recipeId: props.recipeId,
expiresAt: state.expirationDate.toISOString(), expiresAt: expirationDate.value.toISOString(),
}); });
if (data) { if (data) {
state.tokens.push(data); tokens.value.push(data);
}
} }
}
async function deleteToken(id: string) { async function deleteToken(id: string) {
await userApi.recipes.share.deleteOne(id); await userApi.recipes.share.deleteOne(id);
state.tokens = state.tokens.filter(token => token.id !== id); tokens.value = tokens.value.filter(token => token.id !== id);
} }
async function refreshTokens() { async function refreshTokens() {
const { data } = await userApi.recipes.share.getAll(1, -1, { recipe_id: props.recipeId }); const { data } = await userApi.recipes.share.getAll(1, -1, { recipe_id: props.recipeId });
if (data) { if (data) {
// @ts-expect-error - TODO: This routes doesn't have pagination, but the type are mismatched. // @ts-expect-error - TODO: This routes doesn't have pagination, but the type are mismatched.
state.tokens = data ?? []; tokens.value = data ?? [];
}
} }
}
const { share, isSupported: shareIsSupported } = useShare(); const { share, isSupported: shareIsSupported } = useShare();
const { copy, copied, isSupported } = useClipboard(); const { copy, copied, isSupported } = useClipboard();
function getRecipeText() { function getRecipeText() {
return i18n.t("recipe.share-recipe-message", [props.name]); return i18n.t("recipe.share-recipe-message", [props.name]);
} }
function getTokenLink(token: string) { function getTokenLink(token: string) {
return `${window.location.origin}/g/${groupSlug.value}/shared/r/${token}`; return `${window.location.origin}/g/${groupSlug.value}/shared/r/${token}`;
} }
async function copyTokenLink(token: string) { async function copyTokenLink(token: string) {
if (isSupported.value) { if (isSupported.value) {
await copy(getTokenLink(token)); await copy(getTokenLink(token));
if (copied.value) { if (copied.value) {
@ -211,9 +190,9 @@ export default defineNuxtComponent({
else { else {
alert.error(i18n.t("general.clipboard-not-supported") as string); alert.error(i18n.t("general.clipboard-not-supported") as string);
} }
} }
async function shareRecipe(token: string) { async function shareRecipe(token: string) {
if (shareIsSupported) { if (shareIsSupported) {
share({ share({
title: props.name, title: props.name,
@ -224,18 +203,5 @@ export default defineNuxtComponent({
else { else {
await copyTokenLink(token); await copyTokenLink(token);
} }
} }
return {
...toRefs(state),
expirationDateString,
dialog,
createNewToken,
deleteToken,
firstDayOfWeek,
shareRecipe,
copyTokenLink,
};
},
});
</script> </script>

51
frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
View file

@ -4,7 +4,7 @@
nudge-right="50" nudge-right="50"
:color="buttonStyle ? 'info' : 'secondary'" :color="buttonStyle ? 'info' : 'secondary'"
> >
<template #activator="{ props }"> <template #activator="{ props: tooltipProps }">
<v-btn <v-btn
v-if="isFavorite || showAlways" v-if="isFavorite || showAlways"
icon icon
@ -13,7 +13,7 @@
size="small" size="small"
:color="buttonStyle ? 'info' : 'secondary'" :color="buttonStyle ? 'info' : 'secondary'"
:fab="buttonStyle" :fab="buttonStyle"
v-bind="{ ...props, ...$attrs }" v-bind="{ ...tooltipProps, ...$attrs }"
@click.prevent="toggleFavorite" @click.prevent="toggleFavorite"
> >
<v-icon <v-icon
@ -28,36 +28,31 @@
</v-tooltip> </v-tooltip>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useUserSelfRatings } from "~/composables/use-users"; import { useUserSelfRatings } from "~/composables/use-users";
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
export default defineNuxtComponent({ interface Props {
props: { recipeId?: string;
recipeId: { showAlways?: boolean;
type: String, buttonStyle?: boolean;
default: "", }
}, const props = withDefaults(defineProps<Props>(), {
showAlways: { recipeId: "",
type: Boolean, showAlways: false,
default: false, buttonStyle: false,
}, });
buttonStyle: {
type: Boolean,
default: false,
},
},
setup(props) {
const api = useUserApi();
const $auth = useMealieAuth();
const { userRatings, refreshUserRatings } = useUserSelfRatings();
const isFavorite = computed(() => { const api = useUserApi();
const $auth = useMealieAuth();
const { userRatings, refreshUserRatings } = useUserSelfRatings();
const isFavorite = computed(() => {
const rating = userRatings.value.find(r => r.recipeId === props.recipeId); const rating = userRatings.value.find(r => r.recipeId === props.recipeId);
return rating?.isFavorite || false; return rating?.isFavorite || false;
}); });
async function toggleFavorite() { async function toggleFavorite() {
if (!$auth.user.value) return; if (!$auth.user.value) return;
if (!isFavorite.value) { if (!isFavorite.value) {
await api.users.addFavorite($auth.user.value?.id, props.recipeId); await api.users.addFavorite($auth.user.value?.id, props.recipeId);
@ -66,9 +61,5 @@ export default defineNuxtComponent({
await api.users.removeFavorite($auth.user.value?.id, props.recipeId); await api.users.removeFavorite($auth.user.value?.id, props.recipeId);
} }
await refreshUserRatings(); await refreshUserRatings();
} }
return { isFavorite, toggleFavorite };
},
});
</script> </script>

70
frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
View file

@ -7,11 +7,11 @@
nudge-top="6" nudge-top="6"
:close-on-content-click="false" :close-on-content-click="false"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-btn <v-btn
color="accent" color="accent"
dark dark
v-bind="props" v-bind="activatorProps"
> >
<v-icon start> <v-icon start>
{{ $globals.icons.fileImage }} {{ $globals.icons.fileImage }}
@ -61,52 +61,42 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
const REFRESH_EVENT = "refresh"; const REFRESH_EVENT = "refresh";
const UPLOAD_EVENT = "upload"; const UPLOAD_EVENT = "upload";
export default defineNuxtComponent({ const props = defineProps<{ slug: string }>();
props: {
slug: {
type: String,
required: true,
},
},
setup(props, context) {
const state = reactive({
url: "",
loading: false,
menu: false,
});
function uploadImage(fileObject: File) { const emit = defineEmits<{
context.emit(UPLOAD_EVENT, fileObject); refresh: [];
state.menu = false; upload: [fileObject: File];
}>();
const url = ref("");
const loading = ref(false);
const menu = ref(false);
function uploadImage(fileObject: File) {
emit(UPLOAD_EVENT, fileObject);
menu.value = false;
}
const api = useUserApi();
async function getImageFromURL() {
loading.value = true;
if (await api.recipes.updateImagebyURL(props.slug, url.value)) {
emit(REFRESH_EVENT);
} }
loading.value = false;
menu.value = false;
}
const api = useUserApi(); const i18n = useI18n();
async function getImageFromURL() { const messages = computed(() =>
state.loading = true; props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")],
if (await api.recipes.updateImagebyURL(props.slug, state.url)) { );
context.emit(REFRESH_EVENT);
}
state.loading = false;
state.menu = false;
}
const i18n = useI18n();
const messages = props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")];
return {
...toRefs(state),
uploadImage,
getImageFromURL,
messages,
};
},
});
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

22
frontend/components/Domain/Recipe/RecipeIngredientHtml.vue
View file

@ -3,21 +3,13 @@
<div v-html="safeMarkup" /> <div v-html="safeMarkup" />
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { sanitizeIngredientHTML } from "~/composables/recipes/use-recipe-ingredients"; import { sanitizeIngredientHTML } from "~/composables/recipes/use-recipe-ingredients";
export default defineNuxtComponent({ interface Props {
props: { markup: string;
markup: { }
type: String, const props = defineProps<Props>();
required: true,
}, const safeMarkup = computed(() => sanitizeIngredientHTML(props.markup));
},
setup(props) {
const safeMarkup = computed(() => sanitizeIngredientHTML(props.markup));
return {
safeMarkup,
};
},
});
</script> </script>

36
frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
View file

@ -28,34 +28,22 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import type { RecipeIngredient } from "~/lib/api/types/household"; import type { RecipeIngredient } from "~/lib/api/types/household";
import { useParsedIngredientText } from "~/composables/recipes"; import { useParsedIngredientText } from "~/composables/recipes";
export default defineNuxtComponent({ interface Props {
props: { ingredient: RecipeIngredient;
ingredient: { disableAmount?: boolean;
type: Object as () => RecipeIngredient, scale?: number;
required: true, }
}, const props = withDefaults(defineProps<Props>(), {
disableAmount: { disableAmount: false,
type: Boolean, scale: 1,
default: false, });
},
scale: {
type: Number,
default: 1,
},
},
setup(props) {
const parsedIng = computed(() => {
return useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
});
return { const parsedIng = computed(() => {
parsedIng, return useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
};
},
}); });
</script> </script>

64
frontend/components/Domain/Recipe/RecipeIngredients.vue
View file

@ -53,42 +53,32 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeIngredientListItem from "./RecipeIngredientListItem.vue"; import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
import { parseIngredientText } from "~/composables/recipes"; import { parseIngredientText } from "~/composables/recipes";
import type { RecipeIngredient } from "~/lib/api/types/recipe"; import type { RecipeIngredient } from "~/lib/api/types/recipe";
export default defineNuxtComponent({ interface Props {
components: { RecipeIngredientListItem }, value?: RecipeIngredient[];
props: { disableAmount?: boolean;
value: { scale?: number;
type: Array as () => RecipeIngredient[], isCookMode?: boolean;
default: () => [], }
}, const props = withDefaults(defineProps<Props>(), {
disableAmount: { value: () => [],
type: Boolean, disableAmount: false,
default: false, scale: 1,
}, isCookMode: false,
scale: { });
type: Number,
default: 1, function validateTitle(title?: string | null) {
},
isCookMode: {
type: Boolean,
default: false,
},
},
setup(props) {
function validateTitle(title?: string) {
return !(title === undefined || title === "" || title === null); return !(title === undefined || title === "" || title === null);
} }
const state = reactive({ const checked = ref(props.value.map(() => false));
checked: props.value.map(() => false), const showTitleEditor = computed(() => props.value.map(x => validateTitle(x.title)));
showTitleEditor: computed(() => props.value.map(x => validateTitle(x.title))),
});
const ingredientCopyText = computed(() => { const ingredientCopyText = computed(() => {
const components: string[] = []; const components: string[] = [];
props.value.forEach((ingredient) => { props.value.forEach((ingredient) => {
if (ingredient.title) { if (ingredient.title) {
@ -103,21 +93,13 @@ export default defineNuxtComponent({
}); });
return components.join("\n"); return components.join("\n");
}); });
function toggleChecked(index: number) { function toggleChecked(index: number) {
// TODO Find a better way to do this - $set is not available, and // TODO Find a better way to do this - $set is not available, and
// direct array modifications are not propagated for some reason // direct array modifications are not propagated for some reason
state.checked.splice(index, 1, !state.checked[index]); checked.value.splice(index, 1, !checked.value[index]);
} }
return {
...toRefs(state),
ingredientCopyText,
toggleChecked,
};
},
});
</script> </script>
<style> <style>

117
frontend/components/Domain/Recipe/RecipeLastMade.vue
View file

@ -30,11 +30,11 @@
offset-y offset-y
max-width="290px" max-width="290px"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-text-field <v-text-field
v-model="newTimelineEventTimestampString" v-model="newTimelineEventTimestampString"
:prepend-icon="$globals.icons.calendar" :prepend-icon="$globals.icons.calendar"
v-bind="props" v-bind="activatorProps"
readonly readonly
/> />
</template> </template>
@ -87,12 +87,12 @@
<div v-if="lastMadeReady" class="d-flex justify-center flex-wrap"> <div v-if="lastMadeReady" class="d-flex justify-center flex-wrap">
<v-row no-gutters class="d-flex flex-wrap align-center" style="font-size: larger"> <v-row no-gutters class="d-flex flex-wrap align-center" style="font-size: larger">
<v-tooltip location="bottom"> <v-tooltip location="bottom">
<template #activator="{ props }"> <template #activator="{ props: tooltipProps }">
<v-btn <v-btn
rounded rounded
variant="outlined" variant="outlined"
size="x-large" size="x-large"
v-bind="props" v-bind="tooltipProps"
style="border-color: rgb(var(--v-theme-primary));" style="border-color: rgb(var(--v-theme-primary));"
@click="madeThisDialog = true" @click="madeThisDialog = true"
> >
@ -117,7 +117,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { whenever } from "@vueuse/core"; import { whenever } from "@vueuse/core";
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
import { alert } from "~/composables/use-toast"; import { alert } from "~/composables/use-toast";
@ -125,39 +125,35 @@ import { useHouseholdSelf } from "~/composables/use-households";
import type { Recipe, RecipeTimelineEventIn, RecipeTimelineEventOut } from "~/lib/api/types/recipe"; import type { Recipe, RecipeTimelineEventIn, RecipeTimelineEventOut } from "~/lib/api/types/recipe";
import type { VForm } from "~/types/auto-forms"; import type { VForm } from "~/types/auto-forms";
export default defineNuxtComponent({ const props = defineProps<{ recipe: Recipe }>();
props: { const emit = defineEmits<{
recipe: { eventCreated: [event: RecipeTimelineEventOut];
type: Object as () => Recipe, }>();
required: true,
}, const madeThisDialog = ref(false);
}, const userApi = useUserApi();
emits: ["eventCreated"], const { household } = useHouseholdSelf();
setup(props, context) { const i18n = useI18n();
const madeThisDialog = ref(false); const $auth = useMealieAuth();
const userApi = useUserApi(); const domMadeThisForm = ref<VForm>();
const { household } = useHouseholdSelf(); const newTimelineEvent = ref<RecipeTimelineEventIn>({
const i18n = useI18n();
const $auth = useMealieAuth();
const domMadeThisForm = ref<VForm>();
const newTimelineEvent = ref<RecipeTimelineEventIn>({
subject: "", subject: "",
eventType: "comment", eventType: "comment",
eventMessage: "", eventMessage: "",
timestamp: undefined, timestamp: undefined,
recipeId: props.recipe?.id || "", recipeId: props.recipe?.id || "",
}); });
const newTimelineEventImage = ref<Blob | File>(); const newTimelineEventImage = ref<Blob | File>();
const newTimelineEventImageName = ref<string>(""); const newTimelineEventImageName = ref<string>("");
const newTimelineEventImagePreviewUrl = ref<string>(); const newTimelineEventImagePreviewUrl = ref<string>();
const newTimelineEventTimestamp = ref<Date>(new Date()); const newTimelineEventTimestamp = ref<Date>(new Date());
const newTimelineEventTimestampString = computed(() => { const newTimelineEventTimestampString = computed(() => {
return newTimelineEventTimestamp.value.toISOString().substring(0, 10); return newTimelineEventTimestamp.value.toISOString().substring(0, 10);
}); });
const lastMade = ref(props.recipe.lastMade); const lastMade = ref(props.recipe.lastMade);
const lastMadeReady = ref(false); const lastMadeReady = ref(false);
onMounted(async () => { onMounted(async () => {
if (!$auth.user?.value?.householdSlug) { if (!$auth.user?.value?.householdSlug) {
lastMade.value = props.recipe.lastMade; lastMade.value = props.recipe.lastMade;
} }
@ -167,55 +163,56 @@ export default defineNuxtComponent({
} }
lastMadeReady.value = true; lastMadeReady.value = true;
}); });
whenever( whenever(
() => madeThisDialog.value, () => madeThisDialog.value,
() => { () => {
// Set timestamp to now // Set timestamp to now
newTimelineEventTimestamp.value = new Date(Date.now() - new Date().getTimezoneOffset() * 60000); newTimelineEventTimestamp.value = new Date(Date.now() - new Date().getTimezoneOffset() * 60000);
}, },
); );
const firstDayOfWeek = computed(() => { const firstDayOfWeek = computed(() => {
return household.value?.preferences?.firstDayOfWeek || 0; return household.value?.preferences?.firstDayOfWeek || 0;
}); });
function clearImage() { function clearImage() {
newTimelineEventImage.value = undefined; newTimelineEventImage.value = undefined;
newTimelineEventImageName.value = ""; newTimelineEventImageName.value = "";
newTimelineEventImagePreviewUrl.value = undefined; newTimelineEventImagePreviewUrl.value = undefined;
} }
function uploadImage(fileObject: File) { function uploadImage(fileObject: File) {
newTimelineEventImage.value = fileObject; newTimelineEventImage.value = fileObject;
newTimelineEventImageName.value = fileObject.name; newTimelineEventImageName.value = fileObject.name;
newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject); newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject);
} }
function updateUploadedImage(fileObject: Blob) { function updateUploadedImage(fileObject: Blob) {
newTimelineEventImage.value = fileObject; newTimelineEventImage.value = fileObject;
newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject); newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject);
} }
const state = reactive({ datePickerMenu: false, madeThisFormLoading: false }); const datePickerMenu = ref(false);
const madeThisFormLoading = ref(false);
function resetMadeThisForm() { function resetMadeThisForm() {
state.madeThisFormLoading = false; madeThisFormLoading.value = false;
newTimelineEvent.value.eventMessage = ""; newTimelineEvent.value.eventMessage = "";
newTimelineEvent.value.timestamp = undefined; newTimelineEvent.value.timestamp = undefined;
clearImage(); clearImage();
madeThisDialog.value = false; madeThisDialog.value = false;
domMadeThisForm.value?.reset(); domMadeThisForm.value?.reset();
} }
async function createTimelineEvent() { async function createTimelineEvent() {
if (!(newTimelineEventTimestampString.value && props.recipe?.id && props.recipe?.slug)) { if (!(newTimelineEventTimestampString.value && props.recipe?.id && props.recipe?.slug)) {
return; return;
} }
state.madeThisFormLoading = true; madeThisFormLoading.value = true;
newTimelineEvent.value.recipeId = props.recipe.id; newTimelineEvent.value.recipeId = props.recipe.id;
// Note: $auth.user is now a ref // Note: $auth.user is now a ref
@ -279,26 +276,6 @@ export default defineNuxtComponent({
} }
resetMadeThisForm(); resetMadeThisForm();
context.emit("eventCreated", newEvent); emit("eventCreated", newEvent);
} }
return {
...toRefs(state),
domMadeThisForm,
madeThisDialog,
firstDayOfWeek,
newTimelineEvent,
newTimelineEventImage,
newTimelineEventImagePreviewUrl,
newTimelineEventTimestamp,
newTimelineEventTimestampString,
lastMade,
lastMadeReady,
createTimelineEvent,
clearImage,
uploadImage,
updateUploadedImage,
};
},
});
</script> </script>

72
frontend/components/Domain/Recipe/RecipeList.vue
View file

@ -51,46 +51,34 @@
</v-list> </v-list>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import { useFraction } from "~/composables/recipes/use-fraction"; import { useFraction } from "~/composables/recipes/use-fraction";
import type { ShoppingListItemOut } from "~/lib/api/types/household"; import type { ShoppingListItemOut } from "~/lib/api/types/household";
import type { RecipeSummary } from "~/lib/api/types/recipe"; import type { RecipeSummary } from "~/lib/api/types/recipe";
export default defineNuxtComponent({ interface Props {
props: { recipes: RecipeSummary[];
recipes: { listItem?: ShoppingListItemOut;
type: Array as () => RecipeSummary[], small?: boolean;
required: true, tile?: boolean;
}, showDescription?: boolean;
listItem: { disabled?: boolean;
type: Object as () => ShoppingListItemOut | undefined, }
default: undefined, const props = withDefaults(defineProps<Props>(), {
}, listItem: undefined,
small: { small: false,
type: Boolean, tile: false,
default: false, showDescription: false,
}, disabled: false,
tile: { });
type: Boolean,
default: false,
},
showDescription: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
},
setup(props) {
const $auth = useMealieAuth();
const { frac } = useFraction();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
const attrs = computed(() => { const $auth = useMealieAuth();
const { frac } = useFraction();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
const attrs = computed(() => {
return props.small return props.small
? { ? {
class: { class: {
@ -122,16 +110,16 @@ export default defineNuxtComponent({
}, },
}, },
}; };
}); });
function sanitizeHTML(rawHtml: string) { function sanitizeHTML(rawHtml: string) {
return DOMPurify.sanitize(rawHtml, { return DOMPurify.sanitize(rawHtml, {
USE_PROFILES: { html: true }, USE_PROFILES: { html: true },
ALLOWED_TAGS: ["strong", "sup"], ALLOWED_TAGS: ["strong", "sup"],
}); });
} }
const listItemDescriptions = computed<string[]>(() => { const listItemDescriptions = computed<string[]>(() => {
if ( if (
props.recipes.length === 1 // we don't need to specify details if there's only one recipe ref props.recipes.length === 1 // we don't need to specify details if there's only one recipe ref
|| !props.listItem?.recipeReferences || !props.listItem?.recipeReferences
@ -179,13 +167,5 @@ export default defineNuxtComponent({
} }
return listItemDescriptions; return listItemDescriptions;
});
return {
attrs,
groupSlug,
listItemDescriptions,
};
},
}); });
</script> </script>

60
frontend/components/Domain/Recipe/RecipeNutrition.vue
View file

@ -45,62 +45,48 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useNutritionLabels } from "~/composables/recipes"; import { useNutritionLabels } from "~/composables/recipes";
import type { Nutrition } from "~/lib/api/types/recipe"; import type { Nutrition } from "~/lib/api/types/recipe";
import type { NutritionLabelType } from "~/composables/recipes/use-recipe-nutrition"; import type { NutritionLabelType } from "~/composables/recipes/use-recipe-nutrition";
export default defineNuxtComponent({ interface Props {
props: { edit?: boolean;
modelValue: { }
type: Object as () => Nutrition, const props = withDefaults(defineProps<Props>(), {
required: true, edit: true,
}, });
edit: {
type: Boolean, const modelValue = defineModel<Nutrition>({ required: true });
default: true,
}, const { labels } = useNutritionLabels();
}, const valueNotNull = computed(() => {
emits: ["update:modelValue"],
setup(props, context) {
const { labels } = useNutritionLabels();
const valueNotNull = computed(() => {
let key: keyof Nutrition; let key: keyof Nutrition;
for (key in props.modelValue) { for (key in modelValue.value) {
if (props.modelValue[key] !== null) { if (modelValue.value[key] !== null) {
return true; return true;
} }
} }
return false; return false;
}); });
const showViewer = computed(() => !props.edit && valueNotNull.value); const showViewer = computed(() => !props.edit && valueNotNull.value);
function updateValue(key: number | string, event: Event) { function updateValue(key: number | string, event: Event) {
context.emit("update:modelValue", { ...props.modelValue, [key]: event }); modelValue.value = { ...modelValue.value, [key]: event };
} }
// Build a new list that only contains nutritional information that has a value // Build a new list that only contains nutritional information that has a value
const renderedList = computed(() => { const renderedList = computed(() => {
return Object.entries(labels).reduce((item: NutritionLabelType, [key, label]) => { return Object.entries(labels).reduce((item: NutritionLabelType, [key, label]) => {
if (props.modelValue[key]?.trim()) { if (modelValue.value[key]?.trim()) {
item[key] = { item[key] = {
...label, ...label,
value: props.modelValue[key], value: modelValue.value[key],
}; };
} }
return item; return item;
}, {}); }, {});
});
return {
labels,
valueNotNull,
showViewer,
updateValue,
renderedList,
};
},
}); });
</script> </script>

98
frontend/components/Domain/Recipe/RecipeOrganizerDialog.vue
View file

@ -60,60 +60,45 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
import { useCategoryStore, useTagStore, useToolStore } from "~/composables/store"; import { useCategoryStore, useTagStore, useToolStore } from "~/composables/store";
import { type RecipeOrganizer, Organizer } from "~/lib/api/types/non-generated"; import { type RecipeOrganizer, Organizer } from "~/lib/api/types/non-generated";
const CREATED_ITEM_EVENT = "created-item"; const CREATED_ITEM_EVENT = "created-item";
export default defineNuxtComponent({ interface Props {
props: { color?: string | null;
modelValue: { tagDialog?: boolean;
type: Boolean, itemType?: RecipeOrganizer;
default: false, }
}, const props = withDefaults(defineProps<Props>(), {
color: { color: null,
type: String, tagDialog: true,
default: null, itemType: "category" as RecipeOrganizer,
}, });
tagDialog: {
type: Boolean,
default: true,
},
itemType: {
type: String as () => RecipeOrganizer,
default: "category",
},
},
emits: ["update:modelValue"],
setup(props, context) {
const i18n = useI18n();
const state = reactive({ const emit = defineEmits<{
name: "", "created-item": [item: any];
onHand: false, }>();
});
const dialog = computed({ const dialog = defineModel<boolean>({ default: false });
get() {
return props.modelValue;
},
set(value) {
context.emit("update:modelValue", value);
},
});
watch( const i18n = useI18n();
() => props.modelValue,
const name = ref("");
const onHand = ref(false);
watch(
dialog,
(val: boolean) => { (val: boolean) => {
if (!val) state.name = ""; if (!val) name.value = "";
}, },
); );
const userApi = useUserApi(); const userApi = useUserApi();
const store = (() => { const store = (() => {
switch (props.itemType) { switch (props.itemType) {
case Organizer.Tag: case Organizer.Tag:
return useTagStore(); return useTagStore();
@ -122,9 +107,9 @@ export default defineNuxtComponent({
default: default:
return useCategoryStore(); return useCategoryStore();
} }
})(); })();
const properties = computed(() => { const properties = computed(() => {
switch (props.itemType) { switch (props.itemType) {
case Organizer.Tag: case Organizer.Tag:
return { return {
@ -145,34 +130,23 @@ export default defineNuxtComponent({
api: userApi.categories, api: userApi.categories,
}; };
} }
}); });
const rules = { const rules = {
required: (val: string) => !!val || (i18n.t("general.a-name-is-required") as string), required: (val: string) => !!val || (i18n.t("general.a-name-is-required") as string),
}; };
async function select() { async function select() {
if (store) { if (store) {
// @ts-expect-error the same state is used for different organizer types, which have different requirements // @ts-expect-error the same state is used for different organizer types, which have different requirements
await store.actions.createOne({ ...state }); await store.actions.createOne({ name: name.value, onHand: onHand.value });
} }
const newItem = store.store.value.find(item => item.name === state.name); const newItem = store.store.value.find(item => item.name === name.value);
context.emit(CREATED_ITEM_EVENT, newItem); emit(CREATED_ITEM_EVENT, newItem);
dialog.value = false; dialog.value = false;
} }
return {
Organizer,
...toRefs(state),
dialog,
properties,
rules,
select,
};
},
});
</script> </script>
<style></style> <style></style>

125
frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
View file

@ -122,9 +122,8 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import Fuse from "fuse.js"; import Fuse from "fuse.js";
import { useContextPresets } from "~/composables/use-context-presents"; import { useContextPresets } from "~/composables/use-context-presents";
import RecipeOrganizerDialog from "~/components/Domain/Recipe/RecipeOrganizerDialog.vue"; import RecipeOrganizerDialog from "~/components/Domain/Recipe/RecipeOrganizerDialog.vue";
import { Organizer, type RecipeOrganizer } from "~/lib/api/types/non-generated"; import { Organizer, type RecipeOrganizer } from "~/lib/api/types/non-generated";
@ -138,27 +137,18 @@ interface GenericItem {
onHand: boolean; onHand: boolean;
} }
export default defineNuxtComponent({ const props = defineProps<{
components: { items: GenericItem[];
RecipeOrganizerDialog, icon: string;
}, itemType: RecipeOrganizer;
props: { }>();
items: {
type: Array as () => GenericItem[], const emit = defineEmits<{
required: true, update: [item: GenericItem];
}, delete: [id: string];
icon: { }>();
type: String,
required: true, const state = reactive({
},
itemType: {
type: String as () => RecipeOrganizer,
required: true,
},
},
emits: ["update", "delete"],
setup(props, { emit }) {
const state = reactive({
// Search Options // Search Options
options: { options: {
ignoreLocation: true, ignoreLocation: true,
@ -171,24 +161,24 @@ export default defineNuxtComponent({
minMatchCharLength: 1, minMatchCharLength: 1,
keys: ["name"], keys: ["name"],
}, },
}); });
const $auth = useMealieAuth(); const $auth = useMealieAuth();
const route = useRoute(); const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user?.value?.groupSlug || ""); const groupSlug = computed(() => route.params.groupSlug as string || $auth.user?.value?.groupSlug || "");
// ================================================================= // =================================================================
// Context Menu // Context Menu
const dialogs = ref({ const dialogs = ref({
organizer: false, organizer: false,
update: false, update: false,
delete: false, delete: false,
}); });
const presets = useContextPresets(); const presets = useContextPresets();
const translationKey = computed<string>(() => { const translationKey = computed<string>(() => {
const typeMap = { const typeMap = {
categories: "category.category", categories: "category.category",
tags: "tag.tag", tags: "tag.tag",
@ -197,58 +187,58 @@ export default defineNuxtComponent({
households: "household.household", households: "household.household",
}; };
return typeMap[props.itemType] || ""; return typeMap[props.itemType] || "";
}); });
const deleteTarget = ref<GenericItem | null>(null); const deleteTarget = ref<GenericItem | null>(null);
const updateTarget = ref<GenericItem | null>(null); const updateTarget = ref<GenericItem | null>(null);
function confirmDelete(item: GenericItem) { function confirmDelete(item: GenericItem) {
deleteTarget.value = item; deleteTarget.value = item;
dialogs.value.delete = true; dialogs.value.delete = true;
} }
function deleteOne() { function deleteOne() {
if (!deleteTarget.value) { if (!deleteTarget.value) {
return; return;
} }
emit("delete", deleteTarget.value.id); emit("delete", deleteTarget.value.id);
} }
function openUpdateDialog(item: GenericItem) { function openUpdateDialog(item: GenericItem) {
updateTarget.value = deepCopy(item); updateTarget.value = deepCopy(item);
dialogs.value.update = true; dialogs.value.update = true;
} }
function updateOne() { function updateOne() {
if (!updateTarget.value) { if (!updateTarget.value) {
return; return;
} }
emit("update", updateTarget.value); emit("update", updateTarget.value);
} }
// ================================================================ // ================================================================
// Search Functions // Search Functions
const searchString = useRouteQuery("q", ""); const searchString = useRouteQuery("q", "");
const fuse = computed(() => { const fuse = computed(() => {
return new Fuse(props.items, state.options); return new Fuse(props.items, state.options);
}); });
const fuzzyItems = computed<GenericItem[]>(() => { const fuzzyItems = computed<GenericItem[]>(() => {
if (searchString.value.trim() === "") { if (searchString.value.trim() === "") {
return props.items; return props.items;
} }
const result = fuse.value.search(searchString.value.trim() as string); const result = fuse.value.search(searchString.value.trim() as string);
return result.map(x => x.item); return result.map(x => x.item);
}); });
// ================================================================= // =================================================================
// Sorted Items // Sorted Items
const itemsSorted = computed(() => { const itemsSorted = computed(() => {
const byLetter: { [key: string]: Array<GenericItem> } = {}; const byLetter: { [key: string]: Array<GenericItem> } = {};
if (!fuzzyItems.value) { if (!fuzzyItems.value) {
@ -266,28 +256,9 @@ export default defineNuxtComponent({
}); });
return byLetter; return byLetter;
});
function isTitle(str: number | string) {
return typeof str === "string" && str.length === 1;
}
return {
groupSlug,
isTitle,
dialogs,
confirmDelete,
openUpdateDialog,
updateOne,
updateTarget,
deleteOne,
deleteTarget,
Organizer,
presets,
itemsSorted,
searchString,
translationKey,
};
},
}); });
function isTitle(str: number | string) {
return typeof str === "string" && str.length === 1;
}
</script> </script>

6
frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
View file

@ -37,7 +37,7 @@
<RecipePageIngredientEditor v-if="isEditForm" v-model="recipe" /> <RecipePageIngredientEditor v-if="isEditForm" v-model="recipe" />
</div> </div>
<div> <div>
<RecipePageScale v-model:scale="scale" :recipe="recipe" /> <RecipePageScale v-model="scale" :recipe="recipe" />
</div> </div>
<!-- <!--
@ -96,7 +96,7 @@
<v-row style="height: 100%" no-gutters class="overflow-hidden"> <v-row style="height: 100%" no-gutters class="overflow-hidden">
<v-col cols="12" sm="5" class="overflow-y-auto pl-4 pr-3 py-2" style="height: 100%"> <v-col cols="12" sm="5" class="overflow-y-auto pl-4 pr-3 py-2" style="height: 100%">
<div class="d-flex align-center"> <div class="d-flex align-center">
<RecipePageScale v-model:scale="scale" :recipe="recipe" /> <RecipePageScale v-model="scale" :recipe="recipe" />
</div> </div>
<RecipePageIngredientToolsView <RecipePageIngredientToolsView
v-if="!isEditForm" v-if="!isEditForm"
@ -124,7 +124,7 @@
</v-sheet> </v-sheet>
<v-sheet v-show="isCookMode && hasLinkedIngredients"> <v-sheet v-show="isCookMode && hasLinkedIngredients">
<div class="mt-2 px-2 px-md-4"> <div class="mt-2 px-2 px-md-4">
<RecipePageScale v-model:scale="scale" :recipe="recipe" /> <RecipePageScale v-model="scale" :recipe="recipe" />
</div> </div>
<RecipePageInstructions <RecipePageInstructions
v-model="recipe.recipeInstructions" v-model="recipe.recipeInstructions"

92
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
View file

@ -26,7 +26,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useLoggedInState } from "~/composables/use-logged-in-state"; import { useLoggedInState } from "~/composables/use-logged-in-state";
import { useRecipePermissions } from "~/composables/recipes"; import { useRecipePermissions } from "~/composables/recipes";
import RecipePageInfoCard from "~/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue"; import RecipePageInfoCard from "~/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue";
@ -35,82 +35,48 @@ import { useStaticRoutes, useUserApi } from "~/composables/api";
import type { HouseholdSummary } from "~/lib/api/types/household"; import type { HouseholdSummary } from "~/lib/api/types/household";
import type { Recipe } from "~/lib/api/types/recipe"; import type { Recipe } from "~/lib/api/types/recipe";
import type { NoUndefinedField } from "~/lib/api/types/non-generated"; import type { NoUndefinedField } from "~/lib/api/types/non-generated";
import { usePageState, usePageUser, PageMode, EditorMode } from "~/composables/recipe-page/shared-state"; import { usePageState, usePageUser, PageMode } from "~/composables/recipe-page/shared-state";
export default defineNuxtComponent({ interface Props {
components: { recipe: NoUndefinedField<Recipe>;
RecipePageInfoCard, recipeScale?: number;
RecipeActionMenu, landscape?: boolean;
}, }
props: { const props = withDefaults(defineProps<Props>(), {
recipe: { recipeScale: 1,
type: Object as () => NoUndefinedField<Recipe>, landscape: false,
required: true, });
},
recipeScale: {
type: Number,
default: 1,
},
landscape: {
type: Boolean,
default: false,
},
},
emits: ["save", "delete"],
setup(props) {
const { $vuetify } = useNuxtApp();
const { recipeImage } = useStaticRoutes();
const { imageKey, pageMode, editMode, setMode, toggleEditMode, isEditMode } = usePageState(props.recipe.slug);
const { user } = usePageUser();
const { isOwnGroup } = useLoggedInState();
const recipeHousehold = ref<HouseholdSummary>(); defineEmits(["save", "delete"]);
if (user) {
const { recipeImage } = useStaticRoutes();
const { imageKey, setMode, toggleEditMode, isEditMode } = usePageState(props.recipe.slug);
const { user } = usePageUser();
const { isOwnGroup } = useLoggedInState();
const recipeHousehold = ref<HouseholdSummary>();
if (user) {
const userApi = useUserApi(); const userApi = useUserApi();
userApi.households.getOne(props.recipe.householdId).then(({ data }) => { userApi.households.getOne(props.recipe.householdId).then(({ data }) => {
recipeHousehold.value = data || undefined; recipeHousehold.value = data || undefined;
}); });
} }
const { canEditRecipe } = useRecipePermissions(props.recipe, recipeHousehold, user); const { canEditRecipe } = useRecipePermissions(props.recipe, recipeHousehold, user);
function printRecipe() { function printRecipe() {
window.print(); window.print();
} }
const hideImage = ref(false); const hideImage = ref(false);
const imageHeight = computed(() => {
return $vuetify.display.xs.value ? "200" : "400";
});
const recipeImageUrl = computed(() => { const recipeImageUrl = computed(() => {
return recipeImage(props.recipe.id, props.recipe.image, imageKey.value); return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
}); });
watch( watch(
() => recipeImageUrl.value, () => recipeImageUrl.value,
() => { () => {
hideImage.value = false; hideImage.value = false;
}, },
); );
return {
isOwnGroup,
setMode,
toggleEditMode,
recipeImage,
canEditRecipe,
imageKey,
user,
PageMode,
pageMode,
EditorMode,
editMode,
printRecipe,
imageHeight,
hideImage,
isEditMode,
recipeImageUrl,
};
},
});
</script> </script>

39
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
View file

@ -76,7 +76,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useLoggedInState } from "~/composables/use-logged-in-state"; import { useLoggedInState } from "~/composables/use-logged-in-state";
import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue"; import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
import RecipeLastMade from "~/components/Domain/Recipe/RecipeLastMade.vue"; import RecipeLastMade from "~/components/Domain/Recipe/RecipeLastMade.vue";
@ -86,34 +86,15 @@ import RecipePageInfoCardImage from "~/components/Domain/Recipe/RecipePage/Recip
import type { Recipe } from "~/lib/api/types/recipe"; import type { Recipe } from "~/lib/api/types/recipe";
import type { NoUndefinedField } from "~/lib/api/types/non-generated"; import type { NoUndefinedField } from "~/lib/api/types/non-generated";
export default defineNuxtComponent({ interface Props {
components: { recipe: NoUndefinedField<Recipe>;
RecipeRating, recipeScale?: number;
RecipeLastMade, landscape: boolean;
RecipeTimeCard, }
RecipeYield,
RecipePageInfoCardImage,
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
recipeScale: {
type: Number,
default: 1,
},
landscape: {
type: Boolean,
required: true,
},
},
setup() {
const { isOwnGroup } = useLoggedInState();
return { withDefaults(defineProps<Props>(), {
isOwnGroup, recipeScale: 1,
};
},
}); });
const { isOwnGroup } = useLoggedInState();
</script> </script>

59
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue
View file

@ -12,60 +12,47 @@
/> />
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useStaticRoutes, useUserApi } from "~/composables/api"; import { useStaticRoutes, useUserApi } from "~/composables/api";
import type { HouseholdSummary } from "~/lib/api/types/household"; import type { HouseholdSummary } from "~/lib/api/types/household";
import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state"; import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
import type { Recipe } from "~/lib/api/types/recipe"; import type { Recipe } from "~/lib/api/types/recipe";
import type { NoUndefinedField } from "~/lib/api/types/non-generated"; import type { NoUndefinedField } from "~/lib/api/types/non-generated";
export default defineNuxtComponent({ interface Props {
props: { recipe: NoUndefinedField<Recipe>;
recipe: { maxWidth?: string;
type: Object as () => NoUndefinedField<Recipe>, }
required: true, const props = withDefaults(defineProps<Props>(), {
}, maxWidth: undefined,
maxWidth: { });
type: String,
default: undefined,
},
},
setup(props) {
const { $vuetify } = useNuxtApp();
const { recipeImage } = useStaticRoutes();
const { imageKey } = usePageState(props.recipe.slug);
const { user } = usePageUser();
const recipeHousehold = ref<HouseholdSummary>(); const { $vuetify } = useNuxtApp();
if (user) { const { recipeImage } = useStaticRoutes();
const { imageKey } = usePageState(props.recipe.slug);
const { user } = usePageUser();
const recipeHousehold = ref<HouseholdSummary>();
if (user) {
const userApi = useUserApi(); const userApi = useUserApi();
userApi.households.getOne(props.recipe.householdId).then(({ data }) => { userApi.households.getOne(props.recipe.householdId).then(({ data }) => {
recipeHousehold.value = data || undefined; recipeHousehold.value = data || undefined;
}); });
} }
const hideImage = ref(false); const hideImage = ref(false);
const imageHeight = computed(() => { const imageHeight = computed(() => {
return $vuetify.display.xs.value ? "200" : "400"; return $vuetify.display.xs.value ? "200" : "400";
}); });
const recipeImageUrl = computed(() => { const recipeImageUrl = computed(() => {
return recipeImage(props.recipe.id, props.recipe.image, imageKey.value); return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
}); });
watch( watch(
() => recipeImageUrl.value, () => recipeImageUrl.value,
() => { () => {
hideImage.value = false; hideImage.value = false;
}, },
); );
return {
recipeImageUrl,
imageKey,
hideImage,
imageHeight,
};
},
});
</script> </script>

55
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
View file

@ -36,7 +36,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useLoggedInState } from "~/composables/use-logged-in-state"; import { useLoggedInState } from "~/composables/use-logged-in-state";
import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state"; import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
import { useToolStore } from "~/composables/store"; import { useToolStore } from "~/composables/store";
@ -48,32 +48,22 @@ interface RecipeToolWithOnHand extends RecipeTool {
onHand: boolean; onHand: boolean;
} }
export default defineNuxtComponent({ interface Props {
components: { recipe: NoUndefinedField<Recipe>;
RecipeIngredients, scale: number;
}, isCookMode?: boolean;
props: { }
recipe: { const props = withDefaults(defineProps<Props>(), {
type: Object as () => NoUndefinedField<Recipe>, isCookMode: false,
required: true, });
},
scale: {
type: Number,
required: true,
},
isCookMode: {
type: Boolean,
default: false,
},
},
setup(props) {
const { isOwnGroup } = useLoggedInState();
const toolStore = isOwnGroup.value ? useToolStore() : null; const { isOwnGroup } = useLoggedInState();
const { user } = usePageUser();
const { isEditMode } = usePageState(props.recipe.slug);
const recipeTools = computed(() => { const toolStore = isOwnGroup.value ? useToolStore() : null;
const { user } = usePageUser();
const { isEditMode } = usePageState(props.recipe.slug);
const recipeTools = computed(() => {
if (!(user.householdSlug && toolStore)) { if (!(user.householdSlug && toolStore)) {
return props.recipe.tools.map(tool => ({ ...tool, onHand: false }) as RecipeToolWithOnHand); return props.recipe.tools.map(tool => ({ ...tool, onHand: false }) as RecipeToolWithOnHand);
} }
@ -83,9 +73,9 @@ export default defineNuxtComponent({
return { ...tool, onHand } as RecipeToolWithOnHand; return { ...tool, onHand } as RecipeToolWithOnHand;
}); });
} }
}); });
function updateTool(index: number) { function updateTool(index: number) {
if (user.id && user.householdSlug && toolStore) { if (user.id && user.householdSlug && toolStore) {
const tool = recipeTools.value[index]; const tool = recipeTools.value[index];
if (tool.onHand && !tool.householdsWithTool?.includes(user.householdSlug)) { if (tool.onHand && !tool.householdsWithTool?.includes(user.householdSlug)) {
@ -105,14 +95,5 @@ export default defineNuxtComponent({
else { else {
console.log("no user, skipping server update"); console.log("no user, skipping server update");
} }
} }
return {
toolStore,
recipeTools,
isEditMode,
updateTool,
};
},
});
</script> </script>

45
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
View file

@ -2,55 +2,26 @@
<div class="d-flex justify-space-between align-center pt-2 pb-3"> <div class="d-flex justify-space-between align-center pt-2 pb-3">
<RecipeScaleEditButton <RecipeScaleEditButton
v-if="!isEditMode" v-if="!isEditMode"
v-model.number="scaleValue" v-model.number="scale"
:recipe-servings="recipeServings" :recipe-servings="recipeServings"
:edit-scale="!recipe.settings.disableAmount && !isEditMode" :edit-scale="!recipe.settings.disableAmount && !isEditMode"
/> />
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeScaleEditButton from "~/components/Domain/Recipe/RecipeScaleEditButton.vue"; import RecipeScaleEditButton from "~/components/Domain/Recipe/RecipeScaleEditButton.vue";
import type { NoUndefinedField } from "~/lib/api/types/non-generated"; import type { NoUndefinedField } from "~/lib/api/types/non-generated";
import type { Recipe } from "~/lib/api/types/recipe"; import type { Recipe } from "~/lib/api/types/recipe";
import { usePageState } from "~/composables/recipe-page/shared-state"; import { usePageState } from "~/composables/recipe-page/shared-state";
export default defineNuxtComponent({ const props = defineProps<{ recipe: NoUndefinedField<Recipe> }>();
components: {
RecipeScaleEditButton,
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
scale: {
type: Number,
default: 1,
},
},
emits: ["update:scale"],
setup(props, { emit }) {
const { isEditMode } = usePageState(props.recipe.slug);
const recipeServings = computed<number>(() => { const scale = defineModel<number>({ default: 1 });
const { isEditMode } = usePageState(props.recipe.slug);
const recipeServings = computed<number>(() => {
return props.recipe.recipeServings || props.recipe.recipeYieldQuantity || 1; return props.recipe.recipeServings || props.recipe.recipeYieldQuantity || 1;
});
const scaleValue = computed<number>({
get() {
return props.scale;
},
set(val) {
emit("update:scale", val);
},
});
return {
recipeServings,
scaleValue,
isEditMode,
};
},
}); });
</script> </script>

23
frontend/components/Domain/Recipe/RecipePrintContainer.vue
View file

@ -8,24 +8,17 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue"; import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
import type { Recipe } from "~/lib/api/types/recipe"; import type { Recipe } from "~/lib/api/types/recipe";
export default defineNuxtComponent({ interface Props {
components: { recipe: Recipe;
RecipePrintView, scale?: number;
}, }
props: {
recipe: { withDefaults(defineProps<Props>(), {
type: Object as () => Recipe, scale: 1,
required: true,
},
scale: {
type: Number,
default: 1,
},
},
}); });
</script> </script>

104
frontend/components/Domain/Recipe/RecipePrintView.vue
View file

@ -166,7 +166,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue"; import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
import { useStaticRoutes } from "~/composables/api"; import { useStaticRoutes } from "~/composables/api";
@ -188,39 +188,29 @@ type InstructionSection = {
instructions: RecipeStep[]; instructions: RecipeStep[];
}; };
export default defineNuxtComponent({ interface Props {
components: { recipe: NoUndefinedField<Recipe>;
RecipeTimeCard, scale?: number;
}, dense?: boolean;
props: { }
recipe: { const props = withDefaults(defineProps<Props>(), {
type: Object as () => NoUndefinedField<Recipe>, scale: 1,
required: true, dense: false,
}, });
scale: {
type: Number,
default: 1,
},
dense: {
type: Boolean,
default: false,
},
},
setup(props) {
const i18n = useI18n();
const preferences = useUserPrintPreferences();
const { recipeImage } = useStaticRoutes();
const { imageKey } = usePageState(props.recipe.slug);
const { labels } = useNutritionLabels();
function sanitizeHTML(rawHtml: string) { const i18n = useI18n();
const preferences = useUserPrintPreferences();
const { recipeImage } = useStaticRoutes();
const { imageKey } = usePageState(props.recipe.slug);
const { labels } = useNutritionLabels();
function sanitizeHTML(rawHtml: string) {
return DOMPurify.sanitize(rawHtml, { return DOMPurify.sanitize(rawHtml, {
USE_PROFILES: { html: true }, USE_PROFILES: { html: true },
ALLOWED_TAGS: ["strong", "sup"], ALLOWED_TAGS: ["strong", "sup"],
}); });
} }
const servingsDisplay = computed(() => {
const servingsDisplay = computed(() => {
const { scaledAmountDisplay } = useScaledAmount(props.recipe.recipeYieldQuantity, props.scale); const { scaledAmountDisplay } = useScaledAmount(props.recipe.recipeYieldQuantity, props.scale);
return scaledAmountDisplay || props.recipe.recipeYield return scaledAmountDisplay || props.recipe.recipeYield
? i18n.t("recipe.yields-amount-with-text", { ? i18n.t("recipe.yields-amount-with-text", {
@ -228,28 +218,28 @@ export default defineNuxtComponent({
text: props.recipe.recipeYield, text: props.recipe.recipeYield,
}) as string }) as string
: ""; : "";
}); });
const yieldDisplay = computed(() => { const yieldDisplay = computed(() => {
const { scaledAmountDisplay } = useScaledAmount(props.recipe.recipeServings, props.scale); const { scaledAmountDisplay } = useScaledAmount(props.recipe.recipeServings, props.scale);
return scaledAmountDisplay ? i18n.t("recipe.serves-amount", { amount: scaledAmountDisplay }) as string : ""; return scaledAmountDisplay ? i18n.t("recipe.serves-amount", { amount: scaledAmountDisplay }) as string : "";
}); });
const recipeYield = computed(() => { const recipeYield = computed(() => {
if (servingsDisplay.value && yieldDisplay.value) { if (servingsDisplay.value && yieldDisplay.value) {
return sanitizeHTML(`${yieldDisplay.value}; ${servingsDisplay.value}`); return sanitizeHTML(`${yieldDisplay.value}; ${servingsDisplay.value}`);
} }
else { else {
return sanitizeHTML(yieldDisplay.value || servingsDisplay.value); return sanitizeHTML(yieldDisplay.value || servingsDisplay.value);
} }
}); });
const recipeImageUrl = computed(() => { const recipeImageUrl = computed(() => {
return recipeImage(props.recipe.id, props.recipe.image, imageKey.value); return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
}); });
// Group ingredients by section so we can style them independently // Group ingredients by section so we can style them independently
const ingredientSections = computed<IngredientSection[]>(() => { const ingredientSections = computed<IngredientSection[]>(() => {
if (!props.recipe.recipeIngredient) { if (!props.recipe.recipeIngredient) {
return []; return [];
} }
@ -279,10 +269,10 @@ export default defineNuxtComponent({
sections[sections.length - 1].ingredients.push(ingredient); sections[sections.length - 1].ingredients.push(ingredient);
return sections; return sections;
}, [] as IngredientSection[]); }, [] as IngredientSection[]);
}); });
// Group instructions by section so we can style them independently // Group instructions by section so we can style them independently
const instructionSections = computed<InstructionSection[]>(() => { const instructionSections = computed<InstructionSection[]>(() => {
if (!props.recipe.recipeInstructions) { if (!props.recipe.recipeInstructions) {
return []; return [];
} }
@ -324,31 +314,15 @@ export default defineNuxtComponent({
sections[sections.length - 1].instructions.push(step); sections[sections.length - 1].instructions.push(step);
return sections; return sections;
}, [] as InstructionSection[]); }, [] as InstructionSection[]);
});
const hasNotes = computed(() => {
return props.recipe.notes && props.recipe.notes.length > 0;
});
function parseText(ingredient: RecipeIngredient) {
return parseIngredientText(ingredient, props.recipe.settings?.disableAmount || false, props.scale);
}
return {
labels,
hasNotes,
imageKey,
ImagePosition,
parseText,
parseIngredientText,
preferences,
recipeImageUrl,
recipeYield,
ingredientSections,
instructionSections,
};
},
}); });
const hasNotes = computed(() => {
return props.recipe.notes && props.recipe.notes.length > 0;
});
function parseText(ingredient: RecipeIngredient) {
return parseIngredientText(ingredient, props.recipe.settings?.disableAmount || false, props.scale);
}
</script> </script>
<style scoped> <style scoped>

80
frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
View file

@ -10,7 +10,7 @@
nudge-top="6" nudge-top="6"
:close-on-content-click="false" :close-on-content-click="false"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-tooltip <v-tooltip
v-if="canEditScale" v-if="canEditScale"
size="small" size="small"
@ -23,7 +23,7 @@
dark dark
color="secondary-darken-1" color="secondary-darken-1"
size="small" size="small"
v-bind="{ ...props, ...tooltipProps }" v-bind="{ ...activatorProps, ...tooltipProps }"
:style="{ cursor: canEditScale ? '' : 'default' }" :style="{ cursor: canEditScale ? '' : 'default' }"
> >
<v-icon <v-icon
@ -45,7 +45,7 @@
dark dark
color="secondary-darken-1" color="secondary-darken-1"
size="small" size="small"
v-bind="props" v-bind="activatorProps"
:style="{ cursor: canEditScale ? '' : 'default' }" :style="{ cursor: canEditScale ? '' : 'default' }"
> >
<v-icon <v-icon
@ -77,9 +77,9 @@
location="end" location="end"
color="secondary-darken-1" color="secondary-darken-1"
> >
<template #activator="{ props }"> <template #activator="{ props: resetTooltipProps }">
<v-btn <v-btn
v-bind="props" v-bind="resetTooltipProps"
icon icon
flat flat
class="mx-1" class="mx-1"
@ -122,39 +122,25 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useScaledAmount } from "~/composables/recipes/use-scaled-amount"; import { useScaledAmount } from "~/composables/recipes/use-scaled-amount";
export default defineNuxtComponent({ interface Props {
props: { recipeServings?: number;
modelValue: { editScale?: boolean;
type: Number, }
required: true, const props = withDefaults(defineProps<Props>(), {
}, recipeServings: 0,
recipeServings: { editScale: false,
type: Number, });
default: 0,
},
editScale: {
type: Boolean,
default: false,
},
},
emits: ["update:modelValue"],
setup(props, { emit }) {
const i18n = useI18n();
const menu = ref<boolean>(false);
const canEditScale = computed(() => props.editScale && props.recipeServings > 0);
const scale = computed({ const scale = defineModel<number>({ required: true });
get: () => props.modelValue,
set: (value) => {
const newScaleNumber = parseFloat(`${value}`);
emit("update:modelValue", isNaN(newScaleNumber) ? 0 : newScaleNumber);
},
});
function recalculateScale(newYield: number) { const i18n = useI18n();
const menu = ref<boolean>(false);
const canEditScale = computed(() => props.editScale && props.recipeServings > 0);
function recalculateScale(newYield: number) {
if (isNaN(newYield) || newYield <= 0) { if (isNaN(newYield) || newYield <= 0) {
return; return;
} }
@ -165,33 +151,21 @@ export default defineNuxtComponent({
else { else {
scale.value = newYield / props.recipeServings; scale.value = newYield / props.recipeServings;
} }
} }
const recipeYieldAmount = computed(() => { const recipeYieldAmount = computed(() => {
return useScaledAmount(props.recipeServings, scale.value); return useScaledAmount(props.recipeServings, scale.value);
}); });
const yieldQuantity = computed(() => recipeYieldAmount.value.scaledAmount); const yieldQuantity = computed(() => recipeYieldAmount.value.scaledAmount);
const yieldDisplay = computed(() => { const yieldDisplay = computed(() => {
return yieldQuantity.value return yieldQuantity.value
? i18n.t( ? i18n.t(
"recipe.serves-amount", { amount: recipeYieldAmount.value.scaledAmountDisplay }, "recipe.serves-amount", { amount: recipeYieldAmount.value.scaledAmountDisplay },
) as string ) as string
: ""; : "";
}); });
const disableDecrement = computed(() => { const disableDecrement = computed(() => {
return yieldQuantity.value <= 1; return yieldQuantity.value <= 1;
});
return {
menu,
canEditScale,
scale,
recalculateScale,
yieldDisplay,
yieldQuantity,
disableDecrement,
};
},
}); });
</script> </script>

54
frontend/components/Domain/Recipe/RecipeSearchFilterSelector.vue
View file

@ -1,54 +0,0 @@
<template>
<div class="d-flex justify-center align-center">
<v-btn-toggle v-model="selected" tile group color="primary accent-3" mandatory="force" @change="emitMulti">
<v-btn size="small" :value="false">
{{ $t("search.include") }}
</v-btn>
<v-btn size="small" :value="true">
{{ $t("search.exclude") }}
</v-btn>
</v-btn-toggle>
<v-btn-toggle v-model="match" tile group color="primary accent-3" mandatory="force" @change="emitMulti">
<v-btn size="small" :value="false" class="text-uppercase">
{{ $t("search.and") }}
</v-btn>
<v-btn size="small" :value="true" class="text-uppercase">
{{ $t("search.or") }}
</v-btn>
</v-btn-toggle>
</div>
</template>
<script lang="ts">
type SelectionValue = "include" | "exclude" | "any";
export default defineNuxtComponent({
props: {
modelValue: {
type: String as () => SelectionValue,
default: "include",
},
},
emits: ["update:modelValue", "update"],
data() {
return {
selected: false,
match: false,
};
},
methods: {
emitChange() {
this.$emit("update:modelValue", this.selected);
},
emitMulti() {
const updateData = {
exclude: this.selected,
matchAny: this.match,
};
this.$emit("update", updateData);
},
},
});
</script>
<style lang="scss" scoped></style>

75
frontend/components/Domain/Recipe/RecipeSuggestion.vue
View file

@ -14,9 +14,7 @@
<div v-for="(organizer, idx) in missingOrganizers" :key="idx"> <div v-for="(organizer, idx) in missingOrganizers" :key="idx">
<v-col v-if="organizer.show" cols="12"> <v-col v-if="organizer.show" cols="12">
<div class="d-flex flex-row flex-wrap align-center pt-2"> <div class="d-flex flex-row flex-wrap align-center pt-2">
<v-icon class="ma-0 pa-0"> <v-icon class="ma-0 pa-0" />
{{ organizer.icon }}
</v-icon>
<v-card-text class="mr-0 my-0 pl-1 py-0" style="width: min-content"> <v-card-text class="mr-0 my-0 pl-1 py-0" style="width: min-content">
{{ $t("recipe-finder.missing") }}: {{ $t("recipe-finder.missing") }}:
</v-card-text> </v-card-text>
@ -41,7 +39,7 @@
</v-container> </v-container>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeCardMobile from "./RecipeCardMobile.vue"; import RecipeCardMobile from "./RecipeCardMobile.vue";
import type { IngredientFood, RecipeSummary, RecipeTool } from "~/lib/api/types/recipe"; import type { IngredientFood, RecipeSummary, RecipeTool } from "~/lib/api/types/recipe";
@ -51,29 +49,27 @@ interface Organizer {
selected: boolean; selected: boolean;
} }
export default defineNuxtComponent({ interface Props {
components: { RecipeCardMobile }, recipe: RecipeSummary;
props: { missingFoods?: IngredientFood[] | null;
recipe: { missingTools?: RecipeTool[] | null;
type: Object as () => RecipeSummary, disableCheckbox?: boolean;
required: true, }
}, const props = withDefaults(defineProps<Props>(), {
missingFoods: { missingFoods: null,
type: Array as () => IngredientFood[] | null, missingTools: null,
default: null, disableCheckbox: false,
}, });
missingTools: {
type: Array as () => RecipeTool[] | null, const emit = defineEmits<{
default: null, "add-food": [food: IngredientFood];
}, "remove-food": [food: IngredientFood];
disableCheckbox: { "add-tool": [tool: RecipeTool];
type: Boolean, "remove-tool": [tool: RecipeTool];
default: false, }>();
},
}, const { $globals } = useNuxtApp();
setup(props, context) { const missingOrganizers = computed(() => [
const { $globals } = useNuxtApp();
const missingOrganizers = computed(() => [
{ {
type: "food", type: "food",
show: props.missingFoods?.length, show: props.missingFoods?.length,
@ -96,26 +92,29 @@ export default defineNuxtComponent({
: [], : [],
getLabel: (item: RecipeTool) => item.name, getLabel: (item: RecipeTool) => item.name,
}, },
]); ]);
function handleCheckbox(organizer: Organizer) { function handleCheckbox(organizer: Organizer) {
if (props.disableCheckbox) { if (props.disableCheckbox) {
return; return;
} }
organizer.selected = !organizer.selected; organizer.selected = !organizer.selected;
if (organizer.selected) { if (organizer.selected) {
context.emit(`add-${organizer.type}`, organizer.item); if (organizer.type === "food") {
emit("add-food", organizer.item as IngredientFood);
} }
else { else {
context.emit(`remove-${organizer.type}`, organizer.item); emit("add-tool", organizer.item as RecipeTool);
} }
} }
else {
return { if (organizer.type === "food") {
missingOrganizers, emit("remove-food", organizer.item as IngredientFood);
handleCheckbox, }
}; else {
}, emit("remove-tool", organizer.item as RecipeTool);
}); }
}
}
</script> </script>

77
frontend/components/Domain/Recipe/RecipeTimeCard.vue
View file

@ -1,4 +1,4 @@
<template v-if="showCards"> <template v-if="_showCards">
<div class="text-center"> <div class="text-center">
<!-- Total Time --> <!-- Total Time -->
<div <div
@ -78,65 +78,46 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
export default defineNuxtComponent({ interface Props {
props: { prepTime?: string | null;
prepTime: { totalTime?: string | null;
type: String, performTime?: string | null;
default: null, color?: string;
}, small?: boolean;
totalTime: { }
type: String, const props = withDefaults(defineProps<Props>(), {
default: null, prepTime: null,
}, totalTime: null,
performTime: { performTime: null,
type: String, color: "accent custom-transparent",
default: null, small: false,
}, });
color: {
type: String,
default: "accent custom-transparent",
},
small: {
type: Boolean,
default: false,
},
},
setup(props) {
const i18n = useI18n();
function isEmpty(str: string | null) { const i18n = useI18n();
function isEmpty(str: string | null) {
return !str || str.length === 0; return !str || str.length === 0;
} }
const showCards = computed(() => { const _showCards = computed(() => {
return [props.prepTime, props.totalTime, props.performTime].some(x => !isEmpty(x)); return [props.prepTime, props.totalTime, props.performTime].some(x => !isEmpty(x));
}); });
const validateTotalTime = computed(() => { const validateTotalTime = computed(() => {
return !isEmpty(props.totalTime) ? { name: i18n.t("recipe.total-time"), value: props.totalTime } : null; return !isEmpty(props.totalTime) ? { name: i18n.t("recipe.total-time"), value: props.totalTime } : null;
}); });
const validatePrepTime = computed(() => { const validatePrepTime = computed(() => {
return !isEmpty(props.prepTime) ? { name: i18n.t("recipe.prep-time"), value: props.prepTime } : null; return !isEmpty(props.prepTime) ? { name: i18n.t("recipe.prep-time"), value: props.prepTime } : null;
}); });
const validatePerformTime = computed(() => { const validatePerformTime = computed(() => {
return !isEmpty(props.performTime) ? { name: i18n.t("recipe.perform-time"), value: props.performTime } : null; return !isEmpty(props.performTime) ? { name: i18n.t("recipe.perform-time"), value: props.performTime } : null;
}); });
const fontSize = computed(() => { const fontSize = computed(() => {
return props.small ? { fontSize: "smaller" } : { fontSize: "larger" }; return props.small ? { fontSize: "smaller" } : { fontSize: "larger" };
});
return {
showCards,
validateTotalTime,
validatePrepTime,
validatePerformTime,
fontSize,
};
},
}); });
</script> </script>

154
frontend/components/Domain/Recipe/RecipeTimeline.vue
View file

@ -11,7 +11,7 @@
nudge-bottom="3" nudge-bottom="3"
:close-on-content-click="false" :close-on-content-click="false"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-badge <v-badge
:content="filterBadgeCount" :content="filterBadgeCount"
:model-value="filterBadgeCount > 0" :model-value="filterBadgeCount > 0"
@ -21,7 +21,7 @@
class="rounded-circle" class="rounded-circle"
size="small" size="small"
color="info" color="info"
v-bind="props" v-bind="activatorProps"
icon icon
> >
<v-icon> {{ $globals.icons.filter }} </v-icon> <v-icon> {{ $globals.icons.filter }} </v-icon>
@ -105,7 +105,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useThrottleFn, whenever } from "@vueuse/core"; import { useThrottleFn, whenever } from "@vueuse/core";
import RecipeTimelineItem from "./RecipeTimelineItem.vue"; import RecipeTimelineItem from "./RecipeTimelineItem.vue";
import { useTimelinePreferences } from "~/composables/use-users/preferences"; import { useTimelinePreferences } from "~/composables/use-users/preferences";
@ -115,89 +115,61 @@ import { alert } from "~/composables/use-toast";
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
import type { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate, TimelineEventType } from "~/lib/api/types/recipe"; import type { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate, TimelineEventType } from "~/lib/api/types/recipe";
export default defineNuxtComponent({ interface Props {
components: { RecipeTimelineItem }, modelValue?: boolean;
queryFilter: string;
maxHeight?: number | string;
showRecipeCards?: boolean;
}
props: { const props = withDefaults(defineProps<Props>(), {
modelValue: { modelValue: false,
type: Boolean, maxHeight: undefined,
default: false, showRecipeCards: false,
}, });
queryFilter: {
type: String,
required: true,
},
maxHeight: {
type: [Number, String],
default: undefined,
},
showRecipeCards: {
type: Boolean,
default: false,
},
},
setup(props) { const api = useUserApi();
const api = useUserApi(); const i18n = useI18n();
const i18n = useI18n(); const preferences = useTimelinePreferences();
const preferences = useTimelinePreferences(); const { eventTypeOptions } = useTimelineEventTypes();
const { eventTypeOptions } = useTimelineEventTypes(); const loading = ref(true);
const loading = ref(true); const ready = ref(false);
const ready = ref(false);
const page = ref(1); const page = ref(1);
const perPage = 32; const perPage = 32;
const hasMore = ref(true); const hasMore = ref(true);
const timelineEvents = ref([] as RecipeTimelineEventOut[]); const timelineEvents = ref([] as RecipeTimelineEventOut[]);
const recipes = new Map<string, Recipe>(); const recipes = new Map<string, Recipe>();
const filterBadgeCount = computed(() => eventTypeOptions.value.length - preferences.value.types.length); const filterBadgeCount = computed(() => eventTypeOptions.value.length - preferences.value.types.length);
const eventTypeFilterState = computed(() => { const eventTypeFilterState = computed(() => {
return eventTypeOptions.value.map((option) => { return eventTypeOptions.value.map((option) => {
return { return {
...option, ...option,
checked: preferences.value.types.includes(option.value), checked: preferences.value.types.includes(option.value),
}; };
}); });
}); });
const screenBuffer = 4;
interface ScrollEvent extends Event { whenever(
target: HTMLInputElement;
}
const screenBuffer = 4;
const onScroll = (event: ScrollEvent) => {
if (!event.target) {
return;
}
const { scrollTop, offsetHeight, scrollHeight } = event.target;
// trigger when the user is getting close to the bottom
const bottomOfElement = scrollTop + offsetHeight >= scrollHeight - (offsetHeight * screenBuffer);
if (bottomOfElement) {
infiniteScroll();
}
};
whenever(
() => props.modelValue, () => props.modelValue,
() => { () => {
initializeTimelineEvents(); initializeTimelineEvents();
}, },
); );
// Preferences // Preferences
function reverseSort() { function reverseSort() {
if (loading.value) { if (loading.value) {
return; return;
} }
preferences.value.orderDirection = preferences.value.orderDirection === "asc" ? "desc" : "asc"; preferences.value.orderDirection = preferences.value.orderDirection === "asc" ? "desc" : "asc";
initializeTimelineEvents(); initializeTimelineEvents();
} }
function toggleEventTypeOption(option: TimelineEventType) { function toggleEventTypeOption(option: TimelineEventType) {
if (loading.value) { if (loading.value) {
return; return;
} }
@ -211,10 +183,10 @@ export default defineNuxtComponent({
} }
initializeTimelineEvents(); initializeTimelineEvents();
} }
// Timeline Actions // Timeline Actions
async function updateTimelineEvent(index: number) { async function updateTimelineEvent(index: number) {
const event = timelineEvents.value[index]; const event = timelineEvents.value[index];
const payload: RecipeTimelineEventUpdate = { const payload: RecipeTimelineEventUpdate = {
subject: event.subject, subject: event.subject,
@ -229,9 +201,9 @@ export default defineNuxtComponent({
} }
alert.success(i18n.t("events.event-updated") as string); alert.success(i18n.t("events.event-updated") as string);
}; }
async function deleteTimelineEvent(index: number) { async function deleteTimelineEvent(index: number) {
const { response } = await api.recipes.deleteTimelineEvent(timelineEvents.value[index].id); const { response } = await api.recipes.deleteTimelineEvent(timelineEvents.value[index].id);
if (response?.status !== 200) { if (response?.status !== 200) {
alert.error(i18n.t("events.something-went-wrong") as string); alert.error(i18n.t("events.something-went-wrong") as string);
@ -240,15 +212,15 @@ export default defineNuxtComponent({
timelineEvents.value.splice(index, 1); timelineEvents.value.splice(index, 1);
alert.success(i18n.t("events.event-deleted") as string); alert.success(i18n.t("events.event-deleted") as string);
}; }
async function getRecipes(recipeIds: string[]): Promise<Recipe[]> { async function getRecipes(recipeIds: string[]): Promise<Recipe[]> {
const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]"; const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf }); const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf });
return data?.items || []; return data?.items || [];
}; }
async function updateRecipes(events: RecipeTimelineEventOut[]) { async function updateRecipes(events: RecipeTimelineEventOut[]) {
const recipeIds: string[] = []; const recipeIds: string[] = [];
events.forEach((event) => { events.forEach((event) => {
if (recipeIds.includes(event.recipeId) || recipes.has(event.recipeId)) { if (recipeIds.includes(event.recipeId) || recipes.has(event.recipeId)) {
@ -265,9 +237,9 @@ export default defineNuxtComponent({
} }
recipes.set(result.id, result); recipes.set(result.id, result);
}); });
} }
async function scrollTimelineEvents() { async function scrollTimelineEvents() {
const orderBy = "timestamp"; const orderBy = "timestamp";
const orderDirection = preferences.value.orderDirection === "asc" ? "asc" : "desc"; const orderDirection = preferences.value.orderDirection === "asc" ? "asc" : "desc";
@ -295,9 +267,9 @@ export default defineNuxtComponent({
// this is set last so Vue knows to re-render // this is set last so Vue knows to re-render
timelineEvents.value.push(...events); timelineEvents.value.push(...events);
}; }
async function initializeTimelineEvents() { async function initializeTimelineEvents() {
loading.value = true; loading.value = true;
ready.value = false; ready.value = false;
@ -308,9 +280,9 @@ export default defineNuxtComponent({
ready.value = true; ready.value = true;
loading.value = false; loading.value = false;
} }
const infiniteScroll = useThrottleFn(() => { const infiniteScroll = useThrottleFn(() => {
useAsyncData(useAsyncKey(), async () => { useAsyncData(useAsyncKey(), async () => {
if (!hasMore.value || loading.value) { if (!hasMore.value || loading.value) {
return; return;
@ -320,12 +292,12 @@ export default defineNuxtComponent({
await scrollTimelineEvents(); await scrollTimelineEvents();
loading.value = false; loading.value = false;
}); });
}, 500); }, 500);
// preload events // preload events
initializeTimelineEvents(); initializeTimelineEvents();
onMounted( onMounted(
() => { () => {
document.onscroll = () => { document.onscroll = () => {
// if the inner element is scrollable, let its scroll event handle the infiniteScroll // if the inner element is scrollable, let its scroll event handle the infiniteScroll
@ -346,21 +318,5 @@ export default defineNuxtComponent({
} }
}; };
}, },
); );
return {
deleteTimelineEvent,
filterBadgeCount,
loading,
onScroll,
preferences,
eventTypeFilterState,
recipes,
reverseSort,
toggleEventTypeOption,
timelineEvents,
updateTimelineEvent,
};
},
});
</script> </script>

49
frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
View file

@ -4,7 +4,7 @@
nudge-right="50" nudge-right="50"
:color="buttonStyle ? 'info' : 'secondary'" :color="buttonStyle ? 'info' : 'secondary'"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-btn <v-btn
icon icon
:variant="buttonStyle ? 'flat' : undefined" :variant="buttonStyle ? 'flat' : undefined"
@ -12,7 +12,7 @@
size="small" size="small"
:color="buttonStyle ? 'info' : 'secondary'" :color="buttonStyle ? 'info' : 'secondary'"
:fab="buttonStyle" :fab="buttonStyle"
v-bind="{ ...props, ...$attrs }" v-bind="{ ...activatorProps, ...$attrs }"
@click.prevent="toggleTimeline" @click.prevent="toggleTimeline"
> >
<v-icon <v-icon
@ -39,36 +39,29 @@
</v-tooltip> </v-tooltip>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeTimeline from "./RecipeTimeline.vue"; import RecipeTimeline from "./RecipeTimeline.vue";
export default defineNuxtComponent({ interface Props {
components: { RecipeTimeline }, buttonStyle?: boolean;
slug?: string;
recipeName?: string;
}
const props = withDefaults(defineProps<Props>(), {
buttonStyle: false,
slug: "",
recipeName: "",
});
props: { const i18n = useI18n();
buttonStyle: { const { smAndDown } = useDisplay();
type: Boolean, const showTimeline = ref(false);
default: false,
},
slug: {
type: String,
default: "",
},
recipeName: {
type: String,
default: "",
},
},
setup(props) { function toggleTimeline() {
const i18n = useI18n();
const { smAndDown } = useDisplay();
const showTimeline = ref(false);
function toggleTimeline() {
showTimeline.value = !showTimeline.value; showTimeline.value = !showTimeline.value;
} }
const timelineAttrs = computed(() => { const timelineAttrs = computed(() => {
let title = i18n.t("recipe.timeline"); let title = i18n.t("recipe.timeline");
if (smAndDown.value) { if (smAndDown.value) {
title += ` – ${props.recipeName}`; title += ` – ${props.recipeName}`;
@ -78,9 +71,5 @@ export default defineNuxtComponent({
title, title,
queryFilter: `recipe.slug="${props.slug}"`, queryFilter: `recipe.slug="${props.slug}"`,
}; };
});
return { showTimeline, timelineAttrs, toggleTimeline };
},
}); });
</script> </script>

77
frontend/components/Domain/Recipe/RecipeTimelineItem.vue
View file

@ -91,7 +91,7 @@
</v-timeline-item> </v-timeline-item>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeCardMobile from "./RecipeCardMobile.vue"; import RecipeCardMobile from "./RecipeCardMobile.vue";
import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue"; import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
import { useStaticRoutes } from "~/composables/api"; import { useStaticRoutes } from "~/composables/api";
@ -100,41 +100,37 @@ import type { Recipe, RecipeTimelineEventOut } from "~/lib/api/types/recipe";
import UserAvatar from "~/components/Domain/User/UserAvatar.vue"; import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
import SafeMarkdown from "~/components/global/SafeMarkdown.vue"; import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
export default defineNuxtComponent({ interface Props {
components: { RecipeCardMobile, RecipeTimelineContextMenu, UserAvatar, SafeMarkdown }, event: RecipeTimelineEventOut;
recipe?: Recipe;
showRecipeCards?: boolean;
}
props: { const props = withDefaults(defineProps<Props>(), {
event: { recipe: undefined,
type: Object as () => RecipeTimelineEventOut, showRecipeCards: false,
required: true, });
},
recipe: {
type: Object as () => Recipe,
default: undefined,
},
showRecipeCards: {
type: Boolean,
default: false,
},
},
emits: ["selected", "update", "delete"],
setup(props) { defineEmits<{
const { $vuetify, $globals } = useNuxtApp(); selected: [];
const { recipeTimelineEventImage } = useStaticRoutes(); update: [];
const { eventTypeOptions } = useTimelineEventTypes(); delete: [];
const timelineEvents = ref([] as RecipeTimelineEventOut[]); }>();
const { user: currentUser } = useMealieAuth(); const { $vuetify, $globals } = useNuxtApp();
const { recipeTimelineEventImage } = useStaticRoutes();
const { eventTypeOptions } = useTimelineEventTypes();
const route = useRoute(); const { user: currentUser } = useMealieAuth();
const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || "");
const useMobileFormat = computed(() => { const route = useRoute();
const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || "");
const useMobileFormat = computed(() => {
return $vuetify.display.smAndDown.value; return $vuetify.display.smAndDown.value;
}); });
const attrs = computed(() => { const attrs = computed(() => {
if (useMobileFormat.value) { if (useMobileFormat.value) {
return { return {
class: "px-0", class: "px-0",
@ -163,33 +159,20 @@ export default defineNuxtComponent({
}, },
}; };
} }
}); });
const icon = computed(() => { const icon = computed(() => {
const option = eventTypeOptions.value.find(option => option.value === props.event.eventType); const option = eventTypeOptions.value.find(option => option.value === props.event.eventType);
return option ? option.icon : $globals.icons.informationVariant; return option ? option.icon : $globals.icons.informationVariant;
}); });
const hideImage = ref(false); const hideImage = ref(false);
const eventImageUrl = computed<string>(() => { const eventImageUrl = computed<string>(() => {
if (props.event.image !== "has image") { if (props.event.image !== "has image") {
return ""; return "";
} }
return recipeTimelineEventImage(props.event.recipeId, props.event.id); return recipeTimelineEventImage(props.event.recipeId, props.event.id);
});
return {
attrs,
groupSlug,
icon,
eventImageUrl,
hideImage,
timelineEvents,
useMobileFormat,
currentUser,
};
},
}); });
</script> </script>

47
frontend/components/Domain/Recipe/RecipeYield.vue
View file

@ -24,38 +24,31 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import { useScaledAmount } from "~/composables/recipes/use-scaled-amount"; import { useScaledAmount } from "~/composables/recipes/use-scaled-amount";
export default defineNuxtComponent({ interface Props {
props: { yieldQuantity?: number;
yieldQuantity: { yieldText?: string;
type: Number, scale?: number;
default: 0, color?: string;
}, }
yieldText: { const props = withDefaults(defineProps<Props>(), {
type: String, yieldQuantity: 0,
default: "", yieldText: "",
}, scale: 1,
scale: { color: "accent custom-transparent",
type: Number, });
default: 1,
}, function sanitizeHTML(rawHtml: string) {
color: {
type: String,
default: "accent custom-transparent",
},
},
setup(props) {
function sanitizeHTML(rawHtml: string) {
return DOMPurify.sanitize(rawHtml, { return DOMPurify.sanitize(rawHtml, {
USE_PROFILES: { html: true }, USE_PROFILES: { html: true },
ALLOWED_TAGS: ["strong", "sup"], ALLOWED_TAGS: ["strong", "sup"],
}); });
} }
const yieldDisplay = computed<string>(() => { const yieldDisplay = computed<string>(() => {
const components: string[] = []; const components: string[] = [];
const { scaledAmountDisplay } = useScaledAmount(props.yieldQuantity, props.scale); const { scaledAmountDisplay } = useScaledAmount(props.yieldQuantity, props.scale);
@ -69,11 +62,5 @@ export default defineNuxtComponent({
} }
return sanitizeHTML(components.join(" ")); return sanitizeHTML(components.join(" "));
});
return {
yieldDisplay,
};
},
}); });
</script> </script>

1
frontend/components/Domain/SearchFilter.vue
View file

@ -40,7 +40,6 @@
v-if="requireAll != undefined" v-if="requireAll != undefined"
v-model="requireAllValue" v-model="requireAllValue"
density="compact" density="compact"
size="small"
hide-details hide-details
class="my-auto" class="my-auto"
color="primary" color="primary"

2
frontend/pages/group/data/units.vue
View file

@ -93,7 +93,7 @@
<!-- Alias Sub-Dialog --> <!-- Alias Sub-Dialog -->
<RecipeDataAliasManagerDialog <RecipeDataAliasManagerDialog
v-if="editTarget" v-if="editTarget"
:value="aliasManagerDialog" v-model="aliasManagerDialog"
:data="editTarget" :data="editTarget"
can-submit can-submit
@submit="updateUnitAlias" @submit="updateUnitAlias"

4
frontend/pages/shopping-lists/[id].vue
View file

@ -371,6 +371,8 @@
<v-btn <v-btn
v-if="recipe" v-if="recipe"
icon icon
flat
class="bg-transparent"
:disabled="isOffline" :disabled="isOffline"
@click.prevent="removeRecipeReferenceToList(recipe.id!)" @click.prevent="removeRecipeReferenceToList(recipe.id!)"
> >
@ -386,6 +388,8 @@
<v-btn <v-btn
icon icon
:disabled="isOffline" :disabled="isOffline"
flat
class="bg-transparent"
@click.prevent="addRecipeReferenceToList(recipe.id!)" @click.prevent="addRecipeReferenceToList(recipe.id!)"
> >
<v-icon color="grey-lighten-1"> <v-icon color="grey-lighten-1">