merge

public/content/creations/black-1984277_1280.jpg.txt

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

public/content/creations/perfume-1042715_1280.jpg.txt

@@ -0,0 +1,17 @@
+Sort: 3
+
+----
+
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: uWljp1hhLgTQkrvg
+
+----
+
+Template: image

public/content/creations/perfume-144546_1280.jpg.txt

@@ -0,0 +1,17 @@
+Sort: 2
+
+----
+
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: 0gTu4wj3Iq8gE6cj
+
+----
+
+Template: image

public/content/creations/perfume-2643349_1280.jpg.txt

@@ -0,0 +1,17 @@
+Sort: 4
+
+----
+
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: lVip0zLI79UQE1Pc
+
+----
+
+Template: image

public/content/creations/perfume-2721147_1280.jpg.txt

@@ -0,0 +1,17 @@
+Sort: 5
+
+----
+
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: CUXmToJVgdHg1g9p
+
+----
+
+Template: image

public/content/creations/perfume-4718455_1280.jpg.txt

@@ -0,0 +1,17 @@
+Sort: 6
+
+----
+
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: Ym4SblduGqd0sZmk
+
+----
+
+Template: image

public/content/materials/black-1984277_1280.jpg.txt

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

public/content/materials/images-resources.txt

@@ -0,0 +1,5 @@
+Title: Matériauthèque
+
+----
+
+Uuid: sYmWEXRPBE9Ym4nn

public/content/materials/materials.txt

@@ -1 +0,0 @@
-Uuid: sYmWEXRPBE9Ym4nn

public/content/materials/perfume-1042715_1280.jpg.txt

@@ -0,0 +1,17 @@
+Sort: 9
+
+----
+
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: l8GM0TOyCeoOcg6A
+
+----
+
+Template: image

public/content/materials/perfume-144546_1280.jpg.txt

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

public/content/materials/perfume-2643349_1280.jpg.txt

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

public/content/materials/perfume-2721147_1280.jpg.txt

@@ -0,0 +1,17 @@
+Sort: 11
+
+----
+
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: QXGjkFuYnruANPOn
+
+----
+
+Template: image

public/content/materials/perfume-4718455_1280.jpg.txt

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

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

@@ -2,7 +2,7 @@ Description: test de description
 
 ----
 
-Tags: 
+Tags: forme & design, coloris & nuances, parachèvements
 
 ----
 

public/site/blueprints/pages/images-resources.yml

@@ -0,0 +1,11 @@
+title: Images ressources
+
+tabs:
+  contenTab:
+    label: Contenu
+    sections:
+      filesSection:
+        label: Images
+        type: files
+        layout: cards
+        template: image

public/site/templates/images-resources.json.php

@@ -0,0 +1,21 @@
+<?php
+
+$images = [];
+
+foreach ($page->files() as $image) {
+  $images[] = [
+    'url' => $image->url(),
+    'uuid' => (string) $image->uuid(),
+    'tags' => $image->tags()->split(),
+    'name' => $image->filename(),
+    'description' => $image->description()->value(),
+  ];
+}
+
+$specificData = [
+  "images" => $images
+];
+
+$data = array_merge($genericData, $specificData);
+
+echo json_encode($data);

public/site/templates/images-resources.php

@@ -0,0 +1 @@
+<?php snippet('generic-template') ?>

src/components/project/ClientBrief/AddImagesModal.vue

@@ -9,145 +9,22 @@
     <div class="with-sidebar | h-full">
       <nav>
         <ul>
-          <li class="active">Mes Images</li>
-          <li>Matériauthèque</li>
-          <li>Réalisations</li>
-          <li>Inspirations</li>
+          <li
+            v-for="tab in tabs"
+            :class="{ active: activeTab.name === tab.name }"
+            @click="activeTab = tab"
+          >
+            {{ tab.name }}
+          </li>
         </ul>
       </nav>
