mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-10 15:05:35 -04:00
chore: Nuxt 4 upgrade (#7426)
This commit is contained in:
Kuchenpirat
GitHub
288
frontend/app/components/Layout/DefaultLayout.vue
Normal file
288
frontend/app/components/Layout/DefaultLayout.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<v-app dark>
|
||||
<TheSnackbar />
|
||||
|
||||
<AppHeader>
|
||||
<v-btn
|
||||
icon
|
||||
@click.stop="sidebar = !sidebar"
|
||||
>
|
||||
<v-icon> {{ $globals.icons.menu }}</v-icon>
|
||||
</v-btn>
|
||||
</AppHeader>
|
||||
|
||||
<AppSidebar
|
||||
v-model="sidebar"
|
||||
absolute
|
||||
:top-link="topLinks"
|
||||
:secondary-links="cookbookLinks || []"
|
||||
>
|
||||
<v-menu
|
||||
offset-y
|
||||
nudge-bottom="5"
|
||||
close-delay="50"
|
||||
nudge-right="15"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
v-if="isOwnGroup"
|
||||
rounded
|
||||
size="large"
|
||||
class="ml-2 mt-3"
|
||||
v-bind="props"
|
||||
variant="elevated"
|
||||
elevation="2"
|
||||
:color="$vuetify.theme.current.dark ? 'background-lighten-1' : 'background-darken-1'"
|
||||
>
|
||||
<v-icon
|
||||
start
|
||||
size="large"
|
||||
color="primary"
|
||||
>
|
||||
{{ $globals.icons.createAlt }}
|
||||
</v-icon>
|
||||
{{ $t("general.create") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list
|
||||
density="comfortable"
|
||||
class="mb-0 mt-1 py-0"
|
||||
variant="flat"
|
||||
>
|
||||
<template v-for="(item, index) in createLinks">
|
||||
<div
|
||||
v-if="!item.hide"
|
||||
:key="item.title"
|
||||
>
|
||||
<v-divider
|
||||
v-if="item.insertDivider"
|
||||
:key="index"
|
||||
class="mx-2"
|
||||
/>
|
||||
<v-list-item
|
||||
v-if="!item.restricted || isOwnGroup"
|
||||
:key="item.title"
|
||||
:to="item.to"
|
||||
exact
|
||||
class="my-1"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-icon
|
||||
size="40"
|
||||
:icon="item.icon"
|
||||
/>
|
||||
</template>
|
||||
<v-list-item-title class="font-weight-medium" style="font-size: small;">
|
||||
{{ item.title }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle class="font-weight-medium" style="font-size: small;">
|
||||
{{ item.subtitle }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</AppSidebar>
|
||||
<v-main class="pt-12">
|
||||
<v-scroll-x-transition>
|
||||
<div>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</v-scroll-x-transition>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useLoggedInState } from "~/composables/use-logged-in-state";
|
||||
import type { SideBarLink } from "~/types/application-types";
|
||||
import { useCookbookPreferences } from "~/composables/use-users/preferences";
|
||||
import { useCookbookStore, usePublicCookbookStore } from "~/composables/store/use-cookbook-store";
|
||||
import type { ReadCookBook } from "~/lib/api/types/cookbook";
|
||||
|
||||
const i18n = useI18n();
|
||||
const { $appInfo, $globals } = useNuxtApp();
|
||||
const display = useDisplay();
|
||||
const auth = useMealieAuth();
|
||||
const { isOwnGroup } = useLoggedInState();
|
||||
|
||||
const route = useRoute();
|
||||
const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
|
||||
|
||||
const cookbookPreferences = useCookbookPreferences();
|
||||
const ownCookbookStore = useCookbookStore(i18n);
|
||||
const publicCookbookStoreCache = ref<Record<string, ReturnType<typeof usePublicCookbookStore>>>({});
|
||||
|
||||
function getPublicCookbookStore(slug: string) {
|
||||
if (!publicCookbookStoreCache.value[slug]) {
|
||||
publicCookbookStoreCache.value[slug] = usePublicCookbookStore(slug, i18n);
|
||||
}
|
||||
return publicCookbookStoreCache.value[slug];
|
||||
}
|
||||
|
||||
const cookbooks = computed(() => {
|
||||
if (isOwnGroup.value) {
|
||||
return ownCookbookStore.store.value;
|
||||
}
|
||||
else if (groupSlug.value) {
|
||||
const publicStore = getPublicCookbookStore(groupSlug.value);
|
||||
return unref(publicStore.store);
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
const showImageImport = computed(() => $appInfo.enableOpenaiImageServices);
|
||||
|
||||
const sidebar = ref<boolean>(false);
|
||||
onMounted(() => {
|
||||
sidebar.value = display.lgAndUp.value;
|
||||
});
|
||||
|
||||
function cookbookAsLink(cookbook: ReadCookBook): SideBarLink {
|
||||
return {
|
||||
key: cookbook.slug || "",
|
||||
icon: $globals.icons.pages,
|
||||
title: cookbook.name,
|
||||
to: `/g/${groupSlug.value}/cookbooks/${cookbook.slug || ""}`,
|
||||
restricted: false,
|
||||
};
|
||||
}
|
||||
|
||||
const currentUserHouseholdId = computed(() => auth.user.value?.householdId);
|
||||
const cookbookLinks = computed<SideBarLink[]>(() => {
|
||||
if (!cookbooks.value?.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const sortedCookbooks = [...cookbooks.value].sort((a, b) => (a.position || 0) - (b.position || 0));
|
||||
|
||||
const ownLinks: SideBarLink[] = [];
|
||||
const links: SideBarLink[] = [];
|
||||
const cookbooksByHousehold = sortedCookbooks.reduce((acc, cookbook) => {
|
||||
const householdName = cookbook.household?.name || "";
|
||||
(acc[householdName] ||= []).push(cookbook);
|
||||
return acc;
|
||||
}, {} as Record<string, ReadCookBook[]>);
|
||||
|
||||
Object.entries(cookbooksByHousehold).forEach(([householdName, cookbooks]) => {
|
||||
if (!cookbooks.length) {
|
||||
return;
|
||||
}
|
||||
if (cookbooks[0].householdId === currentUserHouseholdId.value) {
|
||||
ownLinks.push(...cookbooks.map(cookbookAsLink));
|
||||
}
|
||||
else {
|
||||
links.push({
|
||||
key: householdName,
|
||||
icon: $globals.icons.book,
|
||||
title: householdName,
|
||||
children: cookbooks.map(cookbookAsLink),
|
||||
restricted: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
links.sort((a, b) => a.title.localeCompare(b.title));
|
||||
if (auth.user.value && cookbookPreferences.value.hideOtherHouseholds) {
|
||||
return ownLinks;
|
||||
}
|
||||
else {
|
||||
return [...ownLinks, ...links];
|
||||
}
|
||||
});
|
||||
|
||||
const createLinks = computed(() => [
|
||||
{
|
||||
insertDivider: false,
|
||||
icon: $globals.icons.link,
|
||||
title: i18n.t("general.import"),
|
||||
subtitle: i18n.t("new-recipe.import-by-url"),
|
||||
to: `/g/${groupSlug.value}/r/create/url`,
|
||||
restricted: true,
|
||||
hide: false,
|
||||
},
|
||||
{
|
||||
insertDivider: false,
|
||||
icon: $globals.icons.fileImage,
|
||||
title: i18n.t("recipe.create-from-images"),
|
||||
subtitle: i18n.t("recipe.create-recipe-from-an-image"),
|
||||
to: `/g/${groupSlug.value}/r/create/image`,
|
||||
restricted: true,
|
||||
hide: !showImageImport.value,
|
||||
},
|
||||
{
|
||||
insertDivider: true,
|
||||
icon: $globals.icons.edit,
|
||||
title: i18n.t("general.create"),
|
||||
subtitle: i18n.t("new-recipe.create-manually"),
|
||||
to: `/g/${groupSlug.value}/r/create/new`,
|
||||
restricted: true,
|
||||
hide: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const topLinks = computed<SideBarLink[]>(() => [
|
||||
{
|
||||
icon: $globals.icons.silverwareForkKnife,
|
||||
to: `/g/${groupSlug.value}`,
|
||||
title: i18n.t("general.recipes"),
|
||||
restricted: false,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.search,
|
||||
to: `/g/${groupSlug.value}/recipes/finder`,
|
||||
title: i18n.t("recipe-finder.recipe-finder"),
|
||||
restricted: false,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.calendarMultiselect,
|
||||
title: i18n.t("meal-plan.meal-planner"),
|
||||
to: "/household/mealplan/planner/view",
|
||||
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: `/g/${groupSlug.value}/recipes/timeline`,
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.book,
|
||||
to: `/g/${groupSlug.value}/cookbooks`,
|
||||
title: i18n.t("cookbook.cookbooks"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.organizers,
|
||||
title: i18n.t("general.organizers"),
|
||||
restricted: true,
|
||||
children: [
|
||||
{
|
||||
icon: $globals.icons.categories,
|
||||
to: `/g/${groupSlug.value}/recipes/categories`,
|
||||
title: i18n.t("sidebar.categories"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.tags,
|
||||
to: `/g/${groupSlug.value}/recipes/tags`,
|
||||
title: i18n.t("sidebar.tags"),
|
||||
restricted: true,
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.potSteam,
|
||||
to: `/g/${groupSlug.value}/recipes/tools`,
|
||||
title: i18n.t("tool.tools"),
|
||||
restricted: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
31
frontend/app/components/Layout/LayoutParts/AppFooter.vue
Normal file
31
frontend/app/components/Layout/LayoutParts/AppFooter.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<v-footer
|
||||
color="primary"
|
||||
padless
|
||||
app
|
||||
>
|
||||
<v-row
|
||||
justify="center"
|
||||
align="center"
|
||||
dense
|
||||
no-gutters
|
||||
>
|
||||
<v-col
|
||||
class="py-2 text-center white--text"
|
||||
cols="12"
|
||||
>
|
||||
<v-btn
|
||||
color="white"
|
||||
icon
|
||||
href="https://github.com/mealie-recipes/mealie"
|
||||
target="_blank"
|
||||
>
|
||||
<v-icon>
|
||||
{{ $globals.icons.github }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
{{ new Date().getFullYear() }} — <strong> Mealie </strong>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-footer>
|
||||
</template>
|
||||
140
frontend/app/components/Layout/LayoutParts/AppHeader.vue
Normal file
140
frontend/app/components/Layout/LayoutParts/AppHeader.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<v-app-bar
|
||||
clipped-left
|
||||
density="compact"
|
||||
app
|
||||
color="primary"
|
||||
dark
|
||||
class="d-print-none"
|
||||
>
|
||||
<slot />
|
||||
<RouterLink :to="routerLink">
|
||||
<v-btn
|
||||
icon
|
||||
color="white"
|
||||
>
|
||||
<v-icon size="40"> {{ $globals.icons.primary }} </v-icon>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
<div
|
||||
btn
|
||||
class="pl-2"
|
||||
>
|
||||
<v-toolbar-title
|
||||
style="cursor: pointer"
|
||||
@click="$router.push(routerLink)"
|
||||
>
|
||||
Mealie
|
||||
</v-toolbar-title>
|
||||
</div>
|
||||
<RecipeDialogSearch ref="domSearchDialog" />
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<!-- Navigation Menu -->
|
||||
<template v-if="menu">
|
||||
<v-responsive
|
||||
v-if="!xs"
|
||||
max-width="250"
|
||||
@click="activateSearch"
|
||||
>
|
||||
<v-text-field
|
||||
readonly
|
||||
class="mt-1"
|
||||
rounded
|
||||
variant="solo-filled"
|
||||
density="compact"
|
||||
flat
|
||||
:prepend-inner-icon="$globals.icons.search"
|
||||
bg-color="primary-darken-1"
|
||||
:placeholder="$t('search.search-hint')"
|
||||
/>
|
||||
</v-responsive>
|
||||
<v-btn
|
||||
v-else
|
||||
icon
|
||||
@click="activateSearch"
|
||||
>
|
||||
<v-icon> {{ $globals.icons.search }}</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="loggedIn"
|
||||
:variant="smAndUp ? 'text' : undefined"
|
||||
:icon="xs"
|
||||
@click="logout()"
|
||||
>
|
||||
<v-icon :start="smAndUp">
|
||||
{{ $globals.icons.logout }}
|
||||
</v-icon>
|
||||
{{ smAndUp ? $t("user.logout") : "" }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-else
|
||||
variant="text"
|
||||
nuxt
|
||||
to="/login"
|
||||
>
|
||||
<v-icon start>
|
||||
{{ $globals.icons.user }}
|
||||
</v-icon>
|
||||
{{ $t("user.login") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useLoggedInState } from "~/composables/use-logged-in-state";
|
||||
import type RecipeDialogSearch from "~/components/Domain/Recipe/RecipeDialogSearch.vue";
|
||||
|
||||
defineProps({
|
||||
menu: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const auth = useMealieAuth();
|
||||
const { loggedIn } = useLoggedInState();
|
||||
const route = useRoute();
|
||||
const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
|
||||
const { xs, smAndUp } = useDisplay();
|
||||
|
||||
const routerLink = computed(() => groupSlug.value ? `/g/${groupSlug.value}` : "/");
|
||||
const domSearchDialog = ref<InstanceType<typeof RecipeDialogSearch> | null>(null);
|
||||
|
||||
function activateSearch() {
|
||||
domSearchDialog.value?.open();
|
||||
}
|
||||
|
||||
function handleKeyEvent(e: KeyboardEvent) {
|
||||
const activeTag = document.activeElement?.tagName;
|
||||
if (e.key === "/" && activeTag !== "INPUT" && activeTag !== "TEXTAREA") {
|
||||
e.preventDefault();
|
||||
activateSearch();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener("keydown", handleKeyEvent);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener("keydown", handleKeyEvent);
|
||||
});
|
||||
|
||||
async function logout() {
|
||||
try {
|
||||
await auth.signOut("/login?direct=1");
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-toolbar {
|
||||
z-index: 2010 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<v-fade-transition>
|
||||
<v-btn
|
||||
v-if="showButton"
|
||||
icon
|
||||
position="fixed"
|
||||
location="bottom right"
|
||||
class="ma-4"
|
||||
color="primary"
|
||||
elevation="4"
|
||||
style="z-index: 999;"
|
||||
@click="scrollToTop"
|
||||
>
|
||||
<v-icon>{{ $globals.icons.arrowUp }}</v-icon>
|
||||
</v-btn>
|
||||
</v-fade-transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const showButton = ref(false);
|
||||
const threshold = 400;
|
||||
|
||||
function onScroll() {
|
||||
showButton.value = document.documentElement.scrollTop > threshold;
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", onScroll);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("scroll", onScroll);
|
||||
});
|
||||
</script>
|
||||
212
frontend/app/components/Layout/LayoutParts/AppSidebar.vue
Normal file
212
frontend/app/components/Layout/LayoutParts/AppSidebar.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<v-navigation-drawer v-model="modelValue" class="d-flex flex-column d-print-none position-fixed" touchless>
|
||||
<LanguageDialog v-model="state.languageDialog" />
|
||||
<!-- User Profile -->
|
||||
<template v-if="loggedIn && sessionUser">
|
||||
<v-list-item lines="two" :to="userProfileLink" exact>
|
||||
<div class="d-flex align-center ga-2">
|
||||
<UserAvatar list :user-id="sessionUser.id" :tooltip="false" />
|
||||
|
||||
<div class="d-flex flex-column justify-start">
|
||||
<v-list-item-title class="pr-2 pl-1">
|
||||
{{ sessionUser.fullName }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle class="opacity-100">
|
||||
<v-btn v-if="isOwnGroup" class="px-2 pa-0" variant="text" :to="userFavoritesLink" size="small">
|
||||
<v-icon start size="small">
|
||||
{{ $globals.icons.heart }}
|
||||
</v-icon>
|
||||
{{ $t("user.favorite-recipes") }}
|
||||
</v-btn>
|
||||
</v-list-item-subtitle>
|
||||
</div>
|
||||
</div>
|
||||
</v-list-item>
|
||||
<v-divider />
|
||||
</template>
|
||||
|
||||
<slot />
|
||||
|
||||
<!-- Primary Links -->
|
||||
<template v-if="topLink">
|
||||
<v-list v-model:selected="state.secondarySelected" nav density="comfortable" color="primary">
|
||||
<template v-for="nav in topLink">
|
||||
<div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
|
||||
<!-- Multi Items -->
|
||||
<v-list-group
|
||||
v-if="nav.children"
|
||||
:key="(nav.key || nav.title) + 'multi-item'"
|
||||
v-model="state.dropDowns[nav.title]"
|
||||
color="primary"
|
||||
:prepend-icon="nav.icon"
|
||||
:fluid="true"
|
||||
>
|
||||
<template #activator="{ props: hoverProps }">
|
||||
<v-list-item v-bind="hoverProps" :prepend-icon="nav.icon" :title="nav.title" />
|
||||
</template>
|
||||
|
||||
<v-list-item
|
||||
v-for="child in nav.children"
|
||||
:key="child.key || child.title"
|
||||
exact
|
||||
:to="child.to"
|
||||
:prepend-icon="child.icon"
|
||||
:title="child.title"
|
||||
class="ml-4"
|
||||
/>
|
||||
</v-list-group>
|
||||
|
||||
<!-- Single Item -->
|
||||
<template v-else>
|
||||
<v-list-item
|
||||
:key="(nav.key || nav.title) + 'single-item'"
|
||||
exact
|
||||
link
|
||||
:to="nav.to"
|
||||
:prepend-icon="nav.icon"
|
||||
:title="nav.title"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<!-- Secondary Links -->
|
||||
<template v-if="secondaryLinks.length > 0">
|
||||
<v-divider class="mt-2" />
|
||||
<v-list v-model:selected="state.secondarySelected" nav density="compact" exact>
|
||||
<template v-for="nav in secondaryLinks">
|
||||
<div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
|
||||
<!-- Multi Items -->
|
||||
<v-list-group
|
||||
v-if="nav.children"
|
||||
:key="(nav.key || nav.title) + 'multi-item'"
|
||||
v-model="state.dropDowns[nav.title]"
|
||||
color="primary"
|
||||
:prepend-icon="nav.icon"
|
||||
fluid
|
||||
>
|
||||
<template #activator="{ props: hoverProps }">
|
||||
<v-list-item v-bind="hoverProps" :prepend-icon="nav.icon" :title="nav.title" />
|
||||
</template>
|
||||
|
||||
<v-list-item
|
||||
v-for="child in nav.children"
|
||||
:key="child.key || child.title"
|
||||
exact
|
||||
:to="child.to"
|
||||
class="ml-2"
|
||||
:prepend-icon="child.icon"
|
||||
:title="child.title"
|
||||
/>
|
||||
</v-list-group>
|
||||
|
||||
<!-- Single Item -->
|
||||
<v-list-item v-else :key="(nav.key || nav.title) + 'single-item'" exact link :to="nav.to">
|
||||
<template #prepend>
|
||||
<v-icon>{{ nav.icon }}</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</template>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<!-- Bottom Navigation Links -->
|
||||
<template #append>
|
||||
<v-list v-model:selected="state.bottomSelected" nav density="comfortable">
|
||||
<v-menu location="end bottom" :offset="15">
|
||||
<template #activator="{ props: hoverProps }">
|
||||
<v-list-item v-bind="hoverProps" :prepend-icon="$globals.icons.cog" :title="$t('general.settings')" />
|
||||
</template>
|
||||
<v-list density="comfortable" color="primary">
|
||||
<v-list-item :prepend-icon="$globals.icons.translate" :title="$t('sidebar.language')" @click="state.languageDialog=true" />
|
||||
<v-list-item :prepend-icon="$vuetify.theme.current.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight" :title="$vuetify.theme.current.dark ? $t('settings.theme.light-mode') : $t('settings.theme.dark-mode')" @click="toggleDark" />
|
||||
<v-divider v-if="loggedIn" class="my-2" />
|
||||
<v-list-item v-if="loggedIn" :prepend-icon="$globals.icons.cog" :title="$t('profile.user-settings')" to="/user/profile" />
|
||||
<v-list-item v-if="canManage" :prepend-icon="$globals.icons.manageData" :title="$t('data-pages.data-management')" to="/group/data" />
|
||||
<v-divider v-if="isAdmin" class="my-2" />
|
||||
<v-list-item v-if="isAdmin" :prepend-icon="$globals.icons.wrench" :title="$t('settings.admin-settings')" to="/admin/site-settings" />
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-list>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useLoggedInState } from "~/composables/use-logged-in-state";
|
||||
import type { SidebarLinks } from "~/types/application-types";
|
||||
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
|
||||
import { useToggleDarkMode } from "~/composables/use-utils";
|
||||
|
||||
const props = defineProps({
|
||||
user: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
topLink: {
|
||||
type: Array as () => SidebarLinks,
|
||||
required: true,
|
||||
},
|
||||
secondaryLinks: {
|
||||
type: Array as () => SidebarLinks,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const modelValue = defineModel<boolean>({ default: false });
|
||||
|
||||
const auth = useMealieAuth();
|
||||
const sessionUser = computed(() => auth.user.value);
|
||||
const { loggedIn, isOwnGroup } = useLoggedInState();
|
||||
const isAdmin = computed(() => auth.user.value?.admin);
|
||||
const canManage = computed(() => auth.user.value?.canManage);
|
||||
|
||||
const userFavoritesLink = computed(() => auth.user.value ? `/user/${auth.user.value.id}/favorites` : undefined);
|
||||
const userProfileLink = computed(() => auth.user.value ? "/user/profile" : undefined);
|
||||
|
||||
const toggleDark = useToggleDarkMode();
|
||||
|
||||
const state = reactive({
|
||||
dropDowns: {} as Record<string, boolean>,
|
||||
secondarySelected: null as string[] | null,
|
||||
bottomSelected: null as string[] | null,
|
||||
languageDialog: false as boolean,
|
||||
});
|
||||
|
||||
const allLinks = computed(() => [...props.topLink, ...(props.secondaryLinks || [])]);
|
||||
function initDropdowns() {
|
||||
allLinks.value.forEach((link) => {
|
||||
state.dropDowns[link.title] = link.childrenStartExpanded || false;
|
||||
});
|
||||
}
|
||||
watch(
|
||||
() => allLinks,
|
||||
() => {
|
||||
initDropdowns();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.favorites-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.favorites-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
69
frontend/app/components/Layout/LayoutParts/TheSnackbar.vue
Normal file
69
frontend/app/components/Layout/LayoutParts/TheSnackbar.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<v-snackbar
|
||||
v-model="toastAlert.open"
|
||||
location="top"
|
||||
:color="toastAlert.color"
|
||||
timeout="2000"
|
||||
>
|
||||
<v-icon
|
||||
v-if="icon"
|
||||
dark
|
||||
start
|
||||
:icon="icon"
|
||||
/>
|
||||
|
||||
{{ toastAlert.title }}
|
||||
{{ toastAlert.text }}
|
||||
|
||||
<template #actions>
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="toastAlert.open = false"
|
||||
>
|
||||
{{ $t('general.close') }}
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
<v-snackbar
|
||||
v-model="toastLoading.open"
|
||||
content-class="py-2"
|
||||
density="compact"
|
||||
location="bottom"
|
||||
:timeout="-1"
|
||||
:color="toastLoading.color"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column align-center justify-start"
|
||||
@click="toastLoading.open = false"
|
||||
>
|
||||
<div class="mb-2 mt-0 text-subtitle-1 text-center">
|
||||
{{ toastLoading.text }}
|
||||
</div>
|
||||
<v-progress-linear
|
||||
indeterminate
|
||||
color="white-darken-2"
|
||||
/>
|
||||
</div>
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useNuxtApp } from "#app";
|
||||
import { toastAlert, toastLoading } from "~/composables/use-toast";
|
||||
|
||||
const { $globals } = useNuxtApp();
|
||||
const icon = computed(() => {
|
||||
switch (toastAlert.color) {
|
||||
case "error":
|
||||
return $globals.icons.alertOutline;
|
||||
case "success":
|
||||
return $globals.icons.checkBold;
|
||||
case "info":
|
||||
return $globals.icons.informationOutline;
|
||||
default:
|
||||
return $globals.icons.alertOutline;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user