133 lines
4.4 KiB
Vue
133 lines
4.4 KiB
Vue
<script setup>
|
|
import { RouterLink, RouterView } from 'vue-router';
|
|
import Separator from './components/ui/separator/Separator.vue';
|
|
import Button from './components/ui/button/Button.vue';
|
|
import { Popover, PopoverContent, PopoverTrigger } from './components/ui/popover';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from './components/ui/dropdown-menu';
|
|
import { onMounted } from 'vue';
|
|
import { useUserStore } from './stores/user';
|
|
import Alert from './components/ui/alert/Alert.vue';
|
|
import AlertDescription from './components/ui/alert/AlertDescription.vue';
|
|
|
|
const userStore = useUserStore();
|
|
|
|
// onMounted(async () => {
|
|
// const res = await fetch(`${import.meta.env.VITE_APIHOST}/members/me`, {
|
|
// credentials: 'include',
|
|
// });
|
|
// const data = await res.json();
|
|
// console.log(data);
|
|
// userStore.user = data;
|
|
// });
|
|
const APIHOST = import.meta.env.VITE_APIHOST;
|
|
|
|
async function logout() {
|
|
// await fetch(`${APIHOST}/logout`, {
|
|
// method: 'GET',
|
|
// credentials: 'include',
|
|
// });
|
|
|
|
userStore.user = null;
|
|
window.location.href = APIHOST + "/logout";
|
|
}
|
|
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return "";
|
|
return new Date(dateStr).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex items-center justify-between px-10">
|
|
<div></div>
|
|
<div class="h-15 flex items-center justify-center gap-20">
|
|
<RouterLink to="/">
|
|
<Button variant="link">Home</Button>
|
|
</RouterLink>
|
|
<RouterLink to="/calendar">
|
|
<Button variant="link">Calendar</Button>
|
|
</RouterLink>
|
|
<RouterLink to="/members">
|
|
<Button variant="link">Members</Button>
|
|
</RouterLink>
|
|
<Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button variant="link">Forms</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="flex flex-col gap-4 items-center w-min">
|
|
<RouterLink to="/transfer">
|
|
<Button variant="link">Transfer Request</Button>
|
|
</RouterLink>
|
|
<RouterLink to="/trainingReport">
|
|
<Button variant="link">Training Report</Button>
|
|
</RouterLink>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button variant="link">Administration</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="flex flex-col gap-4 items-center w-min">
|
|
<RouterLink to="/administration/rankChange">
|
|
<Button variant="link">Promotions</Button>
|
|
</RouterLink>
|
|
<RouterLink to="/administration/loa">
|
|
<Button variant="link">Leave of Absence</Button>
|
|
</RouterLink>
|
|
<RouterLink to="/administration/transfer">
|
|
<Button variant="link">Transfer Requests</Button>
|
|
</RouterLink>
|
|
<RouterLink to="/administration/applications">
|
|
<Button variant="link">Recruitment</Button>
|
|
</RouterLink>
|
|
<RouterLink to="/administration/roles">
|
|
<Button variant="link">Role Management</Button>
|
|
</RouterLink>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
</div>
|
|
<div>
|
|
<DropdownMenu v-if="userStore.isLoggedIn">
|
|
<DropdownMenuTrigger class="cursor-pointer">
|
|
<p>{{ userStore.user.name }}</p>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem>My Profile</DropdownMenuItem>
|
|
<DropdownMenuItem>Settings</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<RouterLink to="/loa">
|
|
Submit LOA
|
|
</RouterLink>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<a v-else :href="APIHOST+'/login'">Login</a>
|
|
</div>
|
|
</div>
|
|
<Separator></Separator>
|
|
<Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
|
|
<AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
|
|
<p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
|
|
<Button variant="secondary">End LOA</Button>
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<RouterView class=""></RouterView>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|