merge

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

@@ -1,9 +0,0 @@
-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

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

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

@@ -0,0 +1,17 @@
+Date: 2024-10-02 02:10
+
+----
+
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: RBUbSD0s5cYo0uQE
+
+----
+
+Template: image

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

@@ -0,0 +1,17 @@
+Description: 
+
+----
+
+Tags: coloris & nuances, DA globale
+
+----
+
+Date: 2024-10-02 02:10
+
+----
+
+Uuid: gc1lqYk2YUOBgEoS
+
+----
+
+Template: image

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

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

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

@@ -0,0 +1,17 @@
+Date: 2024-10-02 02:10
+
+----
+
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: nf6u4SZVnNUUKKU2
+
+----
+
+Template: image

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

@@ -16,9 +16,9 @@ Description: Sed congue magna magna lorem aliquam diam dolor arcu fusce adipisci
 
 Clientbriefimages:
 
-- file://ump9516TWbjrIo7T
+- file://gc1lqYk2YUOBgEoS
-- file://RaQyVfBK6c8gv8pW
+- file://RBUbSD0s5cYo0uQE
-- file://1NmPGSM9FKgiyOwH
+- file://nf6u4SZVnNUUKKU2
 
 ----
 

public/content/projects/projects.txt

@@ -2,6 +2,10 @@ Title: Projets
 
 ----
 
+Clientbriefimagetags: bouchon, bouton poussoir, coloris & nuances, DA globale, forme & design, matériaux & textures, parachèvements
+
+----
+
 Steps: Votre Brief, Offre Commerciale, Brief Enrichi, Rendu 360°
 
 ----

public/site/blueprints/files/image.yml

@@ -12,6 +12,6 @@ fields:
     size: small
     width: 1/2
   tags:
-    type: tags
+    type: multiselect
-  # tags:
+    options: query
-  #   type: tags
+    query: page('projects').clientBriefImageTags.split

public/site/blueprints/pages/projects.yml

@@ -1,6 +1,12 @@
 title: Projets
 
 sections:
+  fieldsSection:
+    type: fields
+    fields:
+      clientBriefImageTags:
+        label: Tags des images ajoutées aux briefs
+        type: tags
   drafts:
     extends: sections/projects
     headline: Brouillons

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

