feat: change profile picture to drive off filename vs personId

BREAKING CHANGE: profile-picture personId property has been removed. Use fileName to supply profile picture file name off the CDN. link-to-profile was replaced by profile-picture-link-person-id where a person id must be supplied to construct a valid like to directory. All cache busting was removed because it is no longer needed with this approach. A profilePictureFileName was added to user manager to supply picture file name of logged in user.
LeavittSoftware · Sep 27, 2023 · 1b85c82 · 1b85c82
1 parent 027a953
commit 1b85c82
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 88 deletions.
diff --git a/packages/leavitt-elements/src/leavitt-person-company-select.ts b/packages/leavitt-elements/src/leavitt-person-company-select.ts
@@ -214,7 +214,7 @@ export class LeavittPersonCompanySelectElement extends LoadWhile(LitElement) {
     }
 
     try {
-      const odataParts = ['top=100', 'count=true', 'select=FullName,Id,CompanyName'];
+      const odataParts = ['top=100', 'count=true', 'select=FullName,Id,CompanyName,ProfilePictureCdnFileName'];
       const searchTokens = getSearchTokens(searchTerm);
       if (searchTokens.length > 0) {
         const searchFilter = searchTokens.map((token: string) => `contains(tolower(FullName), '${token.toLowerCase()}')`).join(' and ');
@@ -363,7 +363,7 @@ export class LeavittPersonCompanySelectElement extends LoadWhile(LitElement) {
       ></mwc-textfield>
       <div icon>
         ${this.selected?.type === 'Person'
-          ? html`<profile-picture selected .personId=${this.selected?.Id || 0} shape="circle" size="24"></profile-picture>`
+          ? html`<profile-picture selected .fileName=${this.selected?.ProfilePictureCdnFileName || null} shape="circle" size="24"></profile-picture>`
           : this.selected?.type === 'Company'
           ? html`<img selected src=${this.selected?.MarkUrl || 'https://cdn.leavitt.com/lg-mark.svg'} />`
           : this.selected?.type === 'CustomEntity'
@@ -401,7 +401,7 @@ export class LeavittPersonCompanySelectElement extends LoadWhile(LitElement) {
                 <mwc-list-item twoline graphic="medium">
                   <span>${suggestion?.FullName}</span>
                   <span slot="secondary">${suggestion?.CompanyName}</span>
-                  <profile-picture slot="graphic" .personId=${suggestion?.Id || 0} shape="circle" size="40"></profile-picture>
+                  <profile-picture slot="graphic" .fileName=${suggestion?.ProfilePictureCdnFileName || null} shape="circle" size="40"></profile-picture>
                 </mwc-list-item>
               `
             : suggestion.type == 'Company'

diff --git a/packages/leavitt-elements/src/leavitt-person-group-select.ts b/packages/leavitt-elements/src/leavitt-person-group-select.ts
@@ -210,7 +210,7 @@ export class LeavittPersonGroupSelectElement extends LoadWhile(LitElement) {
     }
 
     try {
-      const odataParts = ['top=100', 'count=true', 'select=FullName,Id,CompanyName'];
+      const odataParts = ['top=100', 'count=true', 'select=FullName,Id,CompanyName,ProfilePictureCdnFileName'];
       const searchTokens = getSearchTokens(searchTerm);
       if (searchTokens.length > 0) {
         const searchFilter = searchTokens.map((token: string) => `contains(tolower(FullName), '${token.toLowerCase()}')`).join(' and ');
@@ -370,7 +370,7 @@ export class LeavittPersonGroupSelectElement extends LoadWhile(LitElement) {
         }}
       ></mwc-textfield>
       ${this.selected?.type === 'Person'
-        ? html`<profile-picture selected .personId=${this.selected?.Id || 0} shape="circle" size="24"></profile-picture>`
+        ? html`<profile-picture selected .fileName=${this.selected?.ProfilePictureCdnFileName || null} shape="circle" size="24"></profile-picture>`
         : this.selected?.type === 'PeopleGroup'
         ? html`<mwc-icon selected title=${peopleGroupIcons.get(this.selected['@odata.type'])?.displayName ?? 'People group'} slot="graphic"
             >${peopleGroupIcons.get(this.selected['@odata.type'])?.icon ?? 'task_alt'}</mwc-icon
@@ -406,7 +406,7 @@ export class LeavittPersonGroupSelectElement extends LoadWhile(LitElement) {
                 <mwc-list-item twoline graphic="avatar">
                   <span>${suggestion?.FullName}</span>
                   <span slot="secondary">${suggestion?.CompanyName}</span>
-                  <profile-picture slot="graphic" .personId=${suggestion?.Id || 0} shape="circle" size="40"></profile-picture>
+                  <profile-picture slot="graphic" .fileName=${suggestion?.ProfilePictureCdnFileName || 0} shape="circle" size="40"></profile-picture>
                 </mwc-list-item>
               `
             : suggestion.type == 'PeopleGroup'

diff --git a/packages/leavitt-elements/src/leavitt-person-select.ts b/packages/leavitt-elements/src/leavitt-person-select.ts
@@ -11,7 +11,7 @@ import { TextField } from '@material/mwc-textfield';
 import { TitaniumSnackbarSingleton } from '@leavittsoftware/titanium-snackbar/lib/titanium-snackbar';
 
 import { getSearchTokens, Debouncer, LoadWhile } from '@leavittsoftware/titanium-helpers';
-import { Person } from '@leavittsoftware/lg-core-typescript/lg.net.core';
+import { Person } from '@leavittsoftware/lg-core-typescript';
 import ApiService from '@leavittsoftware/api-service/lib/api-service';
 import { DOMEvent } from './dom-event';
 import { SelectedDetail } from '@material/mwc-menu/mwc-menu-base';
@@ -55,7 +55,12 @@ export class LeavittPersonSelectElement extends LoadWhile(LitElement) {
   /**
    *  Odata parts for the Person API call
    */
-  @property({ type: Array }) odataParts: Array<string> = ['top=15', 'orderby=FullName', 'select=FullName,CompanyName,Id', 'count=true'];
+  @property({ type: Array }) odataParts: Array<string> = [
+    'top=15',
+    'orderby=FullName',
+    'select=FullName,CompanyName,Id,ProfilePictureCdnFileName',
+    'count=true',
+  ];
 
   /**
    *  The person object selected by the user.
@@ -73,9 +78,9 @@ export class LeavittPersonSelectElement extends LoadWhile(LitElement) {
   @property({ type: String }) label: string = 'Person';
 
   /**
-   *  Path to personId.
+   *  Path to profile picture filename.
    */
-  @property({ type: String }) pathToPersonId: string = 'Id';
+  @property({ type: String }) pathToProfilePictureFileName: string = 'ProfilePictureCdnFileName';
 
   /**
    *  Set the name of the API controller to use
@@ -326,7 +331,7 @@ export class LeavittPersonSelectElement extends LoadWhile(LitElement) {
         }}
       ></mwc-textfield>
       ${this.selected
-        ? html` <profile-picture selected .personId=${this.selected?.[this.pathToPersonId] || 0} shape="circle" size="24"></profile-picture>`
+        ? html` <profile-picture selected .fileName=${this.selected?.[this.pathToProfilePictureFileName] || 0} shape="circle" size="24"></profile-picture>`
         : ''}
       <mwc-menu
         ?fixed=${this.fixedMenuPosition}
@@ -357,7 +362,7 @@ export class LeavittPersonSelectElement extends LoadWhile(LitElement) {
             <mwc-list-item twoline graphic="avatar">
               <span>${person.FullName}</span>
               <span slot="secondary">${person.CompanyName}</span>
-              <profile-picture slot="graphic" .personId=${person?.[this.pathToPersonId] || 0} shape="circle" size="40"></profile-picture>
+              <profile-picture slot="graphic" .fileName=${person?.[this.pathToProfilePictureFileName] || 0} shape="circle" size="40"></profile-picture>
             </mwc-list-item>
           `
         )}

diff --git a/...tbook/src/demos/leavitt-person-company-select/leavitt-person-company-select-playground.ts b/...tbook/src/demos/leavitt-person-company-select/leavitt-person-company-select-playground.ts
@@ -91,6 +91,7 @@ export class LeavittPersonCompanySelectPlaygroundElement extends LitElement {
             FullName: 'Aaron Drabeck',
             Id: 11056,
             type: 'Person',
+            ProfilePictureCdnFileName: 'zP6DJ9lM6HmkTAaku8ZIzQQdUBHYrX5pCCANvFxtpnagBhJPp7CGXOl-16xe',
           }}
           disabled
           .apiService=${this.apiService}

diff --git a/packages/leavittbook/src/demos/leavitt-person-select/leavitt-person-select-playground.ts b/packages/leavittbook/src/demos/leavitt-person-select/leavitt-person-select-playground.ts
@@ -11,6 +11,7 @@ import { AuthenticatedTokenProvider } from '@leavittsoftware/api-service/lib/aut
 /* playground-fold-end */
 import '@leavittsoftware/leavitt-elements/lib/leavitt-person-select';
 import { LeavittPersonSelectElement } from '@leavittsoftware/leavitt-elements/lib/leavitt-person-select';
+import { Person } from '@leavittsoftware/lg-core-typescript';
 
 /* playground-fold */
 @customElement('leavitt-person-select-playground')
@@ -75,7 +76,15 @@ export class LeavittPersonSelectPlaygroundElement extends LitElement {
       <p>Default person select</p>
       <div>
         <leavitt-person-select label="default" .apiService=${this.apiService}></leavitt-person-select>
-        <leavitt-person-select label="default" .selected=${{ Id: 11056, FullName: 'Aaron Drabeck' }} .apiService=${this.apiService}></leavitt-person-select>
+        <leavitt-person-select
+          label="default"
+          .selected=${{
+            Id: 11056,
+            FullName: 'Aaron Drabeck',
+            ProfilePictureCdnFileName: 'zP6DJ9lM6HmkTAaku8ZIzQQdUBHYrX5pCCANvFxtpnagBhJPp7CGXOl-16xe',
+          } satisfies Partial<Person>}
+          .apiService=${this.apiService}
+        ></leavitt-person-select>
         <leavitt-person-select label="placeholder" placeholder="My placeholder" .apiService=${this.apiService}></leavitt-person-select>
         <leavitt-person-select label="disabled" disabled .apiService=${this.apiService}></leavitt-person-select>
         <leavitt-person-select label="helper" helper="helper text" .apiService=${this.apiService}></leavitt-person-select>

diff --git a/packages/leavittbook/src/demos/profile-picture/profile-picture-playground.ts b/packages/leavittbook/src/demos/profile-picture/profile-picture-playground.ts
@@ -38,38 +38,38 @@ export class ProfilePicturePlayground extends LitElement {
       <h1>Default</h1>
       <p>Default profile picture styles</p>
       <div>
-        <profile-picture personId="915608"></profile-picture>
+        <profile-picture></profile-picture>
       </div>
 
       <h1>Square</h1>
       <p>Square profile picture styles</p>
       <div>
-        <profile-picture personId="915608" shape="square"></profile-picture>
+        <profile-picture shape="square"></profile-picture>
       </div>
 
       <h1>Color ring</h1>
       <p>Color ring variant</p>
       <div>
-        <profile-picture personId="915608" shape="square" show-ring></profile-picture>
-        <profile-picture personId="915608" show-ring></profile-picture>
-        <profile-picture link-to-profile personId="915608" show-ring style="--profile-picture-ring-color: purple"></profile-picture>
+        <profile-picture shape="square" show-ring></profile-picture>
+        <profile-picture show-ring></profile-picture>
+        <profile-picture profile-picture-link-person-id="11056" show-ring style="--profile-picture-ring-color: purple"></profile-picture>
       </div>
 
       <h1>Sizes</h1>
       <p>Sizes include 32, 64, 128, 256, and 512px</p>
       <div>
-        <profile-picture link-to-profile personId="915608" size="24"></profile-picture>
-        <profile-picture personId="915608" size="32"></profile-picture>
-        <profile-picture link-to-profile personId="915608" size="64"></profile-picture>
-        <profile-picture personId="915608" size="128"></profile-picture>
-        <profile-picture link-to-profile personId="915608" size="256"></profile-picture>
+        <profile-picture profile-picture-link-person-id="11056" size="24"></profile-picture>
+        <profile-picture size="32"></profile-picture>
+        <profile-picture profile-picture-link-person-id="11056" size="64"></profile-picture>
+        <profile-picture size="128"></profile-picture>
+        <profile-picture profile-picture-link-person-id="11056" size="256"></profile-picture>
       </div>
 
       <h1>Responsive</h1>
       <p>Size can be adjusted further using responsive units</p>
       <div>
-        <profile-picture personId="915608" size="256" useIntrisicImageSize style="width: 20vh;"></profile-picture>
-        <profile-picture link-to-profile personId="915608" size="256" useIntrisicImageSize style="width: 20vw;"></profile-picture>
+        <profile-picture size="256" useIntrisicImageSize style="width: 20vh;"></profile-picture>
+        <profile-picture profile-picture-link-person-id="11056" size="256" useIntrisicImageSize style="width: 20vw;"></profile-picture>
       </div>
     `;
   }

diff --git a/packages/leavittbook/src/demos/titanium-chip/titanium-chip-playground.ts b/packages/leavittbook/src/demos/titanium-chip/titanium-chip-playground.ts
@@ -65,7 +65,7 @@ export class TitaniumChipPlayground extends LitElement {
       <h1>Profile pictures</h1>
       <p>Slot in the profile picture element</p>
       <div>
-        <titanium-chip label="The Rock"><profile-picture slot="chip-icon" personId="915608" size="28"></profile-picture ></profile-picture></titanium-chip>
+        <titanium-chip label="The Rock"><profile-picture slot="chip-icon" size="28"></profile-picture ></profile-picture></titanium-chip>
       </div>
 
       <h1>Icons</h1>
@@ -78,7 +78,7 @@ export class TitaniumChipPlayground extends LitElement {
       <h1>Variable type</h1>
       <p>Examples using various chip types together without a flex container</p>
       <span>
-        <titanium-chip label="The Rock"><profile-picture slot="chip-icon" personId="915608" size="28"></profile-picture ></profile-picture></titanium-chip>
+        <titanium-chip label="The Rock"><profile-picture slot="chip-icon" size="28"></profile-picture ></profile-picture></titanium-chip>
         <titanium-chip label="Online"> <mwc-icon slot="chip-icon">bolt</mwc-icon></titanium-chip>
         <titanium-chip label="Default"></titanium-chip>
       </span>

diff --git a/packages/profile-picture/src/profile-picture-menu-popup.ts b/packages/profile-picture/src/profile-picture-menu-popup.ts
@@ -4,15 +4,11 @@ import '@material/mwc-button';
 import { TitaniumPopupSurfaceFoundation } from '@leavittsoftware/titanium-popup-surface';
 import { GetUserManagerInstance } from '@leavittsoftware/user-manager';
 import { css, html } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
-import { ProfilePictureElement } from './profile-picture';
+import { property, customElement } from 'lit/decorators.js';
 
 @customElement('profile-picture-menu-popup')
 export class ProfilePictureMenuPopupElement extends TitaniumPopupSurfaceFoundation {
-  /**
-   * Person id of user
-   */
-  @property({ type: Number }) personId: number = 0;
+  @property({ type: String }) profilePictureFileName: string | null;
 
   /**
    * Email address of user
@@ -29,15 +25,6 @@ export class ProfilePictureMenuPopupElement extends TitaniumPopupSurfaceFoundati
    */
   @property({ type: String }) name: string = '';
 
-  @query('profile-picture') profilePicture: ProfilePictureElement;
-
-  /**
-   * Reloads profile picture from server
-   */
-  forceRefreshPicture() {
-    this.profilePicture.refresh();
-  }
-
   static styles = [
     ...TitaniumPopupSurfaceFoundation.styles,
     css`
@@ -119,7 +106,7 @@ export class ProfilePictureMenuPopupElement extends TitaniumPopupSurfaceFoundati
   render() {
     return html`
       <main @mousedown=${(e: Event) => e.preventDefault()}>
-        <profile-picture shape="circle" .personId=${this.personId} size="90"></profile-picture>
+        <profile-picture shape="circle" .fileName=${this.profilePictureFileName} size="90"></profile-picture>
         <h1>${this.name}</h1>
         ${this.company ? html`<h2 company>${this.company}</h2>` : ''}
         <h2>${this.email}</h2>

diff --git a/packages/profile-picture/src/profile-picture-menu.ts b/packages/profile-picture/src/profile-picture-menu.ts
@@ -7,7 +7,6 @@ import { css, html, LitElement } from 'lit';
 import { property, customElement, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { ProfilePictureMenuPopupElement } from './profile-picture-menu-popup';
-import { ProfilePictureElement } from './profile-picture';
 
 /**
  * Profile picture menu for the Leavitt Group
@@ -25,6 +24,8 @@ export class ProfilePictureMenuElement extends LitElement {
    */
   @property({ type: Number }) size: number = 40;
 
+  @property({ type: String }) profilePictureFileName: string | null;
+
   /**
    * Person id of user
    */
@@ -40,7 +41,6 @@ export class ProfilePictureMenuElement extends LitElement {
    */
   @property({ type: String }) company: string = '';
 
-  @query('profile-picture') profilePicture: ProfilePictureElement;
   @query('profile-picture-menu-popup') popup: ProfilePictureMenuPopupElement;
 
   /**
@@ -53,19 +53,12 @@ export class ProfilePictureMenuElement extends LitElement {
     this.setUserProps();
   }
 
-  /**
-   * Reloads profile picture from server
-   */
-  forceRefreshPicture() {
-    this.profilePicture.refresh();
-    this.popup.forceRefreshPicture();
-  }
-
   /**
    * Sets properties based on user manager instance
    */
   setUserProps() {
     this.personId = GetUserManagerInstance().personId;
+    this.profilePictureFileName = GetUserManagerInstance().profilePictureFileName;
     this.email = GetUserManagerInstance().email;
     this.company = GetUserManagerInstance().company;
     this.name = GetUserManagerInstance().fullname;
@@ -100,7 +93,7 @@ export class ProfilePictureMenuElement extends LitElement {
       >
         <profile-picture
           shape="circle"
-          .personId=${this.personId}
+          .fileName=${this.profilePictureFileName}
           .size=${this.size}
           @click=${() => {
             if (this.personId) {
@@ -113,7 +106,7 @@ export class ProfilePictureMenuElement extends LitElement {
         <profile-picture-menu-popup
           anchor-margin-bottom="5"
           anchor-corner="9"
-          .personId=${this.personId}
+          .profilePictureFileName=${this.profilePictureFileName}
           .name=${this.name}
           .email=${this.email}
           .company=${this.company}