-      <div class="with-sidebar | h-full" data-side="right" style="--sidebar-width: 26rem; gap: var(--gap)">
-        <div class="bg-grey-50 | border border-grey-200 | rounded-2xl | p-8 | overflow-y">
-          <div
-            class="auto-grid"
-            style="--min: 15rem; --gap: 0.5rem"
-          >
-            <FileUpload
-              mode="basic"
-              name="images[]"
-              :url="'/upload-images.json?pageUri=' + page.uri"
-              @upload="onAdvancedUpload($event)"
-              :auto="true"
-              :multiple="true"
-              accept="image/*"
-              :maxFileSize="1000000"
-              invalidFileSizeMessage="Fichier trop lourd"
-              chooseLabel="Ajouter une ou plusieurs images"
-              class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
-            >
-              <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>
-              </template>
-              <template
-                #content="{
-                  files,
-                  uploadedFiles,
-                  removeUploadedFileCallback,
-                  removeFileCallback,
-                }"
-              >
-                <div v-if="files.length > 0">Fichiers importés</div>
-              </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=""
-              />
-            </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=""
-              />
-            </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=""
-              />
-            </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=""
-              />
-            </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=""
-              />
-            </figure>
-            <Toast />
-          </div>
-        </div>
-        <div class="flex flex-col items-start | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8">
-          <Accordion value="0" class="flex flex-col" style="--row-gap:var(--space-8)">
-            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value" class="w-full | bg-white | rounded-xl | p-12 pt-8">
-              <AccordionHeader>
-                <span class="badge">{{ tab.title }}</span>
-              </AccordionHeader>
-              <AccordionContent>
-                <div class="image-details__description | my-16">
-                  <label
-                    for="image-description"
-                    class="flex | text-sm text-grey-700 | mb-8"
-                    >Description</label
-                  >
-                  <textarea
-                    name="image-description"
-                    id="image-description"
-                    placeholder="Ajoutez une description à cette image…"
-                    rows="3"
-                    class="border border-grey-200 | rounded-xl | p-16 | w-full"
-                    @input="saveDescription()"
-                  ></textarea>
-                </div>
-                <fieldset class="image-details__filters | flex-1">
-                  <legend class="text-sm text-grey-700 | mb-8">Sélectionner un ou plusieurs tags</legend>
-                  <div class="flex" style="gap: var(--space-8)">
-                    <template v-for="tag in ['Parachèvements', 'Forme & Design', 'Matériaux & Textures', 'Coloris & Nuances']" :key="tag">
-                      <input
-                        class="sr-only"
-                        type="checkbox"
-                        :id="`${tag}`"
-                        :name="`${tag}`"
-                        :value="`${tag}`"
-                        v-model="localSelectedTags"
-                      />
-                      <label class="btn btn--sm btn--primary" :for="`${tag}`">{{ tag }}</label>
-                    </template>
-                  </div>
-                </fieldset>
-              </AccordionContent>
-            </AccordionPanel>
-            <template #collapseicon>
-              <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(180deg)">
-                <path d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625" stroke="#5E6060" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </template>
-            <template #expandicon>
-              <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625" stroke="#5E6060" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </template>
-          </Accordion>
-          <button class="btn | w-full | mt-auto">Ajouter les images sélectionnées</button>
-        </div>
+      <div
+        class="with-sidebar | h-full"
+        data-side="right"
+        style="--sidebar-width: 26rem; gap: var(--gap)"
+      >
+        <component :is="activeTab.component" :params="activeTab.params" />
+        <ImagesEditPanel :images="images" />
       </div>
     </div>
   </Dialog>
@@ -155,21 +32,15 @@
 
 <script setup>
 import Dialog from "primevue/dialog";
-import Toast from "primevue/toast";
-import { useToast } from "primevue/usetoast";
-import FileUpload from "primevue/fileupload";
-import Accordion from 'primevue/accordion';
-import AccordionPanel from 'primevue/accordionpanel';
-import AccordionHeader from 'primevue/accordionheader';
-import AccordionContent from 'primevue/accordioncontent';
+import ImagesResources from "./ImagesResources.vue";
+import ImagesEditPanel from "./ImagesEditPanel.vue";
+import MyImages from "./MyImages.vue";
 import { usePageStore } from "../../../stores/page";
 import { ref, watch } from "vue";
 
