Added styling to groups and function to get group thumbnails
This commit is contained in:
zachroberts8668
parent
22ceb62cdc
commit
fde74a5d7d
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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<any> {
|
||||
return new Promise<any>((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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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<IGroupListProps, {}> {
|
||||
|
||||
private _columnCount: number;
|
||||
private _columnWidth: number;
|
||||
private _rowHeight: number;
|
||||
|
||||
public render(): React.ReactElement<IGroupListProps> {
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
{this.props.groups.map(group => (
|
||||
<li><a href={group.url}>{group.displayName}</a></li>
|
||||
))}
|
||||
</ul>
|
||||
<div role="group">
|
||||
<FocusZone
|
||||
direction={FocusZoneDirection.horizontal}
|
||||
isCircularNavigation={false}
|
||||
>
|
||||
<List
|
||||
className={styles.compactLayout}
|
||||
items={this.props.groups}
|
||||
getItemCountForPage={this._getItemCountForPage}
|
||||
getPageHeight={this._getPageHeight}
|
||||
onRenderCell={this._onRenderCell}
|
||||
/>
|
||||
</FocusZone>
|
||||
</div>
|
||||
// <div>
|
||||
// <ul>
|
||||
// {this.props.groups.map(group => (
|
||||
// <li><a href={group.url}>{group.displayName}</a></li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// </div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<div
|
||||
style={{
|
||||
width: `${cellWidth}px`,
|
||||
marginRight: `${cellPadding}px`
|
||||
}}
|
||||
>
|
||||
{this.props.onRenderItem(item, index)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
export interface IGroupListProps {
|
||||
groups?: any[];
|
||||
onRenderItem: (item: any, index: number) => JSX.Element;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<IReactMyGroupsProps, IReactMyGroupsState> {
|
||||
|
||||
|
|
@ -22,7 +23,7 @@ export class ReactMyGroups extends React.Component<IReactMyGroupsProps, IReactMy
|
|||
return (
|
||||
<div className={ styles.reactMyGroups }>
|
||||
<h1>My Office 365 Groups</h1>
|
||||
<GroupList groups={this.state.groups} />
|
||||
<GroupList groups={this.state.groups} onRenderItem={(item: any, index: number) => this._onRenderItem(item, index)}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -33,7 +34,7 @@ export class ReactMyGroups extends React.Component<IReactMyGroupsProps, IReactMy
|
|||
|
||||
public _getGroups = (): void => {
|
||||
GroupService.getGroups().then(groups => {
|
||||
console.log(groups);
|
||||
// console.log(groups);
|
||||
this.setState({
|
||||
groups: groups
|
||||
});
|
||||
|
|
@ -44,12 +45,51 @@ export class ReactMyGroups extends React.Component<IReactMyGroupsProps, IReactMy
|
|||
public _getGroupLinks = (groups: any): void => {
|
||||
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 (
|
||||
<div>
|
||||
<DocumentCard
|
||||
type={DocumentCardType.compact}
|
||||
>
|
||||
<DocumentCardPreview {...previewProps} />
|
||||
<DocumentCardDetails>
|
||||
<DocumentCardTitle
|
||||
title={item.displayName}
|
||||
/>
|
||||
</DocumentCardDetails>
|
||||
</DocumentCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue