Implement Participants page using DataTables

Author: sayravai

assets/css/main.css

@@ -23,6 +23,9 @@
   "Filter":
   "Suodatus",
 
+  "Reset filters":
+  "Nollaa suodattimet",
+
   "Collapse":
   "Supista",
 
@@ -38,6 +41,18 @@
   "Student name":
   "Opiskelijan nimi",
 
+  "First name":
+  "Etunimi",
+
+  "Last name":
+  "Sukunimi",
+
+  "Email":
+  "S\u00E4hk\u00F6posti",
+
+  "Status":
+  "Tila",
+
   "Organization":
   "Organisaatio",
 

assets/css/main.css.map

@@ -15,38 +15,54 @@ $.fn.extend({
    */
   buttons_popover: function (buttons, options) {
     this.each(function (i, elem) {
-      const this_buttons = typeof buttons === "function" ?
-        buttons(elem) :
-        buttons;
+      const this_buttons = typeof buttons === "function" ? buttons(elem) : buttons;
       const default_options = {
         html: true,
         sanitize: false,
         placement: 'bottom',
         trigger: 'focus',
-      }
+        container: 'body',
+      };
       const all_options = $.extend({}, default_options, options);
 
       const buttons_html = this_buttons.map(function (btn) {
         return ('<button id="' + btn.id + '" class="btn ' + btn.classes +
                 '" ' + (btn.extra_attrs || "") + ">" + btn.text + "</button>")
       }).join(' ');
-      // We have to attach the event handlers to body because the buttons are
-      // created only when the popover is open and are destroyed when it is closed
+
       const $elem = $(elem);
+      // Make focusable for trigger: 'focus'
+      $elem.attr({ 'tabindex': 0 });
+
+      // Attach delegated handlers for dynamically created buttons
+      // Namespace per-button id to avoid duplicate handlers on re-init
       this_buttons.forEach(function (btn) {
-        $('body').on('click', 'button#' + btn.id, function () {
-          // Close this popover by triggering a click
-          $elem.trigger('click');
-          return btn.onclick();
-        });
+        const ev = 'click.buttonsPopover.' + btn.id;
+        $('body')
+          .off(ev, 'button#' + btn.id)
+          .on(ev, 'button#' + btn.id, function () {
+            // Hide popover then execute action
+            try {
+              const inst = bootstrap.Popover.getInstance($elem[0]);
+              if (inst) inst.hide();
+            } catch (e) { /* ignore */ }
+            return btn.onclick();
+          });
       });
 
-      $elem.attr({
-        'data-bs-toggle': 'popover',
-        'data-content': buttons_html,
-        'tabindex': 0
-      });
-      $elem.popover(all_options);
+      // Initialize Bootstrap 5 popover (idempotent)
+      try {
+        const existing = bootstrap.Popover.getInstance($elem[0]);
+        if (!existing) {
+          new bootstrap.Popover($elem[0], $.extend({}, all_options, { content: buttons_html }));
+        } else {
+          // Update content attribute for existing instance
+          $elem.attr('data-bs-content', buttons_html);
+        }
+      } catch (e) {
+        // As a fallback, set data attributes for any legacy initializers
+        $elem.attr({ 'data-bs-toggle': 'popover', 'data-bs-content': buttons_html });
+      }
     });
   },
 });