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

[share admin - links] mobile: modified display of some info; added 'sort' (#5263)

Browse Source
This commit is contained in:
llj
2022-10-22 10:38:47 +08:00
committed by GitHub
parent 9e3c3bc5ef
commit 90c0d5dbec
3 changed files with 69 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/dialog/sort-options.js
View File

@@ -7,6 +7,7 @@ const propTypes = {
toggleDialog: PropTypes.func.isRequired, toggleDialog: PropTypes.func.isRequired,
sortBy: PropTypes.string.isRequired, sortBy: PropTypes.string.isRequired,
sortOrder: PropTypes.string.isRequired, sortOrder: PropTypes.string.isRequired,
sortOptions: PropTypes.array,
sortItems: PropTypes.func.isRequired sortItems: PropTypes.func.isRequired
}; };
@@ -14,7 +15,7 @@ class SortOptions extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.sortOptions = [ this.sortOptions = this.props.sortOptions || [
{value: 'name-asc', text: gettext('By name ascending')}, {value: 'name-asc', text: gettext('By name ascending')},
{value: 'name-desc', text: gettext('By name descending')}, {value: 'name-desc', text: gettext('By name descending')},
{value: 'size-asc', text: gettext('By size ascending')}, {value: 'size-asc', text: gettext('By size ascending')},

92
frontend/src/pages/share-admin/share-links.js
View File

@@ -1,4 +1,5 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { Link } from '@reach/router'; import { Link } from '@reach/router';
import moment from 'moment'; import moment from 'moment';
import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap'; import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
@@ -12,6 +13,7 @@ import toaster from '../../components/toast';
import EmptyTip from '../../components/empty-tip'; import EmptyTip from '../../components/empty-tip';
import ShareLinkPermissionSelect from '../../components/dialog/share-link-permission-select'; import ShareLinkPermissionSelect from '../../components/dialog/share-link-permission-select';
import ShareAdminLink from '../../components/dialog/share-admin-link'; import ShareAdminLink from '../../components/dialog/share-admin-link';
import SortOptionsDialog from '../../components/dialog/sort-options';
class Content extends Component { class Content extends Component {
@@ -86,6 +88,12 @@ class Content extends Component {
} }
} }
const itemPropTypes = {
item: PropTypes.object.isRequired,
isDesktop: PropTypes.bool.isRequired,
onRemoveLink: PropTypes.func.isRequired
};
class Item extends Component { class Item extends Component {
constructor(props) { constructor(props) {
@@ -200,7 +208,7 @@ class Item extends Component {
<td> <td>
{item.is_dir ? {item.is_dir ?
<Link to={objUrl}>{item.obj_name}</Link> : <Link to={objUrl}>{item.obj_name}</Link> :
<a href={objUrl} target="_blank">{item.obj_name}</a> <a href={objUrl} target="_blank" rel="noreferrer">{item.obj_name}</a>
} }
</td> </td>
<td><Link to={`${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}/`}>{item.repo_name}</Link></td> <td><Link to={`${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}/`}>{item.repo_name}</Link></td>
@@ -231,13 +239,13 @@ class Item extends Component {
<td> <td>
{item.is_dir ? {item.is_dir ?
<Link to={objUrl}>{item.obj_name}</Link> : <Link to={objUrl}>{item.obj_name}</Link> :
<a href={objUrl} target="_blank">{item.obj_name}</a> <a href={objUrl} target="_blank" rel="noreferrer">{item.obj_name}</a>
} }
{isPro && <span className="item-meta-info-highlighted">{Utils.getShareLinkPermissionObject(currentPermission).text}</span>} {isPro && <span className="item-meta-info-highlighted">{Utils.getShareLinkPermissionObject(currentPermission).text}</span>}
<br /> <br />
<span>{item.repo_name}</span><br /> <span>{item.repo_name}</span><br />
<span className="item-meta-info">{item.view_cnt}<span className="small text-secondary">({gettext('Visits')})</span></span> <span className="item-meta-info">{gettext('Visits')}: {item.view_cnt}</span>
<span className="item-meta-info">{this.renderExpiration()}<span className="small text-secondary">({gettext('Expiration')})</span></span> <span className="item-meta-info">{gettext('Expiration')}: {this.renderExpiration()}</span>
</td> </td>
<td> <td>
<Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}> <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
@@ -284,6 +292,8 @@ class Item extends Component {
} }
} }
Item.propTypes = itemPropTypes;
class ShareAdminShareLinks extends Component { class ShareAdminShareLinks extends Component {
constructor(props) { constructor(props) {
@@ -295,6 +305,14 @@ class ShareAdminShareLinks extends Component {
sortBy: 'name', // 'name' or 'time' sortBy: 'name', // 'name' or 'time'
sortOrder: 'asc' // 'asc' or 'desc' sortOrder: 'asc' // 'asc' or 'desc'
}; };
// for mobile
this.sortOptions = [
{value: 'name-asc', text: gettext('By name ascending')},
{value: 'name-desc', text: gettext('By name descending')},
{value: 'time-asc', text: gettext('By expiration ascending')},
{value: 'time-desc', text: gettext('By expiration descending')}
];
} }
_sortItems = (items, sortBy, sortOrder) => { _sortItems = (items, sortBy, sortOrder) => {
@@ -323,6 +341,8 @@ class ShareAdminShareLinks extends Component {
return a.expire_date < b.expire_date ? 1 : -1; return a.expire_date < b.expire_date ? 1 : -1;
}; };
break; break;
// no default
} }
items.sort((a, b) => { items.sort((a, b) => {
@@ -376,33 +396,51 @@ class ShareAdminShareLinks extends Component {
}); });
} }
toggleSortOptionsDialog = () => {
this.setState({
isSortOptionsDialogOpen: !this.state.isSortOptionsDialogOpen
});
}
render() { render() {
return ( return (
<div className="main-panel-center"> <Fragment>
<div className="cur-view-container"> <div className="main-panel-center">
<div className="cur-view-path share-upload-nav"> <div className="cur-view-container">
<ul className="nav"> <div className="cur-view-path share-upload-nav">
<li className="nav-item"> <ul className="nav">
<Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">{gettext('Share Links')}</Link> <li className="nav-item">
</li> <Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">{gettext('Share Links')}</Link>
{canGenerateUploadLink && ( </li>
<li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li> {canGenerateUploadLink && (
)} <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li>
</ul> )}
</div> </ul>
<div className="cur-view-content"> {(!Utils.isDesktop() && this.state.items.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
<Content </div>
loading={this.state.loading} <div className="cur-view-content">
errorMsg={this.state.errorMsg} <Content
items={this.state.items} loading={this.state.loading}
sortBy={this.state.sortBy} errorMsg={this.state.errorMsg}
sortOrder={this.state.sortOrder} items={this.state.items}
sortItems={this.sortItems} sortBy={this.state.sortBy}
onRemoveLink={this.onRemoveLink} sortOrder={this.state.sortOrder}
/> sortItems={this.sortItems}
onRemoveLink={this.onRemoveLink}
/>
</div>
</div> </div>
</div> </div>
</div> {this.state.isSortOptionsDialogOpen &&
<SortOptionsDialog
toggleDialog={this.toggleSortOptionsDialog}
sortBy={this.state.sortBy}
sortOrder={this.state.sortOrder}
sortOptions={this.sortOptions}
sortItems={this.sortItems}
/>
}
</Fragment>
); );
} }
} }

4
frontend/src/pages/share-admin/upload-links.js
View File

@@ -143,8 +143,8 @@ class Item extends Component {
<Link to={objUrl}>{item.obj_name}</Link> <Link to={objUrl}>{item.obj_name}</Link>
<br /> <br />
<span>{item.repo_name}</span><br /> <span>{item.repo_name}</span><br />
<span className="item-meta-info">{item.view_cnt}<span className="small text-secondary">({gettext('Visits')})</span></span> <span className="item-meta-info">{gettext('Visits')}: {item.view_cnt}</span>
<span className="item-meta-info">{this.renderExpiration()}<span className="small text-secondary">({gettext('Expiration')})</span></span> <span className="item-meta-info">{gettext('Expiration')}: {this.renderExpiration()}</span>
</td> </td>
<td> <td>
<Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}> <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>