Merge branch 'main' of https://framagit.org/isUnknown/pdc-b2b-project-management-platform

* 'main' of https://framagit.org/isUnknown/pdc-b2b-project-management-platform:
  test
  kanban > steps : move corresponding styles

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/21361147_au-commencement-du-college-chloe-avait-donc-fait-la-connaissance-dun-garcon.-il-etait-plus-vieux.pdf.txt

@@ -1,9 +0,0 @@
-Date: 2024-10-16 01:15
-
-----
-
-Uuid: fGa7zaC6S5zprMyo
-
-----
-
-Template: document

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/4034442471_bleu-divague.jpg.txt

@@ -0,0 +1,17 @@
+Date: 2024-10-16 02:10
+
+----
+
+Description: 
+
+----
+
+Tags: DA globale
+
+----
+
+Uuid: BvOqspCnL024Ar9u
+
+----
+
+Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/black-1984277_1280.jpg.txt

@@ -0,0 +1,17 @@
+Description: description
+
+----
+
+Tags: 
+
+----
+
+Sort: 7
+
+----
+
+Uuid: zIZTny7xOE28rckL
+
+----
+
+Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt

@@ -6,7 +6,7 @@ Stepname: clientBrief
 
 ----
 
-Pdf: - file://fGa7zaC6S5zprMyo
+Pdf: 
 
 ----
 
@@ -14,7 +14,13 @@ Description:
 
 ----
 
-Moodboard: 
+Moodboard:
+
+- file://YV7aUYle8hcLrzb6
+- file://zIZTny7xOE28rckL
+- file://Z5m6jEomcOt9bJqR
+- file://C2zFxRDOmD5PeXD6
+- file://BvOqspCnL024Ar9u
 
 ----
 

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-144546_1280.jpg.txt

@@ -0,0 +1,17 @@
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Sort: 8
+
+----
+
+Uuid: Z5m6jEomcOt9bJqR
+
+----
+
+Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-2643349_1280.jpg.txt

@@ -0,0 +1,17 @@
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Sort: 10
+
+----
+
+Uuid: C2zFxRDOmD5PeXD6
+
+----
+
+Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-4718455_1280.jpg.txt

@@ -0,0 +1,17 @@
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Sort: 12
+
+----
+
+Uuid: YV7aUYle8hcLrzb6
+
+----
+
+Template: image

public/site/models/project.php

