From 338d90ef0b376c291edff5d52628c6d88a480640 Mon Sep 17 00:00:00 2001 From: llj Date: Thu, 15 Aug 2019 20:59:10 +0800 Subject: [PATCH 1/2] [share admin] folders: added support for mobile; bugfix & improvement (#3991) * and bugfix for 'libraries' --- frontend/src/models/shared-folder-info.js | 1 - frontend/src/pages/share-admin/folders.js | 231 ++++++++++++-------- frontend/src/pages/share-admin/libraries.js | 73 +++---- 3 files changed, 174 insertions(+), 131 deletions(-) diff --git a/frontend/src/models/shared-folder-info.js b/frontend/src/models/shared-folder-info.js index 9847eb0bab..70e4922a49 100644 --- a/frontend/src/models/shared-folder-info.js +++ b/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; diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js index 88be201bfa..939c34c2c0 100644 --- a/frontend/src/pages/share-admin/folders.js +++ b/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 ; + return ; } else if (errorMsg) { return

{errorMsg}

; } else { @@ -36,20 +39,29 @@ class Content extends Component { const sortByName = sortBy == 'name'; const sortIcon = sortOrder == 'asc' ? : ; + const isDesktop = Utils.isDesktop(); const table = ( - +
- - - - - - - + {isDesktop ? ( + + + + + + + + ) : ( + + + + + + )} {items.map((item, index) => { - return (); + return (); })}
{/*icon*/}{gettext('Name')} {sortByName && sortIcon}{gettext('Share To')}{gettext('Permission')}
{/*icon*/}{gettext('Name')} {sortByName && sortIcon}{gettext('Share To')}{gettext('Permission')}
@@ -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 = { - 'p': item.path, - 'share_type': item.share_type + const postData = { + 'permission': permission }; - if (item.share_type == 'user') { - options.username = item.user_email; + let options = { + '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 = () => { - let item = this.props.item; - let share_permission = this.state.share_permission; + render() { + if (this.state.unshared) { + 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 }; - } - - render() { - const item = this.props.item; - let { iconUrl, iconTitle, folderUrl } = this.getFolderParams(); - - let shareTo; - const shareType = item.share_type; - if (shareType == 'user') { - shareTo = {item.user_name}; - } else if (shareType == 'group') { - shareTo = {item.group_name}; - } - - let iconVisibility = this.state.showOpIcon ? '' : ' invisible'; - let unshareIconClassName = 'unshare action-icon sf2-icon-x3' + iconVisibility; - - return ( + const desktopItem = ( {iconTitle} {item.folder_name} - {shareTo} + + {item.share_type == 'personal' ? + {item.user_name} : item.group_name} + - + ); + + const mobileItem = ( + + + {iconTitle} + + {item.folder_name} + {Utils.sharePerms(share_permission)} +
+ {`${gettext('Share To:')} ${item.share_type == 'personal' ? item.user_name : item.group_name}`} + + + + +
+
+
+ {gettext('Permission')} + {gettext('Unshare')} +
+
+ + + + {isPermSelectDialogOpen && + + } + + ); + + 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 (
@@ -287,7 +343,6 @@ class ShareAdminFolders extends Component { sortBy={this.state.sortBy} sortOrder={this.state.sortOrder} sortItems={this.sortItems} - unshareFolder={this.unshareFolder} />
diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js index 4819f319f3..0a534481fd 100644 --- a/frontend/src/pages/share-admin/libraries.js +++ b/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} />); })} @@ -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} /> From d3b7904ee37651bbb84efdab736143d227b1f06f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= Date: Fri, 16 Aug 2019 17:12:47 +0800 Subject: [PATCH 2/2] improve retry method to support resumable upload file (#3993) --- frontend/package-lock.json | 6 +-- frontend/package.json | 2 +- .../components/file-uploader/file-uploader.js | 48 +++++++++++++++---- .../file-uploader/upload-list-item.js | 9 ++-- 4 files changed, 49 insertions(+), 16 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a1f2e55bb8..e8c7db701f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -118,9 +118,9 @@ } }, "@seafile/resumablejs": { - "version": "1.1.12", - "resolved": "https://registry.npmjs.org/@seafile/resumablejs/-/resumablejs-1.1.12.tgz", - "integrity": "sha512-IK3POb3mdqFOJwQRerzpamQf5/3LdKFFgxe81M6X/ZQwjusINZKJwTZmqawKU1EnW3ghX7d3HW0nmcIrZayfLw==" + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/@seafile/resumablejs/-/resumablejs-1.1.13.tgz", + "integrity": "sha512-GhLgburkCrankp8H0EWNZoQOdQ9vXvuWsD9uKj0JCNwy3kyDty7/qqpXtj6RHN7fzqF9LRoGpOMVdkS4SecPKQ==" }, "@seafile/seafile-editor": { "version": "0.2.57", diff --git a/frontend/package.json b/frontend/package.json index 4f0eaa4e7e..defd5f2620 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "@reach/router": "^1.2.0", - "@seafile/resumablejs": "^1.1.12", + "@seafile/resumablejs": "^1.1.13", "@seafile/seafile-editor": "^0.2.57", "MD5": "^1.3.0", "autoprefixer": "7.1.6", diff --git a/frontend/src/components/file-uploader/file-uploader.js b/frontend/src/components/file-uploader/file-uploader.js index f7a1cff58f..5109b6326e 100644 --- a/frontend/src/components/file-uploader/file-uploader.js +++ b/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 => { diff --git a/frontend/src/components/file-uploader/upload-list-item.js b/frontend/src/components/file-uploader/upload-list-item.js index fd5dea27be..01c4ae0794 100644 --- a/frontend/src/components/file-uploader/upload-list-item.js +++ b/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 { {this.formatFileSize(resumableFile.size)} - {this.state.uploadState === UPLOAD_UPLOADING && + {(this.state.uploadState === UPLOAD_UPLOADING || this.state.uploadState === UPLOAD_ISSAVING) && {resumableFile.size >= (100 * 1000 * 1000) && @@ -91,8 +91,9 @@ class UploadListItem extends React.Component {
- {resumableFile.remainingTime === 0 &&
{gettext('Preparing to upload...')}
} - {resumableFile.remainingTime !== 0 &&
{gettext('Remaining')}{' '}{Utils.formatTime(resumableFile.remainingTime)}
} + {(resumableFile.remainingTime === -1) &&
{gettext('Preparing to upload...')}
} + {(resumableFile.remainingTime > 0) &&
{gettext('Remaining')}{' '}{Utils.formatTime(resumableFile.remainingTime)}
} + {(resumableFile.remainingTime === 0) &&
{gettext('Indexing...')}
} )} {!resumableFile.isUploading() && (