forked from geolba/tethys.backend
202 lines
9.3 KiB
Vue
202 lines
9.3 KiB
Vue
<script lang="ts" setup>
|
|
import { usePage, router } from '@inertiajs/vue3';
|
|
// import { usePage } from '@inertiajs/inertia-vue3';
|
|
// import { Inertia } from '@inertiajs/inertia';
|
|
import type { ComputedRef } from 'vue';
|
|
|
|
import { computed, ref } from 'vue';
|
|
import { containerMaxW } from '@/config';
|
|
import { StyleService } from '@/Stores/style.service';
|
|
import { LayoutService } from '@/Stores/layout';
|
|
import {
|
|
mdiForwardburger,
|
|
mdiBackburger,
|
|
mdiClose,
|
|
mdiDotsVertical,
|
|
mdiMenu,
|
|
mdiCloudDownloadOutline,
|
|
mdiCloud,
|
|
mdiCrop,
|
|
mdiAccountCog,
|
|
mdiFormatListGroup,
|
|
mdiFormatListNumbered,
|
|
mdiLogout,
|
|
mdiGithub,
|
|
mdiThemeLightDark,
|
|
mdiViewDashboard,
|
|
mdiMapSearch,
|
|
mdiInformationVariant,
|
|
mdiGlasses,
|
|
} from '@mdi/js';
|
|
import NavBarItem from '@/Components/NavBarItem.vue';
|
|
import NavBarItemLabel from '@/Components/NavBarItemLabel.vue';
|
|
import NavBarMenu from '@/Components/NavBarMenu.vue';
|
|
import BaseDivider from '@/Components/BaseDivider.vue';
|
|
import UserAvatarCurrentUser from '@/Components/UserAvatarCurrentUser.vue';
|
|
import BaseIcon from '@/Components/BaseIcon.vue';
|
|
// import NavBarSearch from '@/Components/NavBarSearch.vue';
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
import type { User } from '@/Dataset';
|
|
import FirstrunWizard from '@/Components/FirstrunWizard/FirstrunWizard.vue'
|
|
// import Lock from 'vue-material-design-icons/Lock.vue'
|
|
// import BriefcaseCheck from 'vue-material-design-icons/BriefcaseCheck.vue'
|
|
// import SwapHorizontal from 'vue-material-design-icons/SwapHorizontal.vue'
|
|
// import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
|
|
|
|
const styleService = StyleService();
|
|
const props = defineProps({
|
|
showBurger: {
|
|
type: Boolean,
|
|
default: true // Set default value to true
|
|
}
|
|
});
|
|
// const userName = computed(() => usePage().props.user.login)
|
|
|
|
const user: ComputedRef<User> = computed(() => {
|
|
return usePage().props.authUser as User;
|
|
});
|
|
// const userName = computed(() => props.user.login)
|
|
|
|
const toggleLightDark = () => {
|
|
styleService.setDarkMode();
|
|
};
|
|
|
|
const layoutStore = LayoutService();
|
|
|
|
const isMenuNavBarActive = ref(false);
|
|
|
|
const menuNavBarToggle = () => {
|
|
isMenuNavBarActive.value = !isMenuNavBarActive.value;
|
|
};
|
|
|
|
const menuOpenLg = () => {
|
|
layoutStore.isAsideLgActive = true;
|
|
};
|
|
const userHasRoles = (roleNames): boolean => {
|
|
return user.value.roles.some(role => roleNames.includes(role.name));
|
|
};
|
|
|
|
// const logout = () => {
|
|
// // router.post(route('logout'))
|
|
// Inertia.get(stardust.route('app.index'));
|
|
// };
|
|
const logout = async () => {
|
|
// router.post(route('logout'));
|
|
await router.post(stardust.route('logout'));
|
|
};
|
|
|
|
const about = ref();
|
|
const showAbout = async () => {
|
|
// router.post(route('logout'));
|
|
about.value.open();
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="text-base top-0 left-0 right-0 fixed bg-gray-50 h-14 z-40 w-screen transition-position lg:w-auto dark:bg-slate-800"
|
|
:class="{ 'xl:pl-60': props.showBurger == true }">
|
|
<FirstrunWizard ref="about"></FirstrunWizard>
|
|
<div class="flex lg:items-stretch" :class="containerMaxW">
|
|
<div class="flex-1 items-stretch flex h-14">
|
|
<NavBarItem type="flex lg:hidden" @click.prevent="layoutStore.asideMobileToggle()" v-if="props.showBurger">
|
|
<BaseIcon :path="layoutStore.isAsideMobileExpanded ? mdiBackburger : mdiForwardburger" size="24" />
|
|
</NavBarItem>
|
|
<NavBarItem type="hidden lg:flex xl:hidden" @click.prevent="menuOpenLg" v-if="props.showBurger">
|
|
<BaseIcon :path="mdiMenu" size="24" />
|
|
</NavBarItem>
|
|
<NavBarItem route-name="apps.dashboard">
|
|
<NavBarItemLabel :icon="mdiViewDashboard" label="Dashboard" size="22" is-hover-label-only
|
|
route-name="apps.dashboard" />
|
|
</NavBarItem>
|
|
<NavBarItem route-name="apps.map">
|
|
<NavBarItemLabel :icon="mdiMapSearch" label="Map" size="22" is-hover-label-only route-name="apps.map" />
|
|
</NavBarItem>
|
|
<!-- <NavBarItem>
|
|
<NavBarSearch />
|
|
</NavBarItem> -->
|
|
</div>
|
|
<div class="flex-none items-stretch flex h-14 lg:hidden">
|
|
<NavBarItem @click.prevent="menuNavBarToggle">
|
|
<BaseIcon :path="isMenuNavBarActive ? mdiClose : mdiDotsVertical" size="24" />
|
|
</NavBarItem>
|
|
</div>
|
|
<div class="absolute w-screen top-14 left-0 bg-gray-50 shadow lg:w-auto lg:items-stretch lg:flex lg:grow lg:static lg:border-b-0 lg:overflow-visible lg:shadow-none dark:bg-slate-800"
|
|
:class="[isMenuNavBarActive ? 'block' : 'hidden']">
|
|
<div
|
|
class="max-h-screen-menu overflow-y-auto lg:overflow-visible lg:flex lg:items-stretch lg:justify-end lg:ml-auto">
|
|
|
|
<!-- help menu -->
|
|
<NavBarMenu>
|
|
<NavBarItemLabel :icon="mdiMenu" label="Help menu" />
|
|
<template #dropdown>
|
|
<!-- <NavBarItem>
|
|
<NavBarItemLabel :icon="mdiClockOutline" label="Item One" />
|
|
</NavBarItem> -->
|
|
<NavBarItem href="/docs/HandbuchTethys.pdf" target="_blank">
|
|
<NavBarItemLabel :icon="mdiCloudDownloadOutline" label="Tethys Manual" />
|
|
</NavBarItem>
|
|
<NavBarItem href="/docs/geopackage_v01.pdf" target="_blank">
|
|
<NavBarItemLabel :icon="mdiCloud" label="GeoPackage Help" />
|
|
</NavBarItem>
|
|
<BaseDivider nav-bar />
|
|
<NavBarItem href="/docs/PreservationPlanTethys.pdf" target="_blank">
|
|
<NavBarItemLabel :icon="mdiCrop" label="Preservation Plan" />
|
|
</NavBarItem>
|
|
</template>
|
|
</NavBarMenu>
|
|
|
|
<!-- personal menu -->
|
|
<NavBarMenu>
|
|
<NavBarItemLabel v-bind:label="`hello ${user.login}`">
|
|
<UserAvatarCurrentUser class="w-6 h-6 mr-3 inline-flex" />
|
|
</NavBarItemLabel>
|
|
<template #dropdown>
|
|
<!-- <NavBarItem> -->
|
|
<!-- <NavBarItem route-name="admin.account.info"> -->
|
|
<NavBarItem :route-name="'settings.user'">
|
|
<NavBarItemLabel :icon="mdiAccountCog" label="User Settings" />
|
|
</NavBarItem>
|
|
<NavBarItem v-if="userHasRoles(['administrator'])" :route-name="'settings.overview'">
|
|
<NavBarItemLabel :icon="mdiFormatListGroup" label="Administration" />
|
|
</NavBarItem>
|
|
<NavBarItem v-if="userHasRoles(['submitter'])" :route-name="'dataset.list'">
|
|
<NavBarItemLabel :icon="mdiFormatListNumbered" label="Submitter Menu" />
|
|
</NavBarItem>
|
|
<NavBarItem v-if="userHasRoles(['editor'])" :route-name="'editor.dataset.list'">
|
|
<NavBarItemLabel :icon="mdiFormatListNumbered" label="Editor Menu" />
|
|
</NavBarItem>
|
|
<NavBarItem v-if="userHasRoles(['reviewer'])" :route-name="'reviewer.dataset.list'">
|
|
<NavBarItemLabel :icon="mdiGlasses" label="Reviewer Menu" />
|
|
</NavBarItem>
|
|
<!-- <NavBarItem>
|
|
<NavBarItemLabel :icon="mdiEmail" label="Messages" />
|
|
</NavBarItem> -->
|
|
<NavBarItem @click="showAbout">
|
|
<NavBarItemLabel :icon="mdiInformationVariant" label="About" />
|
|
</NavBarItem>
|
|
<BaseDivider nav-bar />
|
|
<NavBarItem @click="logout">
|
|
<NavBarItemLabel :icon="mdiLogout" label="Log Out" />
|
|
</NavBarItem>
|
|
</template>
|
|
</NavBarMenu>
|
|
|
|
<NavBarItem is-desktop-icon-only @click.prevent="toggleLightDark">
|
|
<NavBarItemLabel v-bind:icon="mdiThemeLightDark" label="Light/Dark" is-desktop-icon-only />
|
|
</NavBarItem>
|
|
<NavBarItem href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" is-desktop-icon-only>
|
|
<NavBarItemLabel v-bind:icon="mdiGithub" label="GitHub" is-desktop-icon-only />
|
|
</NavBarItem>
|
|
<NavBarItem is-desktop-icon-only @click="showAbout">
|
|
<NavBarItemLabel v-bind:icon="mdiInformationVariant" label="About" is-desktop-icon-only />
|
|
</NavBarItem>
|
|
<NavBarItem is-desktop-icon-only @click="logout">
|
|
<NavBarItemLabel v-bind:icon="mdiLogout" label="Log out" is-desktop-icon-only />
|
|
</NavBarItem>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template> |