@@ -5,12 +5,21 @@ class ProjectPage extends Page {
     $steps = [];
 
     foreach ($this->children() as $child) {
+      $files = [];
+
+      if ($child->stepName() == 'clientBrief') {
+        foreach ($child->moodboard()->toFiles() as $file) {
+          $files[] = getFileData($file);
+        }
+      }
+
       $steps[] = [
         'text' => $child->title()->value(),
         'value' => $child->stepName()->value(),
         'index' => $child->stepIndex()->value(),
         'modified' => $child->modified('Y-MM-dd'),
-        'uri' => $child->uri()
+        'uri' => $child->uri(),
+        'files' => $files
       ];
     }
 

public/site/plugins/helpers/index.php

@@ -0,0 +1,16 @@
+<?php
+
+function getFileData($file) {
+  $data = [
+    'url' => $file->url(),
+    'uuid' => (string) $file->uuid(),
+    'name' => $file->filename(),
+  ];
+
+  if ($file->description()->exists()) {
+    $data['description'] = $file->description();
+    $data['tags'] = $file->tags()->split();
+  };
+
+  return $data;
+}

public/site/plugins/kql/README.md

@@ -16,21 +16,21 @@ Given a POST request to: `/api/query`
 
 ```json
 {
-  "query": "page('photography').children",
-  "select": {
-    "url": true,
-    "title": true,
-    "text": "page.text.markdown",
-    "images": {
-      "query": "page.images",
-      "select": {
-        "url": true
-      }
+    "query": "page('photography').children",
+    "select": {
+        "url": true,
+        "title": true,
+        "text": "page.text.markdown",
+        "images": {
+            "query": "page.moodboard",
+            "select": {
+                "url": true
+            }
+        }
+    },
+    "pagination": {
+        "limit": 10
     }
-  },
-  "pagination": {
-    "limit": 10
-  }
 }
 ```
 
@@ -39,48 +39,48 @@ Given a POST request to: `/api/query`
 
 ```json
 {
-  "code": 200,
-  "result": {
-    "data": [
-      {
-        "url": "https://example.com/photography/trees",
-        "title": "Trees",
-        "text": "Lorem <strong>ipsum</strong> …",
-        "images": [
-          {
-            "url": "https://example.com/media/pages/photography/trees/1353177920-1579007734/cheesy-autumn.jpg"
-          },
-          {
-            "url": "https://example.com/media/pages/photography/trees/1940579124-1579007734/last-tree-standing.jpg"
-          },
-          {
-            "url": "https://example.com/media/pages/photography/trees/3506294441-1579007734/monster-trees-in-the-fog.jpg"
-          }
-        ]
-      },
-      {
-        "url": "https://example.com/photography/sky",
-        "title": "Sky",
-        "text": "<h1>Dolor sit amet</h1> …",
-        "images": [
-          {
-            "url": "https://example.com/media/pages/photography/sky/183363500-1579007734/blood-moon.jpg"
-          },
-          {
-            "url": "https://example.com/media/pages/photography/sky/3904851178-1579007734/coconut-milkyway.jpg"
-          }
-        ]
-      }
-    ],
-    "pagination": {
-      "page": 1,
-      "pages": 1,
-      "offset": 0,
-      "limit": 10,
-      "total": 2
-    }
-  },
-  "status": "ok"
+    "code": 200,
+    "result": {
+        "data": [
+            {
+                "url": "https://example.com/photography/trees",
+                "title": "Trees",
+                "text": "Lorem <strong>ipsum</strong> …",
+                "images": [
+                    {
+                        "url": "https://example.com/media/pages/photography/trees/1353177920-1579007734/cheesy-autumn.jpg"
+                    },
+                    {
+                        "url": "https://example.com/media/pages/photography/trees/1940579124-1579007734/last-tree-standing.jpg"
+                    },
+                    {
+                        "url": "https://example.com/media/pages/photography/trees/3506294441-1579007734/monster-trees-in-the-fog.jpg"
+                    }
+                ]
+            },
+            {
+                "url": "https://example.com/photography/sky",
+                "title": "Sky",
+                "text": "<h1>Dolor sit amet</h1> …",
+                "images": [
+                    {
+                        "url": "https://example.com/media/pages/photography/sky/183363500-1579007734/blood-moon.jpg"
+                    },
+                    {
+                        "url": "https://example.com/media/pages/photography/sky/3904851178-1579007734/coconut-milkyway.jpg"
+                    }
+                ]
+            }
+        ],
+        "pagination": {
+            "page": 1,
+            "pages": 1,
+            "offset": 0,
+            "limit": 10,
+            "total": 2
+        }
+    },
+    "status": "ok"
 }
 ```
 
@@ -124,23 +124,24 @@ const username = "apiuser";
 const password = "strong-secret-api-password";
 
 const headers = {
-  Authorization: "Basic " + Buffer.from(`${username}:${password}`).toString("base64"),
-  "Content-Type": "application/json",
-  Accept: "application/json",
+    Authorization:
+        "Basic " + Buffer.from(`${username}:${password}`).toString("base64"),
+    "Content-Type": "application/json",
+    Accept: "application/json",
 };
 
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "page('notes').children",
-    select: {
-      title: true,
-      text: "page.text.kirbytext",
-      slug: true,
-      date: "page.date.toDate('d.m.Y')",
-    },
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "page('notes').children",
+        select: {
+            title: true,
+            text: "page.text.kirbytext",
+            slug: true,
+            date: "page.date.toDate('d.m.Y')",
+        },
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -158,11 +159,11 @@ When you don't pass the select option, Kirby will try to come up with the most u
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "site.title",
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "site.title",
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -185,11 +186,11 @@ console.log(await response.json());
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "site.children",
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "site.children",
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -220,11 +221,11 @@ Queries can even execute field methods.
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "site.title.upper",
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "site.title.upper",
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -253,12 +254,12 @@ To include a property or field in your results, list them as an array. Check out
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "site.children",
-    select: ["title", "url"],
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "site.children",
+        select: ["title", "url"],
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -311,15 +312,15 @@ You can also use the object notation and pass true for each key/property you wan
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "site.children",
-    select: {
-      title: true,
-      url: true,
-    },
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "site.children",
+        select: {
+            title: true,
+            url: true,
+        },
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -368,14 +369,14 @@ Instead of passing true, you can also pass a string query to specify what you wa
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "site.children",
-    select: {
-      title: "page.title",
-    },
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "site.children",
+        select: {
+            title: "page.title",
+        },
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -409,14 +410,14 @@ console.log(await response.json());
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "site.children",
-    select: {
-      title: "page.title.upper",
-    },
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "site.children",
+        select: {
+            title: "page.title.upper",
+        },
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -452,19 +453,19 @@ String queries are a perfect way to create aliases or return variations of the s
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "page('notes').children",
-    select: {
-      title: "page.title",
-      upperCaseTitle: "page.title.upper",
-      lowerCaseTitle: "page.title.lower",
-      guid: "page.id",
-      date: "page.date.toDate('d.m.Y')",
-      timestamp: "page.date.toTimestamp",
-    },
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "page('notes').children",
+        select: {
+            title: "page.title",
+            upperCaseTitle: "page.title.upper",
+            lowerCaseTitle: "page.title.lower",
+            guid: "page.id",
+            date: "page.date.toDate('d.m.Y')",
+            timestamp: "page.date.toTimestamp",
+        },
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -504,15 +505,15 @@ With such string queries you can of course also include nested data
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "page('photography').children",
-    select: {
-      title: "page.title",
-      images: "page.images",
-    },
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "page('photography').children",
+        select: {
+            title: "page.title",
+            images: "page.moodboard",
+        },
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -554,20 +555,20 @@ You can also pass an object with a `query` and a `select` option
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "page('photography').children",
-    select: {
-      title: "page.title",
-      images: {
-        query: "page.images",
+    method: "post",
+    body: JSON.stringify({
+        query: "page('photography').children",
         select: {
-          filename: true,
+            title: "page.title",
+            images: {
+                query: "page.moodboard",
+                select: {
+                    filename: true,
+                },
+            },
         },
-      },
-    },
-  }),
-  headers,
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -623,17 +624,17 @@ You can specify a custom limit with the limit option. The default limit for coll
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "page('notes').children",
-    pagination: {
-      limit: 5,
-    },
-    select: {
-      title: "page.title",
-    },
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "page('notes').children",
+        pagination: {
+            limit: 5,
+        },
+        select: {
+            title: "page.title",
+        },
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -683,18 +684,18 @@ You can jump to any page in the resultset with the `page` option.
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "page('notes').children",
-    pagination: {
-      page: 2,
-      limit: 5,
-    },
-    select: {
-      title: "page.title",
-    },
-  }),
-  headers,
+    method: "post",
+    body: JSON.stringify({
+        query: "page('notes').children",
+        pagination: {
+            page: 2,
+            limit: 5,
+        },
+        select: {
+            title: "page.title",
+        },
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -735,24 +736,24 @@ Pagination settings also work for subqueries.
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "page('photography').children",
-    select: {
-      title: "page.title",
-      images: {
-        query: "page.images",
-        pagination: {
-          page: 2,
-          limit: 5,
-        },
+    method: "post",
+    body: JSON.stringify({
+        query: "page('photography').children",
         select: {
-          filename: true,
+            title: "page.title",
+            images: {
+                query: "page.moodboard",
+                pagination: {
+                    page: 2,
+                    limit: 5,
+                },
+                select: {
+                    filename: true,
+                },
+            },
         },
-      },
-    },
-  }),
-  headers,
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -764,41 +765,41 @@ With the power of selects and subqueries you can basically query the entire site
 
 ```js
 const response = await fetch(api, {
-  method: "post",
-  body: JSON.stringify({
-    query: "site",
-    select: {
-      title: "site.title",
-      url: "site.url",
-      notes: {
-        query: "page('notes').children.listed",
+    method: "post",
+    body: JSON.stringify({
+        query: "site",
         select: {
-          title: true,
-          url: true,
-          date: "page.date.toDate('d.m.Y')",
-          text: "page.text.kirbytext",
-        },
-      },
-      photography: {
-        query: "page('photography').children.listed",
-        select: {
-          title: true,
-          images: {
-            query: "page.images",
-            select: {
-              url: true,
-              alt: true,
-              caption: "file.caption.kirbytext",
+            title: "site.title",
+            url: "site.url",
+            notes: {
+                query: "page('notes').children.listed",
+                select: {
+                    title: true,
+                    url: true,
+                    date: "page.date.toDate('d.m.Y')",
+                    text: "page.text.kirbytext",
+                },
+            },
+            photography: {
+                query: "page('photography').children.listed",
+                select: {
+                    title: true,
+                    images: {
+                        query: "page.moodboard",
+                        select: {
+                            url: true,
+                            alt: true,
+                            caption: "file.caption.kirbytext",
+                        },
+                    },
+                },
+            },
+            about: {
+                text: "page.text.kirbytext",
             },
-          },
         },
-      },
-      about: {
-        text: "page.text.kirbytext",
-      },
-    },
-  }),
-  headers,
+    }),
+    headers,
 });
 
 console.log(await response.json());
@@ -966,19 +967,20 @@ KQL only offers access to data in your site. It does not support any mutations.
 
 ## Plugins
 
-- [KQL + 11ty](https://github.com/getkirby/eleventykit)
-- [KQL + Nuxt](https://nuxt-kql.jhnn.dev)
+-   [KQL + 11ty](https://github.com/getkirby/eleventykit)
+-   [KQL + Nuxt](https://nuxt-kql.jhnn.dev)
 
 ## What's Kirby?
-- **[getkirby.com](https://getkirby.com)** – Get to know the CMS.
-- **[Try it](https://getkirby.com/try)** – Take a test ride with our online demo. Or download one of our kits to get started.
-- **[Documentation](https://getkirby.com/docs/guide)** – Read the official guide, reference and cookbook recipes.
-- **[Issues](https://github.com/getkirby/kirby/issues)** – Report bugs and other problems.
-- **[Feedback](https://feedback.getkirby.com)** – You have an idea for Kirby? Share it.
-- **[Forum](https://forum.getkirby.com)** – Whenever you get stuck, don't hesitate to reach out for questions and support.
-- **[Discord](https://chat.getkirby.com)** – Hang out and meet the community.
-- **[Mastodon](https://mastodon.social/@getkirby)** – Spread the word.
-- **[Instagram](https://www.instagram.com/getkirby/)** – Share your creations: #madewithkirby.
+
+-   **[getkirby.com](https://getkirby.com)** – Get to know the CMS.
+-   **[Try it](https://getkirby.com/try)** – Take a test ride with our online demo. Or download one of our kits to get started.
+-   **[Documentation](https://getkirby.com/docs/guide)** – Read the official guide, reference and cookbook recipes.
+-   **[Issues](https://github.com/getkirby/kirby/issues)** – Report bugs and other problems.
+-   **[Feedback](https://feedback.getkirby.com)** – You have an idea for Kirby? Share it.
+-   **[Forum](https://forum.getkirby.com)** – Whenever you get stuck, don't hesitate to reach out for questions and support.
+-   **[Discord](https://chat.getkirby.com)** – Hang out and meet the community.
+-   **[Mastodon](https://mastodon.social/@getkirby)** – Spread the word.
+-   **[Instagram](https://www.instagram.com/getkirby/)** – Share your creations: #madewithkirby.
 
 ---
 

public/site/templates/client-brief.json.php

@@ -1,20 +1,14 @@
 <?php
 
-$images = [];
+$moodboard = [];
 
 foreach ($page->moodboard()->toFiles() as $image) {
-  $images[] = [
-    'url' => $image->url(),
-    'uuid' => (string) $image->uuid(),
-    'tags' => $image->tags()->split(),
-    'name' => $image->filename(),
-    'description' => $image->description()->value(),
-  ];
+  $moodboard[] = getFileData($image);
 }
 
 $specificData = [
   "tags" => $page->parent()->parent()->clientBriefImageTags()->split(),
-  "images" => $images
+  "moodboard" => $moodboard
 ];
 
 $data = array_merge($genericData, $specificData);

public/site/templates/project.json.php

@@ -1,13 +1,11 @@
 <?php
-
 $project = [
   'title' => $page->title()->value(),
   'url' => $page->url(),
   'modified' => $page->modified('Y-MM-d'),
   'status' => $page->status(),
   'logo' => $page->client()->toPage()->logo()->toFile()->url(),
-  'currentStep' => $page->currentStep()->value(),
-  'steps' => $page->getSteps()
+  'steps' => $page->getSteps(),
 ];
 
 $data = array_merge($genericData, $project);

src/components/project/ProjectStep.vue

@@ -4,37 +4,34 @@
     aria-labelledby="votre-brief-label"
     :data-status="status"
   >
-    <h2 id="votre-brief-label">
-      <span data-icon="votre-brief">{{ step.text }}</span>
-    </h2>
-    <div class="cards | flow">
-      <article class="card">
-        <hgroup class="order-last">
-          <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
-        </hgroup>
-        <div class="card__meta | flex">
-          <time class="card__date | text-grey-700" datetime="2024-06-12">{{
-            dayjs(step.modified).format("DD MMMM YYYY")
-          }}</time>
-        </div>
-        <router-link :to="'/' + step.uri">
-          <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/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
-              alt=""
-            />
-            <img
-              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
-              alt=""
-            />
-          </figure>
-        </router-link>
-      </article>
-    </div>
+    <router-link :to="'/' + step.uri">
+      <h2 id="votre-brief-label">
+        <span data-icon="votre-brief">{{ step.text }}</span>
+      </h2>
+      <div class="cards | flow">
+        <article class="card">
+          <hgroup class="order-last">
+            <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
+          </hgroup>
+          <div class="card__meta | flex">
+            <time class="card__date | text-grey-700" datetime="2024-06-12">{{
+              dayjs(step.modified).format("DD MMMM YYYY")
+            }}</time>
+          </div>
+
+          <template v-if="step.value === 'clientBrief'">
+            <figure class="card__images" :data-count="step.files.length - 3">
+              <img
+                v-for="image in step.files.slice(0, 3)"
+                :key="image.uuid"
+                :src="image.url"
+                :alt="image.alt"
+              />
+            </figure>
+          </template>
+        </article>
+      </div>
+    </router-link>
   </section>
 </template>
 
@@ -51,14 +48,9 @@ dayjs.locale("fr");
 
 const { page } = usePageStore();
 
-const steps = [
-  "clientBrief",
-  "proposal",
-  "extended-brief",
-  "industrialIdeation",
-  "virtualSample",
-  "physicalSample",
-];
+const steps = page.steps.map((item) => {
+  return item.value;
+});
 
 const status = setStatus();
 
@@ -74,3 +66,128 @@ function setStatus() {
   }
 }
 </script>
+
+<style scoped>
+.kanban > section {
+  min-width: 20rem;
+  position: relative;
+}
+
+.kanban .cards {
+  padding-top: var(--space-16);
+  max-height: calc(100% - var(--header-height));
+  overflow-y: auto;
+}
+
+.kanban > section h2 {
+  position: relative;
+  background-color: var(--header-bg-color);
+  border-radius: var(--rounded-md);
+  font-size: var(--text-sm);
+  height: var(--header-height);
+}
+.kanban > section h2 > span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-8);
+  background-color: var(--header-title-bg-color);
+  color: var(--color-white);
+  height: 100%;
+  width: fit-content;
+  padding: 0 var(--space-12);
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+  font-weight: 500;
+}
+.kanban > section + section h2::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: calc(var(--header-height) / 2 - 1.5px);
+  right: 100%;
+  width: var(--gap);
+  height: 3px;
+  background-color: var(--color-grey-200);
+  z-index: -1;
+}
+
+.kanban [data-status="done"] h2::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: var(--space-4);
+  bottom: 0;
+  display: inline-block;
+  width: var(--icon-size, var(--header-height));
+  height: var(--icon-size, var(--header-height));
+  background: var(--icon-color, currentColor);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: var(--icon-size, 1rem);
+  mask-image: var(--icon, var(--icon-check));
+}
+
+.kanban [data-status="in-progress"] {
+  --header-bg-color: var(--color-primary-20);
+  --header-title-bg-color: var(--color-primary);
+}
+.kanban [data-status="in-progress"] h2::after {
+  content: "";
+  color: var(--color-primary);
+  position: absolute;
+  top: 0;
+  right: var(--space-4);
+  bottom: 0;
+  display: inline-block;
+  width: var(--icon-size, var(--header-height));
+  height: var(--icon-size, var(--header-height));
+  background: var(--icon-color, currentColor);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: var(--icon-size, 1rem);
+  mask-image: var(--icon-point-active);
+}
+.kanban [data-status="in-progress"]::after {
+  content: "En cours";
+  position: absolute;
+  top: 0;
+  right: calc(var(--icon-size, var(--header-height)) + var(--space-4));
+  color: var(--color-primary);
+  font-weight: 500;
+  font-size: var(--text-sm);
+  line-height: 2.125rem;
+}
+
+.kanban [data-status="uncompleted"] h2 {
+  background: none;
+}
+.kanban [data-status="uncompleted"] h2::before {
+  background-color: transparent;
+  background-repeat: repeat-x;
+  background-position: left center;
+  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='2' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A");
+  background-size: 0.5rem;
+  right: calc(-1 * var(--gap));
+  left: calc(-1 * var(--gap));
+  width: auto;
+}
+.kanban [data-status="uncompleted"] h2 > span {
+  border-radius: inherit;
+}
+.kanban [data-status="uncompleted"] .cards > * {
+  min-height: 10rem;
+}
+.kanban [data-status="uncompleted"]::after {
+  content: "En attente";
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: var(--color-grey-50);
+  color: var(--color-grey-700);
+  font-weight: 500;
+  font-size: var(--text-sm);
+  line-height: 2.125rem;
+  padding: 0 var(--space-12);
+}
+</style>

src/components/project/client-brief/Images.vue

@@ -12,7 +12,7 @@
       >
         Ajouter une ou plusieurs images
       </button>
-      <template v-for="image in page.images" :key="image.uri">
+      <template v-for="image in page.moodboard" :key="image.uri">
         <figure
           v-if="
             selectedTags.length === 0 ||
@@ -66,7 +66,7 @@ function changeSelectedTags(newTags) {
 
 function removeImage(target) {
   console.log("remove", target);
-  page.value.images = page.value.images.filter(
+  page.value.moodboard = page.value.moodboard.filter(
     (image) => image.uuid !== target.uuid
   );
 }

src/components/project/client-brief/add-images-modal/ImagesEditPanel.vue

@@ -198,7 +198,7 @@ function addImagesToBrief() {
     })
       .then((res) => res.json())
       .then((json) => {
-        page.value.images = json.images;
+        page.value.moodboard = json.images;
         console.log(json);
       })
       .catch((error) => console.error("Error:", error));

src/views/ClientBrief.vue

@@ -1,7 +1,11 @@
 <template>
   <main class="flex flex-col items-stretch | w-full" style="--row-gap: 2rem">
     <header class="flex | bg-white | rounded-2xl | p-8">
-      <router-link :to="'/' + page.parent" class="btn btn--white" data-icon="arrow-left">
+      <router-link
+        :to="'/' + page.parent"
+        class="btn btn--white"
+        data-icon="arrow-left"
+      >
         <span>Retour au projet</span>
       </router-link>
       <button class="btn | ml-auto">Valider et envoyer le brief</button>

src/views/Project.vue

@@ -269,126 +269,4 @@ function setStepStatus(stepName) {
   padding: 0 var(--gutter);
   height: calc(100vh - var(--gutter) * 2 - var(--header-height) - 2.25rem);
 }
-.kanban > section {
-  min-width: 20rem;
-  position: relative;
-}
-
-.kanban > section h2 {
-  position: relative;
-  background-color: var(--header-bg-color);
-  border-radius: var(--rounded-md);
-  font-size: var(--text-sm);
-  height: var(--header-height);
-}
-.kanban > section h2 > span {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--space-8);
-  background-color: var(--header-title-bg-color);
-  color: var(--color-white);
-  height: 100%;
-  width: fit-content;
-  padding: 0 var(--space-12);
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  font-weight: 500;
-}
-.kanban > section + section h2::before {
-  content: "";
-  display: inline-block;
-  position: absolute;
-  top: calc(var(--header-height) / 2 - 1.5px);
-  right: 100%;
-  width: var(--gap);
-  height: 3px;
-  background-color: var(--color-grey-200);
-  z-index: -1;
-}
-
-.kanban [data-status="done"] h2::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: var(--space-4);
-  bottom: 0;
-  display: inline-block;
-  width: var(--icon-size, var(--header-height));
-  height: var(--icon-size, var(--header-height));
-  background: var(--icon-color, currentColor);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: var(--icon-size, 1rem);
-  mask-image: var(--icon, var(--icon-check));
-}
-
-.kanban [data-status="in-progress"] {
-  --header-bg-color: var(--color-primary-20);
-  --header-title-bg-color: var(--color-primary);
-}
-.kanban [data-status="in-progress"] h2::after {
-  content: "";
-  color: var(--color-primary);
-  position: absolute;
-  top: 0;
-  right: var(--space-4);
-  bottom: 0;
-  display: inline-block;
-  width: var(--icon-size, var(--header-height));
-  height: var(--icon-size, var(--header-height));
-  background: var(--icon-color, currentColor);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: var(--icon-size, 1rem);
-  mask-image: var(--icon-point-active);
-}
-.kanban [data-status="in-progress"]::after {
-  content: "En cours";
-  position: absolute;
-  top: 0;
-  right: calc(var(--icon-size, var(--header-height)) + var(--space-4));
-  color: var(--color-primary);
-  font-weight: 500;
-  font-size: var(--text-sm);
-  line-height: 2.125rem;
-}
-
-.kanban [data-status="uncompleted"] h2 {
-  background: none;
-}
-.kanban [data-status="uncompleted"] h2::before {
-  background-color: transparent;
-  background-repeat: repeat-x;
-  background-position: left center;
-  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='2' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A");
-  background-size: 0.5rem;
-  right: calc(-1 * var(--gap));
-  left: calc(-1 * var(--gap));
-  width: auto;
-}
-.kanban [data-status="uncompleted"] h2 > span {
-  border-radius: inherit;
-}
-.kanban [data-status="uncompleted"] .cards > * {
-  min-height: 10rem;
-}
-.kanban [data-status="uncompleted"]::after {
-  content: "En attente";
-  position: absolute;
-  top: 0;
-  right: 0;
-  background-color: var(--color-grey-50);
-  color: var(--color-grey-700);
-  font-weight: 500;
-  font-size: var(--text-sm);
-  line-height: 2.125rem;
-  padding: 0 var(--space-12);
-}
-
-.kanban .cards {
-  padding-top: var(--space-16);
-  max-height: calc(100% - var(--header-height));
-  overflow-y: auto;
-}
 </style>