[system admin] share links: added 'sort by ctime/view_cnt' (#4560)

frontend/src/pages/sys-admin/links/share-links.js

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { navigate } from '@reach/router';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { gettext, siteRoot } from '../../../utils/constants';
 import toaster from '../../../components/toast';
@@ -25,8 +26,22 @@ class Content extends Component {
     this.props.getShareLinksByPage(this.props.currentPage + 1);
   }
 
+  sortByTime = (e) => {
+    e.preventDefault();
+    this.props.sortItems('ctime');
+  }
+
+  sortByCount = (e) => {
+    e.preventDefault();
+    this.props.sortItems('view_cnt');
+  }
+
   render() {
-    const { loading, errorMsg, items, perPage, currentPage , hasNextPage }= this.props;
+    const { 
+      loading, errorMsg, items, 
+      perPage, currentPage, hasNextPage,
+      sortBy, sortOrder
+    } = this.props;
     if (loading) {
       return <Loading />;
     } else if (errorMsg) {
@@ -37,6 +52,9 @@ class Content extends Component {
           <h2>{gettext('No share links')}</h2>
         </EmptyTip>
       );
+
+      const initialSortIcon = <span className="fas fa-sort"></span>;
+      const sortIcon = <span className={`fas ${sortOrder == 'asc' ? 'fa-caret-up' : 'fa-caret-down'}`}></span>;
       const table = (
         <Fragment>
           <table className="table-hover">
@@ -45,8 +63,12 @@ class Content extends Component {
                 <th width="18%">{gettext('Name')}</th>
                 <th width="18%">{gettext('Token')}</th>
                 <th width="18%">{gettext('Owner')}</th>
-                <th width="15%">{gettext('Created At')}</th>
+                <th width="15%">
-                <th width="10%">{gettext('Count')}</th>
+                  <a className="d-inline-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Created At')} {sortBy == 'ctime' ? sortIcon : initialSortIcon}</a>
+                </th>
+                <th width="10%">
+                  <a className="d-inline-block table-sort-op" href="#" onClick={this.sortByCount}>{gettext('Count')} {sortBy == 'view_cnt' ? sortIcon : initialSortIcon}</a>
+                </th>
                 <th width="11%">{gettext('Expiration')}</th>
                 <th width="10%">{/*Operations*/}</th>
               </tr>
@@ -151,24 +173,28 @@ class ShareLinks extends Component {
       perPage: 25,
       currentPage: 1,
       hasNextPage: false,
+      sortBy: '', 
+      sortOrder: 'asc'
     };
     this.initPage = 1;
   }
 
   componentDidMount () {
     let urlParams = (new URL(window.location)).searchParams;
-    const { currentPage, perPage } = this.state;
+    const { currentPage, perPage, sortBy, sortOrder } = this.state;
     this.setState({
       perPage: parseInt(urlParams.get('per_page') || perPage),
-      currentPage: parseInt(urlParams.get('page') || currentPage)
+      currentPage: parseInt(urlParams.get('page') || currentPage),
+      sortBy: urlParams.get('order_by') || sortBy,
+      sortOrder: urlParams.get('direction') || sortOrder
     }, () => {
       this.getShareLinksByPage(this.state.currentPage);
     });
   }
 
   getShareLinksByPage = (page) => {
-    let { perPage } = this.state;
+    const { perPage, sortBy, sortOrder } = this.state;
-    seafileAPI.sysAdminListAllShareLinks(page, perPage).then((res) => {
+    seafileAPI.sysAdminListShareLinks(page, perPage, sortBy, sortOrder).then((res) => {
       this.setState({
         shareLinkList: res.data.share_link_list,
         loading: false,
@@ -183,6 +209,24 @@ class ShareLinks extends Component {
     });
   }
 
+  sortItems = (sortBy) => {
+    this.setState({
+      currentPage: 1,
+      sortBy: sortBy,
+      sortOrder: this.state.sortOrder == 'asc' ? 'desc' : 'asc'
+    }, () => {
+      let url = new URL(location.href);
+      let searchParams = new URLSearchParams(url.search);
+      const { currentPage, sortBy, sortOrder } = this.state;
+      searchParams.set('page', currentPage);
+      searchParams.set('order_by', sortBy);
+      searchParams.set('direction', sortOrder);
+      url.search = searchParams.toString();
+      navigate(url.toString());
+      this.getShareLinksByPage(currentPage);
+    }); 
+  }
+
   deleteShareLink = (linkToken) => {
     seafileAPI.sysAdminDeleteShareLink(linkToken).then(res => {
       let newShareLinkList = this.state.shareLinkList.filter(item =>
@@ -219,6 +263,9 @@ class ShareLinks extends Component {
                 hasNextPage={hasNextPage}
                 getShareLinksByPage={this.getShareLinksByPage}
                 resetPerPage={this.resetPerPage}
+                sortBy={this.state.sortBy}
+                sortOrder={this.state.sortOrder}
+                sortItems={this.sortItems}
                 deleteShareLink={this.deleteShareLink}
               />
             </div>