From e0ca82e43ec9b0526c5cdf084d18924430ac0a56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cyrill=20K=C3=BCttel?= <cyrill.kuettel@seantis.ch>
Date: Sun, 15 Dec 2024 23:31:53 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20visual=20feedback=20f?=
 =?UTF-8?q?or=20attendee=20removal=20UI=20=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔍 What's Changed:

- Added visual greying out when removal checkbox is ticked
- Disabled status checkbox for marked attendees
---
 src/privatim/static/js/custom/custom.js | 36 ++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/privatim/static/js/custom/custom.js b/src/privatim/static/js/custom/custom.js
index 6c9965b..fe9df7b 100644
--- a/src/privatim/static/js/custom/custom.js
+++ b/src/privatim/static/js/custom/custom.js
@@ -11,6 +11,7 @@ document.addEventListener('DOMContentLoaded', function () {
     addTestSystemBadge();
     fixCSSonProfilePage();
     handleSingleAgendaItemClickToggleStateUpdate();
+    listenForChangesOfUserRemovedFromMeeting();
 });
 
 
@@ -402,7 +403,7 @@ function listenForChangesInAttendees() {
 
     observer.observe(tomSelectWrapper, {childList: true, subtree: true});
 
-    // Remove attendance rows with value="", inappropriately returned by the backend in case of form errors.
+    // Remove attendance rows with value="", which were inappropriately returned by the backend in case of form errors.
     // I can't find an elegant way to prevent this on the backend side.
     // This is reciprocal with MeetingForm.process()
     const attendanceRows = document.querySelectorAll('.attendance-row');
@@ -414,6 +415,39 @@ function listenForChangesInAttendees() {
     });
 }
 
+/**
+ * Just some visual feedback for the user. Disable and visually grey out the name and attendance status fields
+ */
+function listenForChangesOfUserRemovedFromMeeting() {
+
+    if (!window.location.href.match(/\/meetings\/[\w-]+\/edit$/)) {
+        return;
+    }
+    const removeCheckboxes = document.querySelectorAll('input[id$="-remove"]');
+
+    removeCheckboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', function (event) {
+            const attendeeRow = event.target.closest('.attendance-row');
+            const nameInput = attendeeRow.querySelector('.attendee-name input');
+            const statusCheckbox = attendeeRow.querySelector('input[id$="-status"]');
+
+            if (event.target.checked) {
+                const attendeeName = nameInput.value;
+                nameInput.style.opacity = '0.5';
+                statusCheckbox.disabled = true;
+                statusCheckbox.style.opacity = '0.5';
+                attendeeRow.style.opacity = '0.7';
+            } else {
+                nameInput.style.opacity = '1';
+                statusCheckbox.disabled = false;
+                statusCheckbox.style.opacity = '1';
+                attendeeRow.style.opacity = '1';
+            }
+        });
+    });
+
+}
+
 
 // Makes only sense to show upload field if 'replace' is selected for edit file form. (UploadMultipleFilesWithORMSupport)
 $(function () {