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

@@ -30,6 +30,46 @@ Comments:
   id: m2w14iph
   type: comment
   isRead: false
+  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,19 +1,23 @@
 <template>
-  <article class="project-item | flex | rounded-2xl | px-32 py-32">
+  <router-link :to="project.uri">
-    <hgroup>
+    <article class="project-item | flex | rounded-2xl | px-32 py-32">
-      <h3>{{ project.title }}</h3>
+      <hgroup>
-      <p>
+        <h3>{{ project.title }}</h3>
-        Dernière mise à jour le
+        <p>
-        <time :datetime="project.modified">{{ frenchFormattedModified }}</time>
+          Dernière mise à jour le
-      </p>
+          <time :datetime="project.modified">{{
-    </hgroup>
+            frenchFormattedModified
-    <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
+          }}</time>
-    <ol class="project-steps" data-steps="1">
+        </p>
-      <li class="project-step" data-status="in-progress">
+      </hgroup>
-        <span class="pill" data-icon="search">Votre Brief</span>
+      <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
-      </li>
+      <ol class="project-steps" data-steps="1">
-    </ol>
+        <li class="project-step" data-status="in-progress">
-  </article>
+          <span class="pill" data-icon="search">Votre Brief</span>
+        </li>
+      </ol>
+    </article>
+  </router-link>
 </template>
 
 <script setup>

src/components/project/VirtualSample.vue

@@ -11,17 +11,14 @@
   >
     <template #header>
       <div class="dialog__tabs">
-        <button 
+        <button
-          class="btn btn--transparent | font-serif" 
+          class="btn btn--transparent | font-serif"
           data-icon="cursor"
           aria-pressed="true"
         >
           <span>Vue Dynamique</span>
         </button>
-        <button 
+        <button class="btn btn--transparent | font-serif" data-icon="image">
-          class="btn btn--transparent | font-serif" 
-          data-icon="image"
-        >
           <span>Vue statique</span>
         </button>
       </div>
@@ -30,38 +27,40 @@
     <div class="dialog__inner">
       <header class="flex">
         <div class="options-selector">
-          <button 
+          <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 
+          <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 
+        <button class="btn | ml-auto">
-          class="btn | ml-auto" 
-        >
           <span>Comparer les pistes</span>
         </button>
       </header>
     </div>
     <template #footer>
-      <button 
+      <button
         id="download-image"
-        class="btn btn--white-10" 
+        class="btn btn--white-10"
         data-icon="download"
       >
         <span>Sauvegarder l’image</span>
       </button>
-      <button 
+      <button
         id="loop-animation"
-        class="btn btn--transparent btn--outline" 
+        class="btn btn--transparent btn--outline"
         data-icon="loop"
       >
         <span>Animation en boucle</span>

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",