From 02f4ec668b2316562839d2e66843862813808717 Mon Sep 17 00:00:00 2001 From: Gavin Barron Date: Thu, 5 Jan 2023 15:03:20 -0800 Subject: [PATCH 01/27] feat: add breadcrumb and folder navigation to file list --- .../mgt-file-list/mgt-file-list.scss | 3 + .../components/mgt-file-list/mgt-file-list.ts | 137 +++++++++++++++++- .../src/components/mgt-file-list/strings.ts | 1 + 3 files changed, 138 insertions(+), 3 deletions(-) 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 82e5e2d21f..c2e5c3dc3e 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 @@ -112,4 +112,7 @@ mgt-file-item .file-list-wrapper { background-color: $show-more-button-background-color--hover; } } + .interactive-breadcrumb { + cursor: pointer; + } } 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 7771fe7f98..bc52066d46 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 @@ -42,10 +42,30 @@ import { strings } from './strings'; import { MgtFile } from '../mgt-file/mgt-file'; import { MgtFileUploadConfig } from './mgt-file-upload/mgt-file-upload'; -import { fluentProgressRing, fluentDesignSystemProvider } from '@fluentui/web-components'; +import { + fluentProgressRing, + fluentBreadcrumb, + fluentBreadcrumbItem, + fluentDesignSystemProvider +} from '@fluentui/web-components'; import { registerFluentComponents } from '../../utils/FluentComponents'; -registerFluentComponents(fluentProgressRing, fluentDesignSystemProvider); +registerFluentComponents(fluentProgressRing, fluentDesignSystemProvider, fluentBreadcrumb, fluentBreadcrumbItem); + +type BreadcrumbInfo = { + name: string; + fileListQuery?: string; + itemId?: string; + itemPath?: string; + files?: DriveItem[]; + fileQueries?: string[]; + groupId?: string; + driveId?: string; + siteId?: string; + userId?: string; + insightType?: OfficeGraphInsightString; + fileExtensions?: string[]; +}; /** * The File List component displays a list of multiple folders and files by @@ -468,6 +488,35 @@ export class MgtFileList extends MgtTemplatedComponent { this.requestStateUpdate(true); } + /** + * Name to be used for the root node of the breadcrumb + * + * @type {string} + * @memberof MgtFileList + */ + @property({ + attribute: 'name' + }) + public rootNodeName: string = 'Home'; + + private _breadcrumb: BreadcrumbInfo[] = []; + /** + * An array of nodes to show in the breadcrumb + * + * @type {BreadcrumbInfo[]} + * @readonly + * @memberof MgtFileList + */ + @state() + private get breadcrumb(): BreadcrumbInfo[] { + return this._breadcrumb; + } + private set breadcrumb(value: BreadcrumbInfo[]) { + this._breadcrumb = value; + } + + private isLastCrumb = (b: BreadcrumbInfo): boolean => this.breadcrumb.indexOf(b) === this.breadcrumb.length - 1; + /** * Get the scopes required for file list * @@ -510,6 +559,29 @@ export class MgtFileList extends MgtTemplatedComponent { this._preloadedFiles = []; } + /** + * Override connectedCallback to set initial breadcrumbstate. + * + * @memberof MgtFileList + */ + public connectedCallback(): void { + super.connectedCallback(); + this.breadcrumb.push({ + name: this.rootNodeName, + siteId: this.siteId, + groupId: this.groupId, + driveId: this.driveId, + userId: this.userId, + files: this.files, + fileExtensions: this.fileExtensions, + fileListQuery: this.fileListQuery, + fileQueries: this.fileQueries, + itemPath: this.itemPath, + insightType: this.insightType, + itemId: this.itemId + }); + } + /** * Override requestStateUpdate to include clearstate. * @@ -586,6 +658,26 @@ export class MgtFileList extends MgtTemplatedComponent { protected renderFiles(): TemplateResult { return html`
+ + ${repeat( + this.breadcrumb, + b => b.name, // feels bad to use name as key, needs a better way to identify breadcrumb + b => + html` + this.handleBreadcrumbClick(b)} + @keypress=${(e: KeyboardEvent) => this.handleBreadcrumbKeyPress(e, b)} + > + + ${b.name} + + + ` + )} + ${this.enableFileUpload ? this.renderFileUpload() : null}