From c062c40b31ede2bd0707a152b767b5f74d2d0ddd Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 16 Oct 2024 18:05:29 +0200
Subject: [PATCH] Fix selected image counter

---
 .../client-brief/add-images-modal/ImagesResources.vue      | 2 +-
 .../project/client-brief/add-images-modal/MyImages.vue     | 7 ++++++-
 src/views/Project.vue                                      | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/project/client-brief/add-images-modal/ImagesResources.vue b/src/components/project/client-brief/add-images-modal/ImagesResources.vue
index 10e18a4..0c4ee65 100644
--- a/src/components/project/client-brief/add-images-modal/ImagesResources.vue
+++ b/src/components/project/client-brief/add-images-modal/ImagesResources.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="auto-grid | counter"
+    class="auto-grid"
     role="grid"
     multiselectable="true"
     style="--min: 15rem; --gap: 0.5rem"
diff --git a/src/components/project/client-brief/add-images-modal/MyImages.vue b/src/components/project/client-brief/add-images-modal/MyImages.vue
index fcaafd0..8ca9a29 100644
--- a/src/components/project/client-brief/add-images-modal/MyImages.vue
+++ b/src/components/project/client-brief/add-images-modal/MyImages.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="auto-grid | counter" role="grid" multiselectable="true" style="--min: 15rem; --gap: 0.5rem">
+  <div class="auto-grid" role="grid" multiselectable="true" style="--min: 15rem; --gap: 0.5rem">
     <FileUpload
       mode="basic"
       name="images[]"
@@ -46,6 +46,11 @@
       class="image"
       role="gridcell"
       :aria-selected="isSelected(image)"
+      :data-count="
+        tab.selectedImages.includes(image)
+          ? tab.selectedImages.indexOf(image) + 1
+          : undefined
+      "
     >
       <img
         :src="image.url"
diff --git a/src/views/Project.vue b/src/views/Project.vue
index a47ca43..5ff0254 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -235,7 +235,7 @@ function setStepStatus(stepName) {
   outline: 2px solid var(--color-focus-ring);
 }
 .image[aria-selected="true"]::after {
-  content: counter(selected-items);
+  content: attr(data-count);
   position: absolute;
   top: var(--space-12);
   right: var(--space-12);