93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<template>
|
|
<header class="flex">
|
|
<h2 id="tabslist" class="sr-only">Projets</h2>
|
|
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
|
|
</header>
|
|
<section
|
|
v-if="currentTab === 'currentProjects'"
|
|
id="projets-en-cours"
|
|
role="tabpanel"
|
|
tabindex="0"
|
|
aria-labelledby="projets-en-cours-label"
|
|
class="flow"
|
|
>
|
|
<Project
|
|
v-for="project in currentProjects"
|
|
:key="project.id"
|
|
:project="project"
|
|
/>
|
|
</section>
|
|
<section
|
|
v-else
|
|
id="projets-archives"
|
|
role="tabpanel"
|
|
tabindex="0"
|
|
aria-labelledby="projet-archives-label"
|
|
>
|
|
<Project
|
|
v-for="project in archivedProjects"
|
|
:key="project.id"
|
|
:project="project"
|
|
/>
|
|
</section>
|
|
</template>
|
|
<script setup>
|
|
import Tabs from "./Tabs.vue";
|
|
import Project from "./project/Project.vue";
|
|
import { useProjectsStore } from "../stores/projects";
|
|
import { ref, computed } from "vue";
|
|
import { storeToRefs } from "pinia";
|
|
|
|
const { projects, currentProjects, archivedProjects } = storeToRefs(
|
|
useProjectsStore()
|
|
);
|
|
|
|
const currentTab = ref("currentProjects");
|
|
const tabs = computed(() => {
|
|
return [
|
|
{
|
|
label: "Projets en cours",
|
|
id: "currentProjects",
|
|
count: currentProjects.value.length,
|
|
isActive: currentTab.value === "currentProjects",
|
|
},
|
|
{
|
|
label: "Projets archivés",
|
|
id: "archivedProjects",
|
|
count: archivedProjects.value.length,
|
|
isActive: currentTab.value === "archivedProjects",
|
|
},
|
|
];
|
|
});
|
|
|
|
function changeTab(newValue) {
|
|
currentTab.value = newValue;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
section {
|
|
--flow-space: var(--space-16);
|
|
min-height: calc(100vh - 8.5rem);
|
|
}
|
|
section > * {
|
|
display: block;
|
|
}
|
|
section:empty::after {
|
|
content: "Aucun projet pour le moment.";
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
text-align: center;
|
|
max-width: 24ch;
|
|
height: 8rem;
|
|
margin: auto;
|
|
font-size: var(--text-sm);
|
|
color: var(--color-grey-700);
|
|
background-image: var(--icon-document-thin);
|
|
background-position: top center;
|
|
background-repeat: no-repeat;
|
|
background-size: var(--space-40);
|
|
}
|
|
</style>
|