[share admin] libraries: added 'sort' (#2742)

frontend/src/pages/share-admin/libraries.js

@@ -8,8 +8,15 @@ import SharedRepoInfo from '../../models/shared-repo-info';
 
 class Content extends Component {
 
+  sortByName = (e) => {
+    e.preventDefault();
+    const sortBy = 'name';
+    const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
+    this.props.sortItems(sortBy, sortOrder);
+  }
+
   render() {
-    const {loading, errorMsg, items} = this.props;
+    const { loading, errorMsg, items, sortBy, sortOrder } = this.props;
 
     if (loading) {
       return <span className="loading-icon loading-tip"></span>;
@@ -23,12 +30,16 @@ class Content extends Component {
         </div>
       );
 
+      // sort
+      const sortByName = sortBy == 'name';
+      const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+
       const table = (
         <table className="table-hover">
           <thead>
             <tr>
               <th width="4%">{/*icon*/}</th>
-              <th width="34%">{gettext("Name")} <a className="table-sort-op by-name" href="#"><span className="sort-icon icon-caret-down hide"></span>{/* TODO: sort by name */}</a></th>
+              <th width="34%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
               <th width="30%">{gettext("Share To")}</th>
               <th width="24%">{gettext("Permission")}</th>
               <th width="8%"></th>
@@ -183,7 +194,9 @@ class ShareAdminLibraries extends Component {
     this.state = {
       loading: true,
       errorMsg: '',
-      items: []
+      items: [],
+      sortBy: 'name', // 'name' or 'time'
+      sortOrder: 'asc' // 'asc' or 'desc'
     };
   }
 
@@ -195,7 +208,7 @@ class ShareAdminLibraries extends Component {
       });
       this.setState({
         loading: false,
-        items: items
+        items: Utils.sortRepos(items, this.state.sortBy, this.state.sortOrder)
       });
     }).catch((error) => {
       if (error.response) {
@@ -254,6 +267,14 @@ class ShareAdminLibraries extends Component {
     });
   }
 
+  sortItems = (sortBy, sortOrder) => {
+    this.setState({
+      sortBy: sortBy,
+      sortOrder: sortOrder,
+      items: Utils.sortRepos(this.state.items, sortBy, sortOrder)
+    });
+  }
+
   render() {
     return (
       <div className="main-panel-center">
@@ -266,6 +287,9 @@ class ShareAdminLibraries extends Component {
               errorMsg={this.state.errorMsg}
               loading={this.state.loading}
               items={this.state.items}
+              sortBy={this.state.sortBy}
+              sortOrder={this.state.sortOrder}
+              sortItems={this.sortItems}
               unshareFolder={this.unshareFolder}
             />
           </div>