From fde74a5d7d58fd8ec3cbb2dff97ccf943525743f Mon Sep 17 00:00:00 2001 From: zachroberts8668 Date: Sat, 14 Sep 2019 16:28:37 -0400 Subject: [PATCH] Added styling to groups and function to get group thumbnails --- package-lock.json | 154 +++++++++--------- src/services/GroupService.ts | 21 +++ .../GroupList/GroupList.module.scss | 49 ++++++ .../components/GroupList/GroupList.tsx | 69 +++++++- .../components/GroupList/IGroupListProps.ts | 1 + .../reactMyGroups/ReactMyGroups.tsx | 46 +++++- 6 files changed, 254 insertions(+), 86 deletions(-) create mode 100644 src/webparts/reactMyGroups/components/GroupList/GroupList.module.scss diff --git a/package-lock.json b/package-lock.json index 7f4b04d9b..296c88969 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6519,8 +6519,8 @@ "dev": true, "optional": true, "requires": { - "delegates": "1.0.0", - "readable-stream": "2.3.6" + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" } }, "balanced-match": { @@ -6535,7 +6535,7 @@ "dev": true, "optional": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, @@ -6575,7 +6575,7 @@ "dev": true, "optional": true, "requires": { - "ms": "2.1.1" + "ms": "^2.1.1" } }, "deep-extend": { @@ -6602,7 +6602,7 @@ "dev": true, "optional": true, "requires": { - "minipass": "2.3.5" + "minipass": "^2.2.1" } }, "fs.realpath": { @@ -6617,14 +6617,14 @@ "dev": true, "optional": true, "requires": { - "aproba": "1.2.0", - "console-control-strings": "1.1.0", - "has-unicode": "2.0.1", - "object-assign": "4.1.1", - "signal-exit": "3.0.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wide-align": "1.1.3" + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" } }, "glob": { @@ -6633,12 +6633,12 @@ "dev": true, "optional": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "has-unicode": { @@ -6653,7 +6653,7 @@ "dev": true, "optional": true, "requires": { - "safer-buffer": "2.1.2" + "safer-buffer": ">= 2.1.2 < 3" } }, "ignore-walk": { @@ -6662,7 +6662,7 @@ "dev": true, "optional": true, "requires": { - "minimatch": "3.0.4" + "minimatch": "^3.0.4" } }, "inflight": { @@ -6671,8 +6671,8 @@ "dev": true, "optional": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" } }, "inherits": { @@ -6693,7 +6693,7 @@ "dev": true, "optional": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "isarray": { @@ -6708,7 +6708,7 @@ "dev": true, "optional": true, "requires": { - "brace-expansion": "1.1.11" + "brace-expansion": "^1.1.7" } }, "minimist": { @@ -6723,8 +6723,8 @@ "dev": true, "optional": true, "requires": { - "safe-buffer": "5.1.2", - "yallist": "3.0.3" + "safe-buffer": "^5.1.2", + "yallist": "^3.0.0" } }, "minizlib": { @@ -6733,7 +6733,7 @@ "dev": true, "optional": true, "requires": { - "minipass": "2.3.5" + "minipass": "^2.2.1" } }, "mkdirp": { @@ -6757,9 +6757,9 @@ "dev": true, "optional": true, "requires": { - "debug": "4.1.1", - "iconv-lite": "0.4.24", - "sax": "1.2.4" + "debug": "^4.1.0", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" } }, "node-pre-gyp": { @@ -6768,16 +6768,16 @@ "dev": true, "optional": true, "requires": { - "detect-libc": "1.0.3", - "mkdirp": "0.5.1", - "needle": "2.3.0", - "nopt": "4.0.1", - "npm-packlist": "1.4.1", - "npmlog": "4.1.2", - "rc": "1.2.8", - "rimraf": "2.6.3", - "semver": "5.7.0", - "tar": "4.4.8" + "detect-libc": "^1.0.2", + "mkdirp": "^0.5.1", + "needle": "^2.2.1", + "nopt": "^4.0.1", + "npm-packlist": "^1.1.6", + "npmlog": "^4.0.2", + "rc": "^1.2.7", + "rimraf": "^2.6.1", + "semver": "^5.3.0", + "tar": "^4" } }, "nopt": { @@ -6786,8 +6786,8 @@ "dev": true, "optional": true, "requires": { - "abbrev": "1.1.1", - "osenv": "0.1.5" + "abbrev": "1", + "osenv": "^0.1.4" } }, "npm-bundled": { @@ -6802,8 +6802,8 @@ "dev": true, "optional": true, "requires": { - "ignore-walk": "3.0.1", - "npm-bundled": "1.0.6" + "ignore-walk": "^3.0.1", + "npm-bundled": "^1.0.1" } }, "npmlog": { @@ -6812,10 +6812,10 @@ "dev": true, "optional": true, "requires": { - "are-we-there-yet": "1.1.5", - "console-control-strings": "1.1.0", - "gauge": "2.7.4", - "set-blocking": "2.0.0" + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" } }, "number-is-nan": { @@ -6836,7 +6836,7 @@ "dev": true, "optional": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" } }, "os-homedir": { @@ -6857,8 +6857,8 @@ "dev": true, "optional": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" } }, "path-is-absolute": { @@ -6879,10 +6879,10 @@ "dev": true, "optional": true, "requires": { - "deep-extend": "0.6.0", - "ini": "1.3.5", - "minimist": "1.2.0", - "strip-json-comments": "2.0.1" + "deep-extend": "^0.6.0", + "ini": "~1.3.0", + "minimist": "^1.2.0", + "strip-json-comments": "~2.0.1" }, "dependencies": { "minimist": { @@ -6899,13 +6899,13 @@ "dev": true, "optional": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "2.0.0", - "safe-buffer": "5.1.2", - "string_decoder": "1.1.1", - "util-deprecate": "1.0.2" + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" } }, "rimraf": { @@ -6914,7 +6914,7 @@ "dev": true, "optional": true, "requires": { - "glob": "7.1.3" + "glob": "^7.1.3" } }, "safe-buffer": { @@ -6959,9 +6959,9 @@ "dev": true, "optional": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" } }, "string_decoder": { @@ -6970,7 +6970,7 @@ "dev": true, "optional": true, "requires": { - "safe-buffer": "5.1.2" + "safe-buffer": "~5.1.0" } }, "strip-ansi": { @@ -6979,7 +6979,7 @@ "dev": true, "optional": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "strip-json-comments": { @@ -6994,13 +6994,13 @@ "dev": true, "optional": true, "requires": { - "chownr": "1.1.1", - "fs-minipass": "1.2.5", - "minipass": "2.3.5", - "minizlib": "1.2.1", - "mkdirp": "0.5.1", - "safe-buffer": "5.1.2", - "yallist": "3.0.3" + "chownr": "^1.1.1", + "fs-minipass": "^1.2.5", + "minipass": "^2.3.4", + "minizlib": "^1.1.1", + "mkdirp": "^0.5.0", + "safe-buffer": "^5.1.2", + "yallist": "^3.0.2" } }, "util-deprecate": { @@ -7015,7 +7015,7 @@ "dev": true, "optional": true, "requires": { - "string-width": "1.0.2" + "string-width": "^1.0.2 || 2" } }, "wrappy": { diff --git a/src/services/GroupService.ts b/src/services/GroupService.ts index 37ed9e0ff..46aa6e5b2 100644 --- a/src/services/GroupService.ts +++ b/src/services/GroupService.ts @@ -2,6 +2,8 @@ import { MSGraphClient } from "@microsoft/sp-http"; import * as MicrosoftGraph from "@microsoft/microsoft-graph-types"; import { WebPartContext } from "@microsoft/sp-webpart-base"; import { IGroup, IGroupCollection } from "../models"; +import { GraphRequest } from "@microsoft/microsoft-graph-client"; + export class GroupServiceManager { public context: WebPartContext; @@ -46,6 +48,25 @@ export class GroupServiceManager { }); } + public getGroupThumbnails(groups: IGroup): Promise { + return new Promise((resolve, reject) => { + try { + this.context.msGraphClientFactory + .getClient() + .then((client: MSGraphClient) => { + client + .api(`/groups/${groups.id}/photos/48x48/$value`) + .responseType('blob') + .get((error: any, group: any, rawResponse: any) => { + resolve(window.URL.createObjectURL(group)); + }); + }); + } catch(error) { + console.error(error); + } + }); + } + } const GroupService = new GroupServiceManager(); diff --git a/src/webparts/reactMyGroups/components/GroupList/GroupList.module.scss b/src/webparts/reactMyGroups/components/GroupList/GroupList.module.scss new file mode 100644 index 000000000..4d737db2f --- /dev/null +++ b/src/webparts/reactMyGroups/components/GroupList/GroupList.module.scss @@ -0,0 +1,49 @@ +@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; + +:export { + padding: 20; + minWidth: 210; + maxWidth: 320; + rowsPerPage: 3; +} + +.compactLayout { + overflow: hidden; + font-size: 0; + position: relative; + background-color: transparent; + + :global(.ms-DocumentCard) { + position: relative; + background-color: $ms-color-white; + height: 100%; + + &:global(.ms-DocumentCard--compact), &:global(.ms-DocumentCard--actionable) { + border: none; + + :global(.ms-DocumentCardPreview) { + -ms-flex-negative: 0; + flex-shrink: 0; + width: 48px; + } + + :global(.ms-DocumentCardTitle) { + font-weight: 400; + } + + &:hover { + border: none; + + &::after { + border:none; + } + } + } + } + + :global(.ms-List-cell) { + vertical-align: top; + display: inline-block; + margin-bottom: 20px; + } +} diff --git a/src/webparts/reactMyGroups/components/GroupList/GroupList.tsx b/src/webparts/reactMyGroups/components/GroupList/GroupList.tsx index e81cfc031..49a52f8ef 100644 --- a/src/webparts/reactMyGroups/components/GroupList/GroupList.tsx +++ b/src/webparts/reactMyGroups/components/GroupList/GroupList.tsx @@ -1,16 +1,73 @@ import * as React from 'react'; import { IGroupListProps } from './IGroupListProps'; +import { List, FocusZone, FocusZoneDirection } from 'office-ui-fabric-react'; +import { IRectangle } from 'office-ui-fabric-react/lib/Utilities'; +import styles from './GroupList.module.scss'; + +const ROWS_PER_PAGE: number = +styles.rowsPerPage; +const MAX_ROW_HEIGHT: number = +styles.maxWidth; +const PADDING: number = +styles.padding; +const MIN_WIDTH: number = +styles.minWidth; export class GroupList extends React.Component { + private _columnCount: number; + private _columnWidth: number; + private _rowHeight: number; + public render(): React.ReactElement { + + return ( -
- +
+ + + +
+ //
+ // + //
+ ); + } + + private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => { + if (itemIndex === 0) { + this._columnCount = Math.ceil(surfaceRect.width / (MAX_ROW_HEIGHT)); + this._columnWidth = Math.max(MIN_WIDTH, Math.floor(surfaceRect.width / this._columnCount) + Math.floor(PADDING / this._columnCount)); + this._rowHeight = this._columnWidth; + } + + return this._columnCount * ROWS_PER_PAGE; + } + + private _getPageHeight = (): number => { + return this._rowHeight * ROWS_PER_PAGE; + } + + private _onRenderCell = (item: any, index: number | undefined): JSX.Element => { + const cellPadding: number = index % this._columnCount !== this._columnCount - 1 && PADDING; + const cellWidth: number = this._columnWidth - PADDING; + return ( +
+ {this.props.onRenderItem(item, index)}
); } diff --git a/src/webparts/reactMyGroups/components/GroupList/IGroupListProps.ts b/src/webparts/reactMyGroups/components/GroupList/IGroupListProps.ts index c33dcfd37..b2c4e93cc 100644 --- a/src/webparts/reactMyGroups/components/GroupList/IGroupListProps.ts +++ b/src/webparts/reactMyGroups/components/GroupList/IGroupListProps.ts @@ -1,3 +1,4 @@ export interface IGroupListProps { groups?: any[]; + onRenderItem: (item: any, index: number) => JSX.Element; } diff --git a/src/webparts/reactMyGroups/components/reactMyGroups/ReactMyGroups.tsx b/src/webparts/reactMyGroups/components/reactMyGroups/ReactMyGroups.tsx index 187ffdc98..06b081fe0 100644 --- a/src/webparts/reactMyGroups/components/reactMyGroups/ReactMyGroups.tsx +++ b/src/webparts/reactMyGroups/components/reactMyGroups/ReactMyGroups.tsx @@ -6,6 +6,7 @@ import GroupService from '../../../../services/GroupService'; import { IReactMyGroupsState } from './IReactMyGroupsState'; import { GroupList } from '../GroupList'; import { IGroup } from '../../../../models'; +import { DocumentCard, DocumentCardType, DocumentCardDetails, DocumentCardTitle, IDocumentCardPreviewProps, ImageFit, DocumentCardPreview } from 'office-ui-fabric-react'; export class ReactMyGroups extends React.Component { @@ -22,7 +23,7 @@ export class ReactMyGroups extends React.Component

My Office 365 Groups

- + this._onRenderItem(item, index)}/>
); } @@ -33,7 +34,7 @@ export class ReactMyGroups extends React.Component { GroupService.getGroups().then(groups => { - console.log(groups); + // console.log(groups); this.setState({ groups: groups }); @@ -44,12 +45,51 @@ export class ReactMyGroups extends React.Component { groups.map(groupItem => ( GroupService.getGroupLinks(groupItem).then(groupurl => { - console.log(groupurl.value); + // console.log(groupurl.value); this.setState(prevState => ({ groups: prevState.groups.map(group => group.id === groupItem.id ? {...group, url: groupurl.value} : group) })); }) )); + this._getGroupThumbnails(groups); + } + + public _getGroupThumbnails = (groups: any): void => { + groups.map(groupItem => ( + GroupService.getGroupThumbnails(groupItem).then(grouptb => { + console.log(grouptb); + this.setState(prevState => ({ + groups: prevState.groups.map(group => group.id === groupItem.id ? {...group, thumbnail: grouptb} : group) + })); + }) + )); + } + + private _onRenderItem = (item: any, index: number): JSX.Element => { + const previewProps: IDocumentCardPreviewProps = { + previewImages: [ + { + previewImageSrc: item.thumbnail, + imageFit: ImageFit.center, + height: 48, + width: 48 + } + ] + }; + return ( +
+ + + + + + +
+ ); } }