diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss index 39c0fcd587..b899ef471d 100644 --- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss +++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss @@ -101,4 +101,55 @@ $progress-ring-size: var(--progress-ring-size, 24px); font-size: $show-more-button-font-size; } } + + .shared_insight_file { + display: flex; + align-items: center; + padding: 11px 20px; + + &:hover { + background-color: var(--file-item-background-color, var(--neutral-layer-1)); + cursor: pointer; + } + + &:last-child { + margin-bottom: unset; + } + + .shared_insight_file__icon { + width: 28px; + min-width: 28px; + height: 28px; + margin-inline-end: 12px; + display: flex; + align-items: center; + justify-content: center; + + img { + height: 28px; + width: 28px; + } + } + + .shared_insight_file__details { + min-width: 0; + margin-inline-end: 40px; + + .shared_insight_file__name { + font-size: var(--file-line1-font-size, var(--size-font-size, #{$ms-font-size-12})); + color: var(--file-line1-color, var(--neutral-foreground-rest)); + } + + .shared_insight_file__last-modified { + font-size: var(--file-line3-font-size, var(--size-font-size, #{$ms-font-size-12})); + color: var(--file-line3-color, var(--secondary-text-color)); + } + + > div { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } } diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts index c4a63e0887..ba11d4aa33 100644 --- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts +++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts @@ -10,9 +10,10 @@ import { Providers, ProviderState, mgtHtml, - MgtTemplatedTaskComponent + MgtTemplatedTaskComponent, + registerComponent } from '@microsoft/mgt-element'; -import { DriveItem } from '@microsoft/microsoft-graph-types'; +import { DriveItem, SharedInsight } from '@microsoft/microsoft-graph-types'; import { html, TemplateResult } from 'lit'; import { property, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -46,7 +47,8 @@ import { MgtFileUploadConfig, registerMgtFileUploadComponent } from './mgt-file- import { fluentProgressRing } from '@fluentui/web-components'; import { registerFluentComponents } from '../../utils/FluentComponents'; import { CardSection } from '../BasePersonCardSection'; -import { registerComponent } from '@microsoft/mgt-element'; +import { getRelativeDisplayDate } from '../../utils/Utils'; +import { getFileTypeIconUri } from '../../styles/fluent-icons'; export const registerMgtFileListComponent = () => { registerFluentComponents(fluentProgressRing); @@ -56,6 +58,10 @@ export const registerMgtFileListComponent = () => { registerComponent('file-list', MgtFileList); }; +const isSharedInsight = (sharedInsightFile: SharedInsight): sharedInsightFile is SharedInsight => { + return 'lastShared' in sharedInsightFile; +}; + /** * The File List component displays a list of multiple folders and files by * using the file/folder name, an icon, and other properties specified by the developer. @@ -96,6 +102,10 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio return strings; } + // files from the person card component + @state() + private _personCardFiles: DriveItem[]; + /** * allows developer to provide query for a file list * @@ -369,8 +379,9 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio @state() private _isLoadingMore: boolean; - constructor() { + constructor(files?: DriveItem[]) { super(); + this._personCardFiles = files; } /** @@ -381,6 +392,7 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio protected clearState(): void { super.clearState(); this.files = null; + this._personCardFiles = null; } /** @@ -440,6 +452,9 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio if (!this.files || this.files.length === 0) { return this.renderNoData(); } + if (this._personCardFiles) { + this.files = this._personCardFiles; + } return this._isCompact ? this.renderCompactView() : this.renderFullView(); }; @@ -540,8 +555,12 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio * @returns {TemplateResult} * @memberof mgtFileList */ - protected renderFile(file: DriveItem): TemplateResult { + protected renderFile(file: DriveItem | SharedInsight): TemplateResult { const view = this.itemView; + // if file is type SharedInsight, render Shared Insight File + if (isSharedInsight(file)) { + return this.renderSharedInsightFile(file); + } return ( this.renderTemplate('file', { file }, file.id) || mgtHtml` @@ -550,6 +569,40 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio ); } + /** + * Render a file item of Shared Insight Type + * + * @protected + * @param {IFile} file + * @returns {TemplateResult} + * @memberof MgtFileList + */ + protected renderSharedInsightFile(file: SharedInsight): TemplateResult { + const lastModifiedTemplate = file.lastShared + ? html` +
+ ${this.strings.sharedTextSubtitle} ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))} +
+ ` + : null; + + return html` +
this.handleFileClick(file, e)} tabindex="0"> +
+ ${file.resourceVisualization.title} +
+
+
${file.resourceVisualization.title}
+ ${lastModifiedTemplate} +
+
+ `; + } + /** * Render the button when clicked will show more files. * @@ -841,11 +894,14 @@ export class MgtFileList extends MgtTemplatedTaskComponent implements CardSectio this.requestUpdate(); } - private handleFileClick(file: DriveItem) { - if (file?.webUrl && !this.disableOpenOnClick) { + private readonly handleFileClick = (file: DriveItem | SharedInsight, e?: MouseEvent) => { + if (e && isSharedInsight(file) && file.resourceReference?.webUrl && !this.disableOpenOnClick) { + e.preventDefault(); + window.open(file.resourceReference.webUrl, '_blank', 'noreferrer'); + } else if (!isSharedInsight(file) && file?.webUrl && !this.disableOpenOnClick) { window.open(file.webUrl, '_blank', 'noreferrer'); } - } + }; /** * Get file extension string from file name diff --git a/packages/mgt-components/src/components/mgt-organization/mgt-organization.scss b/packages/mgt-components/src/components/mgt-organization/mgt-organization.scss index c07a3c8b0c..39c15ff1c0 100644 --- a/packages/mgt-components/src/components/mgt-organization/mgt-organization.scss +++ b/packages/mgt-components/src/components/mgt-organization/mgt-organization.scss @@ -138,6 +138,7 @@ $organization-direct-report-person-avatar-size: var(--organization-direct-report .direct-report { margin-right: 4px; + cursor: pointer; } } diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts index e929db836e..bb3e03b655 100644 --- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts +++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts @@ -1242,7 +1242,7 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory } if (MgtPersonCardConfig.sections.files && files?.length) { - this.sections.push(new MgtFileList()); + this.sections.push(new MgtFileList(files)); } if (MgtPersonCardConfig.sections.profile && profile) {