Skip to content

Commit 933b71f

Browse files
AJIXuMuKAJIXuMuK
authored
Merge pull request #812 from joelfmrodrigues/feature/folder-explorer-sorting
Add support for sorting folder explorer items
2 parents 852ba33 + 873cb55 commit 933b71f

File tree

5 files changed

+47
-33
lines changed

5 files changed

+47
-33
lines changed

‎src/controls/folderExplorer/FolderExplorer/FolderExplorer.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,9 @@ export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolde
166166
}
167167
} else {
168168
// library/folder level, get folders
169-
this._allFolders = await this._spService.GetFolders(siteAbsoluteUrl, folder.ServerRelativeUrl);
169+
const orderBy = this.props.orderby !== undefined ? this.props.orderby : 'Name';
170+
const orderAscending = this.props.orderAscending !== undefined ? this.props.orderAscending : true;
171+
this._allFolders = await this._spService.GetFolders(siteAbsoluteUrl, folder.ServerRelativeUrl, orderBy, orderAscending);
170172
}
171173
this.setState({ folders: this._allFolders, selectedFolder: folder, foldersLoading: false });
172174

‎src/controls/folderExplorer/FolderExplorer/IFolderExplorerProps.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,16 @@ export interface IFolderExplorerProps {
4646
*/
4747
hiddenFilterBox?: boolean;
4848

49+
/**
50+
* The name of the field on which to sort. Default: Name. For list item properties, use ListItemAllFields/Title, ListItemAllFields/Created, etc
51+
*/
52+
orderby?: string;
53+
54+
/**
55+
* If set to true, results will be sorted in ascending order. Otherwise, descending will be used as default
56+
*/
57+
orderAscending?: boolean;
58+
4959
/**
5060
* Callback function called after a folder is selected
5161
* @argument folder The selected folder

‎src/services/FolderExplorerService.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,21 +59,21 @@ export class FolderExplorerService implements IFolderExplorerService {
5959
* @param webAbsoluteUrl - the url of the target site
6060
* @param folderRelativeUrl - the relative url of the folder
6161
*/
62-
public GetFolders = async (webAbsoluteUrl: string, folderRelativeUrl: string): Promise<IFolder[]> => {
63-
return this._getFolders(webAbsoluteUrl, folderRelativeUrl);
62+
public GetFolders = async (webAbsoluteUrl: string, folderRelativeUrl: string, orderby: string, orderAscending: boolean): Promise<IFolder[]> => {
63+
return this._getFolders(webAbsoluteUrl, folderRelativeUrl, orderby, orderAscending);
6464
}
6565

6666
/**
6767
* Get folders within a given library or sub folder
6868
* @param webAbsoluteUrl - the url of the target site
6969
* @param folderRelativeUrl - the relative url of the folder
7070
*/
71-
private _getFolders = async (webAbsoluteUrl: string, folderRelativeUrl: string): Promise<IFolder[]> => {
71+
private _getFolders = async (webAbsoluteUrl: string, folderRelativeUrl: string, orderby: string, orderAscending: boolean): Promise<IFolder[]> => {
7272
let results: IFolder[] = [];
7373
try {
7474
const web = Web(webAbsoluteUrl);
7575
folderRelativeUrl = folderRelativeUrl.replace(/\'/ig, "''");
76-
let foldersResult: IFolder[] = await web.getFolderByServerRelativePath(folderRelativeUrl).folders.select('Name', 'ServerRelativeUrl').orderBy('Name').get();
76+
let foldersResult: IFolder[] = await web.getFolderByServerRelativePath(folderRelativeUrl).folders.select('Name', 'ServerRelativeUrl').orderBy(orderby, orderAscending).get();
7777
results = foldersResult.filter(f => f.Name != "Forms");
7878
} catch (error) {
7979
console.error('Error loading folders', error);

‎src/services/IFolderExplorerService.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface IFolderExplorerService {
2424
* @param webAbsoluteUrl - the url of the target site
2525
* @param folderRelativeUrl - the relative url of the folder
2626
*/
27-
GetFolders(webAbsoluteUrl: string, folderRelativeUrl: string): Promise<IFolder[]>;
27+
GetFolders(webAbsoluteUrl: string, folderRelativeUrl: string, orderby: string, orderAscending: boolean): Promise<IFolder[]>;
2828

2929
/**
3030
* Create a new folder

‎src/webparts/controlsTest/components/ControlsTest.tsx

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -775,31 +775,31 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
775775

776776

777777
<AccessibleAccordion allowZeroExpanded>
778-
<AccordionItem key={"Headding 1"}>
779-
<AccordionItemHeading>
780-
<AccordionItemButton>{"Accordion Item Heading 1"}</AccordionItemButton>
781-
</AccordionItemHeading>
782-
<AccordionItemPanel>
783-
<div style={{margin: 20}}>
784-
<h2>Content Heading 1</h2>
785-
<Text variant={"mediumPlus"}>Text sample </Text>
778+
<AccordionItem key={"Headding 1"}>
779+
<AccordionItemHeading>
780+
<AccordionItemButton>{"Accordion Item Heading 1"}</AccordionItemButton>
781+
</AccordionItemHeading>
782+
<AccordionItemPanel>
783+
<div style={{ margin: 20 }}>
784+
<h2>Content Heading 1</h2>
785+
<Text variant={"mediumPlus"}>Text sample </Text>
786786

787-
</div>
788-
</AccordionItemPanel>
789-
</AccordionItem>
790-
<AccordionItem key={"Headding 2"}>
791-
<AccordionItemHeading>
792-
<AccordionItemButton>Accordion Item Heading 2</AccordionItemButton>
793-
</AccordionItemHeading>
794-
<AccordionItemPanel>
795-
<div style={{margin: 20}}>
796-
<h2>Content Heading 2</h2>
797-
<Text variant={"mediumPlus"}>Text </Text>
798-
<TextField></TextField>
799-
</div>
800-
</AccordionItemPanel>
801-
</AccordionItem>
802-
</AccessibleAccordion>
787+
</div>
788+
</AccordionItemPanel>
789+
</AccordionItem>
790+
<AccordionItem key={"Headding 2"}>
791+
<AccordionItemHeading>
792+
<AccordionItemButton>Accordion Item Heading 2</AccordionItemButton>
793+
</AccordionItemHeading>
794+
<AccordionItemPanel>
795+
<div style={{ margin: 20 }}>
796+
<h2>Content Heading 2</h2>
797+
<Text variant={"mediumPlus"}>Text </Text>
798+
<TextField></TextField>
799+
</div>
800+
</AccordionItemPanel>
801+
</AccordionItem>
802+
</AccessibleAccordion>
803803

804804

805805

@@ -1437,7 +1437,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
14371437
//accepts={[".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"]}
14381438
buttonLabel="Add File"
14391439

1440-
buttonIconProps={{iconName: 'Add', styles:{root:{fontSize: 42}}}}
1440+
buttonIconProps={{ iconName: 'Add', styles: { root: { fontSize: 42 } } }}
14411441
onSave={this._onFilePickerSave}
14421442
onChange={(filePickerResult: IFilePickerResult) => { console.log(filePickerResult.fileName); }}
14431443
context={this.props.context}
@@ -1517,6 +1517,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
15171517
}}
15181518
onSelect={this._onFolderSelect}
15191519
canCreateFolders={true}
1520+
orderby='Name' //'ListItemAllFields/Created'
1521+
orderAscending={true}
15201522
/>
15211523
</div>
15221524

@@ -1531,8 +1533,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
15311533
onExpandCollapse={this.onExpandCollapseTree}
15321534
onSelect={this.onItemSelected}
15331535
defaultExpandedChildren={true}
1534-
//expandToSelected={true}
1535-
// onRenderItem={this.renderCustomTreeItem}
1536+
//expandToSelected={true}
1537+
// onRenderItem={this.renderCustomTreeItem}
15361538
/>
15371539
<PrimaryButton onClick={() => { this.setState({ treeViewSelectedKeys: [] }); }}>Clear selection</PrimaryButton>
15381540

0 commit comments

Comments
 (0)