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

[share admin] share links: added support for mobile; bugfix & improvement (#4004)

Browse Source 
* and bugfix for 'generate share link'
This commit is contained in:
llj
2019-08-20 12:00:58 +08:00
committed by Daniel Pan
parent d15a089bc3
commit 2e1fc1110f
6 changed files with 280 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/dialog/generate-share-link.js
View File

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
import moment from 'moment';
import copy from 'copy-to-clipboard';
import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, Alert } from 'reactstrap';
import { gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax, shareLinkExpireDaysDefault, shareLinkPasswordMinLength, canSendShareLinkEmail } from '../../utils/constants';
import { isPro, gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax, shareLinkExpireDaysDefault, shareLinkPasswordMinLength, canSendShareLinkEmail } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import SharedLinkInfo from '../../models/shared-link-info';
import ShareLink from '../../models/share-link';
import toaster from '../toast';
import Loading from '../loading';
import SendLink from '../send-link';
@@ -43,7 +43,7 @@ class GenerateShareLink extends React.Component {
'can_edit': false,
'can_download': true
};
this.isOfficeFile = Utils.isOfficeFile(this.props.itemPath);
this.isOfficeFile = Utils.isEditableOfficeFile(this.props.itemPath);
}
componentDidMount() {
@@ -51,7 +51,7 @@ class GenerateShareLink extends React.Component {
let repoID = this.props.repoID;
seafileAPI.getShareLink(repoID, path).then((res) => {
if (res.data.length !== 0) {
let sharedLinkInfo = new SharedLinkInfo(res.data[0]);
let sharedLinkInfo = new ShareLink(res.data[0]);
this.setState({
isLoading: false,
sharedLinkInfo: sharedLinkInfo
@@ -133,11 +133,10 @@ class GenerateShareLink extends React.Component {
this.setState({errorInfo: ''});
let { itemPath, repoID } = this.props;
let { password, isExpireChecked, expireDays } = this.state;
let permissions = this.permissions;
permissions = JSON.stringify(permissions);
let permissions = isPro ? JSON.stringify(this.permissions) : '';
const expireDaysSent = isExpireChecked ? expireDays : '';
seafileAPI.createShareLink(repoID, itemPath, password, expireDaysSent, permissions).then((res) => {
let sharedLinkInfo = new SharedLinkInfo(res.data);
let sharedLinkInfo = new ShareLink(res.data);
this.setState({sharedLinkInfo: sharedLinkInfo});
}).catch((error) => {
let errMessage = Utils.getErrorMsg(error);
@@ -402,6 +401,8 @@ class GenerateShareLink extends React.Component {
</FormGroup>
</Fragment>
)}
{isPro && (
<Fragment>
<FormGroup check>
<Label check>
<span>{' '}{gettext('Set permission')}</span>
@@ -424,6 +425,8 @@ class GenerateShareLink extends React.Component {
</Label>
</FormGroup>
}
</Fragment>
)}
{this.state.errorInfo && <Alert color="danger" className="mt-2">{gettext(this.state.errorInfo)}</Alert>}
<Button onClick={this.generateShareLink} className="mt-2">{gettext('Generate')}</Button>
</Form>

62
frontend/src/components/dialog/share-link-permission-select.js Normal file
View File

@@ -0,0 +1,62 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalBody } from 'reactstrap';
import { Utils } from '../../utils/utils';
const propTypes = {
currentPerm: PropTypes.string.isRequired,
permissions: PropTypes.array.isRequired,
changePerm: PropTypes.func.isRequired,
toggleDialog: PropTypes.func.isRequired
};
class ShareLinkPermissionSelect extends React.Component {
constructor(props) {
super(props);
this.state = {
currentOption: this.props.currentPerm
};
}
switchOption = (e) => {
if (!e.target.checked) {
return;
}
const currentOption = e.target.value;
this.setState({
currentOption: currentOption
});
this.props.changePerm(currentOption);
this.props.toggleDialog();
}
render() {
const options = this.props.permissions;
const { currentOption } = this.state;
return (
<Modal isOpen={true} toggle={this.props.toggleDialog}>
<ModalBody>
{options.map((item, index) => {
return (
<div className="d-flex" key={index}>
<input id={`option-${index}`} className="mt-1" type="radio" name="permission" value={item} checked={currentOption == item} onChange={this.switchOption} />
<label htmlFor={`option-${index}`} className="ml-2">
{Utils.getShareLinkPermissionObject(item).text}
</label>
</div>
);
})}
</ModalBody>
</Modal>
);
}
}
ShareLinkPermissionSelect.propTypes = propTypes;
export default ShareLinkPermissionSelect;

16
frontend/src/components/select-editor/share-links-permission-editor.js → frontend/src/components/select-editor/share-link-permission-editor.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import SelectEditor from './select-editor';
const propTypes = {
@@ -11,16 +11,10 @@ const propTypes = {
onPermissionChanged: PropTypes.func.isRequired
};
class ShareLinksPermissionEditor extends React.Component {
class ShareLinkPermissionEditor extends React.Component {
translatePermission = (permission) => {
if (permission === 'Preview only') {
return gettext('Preview only');
}
if (permission === 'Preview and download') {
return gettext('Preview and download');
}
return Utils.getShareLinkPermissionObject(permission).text;
}
render() {
@@ -37,6 +31,6 @@ class ShareLinksPermissionEditor extends React.Component {
}
}
ShareLinksPermissionEditor.propTypes = propTypes;
ShareLinkPermissionEditor.propTypes = propTypes;
export default ShareLinksPermissionEditor;
export default ShareLinkPermissionEditor;

4
frontend/src/models/shared-link-info.js → frontend/src/models/share-link.js
View File

@@ -1,4 +1,4 @@
class SharedLinkInfo {
class ShareLink {
constructor(object) {
this.repo_id = object.repo_id;
@@ -18,4 +18,4 @@ class SharedLinkInfo {
}
export default SharedLinkInfo;
export default ShareLink;

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

@@ -1,15 +1,18 @@
import React, { Component, Fragment } from 'react';
import { Link } from '@reach/router';
import moment from 'moment';
import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
import copy from '@seafile/seafile-editor/dist//utils/copy-to-clipboard';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import { gettext, siteRoot, loginUrl, canGenerateUploadLink } from '../../utils/constants';
import SharedLinkInfo from '../../models/shared-link-info';
import ShareLinksPermissionEditor from '../../components/select-editor/share-links-permission-editor';
import { isPro, gettext, siteRoot, loginUrl, canGenerateUploadLink } from '../../utils/constants';
import ShareLink from '../../models/share-link';
import ShareLinkPermissionEditor from '../../components/select-editor/share-link-permission-editor';
import Loading from '../../components/loading';
import toaster from '../../components/toast';
import EmptyTip from '../../components/empty-tip';
import ShareLinkPermissionSelect from '../../components/dialog/share-link-permission-select';
class Content extends Component {
@@ -62,7 +65,7 @@ class Content extends Component {
const { loading, errorMsg, items, sortBy, sortOrder } = this.props;
if (loading) {
return <span className="loading-icon loading-tip"></span>;
return <Loading />;
} else if (errorMsg) {
return <p className="error text-center">{errorMsg}</p>;
} else {
@@ -78,23 +81,34 @@ class Content extends Component {
const sortByTime = sortBy == 'time';
const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
const isDesktop = Utils.isDesktop();
// only for some columns
const columnWidths = isPro ? ['14%', '7%', '14%'] : ['21%', '14%', '20%'];
const table = (
<React.Fragment>
<table className="table-hover">
<table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
<thead>
{isDesktop ? (
<tr>
<th width="4%">{/*icon*/}</th>
<th width="31%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
<th width="14%">{gettext('Library')}</th>
<th width="20%">{gettext('Permission')}</th>
<th width="7%">{gettext('Visits')}</th>
<th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Expiration')} {sortByTime && sortIcon}</a></th>
<th width={columnWidths[0]}>{gettext('Library')}</th>
{isPro && <th width="20%">{gettext('Permission')}</th>}
<th width={columnWidths[1]}>{gettext('Visits')}</th>
<th width={columnWidths[2]}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Expiration')} {sortByTime && sortIcon}</a></th>
<th width="10%">{/*Operations*/}</th>
</tr>
) : (
<tr>
<th width="12%"></th>
<th width="80%"></th>
<th width="8%"></th>
</tr>
)}
</thead>
<tbody>
{items.map((item, index) => {
return (<Item key={index} item={item} showModal={this.showModal} onRemoveLink={this.props.onRemoveLink}/>);
return (<Item key={index} isDesktop={isDesktop} item={item} showModal={this.showModal} onRemoveLink={this.props.onRemoveLink}/>);
})}
</tbody>
</table>
@@ -121,20 +135,76 @@ class Item extends Component {
constructor(props) {
super(props);
let item = this.props.item;
const item = this.props.item;
if (isPro) {
this.editOption = 'edit_download';
this.permissionOptions = ['preview_download', 'preview_only'];
this.updatePermissionOptions();
}
this.state = {
currentPermission: item.permissions.can_download ? 'Preview and download' : 'Preview only',
showOpIcon: false,
currentPermission: isPro ? this.getCurrentPermission() : '',
isOpIconShown: false,
isOpMenuOpen: false, // for mobile
isPermSelectDialogOpen: false // for mobile
};
this.permissionOptions = ['Preview only', 'Preview and download'];
}
updatePermissionOptions = () => {
const item = this.props.item;
let options = this.permissionOptions;
if (!Utils.isEditableOfficeFile(item.obj_name)) {
return ;
}
if (item.permissions.can_edit) {
options.push(this.editOption);
return ;
}
seafileAPI.getFileInfo(item.repo_id, item.path).then((res) => {
if (res.data.can_edit) {
options.push(this.editOption);
return ;
}
}).catch(error => {
return ;
});
}
getCurrentPermission = () => {
const options = this.permissionOptions;
const { can_edit, can_download } = this.props.item.permissions;
switch (`${can_edit} ${can_download}`) {
case 'false true':
return options[0];
case 'false false':
return options[1];
case 'true true':
return this.editOption;
}
}
toggleOpMenu = () => {
this.setState({
isOpMenuOpen: !this.state.isOpMenuOpen
});
}
togglePermSelectDialog = () => {
this.setState({
isPermSelectDialogOpen: !this.state.isPermSelectDialogOpen
});
}
handleMouseOver = () => {
this.setState({showOpIcon: true});
this.setState({isOpIconShown: true});
}
handleMouseOut = () => {
this.setState({showOpIcon: false});
this.setState({isOpIconShown: false});
}
viewLink = (e) => {
@@ -147,22 +217,6 @@ class Item extends Component {
this.props.onRemoveLink(this.props.item);
}
getLinkParams = () => {
let item = this.props.item;
let iconUrl = '';
let linkUrl = '';
if (item.is_dir) {
let path = item.path === '/' ? '/' : item.path.slice(0, item.path.length - 1);
iconUrl = Utils.getFolderIconUrl(false);
linkUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(path)}`;
} else {
iconUrl = Utils.getFileIconUrl(item.obj_name);
linkUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
}
return { iconUrl, linkUrl };
}
renderExpriedData = () => {
let item = this.props.item;
if (!item.expire_date) {
@@ -181,38 +235,36 @@ class Item extends Component {
);
}
changePerm = (changed_to_permissions) => {
changePerm = (permission) => {
const item = this.props.item;
let permissions = item.permissions;
if (changed_to_permissions === 'Preview only')
permissions.can_download = false;
else if (changed_to_permissions === 'Preview and download')
permissions.can_download = true;
seafileAPI.updateShareLink(item.token, JSON.stringify(permissions)).then(() => {
const permissionDetails = Utils.getShareLinkPermissionObject(permission).permissionDetails;
seafileAPI.updateShareLink(item.token, JSON.stringify(permissionDetails)).then(() => {
this.setState({
currentPermission: changed_to_permissions,
currentPermission: permission
});
let message = gettext("Successfully modified permission.");
let message = gettext('Successfully modified permission.');
toaster.success(message);
}).catch((error) => {
let errMessage = Utils.getErrorMsg(error);
if (errMessage === gettext('Error')) {
errMessage = gettext("Failed to modify permission.");
}
toaster.danger(errMessage);
});
}
render() {
const item = this.props.item;
let { iconUrl, linkUrl } = this.getLinkParams();
const { currentPermission, isOpIconShown, isPermSelectDialogOpen } = this.state;
let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
let linkIconClassName = 'sf2-icon-link action-icon' + iconVisibility;
let deleteIconClassName = 'sf2-icon-delete action-icon' + iconVisibility;
return (
let iconUrl, linkUrl;
if (item.is_dir) {
let path = item.path === '/' ? '/' : item.path.slice(0, item.path.length - 1);
iconUrl = Utils.getFolderIconUrl(false);
linkUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}${Utils.encodePath(path)}`;
} else {
iconUrl = Utils.getFileIconUrl(item.obj_name);
linkUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
}
const desktopItem = (
<tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
<td><img src={iconUrl} width="24" alt="" /></td>
<td>
@@ -221,24 +273,74 @@ class Item extends Component {
<a href={linkUrl} target="_blank">{item.obj_name}</a>
}
</td>
<td><Link to={`${siteRoot}library/${item.repo_id}/${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>
{isPro &&
<td>
<ShareLinksPermissionEditor
<ShareLinkPermissionEditor
isTextMode={true}
isEditIconShow={this.state.showOpIcon}
currentPermission={this.state.currentPermission}
isEditIconShow={isOpIconShown && !item.is_expired}
currentPermission={currentPermission}
permissionOptions={this.permissionOptions}
onPermissionChanged={this.changePerm}
/>
</td>
}
<td>{item.view_cnt}</td>
<td>{this.renderExpriedData()}</td>
<td>
<a href="#" className={linkIconClassName} title={gettext('View')} onClick={this.viewLink}></a>
<a href="#" className={deleteIconClassName} title={gettext('Remove')} onClick={this.removeLink}></a>
<a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('View')} onClick={this.viewLink}></a>
<a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('Remove')} onClick={this.removeLink}></a>
</td>
</tr>
);
const mobileItem = (
<Fragment>
<tr>
<td><img src={iconUrl} alt="" width="24" /></td>
<td>
{item.is_dir ?
<Link to={linkUrl}>{item.obj_name}</Link> :
<a href={linkUrl} target="_blank">{item.obj_name}</a>
}
{isPro && <span className="item-meta-info-highlighted">{Utils.getShareLinkPermissionObject(currentPermission).text}</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">{this.renderExpriedData()}<span className="small text-secondary">({gettext('Expiration')})</span></span>
</td>
<td>
<Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
<DropdownToggle
tag="i"
className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
title={gettext('More Operations')}
data-toggle="dropdown"
aria-expanded={this.state.isOpMenuOpen}
/>
<div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
<div className="mobile-operation-menu-bg-layer"></div>
<div className="mobile-operation-menu">
{(isPro && !item.is_expired) && <DropdownItem className="mobile-menu-item" onClick={this.togglePermSelectDialog}>{gettext('Permission')}</DropdownItem>}
<DropdownItem className="mobile-menu-item" onClick={this.viewLink}>{gettext('View')}</DropdownItem>
<DropdownItem className="mobile-menu-item" onClick={this.removeLink}>{gettext('Remove')}</DropdownItem>
</div>
</div>
</Dropdown>
</td>
</tr>
{isPermSelectDialogOpen &&
<ShareLinkPermissionSelect
currentPerm={currentPermission}
permissions={this.permissionOptions}
changePerm={this.changePerm}
toggleDialog={this.togglePermSelectDialog}
/>
}
</Fragment>
);
return this.props.isDesktop ? desktopItem : mobileItem;
}
}
@@ -305,9 +407,8 @@ class ShareAdminShareLinks extends Component {
componentDidMount() {
seafileAPI.listShareLinks().then((res) => {
// res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
let items = res.data.map(item => {
return new SharedLinkInfo(item);
return new ShareLink(item);
});
this.setState({
loading: false,
@@ -327,7 +428,6 @@ class ShareAdminShareLinks extends Component {
errorMsg: gettext('Error')
});
}
} else {
this.setState({
loading: false,
@@ -343,13 +443,10 @@ class ShareAdminShareLinks extends Component {
return uploadItem.token !== item.token;
});
this.setState({items: items});
let message = gettext("Successfully deleted share link.");
let message = gettext('Successfully deleted 1 item.');
toaster.success(message);
}).catch((error) => {
let errMessage = Utils.getErrorMsg(error);
if (errMessage === gettext('Error')) {
errMessage = gettext("Failed to delete share link.");
}
toaster.danger(errMessage);
});
}

36
frontend/src/utils/utils.js
View File

@@ -108,13 +108,13 @@ export const Utils = {
}
},
isOfficeFile: function(filename) {
isEditableOfficeFile: function(filename) {
// no file ext
if (filename.lastIndexOf('.') == -1) {
return false;
}
var file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
var exts = ['doc', 'ppt', 'xls', 'docx', 'pptx', 'xlsx'];
var exts = ['docx', 'pptx', 'xlsx'];
if (exts.indexOf(file_ext) != -1) {
return true;
} else {
@@ -421,6 +421,38 @@ export const Utils = {
return title;
},
getShareLinkPermissionObject: function(permission) {
switch (permission) {
case 'preview_download':
return {
value: permission,
text: gettext('Preview and download'),
permissionDetails: {
'can_edit': false,
"can_download": true
}
};
case 'preview_only':
return {
value: permission,
text: gettext('Preview only'),
permissionDetails: {
'can_edit': false,
"can_download": false
}
};
case 'edit_download':
return {
value: permission,
text: gettext('Edit on cloud and download'),
permissionDetails: {
'can_edit': true,
"can_download": true
}
};
}
},
formatSize: function(options) {
/*
* param: {bytes, precision}