From 0075a37ab21a211d8d9834b6d789f4975071ab62 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 10 Sep 2024 09:12:52 +0200
Subject: [PATCH] redesign tabs

---
 src/components/Projects.vue | 20 +++++++++++++++-----
 src/components/TabPanel.vue | 16 ++++------------
 src/components/Tabs.vue     | 37 ++++++++++++++++++++-----------------
 src/stores/projects.js      | 17 +++++++++++++----
 4 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/src/components/Projects.vue b/src/components/Projects.vue
index def905e..644032d 100644
--- a/src/components/Projects.vue
+++ b/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;
diff --git a/src/components/TabPanel.vue b/src/components/TabPanel.vue
index 20157a0..23ac2bf 100644
--- a/src/components/TabPanel.vue
+++ b/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>
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 9ec03cc..7bf1155 100644
--- a/src/components/Tabs.vue
+++ b/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"]);
 
diff --git a/src/stores/projects.js b/src/stores/projects.js
index 74ea97d..79e340d 100644
--- a/src/stores/projects.js
+++ b/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 };
 });