[view shared dir] rewrote it with react (#3211)

frontend/config/webpack.config.dev.js

@@ -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'),

frontend/config/webpack.config.prod.js

@@ -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"],

frontend/src/components/dialog/share-link-zip-download-dialog.js

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

frontend/src/css/shared-dir-view.css

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

frontend/src/shared-dir-view.js

@@ -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')
+);

seahub/templates/view_shared_dir_react.html

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

seahub/views/repo.py

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