[shared-width-all, group] added 'sort' (#2736)

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -7,6 +7,9 @@ const propTypes = {
   libraryType: PropTypes.string,
   currentGroup: PropTypes.object,
   isShowTableThread: PropTypes.bool,
+  sortBy: PropTypes.string,
+  sortOrder: PropTypes.string,
+  sortItems: PropTypes.func,
   repoList: PropTypes.array.isRequired,
   onItemUnshare: PropTypes.func.isRequired,
   onItemDelete: PropTypes.func.isRequired,
@@ -22,6 +25,28 @@ class SharedRepoListView extends React.Component {
     };
   }
 
+  sortByName = (e) => {
+    e.preventDefault();
+    const sortBy = 'name';
+    const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
+    this.props.sortItems(sortBy, sortOrder);
+  }
+
+  sortByTime = (e) => {
+    e.preventDefault();
+    const sortBy = 'time';
+    const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
+    this.props.sortItems(sortBy, sortOrder);
+  }
+
+  getSortMetaData = () => {
+    return {
+      sortByName: this.props.sortBy == 'name',
+      sortByTime: this.props.sortBy == 'time',
+      sortIcon: this.props.sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>
+    };
+  }
+
   onFreezedItem = () => {
     this.setState({
       isItemFreezed: !this.state.isItemFreezed,
@@ -52,19 +77,18 @@ class SharedRepoListView extends React.Component {
 
   renderPCUI = () => {
     let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
+
+    const { sortByName, sortByTime, sortIcon } = this.getSortMetaData();
+
     return (
       <table className={isShowTableThread ? '' : 'table-thead-hidden'}>
         <thead>
           <tr>
             <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
-            <th width="40%">{gettext("Name")}
+            <th width="40%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-              <a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a>
-            </th>
             <th width="12%"><span className="sr-only">{gettext("Actions")}</span></th>
             <th width={'14%'}>{gettext("Size")}</th>
-            <th width={'14%'}>{gettext("Last Update")}
+            <th width={'14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
-              <a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a>
-            </th>
             <th width="16%">{gettext("Owner")}</th>
           </tr>
         </thead>
@@ -77,15 +101,18 @@ class SharedRepoListView extends React.Component {
 
   renderMobileUI = () => {
     let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
+
+    const { sortByName, sortByTime, sortIcon } = this.getSortMetaData();
+
     return (
       <table className={isShowTableThread ? '' : 'table-thead-hidden'}>
         <thead>
           <tr>
             <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
             <th width="68%">
-              {gettext("Sort:")} {/* TODO: sort */}
+              {gettext("Sort:")}
-              {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
+              <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext("name")} {sortByName && sortIcon}</a>
-              {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
+              <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext("last update")} {sortByTime && sortIcon}</a>
             </th>
             <th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
           </tr>

frontend/src/pages/groups/group-view.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { gettext, siteRoot, username, loginUrl } from '../../utils/constants';
 import { Link } from '@reach/router';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import Loading from '../../components/loading';
 import ModalPortal from '../../components/modal-portal';
 import Group from '../../models/group';
@@ -42,6 +43,8 @@ class GroupView extends React.Component {
       currentRepo: null,
       isStaff: false,
       isOwner: false,
+      sortBy: 'name', // 'name' or 'time'
+      sortOrder: 'asc', // 'asc' or 'desc'
       repoList: [],
       libraryType: 'group',
       isCreateRepoDialogShow: false,
@@ -116,7 +119,7 @@ class GroupView extends React.Component {
       });
       this.setState({
         isLoading: false,
-        repoList: repoList
+        repoList: Utils.sortRepos(repoList, this.state.sortBy, this.state.sortOrder)
       });
     }).catch((error) => {
       if (error.response) {
@@ -313,6 +316,14 @@ class GroupView extends React.Component {
     this.setState({isShowDetails: false});
   }
 
+  sortItems = (sortBy, sortOrder) => {
+    this.setState({
+      sortBy: sortBy,
+      sortOrder: sortOrder,
+      repoList: Utils.sortRepos(this.state.repoList, sortBy, sortOrder)
+    });
+  }
+
   render() {
     let { errMessage, emptyTip, currentGroup } = this.state;
     let isShowSettingIcon = !(currentGroup && currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
@@ -418,6 +429,9 @@ class GroupView extends React.Component {
                 <SharedRepoListView 
                   repoList={this.state.repoList} 
                   currentGroup={this.state.currentGroup} 
+                  sortBy={this.state.sortBy}
+                  sortOrder={this.state.sortOrder}
+                  sortItems={this.sortItems}
                   onItemUnshare={this.onItemUnshare}
                   onItemDelete={this.onItemDelete}
                   onItemDetails={this.onItemDetails}

frontend/src/pages/shared-with-all/public-shared-view.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap'
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import Repo from '../../models/repo';
 import toaster from '../../components/toast';
 import Loading from '../../components/loading';
@@ -26,6 +27,8 @@ class PublicSharedView extends React.Component {
       errMessage: '',
       emptyTip: '',
       repoList: [],
+      sortBy: 'name', // 'name' or 'time'
+      sortOrder: 'asc', // 'asc' or 'desc'
       libraryType: 'public',
       isCreateMenuShow: false,
       isCreateRepoDialogShow: false,
@@ -41,7 +44,7 @@ class PublicSharedView extends React.Component {
       });
       this.setState({
         isLoading: false,
-        repoList: repoList
+        repoList: Utils.sortRepos(repoList, this.state.sortBy, this.state.sortOrder)
       });
     }).catch((error) => {
       if (error.response) {
@@ -144,6 +147,14 @@ class PublicSharedView extends React.Component {
     this.setState({isSelectRepoDialpgShow: !this.state.isSelectRepoDialpgShow});
   }
 
+  sortItems = (sortBy, sortOrder) => {
+    this.setState({
+      sortBy: sortBy,
+      sortOrder: sortOrder,
+      repoList: Utils.sortRepos(this.state.repoList, sortBy, sortOrder)
+    });
+  }
+
   render() {
     let errMessage = this.state.errMessage;
     let emptyTip = (
@@ -184,6 +195,9 @@ class PublicSharedView extends React.Component {
                 <SharedRepoListView 
                   libraryType={this.state.libraryType}
                   repoList={this.state.repoList}
+                  sortBy={this.state.sortBy}
+                  sortOrder={this.state.sortOrder}
+                  sortItems={this.sortItems}
                   onItemUnshare={this.onItemUnshare}
                   onItemDelete={this.onItemDelete}
                 />