From e2526609ca04a3671ed205a65179534cb04e4d24 Mon Sep 17 00:00:00 2001
From: Benjamin Seber <benjamin.seber@focus-shift.de>
Date: Sun, 20 Oct 2024 15:20:34 +0200
Subject: [PATCH] add avatar-group next to report person select

---
 src/main/css/2-components.css                 |  1 +
 src/main/css/components/avatar-group.css      | 25 +++++++++++++++++++
 .../templates/reports/_user-select.html       | 18 +++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 src/main/css/components/avatar-group.css

diff --git a/src/main/css/2-components.css b/src/main/css/2-components.css
index 608207690..dfd7a4efa 100644
--- a/src/main/css/2-components.css
+++ b/src/main/css/2-components.css
@@ -1,5 +1,6 @@
 @import "tailwindcss/components.css";
 @import "./components/ajax-loader.css";
+@import "./components/avatar-group.css";
 @import "./components/body-overlay.css";
 @import "./components/checkbox-switch.css";
 @import "./components/info-banner.css";
diff --git a/src/main/css/components/avatar-group.css b/src/main/css/components/avatar-group.css
new file mode 100644
index 000000000..fb9401188
--- /dev/null
+++ b/src/main/css/components/avatar-group.css
@@ -0,0 +1,25 @@
+.avatar-group {
+  display: flex;
+  @apply p-0.5;
+  @apply bg-gradient-to-b from-transparent via-blue-100 to-blue-100;
+  @apply rounded-full;
+
+  & > *:not(:first-child) {
+    margin-left: -0.5rem;
+  }
+
+  .avatar {
+    transition: transform 100ms ease-out;
+
+    &:hover {
+      transform: translateY(-0.25rem);
+      z-index: 1;
+    }
+
+    svg,
+    img {
+      cursor: default;
+      border: 2px solid white;
+    }
+  }
+}
diff --git a/src/main/resources/templates/reports/_user-select.html b/src/main/resources/templates/reports/_user-select.html
index 41c804bc8..e7d172474 100644
--- a/src/main/resources/templates/reports/_user-select.html
+++ b/src/main/resources/templates/reports/_user-select.html
@@ -9,6 +9,7 @@
       action="#"
       th:action="${userReportFilterUrl}"
       method="get"
+      class="flex gap-2"
     >
       <div class="relative">
         <a
@@ -94,6 +95,23 @@
           </button>
         </div>
       </div>
+      <div
+        th:if="${not #lists.isEmpty(selectedUserIds)}"
+        class="flex avatar-group"
+      >
+        <th:block th:each="user : ${users}">
+          <div
+            th:if="${allUsersSelected or user.selected}"
+            class="avatar text-blue-300"
+          >
+            <img
+              alt=""
+              src=""
+              th:replace="~{fragments/avatar::avatar(${user.fullName},38,38)}"
+            />
+          </div>
+        </th:block>
+      </div>
     </form>
   </body>
 </html>