Progression vue brief client

- l'étape courante est déterminée en fonction des données de la page
- les images sont ajoutées au champ
- les images déjà ajoutées sont affichées directement
- changement donnée briefClient -> clientBrief (cohérence avec le nommage front)

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/1445320111_perfume-1042715_1280.jpg.txt

@@ -0,0 +1,9 @@
+Date: 2024-10-02 01:10
+
+----
+
+Uuid: 1NmPGSM9FKgiyOwH
+
+----
+
+Template: default

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/1510991102_perfume-2721147_1280.jpg.txt

@@ -0,0 +1,9 @@
+Date: 2024-10-02 01:10
+
+----
+
+Uuid: ump9516TWbjrIo7T
+
+----
+
+Template: default

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

@@ -0,0 +1,9 @@
+Date: 2024-10-02 01:10
+
+----
+
+Uuid: RaQyVfBK6c8gv8pW
+
+----
+
+Template: default

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

@@ -6,7 +6,7 @@ Stepname: clientBrief
 
 ----
 
-Briefclientpdf: 
+Clientbriefpdf: 
 
 ----
 
@@ -14,7 +14,11 @@ Description: Sed congue magna magna lorem aliquam diam dolor arcu fusce adipisci
 
 ----
 
-Briefclientimages: 
+Clientbriefimages:
+
+- file://ump9516TWbjrIo7T
+- file://RaQyVfBK6c8gv8pW
+- file://1NmPGSM9FKgiyOwH
 
 ----
 

public/content/projects/1_miss-dior-blooming-bouquet/project.txt

@@ -2,7 +2,7 @@ Title: Miss Dior Blooming Bouquet
 
 ----
 
-Currentstep: 
+Currentstep: clientBrief
 
 ----
 

public/content/projects/_drafts/test/1_client-brief/client-brief.txt

@@ -14,7 +14,7 @@ Uuid: 5NGq8baScF9pCeK9
 
 ----
 
-Briefclientpdf: 
+Clientbriefpdf: 
 
 ----
 
@@ -22,4 +22,4 @@ Description:
 
 ----
 
-Briefclientimages: 
+Clientbriefimages: 

public/content/site.txt

@@ -2,4 +2,4 @@ Title: Nom du service
 
 ----
 
-Briefclientimagestags: Parachèvements, Forme & design, Matériaux & textures, Coloris & nuances, Bouchon, Bouton poussoir, DA globale
+Clientbriefimagestags: Parachèvements, Forme & design, Matériaux & textures, Coloris & nuances, Bouchon, Bouton poussoir, DA globale

public/site/blueprints/pages/client-brief.yml

@@ -24,7 +24,7 @@ tabs:
           stepName:
             type: hidden
             value: test
-          briefClientPdf:
+          clientBriefPdf:
             label: PDF
             type: files
             multiple: false
@@ -34,7 +34,7 @@ tabs:
             size: tiny
             buttons: false
             maxlength: 700
-          briefClientImages:
+          clientBriefImages:
             label: Images
             type: files
             uploads: image

public/site/blueprints/site.yml

@@ -35,7 +35,7 @@ tabs:
             label: Paramètres
             type: fields
             fields:
-              briefClientImagesTags:
+              clientBriefImagesTags:
                 label: Tags des images de Brief client
                 help: Ensemble des tags d’images disponibles lors de la création du Brief client
                 type: tags

public/site/config/config.php

