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: 
 
 ----
 
@@ -16,6 +16,12 @@ Description:
 
 Moodboard:
 
+- file://YV7aUYle8hcLrzb6
+- file://zIZTny7xOE28rckL
+- file://Z5m6jEomcOt9bJqR
+- file://C2zFxRDOmD5PeXD6
+- file://BvOqspCnL024Ar9u
+
 ----
 
 Stepindex: 1

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

@@ -22,7 +22,7 @@ Given a POST request to: `/api/query`
         "title": true,
         "text": "page.text.markdown",
         "images": {
-      "query": "page.images",
+            "query": "page.moodboard",
             "select": {
                 "url": true
             }
@@ -124,7 +124,8 @@ const username = "apiuser";
 const password = "strong-secret-api-password";
 
 const headers = {
-  Authorization: "Basic " + Buffer.from(`${username}:${password}`).toString("base64"),
+    Authorization:
+        "Basic " + Buffer.from(`${username}:${password}`).toString("base64"),
     "Content-Type": "application/json",
     Accept: "application/json",
 };
@@ -509,7 +510,7 @@ const response = await fetch(api, {
         query: "page('photography').children",
         select: {
             title: "page.title",
-      images: "page.images",
+            images: "page.moodboard",
         },
     }),
     headers,
@@ -560,7 +561,7 @@ const response = await fetch(api, {
         select: {
             title: "page.title",
             images: {
-        query: "page.images",
+                query: "page.moodboard",
                 select: {
                     filename: true,
                 },
@@ -741,7 +742,7 @@ const response = await fetch(api, {
         select: {
             title: "page.title",
             images: {
-        query: "page.images",
+                query: "page.moodboard",
                 pagination: {
                     page: 2,
                     limit: 5,
@@ -784,7 +785,7 @@ const response = await fetch(api, {
                 select: {
                     title: true,
                     images: {
-            query: "page.images",
+                        query: "page.moodboard",
                         select: {
                             url: true,
                             alt: true,
@@ -970,6 +971,7 @@ KQL only offers access to data in your site. It does not support any mutations.
 -   [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.

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

@@ -1,20 +1,14 @@
 <?php
 
-$images = [];
+$moodboard = [];
 
 foreach ($page->moodboard()->toFiles() as $image) {
-  $images[] = [
+  $moodboard[] = getFileData($image);
-    'url' => $image->url(),
-    'uuid' => (string) $image->uuid(),
-    'tags' => $image->tags()->split(),
-    'name' => $image->filename(),
-    'description' => $image->description()->value(),
-  ];
 }
 
 $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,6 +4,7 @@
     aria-labelledby="votre-brief-label"
     :data-status="status"
   >
+    <router-link :to="'/' + step.uri">
       <h2 id="votre-brief-label">
         <span data-icon="votre-brief">{{ step.text }}</span>
       </h2>
@@ -17,24 +18,20 @@
               dayjs(step.modified).format("DD MMMM YYYY")
             }}</time>
           </div>
-        <router-link :to="'/' + step.uri">
+
-          <figure class="card__images" data-count="13">
+          <template v-if="step.value === 'clientBrief'">
+            <figure class="card__images" :data-count="step.files.length - 3">
               <img
-              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
+                v-for="image in step.files.slice(0, 3)"
-              alt=""
+                :key="image.uuid"
-            />
+                :src="image.url"
-            <img
+                :alt="image.alt"
-              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>
+          </template>
         </article>
       </div>
+    </router-link>
   </section>
 </template>
 
@@ -51,14 +48,9 @@ dayjs.locale("fr");
 
 const { page } = usePageStore();
 
-const steps = [
+const steps = page.steps.map((item) => {
-  "clientBrief",
+  return item.value;
-  "proposal",
+});
-  "extended-brief",
-  "industrialIdeation",
-  "virtualSample",
-  "physicalSample",
-];
 
 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>