Add custom notifications to UI (#222)

Signed-off-by: Cintia Sánchez García <[email protected]>

Author: cynthia-sg

ocg-server/static/css/styles.src.css

@@ -180,6 +180,10 @@ button:enabled {
   cursor: pointer;
 }
 
+button:disabled {
+  opacity: 0.5;
+}
+
 /* Generic styles */
 button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
   outline: 0;

ocg-server/static/js/dashboard/group/attendees.js

@@ -0,0 +1,38 @@
+import { createNotificationModal } from "/static/js/dashboard/group/notificationModal.js";
+
+const modalId = "attendee-notification-modal";
+const formId = "attendee-notification-form";
+const dataKey = "attendeeNotificationReady";
+
+// Set up the attendee modal with its dynamic endpoint and success copy.
+const initializeAttendeeNotification = () => {
+  createNotificationModal({
+    modalId,
+    formId,
+    dataKey,
+    openButtonId: "open-attendee-notification-modal",
+    closeButtonId: "close-attendee-notification-modal",
+    cancelButtonId: "cancel-attendee-notification",
+    overlayId: "overlay-attendee-notification-modal",
+    successMessage: "Email sent successfully to all event attendees!",
+    // Apply the event-specific endpoint before the modal opens.
+    updateEndpoint: ({ form, openButton }) => {
+      if (!form) {
+        return;
+      }
+
+      const eventId = openButton?.getAttribute("data-event-id") || "";
+      if (eventId) {
+        form.setAttribute("hx-post", `/dashboard/group/notifications/${eventId}`);
+      } else {
+        form.removeAttribute("hx-post");
+      }
+    },
+  });
+};
+
+initializeAttendeeNotification();
+
+if (document.body) {
+  document.body.addEventListener("htmx:load", initializeAttendeeNotification);
+}

ocg-server/static/js/dashboard/group/members.js

@@ -0,0 +1,25 @@
+import { createNotificationModal } from "/static/js/dashboard/group/notificationModal.js";
+
+const modalId = "notification-modal";
+const formId = "notification-form";
+const dataKey = "membersNotificationReady";
+
+// Reuse the shared helper for the members notification modal.
+const initializeMembersNotification = () => {
+  createNotificationModal({
+    modalId,
+    formId,
+    dataKey,
+    openButtonId: "open-notification-modal",
+    closeButtonId: "close-notification-modal",
+    cancelButtonId: "cancel-notification",
+    overlayId: "overlay-notification-modal",
+    successMessage: "Email sent successfully to all group members.",
+  });
+};
+
+initializeMembersNotification();
+
+if (document.body) {
+  document.body.addEventListener("htmx:load", initializeMembersNotification);
+}

ocg-server/static/js/dashboard/group/notificationModal.js

@@ -0,0 +1,87 @@
+import { toggleModalVisibility } from "/static/js/common/common.js";
+import { showSuccessAlert, showErrorAlert } from "/static/js/common/alerts.js";
+
+const DEFAULT_ERROR_MESSAGE = "Failed to send email. Please try again.";
+
+// Central helper for attaching modal controls and HTMX success handling.
+export const createNotificationModal = ({
+  modalId,
+  formId,
+  dataKey,
+  openButtonId,
+  closeButtonId,
+  cancelButtonId,
+  overlayId,
+  successMessage,
+  updateEndpoint,
+}) => {
+  // Locate the modal once and mark it ready so we only bind listeners once.
+  const modal = document.getElementById(modalId);
+  if (!modal || modal.dataset[dataKey] === "true") {
+    return;
+  }
+
+  modal.dataset[dataKey] = "true";
+
+  const openButton = openButtonId ? document.getElementById(openButtonId) : null;
+  const closeButton = closeButtonId ? document.getElementById(closeButtonId) : null;
+  const cancelButton = cancelButtonId ? document.getElementById(cancelButtonId) : null;
+  const overlay = overlayId ? document.getElementById(overlayId) : null;
+  const form = formId ? document.getElementById(formId) : null;
+  const toggleModal = () => toggleModalVisibility(modalId);
+
+  // Allow callers to adjust the form action before the modal opens.
+  const updateFormEndpoint = () => {
+    if (!form || typeof updateEndpoint !== "function") {
+      return;
+    }
+
+    updateEndpoint({
+      form,
+      openButton,
+      closeButton,
+      cancelButton,
+      overlay,
+    });
+  };
+
+  if (openButton) {
+    openButton.addEventListener("click", () => {
+      updateFormEndpoint();
+      toggleModal();
+    });
+  }
+
+  if (closeButton) {
+    closeButton.addEventListener("click", toggleModal);
+  }
+
+  if (cancelButton) {
+    cancelButton.addEventListener("click", toggleModal);
+  }
+
+  if (overlay) {
+    overlay.addEventListener("click", toggleModal);
+  }
+
+  if (form) {
+    form.addEventListener("htmx:afterRequest", (event) => {
+      const xhr = event.detail?.xhr;
+      if (!xhr) {
+        showErrorAlert(DEFAULT_ERROR_MESSAGE, false);
+        return;
+      }
+
+      if (xhr.status >= 200 && xhr.status < 300) {
+        showSuccessAlert(successMessage || "Email sent successfully.");
+        form.reset();
+        toggleModal();
+      } else {
+        const errorMessage = xhr.responseText || DEFAULT_ERROR_MESSAGE;
+        showErrorAlert(errorMessage, true);
+      }
+    });
+  }
+
+  updateFormEndpoint();
+};

ocg-server/templates/common.html

@@ -159,7 +159,7 @@ <h3 class="text-xl font-semibold text-stone-900">Search tips</h3>
               {% else -%}
                 hidden group-[.is-loading]:flex
               {% endif -%}
-              {{ extra_styles }}">
+              {{ size }} {{ extra_styles }}">
     <style>
       :root {
         {% match spinner_variant.as_str() %}
@@ -192,7 +192,7 @@ <h3 class="text-xl font-semibold text-stone-900">Search tips</h3>
     </style>
     <svg aria-hidden="true"
          viewBox="0 0 100 101"
-         class="{{ size }} animate-spin size-auto">
+         class="animate-spin size-auto">
       <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#e5e7eb" class="spinner-base" />
       <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="#D62293" class="spinner-accent" />
     </svg>

ocg-server/templates/dashboard/group/attendees_list.html

@@ -4,23 +4,38 @@
 {# Attendees header -#}
 {% call macros::form_title(title = "Attendees") -%}
 
-<div class="flex flex-col mt-10 mb-6 w-3/4 max-w-[90vw] relative">
-  <label for="group-event-selector-button" class="form-label mb-2">Event</label>
-  <event-selector button-id="group-event-selector-button" group-id="{{ group_id }}"
-  {% if let Some(selected_event) = event -%}
-    selected-event-id="{{ selected_event.event_id }}" selected-event="{{ selected_event|json }}"
-  {% endif -%}
-  ></event-selector>
+<div class="mt-10 mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+  <div class="flex-1 min-w-0">
+    <label for="group-event-selector-button" class="form-label mb-2">Event</label>
+    <event-selector button-id="group-event-selector-button" group-id="{{ group_id }}"
+    {% if let Some(selected_event) = event -%}
+      selected-event-id="{{ selected_event.event_id }}" selected-event="{{ selected_event|json }}"
+    {% endif -%}
+    ></event-selector>
+  </div>
 </div>
 
-<div class="flex text-sm text-stone-600 mb-5">
-  <div>Total attendees:</div>
-  <div class="font-semibold ms-1 text-end">
-    {% if attendees.is_empty() -%}
-      -
-    {% else %}
-      {{ attendees.len() }}
-    {% endif -%}
+<div class="flex items-end justify-between mb-5">
+  <div class="flex text-sm text-stone-600">
+    <div>Total attendees:</div>
+    <div class="font-semibold ms-1 text-end">
+      {% if attendees.is_empty() -%}
+        -
+      {% else %}
+        {{ attendees.len() }}
+      {% endif -%}
+    </div>
+  </div>
+  <div class="flex-shrink-0 w-full lg:w-auto mb-1.5">
+    <button id="open-attendee-notification-modal"
+            type="button"
+            class="btn-primary w-full lg:w-auto"
+            {% if event.is_none() || attendees.is_empty() -%}
+              disabled title="Select an event with attendees to send emails."
+            {% endif -%}
+            {% if let Some(selected_event) = event -%}
+              data-event-id="{{ selected_event.event_id }}"
+            {% endif -%}>Send email</button>
   </div>
 </div>
 
@@ -121,3 +136,80 @@
   </table>
 </div>
 {# End attendees table -#}
+
+{# Notification modal -#}
+<div id="attendee-notification-modal"
+     role="dialog"
+     aria-modal="true"
+     aria-labelledby="attendee-notification-modal-title"
+     class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 max-h-full flex z-1000">
+  <div id="overlay-attendee-notification-modal"
+       class="modal-overlay absolute w-full h-full bg-stone-950 opacity-[0.35]"></div>
+  <div class="relative p-4 w-full max-w-2xl max-h-full">
+    <div class="relative bg-white rounded-lg shadow">
+      {# Modal header -#}
+      <div class="flex items-center justify-between p-4 md:p-5 border-b border-stone-200 rounded-t">
+        <h3 id="attendee-notification-modal-title"
+            class="text-xl font-semibold text-stone-900">Send email</h3>
+        <button id="close-attendee-notification-modal"
+                type="button"
+                class="group text-stone-400 bg-transparent hover:bg-stone-200 hover:text-stone-900 transition-colors rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center">
+          <div class="svg-icon w-5 h-5 bg-stone-500 group-hover:bg-stone-900 transition-colors icon-close"></div>
+          <span class="sr-only">Close modal</span>
+        </button>
+      </div>
+      {# Modal body -#}
+      <div class="p-4 md:p-8">
+        <div class="bg-stone-50 border border-stone-200 text-stone-800 rounded-lg p-4 mb-5 text-sm">
+          <p class="font-medium">
+            This email will be sent to <span class="font-semibold">all event attendees</span>.
+          </p>
+        </div>
+        <form id="attendee-notification-form"
+              hx-indicator="#attendee-notification-spinner"
+              hx-disabled-elt="#submit-attendee-notification">
+          <div class="mb-4">
+            <label for="attendee-title" class="form-label">
+              Title <span class="asterisk">*</span>
+            </label>
+            <div class="mt-2">
+              <input type="text"
+                     id="attendee-title"
+                     name="title"
+                     required
+                     maxlength="200"
+                     class="input-primary"
+                     placeholder="Enter notification title">
+            </div>
+          </div>
+          <div class="mb-6">
+            <label for="attendee-body" class="form-label">
+              Body <span class="asterisk">*</span>
+            </label>
+            <div class="mt-2">
+              <textarea id="attendee-body"
+                        name="body"
+                        required
+                        rows="6"
+                        maxlength="5000"
+                        class="input-primary"
+                        placeholder="Enter notification body (plain text only)"></textarea>
+              <p class="mt-1 text-xs text-stone-500">Plain text only. No HTML formatting.</p>
+            </div>
+          </div>
+          <div class="flex justify-end gap-3 pt-6 border-t border-stone-200">
+            <button id="cancel-attendee-notification"
+                    type="button"
+                    class="btn-primary-outline">Cancel</button>
+            <button id="submit-attendee-notification"
+                    type="submit"
+                    class="btn-primary relative">
+              {% call common::btn_spinner(id = "attendee-notification-spinner", spinner_type = "2") -%}
+              Send email
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

ocg-server/templates/dashboard/group/home.html

@@ -11,6 +11,8 @@
   <script type="module" src="/static/js/dashboard/community/team-add-member.js"></script>
   <script type="module" src="/static/js/dashboard/group/group-selector.js"></script>
   <script type="module" src="/static/js/dashboard/group/event-selector.js"></script>
+  <script type="module" src="/static/js/dashboard/group/attendees.js"></script>
+  <script type="module" src="/static/js/dashboard/group/members.js"></script>
   <script type="module" src="/static/js/common/image-field.js"></script>
   <script type="module" src="/static/js/common/gallery-field.js"></script>
 {% endblock scripts -%}