Merge branch '7.0'

frontend/package-lock.json

@@ -752,9 +752,9 @@
       }
     },
     "@seafile/resumablejs": {
-      "version": "1.1.12",
+      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/@seafile/resumablejs/-/resumablejs-1.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/resumablejs/-/resumablejs-1.1.13.tgz",
-      "integrity": "sha512-IK3POb3mdqFOJwQRerzpamQf5/3LdKFFgxe81M6X/ZQwjusINZKJwTZmqawKU1EnW3ghX7d3HW0nmcIrZayfLw=="
+      "integrity": "sha512-GhLgburkCrankp8H0EWNZoQOdQ9vXvuWsD9uKj0JCNwy3kyDty7/qqpXtj6RHN7fzqF9LRoGpOMVdkS4SecPKQ=="
     },
     "@seafile/seafile-editor": {
       "version": "0.2.57",

frontend/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@reach/router": "^1.2.0",
     "@seafile/dtable": "0.0.118",
-    "@seafile/resumablejs": "^1.1.12",
+    "@seafile/resumablejs": "^1.1.13",
     "@seafile/seafile-editor": "^0.2.57",
     "MD5": "^1.3.0",
     "autoprefixer": "7.1.6",

frontend/src/components/file-uploader/file-uploader.js

@@ -203,7 +203,8 @@ class FileUploader extends React.Component {
     let { repoID, path } = this.props;
     seafileAPI.getFileUploadedBytes(repoID, path, resumableFile.fileName).then(res => {
       let uploadedBytes = res.data.uploadedBytes;
-      let offset = Math.floor(uploadedBytes / (1024 * 1024));
+      let blockSize = parseInt(resumableUploadFileBlockSize) * 1024 * 1024 || 1024 * 1024;
+      let offset = Math.floor(uploadedBytes / blockSize);
       resumableFile.markChunksCompleted(offset);
       this.resumable.upload();
     }).catch(error => {
@@ -231,7 +232,7 @@ class FileUploader extends React.Component {
       if (item.uniqueIdentifier === resumableFile.uniqueIdentifier) {
         if (uploadBitrate) {
           let lastSize = (item.size - (item.size * item.progress())) * 8;
-          let time = Math.ceil(lastSize / uploadBitrate);
+          let time = Math.floor(lastSize / uploadBitrate);
           item.remainingTime = time;
         }
       }
@@ -306,7 +307,6 @@ class FileUploader extends React.Component {
         if (item.uniqueIdentifier === resumableFile.uniqueIdentifier) {
           item.newFileName = relative_path + message.name;
           item.isSaved = true;
-          item.remainingTime = 0;
         }
         return item;
       });
@@ -329,7 +329,6 @@ class FileUploader extends React.Component {
         if (item.uniqueIdentifier === resumableFile.uniqueIdentifier) {
           item.newFileName = fileName;
           item.isSaved = true;
-          item.remainingTime = 0;
         }
         return item;
       });
@@ -352,7 +351,6 @@ class FileUploader extends React.Component {
       if (item.uniqueIdentifier === resumableFile.uniqueIdentifier) {
         item.newFileName = message.name;
         item.isSaved = true;
-        item.remainingTime = 0;
       }
       return item;
     });
@@ -393,7 +391,8 @@ class FileUploader extends React.Component {
   }
 
   onError = (message) => {
-
+    // After the error, the user can switch windows
+    Utils.registerGlobalVariable('uploader', 'totalProgress', 100);
   }
 
   onFileRetry = () => {
@@ -545,7 +544,7 @@ class FileUploader extends React.Component {
       let uploadFileList = this.state.uploadFileList.map(item => {
         if (item.uniqueIdentifier === resumableFile.uniqueIdentifier) {
           item.error = null;
-          item.retry();
+          this.retryUploadFile(item);
         }
         return item;
       });
@@ -565,8 +564,8 @@ class FileUploader extends React.Component {
     seafileAPI.getUploadLink(this.props.repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data;
       this.state.retryFileList.forEach(item => {
-        item.retry();
         item.error = false;
+        this.retryUploadFile(item);
       });
       
       let uploadFileList = this.state.uploadFileList.slice(0);
@@ -581,6 +580,39 @@ class FileUploader extends React.Component {
     });
   }
 
+  retryUploadFile = (resumableFile) => {
+    let { repoID, path } = this.props;
+    let fileName = resumableFile.fileName;
+    let isFile = resumableFile.fileName === resumableFile.relativePath;
+    if (!isFile) {
+      let relative_path = resumableFile.formData.relative_path;
+      let prefix = path === '/' ? (path + relative_path) : (path + '/' + relative_path);
+      fileName = prefix + fileName;
+    }
+    
+    resumableFile.bootstrap();
+    var firedRetry = false;
+    resumableFile.resumableObj.on('chunkingComplete', () => {
+      if(!firedRetry) {
+        console.log(path);
+        seafileAPI.getFileUploadedBytes(repoID, path, fileName).then(res => {
+          let uploadedBytes = res.data.uploadedBytes;
+          let blockSize = parseInt(resumableUploadFileBlockSize) * 1024 * 1024 || 1024 * 1024;
+          let offset = Math.floor(uploadedBytes / blockSize);
+          resumableFile.markChunksCompleted(offset);
+    
+          resumableFile.resumableObj.upload();
+    
+        }).catch(error => {
+          let errMessage = Utils.getErrorMsg(error);
+          toaster.danger(errMessage);
+        });
+      }
+      firedRetry = true;
+    });
+    
+  }
+
   replaceRepetitionFile = () => {
     let { repoID, path } = this.props;
     seafileAPI.getUpdateLink(repoID, path).then(res => {

frontend/src/components/file-uploader/upload-list-item.js

@@ -30,7 +30,7 @@ class UploadListItem extends React.Component {
     if (resumableFile.error) {
       uploadState = UPLOAD_ERROR;
     } else {
-      if (resumableFile.progress() === 1 && !resumableFile.isSaved) {
+      if (resumableFile.remainingTime === 0 && !resumableFile.isSaved) {
         uploadState = UPLOAD_ISSAVING;
       }
   
@@ -82,7 +82,7 @@ class UploadListItem extends React.Component {
           <span className="file-size">{this.formatFileSize(resumableFile.size)}</span>
         </td>
         <td className="upload-progress">
-          {this.state.uploadState === UPLOAD_UPLOADING &&
+          {(this.state.uploadState === UPLOAD_UPLOADING || this.state.uploadState === UPLOAD_ISSAVING) &&
             <Fragment>
               {resumableFile.size >= (100 * 1000 * 1000) &&
                 <Fragment>
@@ -91,8 +91,9 @@ class UploadListItem extends React.Component {
                       <div className="progress">
                         <div className="progress-bar" role="progressbar" style={{width: `${progress}%`}} aria-valuenow={progress} aria-valuemin="0" aria-valuemax="100"></div>
                       </div>
-                      {resumableFile.remainingTime === 0 && <div className="progress-text">{gettext('Preparing to upload...')}</div>}
+                      {(resumableFile.remainingTime === -1) && <div className="progress-text">{gettext('Preparing to upload...')}</div>}
-                      {resumableFile.remainingTime !== 0 && <div className="progress-text">{gettext('Remaining')}{' '}{Utils.formatTime(resumableFile.remainingTime)}</div>}
+                      {(resumableFile.remainingTime > 0) && <div className="progress-text">{gettext('Remaining')}{' '}{Utils.formatTime(resumableFile.remainingTime)}</div>}
+                      {(resumableFile.remainingTime === 0) && <div className="progress-text">{gettext('Indexing...')}</div>}
                     </div>
                   )}
                   {!resumableFile.isUploading() && (

frontend/src/models/shared-folder-info.js

@@ -11,7 +11,6 @@ class SharedFolderInfo {
       this.group_id = object.group_id;
       this.group_name = object.group_name;
     } else {
-      this.share_type = 'user'; // change personal to user;
       this.user_name = object.user_name;
       this.user_email = object.user_email;
       this.contact_email = object.contact_email;

frontend/src/pages/share-admin/folders.js

@@ -1,12 +1,15 @@
-import React, { Component } from 'react';
+import React, { Fragment, Component } from 'react';
 import { Link } from '@reach/router';
+import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
+import Loading from '../../components/loading';
 import EmptyTip from '../../components/empty-tip';
+import toaster from '../../components/toast';
 import SharePermissionEditor from '../../components/select-editor/share-permission-editor';
 import SharedFolderInfo from '../../models/shared-folder-info';
-import toaster from '../../components/toast';
+import PermSelect from '../../components/dialog/perm-select';
 
 class Content extends Component {
 
@@ -21,7 +24,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 {
@@ -36,20 +39,29 @@ class Content extends Component {
       const sortByName = sortBy == 'name';
       const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
 
+      const isDesktop = Utils.isDesktop();
       const table = (
-        <table className="table-hover">
+        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
           <thead>
-            <tr>
+            {isDesktop ? (
-              <th width="4%">{/*icon*/}</th>
+              <tr>
-              <th width="34%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
+                <th width="4%">{/*icon*/}</th>
-              <th width="30%">{gettext('Share To')}</th>
+                <th width="34%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-              <th width="24%">{gettext('Permission')}</th>
+                <th width="30%">{gettext('Share To')}</th>
-              <th width="8%"></th>
+                <th width="24%">{gettext('Permission')}</th>
-            </tr>
+                <th width="8%"></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} unshareFolder={this.props.unshareFolder}/>);
+              return (<Item key={index} isDesktop={isDesktop} item={item} />);
             })}
           </tbody>
         </table>
@@ -66,57 +78,106 @@ class Item extends Component {
     super(props);
     this.state = {
       share_permission: this.props.item.share_permission,
-      showOpIcon: false,
+      isOpIconShown: false,
+      isOpMenuOpen: false, // for mobile
+      isPermSelectDialogOpen: false, // for mobile
       unshared: false
     };
 
     this.permissions = ['rw', 'r'];
     if (isPro) {
-      this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
+      this.permissions.push('cloud-edit', 'preview');
     }
   }
 
+  toggleOpMenu = () => {
+    this.setState({
+      isOpMenuOpen: !this.state.isOpMenuOpen
+    });
+  }
+
+  togglePermSelectDialog = () => {
+    this.setState({
+      isPermSelectDialogOpen: !this.state.isPermSelectDialogOpen
+    });
+  }
+
   onMouseEnter = () => {
-    this.setState({showOpIcon: true});
+    this.setState({isOpIconShown: true});
   }
 
   onMouseLeave = () => {
-    this.setState({showOpIcon: false});
+    this.setState({isOpIconShown: false});
   }
 
   unshare = (e) => {
     e.preventDefault();
+
     const item = this.props.item;
-    this.props.unshareFolder(item);
+    let options = {
+      'p': item.path
+    };
+    if (item.share_type == 'personal') {
+      Object.assign(options, {
+        'share_type': 'user',
+        'username': item.user_email
+      });
+    } else {
+      Object.assign(options, {
+        'share_type': item.share_type, // 'group'
+        'group_id': item.group_id
+      });
+    }
+
+    seafileAPI.unshareFolder(item.repo_id, options).then((res) => {
+      this.setState({
+        unshared: true
+      });
+      let message = gettext('Successfully unshared {name}').replace('{name}', item.folder_name);
+      toaster.success(message);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster(errMessage);
+    });
   }
 
   changePerm = (permission) => {
-    const perm = permission;
-    const postData = {
-      'permission': perm
-    };
     const item = this.props.item;
-    let options = {
+    const postData = {
-      'p': item.path,
+      'permission': permission 
-      'share_type': item.share_type
     };
-    if (item.share_type == 'user') {
+    let options = {
-      options.username = item.user_email;
+      'p': item.path
+    };
+    if (item.share_type == 'personal') {
+      Object.assign(options, {
+        'share_type': 'user',
+        'username': item.user_email
+      });
     } else {
-      options.group_id = item.group_id;
+      Object.assign(options, {
+        'share_type': item.share_type, // 'group'
+        'group_id': item.group_id
+      });
     }
 
     seafileAPI.updateFolderSharePerm(item.repo_id, postData, options).then((res) => {
-      this.setState({share_permission: perm});
+      this.setState({share_permission: permission});
+      toaster.success(gettext('Successfully modified permission.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
   }
 
-  getFolderParams = () => {
+  render() {
-    let item = this.props.item;
+    if (this.state.unshared) {
-    let share_permission = this.state.share_permission;
+      return null;
+    }
+
+    const item = this.props.item;
+    let { share_permission, isOpIconShown, isPermSelectDialogOpen } = this.state;
+
     let is_readonly = false;
     if (share_permission == 'r' || share_permission == 'preview') {
       is_readonly = true;
@@ -125,43 +186,70 @@ class Item extends Component {
     let iconTitle = Utils.getFolderIconTitle({
       'permission': share_permission
     });
-    let folderUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`;
+    let folderUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}${Utils.encodePath(item.path)}`;
 
-    return { iconUrl, iconTitle, folderUrl };
+    const desktopItem = (
-  }
-
-  render() {
-    const item = this.props.item;
-    let { iconUrl, iconTitle, folderUrl } = this.getFolderParams();
-
-    let shareTo;
-    const shareType = item.share_type;
-    if (shareType == 'user') {
-      shareTo = <td title={item.contact_email}>{item.user_name}</td>;
-    } else if (shareType == 'group') {
-      shareTo = <td>{item.group_name}</td>;
-    }
-
-    let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
-    let unshareIconClassName = 'unshare action-icon sf2-icon-x3' + iconVisibility;
-
-    return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td><Link to={folderUrl}>{item.folder_name}</Link></td>
-        {shareTo}
+        <td>
+          {item.share_type == 'personal' ? 
+            <span title={item.contact_email}>{item.user_name}</span> : item.group_name}
+        </td>
         <td>
           <SharePermissionEditor 
             isTextMode={true}
-            isEditIconShow={this.state.showOpIcon}
+            isEditIconShow={isOpIconShown}
-            currentPermission={this.state.share_permission}
+            currentPermission={share_permission}
             permissions={this.permissions}
             onPermissionChanged={this.changePerm}
           />
         </td>
-        <td><a href="#" className={unshareIconClassName} title={gettext('Unshare')} onClick={this.unshare}></a></td>
+        <td><a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
       </tr>
     );
+
+    const mobileItem = (
+      <Fragment>
+        <tr>
+          <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
+          <td>
+            <Link to={folderUrl}>{item.folder_name}</Link>
+            <span className="item-meta-info-highlighted">{Utils.sharePerms(share_permission)}</span>
+            <br />
+            <span className="item-meta-info">{`${gettext('Share To:')} ${item.share_type == 'personal' ? item.user_name : item.group_name}`}</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">
+                  <DropdownItem className="mobile-menu-item" onClick={this.togglePermSelectDialog}>{gettext('Permission')}</DropdownItem>
+                  <DropdownItem className="mobile-menu-item" onClick={this.unshare}>{gettext('Unshare')}</DropdownItem>
+                </div>
+              </div>
+            </Dropdown>
+          </td>
+        </tr>
+        {isPermSelectDialogOpen &&
+        <PermSelect
+          currentPerm={share_permission}
+          permissions={this.permissions}
+          changePerm={this.changePerm}
+          toggleDialog={this.togglePermSelectDialog}
+        />
+        }
+      </Fragment>
+    );
+
+    return this.props.isDesktop ? desktopItem : mobileItem;
   }
 }
 
@@ -210,7 +298,6 @@ class ShareAdminFolders extends Component {
 
   componentDidMount() {
     seafileAPI.listSharedFolders().then((res) => {
-      // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
       let items = res.data.map(item => {
         return new SharedFolderInfo(item);
       });
@@ -232,7 +319,6 @@ class ShareAdminFolders extends Component {
             errorMsg: gettext('Error')
           });
         }
-
       } else {
         this.setState({
           loading: false,
@@ -242,36 +328,6 @@ class ShareAdminFolders extends Component {
     });
   }
 
-  unshareFolder = (item) => {
-    let options = {};
-    options['p'] = item.path;
-    options.share_type = item.share_type;
-    if (item.share_type == 'user') { // or group
-      options.username = item.user_email;
-    } else {
-      options.group_id = item.group_id;
-    }
-
-    seafileAPI.unshareFolder(item.repo_id, options).then((res) => {
-      let items = this.state.items.filter(folderItem => {
-        if (item.share_type === 'user') {
-          return folderItem.user_email !== item.user_email;
-        } else {
-          return folderItem.group_id !== item.group_id;
-        }
-      });
-      this.setState({items: items}); 
-      let message = gettext('Successfully unshared {name}').replace('{name}', item.folder_name);
-      toaster.success(message);
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      if (errMessage === gettext('Error')) {
-        errMessage = gettext('Failed to unshare {name}').replace('{name}', item.folder_name);
-      }
-      toaster(errMessage);
-    });
-  }
-
   render() {
     return (
       <div className="main-panel-center">
@@ -287,7 +343,6 @@ class ShareAdminFolders extends Component {
               sortBy={this.state.sortBy}
               sortOrder={this.state.sortOrder}
               sortItems={this.sortItems}
-              unshareFolder={this.unshareFolder}
             />
           </div>
         </div>

frontend/src/pages/share-admin/libraries.js

@@ -64,7 +64,6 @@ class Content extends Component {
                 key={index}
                 isDesktop={isDesktop}
                 item={item}
-                unshareItem={this.props.unshareItem}
               />);
             })}
           </tbody>
@@ -148,17 +147,46 @@ class Item extends Component {
 
   unshare = (e) => {
     e.preventDefault();
-    this.props.unshareItem(this.props.item);
+
+    const item = this.props.item;
+    const share_type = item.share_type;
+    let options = {
+      'share_type': share_type
+    };
+    if (share_type == 'personal') {
+      options.user = item.user_email;
+    } else if (share_type == 'group') {
+      options.group_id = item.group_id;
+    } 
+
+    seafileAPI.unshareRepo(item.repo_id, options).then((res) => {
+      this.setState({
+        unshared: true
+      });
+      let message = gettext('Successfully unshared {name}').replace('{name}', item.repo_name);
+      toaster.success(message);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster(errMessage);
+    });
   }
 
   render() {
+    if (this.state.unshared) {
+      return null;
+    }
 
+    let { share_permission, is_admin, isOpIconShown, isPermSelectDialogOpen } = this.state;
     let item = this.props.item;
+    Object.assign(item, {
+      share_permission: share_permission,
+      is_admin: is_admin
+    });
+
     let iconUrl = Utils.getLibIconUrl(item); 
     let iconTitle = Utils.getLibIconTitle(item);
     let repoUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}/`;
 
-    let { share_permission, is_admin, isOpIconShown, isPermSelectDialogOpen } = this.state;
 
     let shareTo;
     const shareType = item.share_type;
@@ -284,44 +312,6 @@ class ShareAdminLibraries extends Component {
     });
   }
 
-  unshareItem = (item) => {
-    const share_type = item.share_type;
-    let options = {
-      'share_type': share_type
-    };
-    if (share_type == 'personal') {
-      options.user = item.user_email;
-    } else if (share_type == 'group') {
-      options.group_id = item.group_id;
-    } 
-
-    seafileAPI.unshareRepo(item.repo_id, options).then((res) => {
-      let items = [];
-      if (item.share_type === 'personal') {
-        items = this.state.items.filter(repoItem => {
-          return !(repoItem.user_email === item.user_email && repoItem.repo_id === item.repo_id);
-        });
-      } else if (item.share_type === 'group') {
-        items = this.state.items.filter(repoItem => {
-          return !(repoItem.group_id === item.group_id && repoItem.repo_id === item.repo_id);
-        });
-      } else if (item.share_type === 'public') {
-        items = this.state.items.filter(repoItem => {
-          return !(repoItem.share_type === 'public' && repoItem.repo_id === item.repo_id);
-        });
-      }
-      this.setState({items: items});
-      let message = gettext('Successfully unshared {name}').replace('{name}', item.repo_name);
-      toaster.success(message);
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      if (errMessage === gettext('Error')) {
-        errMessage = gettext('Failed to unshare {name}').replace('{name}', item.repo_name);
-      }
-      toaster(errMessage);
-    });
-  }
-
   sortItems = (sortBy, sortOrder) => {
     this.setState({
       sortBy: sortBy,
@@ -345,7 +335,6 @@ class ShareAdminLibraries extends Component {
               sortBy={this.state.sortBy}
               sortOrder={this.state.sortOrder}
               sortItems={this.sortItems}
-              unshareItem={this.unshareItem}
             />
           </div>
         </div>