mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-02 07:27:04 +00:00
[view shared dir] rewrote it with react (#3211)
This commit is contained in:
llj
Daniel Pan
@@ -84,6 +84,11 @@ module.exports = {
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
paths.appSrc + "/draw/draw.js",
|
||||
],
|
||||
sharedDirView: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
paths.appSrc + "/shared-dir-view.js",
|
||||
],
|
||||
sharedFileViewMarkdown: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
|
||||
@@ -65,6 +65,7 @@ module.exports = {
|
||||
app: [require.resolve('./polyfills'), paths.appSrc + "/app.js"],
|
||||
draft: [require.resolve('./polyfills'), paths.appSrc + "/draft.js"],
|
||||
draw: [require.resolve('./polyfills'), paths.appSrc + "/draw/draw.js"],
|
||||
sharedDirView: [require.resolve('./polyfills'), paths.appSrc + "/shared-dir-view.js"],
|
||||
sharedFileViewMarkdown: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-markdown.js"],
|
||||
sharedFileViewText: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-text.js"],
|
||||
sharedFileViewImage: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-image.js"],
|
||||
|
||||
127
frontend/src/components/dialog/share-link-zip-download-dialog.js
Normal file
127
frontend/src/components/dialog/share-link-zip-download-dialog.js
Normal file
@@ -0,0 +1,127 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Modal, ModalHeader, ModalBody } from 'reactstrap';
|
||||
import { gettext, fileServerRoot } from '../../utils/constants';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import Loading from '../loading';
|
||||
|
||||
const propTypes = {
|
||||
token: PropTypes.string.isRequired,
|
||||
path: PropTypes.string.isRequired,
|
||||
toggleDialog: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
let interval;
|
||||
|
||||
class ShareLinkZipDownloadDialog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
errorMsg: '',
|
||||
zipProgress: null
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { token, path } = this.props;
|
||||
seafileAPI.getShareLinkZipTask(token, path).then((res) => {
|
||||
const zipToken = res.data['zip_token'];
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: '',
|
||||
zipToken: zipToken
|
||||
});
|
||||
this.queryZipProgress();
|
||||
interval = setInterval(this.queryZipProgress, 1000);
|
||||
}).catch((error) => {
|
||||
let errorMsg = '';
|
||||
if (error.response) {
|
||||
errorMsg = gettext('Error');
|
||||
} else {
|
||||
errorMsg = gettext('Please check the network.');
|
||||
}
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: errorMsg
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
queryZipProgress = () => {
|
||||
const zipToken = this.state.zipToken;
|
||||
seafileAPI.queryZipProgress(zipToken).then((res) => {
|
||||
const data = res.data;
|
||||
this.setState({
|
||||
zipProgress: data.total == 0 ? '100%' : (data.zipped/data.total*100).toFixed(2) + '%'
|
||||
});
|
||||
if (data['total'] == data['zipped']) {
|
||||
clearInterval(interval);
|
||||
this.props.toggleDialog();
|
||||
location.href = `${fileServerRoot}zip/${zipToken}`;
|
||||
}
|
||||
}).catch((error) => {
|
||||
clearInterval(interval);
|
||||
let errorMsg = '';
|
||||
if (error.response) {
|
||||
errorMsg = gettext('Error');
|
||||
} else {
|
||||
errorMsg = gettext('Please check the network.');
|
||||
}
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: errorMsg
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
cancelZipTask = () => {
|
||||
const zipToken = this.state.zipToken;
|
||||
seafileAPI.cancelZipTask(zipToken).then((res) => {
|
||||
// do nothing
|
||||
}).catch((error) => {
|
||||
// do nothing
|
||||
});
|
||||
}
|
||||
|
||||
toggleDialog = () => {
|
||||
const zipProgress = this.state.zipProgress;
|
||||
if (zipProgress && zipProgress != '100%') {
|
||||
clearInterval(interval);
|
||||
this.cancelZipTask();
|
||||
}
|
||||
this.props.toggleDialog();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Modal isOpen={true} centered={true} toggle={this.toggleDialog}>
|
||||
<ModalHeader toggle={this.toggleDialog}>{gettext('Download')}</ModalHeader>
|
||||
<ModalBody>
|
||||
<Content data={this.state} />
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Content extends React.Component {
|
||||
|
||||
render() {
|
||||
const {isLoading, errorMsg, zipProgress} = this.props.data;
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
if (errorMsg) {
|
||||
return <p className="error mt-4 text-center">{errorMsg}</p>;
|
||||
}
|
||||
|
||||
return <p className="mt-4 text-center">{`${gettext('Packaging...')} ${zipProgress}`}</p>;
|
||||
}
|
||||
}
|
||||
|
||||
ShareLinkZipDownloadDialog.propTypes = propTypes;
|
||||
|
||||
export default ShareLinkZipDownloadDialog;
|
||||
28
frontend/src/css/shared-dir-view.css
Normal file
28
frontend/src/css/shared-dir-view.css
Normal file
@@ -0,0 +1,28 @@
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
#wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
.top-header {
|
||||
background: #f4f4f7;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 8px 16px 4px;
|
||||
height: 53px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.shared-dir-view-main {
|
||||
width: calc(100% - 40px);
|
||||
max-width: 950px;
|
||||
padding: 15px 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.op-bar {
|
||||
padding: 9px 10px;
|
||||
background: #f2f2f2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
255
frontend/src/shared-dir-view.js
Normal file
255
frontend/src/shared-dir-view.js
Normal file
@@ -0,0 +1,255 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Button } from 'reactstrap';
|
||||
import moment from 'moment';
|
||||
import Account from './components/common/account';
|
||||
import { gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
|
||||
import { Utils } from './utils/utils';
|
||||
import { seafileAPI } from './utils/seafile-api';
|
||||
import Loading from './components/loading';
|
||||
import toaster from './components/toast';
|
||||
import ModalPortal from './components/modal-portal';
|
||||
import ShareLinkZipDownloadDialog from './components/dialog/share-link-zip-download-dialog';
|
||||
|
||||
import './css/shared-dir-view.css';
|
||||
|
||||
let loginUser = window.app.pageOptions.name;
|
||||
const { token, trafficOverLimit, dirName, sharedBy, path, canDownload } = window.shared.pageOptions;
|
||||
|
||||
const showDownloadIcon = !trafficOverLimit && canDownload;
|
||||
|
||||
class SharedDirView extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
errorMsg: '',
|
||||
items: [],
|
||||
isZipDialogOpen: false,
|
||||
zipFolderPath: ''
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (trafficOverLimit) {
|
||||
toaster.danger(gettext('File download is disabled: the share link traffic of owner is used up.'), {
|
||||
duration: 3
|
||||
});
|
||||
}
|
||||
|
||||
seafileAPI.listSharedDir(token, path).then((res) => {
|
||||
const items = res.data['dirent_list'];
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: '',
|
||||
items: items
|
||||
});
|
||||
}).catch((error) => {
|
||||
let errorMsg = '';
|
||||
if (error.response) {
|
||||
if (error.response.data && error.response.data['error_msg']) {
|
||||
errorMsg = error.response.data['error_msg'];
|
||||
} else {
|
||||
errorMsg = gettext('Error');
|
||||
}
|
||||
} else {
|
||||
errorMsg = gettext('Please check the network.');
|
||||
}
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: errorMsg
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
renderPath = () => {
|
||||
// path: '/', or '/g/'
|
||||
if (path == '/') {
|
||||
return dirName;
|
||||
}
|
||||
|
||||
let pathList = path.substr(0, path.length -1).split('/');
|
||||
return (
|
||||
<React.Fragment>
|
||||
<a href="?p=/">{dirName}</a>
|
||||
<span> / </span>
|
||||
{pathList.map((item, index) => {
|
||||
if (index > 0 && index != pathList.length - 1) {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<a href={`?p=${encodeURIComponent(pathList.slice(0, index+1).join('/'))}`}>{pathList[index]}</a>
|
||||
<span> / </span>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
)}
|
||||
{pathList[pathList.length - 1]}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
zipDownloadFolder = (folderPath) => {
|
||||
this.setState({
|
||||
isZipDialogOpen: true,
|
||||
zipFolderPath: folderPath
|
||||
});
|
||||
}
|
||||
|
||||
closeZipDialog = () => {
|
||||
this.setState({
|
||||
isZipDialogOpen: false,
|
||||
zipFolderPath: ''
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="h-100 d-flex flex-column">
|
||||
<div className="top-header d-flex justify-content-between">
|
||||
<a href={siteRoot}>
|
||||
<img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
|
||||
</a>
|
||||
{loginUser && <Account />}
|
||||
</div>
|
||||
<div className="o-auto">
|
||||
<div className="shared-dir-view-main">
|
||||
<h2 className="title">{dirName}</h2>
|
||||
<p>{gettext('Shared by: ')}{sharedBy}</p>
|
||||
<div className="d-flex justify-content-between align-items-center op-bar">
|
||||
<p className="m-0">{gettext('Current path: ')}{this.renderPath()}</p>
|
||||
{showDownloadIcon &&
|
||||
<Button color="success" onClick={this.zipDownloadFolder.bind(this, path)}>{gettext('ZIP')}</Button>
|
||||
}
|
||||
</div>
|
||||
<Content
|
||||
data={this.state}
|
||||
zipDownloadFolder={this.zipDownloadFolder}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.isZipDialogOpen &&
|
||||
<ModalPortal>
|
||||
<ShareLinkZipDownloadDialog
|
||||
token={token}
|
||||
path={this.state.zipFolderPath}
|
||||
toggleDialog={this.closeZipDialog}
|
||||
/>
|
||||
</ModalPortal>
|
||||
}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Content extends React.Component {
|
||||
render() {
|
||||
const { isLoading, errorMsg, items } = this.props.data;
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
if (errorMsg) {
|
||||
return <p className="error mt-6 text-center">{errorMsg}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<table className="table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="5%"></th>
|
||||
<th width="55%">{gettext('Name')}</th>
|
||||
<th width="14%">{gettext('Size')}</th>
|
||||
<th width="16%">{gettext('Last Update')}</th>
|
||||
<th width="10%">{gettext('Operations')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item, index) => {
|
||||
return <Item
|
||||
key={index}
|
||||
item={item}
|
||||
zipDownloadFolder={this.props.zipDownloadFolder}
|
||||
/>;
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Item extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isIconShown: false
|
||||
};
|
||||
}
|
||||
|
||||
handleMouseOver = () => {
|
||||
this.setState({isIconShown: true});
|
||||
}
|
||||
|
||||
handleMouseOut = () => {
|
||||
this.setState({isIconShown: false});
|
||||
}
|
||||
|
||||
zipDownloadFolder = (e) => {
|
||||
e.preventDefault();
|
||||
this.props.zipDownloadFolder.bind(this, this.props.item.folder_path)();
|
||||
}
|
||||
|
||||
render() {
|
||||
const item = this.props.item;
|
||||
const { isIconShown } = this.state;
|
||||
|
||||
if (item.is_dir) {
|
||||
return (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<td className="text-center"><img src={Utils.getFolderIconUrl()} alt="" width="24" /></td>
|
||||
<td>
|
||||
<a href={`?p=${encodeURIComponent(item.folder_path.substr(0, item.folder_path.length - 1))}`}>{item.folder_name}</a>
|
||||
</td>
|
||||
<td></td>
|
||||
<td>{moment(item.last_modified).format('YYYY-MM-DD')}</td>
|
||||
<td>
|
||||
{showDownloadIcon &&
|
||||
<a className={isIconShown ? '' : ' invisible'} href="#" onClick={this.zipDownloadFolder} title={gettext('Download')} aria-label={gettext('Download')}>
|
||||
<img src={`${mediaUrl}img/download.png`} alt={gettext('Download')} />
|
||||
</a>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
} else {
|
||||
const fileURL = `${siteRoot}d/${token}/files/?p=${encodeURIComponent(item.file_path)}`;
|
||||
return (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<td className="text-center"><img src={Utils.getFileIconUrl(item.file_name)} alt="" width="24" /></td>
|
||||
<td>
|
||||
<a href={fileURL}>{item.file_name}</a>
|
||||
</td>
|
||||
<td>{Utils.bytesToSize(item.size)}</td>
|
||||
<td>{moment(item.last_modified).format('YYYY-MM-DD')}</td>
|
||||
<td>
|
||||
{showDownloadIcon &&
|
||||
<a className={isIconShown ? '' : ' invisible'} href={`${fileURL}&dl=1`} title={gettext('Download')} aria-label={gettext('Download')}>
|
||||
<img src={`${mediaUrl}img/download.png`} alt={gettext('Download')} />
|
||||
</a>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<SharedDirView />,
|
||||
document.getElementById('wrapper')
|
||||
);
|
||||
23
seahub/templates/view_shared_dir_react.html
Normal file
23
seahub/templates/view_shared_dir_react.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% extends "base_for_react.html" %}
|
||||
{% load seahub_tags i18n %}
|
||||
{% load render_bundle from webpack_loader %}
|
||||
|
||||
{% block extra_style %}
|
||||
{% render_bundle 'sharedDirView' 'css' %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_script %}
|
||||
<script type="text/javascript">
|
||||
window.shared = {
|
||||
pageOptions: {
|
||||
dirName: '{{ dir_name|escapejs }}',
|
||||
sharedBy: '{{ username|email2nickname|escapejs }}',
|
||||
path: '{{ path|escapejs }}',
|
||||
token: '{{ token }}',
|
||||
trafficOverLimit: {% if traffic_over_limit %}true{% else %}false{% endif %},
|
||||
canDownload: {% if permissions.can_download %}true{% else %}false{% endif %}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% render_bundle 'sharedDirView' 'js' %}
|
||||
{% endblock %}
|
||||
@@ -275,8 +275,11 @@ def view_shared_dir(request, fileshare):
|
||||
req_image_path = posixpath.join(req_path, f.obj_name)
|
||||
src = get_share_link_thumbnail_src(token, thumbnail_size, req_image_path)
|
||||
f.encoded_thumbnail_src = urlquote(src)
|
||||
|
||||
#template = 'view_shared_dir.html'
|
||||
template = 'view_shared_dir_react.html'
|
||||
|
||||
return render(request, 'view_shared_dir.html', {
|
||||
return render(request, template, {
|
||||
'repo': repo,
|
||||
'token': token,
|
||||
'path': req_path,
|
||||
|
||||
Reference in New Issue
Block a user