haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-07 18:03:48 +00:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
llj
2019-01-02 10:53:38 +08:00
committed by Daniel Pan
parent 169a11615b
commit d3fb676cb7
3 changed files with 66 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
View File

@@ -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")}
<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a>
</th>
<th width="40%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</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")}
<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a>
</th>
<th width={'14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</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("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="14%"><span className="sr-only">{gettext("Actions")}</span></th>
</tr>

16
frontend/src/pages/groups/group-view.js
View File

@@ -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}

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

@@ -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}
/>