diff --git a/packages/leavitt-elements/src/leavitt-person-company-select.ts b/packages/leavitt-elements/src/leavitt-person-company-select.ts index 241b08f9e..33e35a9f4 100644 --- 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) { >
${this.selected?.type === 'Person' - ? html`` + ? html`` : this.selected?.type === 'Company' ? html`` : this.selected?.type === 'CustomEntity' @@ -401,7 +401,7 @@ export class LeavittPersonCompanySelectElement extends LoadWhile(LitElement) { ${suggestion?.FullName} ${suggestion?.CompanyName} - + ` : 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 index caa1d2ba2..0a9362cbb 100644 --- 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) { }} > ${this.selected?.type === 'Person' - ? html`` + ? html`` : this.selected?.type === 'PeopleGroup' ? html`${peopleGroupIcons.get(this.selected['@odata.type'])?.icon ?? 'task_alt'} ${suggestion?.FullName} ${suggestion?.CompanyName} - + ` : suggestion.type == 'PeopleGroup' diff --git a/packages/leavitt-elements/src/leavitt-person-select.ts b/packages/leavitt-elements/src/leavitt-person-select.ts index e19a05a2a..2619bb14c 100644 --- 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 = ['top=15', 'orderby=FullName', 'select=FullName,CompanyName,Id', 'count=true']; + @property({ type: Array }) odataParts: Array = [ + '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) { }} > ${this.selected - ? html` ` + ? html` ` : ''} ${person.FullName} ${person.CompanyName} - + ` )} diff --git a/packages/leavittbook/src/demos/leavitt-person-company-select/leavitt-person-company-select-playground.ts b/packages/leavittbook/src/demos/leavitt-person-company-select/leavitt-person-company-select-playground.ts index 9ff477d86..4a6bc2e9d 100644 --- a/packages/leavittbook/src/demos/leavitt-person-company-select/leavitt-person-company-select-playground.ts +++ b/packages/leavittbook/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 index 157452b86..eb3ed14fa 100644 --- 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 {

Default person select

- + } + .apiService=${this.apiService} + > diff --git a/packages/leavittbook/src/demos/profile-picture/profile-picture-playground.ts b/packages/leavittbook/src/demos/profile-picture/profile-picture-playground.ts index 7edd945eb..13601d294 100644 --- 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 {

Default

Default profile picture styles

- +

Square

Square profile picture styles

- +

Color ring

Color ring variant

- - - + + +

Sizes

Sizes include 32, 64, 128, 256, and 512px

- - - - - + + + + +

Responsive

Size can be adjusted further using responsive units

- - + +
`; } diff --git a/packages/leavittbook/src/demos/titanium-chip/titanium-chip-playground.ts b/packages/leavittbook/src/demos/titanium-chip/titanium-chip-playground.ts index ee05f092f..42932e343 100644 --- 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 {

Profile pictures

Slot in the profile picture element

- +

Icons

@@ -78,7 +78,7 @@ export class TitaniumChipPlayground extends LitElement {

Variable type

Examples using various chip types together without a flex container

- + bolt diff --git a/packages/profile-picture/src/profile-picture-menu-popup.ts b/packages/profile-picture/src/profile-picture-menu-popup.ts index 9bc57e781..06b81c953 100644 --- 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`
e.preventDefault()}> - +

${this.name}

${this.company ? html`

${this.company}

` : ''}

${this.email}

diff --git a/packages/profile-picture/src/profile-picture-menu.ts b/packages/profile-picture/src/profile-picture-menu.ts index 7e46a884c..64bf6bab3 100644 --- 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 { > { if (this.personId) { @@ -113,7 +106,7 @@ export class ProfilePictureMenuElement extends LitElement { 0 ? this.cacheBust + 1 : 1; } static styles = css` @@ -140,22 +135,12 @@ export class ProfilePictureElement extends LitElement { `; renderProfilePicture() { - return html` - User profile picture (this.hasError = true)} - src="https://cdn.leavitt.com/user-${this.hasError ? 0 : this.personId}-${this.#determineSize(this.size)}.jpeg${this.cacheBust > 0 - ? `?c=${this.cacheBust}` - : ''}" - /> - `; + return html` User profile picture `; } render() { - if (this.linkToProfile) { - return html`${this.renderProfilePicture()} `; } diff --git a/packages/user-manager/src/LssJwtToken.ts b/packages/user-manager/src/LssJwtToken.ts index 0f2eaa5e1..463e09ded 100644 --- a/packages/user-manager/src/LssJwtToken.ts +++ b/packages/user-manager/src/LssJwtToken.ts @@ -9,6 +9,7 @@ export interface LssJwtToken { given_name: string; Company?: string; CompanyId?: string; + PicCdnFileName?: string; iss: string; nameid: string; nbf: number; diff --git a/packages/user-manager/src/user-manager.ts b/packages/user-manager/src/user-manager.ts index a29b3974d..a708b4b99 100644 --- a/packages/user-manager/src/user-manager.ts +++ b/packages/user-manager/src/user-manager.ts @@ -34,6 +34,8 @@ export class UserManager extends LitElement { @property({ type: Number }) companyId: number | null; + @property({ type: String }) profilePictureFileName: string | null; + @property({ type: String }) email: string; @property({ type: Number }) personId: number = 0; @@ -246,6 +248,7 @@ export class UserManager extends LitElement { this.company = _jwtToken.Company ?? ''; this.companyId = _jwtToken.CompanyId ? Number(_jwtToken.CompanyId) : 0; + this.profilePictureFileName = _jwtToken.PicCdnFileName || null; this.dispatchEvent(new UserManagerUpdatedEvent()); } @@ -355,6 +358,7 @@ export class UserManager extends LitElement { this.fullname = ''; this.company = ''; this.companyId = null; + this.profilePictureFileName = null; this.firstName = ''; this.lastName = ''; this.email = '';