Project view > Kanban + project card clickable

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt

@@ -33,3 +33,43 @@ Comments:
   position:
     x: null
     y: null
+- 
+  page:
+    uri: projects/miss-dior-blooming-bouquet
+    title: Miss Dior Blooming Bouquet
+  file:
+    uuid: file://s0lNtRA0Z7ybTCWG
+    pageIndex: 1
+  replies:
+    - 
+      page:
+        uri: projects/miss-dior-blooming-bouquet
+        title: Miss Dior Blooming Bouquet
+      file:
+        uuid: file://s0lNtRA0Z7ybTCWG
+        pageIndex: 1
+      replies: [ ]
+      text: Réponse
+      author:
+        name: Adrien Payet
+        email: adrien.payet@outlook.com
+        uuid: user://WWjXgPWk
+        role: admin
+      date: 2024-10-30T16:52:46+01:00
+      id: m2w22gxz
+      type: comment
+      isRead: false
+      parentId: m2w2252a
+  text: deuxième commentaire
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-10-30T16:52:31+01:00
+  id: m2w2252a
+  type: comment
+  isRead: false
+  position:
+    x: null
+    y: null

src/components/project/Project.vue

@@ -1,10 +1,13 @@
 <template>
+  <router-link :to="project.uri">
     <article class="project-item | flex | rounded-2xl | px-32 py-32">
       <hgroup>
         <h3>{{ project.title }}</h3>
         <p>
           Dernière mise à jour le
-        <time :datetime="project.modified">{{ frenchFormattedModified }}</time>
+          <time :datetime="project.modified">{{
+            frenchFormattedModified
+          }}</time>
         </p>
       </hgroup>
       <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
@@ -14,6 +17,7 @@
         </li>
       </ol>
     </article>
+  </router-link>
 </template>
 
 <script setup>

src/components/project/VirtualSample.vue

@@ -18,10 +18,7 @@
         >
           <span>Vue Dynamique</span>
         </button>
-        <button 
-          class="btn btn--transparent | font-serif" 
-          data-icon="image"
-        >
+        <button class="btn btn--transparent | font-serif" data-icon="image">
           <span>Vue statique</span>
         </button>
       </div>
@@ -33,20 +30,22 @@
           <button
             class="btn btn--image"
             aria-pressed="true"
-            style="--btn-image: url('https://images.unsplash.com/photo-1708486855543-6010a133280f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHBhcmZ1bWUlMjBib3R0bGV8ZW58MHx8MHx8fDA%3D')" 
+            style="
+              --btn-image: url('https://images.unsplash.com/photo-1708486855543-6010a133280f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHBhcmZ1bWUlMjBib3R0bGV8ZW58MHx8MHx8fDA%3D');
+            "
           >
             <span>Piste 1</span>
           </button>
           <button
             class="btn btn--image"
-            style="--btn-image: url('https://images.unsplash.com/photo-1680607622631-1e243ddd6782?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cGFyZnVtZSUyMGJvdHRsZXxlbnwwfHwwfHx8MA%3D%3D')" 
+            style="
+              --btn-image: url('https://images.unsplash.com/photo-1680607622631-1e243ddd6782?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cGFyZnVtZSUyMGJvdHRsZXxlbnwwfHwwfHx8MA%3D%3D');
+            "
           >
             <span>Piste 2</span>
           </button>
         </div>
-        <button 
-          class="btn | ml-auto" 
-        >
+        <button class="btn | ml-auto">
           <span>Comparer les pistes</span>
         </button>
       </header>

src/router/routes.js

@@ -2,7 +2,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 Kanban from "../views/Kanban.vue";
 import ClientBrief from "../views/ClientBrief.vue";
 
 const routes = [
@@ -24,7 +24,7 @@ const routes = [
   },
   {
     path: "/projects/:id",
-    component: Project,
+    component: Kanban,
   },
   {
     path: "/projects/:id/client-brief",