add images modal : add selected class

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/3670980443_au-commencement-du-college-chloe-avait-donc-fait-la-connaissance-dun-garcon.-il-etait-plus-vieux.pdf.txt

@@ -0,0 +1,9 @@
+Date: 2024-10-16 09:11
+
+----
+
+Uuid: pWG1Dz4i9spu0X02
+
+----
+
+Template: document

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

@@ -6,7 +6,7 @@ Stepname: clientBrief
 
 ----
 
-Clientbriefpdf: 
+Clientbriefpdf: - file://pWG1Dz4i9spu0X02
 
 ----
 
@@ -14,7 +14,7 @@ Description:
 
 ----
 
-Clientbriefimages: - file://cKGbZhC6pCTXislx
+Clientbriefimages: 
 
 ----
 

src/components/project/client-brief/PdfViewer.vue

@@ -2,6 +2,7 @@
   <div>
     <div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
       <VPdfViewer
+        :darkMode="true"
         src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
         local="fr_FR"
         @loaded="onPdfLoaded"

src/components/project/client-brief/add-images-modal/ImagesResources.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
-    <figure v-for="image in tab.images" class="image">
+    <figure
+      v-for="image in tab.images"
+      class="image"
+      :class="{ selected: isSelected(image) }"
+    >
       <img
         :src="image.url"
         alt=""
@@ -21,4 +25,8 @@ const { tabs } = storeToRefs(useAddImagesModalStore());
 const tab = computed(() => {
   return tabs.value.find((tab) => tab.id === "materials");
 });
+
+function isSelected(image) {
+  return tab.value.selectedImages.includes(image);
+}
 </script>

src/components/project/client-brief/add-images-modal/MyImages.vue

@@ -41,7 +41,11 @@
         <div v-if="files.length > 0">Fichiers importés</div>
       </template>
     </FileUpload>
-    <figure v-for="image in tab.images" class="image">
+    <figure
+      v-for="image in tab.images"
+      class="image"
+      :class="{ selected: isSelected(image) }"
+    >
       <img
         :src="image.url"
         alt=""
@@ -86,4 +90,8 @@ function addImages() {
   tab.value.images = [...tab.value.images, ...newImages];
   tab.value.selectedImages = [...tab.value.selectedImages, ...newImages];
 }
+
+function isSelected(image) {
+  return tab.value.selectedImages.includes(image);
+}
 </script>