From 93642fb9b29b05e737cba751d0d7a786fff84922 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 17 Sep 2024 17:31:03 +0200
Subject: [PATCH] add project route

---
 public/site/templates/projects.json.php |  2 +
 src/components/Menu.vue                 |  4 +-
 src/router/router.js                    |  5 ++
 src/views/Project.vue                   | 98 ++++++++++++++++++-------
 4 files changed, 81 insertions(+), 28 deletions(-)

diff --git a/public/site/templates/projects.json.php b/public/site/templates/projects.json.php
index 222436d..716554d 100644
--- a/public/site/templates/projects.json.php
+++ b/public/site/templates/projects.json.php
@@ -4,6 +4,8 @@ $children = $page->children()->map(function ($child) {
   return [
     'title' => $child->title()->value(),
     'url' => $child->url(),
+    'uri' => $child->uri(),
+    'uri' => '/' . $child->uri(),
     'modified' => $child->modified('Y-MM-d'),
     'status' => $child->status(),
     'logo' => $child->client()->toPage()->logo()->toFile()->url()
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index c494f85..82c4161 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -52,7 +52,7 @@
         <summary>Projets en cours</summary>
         <ul>
           <li v-for="project in currentProjects">
-            <router-link :to="project.url" class="new">{{
+            <router-link :to="project.uri" class="new">{{
               project.title
             }}</router-link>
           </li>
@@ -62,7 +62,7 @@
         <summary>Projets archivés</summary>
         <ul>
           <li v-for="project in archivedProjects">
-            <router-link :to="project.url" class="new">{{
+            <router-link :to="project.uri" class="new">{{
               project.title
             }}</router-link>
           </li>
diff --git a/src/router/router.js b/src/router/router.js
index f3345e2..c6b2f03 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -3,6 +3,7 @@ import Home from "../views/Home.vue";
 import Notifications from "../views/Notifications.vue";
 import Reunions from "../views/Reunions.vue";
 import Inspirations from "../views/Inspirations.vue";
+import Project from "../views/Project.vue";
 import { useApiStore } from "../stores/api";
 import { usePageStore } from "../stores/page";
 import { getActivePinia } from "pinia";
@@ -24,6 +25,10 @@ const routes = [
     path: "/inspirations",
     component: Inspirations,
   },
+  {
+    path: "/projects/:id",
+    component: Project,
+  },
 ];
 
 const router = createRouter({
diff --git a/src/views/Project.vue b/src/views/Project.vue
index 7e4cc1b..a0ed6d9 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -1,7 +1,7 @@
 <template>
   <main>
     <header class="flex | bg-white | rounded-2xl | p-8">
-      <h1 class="font-serif | px-8">{{ data.content.title }}</h1>
+      <h1 class="font-serif | px-8">{{ page.content.title }}</h1>
       <button class="btn | ml-auto">Demander un RDV</button>
     </header>
     <div class="flex-columns">
@@ -9,15 +9,26 @@
         <h2 id="votre-brief-label" data-icon="">Votre brief</h2>
         <article class="card">
           <hgroup class="order-last">
-           <h3 class="card__title | font-serif | text-lg">Votre Brief</h3>
+            <h3 class="card__title | font-serif | text-lg">Votre Brief</h3>
           </hgroup>
           <div class="flex">
-            <time class="card__date | text-grey-700" datetime="2024-06-12">12 juin 2024</time>
+            <time class="card__date | text-grey-700" datetime="2024-06-12"
+              >12 juin 2024</time
+            >
           </div>
           <figure class="card__images" data-count="13">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png" alt="">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/a4222f5029-1725442486/22f8779f680ed826a2d0a1d2af6018c9.jpg" alt="">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png" alt="">
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/a4222f5029-1725442486/22f8779f680ed826a2d0a1d2af6018c9.jpg"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
+              alt=""
+            />
           </figure>
         </article>
       </section>
@@ -25,17 +36,28 @@
         <h2 id="offre-commerciale-label" data-icon="">Offre Commerciale</h2>
         <article class="card">
           <hgroup class="order-last">
-           <h3 class="card__title | font-serif | text-lg">Offre - 2</h3>
-           <p class="text-primary | font-medium">4 commentaires</p>
+            <h3 class="card__title | font-serif | text-lg">Offre - 2</h3>
+            <p class="text-primary | font-medium">4 commentaires</p>
           </hgroup>
           <div class="flex">
-            <time class="card__date | text-grey-700" datetime="2024-06-12">12 juin 2024</time>
+            <time class="card__date | text-grey-700" datetime="2024-06-12"
+              >12 juin 2024</time
+            >
             <span class="text-primary | font-medium | ml-auto">Validé</span>
           </div>
           <figure class="card__images">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png" alt="">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/a4222f5029-1725442486/22f8779f680ed826a2d0a1d2af6018c9.jpg" alt="">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png" alt="">
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/a4222f5029-1725442486/22f8779f680ed826a2d0a1d2af6018c9.jpg"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
+              alt=""
+            />
           </figure>
         </article>
       </section>
@@ -43,32 +65,57 @@
         <h2 id="brief-enrichi-label" data-icon="">Brief Enrichi</h2>
         <article class="card">
           <hgroup class="order-last">
-           <h3 class="card__title | font-serif | text-lg">Brief Enrichi</h3>
+            <h3 class="card__title | font-serif | text-lg">Brief Enrichi</h3>
           </hgroup>
           <div class="flex">
-            <time class="card__date | text-grey-700" datetime="2024-06-12">12 juin 2024</time>
+            <time class="card__date | text-grey-700" datetime="2024-06-12"
+              >12 juin 2024</time
+            >
             <span class="text-primary | font-medium | ml-auto">Validé</span>
           </div>
           <figure class="card__images" data-count="15">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png" alt="">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/a4222f5029-1725442486/22f8779f680ed826a2d0a1d2af6018c9.jpg" alt="">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png" alt="">
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/a4222f5029-1725442486/22f8779f680ed826a2d0a1d2af6018c9.jpg"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
+              alt=""
+            />
           </figure>
         </article>
       </section>
-      <section aria-labelledby="echantillon-virtuel-label" data-status="current">
+      <section
+        aria-labelledby="echantillon-virtuel-label"
+        data-status="current"
+      >
         <h2 id="echantillon-virtuel-label" data-icon="">Échantillon Virtuel</h2>
         <article class="card">
           <hgroup class="order-last">
-           <h3 class="card__title | font-serif | text-lg">Rendu 360°</h3>
+            <h3 class="card__title | font-serif | text-lg">Rendu 360°</h3>
           </hgroup>
           <div class="flex">
-            <time class="card__date | text-grey-700" datetime="2024-06-12">12 juin 2024</time>
+            <time class="card__date | text-grey-700" datetime="2024-06-12"
+              >12 juin 2024</time
+            >
           </div>
           <figure class="card__images" data-count="13">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png" alt="">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/a4222f5029-1725442486/22f8779f680ed826a2d0a1d2af6018c9.jpg" alt="">
-            <img src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png" alt="">
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/a4222f5029-1725442486/22f8779f680ed826a2d0a1d2af6018c9.jpg"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
+              alt=""
+            />
           </figure>
         </article>
       </section>
@@ -77,7 +124,7 @@
 </template>
 
 <script setup>
-import { usePageStore } from "../stores/page"
+import { usePageStore } from "../stores/page";
 import { useUserStore } from "../stores/user";
 import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
@@ -86,5 +133,4 @@ const { page } = storeToRefs(usePageStore());
 const user = useUserStore().user;
 </script>
 
-<style scope>
-</style>
\ No newline at end of file
+<style scope></style>