Merge pull request #2706 from Maya-Mostafa/modifications

Modifications
This commit is contained in:
Hugo Bernier 2022-06-01 22:05:19 -07:00 committed by GitHub
commit 19e582afc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 67 additions and 14 deletions

View File

@ -79,6 +79,7 @@ Version|Date|Comments
1.0|June 22, 2021|Initial release 1.0|June 22, 2021|Initial release
2.0|November 25, 2021|Change to use Microsoft Graph Follow 2.0|November 25, 2021|Change to use Microsoft Graph Follow
3.0|January 13, 2022|Graph fixes 3.0|January 13, 2022|Graph fixes
3.1|May 17, 2022|Fixed issue when no items are returned
## Minimal Path to Awesome ## Minimal Path to Awesome

View File

@ -9,7 +9,7 @@
"identify/follow user key documents from all Tenant and easily access them in Modern Pages and Microsoft Teams" "identify/follow user key documents from all Tenant and easily access them in Modern Pages and Microsoft Teams"
], ],
"creationDateTime": "2021-06-21", "creationDateTime": "2021-06-21",
"updateDateTime": "2022-01-13", "updateDateTime": "2022-05-17",
"products": [ "products": [
"SharePoint" "SharePoint"
], ],
@ -42,6 +42,11 @@
"gitHubAccount": "aaclage", "gitHubAccount": "aaclage",
"pictureUrl": "https://github.com/aaclage.png", "pictureUrl": "https://github.com/aaclage.png",
"name": "André Lage" "name": "André Lage"
},
{
"gitHubAccount": "Maya-Mostafa",
"pictureUrl": "https://github.com/Maya-Mostafa.png",
"name": "Mai Mostafa"
} }
], ],
"references": [ "references": [

View File

@ -37,3 +37,31 @@
.DocumentCardActionsPadding{ .DocumentCardActionsPadding{
padding: 4px 4px; padding: 4px 4px;
} }
// No Items message
.emptyStateControl{
position: relative;
width: 50%;
text-align: center;
padding-bottom: 20px;
margin-left: auto;
margin-right: auto;
.emptyStateImage{
margin-top: 56px;
}
.emptyStateTextWrapper{
margin-top: 32px;
.title{
color: #424242;
font-size: 20px;
font-weight: 600;
text-align: center;
}
.subtitle{
color: #424242;
font-size: 14px;
font-weight: 400;
text-align: center;
}
}
}

View File

@ -65,22 +65,29 @@ export default class FollowDocumentWebPart extends React.Component<IFollowDocume
} }
let followDocuments: FollowDocument[] = []; let followDocuments: FollowDocument[] = [];
this.getFollowDocuments(followDocuments).then((Items: FollowDocument[]) => { this.getFollowDocuments(followDocuments).then((Items: FollowDocument[]) => {
let group: Array<IDropdownOption> = new Array<IDropdownOption>();
group.push({ key: '0', text: 'All Sites' });
if(Items){ //checking if there are items before performing sort & filter to fix the error of running those functions on undefined
//Order by Date //Order by Date
Items = Items.sort((a, b) => { Items = Items.sort((a, b) => {
return b.followedDateTime.getTime() - a.followedDateTime.getTime(); return b.followedDateTime.getTime() - a.followedDateTime.getTime();
}); });
let uniq = {}; let uniq = {};
let group: Array<IDropdownOption> = new Array<IDropdownOption>();
//Remove duplicated from array //Remove duplicated from array
let uniqueArray = []; let uniqueArray = [];
uniqueArray = Items.filter(obj => !uniq[obj.WebUrl] && (uniq[obj.WebUrl] = true)); uniqueArray = Items.filter(obj => !uniq[obj.WebUrl] && (uniq[obj.WebUrl] = true));
group.push({ key: '0', text: 'All Sites' });
uniqueArray.forEach(Item => { uniqueArray.forEach(Item => {
group.push({ group.push({
key: Item.WebUrl, key: Item.WebUrl,
text: "Site: " + Item.WebName, text: "Site: " + Item.WebName,
}); });
}); });
}
this.setState({ this.setState({
Items: Items, Items: Items,
ItemsSearch: Items, ItemsSearch: Items,
@ -441,6 +448,18 @@ export default class FollowDocumentWebPart extends React.Component<IFollowDocume
onRenderGridItem={(item, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)} onRenderGridItem={(item, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}
/> />
</div> </div>
{/* No Items message */}
{!this.state.visible && !this.state.ItemsSearch &&
<div className={styles.emptyStateControl}>
<div className={styles.emptyStateImage}>
<img src="https://res.cdn.office.net/officehub/officestartresources/favorites_light_and_dark.svg" alt="Empty state icon" />
</div>
<div className={styles.emptyStateTextWrapper}>
<div className={styles.title} role="status" aria-live="polite">No favorites yet</div>
<div className={styles.subtitle} role="status" aria-live="polite">See something you love? Favorite it and we'll put it here.</div>
</div>
</div>
}
</> </>
); );
} }