1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-01 23:20:51 +00:00

[dir view, repo wiki mode] added 'sort' (#2754)

This commit is contained in:
llj
2019-01-04 15:06:27 +08:00
committed by Daniel Pan
parent c5c419b915
commit 6004ccb6fe
6 changed files with 107 additions and 5 deletions

View File

@@ -27,6 +27,9 @@ const propTypes = {
isDirentSelected: PropTypes.bool.isRequired,
isAllDirentSelected: PropTypes.bool.isRequired,
direntList: PropTypes.array.isRequired,
sortBy: PropTypes.string.isRequired,
sortOrder: PropTypes.string.isRequired,
sortItems: PropTypes.func.isRequired,
selectedDirentList: PropTypes.array.isRequired,
onItemClick: PropTypes.func.isRequired,
onAddFile: PropTypes.func.isRequired,
@@ -193,6 +196,9 @@ class DirPanel extends React.Component {
path={this.props.path}
repoID={this.props.repoID}
direntList={this.props.direntList}
sortBy={this.props.sortBy}
sortOrder={this.props.sortOrder}
sortItems={this.props.sortItems}
currentRepoInfo={this.props.currentRepoInfo}
isDirentListLoading={this.props.isDirentListLoading}
isAllItemSelected={this.props.isAllDirentSelected}

View File

@@ -34,6 +34,8 @@ class DirView extends React.Component {
isAllDirentSelected: false,
isDirentListLoading: true,
currentRepoInfo: null,
sortBy: 'name', // 'name' or 'time'
sortOrder: 'asc', // 'asc' or 'desc'
direntList: [],
selectedDirentList: [],
dirID: '',
@@ -148,7 +150,7 @@ class DirView extends React.Component {
this.setState({
isDirentListLoading: false,
pathExist: true,
direntList: direntList,
direntList: Utils.sortDirents(direntList, this.state.sortBy, this.state.sortOrder),
dirID: res.headers.oid,
});
}).catch(() => {
@@ -538,6 +540,14 @@ class DirView extends React.Component {
this.updateDirentList(this.state.path);
}
sortItems = (sortBy, sortOrder) => {
this.setState({
sortBy: sortBy,
sortOrder: sortOrder,
items: Utils.sortDirents(this.state.direntList, sortBy, sortOrder)
})
}
render() {
return (
<DirPanel
@@ -553,6 +563,9 @@ class DirView extends React.Component {
isDirentSelected={this.state.isDirentSelected}
isAllDirentSelected={this.state.isAllDirentSelected}
direntList={this.state.direntList}
sortBy={this.state.sortBy}
sortOrder={this.state.sortOrder}
sortItems={this.sortItems}
selectedDirentList={this.state.selectedDirentList}
onItemClick={this.onItemClick}
onAddFile={this.onAddFile}

View File

@@ -16,6 +16,9 @@ const propTypes = {
isAllItemSelected: PropTypes.bool.isRequired,
isDirentListLoading: PropTypes.bool.isRequired,
direntList: PropTypes.array.isRequired,
sortBy: PropTypes.string,
sortOrder: PropTypes.string,
sortItems: PropTypes.func,
onAddFile: PropTypes.func.isRequired,
onItemDelete: PropTypes.func.isRequired,
onAllItemSelected: PropTypes.func.isRequired,
@@ -74,8 +77,22 @@ class DirentListView extends React.Component {
this.props.onAddFile(filePath, isDraft);
}
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 { direntList } = this.props;
const { direntList, sortBy, sortOrder } = this.props;
if (this.props.isDirentListLoading) {
return (<Loading />);
@@ -102,6 +119,11 @@ class DirentListView extends React.Component {
);
}
// 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>;
return (
<table>
<thead>
@@ -111,11 +133,11 @@ class DirentListView extends React.Component {
</th>
<th width="3%">{/*icon */}</th>
<th width="5%">{/*star */}</th>
<th width="39%">{gettext('Name')}</th>
<th width="39%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
<th width="6%">{/*tag */}</th>
<th width="20%">{/*operation */}</th>
<th width="11%">{gettext('Size')}</th>
<th width="13%">{gettext('Last Update')}</th>
<th width="13%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
</tr>
</thead>
<tbody>

View File

@@ -31,6 +31,9 @@ const propTypes = {
isDirentSelected: PropTypes.bool.isRequired,
isAllDirentSelected: PropTypes.bool.isRequired,
direntList: PropTypes.array.isRequired,
sortBy: PropTypes.string.isRequired,
sortOrder: PropTypes.string.isRequired,
sortItems: PropTypes.func.isRequired,
selectedDirentList: PropTypes.array.isRequired,
updateDirent: PropTypes.func.isRequired,
onSideNavMenuClick: PropTypes.func.isRequired,
@@ -265,6 +268,9 @@ class MainPanel extends Component {
path={this.props.path}
repoID={repoID}
direntList={this.props.direntList}
sortBy={this.props.sortBy}
sortOrder={this.props.sortOrder}
sortItems={this.props.sortItems}
onItemClick={this.onItemClick}
onItemDelete={this.props.onItemDelete}
onItemRename={this.props.onItemRename}

View File

@@ -35,6 +35,8 @@ class Wiki extends Component {
currentNode: null,
isDirentListLoading: true,
isViewFile: false,
sortBy: 'name', // 'name' or 'time'
sortOrder: 'asc', // 'asc' or 'desc'
direntList: [],
isFileLoading: true,
content: '',
@@ -318,7 +320,7 @@ class Wiki extends Component {
direntList.push(dirent);
});
this.setState({
direntList: direntList,
direntList: Utils.sortDirents(direntList, this.state.sortBy, this.state.sortOrder),
isDirentListLoading: false,
dirID: res.headers.oid,
});
@@ -865,6 +867,14 @@ class Wiki extends Component {
window.location.href = siteRoot + 'lib/' + repoID + '/file' + this.state.draftFilePath + '?mode=edit';
}
sortItems = (sortBy, sortOrder) => {
this.setState({
sortBy: sortBy,
sortOrder: sortOrder,
items: Utils.sortDirents(this.state.direntList, sortBy, sortOrder)
})
}
render() {
let { libNeedDecrypt } = this.state;
if (libNeedDecrypt) {
@@ -903,6 +913,9 @@ class Wiki extends Component {
lastModified={this.state.lastModified}
latestContributor={this.state.latestContributor}
direntList={this.state.direntList}
sortBy={this.state.sortBy}
sortOrder={this.state.sortOrder}
sortItems={this.sortItems}
selectedDirentList={this.state.selectedDirentList}
updateDirent={this.updateDirent}
onSideNavMenuClick={this.onSideNavMenuClick}

View File

@@ -479,5 +479,47 @@ export const Utils = {
repos.sort(comparator);
return repos;
},
sortDirents: function(items, sortBy, sortOrder) {
const _this = this;
let comparator;
switch (`${sortBy}-${sortOrder}`) {
case 'name-asc':
comparator = function(a, b) {
var result = _this.compareTwoWord(a.name, b.name);
return result;
};
break;
case 'name-desc':
comparator = function(a, b) {
var result = _this.compareTwoWord(a.name, b.name);
return -result;
};
break;
case 'time-asc':
comparator = function(a, b) {
return a.mtime < b.mtime ? -1 : 1;
};
break;
case 'time-desc':
comparator = function(a, b) {
return a.mtime < b.mtime ? 1 : -1;
};
break;
}
items.sort((a, b) => {
if (a.type == 'dir' && b.type == 'file') {
return -1;
} else if (a.type == 'file' && b.type == 'dir') {
return 1;
} else {
return comparator(a, b);
}
});
return items;
}
};