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:
@@ -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}
|
||||
|
@@ -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}
|
||||
|
@@ -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>
|
||||
|
@@ -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}
|
||||
|
@@ -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}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
};
|
||||
|
Reference in New Issue
Block a user