dynamize projects

package-lock.json

@@ -8,7 +8,9 @@
       "name": "pdc-b2b",
       "version": "0.0.0",
       "dependencies": {
+        "dayjs": "^1.11.13",
         "pinia": "^2.1.7",
+        "slugify": "^1.6.6",
         "vue": "^3.4.29"
       },
       "devDependencies": {
@@ -728,6 +730,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -938,6 +945,14 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/slugify": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
+      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",

package.json

@@ -9,7 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "dayjs": "^1.11.13",
     "pinia": "^2.1.7",
+    "slugify": "^1.6.6",
     "vue": "^3.4.29"
   },
   "devDependencies": {

public/site/templates/projects.json.php

@@ -0,0 +1,18 @@
+<?php
+
+$children = $page->children()->map(function ($child) {
+  return [
+    'title' => $child->title()->value(),
+    'url' => $child->url(),
+    'modified' => $child->modified('Y-m-d'),
+    'status' => $child->status()
+  ];
+})->values();
+
+$specificData = [
+  "children" => $children,
+];
+
+$data = array_merge($genericData, $specificData);
+
+echo json_encode($data);

public/site/templates/projects.php

@@ -0,0 +1 @@
+<?php snippet('generic-template') ?>

src/components/Project.vue

@@ -0,0 +1,154 @@
+<template>
+  <article class="project-item | flex | rounded-lg | px-2xl py-2xl">
+    <hgroup>
+      <h3>{{ project.title }}</h3>
+      <p>
+        Dernière mise à jour le
+        <time :datetime="project.modified">{{ frenchFormattedModified }}</time>
+      </p>
+    </hgroup>
+    <img src="" alt="Logo" class="project-logo | rounded-sm" />
+    <ol class="project-steps" data-steps="1">
+      <li class="project-step" data-status="in-progress">
+        <span class="pill" data-icon="search">Votre Brief</span>
+      </li>
+    </ol>
+  </article>
+</template>
+
+<script setup>
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+const { project } = defineProps({ project: Array });
+
+dayjs.locale("fr");
+
+const frenchFormattedModified = dayjs(project.modified).format(
+  "dddd D MMMM YYYY"
+);
+</script>
+
+<style scoped>
+.project-item {
+  --wrap: no-wrap;
+  background: var(--color-background);
+}
+
+.project-item hgroup {
+  flex: 1 1 0%;
+}
+.project-item h3 {
+  font-family: var(--font-serif);
+  font-size: var(--text-lg);
+  margin-bottom: var(--space-sm);
+}
+.project-item p {
+  font-size: var(--text-sm);
+  line-height: var(--leading-sm);
+}
+
+.project-logo {
+  order: -1;
+  background: var(--color-grey-50);
+  color: var(--color-grey-400);
+  text-align: center;
+  line-height: 4.5rem;
+  width: 4.5rem;
+  height: 4.5rem;
+}
+
+.project-steps {
+  --color: var(--color-primary-100);
+  flex: 1 1 0%;
+  display: flex;
+  gap: var(--space-lg);
+  margin-top: -2.75rem;
+  position: relative;
+}
+.project-steps[data-steps="1"]::after {
+  content: "étapes à venir";
+  font-size: var(--text-sm);
+  font-weight: 500;
+  width: 8rem;
+  position: absolute;
+  text-align: center;
+  color: var(--color-grey-700);
+  background: var(--color-background);
+  bottom: -2rem;
+  left: 50%;
+  transform: translate(-50%, -0.2em);
+}
+
+.project-step {
+  --color: var(--color-white);
+  position: relative;
+  flex: 1 1 0%;
+  text-align: center;
+}
+.project-step:last-child {
+  text-align: right;
+}
+.project-step:only-child,
+.project-step:first-child {
+  text-align: left;
+}
+
+.project-step[data-status="in-progress"]:only-child::before,
+.project-step[data-status="in-progress"]:only-child::after {
+  content: "";
+  display: inline-block;
+  height: 1.25rem;
+  position: absolute;
+  right: 3.75rem;
+  bottom: -2rem;
+}
+.project-step[data-status="in-progress"]:only-child::before {
+  height: 1rem;
+  color: red;
+  background-repeat: repeat;
+  background-position: left center;
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A");
+  background-size: 0.75rem;
+  left: 5.5rem;
+  right: 5.5rem;
+  bottom: -1.875rem;
+}
+.project-step[data-status="in-progress"]:only-child::after {
+  --icon-size: 1.25rem;
+  width: var(--icon-size);
+  background: var(--color-grey-300);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: var(--icon-size);
+  mask-image: var(--icon-point);
+  right: 3.75rem;
+  bottom: -2rem;
+}
+
+.project-step .pill::after {
+  content: "";
+  display: inline-block;
+  width: var(--icon-size, 1.25rem);
+  height: var(--icon-size, 1.25rem);
+  background-color: var(--icon-color, var(--color-primary-100));
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: var(--size, 1.25rem);
+  mask-image: var(--icon, var(--icon-point));
+  position: absolute;
+  bottom: -2rem;
+}
+.project-step[data-status="done"] > .pill,
+.project-step[data-status="uncompleted"] > .pill {
+  --background: transparent;
+}
+.project-step[data-status="done"] .pill::after {
+  mask-image: var(--icon-check-3);
+}
+.project-step[data-status="in-progress"] .pill::after {
+  mask-image: var(--icon-point-active);
+}
+.project-step[data-status="uncompleted"] .pill::after {
+  --icon-color: var(--color-grey-300);
+}
+</style>

src/components/Projects.vue

@@ -0,0 +1,24 @@
+<template>
+  <template v-if="data">
+    <Tabs :projects="data.children" @update:currentTab="changeTab" />
+    <TabPanel :projects="data.children" :currentTab="currentTab" />
+  </template>
+</template>
+<script setup>
+import Tabs from "./Tabs.vue";
+import TabPanel from "./TabPanel.vue";
+import { useApiStore } from "../stores/api";
+import { ref } from "vue";
+
+const data = ref(null);
+const currentTab = ref("current");
+
+const api = useApiStore();
+api.fetchPageData("projects").then((res) => (data.value = res));
+
+function changeTab(newValue) {
+  currentTab.value = newValue;
+}
+</script>
+
+<style scoped></style>

src/components/TabPanel.vue

@@ -0,0 +1,47 @@
+<template>
+  <section
+    v-if="currentTab === 'current'"
+    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 Project from "./Project.vue";
+import { computed } from "vue";
+
+const { projects, currentTab } = defineProps({
+  projects: 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

@@ -0,0 +1,116 @@
+<template>
+  <h2 id="tabslist" class="sr-only">Projets</h2>
+  <header role="tablist" aria-labelledby="tablist">
+    <button
+      v-for="tab in tabs"
+      :key="tab.label"
+      :id="slugify(tab.label) + '-label'"
+      type="button"
+      role="tab"
+      :aria-selected="tab.isActive"
+      :aria-controls="slugify(tab.label)"
+      :tabindex="tab.isActive ? '-1' : false"
+      @click="changeTab(tab.id)"
+    >
+      <span class="label">{{ tab.label }}</span>
+      <span class="count">{{ tab.count }}</span>
+    </button>
+  </header>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import slugify from "slugify";
+
+const { projects } = defineProps({
+  projects: 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 emit = defineEmits(["update:currentTab"]);
+
+function changeTab(tabId) {
+  emit("update:currentTab", tabId);
+}
+</script>
+
+<style scoped>
+[role="tablist"] {
+  width: fit-content;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 auto var(--space-md);
+  border-radius: var(--rounded-full);
+  min-height: 60px;
+}
+
+[role="tab"] {
+  --tab-height: 2.5rem;
+  --tab-py: var(--space-md);
+  --tab-px: var(--space-lg);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--text-md);
+  border-radius: var(--rounded-full);
+  background-color: var(--background, var(--color-background));
+  color: var(--color, var(--color-text));
+  z-index: 2;
+  padding: var(--tab-py) var(--tab-px);
+  margin: 0;
+  cursor: pointer;
+  gap: var(--space-lg);
+  height: var(--tab-height);
+}
+[role="tab"]:focus,
+[role="tab"]:hover {
+}
+[role="tab"] .label {
+  flex-grow: 1;
+  font-family: var(--font-serif);
+}
+[role="tab"] .count {
+  font-size: var(--text-sm);
+  font-weight: 500;
+}
+
+[role="tab"][aria-selected="true"] {
+  --background: var(--color-background);
+  z-index: 10;
+}
+[role="tab"][aria-selected="false"] {
+  --background: var(--color-grey-200);
+  --color: var(--color-grey-700);
+}
+
+[role="tab"][aria-selected="true"] + [aria-selected="false"]::before {
+  content: "";
+  display: inline-block;
+  height: var(--tab-height);
+  width: calc(var(--tab-px) * 2);
+  position: absolute;
+  left: calc(var(--tab-px) * -1);
+  background-color: var(--color-grey-200);
+  z-index: -1;
+}
+
+[role="tabpanel"] {
+  width: 100%;
+  overflow: auto;
+}
+</style>

src/stores/api.js

@@ -1,11 +1,40 @@
 import { defineStore } from "pinia";
 
 export const useApiStore = defineStore("counter", () => {
-  async function fetchPageData() {
+  /**
-    const isHomePage = window.location.pathname === "/";
+   * Asynchronously fetches JSON data corresponding to a given path.
+   *
+   * @param {string} [path=window.location.pathname] - The path for which to fetch data.
+   *   - If no path is provided, the function will use the current page's path.
+   *   - If the path is "/", it is assumed to be the homepage, and "home.json" is fetched.
+   *   - For other paths, the function will append ".json" to the path and fetch that URL.
+   *
+   * @returns {Promise<Object>} A promise that resolves to the JSON data if the fetch is successful.
+   *
+   * @throws {Error} Will throw an error if the HTTP request fails (e.g., non-200 status code).
+   *   - The error will include the HTTP status code and a message indicating the fetch failed.
+   *
+   * @example
+   * // Fetch data for the current page
+   * fetchPageData().then(data => {
+   *   console.log(data);
+   * }).catch(error => {
+   *   console.error('Error fetching data:', error);
+   * });
+   *
+   * @example
+   * // Fetch data for a specific path
+   * fetchPageData('/about').then(data => {
+   *   console.log(data);
+   * }).catch(error => {
+   *   console.error('Error fetching data:', error);
+   * });
+   */
+  async function fetchPageData(path = window.location.pathname) {
+    const isHomePage = path === "/";
     const url = isHomePage
-      ? `${window.location.href}home.json`
+      ? `${window.location.origin}/home.json`
-      : `${window.location.href}.json`;
+      : `${window.location.origin}/${path}.json`;
 
     try {
       const response = await fetch(url);
@@ -13,10 +42,12 @@ export const useApiStore = defineStore("counter", () => {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
       const data = await response.json();
+      console.log("Données récupérées du chemin " + path, data);
       return data;
     } catch (error) {
       console.error(
-        "Une erreur s'est produite lors de la récupération des données :",
+        "Une erreur s'est produite lors de la récupération des données pour l'URL :",
+        url,
         error
       );
       throw error;

src/views/Home.vue

@@ -2,300 +2,18 @@
   <h1 class="sr-only">{{ data.content.title }}</h1>
   <div class="with-sidebar">
     <Menu />
-    <!-- TODO: convert to TabList.vue component -->
+
     <main>
-      <h2 id="tabslist" class="sr-only">Projets</h2>
+      <Projects />
-      <header role="tablist" aria-labelledby="tablist">
-        <!-- Tab.vue -->
-        <button
-          id="projets-en-cours-label"
-          type="button"
-          role="tab"
-          aria-selected="true"
-          aria-controls="projets-en-cours"
-        >
-          <!-- 
-                id="{ tab.slug }-label"
-                aria-selected="true | false"
-                aria-controls="{ tab.slug }"
-                -->
-          <span class="label">Projets en cours</span>
-          <!-- tab.label -->
-          <span class="count">3</span>
-          <!-- tab.items.count -->
-        </button>
-        <button
-          id="projet-archives-label"
-          type="button"
-          role="tab"
-          aria-selected="false"
-          aria-controls="projets-archives"
-          tabindex="-1"
-        >
-          <!-- remove tabindex="-1" attribute if aria-selected="true" -->
-          <span class="label">Projets archivés</span>
-          <span class="count">8</span>
-        </button>
-      </header>
-      <!-- TabPanel.vue -->
-      <section
-        id="projets-en-cours"
-        role="tabpanel"
-        tabindex="0"
-        aria-labelledby="projets-en-cours-label"
-        class="flow"
-      >
-        <!-- TODO: convert to ProjectItem.vue component -->
-        <article class="project-item | flex | rounded-lg | px-2xl py-2xl">
-          <hgroup>
-            <h3>Miss Dior Blooming Bouquet</h3>
-            <p>
-              Dernière mise à jour le
-              <time datetime="2024-06-12">12 juin 2024</time>
-            </p>
-          </hgroup>
-          <img src="" alt="Logo" class="project-logo | rounded-sm" />
-          <ol class="project-steps" data-steps="1">
-            <li class="project-step" data-status="in-progress">
-              <span class="pill" data-icon="search">Votre Brief</span>
-            </li>
-          </ol>
-        </article>
-        <article class="project-item | flex | rounded-lg | px-2xl py-2xl">
-          <hgroup>
-            <h3>Miss Dior Blooming Bouquet</h3>
-            <p>
-              Dernière mise à jour le
-              <time datetime="2024-06-12">12 juin 2024</time>
-            </p>
-          </hgroup>
-          <img src="" alt="Logo" class="project-logo | rounded-sm" />
-          <ol class="project-steps" data-steps="3">
-            <li class="project-step" data-status="done">
-              <span class="pill" data-icon="search">Votre Brief</span>
-            </li>
-            <li class="project-step" data-status="in-progress">
-              <span class="pill" data-icon="palette">Brief Enrichi</span>
-            </li>
-            <li class="project-step" data-status="uncompleted">
-              <span class="pill" data-icon="3d">Rendu 360°</span>
-            </li>
-          </ol>
-        </article>
-      </section>
-      <section
-        id="projets-archives"
-        role="tabpanel"
-        tabindex="0"
-        aria-labelledby="projet-archives-label"
-        hidden
-      >
-        <!-- remove hidden attribute if aria-selected="true" -->
-        <div>Tab 2 content</div>
-      </section>
     </main>
   </div>
 </template>
 
-<style scoped>
-/* TABS */
-
-[role="tablist"] {
-  width: fit-content;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  margin: 0 auto var(--space-md);
-  border-radius: var(--rounded-full);
-  min-height: 60px;
-}
-
-[role="tab"] {
-  --tab-height: 2.5rem;
-  --tab-py: var(--space-md);
-  --tab-px: var(--space-lg);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--text-md);
-  border-radius: var(--rounded-full);
-  background-color: var(--background, var(--color-background));
-  color: var(--color, var(--color-text));
-  z-index: 2;
-  padding: var(--tab-py) var(--tab-px);
-  margin: 0;
-  cursor: pointer;
-  gap: var(--space-lg);
-  height: var(--tab-height);
-}
-[role="tab"]:focus,
-[role="tab"]:hover {
-}
-[role="tab"] .label {
-  flex-grow: 1;
-  font-family: var(--font-serif);
-}
-[role="tab"] .count {
-  font-size: var(--text-sm);
-  font-weight: 500;
-}
-
-[role="tab"][aria-selected="true"] {
-  --background: var(--color-background);
-  z-index: 10;
-}
-[role="tab"][aria-selected="false"] {
-  --background: var(--color-grey-200);
-  --color: var(--color-grey-700);
-}
-
-[role="tab"][aria-selected="true"] + [aria-selected="false"]::before {
-  content: "";
-  display: inline-block;
-  height: var(--tab-height);
-  width: calc(var(--tab-px) * 2);
-  position: absolute;
-  left: calc(var(--tab-px) * -1);
-  background-color: var(--color-grey-200);
-  z-index: -1;
-}
-
-[role="tabpanel"] {
-  width: 100%;
-  overflow: auto;
-}
-
-/* PROJECT ITEM */
-
-.project-item {
-  --wrap: no-wrap;
-  background: var(--color-background);
-}
-
-.project-item hgroup {
-  flex: 1 1 0%;
-}
-.project-item h3 {
-  font-family: var(--font-serif);
-  font-size: var(--text-lg);
-  margin-bottom: var(--space-sm);
-}
-.project-item p {
-  font-size: var(--text-sm);
-  line-height: var(--leading-sm);
-}
-
-.project-logo {
-  order: -1;
-  background: var(--color-grey-50);
-  color: var(--color-grey-400);
-  text-align: center;
-  line-height: 4.5rem;
-  width: 4.5rem;
-  height: 4.5rem;
-}
-
-.project-steps {
-  --color: var(--color-primary-100);
-  flex: 1 1 0%;
-  display: flex;
-  gap: var(--space-lg);
-  margin-top: -2.75rem;
-  position: relative;
-}
-.project-steps[data-steps="1"]::after {
-  content: "étapes à venir";
-  font-size: var(--text-sm);
-  font-weight: 500;
-  width: 8rem;
-  position: absolute;
-  text-align: center;
-  color: var(--color-grey-700);
-  background: var(--color-background);
-  bottom: -2rem;
-  left: 50%;
-  transform: translate(-50%, -0.2em);
-}
-
-.project-step {
-  --color: var(--color-white);
-  position: relative;
-  flex: 1 1 0%;
-  text-align: center;
-}
-.project-step:last-child {
-  text-align: right;
-}
-.project-step:only-child,
-.project-step:first-child {
-  text-align: left;
-}
-
-.project-step[data-status="in-progress"]:only-child::before,
-.project-step[data-status="in-progress"]:only-child::after {
-  content: "";
-  display: inline-block;
-  height: 1.25rem;
-  position: absolute;
-  right: 3.75rem;
-  bottom: -2rem;
-}
-.project-step[data-status="in-progress"]:only-child::before {
-  height: 1rem;
-  color: red;
-  background-repeat: repeat;
-  background-position: left center;
-  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A");
-  background-size: 0.75rem;
-  left: 5.5rem;
-  right: 5.5rem;
-  bottom: -1.875rem;
-}
-.project-step[data-status="in-progress"]:only-child::after {
-  --icon-size: 1.25rem;
-  width: var(--icon-size);
-  background: var(--color-grey-300);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: var(--icon-size);
-  mask-image: var(--icon-point);
-  right: 3.75rem;
-  bottom: -2rem;
-}
-
-.project-step .pill::after {
-  content: "";
-  display: inline-block;
-  width: var(--icon-size, 1.25rem);
-  height: var(--icon-size, 1.25rem);
-  background-color: var(--icon-color, var(--color-primary-100));
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: var(--size, 1.25rem);
-  mask-image: var(--icon, var(--icon-point));
-  position: absolute;
-  bottom: -2rem;
-}
-.project-step[data-status="done"] > .pill,
-.project-step[data-status="uncompleted"] > .pill {
-  --background: transparent;
-}
-.project-step[data-status="done"] .pill::after {
-  mask-image: var(--icon-check-3);
-}
-.project-step[data-status="in-progress"] .pill::after {
-  mask-image: var(--icon-point-active);
-}
-.project-step[data-status="uncompleted"] .pill::after {
-  --icon-color: var(--color-grey-300);
-}
-</style>
-
 <script setup>
 import Menu from "../components/Menu.vue";
+import Projects from "../components/Projects.vue";
+
 const { data } = defineProps({
   data: Object,
 });
-
-console.log(data);
 </script>