SAK-50114 roster Only display one profile popup at a time (sakaiproje…

…ct#12908)
axxter99 · Sep 23, 2024 · b2ff469 · b2ff469
1 parent 2ab0f50
commit b2ff469
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/roster2/tool/src/webapp/js/roster.js b/roster2/tool/src/webapp/js/roster.js
@@ -832,6 +832,10 @@ roster.init = function () {
     error: () => console.error("failure retrieving search index data")
   });
 
+  document.addEventListener("profile-shown", () => {
+    document.querySelectorAll("sakai-user-photo").forEach(sup => sup.close());
+  });
+
   roster.switchState(roster.state, roster);
 };
 

diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-user-photo/src/SakaiUserPhoto.js b/webcomponents/tool/src/main/frontend/packages/sakai-user-photo/src/SakaiUserPhoto.js
@@ -1,5 +1,5 @@
 import { SakaiElement } from "@sakai-ui/sakai-element";
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import "@sakai-ui/sakai-profile";
 
@@ -31,8 +31,6 @@ export class SakaiUserPhoto extends SakaiElement {
     label: { type: String },
     print: { type: Boolean },
     online: { type: Boolean },
-
-    _generatedId: { state: true },
   };
 
   constructor() {
@@ -48,8 +46,6 @@ export class SakaiUserPhoto extends SakaiElement {
     super.attributeChangedCallback(name, oldValue, newValue);
 
     if (this.userId) {
-      this._generatedId = `sakai-user-photo-${this.userId}-${Math.floor(Math.random() * 100)}`;
-
       if (this.blank) {
         this.url = "/direct/profile/blank/image";
       } else {
@@ -59,14 +55,18 @@ export class SakaiUserPhoto extends SakaiElement {
     }
   }
 
+  close() {
+    bootstrap.Popover.getInstance(this.querySelector("div"))?.hide();
+  }
+
   shouldUpdate() {
     return this.userId;
   }
 
   firstUpdated() {
 
     if (this.profilePopup == SakaiUserPhoto.ON) {
-      const el = document.getElementById(this._generatedId);
+      const el = this.querySelector("div");
       if (el) {
         const sakaiProfile = this.querySelector("sakai-profile");
 
@@ -75,6 +75,8 @@ export class SakaiUserPhoto extends SakaiElement {
           html: true,
         });
         el.addEventListener("show.bs.popover", () => {
+
+          this.dispatchEvent(new CustomEvent("profile-shown", { detail: { userId: this.userId }, bubbles: true }));
           sakaiProfile.fetchProfileData(); // Trigger the JSON load for this user
         });
       }
@@ -90,19 +92,18 @@ export class SakaiUserPhoto extends SakaiElement {
     }
 
     return html`
-      <div id="${ifDefined(this._generatedId)}"
-          data-user-id="${this.userId}"
+      <div data-user-id="${this.userId}"
           class="sakai-user-photo ${this.classes}"
           data-bs-toggle="popover"
           aria-label="${ifDefined(this.label)}"
           title="${ifDefined(this.label)}"
           style="background-image:url(${this.url}) ${this.profilePopup === SakaiUserPhoto.OFF ? "" : ";cursor: pointer;"}">
         ${this.online ? html`
         <span></span>
-        ` : ""}
+        ` : nothing}
       </div>
       <div class="d-none">
-      <sakai-profile user-id="${this.userId}"></sakai-profile>
+        <sakai-profile user-id="${this.userId}"></sakai-profile>
       </div>
     `;
   }