@@ -34,7 +34,7 @@ return [
           $newFile = $page->createFile([
             'source'   => $upload['tmp_name'],
             'filename' => $name,
-            'template' => 'default',
+            'template' => 'image',
             'content' => [
                 'date' => date('Y-m-d h:m')
             ]

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

@@ -5,11 +5,14 @@ $images = [];
 foreach ($page->clientBriefImages()->toFiles() as $image) {
   $images[] = [
     'url' => $image->url(),
-    'uuid' => (string) $image->uuid()
+    'uuid' => (string) $image->uuid(),
+    'tags' => page('projects')->clientBriefImageTags()->split(),
+    'selectedTags' => $image->tags()->split()
   ];
 }
 
 $specificData = [
+  "tags" => $page->parent()->parent()->clientBriefImageTags()->split(),
   "images" => $images
 ];
 

src/components/project/ClientBrief/Images.vue

@@ -20,65 +20,27 @@
       <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">
+          <button
+            class="btn btn--sm btn--grey"
+            id="all"
+            :aria-pressed="selectedTags.length === 0"
+            @click="selectedTags = []"
+          >
             Voir tout
           </button>
-          <input class="sr-only" type="checkbox" id="bouchon" name="bouchon" />
+          <template v-for="(tag, index) in page.tags" :key="index">
-          <label class="btn btn--sm btn--primary" for="bouchon">Bouchon</label>
+            <input
-          <input
+              class="sr-only"
-            class="sr-only"
+              type="checkbox"
-            type="checkbox"
+              :id="tag + '-page'"
-            id="bouchon-poussoir"
+              :name="tag + '-page'"
-            name="bouchon-poussoir"
+              :value="tag + '-page'"
-          />
+              v-model="selectedTags"
-          <label class="btn btn--sm btn--primary" for="bouchon-poussoir"
+            />
-            >Bouton Poussoir</label
+            <label class="btn btn--sm btn--primary" :for="tag + '-page'">{{
-          >
+              toPascalCase(tag)
-          <input
+            }}</label>
-            class="sr-only"
+          </template>
-            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>
@@ -87,9 +49,14 @@
         data-icon="upload"
         class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
         @click="addImages = true"
-        >Ajouter une ou plusieurs images</button
       >
-      <figure v-for="image in images" class="image" @click="imageDetails = true">
+        Ajouter une ou plusieurs images
+      </button>
+      <figure
+        v-for="image in images"
+        class="image"
+        @click="imageDetails = true"
+      >
         <span class="tag | btn btn--sm">Tag</span>
         <img :src="image.url" alt="" />
       </figure>
@@ -111,7 +78,10 @@
             <li>Inspirations</li>
           </ul>
         </nav>
-        <div class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8" style="--min:15rem;--gap:0.5rem">
+        <div
+          class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
+          style="--min: 15rem; --gap: 0.5rem"
+        >
           <FileUpload
             mode="basic"
             name="images[]"
@@ -154,19 +124,34 @@
             </template>
           </FileUpload>
           <figure class="image">
-            <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
+            <img
+              src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt=""
+            />
           </figure>
           <figure class="image">
-            <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
+            <img
+              src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt=""
+            />
           </figure>
           <figure class="image">
-            <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
+            <img
+              src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt=""
+            />
           </figure>
           <figure class="image">
-            <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
+            <img
+              src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt=""
+            />
           </figure>
           <figure class="image">
-            <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
+            <img
+              src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt=""
+            />
           </figure>
           <Toast />
         </div>
@@ -180,74 +165,24 @@
       header="Détails de l’image"
       class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
     >
-      <img :src="image" alt="" class="bg-grey-200" loading="lazy" />
+      <img :src="modal.url" 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
+            <template v-for="(tag, index) in modal.tags" :key="index">
-              class="sr-only"
+              <input
-              type="checkbox"
+                class="sr-only"
-              id="bouchon"
+                type="checkbox"
-              name="bouchon"
+                :id="tag + '-image'"
-            />
+                :name="tag + '-image'"
-            <label class="btn btn--sm btn--primary" for="bouchon"
+                :value="tag + '-image'"
-              >Bouchon</label
+                v-model="modal.selectedTags"
-            >
+              />
-            <input
+              <label class="btn btn--sm btn--primary" :for="tag + '-image'">{{
-              class="sr-only"
+                toPascalCase(tag)
-              type="checkbox"
+              }}</label>
-              id="bouchon-poussoir"
+            </template>
-              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">
@@ -281,10 +216,12 @@ import FileUpload from "primevue/fileupload";
 import Dialog from "primevue/dialog";
 import { useToast } from "primevue/usetoast";
 import { usePageStore } from "../../../stores/page";
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import { toPascalCase } from "../../../helpers";
 
 const { page } = usePageStore();
 const toast = useToast();
+const selectedTags = ref([]);
 
 const beforeSend = (event) => {
   const formData = event.formData;
@@ -294,6 +231,19 @@ const beforeSend = (event) => {
   );
 };
 
+const modal = ref(null);
+watch(modal, (newValue) => {
+  if (newValue) {
+    newValue.selectedTags = newValue.selectedTags.map((tag) => {
+      if (!tag.includes("image")) {
+        return tag + "-image";
+      } else {
+        return tag;
+      }
+    });
+  }
+});
+
 const images = ref(page.images);
 
 const onAdvancedUpload = (event) => {
@@ -371,7 +321,6 @@ input[type="file"] {
   flex-grow: 1;
 }
 
-
 #add-images {
   --sidebar-width: 12.5rem;
   counter-set: selected-images;
@@ -395,7 +344,7 @@ input[type="file"] {
   border-left-color: var(--color-grey-800);
 }
 #add-images nav li.active::before {
-  content: '';
+  content: "";
   width: 2px;
   position: absolute;
   top: 0;
@@ -428,7 +377,6 @@ input[type="file"] {
   height: 1.5rem;
 }
 
-
 #image-details {
   width: min(100vw - var(--gutter) * 2, 62.5rem);
   height: min(100vh - var(--gutter) * 2, 50rem);

src/components/project/ClientBrief/ModeSelection.vue

@@ -5,7 +5,7 @@
   >
     <div class="flex">
       <div
-        @click="emit('update:step', 'AddImages')"
+        @click="emit('update:step', 'Images')"
         class="card card--cta | flex-1 | h-full"
         style="--padding: var(--space-32); --row-gap: var(--space-32)"
       >

src/helpers/index.js

@@ -0,0 +1,9 @@
+function toPascalCase(string) {
+  return string.replace(/\p{L}+/gu, function (w) {
+    return (
+      w[0].toLocaleUpperCase("fr-FR") + w.slice(1).toLocaleLowerCase("fr-FR")
+    );
+  });
+}
+
+export { toPascalCase };