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

feat: Public Recipe Browser (#2525)

Browse source 
* fixed incorrect var ref

* added public recipe pagination route

* refactored frontend public/explore API

* fixed broken public cards

* hid context menu from cards when public

* fixed public app header

* fixed random recipe

* added public food, category, tag, and tool routes

* not sure why I thought that would work

* added public organizer/foods stores

* disabled clicking on tags/categories

* added public link to profile page

* linting

* force a 404 if the group slug is missing or invalid

* oops

* refactored to fit sidebar into explore

* fixed invalid logic for app header

* removed most sidebar options from public

* added backend routes for public cookbooks

* added explore cookbook pages/apis

* codegen

* added backend tests

* lint

* fixes v-for keys

* I do not understand but sure why not

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
This commit is contained in:
Michael Genson 2023-09-14 09:01:24 -05:00 • committed by GitHub
parent e28b830cd4
commit 2c5e5a8421
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
55 changed files with 2399 additions and 953 deletions
Download patch file Download diff file Expand all files Collapse all files

74
frontend/components/Domain/Cookbook/CookbookPage.vue Normal file
View file

@ -0,0 +1,74 @@
<template>
<v-container v-if="book" fluid>
<v-app-bar color="transparent" flat class="mt-n1 rounded">
<v-icon large left> {{ $globals.icons.pages }} </v-icon>
<v-toolbar-title class="headline"> {{ book.name }} </v-toolbar-title>
</v-app-bar>
<v-card flat>
<v-card-text class="py-0">
{{ book.description }}
</v-card-text>
</v-card>
<v-container class="pa-0">
<RecipeCardSection
class="mb-5 mx-1"
:recipes="recipes"
:query="{ cookbook: slug }"
:group-slug="groupSlug"
@sortRecipes="assignSorted"
@replaceRecipes="replaceRecipes"
@appendRecipes="appendRecipes"
@delete="removeRecipe"
/>
</v-container>
</v-container>
</template>
<script lang="ts">
import { computed, defineComponent, useRoute, ref, useContext, useMeta } from "@nuxtjs/composition-api";
import { useLazyRecipes } from "~/composables/recipes";
import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
import { useCookbook } from "~/composables/use-group-cookbooks";
export default defineComponent({
components: { RecipeCardSection },
props: {
groupSlug: {
type: String,
default: undefined,
}
},
setup(props) {
const { $auth } = useContext();
const loggedIn = computed(() => $auth.loggedIn);
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
const route = useRoute();
const slug = route.value.params.slug;
const { getOne } = useCookbook(loggedIn.value ? null : props.groupSlug);
const tab = ref(null);
const book = getOne(slug);
useMeta(() => {
return {
title: book?.value?.name || "Cookbook",
};
});
return {
book,
slug,
tab,
appendRecipes,
assignSorted,
recipes,
removeRecipe,
replaceRecipes,
};
},
head: {}, // Must include for useMeta
});
</script>

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

@ -4,7 +4,7 @@
<v-card
:class="{ 'on-hover': hover }"
:elevation="hover ? 12 : 2"
:to="route ? `/recipe/${slug}` : ''"
:to="route ? recipeRoute : ''"
:min-height="imageHeight + 75"
@click="$emit('click')"
>
@ -39,7 +39,10 @@
<RecipeRating class="pb-1" :value="rating" :name="name" :slug="slug" :small="true" />
<v-spacer></v-spacer>
<RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" />
<!-- If we're not logged-in, no items display, so we hide this menu -->
<RecipeContextMenu
v-if="loggedIn"
color="grey darken-2"
:slug="slug"
:name="name"
@ -80,6 +83,10 @@ export default defineComponent({
type: String,
required: true,
},
groupSlug: {
type: String,
default: null,
},
slug: {
type: String,
required: true,
@ -115,14 +122,19 @@ export default defineComponent({
default: 200,
},
},
setup() {
setup(props) {
const { $auth } = useContext();
const loggedIn = computed(() => {
return $auth.loggedIn;
});
const recipeRoute = computed<string>(() => {
return loggedIn.value ? `/recipe/${props.slug}` : `/explore/recipes/${props.groupSlug}/${props.slug}`;
});
return {
loggedIn,
recipeRoute,
};
},
});

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

@ -4,7 +4,7 @@
:ripple="false"
:class="isFlat ? 'mx-auto flat' : 'mx-auto'"
hover
:to="$listeners.selected ? undefined : `/recipe/${slug}`"
:to="$listeners.selected ? undefined : recipeRoute"
@click="$emit('selected')"
>
<v-img v-if="vertical" class="rounded-sm">
@ -40,7 +40,7 @@
<RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
<v-rating
color="secondary"
class="ml-auto"
:class="loggedIn ? 'ml-auto' : 'ml-auto pb-2'"
background-color="secondary lighten-3"
dense
length="5"
@ -48,7 +48,11 @@
:value="rating"
></v-rating>
<v-spacer></v-spacer>
<!-- If we're not logged-in, no items display, so we hide this menu -->
<!-- We also add padding to the v-rating above to compensate -->
<RecipeContextMenu
v-if="loggedIn"
:slug="slug"
:menu-icon="$globals.icons.dotsHorizontal"
:name="name"
@ -92,6 +96,10 @@ export default defineComponent({
type: String,
required: true,
},
groupSlug: {
type: String,
default: null,
},
slug: {
type: String,
required: true,
@ -126,14 +134,19 @@ export default defineComponent({
default: false,
},
},
setup() {
setup(props) {
const { $auth } = useContext();
const loggedIn = computed(() => {
return $auth.loggedIn;
});
const recipeRoute = computed<string>(() => {
return loggedIn.value ? `/recipe/${props.slug}` : `/explore/recipes/${props.groupSlug}/${props.slug}`;
});
return {
loggedIn,
recipeRoute,
};
},
});

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

@ -76,6 +76,7 @@
<RecipeCard
:name="recipe.name"
:description="recipe.description"
:group-slug="groupSlug"
:slug="recipe.slug"
:rating="recipe.rating"
:image="recipe.image"
@ -99,6 +100,7 @@
<RecipeCardMobile
:name="recipe.name"
:description="recipe.description"
:group-slug="groupSlug"
:slug="recipe.slug"
:rating="recipe.rating"
:image="recipe.image"
@ -163,6 +165,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
groupSlug: {
type: String,
default: null,
},
recipes: {
type: Array as () => Recipe[],
default: () => [],
@ -184,7 +190,10 @@ export default defineComponent({
shuffle: "shuffle",
};
const { $globals, $vuetify } = useContext();
const { $auth, $globals, $vuetify } = useContext();
const loggedIn = computed(() => {
return $auth.loggedIn;
});
const useMobileCards = computed(() => {
return $vuetify.breakpoint.smAndDown || preferences.value.useMobileCards;
});
@ -202,7 +211,7 @@ export default defineComponent({
if (props.recipes.length > 0) {
const recipe = props.recipes[Math.floor(Math.random() * props.recipes.length)];
if (recipe.slug !== undefined) {
router.push(`/recipe/${recipe.slug}`);
router.push(loggedIn.value ? `/recipe/${recipe.slug}` : `/explore/recipes/${props.groupSlug}/${recipe.slug}`);
}
}
}
@ -213,7 +222,7 @@ export default defineComponent({
const ready = ref(false);
const loading = ref(false);
const { fetchMore } = useLazyRecipes();
const { fetchMore } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
const queryFilter = computed(() => {
const orderBy = props.query?.orderBy || preferences.value.orderBy;

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

@ -9,7 +9,7 @@
color="accent"
:small="small"
dark
:to="`/?${urlPrefix}=${category.id}`"
:to=" loggedIn ? `/?${urlPrefix}=${category.id}` : undefined"
>
{{ truncateText(category.name) }}
</v-chip>
@ -17,7 +17,7 @@
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/user";
export type UrlPrefixParam = "tags" | "categories" | "tools";
@ -54,6 +54,11 @@ export default defineComponent({
},
},
setup(props) {
const { $auth } = useContext();
const loggedIn = computed(() => {
return $auth.loggedIn
})
function truncateText(text: string, length = 20, clamp = "...") {
if (!props.truncate) return text;
const node = document.createElement("div");
@ -63,6 +68,7 @@ export default defineComponent({
}
return {
loggedIn,
truncateText,
};
},

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

@ -170,7 +170,7 @@
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, useContext, useRouter, ref } from "@nuxtjs/composition-api";
import { computed, defineComponent, reactive, toRefs, useContext, useRouter, ref } from "@nuxtjs/composition-api";
import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
import RecipeDialogShare from "./RecipeDialogShare.vue";
@ -200,6 +200,7 @@ export interface ContextMenuItem {
icon: string;
color: string | undefined;
event: string;
isPublic: boolean;
}
export default defineComponent({
@ -299,7 +300,10 @@ export default defineComponent({
pickerMenu: false,
});
const { i18n, $globals } = useContext();
const { $auth, i18n, $globals } = useContext();
const loggedIn = computed(() => {
return $auth.loggedIn;
});
// ===========================================================================
// Context Menu Setup
@ -310,60 +314,70 @@ export default defineComponent({
icon: $globals.icons.edit,
color: undefined,
event: "edit",
isPublic: false,
},
delete: {
title: i18n.tc("general.delete"),
icon: $globals.icons.delete,
color: "error",
event: "delete",
isPublic: false,
},
download: {
title: i18n.tc("general.download"),
icon: $globals.icons.download,
color: undefined,
event: "download",
isPublic: false,
},
duplicate: {
title: i18n.tc("general.duplicate"),
icon: $globals.icons.duplicate,
color: undefined,
event: "duplicate",
isPublic: false,
},
mealplanner: {
title: i18n.tc("recipe.add-to-plan"),
icon: $globals.icons.calendar,
color: undefined,
event: "mealplanner",
isPublic: false,
},
shoppingList: {
title: i18n.tc("recipe.add-to-list"),
icon: $globals.icons.cartCheck,
color: undefined,
event: "shoppingList",
isPublic: false,
},
print: {
title: i18n.tc("general.print"),
icon: $globals.icons.printer,
color: undefined,
event: "print",
isPublic: true,
},
printPreferences: {
title: i18n.tc("general.print-preferences"),
icon: $globals.icons.printerSettings,
color: undefined,
event: "printPreferences",
isPublic: true,
},
share: {
title: i18n.tc("general.share"),
icon: $globals.icons.shareVariant,
color: undefined,
event: "share",
isPublic: false,
},
publicUrl: {
title: i18n.tc("recipe.public-link"),
icon: $globals.icons.contentCopy,
color: undefined,
event: "publicUrl",
isPublic: true,
},
};
@ -371,7 +385,7 @@ export default defineComponent({
for (const [key, value] of Object.entries(props.useItems)) {
if (value) {
const item = defaultItems[key];
if (item) {
if (item && (item.isPublic || loggedIn.value)) {
state.menuItems.push(item);
}
}

495
frontend/components/Domain/Recipe/RecipeExplorerPage.vue Normal file
View file

@ -0,0 +1,495 @@
<template>
<v-container fluid class="pa-0">
<div class="search-container py-8">
<form class="search-box pa-2" @submit.prevent="search">
<div class="d-flex justify-center my-2">
<v-text-field
ref="input"
v-model="state.search"
outlined
hide-details
clearable
color="primary"
:placeholder="$tc('search.search-placeholder')"
:prepend-inner-icon="$globals.icons.search"
@keyup.enter="hideKeyboard"
/>
</div>
<div class="search-row">
<!-- Category Filter -->
<SearchFilter
v-if="categories"
v-model="selectedCategories"
:require-all.sync="state.requireAllCategories"
:items="categories"
>
<v-icon left>
{{ $globals.icons.tags }}
</v-icon>
{{ $t("category.categories") }}
</SearchFilter>
<!-- Tag Filter -->
<SearchFilter v-if="tags" v-model="selectedTags" :require-all.sync="state.requireAllTags" :items="tags">
<v-icon left>
{{ $globals.icons.tags }}
</v-icon>
{{ $t("tag.tags") }}
</SearchFilter>
<!-- Tool Filter -->
<SearchFilter v-if="tools" v-model="selectedTools" :require-all.sync="state.requireAllTools" :items="tools">
<v-icon left>
{{ $globals.icons.tools }}
</v-icon>
{{ $t("tool.tools") }}
</SearchFilter>
<!-- Food Filter -->
<SearchFilter v-if="foods" v-model="selectedFoods" :require-all.sync="state.requireAllFoods" :items="foods">
<v-icon left>
{{ $globals.icons.foods }}
</v-icon>
{{ $t("general.foods") }}
</SearchFilter>
<!-- Sort Options -->
<v-menu offset-y nudge-bottom="3">
<template #activator="{ on, attrs }">
<v-btn class="ml-auto" small color="accent" v-bind="attrs" v-on="on">
<v-icon :left="!$vuetify.breakpoint.xsOnly">
{{ state.orderDirection === "asc" ? $globals.icons.sortAscending : $globals.icons.sortDescending }}
</v-icon>
{{ $vuetify.breakpoint.xsOnly ? null : sortText }}
</v-btn>
</template>
<v-card>
<v-list>
<v-list-item @click="toggleOrderDirection()">
<v-icon left>
{{ $globals.icons.sort }}
</v-icon>
<v-list-item-title>
{{ state.orderDirection === "asc" ? "Sort Descending" : "Sort Ascending" }}
</v-list-item-title>
</v-list-item>
<v-list-item
v-for="v in sortable"
:key="v.name"
:input-value="state.orderBy === v.value"
@click="state.orderBy = v.value"
>
<v-icon left>
{{ v.icon }}
</v-icon>
<v-list-item-title>{{ v.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-card>
</v-menu>
<!-- Settings -->
<v-menu offset-y bottom left nudge-bottom="3" :close-on-content-click="false">
<template #activator="{ on, attrs }">
<v-btn small color="accent" dark v-bind="attrs" v-on="on">
<v-icon small>
{{ $globals.icons.cog }}
</v-icon>
</v-btn>
</template>
<v-card>
<v-card-text>
<v-switch v-model="state.auto" :label="$t('search.auto-search')" single-line></v-switch>
<v-btn block color="primary" @click="reset">
{{ $tc("general.reset") }}
</v-btn>
</v-card-text>
</v-card>
</v-menu>
</div>
<div v-if="!state.auto" class="search-button-container">
<v-btn x-large color="primary" type="submit" block>
<v-icon left>
{{ $globals.icons.search }}
</v-icon>
{{ $tc("search.search") }}
</v-btn>
</div>
</form>
</div>
<v-divider></v-divider>
<v-container class="mt-6 px-md-6">
<RecipeCardSection
class="mt-n5"
:icon="$globals.icons.search"
:title="$tc('search.results')"
:group-slug="groupSlug"
:recipes="recipes"
:query="passedQuery"
@replaceRecipes="replaceRecipes"
@appendRecipes="appendRecipes"
/>
</v-container>
</v-container>
</template>
<script lang="ts">
import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref } from "@nuxtjs/composition-api";
import { watchDebounced } from "@vueuse/shared";
import SearchFilter from "~/components/Domain/SearchFilter.vue";
import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
import { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
import { NoUndefinedField } from "~/lib/api/types/non-generated";
import { useLazyRecipes } from "~/composables/recipes";
import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
import { usePublicCategoryStore } from "~/composables/store/use-category-store";
import { usePublicFoodStore } from "~/composables/store/use-food-store";
import { usePublicTagStore } from "~/composables/store/use-tag-store";
import { usePublicToolStore } from "~/composables/store/use-tool-store";
export default defineComponent({
components: { SearchFilter, RecipeCardSection },
props: {
groupSlug: {
type: String,
required: true,
},
},
setup(props) {
const router = useRouter();
const { $auth, $globals, i18n } = useContext();
const loggedIn = computed(() => {
return $auth.loggedIn;
});
const state = ref({
auto: true,
search: "",
orderBy: "created_at",
orderDirection: "desc" as "asc" | "desc",
// and/or
requireAllCategories: false,
requireAllTags: false,
requireAllTools: false,
requireAllFoods: false,
});
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
const categories = loggedIn.value ? useCategoryStore() : usePublicCategoryStore(props.groupSlug);
const selectedCategories = ref<NoUndefinedField<RecipeCategory>[]>([]);
const foods = loggedIn.value ? useFoodStore() : usePublicFoodStore(props.groupSlug);
const selectedFoods = ref<IngredientFood[]>([]);
const tags = loggedIn.value ? useTagStore() : usePublicTagStore(props.groupSlug);
const selectedTags = ref<NoUndefinedField<RecipeTag>[]>([]);
const tools = loggedIn.value ? useToolStore() : usePublicToolStore(props.groupSlug);
const selectedTools = ref<NoUndefinedField<RecipeTool>[]>([]);
const passedQuery = ref<RecipeSearchQuery | null>(null);
function reset() {
state.value.search = "";
state.value.orderBy = "created_at";
state.value.orderDirection = "desc";
state.value.requireAllCategories = false;
state.value.requireAllTags = false;
state.value.requireAllTools = false;
state.value.requireAllFoods = false;
selectedCategories.value = [];
selectedFoods.value = [];
selectedTags.value = [];
selectedTools.value = [];
router.push({
query: {},
});
search();
}
function toggleOrderDirection() {
state.value.orderDirection = state.value.orderDirection === "asc" ? "desc" : "asc";
}
function toIDArray(array: { id: string }[]) {
return array.map((item) => item.id);
}
function hideKeyboard() {
input.value.blur()
}
const input: Ref<any> = ref(null);
async function search() {
await router.push({
query: {
categories: toIDArray(selectedCategories.value),
foods: toIDArray(selectedFoods.value),
tags: toIDArray(selectedTags.value),
tools: toIDArray(selectedTools.value),
// Only add the query param if it's or not default
...{
auto: state.value.auto ? undefined : "false",
search: state.value.search === "" ? undefined : state.value.search,
orderBy: state.value.orderBy === "createdAt" ? undefined : state.value.orderBy,
orderDirection: state.value.orderDirection === "desc" ? undefined : state.value.orderDirection,
requireAllCategories: state.value.requireAllCategories ? "true" : undefined,
requireAllTags: state.value.requireAllTags ? "true" : undefined,
requireAllTools: state.value.requireAllTools ? "true" : undefined,
requireAllFoods: state.value.requireAllFoods ? "true" : undefined,
},
},
});
passedQuery.value = {
search: state.value.search,
categories: toIDArray(selectedCategories.value),
foods: toIDArray(selectedFoods.value),
tags: toIDArray(selectedTags.value),
tools: toIDArray(selectedTools.value),
requireAllCategories: state.value.requireAllCategories,
requireAllTags: state.value.requireAllTags,
requireAllTools: state.value.requireAllTools,
requireAllFoods: state.value.requireAllFoods,
orderBy: state.value.orderBy,
orderDirection: state.value.orderDirection,
_searchSeed: Date.now().toString()
};
}
function waitUntilAndExecute(
condition: () => boolean,
callback: () => void,
opts = { timeout: 2000, interval: 500 }
): Promise<void> {
return new Promise((resolve, reject) => {
const state = {
timeout: undefined as number | undefined,
interval: undefined as number | undefined,
};
const check = () => {
if (condition()) {
clearInterval(state.interval);
clearTimeout(state.timeout);
callback();
resolve();
}
};
// For some reason these were returning NodeJS.Timeout
state.interval = setInterval(check, opts.interval) as unknown as number;
state.timeout = setTimeout(() => {
clearInterval(state.interval);
reject(new Error("Timeout"));
}, opts.timeout) as unknown as number;
});
}
const sortText = computed(() => {
const sort = sortable.find((s) => s.value === state.value.orderBy);
if (!sort) return "";
return `${sort.name}`;
});
const sortable = [
{
icon: $globals.icons.orderAlphabeticalAscending,
name: i18n.tc("general.sort-alphabetically"),
value: "name",
},
{
icon: $globals.icons.newBox,
name: i18n.tc("general.created"),
value: "created_at",
},
{
icon: $globals.icons.chefHat,
name: i18n.tc("general.last-made"),
value: "last_made",
},
{
icon: $globals.icons.star,
name: i18n.tc("general.rating"),
value: "rating",
},
{
icon: $globals.icons.update,
name: i18n.tc("general.updated"),
value: "update_at",
},
{
icon: $globals.icons.diceMultiple,
name: i18n.tc("general.random"),
value: "random",
},
];
onMounted(() => {
// Hydrate Search
// wait for stores to be hydrated
// read query params
const query = router.currentRoute.query;
if (query.auto) {
state.value.auto = query.auto === "true";
}
if (query.search) {
state.value.search = query.search as string;
}
if (query.orderBy) {
state.value.orderBy = query.orderBy as string;
}
if (query.orderDirection) {
state.value.orderDirection = query.orderDirection as "asc" | "desc";
}
const promises: Promise<void>[] = [];
if (query.categories) {
promises.push(
waitUntilAndExecute(
() => categories.items.value.length > 0,
() => {
const result = categories.items.value.filter((item) =>
(query.categories as string[]).includes(item.id as string)
);
selectedCategories.value = result as NoUndefinedField<RecipeCategory>[];
}
)
);
}
if (query.foods) {
promises.push(
waitUntilAndExecute(
() => {
if (foods.foods.value) {
return foods.foods.value.length > 0;
}
return false;
},
() => {
const result = foods.foods.value?.filter((item) => (query.foods as string[]).includes(item.id));
selectedFoods.value = result ?? [];
}
)
);
}
if (query.tags) {
promises.push(
waitUntilAndExecute(
() => tags.items.value.length > 0,
() => {
const result = tags.items.value.filter((item) => (query.tags as string[]).includes(item.id as string));
selectedTags.value = result as NoUndefinedField<RecipeTag>[];
}
)
);
}
if (query.tools) {
promises.push(
waitUntilAndExecute(
() => tools.items.value.length > 0,
() => {
const result = tools.items.value.filter((item) => (query.tools as string[]).includes(item.id));
selectedTools.value = result as NoUndefinedField<RecipeTool>[];
}
)
);
}
Promise.allSettled(promises).then(() => {
search();
});
});
watchDebounced(
[
() => state.value.search,
() => state.value.requireAllCategories,
() => state.value.requireAllTags,
() => state.value.requireAllTools,
() => state.value.requireAllFoods,
() => state.value.orderBy,
() => state.value.orderDirection,
selectedCategories,
selectedFoods,
selectedTags,
selectedTools,
],
async () => {
if (state.value.auto) {
await search();
}
},
{
debounce: 500,
}
);
return {
sortText,
search,
reset,
state,
categories: categories.items as unknown as NoUndefinedField<RecipeCategory>[],
tags: tags.items as unknown as NoUndefinedField<RecipeTag>[],
foods: foods.foods,
tools: tools.items as unknown as NoUndefinedField<RecipeTool>[],
sortable,
toggleOrderDirection,
hideKeyboard,
input,
selectedCategories,
selectedFoods,
selectedTags,
selectedTools,
appendRecipes,
assignSorted,
recipes,
removeRecipe,
replaceRecipes,
passedQuery,
};
},
head: {},
});
</script>
<style lang="css">
.search-row {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: 1rem;
}
.search-container {
display: flex;
justify-content: center;
}
.search-box {
width: 950px;
}
.search-button-container {
margin: 3rem auto 0 auto;
max-width: 500px;
}
</style>

216
frontend/components/Layout/DefaultLayout.vue Normal file
View file

@ -0,0 +1,216 @@
<template>
<v-app dark>
<TheSnackbar />
<AppSidebar
v-model="sidebar"
absolute
:top-link="topLinks"
:secondary-header="$t('sidebar.cookbooks')"
:secondary-header-link="loggedIn ? '/group/cookbooks' : undefined"
:secondary-links="cookbookLinks || []"
:bottom-links="isAdmin ? bottomLink : []"
>
<v-menu offset-y nudge-bottom="5" close-delay="50" nudge-right="15">
<template #activator="{ on, attrs }">
<v-btn v-if="loggedIn" rounded large class="ml-2 mt-3" v-bind="attrs" v-on="on">
<v-icon left large color="primary">
{{ $globals.icons.createAlt }}
</v-icon>
{{ $t("general.create") }}
</v-btn>
</template>
<v-list dense class="my-0 py-0">
<template v-for="(item, index) in createLinks">
<v-divider v-if="item.insertDivider" :key="index" class="mx-2"></v-divider>
<v-list-item v-if="!item.restricted || loggedIn" :key="item.title" :to="item.to" exact>
<v-list-item-avatar>
<v-icon>
{{ item.icon }}
</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>
{{ item.title }}
</v-list-item-title>
<v-list-item-subtitle v-if="item.subtitle">
{{ item.subtitle }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</v-menu>
<template #bottom>
<v-list-item @click.stop="languageDialog = true">
<v-list-item-icon>
<v-icon>{{ $globals.icons.translate }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t("sidebar.language") }}</v-list-item-title>
<LanguageDialog v-model="languageDialog" />
</v-list-item-content>
</v-list-item>
<v-list-item @click="toggleDark">
<v-list-item-icon>
<v-icon>
{{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
</v-icon>
</v-list-item-icon>
<v-list-item-title>
{{ $vuetify.theme.dark ? $t("settings.theme.light-mode") : $t("settings.theme.dark-mode") }}
</v-list-item-title>
</v-list-item>
</template>
</AppSidebar>
<AppHeader :menu="loggedIn">
<v-btn icon @click.stop="sidebar = !sidebar">
<v-icon> {{ $globals.icons.menu }}</v-icon>
</v-btn>
</AppHeader>
<v-main>
<v-scroll-x-transition>
<Nuxt />
</v-scroll-x-transition>
</v-main>
</v-app>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, useContext, useRoute } from "@nuxtjs/composition-api";
import AppHeader from "@/components/Layout/LayoutParts/AppHeader.vue";
import AppSidebar from "@/components/Layout/LayoutParts/AppSidebar.vue";
import { SidebarLinks } from "~/types/application-types";
import LanguageDialog from "~/components/global/LanguageDialog.vue";
import TheSnackbar from "@/components/Layout/LayoutParts/TheSnackbar.vue";
import { useCookbooks, usePublicCookbooks } from "~/composables/use-group-cookbooks";
import { useToggleDarkMode } from "~/composables/use-utils";
export default defineComponent({
components: { AppHeader, AppSidebar, LanguageDialog, TheSnackbar },
setup() {
const { $globals, $auth, $vuetify, i18n } = useContext();
const isAdmin = computed(() => $auth.user?.admin);
const loggedIn = computed(() => $auth.loggedIn);
const route = useRoute();
const groupSlug = route.value.params.groupSlug;
const { cookbooks } = loggedIn.value ? useCookbooks() : usePublicCookbooks(groupSlug);
const toggleDark = useToggleDarkMode();
const languageDialog = ref<boolean>(false);
const sidebar = ref<boolean | null>(null);
onMounted(() => {
sidebar.value = !$vuetify.breakpoint.md;
});
const cookbookLinks = computed(() => {
if (!cookbooks.value) return [];
return cookbooks.value.map((cookbook) => {
return {
icon: $globals.icons.pages,
title: cookbook.name,
to: loggedIn.value ? `/cookbooks/${cookbook.slug as string}` : `/explore/cookbooks/${groupSlug}/${cookbook.slug as string}`,
};
});
});
interface Link {
insertDivider: boolean;
icon: string;
title: string;
subtitle: string | null;
to: string;
restricted: boolean;
}
const createLinks: Link[] = [
{
insertDivider: false,
icon: $globals.icons.link,
title: i18n.tc("general.import"),
subtitle: i18n.tc("new-recipe.import-by-url"),
to: "/recipe/create/url",
restricted: true,
},
{
insertDivider: true,
icon: $globals.icons.edit,
title: i18n.tc("general.create"),
subtitle: i18n.tc("new-recipe.create-manually"),
to: "/recipe/create/new",
restricted: true,
},
{
insertDivider: true,
icon: $globals.icons.pages,
title: i18n.tc("sidebar.cookbook"),
subtitle: i18n.tc("sidebar.create-cookbook"),
to: "/group/cookbooks",
restricted: true,
},
];
const bottomLinks: SidebarLinks = [
{
icon: $globals.icons.cog,
title: i18n.tc("general.settings"),
to: "/admin/site-settings",
restricted: true,
},
];
const topLinks: SidebarLinks = [
{
icon: $globals.icons.search,
to: "/",
title: i18n.tc("sidebar.search"),
restricted: true,
},
{
icon: $globals.icons.calendarMultiselect,
title: i18n.tc("meal-plan.meal-planner"),
to: "/group/mealplan/planner",
restricted: true,
},
{
icon: $globals.icons.formatListCheck,
title: i18n.tc("shopping-list.shopping-lists"),
to: "/shopping-lists",
restricted: true,
},
{
icon: $globals.icons.timelineText,
title: i18n.tc("recipe.timeline"),
to: "/group/timeline",
restricted: true,
},
{
icon: $globals.icons.tags,
to: "/recipes/categories",
title: i18n.tc("sidebar.categories"),
restricted: true,
},
{
icon: $globals.icons.tags,
to: "/recipes/tags",
title: i18n.tc("sidebar.tags"),
restricted: true,
},
{
icon: $globals.icons.potSteam,
to: "/recipes/tools",
title: i18n.tc("tool.tools"),
restricted: true,
},
];
return { cookbookLinks, createLinks, bottomLink: bottomLinks, topLinks, isAdmin, loggedIn, languageDialog, toggleDark, sidebar };
},
});
</script>

3
frontend/components/Layout/AppFooter.vue → frontend/components/Layout/LayoutParts/AppFooter.vue
View file

@ -12,7 +12,7 @@
</v-row>
</v-footer>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
@ -22,4 +22,3 @@ export default defineComponent({
},
});
</script>

16
frontend/components/Layout/AppHeader.vue → frontend/components/Layout/LayoutParts/AppHeader.vue
View file

@ -1,14 +1,14 @@
<template>
<v-app-bar clipped-left dense app color="primary" dark class="d-print-none">
<slot />
<router-link to="/">
<router-link :to="routerLink">
<v-btn icon>
<v-icon size="40"> {{ $globals.icons.primary }} </v-icon>
</v-btn>
</router-link>
<div btn class="pl-2">
<v-toolbar-title style="cursor: pointer" @click="$router.push('/')"> Mealie </v-toolbar-title>
<v-toolbar-title style="cursor: pointer" @click="$router.push(routerLink)"> Mealie </v-toolbar-title>
</div>
<RecipeDialogSearch ref="domSearchDialog" />
@ -48,7 +48,7 @@
</template>
<script lang="ts">
import { defineComponent, onBeforeUnmount, onMounted, ref } from "@nuxtjs/composition-api";
import { computed, defineComponent, onBeforeUnmount, onMounted, ref, useContext, useRoute } from "@nuxtjs/composition-api";
import RecipeDialogSearch from "~/components/Domain/Recipe/RecipeDialogSearch.vue";
export default defineComponent({
@ -60,6 +60,15 @@ export default defineComponent({
},
},
setup() {
const { $auth } = useContext();
const route = useRoute();
const loggedIn = computed(() => {
return $auth.loggedIn;
});
const groupSlug = route.value.params.groupSlug;
const routerLink = !loggedIn.value && groupSlug ? `/explore/recipes/${groupSlug}` : "/"
const domSearchDialog = ref<InstanceType<typeof RecipeDialogSearch> | null>(null);
function activateSearch() {
@ -85,6 +94,7 @@ export default defineComponent({
return {
activateSearch,
domSearchDialog,
routerLink,
};
},
});

161
frontend/components/Layout/AppSidebar.vue → frontend/components/Layout/LayoutParts/AppSidebar.vue
View file

@ -26,41 +26,43 @@
<template v-if="topLink">
<v-list nav dense>
<template v-for="nav in topLink">
<!-- Multi Items -->
<v-list-group
v-if="nav.children && ($auth.loggedIn || !nav.restricted)"
:key="nav.title + 'multi-item'"
v-model="dropDowns[nav.title]"
color="primary"
:prepend-icon="nav.icon"
>
<template #activator>
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</template>
<div v-if="!nav.restricted || loggedIn" :key="nav.title">
<!-- Multi Items -->
<v-list-group
v-if="nav.children"
:key="nav.title + 'multi-item'"
v-model="dropDowns[nav.title]"
color="primary"
:prepend-icon="nav.icon"
>
<template #activator>
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</template>
<v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to">
<v-list-item-icon>
<v-icon>{{ child.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ child.title }}</v-list-item-title>
</v-list-item>
<v-divider class="mb-4"></v-divider>
</v-list-group>
<v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to">
<v-list-item-icon>
<v-icon>{{ child.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ child.title }}</v-list-item-title>
</v-list-item>
<v-divider class="mb-4"></v-divider>
</v-list-group>
<!-- Single Item -->
<v-list-item-group
v-else-if="$auth.loggedIn || !nav.restricted"
:key="nav.title + 'single-item'"
v-model="secondarySelected"
color="primary"
>
<v-list-item exact link :to="nav.to">
<v-list-item-icon>
<v-icon>{{ nav.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</v-list-item>
</v-list-item-group>
<!-- Single Item -->
<v-list-item-group
v-else
:key="nav.title + 'single-item'"
v-model="secondarySelected"
color="primary"
>
<v-list-item exact link :to="nav.to">
<v-list-item-icon>
<v-icon>{{ nav.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</v-list-item>
</v-list-item-group>
</div>
</template>
</v-list>
</template>
@ -73,36 +75,38 @@
<v-divider></v-divider>
<v-list nav dense exact>
<template v-for="nav in secondaryLinks">
<!-- Multi Items -->
<v-list-group
v-if="nav.children"
:key="nav.title + 'multi-item'"
v-model="dropDowns[nav.title]"
color="primary"
:prepend-icon="nav.icon"
>
<template #activator>
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</template>
<div v-if="!nav.restricted || loggedIn" :key="nav.title">
<!-- Multi Items -->
<v-list-group
v-if="nav.children"
:key="nav.title + 'multi-item'"
v-model="dropDowns[nav.title]"
color="primary"
:prepend-icon="nav.icon"
>
<template #activator>
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</template>
<v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to">
<v-list-item-icon>
<v-icon>{{ child.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ child.title }}</v-list-item-title>
</v-list-item>
<v-divider class="mb-4"></v-divider>
</v-list-group>
<v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to">
<v-list-item-icon>
<v-icon>{{ child.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ child.title }}</v-list-item-title>
</v-list-item>
<v-divider class="mb-4"></v-divider>
</v-list-group>
<!-- Single Item -->
<v-list-item-group v-else :key="nav.title + 'single-item'" v-model="secondarySelected" color="primary">
<v-list-item exact link :to="nav.to">
<v-list-item-icon>
<v-icon>{{ nav.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</v-list-item>
</v-list-item-group>
<!-- Single Item -->
<v-list-item-group v-else :key="nav.title + 'single-item'" v-model="secondarySelected" color="primary">
<v-list-item exact link :to="nav.to">
<v-list-item-icon>
<v-icon>{{ nav.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</v-list-item>
</v-list-item-group>
</div>
</template>
</v-list>
</template>
@ -112,20 +116,21 @@
<v-list nav dense>
<v-list-item-group v-model="bottomSelected" color="primary">
<template v-for="nav in bottomLinks">
<v-list-item
v-if="!nav.restricted || $auth.loggedIn"
:key="nav.title"
exact
link
:to="nav.to || null"
:href="nav.href || null"
:target="nav.href ? '_blank' : null"
>
<v-list-item-icon>
<v-icon>{{ nav.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</v-list-item>
<div v-if="!nav.restricted || loggedIn" :key="nav.title">
<v-list-item
:key="nav.title"
exact
link
:to="nav.to || null"
:href="nav.href || null"
:target="nav.href ? '_blank' : null"
>
<v-list-item-icon>
<v-icon>{{ nav.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</v-list-item>
</div>
</template>
</v-list-item-group>
<slot name="bottom"></slot>
@ -135,7 +140,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
import { computed, defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
import { SidebarLinks } from "~/types/application-types";
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
@ -192,6 +197,9 @@ export default defineComponent({
},
});
const { $auth } = useContext();
const loggedIn = computed(() => $auth.loggedIn);
const state = reactive({
dropDowns: {},
topSelected: null as string[] | null,
@ -203,6 +211,7 @@ export default defineComponent({
return {
...toRefs(state),
drawer,
loggedIn,
};
},
});

0
frontend/components/Layout/TheSnackbar.vue → frontend/components/Layout/LayoutParts/TheSnackbar.vue
View file

9
frontend/composables/api/api-client.ts
View file

@ -3,6 +3,7 @@ import { useContext } from "@nuxtjs/composition-api";
import type { NuxtAxiosInstance } from "@nuxtjs/axios";
import { ApiRequestInstance, RequestResponse } from "~/lib/api/types/non-generated";
import { AdminAPI, PublicApi, UserApi } from "~/lib/api";
import { PublicExploreApi } from "~/lib/api/client-public";
const request = {
async safe<T, U>(
@ -80,3 +81,11 @@ export const usePublicApi = function (): PublicApi {
const requests = getRequests($axios);
return new PublicApi(requests);
};
export const usePublicExploreApi = function (groupSlug: string): PublicExploreApi {
const { $axios, i18n } = useContext();
$axios.setHeader("Accept-Language", i18n.locale);
const requests = getRequests($axios);
return new PublicExploreApi(requests, groupSlug);
}

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

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

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

@ -1,5 +1,6 @@
import { useAsync, ref } from "@nuxtjs/composition-api";
import { useAsyncKey } from "../use-utils";
import { usePublicExploreApi } from "~/composables/api/api-client";
import { useUserApi } from "~/composables/api";
import { Recipe } from "~/lib/api/types/recipe";
import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
@ -7,8 +8,9 @@ import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
export const allRecipes = ref<Recipe[]>([]);
export const recentRecipes = ref<Recipe[]>([]);
export const useLazyRecipes = function () {
const api = useUserApi();
export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
// passing the group slug switches to using the public API
const api = publicGroupSlug ? usePublicExploreApi(publicGroupSlug).explore : useUserApi();
const recipes = ref<Recipe[]>([]);
@ -20,6 +22,7 @@ export const useLazyRecipes = function () {
query: RecipeSearchQuery | null = null,
queryFilter: string | null = null,
) {
const { data } = await api.recipes.getAll(page, perPage, {
orderBy,
orderDirection,
@ -73,8 +76,12 @@ export const useLazyRecipes = function () {
};
};
export const useRecipes = (all = false, fetchRecipes = true, loadFood = false) => {
const api = useUserApi();
export const useRecipes = (
all = false, fetchRecipes = true,
loadFood = false,
publicGroupSlug: string | null = null
) => {
const api = publicGroupSlug ? usePublicExploreApi(publicGroupSlug).explore : useUserApi();
// recipes is non-reactive!!
const { recipes, page, perPage } = (() => {

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

@ -1,5 +1,6 @@
import { reactive, ref, Ref } from "@nuxtjs/composition-api";
import { useStoreActions } from "../partials/use-actions-factory";
import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
import { usePublicExploreApi } from "../api/api-client";
import { useUserApi } from "~/composables/api";
import { RecipeCategory } from "~/lib/api/types/admin";
@ -24,7 +25,30 @@ export function useCategoryData() {
};
}
export function usePublicCategoryStore(groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
const loading = ref(false);
const actions = {
...usePublicStoreActions<RecipeCategory>(api.categories, categoryStore, loading),
flushStore() {
categoryStore.value = [];
},
};
if (!categoryStore.value || categoryStore.value?.length === 0) {
actions.getAll();
}
return {
items: categoryStore,
actions,
loading,
};
}
export function useCategoryStore() {
// passing the group slug switches to using the public API
const api = useUserApi();
const loading = ref(false);

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

@ -1,5 +1,6 @@
import { ref, reactive, Ref } from "@nuxtjs/composition-api";
import { useStoreActions } from "../partials/use-actions-factory";
import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
import { usePublicExploreApi } from "../api/api-client";
import { useUserApi } from "~/composables/api";
import { IngredientFood } from "~/lib/api/types/recipe";
@ -31,6 +32,24 @@ export const useFoodData = function () {
};
};
export const usePublicFoodStore = function (groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
const loading = ref(false);
const actions = {
...usePublicStoreActions(api.foods, foodStore, loading),
flushStore() {
foodStore = null;
},
};
if (!foodStore) {
foodStore = actions.getAll();
}
return { foods: foodStore, actions };
};
export const useFoodStore = function () {
const api = useUserApi();
const loading = ref(false);

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

@ -1,5 +1,6 @@
import { reactive, ref, Ref } from "@nuxtjs/composition-api";
import { useStoreActions } from "../partials/use-actions-factory";
import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
import { usePublicExploreApi } from "../api/api-client";
import { useUserApi } from "~/composables/api";
import { RecipeTag } from "~/lib/api/types/admin";
@ -24,6 +25,28 @@ export function useTagData() {
};
}
export function usePublicTagStore(groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
const loading = ref(false);
const actions = {
...usePublicStoreActions<RecipeTag>(api.tags, items, loading),
flushStore() {
items.value = [];
},
};
if (!items.value || items.value?.length === 0) {
actions.getAll();
}
return {
items,
actions,
loading,
};
}
export function useTagStore() {
const api = useUserApi();
const loading = ref(false);

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

@ -1,5 +1,6 @@
import { reactive, ref, Ref } from "@nuxtjs/composition-api";
import { useStoreActions } from "../partials/use-actions-factory";
import { usePublicExploreApi } from "../api/api-client";
import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
import { useUserApi } from "~/composables/api";
import { RecipeTool } from "~/lib/api/types/recipe";
@ -26,6 +27,28 @@ export function useToolData() {
};
}
export function usePublicToolStore(groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
const loading = ref(false);
const actions = {
...usePublicStoreActions<RecipeTool>(api.tools, toolStore, loading),
flushStore() {
toolStore.value = [];
},
};
if (!toolStore.value || toolStore.value?.length === 0) {
actions.getAll();
}
return {
items: toolStore,
actions,
loading,
};
}
export function useToolStore() {
const api = useUserApi();
const loading = ref(false);

48
frontend/composables/use-group-cookbooks.ts
View file

@ -1,13 +1,15 @@
import { useAsync, ref, Ref, useContext } from "@nuxtjs/composition-api";
import { useAsyncKey } from "./use-utils";
import { usePublicExploreApi } from "./api/api-client";
import { useUserApi } from "~/composables/api";
import { ReadCookBook, UpdateCookBook } from "~/lib/api/types/cookbook";
let cookbookStore: Ref<ReadCookBook[] | null> | null = null;
export const useCookbook = function () {
export const useCookbook = function (publicGroupSlug: string | null = null) {
function getOne(id: string | number) {
const api = useUserApi();
// passing the group slug switches to using the public API
const api = publicGroupSlug ? usePublicExploreApi(publicGroupSlug).explore : useUserApi();
const units = useAsync(async () => {
const { data } = await api.cookbooks.getOne(id);
@ -21,6 +23,48 @@ export const useCookbook = function () {
return { getOne };
};
export const usePublicCookbooks = function (groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
const loading = ref(false);
const actions = {
getAll() {
loading.value = true;
const units = useAsync(async () => {
const { data } = await api.cookbooks.getAll(1, -1, { orderBy: "position", orderDirection: "asc" });
if (data) {
return data.items;
} else {
return null;
}
}, useAsyncKey());
loading.value = false;
return units;
},
async refreshAll() {
loading.value = true;
const { data } = await api.cookbooks.getAll(1, -1, { orderBy: "position", orderDirection: "asc" });
if (data && data.items && cookbookStore) {
cookbookStore.value = data.items;
}
loading.value = false;
},
flushStore() {
cookbookStore = null;
},
};
if (!cookbookStore) {
cookbookStore = actions.getAll();
}
return { cookbooks: cookbookStore, actions };
}
export const useCookbooks = function () {
const api = useUserApi();
const loading = ref(false);

3
frontend/lang/messages/en-US.json
View file

@ -1070,6 +1070,7 @@
"welcome-user": "👋 Welcome, {0}",
"description": "Manage your profile, recipes, and group settings.",
"get-invite-link": "Get Invite Link",
"get-public-link": "Get Public Link",
"account-summary": "Account Summary",
"account-summary-description": "Here's a summary of your group's information",
"group-statistics": "Group Statistics",
@ -1122,4 +1123,4 @@
"cookbook-name": "Cookbook Name",
"cookbook-with-name": "Cookbook {0}"
}
}
}

31
frontend/layouts/admin.vue
View file

@ -27,9 +27,9 @@
<script lang="ts">
import { defineComponent, ref, useContext, onMounted } from "@nuxtjs/composition-api";
import AppHeader from "@/components/Layout/AppHeader.vue";
import AppSidebar from "@/components/Layout/AppSidebar.vue";
import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
import AppHeader from "@/components/Layout/LayoutParts/AppHeader.vue";
import AppSidebar from "@/components/Layout/LayoutParts/AppSidebar.vue";
import TheSnackbar from "~/components/Layout/LayoutParts/TheSnackbar.vue";
import { SidebarLinks } from "~/types/application-types";
export default defineComponent({
@ -48,28 +48,33 @@ export default defineComponent({
{
icon: $globals.icons.cog,
to: "/admin/site-settings",
title: i18n.t("sidebar.site-settings"),
title: i18n.tc("sidebar.site-settings"),
restricted: true,
},
// {
// icon: $globals.icons.chart,
// to: "/admin/analytics",
// title: "Analytics",
// restricted: true,
// },
{
icon: $globals.icons.user,
to: "/admin/manage/users",
title: i18n.t("user.users"),
title: i18n.tc("user.users"),
restricted: true,
},
{
icon: $globals.icons.group,
to: "/admin/manage/groups",
title: i18n.t("group.groups"),
title: i18n.tc("group.groups"),
restricted: true,
},
{
icon: $globals.icons.database,
to: "/admin/backups",
title: i18n.t("sidebar.backups"),
title: i18n.tc("sidebar.backups"),
restricted: true,
},
];
@ -77,25 +82,29 @@ export default defineComponent({
{
icon: $globals.icons.wrench,
to: "/admin/maintenance",
title: i18n.t("sidebar.maintenance"),
title: i18n.tc("sidebar.maintenance"),
restricted: true,
},
{
icon: $globals.icons.check,
to: "/admin/background-tasks",
title: i18n.t("sidebar.background-tasks"),
title: i18n.tc("sidebar.background-tasks"),
restricted: true,
},
{
icon: $globals.icons.slotMachine,
to: "/admin/parser",
title: i18n.t("sidebar.parser"),
title: i18n.tc("sidebar.parser"),
restricted: true,
},
];
const bottomLinks: SidebarLinks = [
{
icon: $globals.icons.heart,
title: i18n.t("about.support"),
title: i18n.tc("about.support"),
href: "https://github.com/sponsors/hay-kot",
restricted: true,
},
];

8
frontend/layouts/basic.vue
View file

@ -10,13 +10,13 @@
</v-main>
</v-app>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
import AppHeader from "@/components/Layout/AppHeader.vue";
import TheSnackbar from "~/components/Layout/LayoutParts/TheSnackbar.vue";
import AppHeader from "@/components/Layout/LayoutParts/AppHeader.vue";
export default defineComponent({
components: { TheSnackbar, AppHeader },
});
</script>
</script>

2
frontend/layouts/blank.vue
View file

@ -20,7 +20,7 @@
<script lang="ts">
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
import TheSnackbar from "~/components/Layout/LayoutParts/TheSnackbar.vue";
import { useAppInfo } from "~/composables/api";
export default defineComponent({
components: { TheSnackbar },

194
frontend/layouts/default.vue
View file

@ -1,198 +1,14 @@
<template>
<v-app dark>
<TheSnackbar />
<AppSidebar
v-model="sidebar"
absolute
:top-link="topLinks"
:secondary-header="$t('sidebar.cookbooks')"
secondary-header-link="/group/cookbooks"
:secondary-links="cookbookLinks || []"
:bottom-links="isAdmin ? bottomLink : []"
>
<v-menu offset-y nudge-bottom="5" close-delay="50" nudge-right="15">
<template #activator="{ on, attrs }">
<v-btn rounded large class="ml-2 mt-3" v-bind="attrs" v-on="on">
<v-icon left large color="primary">
{{ $globals.icons.createAlt }}
</v-icon>
{{ $t("general.create") }}
</v-btn>
</template>
<v-list dense class="my-0 py-0">
<template v-for="(item, index) in createLinks">
<v-divider v-if="item.divider" :key="index" class="mx-2"></v-divider>
<v-list-item v-else :key="item.title" :to="item.to" exact>
<v-list-item-avatar>
<v-icon>
{{ item.icon }}
</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>
{{ item.title }}
</v-list-item-title>
<v-list-item-subtitle>
{{ item.subtitle }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</v-menu>
<template #bottom>
<v-list-item @click.stop="languageDialog = true">
<v-list-item-icon>
<v-icon>{{ $globals.icons.translate }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t("sidebar.language") }}</v-list-item-title>
<LanguageDialog v-model="languageDialog" />
</v-list-item-content>
</v-list-item>
<v-list-item @click="toggleDark">
<v-list-item-icon>
<v-icon>
{{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
</v-icon>
</v-list-item-icon>
<v-list-item-title>
{{ $vuetify.theme.dark ? $t("settings.theme.light-mode") : $t("settings.theme.dark-mode") }}
</v-list-item-title>
</v-list-item>
</template>
</AppSidebar>
<AppHeader>
<v-btn icon @click.stop="sidebar = !sidebar">
<v-icon> {{ $globals.icons.menu }}</v-icon>
</v-btn>
</AppHeader>
<v-main>
<v-scroll-x-transition>
<Nuxt />
</v-scroll-x-transition>
</v-main>
</v-app>
<DefaultLayout />
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, useContext } from "@nuxtjs/composition-api";
import AppHeader from "@/components/Layout/AppHeader.vue";
import AppSidebar from "@/components/Layout/AppSidebar.vue";
import LanguageDialog from "~/components/global/LanguageDialog.vue";
import TheSnackbar from "@/components/Layout/TheSnackbar.vue";
import { useCookbooks } from "~/composables/use-group-cookbooks";
import { useToggleDarkMode } from "~/composables/use-utils";
import { defineComponent } from "@nuxtjs/composition-api";
import DefaultLayout from "@/components/Layout/DefaultLayout.vue";
export default defineComponent({
components: { AppHeader, AppSidebar, LanguageDialog, TheSnackbar },
components: { DefaultLayout },
middleware: "auth",
setup() {
const { cookbooks } = useCookbooks();
const { $globals, $auth, $vuetify, i18n } = useContext();
const isAdmin = computed(() => $auth.user?.admin);
const toggleDark = useToggleDarkMode();
const languageDialog = ref<boolean>(false);
const sidebar = ref<boolean | null>(null);
onMounted(() => {
sidebar.value = !$vuetify.breakpoint.md;
});
const cookbookLinks = computed(() => {
if (!cookbooks.value) return [];
return cookbooks.value.map((cookbook) => {
return {
icon: $globals.icons.pages,
title: cookbook.name,
to: `/cookbooks/${cookbook.slug as string}`,
};
});
});
const createLinks = [
{
icon: $globals.icons.link,
title: i18n.t("general.import"),
subtitle: i18n.t("new-recipe.import-by-url"),
to: "/recipe/create/url",
restricted: true,
},
{ divider: true },
{
icon: $globals.icons.edit,
title: i18n.t("general.create"),
subtitle: i18n.t("new-recipe.create-manually"),
to: "/recipe/create/new",
restricted: true,
},
{ divider: true },
{
icon: $globals.icons.pages,
title: i18n.t("sidebar.cookbook"),
subtitle: i18n.t("sidebar.create-cookbook"),
to: "/group/cookbooks",
restricted: true,
},
];
const bottomLink = [
{
icon: $globals.icons.cog,
title: i18n.t("general.settings"),
to: "/admin/site-settings",
restricted: true,
},
];
const topLinks = [
{
icon: $globals.icons.search,
to: "/",
title: i18n.t("sidebar.search"),
},
{
icon: $globals.icons.calendarMultiselect,
title: i18n.t("meal-plan.meal-planner"),
to: "/group/mealplan/planner",
restricted: true,
},
{
icon: $globals.icons.formatListCheck,
title: i18n.t("shopping-list.shopping-lists"),
to: "/shopping-lists",
restricted: true,
},
{
icon: $globals.icons.timelineText,
title: i18n.t("recipe.timeline"),
to: "/group/timeline",
restricted: true,
},
{
icon: $globals.icons.tags,
to: "/recipes/categories",
title: i18n.t("sidebar.categories"),
},
{
icon: $globals.icons.tags,
to: "/recipes/tags",
title: i18n.t("sidebar.tags"),
},
{
icon: $globals.icons.potSteam,
to: "/recipes/tools",
title: i18n.t("tool.tools"),
},
];
return { cookbookLinks, createLinks, bottomLink, topLinks, isAdmin, languageDialog, toggleDark, sidebar };
},
});
</script>

13
frontend/layouts/explore.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<DefaultLayout />
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import DefaultLayout from "@/components/Layout/DefaultLayout.vue";
export default defineComponent({
components: { DefaultLayout },
});
</script>

19
frontend/lib/api/base/base-clients.ts
View file

@ -20,11 +20,10 @@ export abstract class BaseAPI {
}
}
export abstract class BaseCRUDAPI<CreateType, ReadType, UpdateType = CreateType>
export abstract class BaseCRUDAPIReadOnly<ReadType>
extends BaseAPI
implements CrudAPIInterface
{
abstract baseRoute: string;
implements CrudAPIInterface {
abstract baseRoute: (string);
abstract itemRoute(itemId: string | number): string;
async getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
@ -32,13 +31,17 @@ export abstract class BaseCRUDAPI<CreateType, ReadType, UpdateType = CreateType>
return await this.requests.get<PaginationData<ReadType>>(route(this.baseRoute, { page, perPage, ...params }));
}
async createOne(payload: CreateType) {
return await this.requests.post<ReadType>(this.baseRoute, payload);
}
async getOne(itemId: string | number) {
return await this.requests.get<ReadType>(this.itemRoute(itemId));
}
}
export abstract class BaseCRUDAPI<CreateType, ReadType, UpdateType = CreateType>
extends BaseCRUDAPIReadOnly<ReadType>
implements CrudAPIInterface {
async createOne(payload: CreateType) {
return await this.requests.post<ReadType>(this.baseRoute, payload);
}
async updateOne(itemId: string | number, payload: UpdateType) {
return await this.requests.put<ReadType, UpdateType>(this.itemRoute(itemId), payload);

11
frontend/lib/api/client-public.ts
View file

@ -5,13 +5,20 @@ import { ApiRequestInstance } from "~/lib/api/types/non-generated";
export class PublicApi {
public validators: ValidatorsApi;
public explore: ExploreApi;
public shared: SharedApi;
constructor(requests: ApiRequestInstance) {
this.validators = new ValidatorsApi(requests);
this.explore = new ExploreApi(requests);
this.shared = new SharedApi(requests);
}
}
export class PublicExploreApi extends PublicApi {
public explore: ExploreApi;
constructor(requests: ApiRequestInstance, groupSlug: string) {
super(requests);
this.explore = new ExploreApi(requests, groupSlug);
Object.freeze(this);
}

29
frontend/lib/api/public/explore.ts
View file

@ -1,14 +1,25 @@
import { BaseAPI } from "../base/base-clients";
import { Recipe } from "~/lib/api/types/recipe";
const prefix = "/api";
const routes = {
recipe: (groupSlug: string, recipeSlug: string) => `${prefix}/explore/recipes/${groupSlug}/${recipeSlug}`,
};
import { ApiRequestInstance } from "~/lib/api/types/non-generated";
import { PublicRecipeApi } from "./explore/recipes";
import { PublicFoodsApi } from "./explore/foods";
import { PublicCategoriesApi, PublicTagsApi, PublicToolsApi } from "./explore/organizers";
import { PublicCookbooksApi } from "./explore/cookbooks";
export class ExploreApi extends BaseAPI {
async recipe(groupSlug: string, recipeSlug: string) {
return await this.requests.get<Recipe>(routes.recipe(groupSlug, recipeSlug));
public recipes: PublicRecipeApi;
public cookbooks: PublicCookbooksApi;
public foods: PublicFoodsApi;
public categories: PublicCategoriesApi;
public tags: PublicTagsApi;
public tools: PublicToolsApi;
constructor(requests: ApiRequestInstance, groupSlug: string) {
super(requests);
this.recipes = new PublicRecipeApi(requests, groupSlug);
this.cookbooks = new PublicCookbooksApi(requests, groupSlug);
this.foods = new PublicFoodsApi(requests, groupSlug);
this.categories = new PublicCategoriesApi(requests, groupSlug);
this.tags = new PublicTagsApi(requests, groupSlug);
this.tools = new PublicToolsApi(requests, groupSlug);
}
}

19
frontend/lib/api/public/explore/cookbooks.ts Normal file
View file

@ -0,0 +1,19 @@
import { BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
import { RecipeCookBook } from "~/lib/api/types/cookbook";
import { ApiRequestInstance } from "~/lib/api/types/non-generated";
const prefix = "/api";
const routes = {
cookbooksGroupSlug: (groupSlug: string | number) => `${prefix}/explore/cookbooks/${groupSlug}`,
cookbooksGroupSlugCookbookId: (groupSlug: string | number, cookbookId: string | number) => `${prefix}/explore/cookbooks/${groupSlug}/${cookbookId}`,
};
export class PublicCookbooksApi extends BaseCRUDAPIReadOnly<RecipeCookBook> {
baseRoute = routes.cookbooksGroupSlug(this.groupSlug);
itemRoute = (itemId: string | number) => routes.cookbooksGroupSlugCookbookId(this.groupSlug, itemId);
constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
super(requests);
}
}

19
frontend/lib/api/public/explore/foods.ts Normal file
View file

@ -0,0 +1,19 @@
import { BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
import { IngredientFood } from "~/lib/api/types/recipe";
import { ApiRequestInstance } from "~/lib/api/types/non-generated";
const prefix = "/api";
const routes = {
foodsGroupSlug: (groupSlug: string | number) => `${prefix}/explore/foods/${groupSlug}`,
foodsGroupSlugFoodId: (groupSlug: string | number, foodId: string | number) => `${prefix}/explore/foods/${groupSlug}/${foodId}`,
};
export class PublicFoodsApi extends BaseCRUDAPIReadOnly<IngredientFood> {
baseRoute = routes.foodsGroupSlug(this.groupSlug);
itemRoute = (itemId: string | number) => routes.foodsGroupSlugFoodId(this.groupSlug, itemId);
constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
super(requests);
}
}

41
frontend/lib/api/public/explore/organizers.ts Normal file
View file

@ -0,0 +1,41 @@
import { BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
import { ApiRequestInstance } from "~/lib/api/types/non-generated";
const prefix = "/api";
const routes = {
categoriesGroupSlug: (groupSlug: string | number) => `${prefix}/explore/organizers/${groupSlug}/categories`,
categoriesGroupSlugCategoryId: (groupSlug: string | number, categoryId: string | number) => `${prefix}/explore/organizers/${groupSlug}/categories/${categoryId}`,
tagsGroupSlug: (groupSlug: string | number) => `${prefix}/explore/organizers/${groupSlug}/tags`,
tagsGroupSlugTagId: (groupSlug: string | number, tagId: string | number) => `${prefix}/explore/organizers/${groupSlug}/tags/${tagId}`,
toolsGroupSlug: (groupSlug: string | number) => `${prefix}/explore/organizers/${groupSlug}/tools`,
toolsGroupSlugToolId: (groupSlug: string | number, toolId: string | number) => `${prefix}/explore/organizers/${groupSlug}/tools/${toolId}`,
};
export class PublicCategoriesApi extends BaseCRUDAPIReadOnly<RecipeCategory> {
baseRoute = routes.categoriesGroupSlug(this.groupSlug);
itemRoute = (itemId: string | number) => routes.categoriesGroupSlugCategoryId(this.groupSlug, itemId);
constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
super(requests);
}
}
export class PublicTagsApi extends BaseCRUDAPIReadOnly<RecipeTag> {
baseRoute = routes.tagsGroupSlug(this.groupSlug);
itemRoute = (itemId: string | number) => routes.tagsGroupSlugTagId(this.groupSlug, itemId);
constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
super(requests);
}
}
export class PublicToolsApi extends BaseCRUDAPIReadOnly<RecipeTool> {
baseRoute = routes.toolsGroupSlug(this.groupSlug);
itemRoute = (itemId: string | number) => routes.toolsGroupSlugToolId(this.groupSlug, itemId);
constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
super(requests);
}
}

19
frontend/lib/api/public/explore/recipes.ts Normal file
View file

@ -0,0 +1,19 @@
import { BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
import { Recipe } from "~/lib/api/types/recipe";
import { ApiRequestInstance } from "~/lib/api/types/non-generated";
const prefix = "/api";
const routes = {
recipesGroupSlug: (groupSlug: string | number) => `${prefix}/explore/recipes/${groupSlug}`,
recipesGroupSlugRecipeSlug: (groupSlug: string | number, recipeSlug: string | number) => `${prefix}/explore/recipes/${groupSlug}/${recipeSlug}`,
};
export class PublicRecipeApi extends BaseCRUDAPIReadOnly<Recipe> {
baseRoute = routes.recipesGroupSlug(this.groupSlug);
itemRoute = (itemId: string | number) => routes.recipesGroupSlugRecipeSlug(this.groupSlug, itemId);
constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
super(requests);
}
}

62
frontend/pages/cookbooks/_slug.vue
View file

@ -1,64 +1,12 @@
<template>
<v-container v-if="book" fluid>
<v-app-bar color="transparent" flat class="mt-n1 rounded">
<v-icon large left> {{ $globals.icons.pages }} </v-icon>
<v-toolbar-title class="headline"> {{ book.name }} </v-toolbar-title>
</v-app-bar>
<v-card flat>
<v-card-text class="py-0">
{{ book.description }}
</v-card-text>
</v-card>
<v-container class="pa-0">
<RecipeCardSection
class="mb-5 mx-1"
:recipes="recipes"
:query="{ cookbook: slug }"
@sortRecipes="assignSorted"
@replaceRecipes="replaceRecipes"
@appendRecipes="appendRecipes"
@delete="removeRecipe"
/>
</v-container>
</v-container>
<CookbookPage />
</template>
<script lang="ts">
import { defineComponent, useRoute, ref, useMeta } from "@nuxtjs/composition-api";
import { useLazyRecipes } from "~/composables/recipes";
import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
import { useCookbook } from "~/composables/use-group-cookbooks";
import { defineComponent } from "@nuxtjs/composition-api";
import CookbookPage from "@/components/Domain/Cookbook/CookbookPage.vue";
export default defineComponent({
components: { RecipeCardSection },
setup() {
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
const route = useRoute();
const slug = route.value.params.slug;
const { getOne } = useCookbook();
const tab = ref(null);
const book = getOne(slug);
useMeta(() => {
return {
title: book?.value?.name || "Cookbook",
};
});
return {
book,
slug,
tab,
appendRecipes,
assignSorted,
recipes,
removeRecipe,
replaceRecipes,
};
},
head: {}, // Must include for useMeta
});
components: { CookbookPage },
})
</script>

23
frontend/pages/explore/cookbooks/_groupSlug/_slug.vue Normal file
View file

@ -0,0 +1,23 @@
<template>
<client-only>
<CookbookPage :group-slug="groupSlug" />
</client-only>
</template>
<script lang="ts">
import { defineComponent, useRoute } from "@nuxtjs/composition-api";
import CookbookPage from "@/components/Domain/Cookbook/CookbookPage.vue";
export default defineComponent({
components: { CookbookPage },
layout: "explore",
setup() {
const route = useRoute();
const groupSlug = route.value.params.groupSlug;
return {
groupSlug,
}
},
})
</script>

14
frontend/pages/explore/recipes/_groupSlug/_slug.vue → frontend/pages/explore/recipes/_groupSlug/_recipeSlug.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<div v-if="recipe">
<client-only>
<RecipePage v-if="recipe" :recipe="recipe" />
<RecipePage :recipe="recipe" />
</client-only>
</div>
</template>
@ -9,24 +9,24 @@
<script lang="ts">
import { defineComponent, ref, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
import { usePublicApi } from "~/composables/api/api-client";
import { usePublicExploreApi } from "~/composables/api/api-client";
import { useRecipeMeta } from "~/composables/recipes";
export default defineComponent({
components: { RecipePage },
layout: "basic",
layout: "explore",
setup() {
const route = useRoute();
const router = useRouter();
const groupSlug = route.value.params.groupSlug;
const slug = route.value.params.slug;
const api = usePublicApi();
const recipeSlug = route.value.params.recipeSlug;
const api = usePublicExploreApi(groupSlug);
const { meta, title } = useMeta();
const { recipeMeta } = useRecipeMeta();
const recipe = useAsync(async () => {
const { data, error } = await api.explore.recipe(groupSlug, slug);
const { data, error } = await api.explore.recipes.getOne(recipeSlug);
if (error) {
console.error("error loading recipe -> ", error);

42
frontend/pages/explore/recipes/_groupSlug/index.vue Normal file
View file

@ -0,0 +1,42 @@
<template>
<div v-if="groupSlug">
<client-only>
<RecipeExplorerPage :group-slug="groupSlug" />
</client-only>
</div>
</template>
<script lang="ts">
import { defineComponent, useRoute, useRouter } from "@nuxtjs/composition-api";
import { invoke } from "@vueuse/core";
import RecipeExplorerPage from "~/components/Domain/Recipe/RecipeExplorerPage.vue";
import { usePublicExploreApi } from "~/composables/api/api-client";
export default defineComponent({
components: { RecipeExplorerPage },
layout: "explore",
setup() {
const route = useRoute();
const router = useRouter();
const groupSlug = route.value.params.groupSlug;
const api = usePublicExploreApi(groupSlug);
invoke(async () => {
if (!groupSlug) {
return;
}
// try to fetch one tag to make sure the group slug is valid
const { data } = await api.explore.tags.getAll(1, 1);
if (!data) {
// the group slug is invalid, so leave the page (this results in a 404)
router.push("/explore/recipes");
}
});
return {
groupSlug,
};
},
});
</script>

487
frontend/pages/index.vue
View file

@ -1,481 +1,40 @@
<template>
<v-container fluid class="pa-0">
<div class="search-container py-8">
<form class="search-box pa-2" @submit.prevent="search">
<div class="d-flex justify-center my-2">
<v-text-field
ref="input"
v-model="state.search"
outlined
hide-details
clearable
color="primary"
:placeholder="$tc('search.search-placeholder')"
:prepend-inner-icon="$globals.icons.search"
@keyup.enter="hideKeyboard"
/>
</div>
<div class="search-row">
<!-- Category Filter -->
<SearchFilter
v-if="categories"
v-model="selectedCategories"
:require-all.sync="state.requireAllCategories"
:items="categories"
>
<v-icon left>
{{ $globals.icons.tags }}
</v-icon>
{{ $t("category.categories") }}
</SearchFilter>
<!-- Tag Filter -->
<SearchFilter v-if="tags" v-model="selectedTags" :require-all.sync="state.requireAllTags" :items="tags">
<v-icon left>
{{ $globals.icons.tags }}
</v-icon>
{{ $t("tag.tags") }}
</SearchFilter>
<!-- Tool Filter -->
<SearchFilter v-if="tools" v-model="selectedTools" :require-all.sync="state.requireAllTools" :items="tools">
<v-icon left>
{{ $globals.icons.tools }}
</v-icon>
{{ $t("tool.tools") }}
</SearchFilter>
<!-- Food Filter -->
<SearchFilter v-if="foods" v-model="selectedFoods" :require-all.sync="state.requireAllFoods" :items="foods">
<v-icon left>
{{ $globals.icons.foods }}
</v-icon>
{{ $t("general.foods") }}
</SearchFilter>
<!-- Sort Options -->
<v-menu offset-y nudge-bottom="3">
<template #activator="{ on, attrs }">
<v-btn class="ml-auto" small color="accent" v-bind="attrs" v-on="on">
<v-icon :left="!$vuetify.breakpoint.xsOnly">
{{ state.orderDirection === "asc" ? $globals.icons.sortAscending : $globals.icons.sortDescending }}
</v-icon>
{{ $vuetify.breakpoint.xsOnly ? null : sortText }}
</v-btn>
</template>
<v-card>
<v-list>
<v-list-item @click="toggleOrderDirection()">
<v-icon left>
{{ $globals.icons.sort }}
</v-icon>
<v-list-item-title>
{{ state.orderDirection === "asc" ? "Sort Descending" : "Sort Ascending" }}
</v-list-item-title>
</v-list-item>
<v-list-item
v-for="v in sortable"
:key="v.name"
:input-value="state.orderBy === v.value"
@click="state.orderBy = v.value"
>
<v-icon left>
{{ v.icon }}
</v-icon>
<v-list-item-title>{{ v.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-card>
</v-menu>
<!-- Settings -->
<v-menu offset-y bottom left nudge-bottom="3" :close-on-content-click="false">
<template #activator="{ on, attrs }">
<v-btn small color="accent" dark v-bind="attrs" v-on="on">
<v-icon small>
{{ $globals.icons.cog }}
</v-icon>
</v-btn>
</template>
<v-card>
<v-card-text>
<v-switch v-model="state.auto" :label="$t('search.auto-search')" single-line></v-switch>
<v-btn block color="primary" @click="reset">
{{ $tc("general.reset") }}
</v-btn>
</v-card-text>
</v-card>
</v-menu>
</div>
<div v-if="!state.auto" class="search-button-container">
<v-btn x-large color="primary" type="submit" block>
<v-icon left>
{{ $globals.icons.search }}
</v-icon>
{{ $tc("search.search") }}
</v-btn>
</div>
</form>
</div>
<v-divider></v-divider>
<v-container class="mt-6 px-md-6">
<RecipeCardSection
class="mt-n5"
:icon="$globals.icons.search"
:title="$tc('search.results')"
:recipes="recipes"
:query="passedQuery"
@replaceRecipes="replaceRecipes"
@appendRecipes="appendRecipes"
/>
</v-container>
</v-container>
<div v-if="groupSlug">
<RecipeExplorerPage :group-slug="groupSlug" />
</div>
</template>
<script lang="ts">
import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref } from "@nuxtjs/composition-api";
import { watchDebounced } from "@vueuse/shared";
import SearchFilter from "~/components/Domain/SearchFilter.vue";
import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
import { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
import { NoUndefinedField } from "~/lib/api/types/non-generated";
import { useLazyRecipes } from "~/composables/recipes";
import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
import { invoke } from "@vueuse/core";
import { useUserApi } from "~/composables/api/api-client";
import RecipeExplorerPage from "~/components/Domain/Recipe/RecipeExplorerPage.vue";
export default defineComponent({
components: { SearchFilter, RecipeCardSection },
components: { RecipeExplorerPage },
setup() {
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
const { $auth } = useContext();
const api = useUserApi();
const router = useRouter();
const { $globals, i18n } = useContext();
// @ts-ignore $auth.user is typed as unknown, even though it's a user
const groupId: string | undefined = $auth.user?.groupId;
const groupSlug = ref<string>();
const state = ref({
auto: true,
search: "",
orderBy: "created_at",
orderDirection: "desc" as "asc" | "desc",
// and/or
requireAllCategories: false,
requireAllTags: false,
requireAllTools: false,
requireAllFoods: false,
invoke(async () => {
if (!groupId) {
return;
}
const { data } = await api.groups.getOne(groupId);
if (data) {
groupSlug.value = data.slug;
}
});
const categories = useCategoryStore();
const selectedCategories = ref<NoUndefinedField<RecipeCategory>[]>([]);
const foods = useFoodStore();
const selectedFoods = ref<IngredientFood[]>([]);
const tags = useTagStore();
const selectedTags = ref<NoUndefinedField<RecipeTag>[]>([]);
const tools = useToolStore();
const selectedTools = ref<NoUndefinedField<RecipeTool>[]>([]);
const passedQuery = ref<RecipeSearchQuery | null>(null);
function reset() {
state.value.search = "";
state.value.orderBy = "created_at";
state.value.orderDirection = "desc";
state.value.requireAllCategories = false;
state.value.requireAllTags = false;
state.value.requireAllTools = false;
state.value.requireAllFoods = false;
selectedCategories.value = [];
selectedFoods.value = [];
selectedTags.value = [];
selectedTools.value = [];
router.push({
query: {},
});
search();
}
function toggleOrderDirection() {
state.value.orderDirection = state.value.orderDirection === "asc" ? "desc" : "asc";
}
function toIDArray(array: { id: string }[]) {
return array.map((item) => item.id);
}
function hideKeyboard() {
input.value.blur()
}
const input: Ref<any> = ref(null);
async function search() {
await router.push({
query: {
categories: toIDArray(selectedCategories.value),
foods: toIDArray(selectedFoods.value),
tags: toIDArray(selectedTags.value),
tools: toIDArray(selectedTools.value),
// Only add the query param if it's or not default
...{
auto: state.value.auto ? undefined : "false",
search: state.value.search === "" ? undefined : state.value.search,
orderBy: state.value.orderBy === "createdAt" ? undefined : state.value.orderBy,
orderDirection: state.value.orderDirection === "desc" ? undefined : state.value.orderDirection,
requireAllCategories: state.value.requireAllCategories ? "true" : undefined,
requireAllTags: state.value.requireAllTags ? "true" : undefined,
requireAllTools: state.value.requireAllTools ? "true" : undefined,
requireAllFoods: state.value.requireAllFoods ? "true" : undefined,
},
},
});
passedQuery.value = {
search: state.value.search,
categories: toIDArray(selectedCategories.value),
foods: toIDArray(selectedFoods.value),
tags: toIDArray(selectedTags.value),
tools: toIDArray(selectedTools.value),
requireAllCategories: state.value.requireAllCategories,
requireAllTags: state.value.requireAllTags,
requireAllTools: state.value.requireAllTools,
requireAllFoods: state.value.requireAllFoods,
orderBy: state.value.orderBy,
orderDirection: state.value.orderDirection,
_searchSeed: Date.now().toString()
};
}
function waitUntilAndExecute(
condition: () => boolean,
callback: () => void,
opts = { timeout: 2000, interval: 500 }
): Promise<void> {
return new Promise((resolve, reject) => {
const state = {
timeout: undefined as number | undefined,
interval: undefined as number | undefined,
};
const check = () => {
if (condition()) {
clearInterval(state.interval);
clearTimeout(state.timeout);
callback();
resolve();
}
};
// For some reason these were returning NodeJS.Timeout
state.interval = setInterval(check, opts.interval) as unknown as number;
state.timeout = setTimeout(() => {
clearInterval(state.interval);
reject(new Error("Timeout"));
}, opts.timeout) as unknown as number;
});
}
const sortText = computed(() => {
const sort = sortable.find((s) => s.value === state.value.orderBy);
if (!sort) return "";
return `${sort.name}`;
});
const sortable = [
{
icon: $globals.icons.orderAlphabeticalAscending,
name: i18n.tc("general.sort-alphabetically"),
value: "name",
},
{
icon: $globals.icons.newBox,
name: i18n.tc("general.created"),
value: "created_at",
},
{
icon: $globals.icons.chefHat,
name: i18n.tc("general.last-made"),
value: "last_made",
},
{
icon: $globals.icons.star,
name: i18n.tc("general.rating"),
value: "rating",
},
{
icon: $globals.icons.update,
name: i18n.tc("general.updated"),
value: "update_at",
},
{
icon: $globals.icons.diceMultiple,
name: i18n.tc("general.random"),
value: "random",
},
];
onMounted(() => {
// Hydrate Search
// wait for stores to be hydrated
// read query params
const query = router.currentRoute.query;
if (query.auto) {
state.value.auto = query.auto === "true";
}
if (query.search) {
state.value.search = query.search as string;
}
if (query.orderBy) {
state.value.orderBy = query.orderBy as string;
}
if (query.orderDirection) {
state.value.orderDirection = query.orderDirection as "asc" | "desc";
}
const promises: Promise<void>[] = [];
if (query.categories) {
promises.push(
waitUntilAndExecute(
() => categories.items.value.length > 0,
() => {
const result = categories.items.value.filter((item) =>
(query.categories as string[]).includes(item.id as string)
);
selectedCategories.value = result as NoUndefinedField<RecipeCategory>[];
}
)
);
}
if (query.foods) {
promises.push(
waitUntilAndExecute(
() => {
if (foods.foods.value) {
return foods.foods.value.length > 0;
}
return false;
},
() => {
const result = foods.foods.value?.filter((item) => (query.foods as string[]).includes(item.id));
selectedFoods.value = result ?? [];
}
)
);
}
if (query.tags) {
promises.push(
waitUntilAndExecute(
() => tags.items.value.length > 0,
() => {
const result = tags.items.value.filter((item) => (query.tags as string[]).includes(item.id as string));
selectedTags.value = result as NoUndefinedField<RecipeTag>[];
}
)
);
}
if (query.tools) {
promises.push(
waitUntilAndExecute(
() => tools.items.value.length > 0,
() => {
const result = tools.items.value.filter((item) => (query.tools as string[]).includes(item.id));
selectedTools.value = result as NoUndefinedField<RecipeTool>[];
}
)
);
}
Promise.allSettled(promises).then(() => {
search();
});
});
watchDebounced(
[
() => state.value.search,
() => state.value.requireAllCategories,
() => state.value.requireAllTags,
() => state.value.requireAllTools,
() => state.value.requireAllFoods,
() => state.value.orderBy,
() => state.value.orderDirection,
selectedCategories,
selectedFoods,
selectedTags,
selectedTools,
],
async () => {
if (state.value.auto) {
await search();
}
},
{
debounce: 500,
}
);
return {
sortText,
search,
reset,
state,
categories: categories.items as unknown as NoUndefinedField<RecipeCategory>[],
tags: tags.items as unknown as NoUndefinedField<RecipeTag>[],
foods: foods.foods,
tools: tools.items as unknown as NoUndefinedField<RecipeTool>[],
sortable,
toggleOrderDirection,
hideKeyboard,
input,
selectedCategories,
selectedFoods,
selectedTags,
selectedTools,
appendRecipes,
assignSorted,
recipes,
removeRecipe,
replaceRecipes,
passedQuery,
groupSlug,
};
},
});
</script>
<style lang="css">
.search-row {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: 1rem;
}
.search-container {
display: flex;
justify-content: center;
}
.search-box {
width: 950px;
}
.search-button-container {
margin: 3rem auto 0 auto;
max-width: 500px;
}
</style>

70
frontend/pages/user/profile/index.vue
View file

@ -16,18 +16,29 @@
</v-icon>
{{ $t('profile.get-invite-link') }}
</v-btn>
<v-btn
v-if="group && group.preferences && !group.preferences.privateGroup"
outlined
rounded
@click="getPublicLink()"
>
<v-icon left>
{{ $globals.icons.shareVariant }}
</v-icon>
{{ $t('profile.get-public-link') }}
</v-btn>
</v-card-actions>
<div v-show="generatedLink !== ''">
<div v-show="generatedSignupLink !== ''">
<v-card-text>
<p class="text-center pb-0">
{{ generatedLink }}
{{ generatedSignupLink }}
</p>
<v-text-field v-model="sendTo" :label="$t('user.email')" :rules="[validators.email]"> </v-text-field>
</v-card-text>
<v-card-actions class="py-0 align-center" style="gap: 4px">
<BaseButton cancel @click="generatedLink = ''"> {{ $t("general.close") }} </BaseButton>
<BaseButton cancel @click="generatedSignupLink = ''"> {{ $t("general.close") }} </BaseButton>
<v-spacer></v-spacer>
<AppButtonCopy :icon="false" color="info" :copy-text="generatedLink" />
<AppButtonCopy :icon="false" color="info" :copy-text="generatedSignupLink" />
<BaseButton color="info" :disabled="!validEmail" :loading="loading" @click="sendInvite">
<template #icon>
{{ $globals.icons.email }}
@ -36,6 +47,18 @@
</BaseButton>
</v-card-actions>
</div>
<div v-show="showPublicLink">
<v-card-text>
<p class="text-center pb-0">
{{ publicLink }}
</p>
</v-card-text>
<v-card-actions class="py-0 align-center" style="gap: 4px">
<BaseButton cancel @click="showPublicLink = false"> {{ $t("general.close") }} </BaseButton>
<v-spacer></v-spacer>
<AppButtonCopy :icon="false" color="info" :copy-text="publicLink" />
</v-card-actions>
</div>
</v-card>
</section>
<section class="my-3">
@ -196,6 +219,7 @@
<script lang="ts">
import { computed, defineComponent, useContext, ref, toRefs, reactive, useAsync } from "@nuxtjs/composition-api";
import { invoke, until } from "@vueuse/core";
import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vue";
import { useUserApi } from "~/composables/api";
import { validators } from "~/composables/use-validators";
@ -203,6 +227,7 @@ import { alert } from "~/composables/use-toast";
import UserAvatar from "@/components/Domain/User/UserAvatar.vue";
import { useAsyncKey } from "~/composables/use-utils";
import StatsCards from "~/components/global/StatsCards.vue";
import { GroupInDB, UserOut } from "~/lib/api/types/user";
export default defineComponent({
name: "UserProfile",
@ -215,16 +240,41 @@ export default defineComponent({
setup() {
const { $auth, i18n } = useContext();
const user = computed(() => $auth.user);
// @ts-ignore $auth.user is typed as unknown, but it's a user
const user = computed<UserOut | null>(() => $auth.user);
const group = ref<GroupInDB | null>(null);
const generatedLink = ref("");
const showPublicLink = ref(false);
const publicLink = ref("");
const generatedSignupLink = ref("");
const token = ref("");
const api = useUserApi();
invoke(async () => {
await until(user.value).not.toBeNull();
if (!user.value) {
return;
}
const { data } = await api.groups.getOne(user.value.groupId);
group.value = data;
});
function getPublicLink() {
if (group.value) {
publicLink.value = `${window.location.origin}/explore/recipes/${group.value.slug}`
showPublicLink.value = true;
generatedSignupLink.value = "";
}
}
async function getSignupLink() {
const { data } = await api.groups.createInvitation({ uses: 1 });
if (data) {
token.value = data.token;
generatedLink.value = constructLink(data.token);
generatedSignupLink.value = constructLink(data.token);
showPublicLink.value = false;
}
}
@ -341,11 +391,15 @@ export default defineComponent({
getStatsTitle,
getStatsIcon,
getStatsTo,
group,
stats,
user,
constructLink,
generatedLink,
generatedSignupLink,
showPublicLink,
publicLink,
getSignupLink,
getPublicLink,
sendInvite,
validators,
validEmail,

3
frontend/types/application-types.ts
View file

@ -4,8 +4,9 @@ export interface SideBarLink {
icon: string;
to?: string;
href?: string;
title: TranslateResult;
title: string;
children?: SideBarLink[];
restricted: boolean;
}
export type SidebarLinks = Array<SideBarLink>;

10
frontend/types/components.d.ts vendored
View file

@ -32,10 +32,7 @@ import ReportTable from "@/components/global/ReportTable.vue";
import SafeMarkdown from "@/components/global/SafeMarkdown.vue";
import StatsCards from "@/components/global/StatsCards.vue";
import ToggleState from "@/components/global/ToggleState.vue";
import AppFooter from "@/components/layout/AppFooter.vue";
import AppHeader from "@/components/layout/AppHeader.vue";
import AppSidebar from "@/components/layout/AppSidebar.vue";
import TheSnackbar from "@/components/layout/TheSnackbar.vue";
import DefaultLayout from "@/components/layout/DefaultLayout.vue";
declare module "vue" {
export interface GlobalComponents {
@ -74,10 +71,7 @@ declare module "vue" {
StatsCards: typeof StatsCards;
ToggleState: typeof ToggleState;
// Layout Components
AppFooter: typeof AppFooter;
AppHeader: typeof AppHeader;
AppSidebar: typeof AppSidebar;
TheSnackbar: typeof TheSnackbar;
DefaultLayout: typeof DefaultLayout;
}
}