[system admin] all repos: added 'sort by size & file count' (#4414)

frontend/src/components/paginator.js

@@ -17,7 +17,7 @@ const propTypes = {
 class Paginator extends Component {
 
   resetPerPage = (e) => {
-    const perPage = e.target.value;
+    const perPage = parseInt(e.target.value);
     this.updateURL(1, perPage);
     this.props.resetPerPage(perPage);
   }

frontend/src/pages/sys-admin/repos/all-repos.js

@@ -21,14 +21,16 @@ class AllRepos extends Component {
       repos: [],
       pageInfo: {},
       perPage: 25,
+      sortBy: '',
       isCreateRepoDialogOpen: false
     };
   }
 
   componentDidMount () {
     let urlParams = (new URL(window.location)).searchParams;
-    const { currentPage = 1, perPage } = this.state;
+    const { currentPage = 1, perPage, sortBy } = this.state;
     this.setState({
+      sortBy: urlParams.get('order_by') || sortBy,
       perPage: parseInt(urlParams.get('per_page') || perPage),
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
@@ -41,7 +43,8 @@ class AllRepos extends Component {
   }
 
   getReposByPage = (page) => {
-    seafileAPI.sysAdminListAllRepos(page, this.state.perPage).then((res) => {
+    const { perPage, sortBy } = this.state;
+    seafileAPI.sysAdminListAllRepos(page, perPage, sortBy).then((res) => {
       this.setState({
         loading: false,
         repos: res.data.repos,
@@ -55,6 +58,22 @@ class AllRepos extends Component {
     });
   }
 
+  sortItems = (sortBy) => {
+    this.setState({
+      currentPage: 1,
+      sortBy: sortBy 
+    }, () => {
+      let url = new URL(location.href);
+      let searchParams = new URLSearchParams(url.search);
+      const { currentPage, sortBy } = this.state;
+      searchParams.set('page', currentPage);
+      searchParams.set('order_by', sortBy);
+      url.search = searchParams.toString();
+      navigate(url.toString());
+      this.getReposByPage(currentPage);
+    });
+  }
+
   resetPerPage = (perPage) => {
     this.setState({
       perPage: perPage
@@ -121,6 +140,8 @@ class AllRepos extends Component {
                 loading={this.state.loading}
                 errorMsg={this.state.errorMsg}
                 items={this.state.repos}
+                sortBy={this.state.sortBy}
+                sortItems={this.sortItems}
                 pageInfo={this.state.pageInfo}
                 curPerPage={this.state.perPage}
                 getListByPage={this.getReposByPage}

frontend/src/pages/sys-admin/repos/repos.js

@@ -42,8 +42,19 @@ class Content extends Component {
     this.props.getListByPage(this.props.pageInfo.current_page + 1);
   }
 
+  sortByFileCount = (e) => {
+    e.preventDefault();
+    this.props.sortItems('file_count');
+  }
+
+  sortBySize = (e) => {
+    e.preventDefault();
+    this.props.sortItems('size');
+  }
+
   render() {
-    const { loading, errorMsg, items, pageInfo, curPerPage } = this.props;
+    // offer 'sort' only for 'all repos'
+    const { loading, errorMsg, items, pageInfo, curPerPage, sortBy } = this.props;
     if (loading) {
       return <Loading />;
     } else if (errorMsg) {
@@ -54,6 +65,7 @@ class Content extends Component {
           <h2>{gettext('No libraries')}</h2>
         </EmptyTip>
       );
+      const sortIcon = <span className="fas fa-caret-down"></span>;
       const table = (
         <Fragment>
           <table>
@@ -61,7 +73,15 @@ class Content extends Component {
               <tr>
                 <th width="5%">{/*icon*/}</th>
                 <th width="25%">{gettext('Name')}</th>
-                <th width="15%">{gettext('Files')}{' / '}{gettext('Size')}</th>
+                <th width="15%">
+                  {sortBy != undefined ? 
+                    <Fragment>
+                      <a className="d-inline-block table-sort-op" href="#" onClick={this.sortByFileCount}>{gettext('Files')} {sortBy == 'file_count' && sortIcon}</a>{' / '}
+                      <a className="d-inline-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBy == 'size' && sortIcon}</a>
+                    </Fragment> :
+                    gettext('Files') / gettext('Size')
+                  }
+                </th>
                 <th width="32%">ID</th>
                 <th width="18%">{gettext('Owner')}</th>
                 <th width="5%">{/*Operations*/}</th>