haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-08 10:22:46 +00:00
Code Issues Releases Wiki Activity

[my libraries] sort by name & time (#2726)

Browse Source
This commit is contained in:
llj
2018-12-28 15:19:10 +08:00
committed by Daniel Pan
parent dd15cd0ea8
commit aa98e831e6
6 changed files with 179 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/pages/my-libs/content.js
View File

@@ -11,6 +11,9 @@ import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
const propTypes = {
loading: PropTypes.bool.isRequired,
errorMsg: PropTypes.string.isRequired,
sortBy: PropTypes.string.isRequired,
sortOrder: PropTypes.string.isRequired,
sortItems: PropTypes.func.isRequired,
items: PropTypes.array.isRequired,
onRenameRepo: PropTypes.func.isRequired,
onDeleteRepo: PropTypes.func.isRequired,
@@ -63,8 +66,22 @@ class Content extends 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);
}
render() {
const { loading, errorMsg, items } = this.props;
const { loading, errorMsg, items, sortBy, sortOrder } = this.props;
if (loading) {
return <Loading />;
@@ -78,18 +95,23 @@ class Content extends Component {
</div>
);
// sort
const sortByName = sortBy == 'name';
const sortByTime = sortBy == 'time';
const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
// TODO: test 'storage backend'
const showStorageBackend = storages.length > 0; // only for desktop
const desktopThead = (
<thead>
<tr>
<th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
<th width="42%">{gettext('Name')}<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a></th>
<th width="42%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
<th width="14%"><span className="sr-only">{gettext('Actions')}</span></th>
<th width={showStorageBackend ? '15%' : '20%'}>{gettext('Size')}</th>
{showStorageBackend ? <th width="10%">{gettext('Storage backend')}</th> : null}
<th width={showStorageBackend ? '15%' : '20%'}>{gettext('Last Update')}<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a></th>
<th width={showStorageBackend ? '15%' : '20%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
</tr>
</thead>
);
@@ -99,9 +121,9 @@ class Content extends Component {
<tr>
<th width="18%"><span className="sr-only">{gettext('Library Type')}</span></th>
<th width="76%">
{gettext("Sort:")} {/* TODO: 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>
{gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
{gettext("Sort:")}
<a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext("name")} {sortByName && sortIcon}</a>
<a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext("last update")} {sortByTime && sortIcon}</a>
</th>
<th width="6%"><span className="sr-only">{gettext('Actions')}</span></th>
</tr>
@@ -163,4 +185,4 @@ class Content extends Component {
Content.propTypes = propTypes;
export default Content;
export default Content;