@@ -21,7 +21,7 @@ return [
   'routes' => [
     require(__DIR__ . '/routes/logout.php'),
     require(__DIR__ . '/routes/toggle-favorite.php'),
-    require(__DIR__ . '/routes/upload.php')
+    require(__DIR__ . '/routes/upload-images.php')
   ],
   'hooks' => [
     'page.create:after' => require_once(__DIR__ . '/hooks/create-steps.php'),

public/site/config/routes/upload-images.php

@@ -1,7 +1,7 @@
 <?php
 
 return [
-  'pattern' => 'upload.json',
+  'pattern' => 'upload-images.json',
   'method' => 'POST',
   'action' => function () {
     if ($uploads = kirby()->request()->files()) {  
@@ -11,6 +11,7 @@ return [
       $alerts  = [];
       $success = '';
       $newFiles = [];
+      $allFiles = [];
 
       foreach ($uploads->get('images') as $upload) {
         // check for duplicate
@@ -26,12 +27,11 @@ return [
 
         if ($duplicates->count() > 0) {
           $alerts[$upload['name']] = "The file already exists";
-          continue;
         }
         
         try {
           $name = crc32($upload['name'].microtime()). '_' . $upload['name'];
-          $newFiles[] = $page->createFile([
+          $newFile = $page->createFile([
             'source'   => $upload['tmp_name'],
             'filename' => $name,
             'template' => 'default',
@@ -39,16 +39,28 @@ return [
                 'date' => date('Y-m-d h:m')
             ]
           ]);
+
+          $newFiles[] = $newFile;
+          
           $success = 'Your file upload was successful';
+
+          $allFiles[] = (string) $newFile->uuid();
         } catch (Exception $e) {
           $alerts[$upload['name']] = $e->getMessage();
         }
       }
       
       $images = array_map(function ($file) {
-        return $file->url();
+        return [
+          'url' => $file->url(),
+          'uuid' => $file->uuid()
+        ];
       }, $newFiles);
       
+      $newPage = $page->update([
+        'clientBriefImages' => $allFiles
+      ]);
+
       return compact('images', 'alerts', 'success');
     }
 

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

@@ -1,7 +1,16 @@
 <?php
 
+$images = [];
+
+foreach ($page->clientBriefImages()->toFiles() as $image) {
+  $images[] = [
+    'url' => $image->url(),
+    'uuid' => (string) $image->uuid()
+  ];
+}
+
 $specificData = [
-  "exampleField" => $page->exampleField(),
+  "images" => $images
 ];
 
 $data = array_merge($genericData, $specificData);

src/components/project/ClientBrief/Images.vue

@@ -4,7 +4,11 @@
       class="project-details | flex items-start | bg-white | rounded-2xl | p-16 | w-full"
     >
       <div class="project-details__description | flex-1">
-        <label for="project-description" class="flex | text-sm text-grey-700 | mb-8">Description du projet</label>
+        <label
+          for="project-description"
+          class="flex | text-sm text-grey-700 | mb-8"
+          >Description du projet</label
+        >
         <textarea
           name="project-description"
           id="project-description"
@@ -16,21 +20,65 @@
       <fieldset class="project-details__filters | flex-1">
         <legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
         <div class="flex" style="gap: var(--space-8)">
-          <button class="btn btn--sm btn--grey" id="all" aria-pressed="true">Voir tout</button>
-          <input class="sr-only" type="checkbox" id="bouchon" name="bouchon">
+          <button class="btn btn--sm btn--grey" id="all" aria-pressed="true">
+            Voir tout
+          </button>
+          <input class="sr-only" type="checkbox" id="bouchon" name="bouchon" />
           <label class="btn btn--sm btn--primary" for="bouchon">Bouchon</label>
-          <input class="sr-only" type="checkbox" id="bouchon-poussoir" name="bouchon-poussoir">
-          <label class="btn btn--sm btn--primary" for="bouchon-poussoir">Bouton Poussoir</label>
-          <input class="sr-only" type="checkbox" id="coloris-nuances" name="coloris-nuances">
-          <label class="btn btn--sm btn--primary" for="coloris-nuances">Coloris & Nuances</label>
-          <input class="sr-only" type="checkbox" id="da-globale" name="da-globale">
-          <label class="btn btn--sm btn--primary" for="da-globale">DA Globale</label>
-          <input class="sr-only" type="checkbox" id="forme-design" name="forme-design">
-          <label class="btn btn--sm btn--primary" for="forme-design">Forme & Design</label>
-          <input class="sr-only" type="checkbox" id="materiaux-textures" name="materiaux-textures">
-          <label class="btn btn--sm btn--primary" for="materiaux-textures">Matériaux & Textures</label>
-          <input class="sr-only" type="checkbox" id="parachevements" name="parachevements">
-          <label class="btn btn--sm btn--primary" for="parachevements">Parachèvements</label>
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="bouchon-poussoir"
+            name="bouchon-poussoir"
+          />
+          <label class="btn btn--sm btn--primary" for="bouchon-poussoir"
+            >Bouton Poussoir</label
+          >
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="coloris-nuances"
+            name="coloris-nuances"
+          />
+          <label class="btn btn--sm btn--primary" for="coloris-nuances"
+            >Coloris & Nuances</label
+          >
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="da-globale"
+            name="da-globale"
+          />
+          <label class="btn btn--sm btn--primary" for="da-globale"
+            >DA Globale</label
+          >
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="forme-design"
+            name="forme-design"
+          />
+          <label class="btn btn--sm btn--primary" for="forme-design"
+            >Forme & Design</label
+          >
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="materiaux-textures"
+            name="materiaux-textures"
+          />
+          <label class="btn btn--sm btn--primary" for="materiaux-textures"
+            >Matériaux & Textures</label
+          >
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="parachevements"
+            name="parachevements"
+          />
+          <label class="btn btn--sm btn--primary" for="parachevements"
+            >Parachèvements</label
+          >
         </div>
       </fieldset>
     </header>
@@ -38,7 +86,7 @@
       <FileUpload
         mode="basic"
         name="images[]"
-        :url="'/upload.json?pageUri=' + page.uri"
+        :url="'/upload-images.json?pageUri=' + page.uri"
         @upload="onAdvancedUpload($event)"
         :auto="true"
         :multiple="true"
@@ -49,8 +97,20 @@
         class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
       >
         <template #chooseicon>
-          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </template>
         <template
@@ -58,7 +118,7 @@
             files,
             uploadedFiles,
             removeUploadedFileCallback,
-            removeFileCallback
+            removeFileCallback,
           }"
         >
           <div v-if="files.length > 0">Fichiers importés</div>
@@ -67,44 +127,92 @@
       <Toast />
       <figure v-for="image in images" class="image" @click="visible = true">
         <span class="tag | btn btn--sm">Tag</span>
-        <img :src="image" alt="" />
+        <img :src="image.url" alt="" />
       </figure>
     </div>
-    <Dialog 
+    <Dialog
       v-model:visible="visible"
-      modal 
-      header="Détails de l’image" 
+      modal
+      header="Détails de l’image"
       :style="{ width: '62.5rem', height: '50rem' }"
       class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
     >
-      <img 
-        :src="image"
-        alt=""
-        class="bg-grey-200"
-        loading="lazy" 
-      >
+      <img :src="image" alt="" class="bg-grey-200" loading="lazy" />
       <div class="flex flex-col | p-32" style="--row-gap: var(--space-32)">
         <fieldset class="image__tags">
           <legend class="text-sm text-grey-700 | mb-8">Tags</legend>
           <div class="flex" style="gap: var(--space-8)">
-            <input class="sr-only" type="checkbox" id="bouchon" name="bouchon">
-            <label class="btn btn--sm btn--primary" for="bouchon">Bouchon</label>
-            <input class="sr-only" type="checkbox" id="bouchon-poussoir" name="bouchon-poussoir">
-            <label class="btn btn--sm btn--primary" for="bouchon-poussoir">Bouton Poussoir</label>
-            <input class="sr-only" type="checkbox" id="coloris-nuances" name="coloris-nuances">
-            <label class="btn btn--sm btn--primary" for="coloris-nuances">Coloris & Nuances</label>
-            <input class="sr-only" type="checkbox" id="da-globale" name="da-globale">
-            <label class="btn btn--sm btn--primary" for="da-globale">DA Globale</label>
-            <input class="sr-only" type="checkbox" id="forme-design" name="forme-design">
-            <label class="btn btn--sm btn--primary" for="forme-design">Forme & Design</label>
-            <input class="sr-only" type="checkbox" id="materiaux-textures" name="materiaux-textures">
-            <label class="btn btn--sm btn--primary" for="materiaux-textures">Matériaux & Textures</label>
-            <input class="sr-only" type="checkbox" id="parachevements" name="parachevements">
-            <label class="btn btn--sm btn--primary" for="parachevements">Parachèvements</label>
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="bouchon"
+              name="bouchon"
+            />
+            <label class="btn btn--sm btn--primary" for="bouchon"
+              >Bouchon</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="bouchon-poussoir"
+              name="bouchon-poussoir"
+            />
+            <label class="btn btn--sm btn--primary" for="bouchon-poussoir"
+              >Bouton Poussoir</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="coloris-nuances"
+              name="coloris-nuances"
+            />
+            <label class="btn btn--sm btn--primary" for="coloris-nuances"
+              >Coloris & Nuances</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="da-globale"
+              name="da-globale"
+            />
+            <label class="btn btn--sm btn--primary" for="da-globale"
+              >DA Globale</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="forme-design"
+              name="forme-design"
+            />
+            <label class="btn btn--sm btn--primary" for="forme-design"
+              >Forme & Design</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="materiaux-textures"
+              name="materiaux-textures"
+            />
+            <label class="btn btn--sm btn--primary" for="materiaux-textures"
+              >Matériaux & Textures</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="parachevements"
+              name="parachevements"
+            />
+            <label class="btn btn--sm btn--primary" for="parachevements"
+              >Parachèvements</label
+            >
           </div>
         </fieldset>
         <div class="image__description | w-full">
-          <label for="image-description" class="flex | text-sm text-grey-700 | mb-8">Description de l’image</label>
+          <label
+            for="image-description"
+            class="flex | text-sm text-grey-700 | mb-8"
+            >Description de l’image</label
+          >
           <textarea
             name="image-description"
             id="image-description"
@@ -112,7 +220,13 @@
             class="border border-grey-200 | rounded-xl | p-16 | w-full"
           ></textarea>
         </div>
-        <button data-icon="delete" class="btn btn--black-10 | ml-auto mt-auto" @click="visible = false">Supprimer cette image</button>
+        <button
+          data-icon="delete"
+          class="btn btn--black-10 | ml-auto mt-auto"
+          @click="visible = false"
+        >
+          Supprimer cette image
+        </button>
       </div>
     </Dialog>
   </section>
@@ -121,7 +235,7 @@
 <script setup>
 import Toast from "primevue/toast";
 import FileUpload from "primevue/fileupload";
-import Dialog from 'primevue/dialog';
+import Dialog from "primevue/dialog";
 import { useToast } from "primevue/usetoast";
 import { usePageStore } from "../../../stores/page";
 import { ref } from "vue";
@@ -137,7 +251,7 @@ const beforeSend = (event) => {
   );
 };
 
-const images = ref([]);
+const images = ref(page.images);
 
 const onAdvancedUpload = (event) => {
   if (event.xhr.status === 200) {

src/views/ClientBrief.vue

@@ -9,17 +9,29 @@ import { ref } from "vue";
 import Header from "../components/project/Header.vue";
 import Intro from "../components/project/ClientBrief/Intro.vue";
 import ModeSelection from "../components/project/ClientBrief/ModeSelection.vue";
-import AddImages from "../components/project/ClientBrief/AddImages.vue";
+import Images from "../components/project/ClientBrief/Images.vue";
+import { usePageStore } from "../stores/page";
 
 const stepsComponents = {
   Intro,
   ModeSelection,
-  AddImages,
+  Images,
 };
 
-const currentStep = ref("AddImages");
+const { page } = usePageStore();
+
+const currentStep = ref(setInitialStep());
 
 function changeStep(stepName) {
   currentStep.value = stepName;
 }
+
+function setInitialStep() {
+  const hasPDF = page.content.clientbriefpdf.length !== 0;
+  const hasImages = page.content.clientbriefimages.length !== 0;
+  const isEmpty = !hasPDF && !hasImages;
+  if (isEmpty) return "Intro";
+  if (hasPDF) return "PDF";
+  if (hasImages) return "Images";
+}
 </script>

src/views/Project.vue

@@ -4,7 +4,8 @@
     <!-- Kanban: Status Brief Enrichi -->
 
     <div class="kanban">
-      <ProjectStep v-for="step in page.steps" :key="step" :step="step" />
+      <ProjectStep v-for="step in page.steps" :key="step" :step="step">
+      </ProjectStep>
       <!-- <section
         class="flex-1"
         aria-labelledby="votre-brief-label"