Files
DatBrowser/resources/js/Layouts/JobLayout.vue
2025-03-01 10:02:47 +01:00

42 lines
1.3 KiB
Vue

<script setup lang="ts">
import ScrollArea from "@/Components/ui/scroll-area/ScrollArea.vue";
import BaseLayout from "./BaseLayout.vue";
import MainNavJobLink from "@/Components/Layout/MainNav/MainNavJobLink.vue";
import { Job } from "@/types/Jobs/job";
import MainNavItem from "@/Components/Layout/MainNav/MainNavItem.vue";
import { httpApi } from "@/lib/utils";
import { onMounted, ref } from "vue";
const jobs = ref<Job[]>([]);
async function fetchJobs() {
let jobsRaw = await httpApi<Job[]>("/jobs");
jobs.value = jobsRaw.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
}
onMounted(fetchJobs);
</script>
<template>
<BaseLayout class="flex justify-stretch items-start gap-3">
<ScrollArea class="h-full w-50 overflow-auto">
<nav class="p-3">
<ul class="flex flex-col gap-2">
<MainNavItem link="/"> Accueil </MainNavItem>
<MainNavJobLink
v-for="job in jobs"
:key="job.id"
:job="job"
/>
</ul>
</nav>
</ScrollArea>
<ScrollArea class="flex-1 h-full overflow-auto">
<main class="p-3">
<slot />
</main>
</ScrollArea>
</BaseLayout>
</template>