-const { page } = usePageStore();
-const toast = useToast();
-
-const { isAddImagesModalOpen } = defineProps({
+const { isAddImagesModalOpen, images } = defineProps({
   isAddImagesModalOpen: Boolean,
+  images: Array,
 });
 const emit = defineEmits(["update:isAddImagesModalOpen"]);
 
@@ -180,22 +51,33 @@ watch(isOpen, (newValue) => {
 
 const tabs = [
   {
-    "title": "1",
-    "value": "0"
+    name: "Mes images",
+    component: MyImages,
+    params: {
+      images,
+    },
   },
   {
-    "title": "2",
-    "value": "1"
+    name: "Matériauthèque",
+    component: ImagesResources,
+    params: {
+      targetPage: "materials",
+    },
   },
   {
-    "title": "3",
-    "value": "2"
+    name: "Réalisations",
+    component: ImagesResources,
+    params: {
+      targetPage: "materials",
+    },
   },
   {
-    "title": "4",
-    "value": "3"
-  }
-]
+    name: "Inspirations",
+    component: ImagesResources,
+  },
+];
+
+const activeTab = ref(tabs[0]);
 </script>
 
 <style>
@@ -259,13 +141,4 @@ const tabs = [
   height: 100%;
   overflow-y: auto;
 }
-
-/* Accordion */
-[data-pc-name="accordionheader"] {
-  height: var(--space-40);
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
 </style>

src/components/project/ClientBrief/Images.vue

@@ -34,6 +34,7 @@
     <AddImagesModal
       v-if="isAddImagesModalOpen"
       :isAddImagesModalOpen="isAddImagesModalOpen"
+      :images="images"
       @close="isAddImagesModalOpen = false"
     />
     <ImageDetailsModal

src/components/project/ClientBrief/ImagesEditPanel.vue

@@ -0,0 +1,124 @@
+<template>
+  <div
+    class="flex flex-col items-start | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
+  >
+    <Accordion
+      value="0"
+      class="flex flex-col"
+      style="--row-gap: var(--space-8)"
+    >
+      <AccordionPanel
+        v-for="(image, index) in images"
+        :key="index + 1"
+        :value="index"
+        class="w-full | bg-white | rounded-xl | p-12 pt-8"
+      >
+        <AccordionHeader>
+          <span class="badge">{{ index + 1 }}</span>
+        </AccordionHeader>
+        <AccordionContent>
+          <div class="image-details__description | my-16">
+            <label
+              for="image-description"
+              class="flex | text-sm text-grey-700 | mb-8"
+              >Description</label
+            >
+            <textarea
+              name="image-description"
+              id="image-description"
+              placeholder="Ajoutez une description à cette image…"
+              rows="3"
+              class="border border-grey-200 | rounded-xl | p-16 | w-full"
+              @input="saveDescription()"
+            ></textarea>
+          </div>
+          <fieldset class="image-details__filters | flex-1">
+            <legend class="text-sm text-grey-700 | mb-8">
+              Sélectionner un ou plusieurs tags
+            </legend>
+            <div class="flex" style="gap: var(--space-8)">
+              <template v-for="tag in page.tags" :key="tag">
+                <input
+                  class="sr-only"
+                  type="checkbox"
+                  :id="`${tag}`"
+                  :name="`${tag}`"
+                  :value="`${tag}`"
+                  v-model="localSelectedTags"
+                />
+                <label class="btn btn--sm btn--primary" :for="`${tag}`">{{
+                  toPascalCase(tag)
+                }}</label>
+              </template>
+            </div>
+          </fieldset>
+        </AccordionContent>
+      </AccordionPanel>
+      <template #collapseicon>
+        <svg
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          style="transform: rotate(180deg)"
+        >
+          <path
+            d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625"
+            stroke="#5E6060"
+            stroke-width="1.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </template>
+      <template #expandicon>
+        <svg
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625"
+            stroke="#5E6060"
+            stroke-width="1.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </template>
+    </Accordion>
+    <button class="btn | w-full | mt-auto">
+      Ajouter les images sélectionnées
+    </button>
+  </div>
+</template>
+<script setup>
+import Accordion from "primevue/accordion";
+import AccordionPanel from "primevue/accordionpanel";
+import AccordionHeader from "primevue/accordionheader";
+import AccordionContent from "primevue/accordioncontent";
+import { usePageStore } from "../../../stores/page";
+import { toPascalCase } from "../../../helpers";
+
+const { images } = defineProps({
+  images: Array,
+});
+
+const { page } = usePageStore();
+</script>
+
+<style>
+/* Accordion */
+[data-pc-name="accordionheader"] {
+  height: var(--space-40);
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

src/components/project/ClientBrief/ImagesResources.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
+    style="--min: 15rem; --gap: 0.5rem"
+  >
+    <figure v-for="image in images" class="image">
+      <img :src="image.url" alt="" />
+    </figure>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useApiStore } from "../../../stores/api";
+
+const { params } = defineProps({
+  params: Object,
+});
+
+const api = useApiStore();
+const images = ref([]);
+
+api
+  .fetchPageData(params.targetPage)
+  .then((json) => (images.value = json.images));
+</script>

src/components/project/ClientBrief/MyImages.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    class="bg-grey-50 | border border-grey-200 | rounded-2xl | p-8 | overflow-y"
+  >
+    <div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
+      <FileUpload
+        mode="basic"
+        name="images[]"
+        :url="'/upload-images.json?pageUri=' + page.uri"
+        @upload="onAdvancedUpload($event)"
+        :auto="true"
+        :multiple="true"
+        accept="image/*"
+        :maxFileSize="1000000"
+        invalidFileSizeMessage="Fichier trop lourd"
+        chooseLabel="Ajouter une ou plusieurs images"
+        class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
+      >
+        <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>
+        </template>
+        <template
+          #content="{
+            files,
+            uploadedFiles,
+            removeUploadedFileCallback,
+            removeFileCallback,
+          }"
+        >
+          <div v-if="files.length > 0">Fichiers importés</div>
+        </template>
+      </FileUpload>
+      <figure v-for="image in params.images" class="image">
+        <img :src="image.url" alt="" />
+      </figure>
+      <Toast />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { usePageStore } from "../../../stores/page";
+import Toast from "primevue/toast";
+import { useToast } from "primevue/usetoast";
+import FileUpload from "primevue/fileupload";
+
+const { params } = defineProps({
+  params: Object,
+});
+
+const { page } = usePageStore();
+const toast = useToast();
+</script>