redesign tabs

src/components/Projects.vue

@@ -1,8 +1,16 @@
 <template>
   <h2 id="tabslist" class="sr-only">Projets</h2>
-  <template v-if="projects.children">
-    <Tabs :projects="projects.children" @update:currentTab="changeTab" />
-    <TabPanel :projects="projects.children" :currentTab="currentTab" />
+  <template v-if="projects.length > 0">
+    <Tabs
+      :currentProjects="currentProjects"
+      :archivedProjects="archivedProjects"
+      @update:currentTab="changeTab"
+    />
+    <TabPanel
+      :currentProjects="currentProjects"
+      :archivedProjects="archivedProjects"
+      :currentTab="currentTab"
+    />
   </template>
 </template>
 <script setup>
@@ -12,9 +20,11 @@ import { useProjectsStore } from "../stores/projects";
 import { ref } from "vue";
 import { storeToRefs } from "pinia";
 
-const { projects } = storeToRefs(useProjectsStore());
+const { projects, currentProjects, archivedProjects } = storeToRefs(
+  useProjectsStore()
+);
 
-const currentTab = ref("current");
+const currentTab = ref("currentProjects");
 
 function changeTab(newValue) {
   currentTab.value = newValue;

src/components/TabPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- TODO: rendre dynamique id + aria-labelledby -->
   <section
-    v-if="currentTab === 'current'"
+    v-if="currentTab === 'currentProjects'"
     id="projets-en-cours"
     role="tabpanel"
     tabindex="0"
@@ -31,18 +31,10 @@
 
 <script setup>
 import Project from "./Project.vue";
-import { computed } from "vue";
 
-const { projects, currentTab } = defineProps({
-  projects: Array,
+const { currentTab, currentProjects, archivedProjects } = defineProps({
+  currentProjects: Array,
+  archivedProjects: Array,
   currentTab: String,
 });
-
-const currentProjects = computed(() => {
-  return projects.filter((child) => child.status === "listed");
-});
-
-const archivedProjects = computed(() => {
-  return projects.filter((child) => child.status === "unlisted");
-});
 </script>

src/components/Tabs.vue

@@ -19,27 +19,30 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed } from "vue";
 import slugify from "slugify";
 
-const { projects } = defineProps({
-  projects: Array,
+const { currentProjects, archivedProjects } = defineProps({
+  currentProjects: Array,
+  archivedProjects: Array,
 });
 
-const tabs = ref([
-  {
-    label: "Projets en cours",
-    id: "current",
-    count: projects.filter((project) => project.status === "listed").length,
-    isActive: true,
-  },
-  {
-    label: "Projets archivés",
-    id: "archived",
-    count: projects.filter((project) => project.status === "unlisted").length,
-    isActive: false,
-  },
-]);
+const tabs = computed(() => {
+  return [
+    {
+      label: "Projets en cours",
+      id: "currentProjects",
+      count: currentProjects.length,
+      isActive: true,
+    },
+    {
+      label: "Projets archivés",
+      id: "archivedProjects",
+      count: archivedProjects.length,
+      isActive: false,
+    },
+  ];
+});
 
 const emit = defineEmits(["update:currentTab"]);
 

src/stores/projects.js

@@ -1,12 +1,21 @@
 import { defineStore } from "pinia";
 import { useApiStore } from "./api.js";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 
 export const useProjectsStore = defineStore("projects", () => {
   const projects = ref([]);
 
-  const api = useApiStore();
-  api.fetchPageData("projects").then((json) => (projects.value = json));
+  const currentProjects = computed(() => {
+    return projects.value.filter((project) => project.status === "listed");
+  });
+  const archivedProjects = computed(() => {
+    return projects.value.filter((project) => project.status === "unlisted");
+  });
 
-  return { projects };
+  const api = useApiStore();
+  api
+    .fetchPageData("projects")
+    .then((json) => (projects.value = json.children));
+
+  return { projects, currentProjects, archivedProjects };
 });