From c7b2052be1f9b7c35f4220179c5568a083052462 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 2 Oct 2024 14:15:24 +0200
Subject: [PATCH] Update AddImages.vue: use checkboxes instead of buttons for
 project tags filter, use mode="basic" for FileUpload component, add Dialog
 component

---
 .../project/ClientBrief/AddImages.vue         | 212 +++++++++++++-----
 1 file changed, 151 insertions(+), 61 deletions(-)

diff --git a/src/components/project/ClientBrief/AddImages.vue b/src/components/project/ClientBrief/AddImages.vue
index 43b4542..943b86d 100644
--- a/src/components/project/ClientBrief/AddImages.vue
+++ b/src/components/project/ClientBrief/AddImages.vue
@@ -1,83 +1,127 @@
 <template>
   <section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
     <header
-      class="project-details | flex items-baseline | bg-white | rounded-2xl | p-16 | w-full"
+      class="project-details | flex | bg-white | rounded-2xl | p-16 | w-full"
     >
       <div class="project-details__description | flex-1">
-        <h2 class="text-sm text-grey-700 | mb-8">Description du projet</h2>
+        <label for="project-description" class="flex | text-sm text-grey-700 | mb-8">Description du projet</label>
         <textarea
-          name="description"
-          id="description"
+          name="project-description"
+          id="project-description"
           placeholder="Ajoutez une description générale de votre projet…"
           rows="3"
           class="border border-grey-200 | rounded-xl | p-16 | w-full"
         ></textarea>
       </div>
-      <div class="project-details__filters | flex-1">
-        <h2 class="text-sm text-grey-700 | mb-8">Filtrer par tags</h2>
+      <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">Voir tout</button>
-          <button class="btn btn--sm btn--primary">Bouchon</button>
-          <button class="btn btn--sm btn--primary">Bouton Poussoir</button>
-          <button class="btn btn--sm btn--primary">Coloris & Nuances</button>
-          <button class="btn btn--sm btn--primary">DA Globale</button>
-          <button class="btn btn--sm btn--primary">Forme & Design</button>
-          <button class="btn btn--sm btn--primary">Matériaux & Textures</button>
-          <button class="btn btn--sm btn--primary">Parachèvements</button>
+          <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>
         </div>
-      </div>
+      </fieldset>
     </header>
-    <!-- <div class="h-full | masonry">
-      <button
-        data-icon="upload"
-        class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
-      >
-        Ajouter une ou plusieurs images
-      </button>
-    </div> -->
     <div class="h-full | masonry">
-      <button
-        data-icon="upload"
+      <FileUpload
+        mode="basic"
+        name="images[]"
+        :url="'/upload.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 | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
       >
-        <FileUpload
-          name="images[]"
-          :url="'/upload.json?pageUri=' + page.uri"
-          @upload="onAdvancedUpload($event)"
-          :multiple="true"
-          accept="image/*"
-          :maxFileSize="1000000"
-          invalidFileSizeMessage="Fichier trop lourd"
+        <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
+          }"
         >
-          <template #empty>
-            <span class="empty-message"
-              >Glissez-déposez vos fichiers ici pour les ajouter.</span
-            >
-          </template>
-          <template
-            #content="{
-              files,
-              uploadedFiles,
-              removeUploadedFileCallback,
-              removeFileCallback,
-            }"
-          >
-            <div v-if="files.length > 0">Fichiers importés</div>
-          </template>
-        </FileUpload>
-      </button>
+          <div v-if="files.length > 0">Fichiers importés</div>
+        </template>
+      </FileUpload>
       <Toast />
+      <figure v-for="image in images" class="image" @click="visible = true">
+        <span class="tag | btn btn--sm">Tag</span>
+        <img :src="image" alt="" />
+      </figure>
     </div>
-    <figure v-for="image in images" class="image">
-      <span class="tag | btn btn--sm">Tag</span>
-      <img :src="image" alt="" />
-    </figure>
+    <Dialog 
+      v-model:visible="visible"
+      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" 
+      >
+      <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>
+          </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>
+          <textarea
+            name="image-description"
+            id="image-description"
+            placeholder="Ajoutez une description à l’image…"
+            class="border border-grey-200 | rounded-xl | p-16 | w-full"
+          ></textarea>
+        </div>
+        <button data-icon="trash" class="btn btn--black-10 | ml-auto mt-auto" @click="visible = false">Supprimer cette image</button>
+      </div>
+    </Dialog>
   </section>
 </template>
 
 <script setup>
 import Toast from "primevue/toast";
 import FileUpload from "primevue/fileupload";
+import Dialog from 'primevue/dialog';
 import { useToast } from "primevue/usetoast";
 import { usePageStore } from "../../../stores/page";
 import { ref } from "vue";
@@ -117,19 +161,65 @@ const onAdvancedUpload = (event) => {
   }
 };
 </script>
+
 <style>
-button[data-icon="upload"] {
+fieldset {
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+[data-pc-name="fileupload"] button {
   padding: 6.875rem 4.875rem;
 }
+[data-pc-name="fileupload"] button:hover {
+  background: var(--color-primary-10);
+  border-color: var(--color-primary-20);
+  color: var(--color-primary-100);
+}
 input[type="file"] {
   display: none;
 }
-/* button[aria-label="Choose"],
-button[aria-label="Upload"] {
-  display: none;
-} */
 
-.empty-message {
-  margin-top: 1rem;
+[data-pc-section="mask"] {
+  background-color: var(--color-black-50);
+}
+[data-pc-name="dialog"] {
+  flex-direction: row !important;
+  position: relative;
+}
+[data-pc-name="dialog"] [data-pc-section="header"] {
+  position: absolute;
+  left: 50%;
+  right: 0;
+  z-index: 1102;
+  padding: 1.5rem var(--space-32);
+}
+[data-pc-section="title"] {
+  font-weight: 500;
+  font-size: var(--text-lg);
+}
+[data-pc-name="pcclosebutton"] {
+  position: absolute;
+  top: var(--space-16);
+  right: var(--space-16);
+  padding: 0.625rem;
+}
+[data-pc-name="pcclosebutton"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+[data-pc-name="pcclosebutton"] span {
+  display: none;
+}
+[data-pc-name="dialog"] [data-pc-section="content"] {
+  display: flex;
+}
+[data-pc-name="dialog"] [data-pc-section="content"] > * {
+  width: 50%;
+}
+[data-pc-name="dialog"] [data-pc-section="content"] > div {
+  padding-top: 5rem;
 }
 </style>