From aa1adbfb91fbf1a348e028dbee1796256ad8df7d Mon Sep 17 00:00:00 2001 From: llj Date: Mon, 14 Mar 2022 16:48:57 +0800 Subject: [PATCH] [shared dir view] file tags: fixup & improvement --- .../dialog/list-taggedfiles-dialog.js | 49 +++-- frontend/src/components/repo-info-bar.js | 26 ++- frontend/src/shared-dir-view.js | 196 ++---------------- 3 files changed, 63 insertions(+), 208 deletions(-) diff --git a/frontend/src/components/dialog/list-taggedfiles-dialog.js b/frontend/src/components/dialog/list-taggedfiles-dialog.js index 056647e170..6cce26eb56 100644 --- a/frontend/src/components/dialog/list-taggedfiles-dialog.js +++ b/frontend/src/components/dialog/list-taggedfiles-dialog.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import moment from 'moment'; @@ -12,8 +12,9 @@ const propTypes = { currentTag: PropTypes.object.isRequired, toggleCancel: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, - updateUsedRepoTags: PropTypes.func.isRequired, + updateUsedRepoTags: PropTypes.func, onFileTagChanged: PropTypes.func, + shareLinkToken: PropTypes.string }; class ListTaggedFilesDialog extends React.Component { @@ -50,8 +51,11 @@ class ListTaggedFilesDialog extends React.Component { } getTaggedFiles = () => { - let { repoID, currentTag } = this.props; - seafileAPI.listTaggedFiles(repoID, currentTag.id).then(res => { + let { repoID, currentTag, shareLinkToken } = this.props; + let request = shareLinkToken ? + seafileAPI.getShareLinkTaggedFiles(shareLinkToken, currentTag.id) : + seafileAPI.listTaggedFiles(repoID, currentTag.id); + request.then(res => { let taggedFileList = []; res.data.tagged_files !== undefined && res.data.tagged_files.forEach(file => { @@ -90,6 +94,7 @@ class ListTaggedFilesDialog extends React.Component { repoID={this.props.repoID} taggedFile={taggedFile} onDeleteTaggedFile={this.onDeleteTaggedFile} + shareLinkToken={this.props.shareLinkToken} /> ); })} @@ -112,6 +117,7 @@ const TaggedFilePropTypes = { repoID: PropTypes.string.isRequired, taggedFile: PropTypes.object, onDeleteTaggedFile: PropTypes.func.isRequired, + shareLinkToken: PropTypes.string }; class TaggedFile extends React.Component { @@ -141,23 +147,32 @@ class TaggedFile extends React.Component { } render() { - const taggedFile = this.props.taggedFile; + const { taggedFile, shareLinkToken } = this.props; let className = this.state.active ? 'action-icon sf2-icon-x3' : 'action-icon vh sf2-icon-x3'; let path = taggedFile.parent_path ? Utils.joinPath(taggedFile.parent_path, taggedFile.filename) : ''; - let href = siteRoot + 'lib/' + this.props.repoID + '/file' + Utils.encodePath(path); - return ( taggedFile.file_deleted ? + let href = shareLinkToken ? + siteRoot + 'd/' + shareLinkToken + '/files/?p=' + Utils.encodePath(path) : + siteRoot + 'lib/' + this.props.repoID + '/file' + Utils.encodePath(path); + return ( - {taggedFile.filename}{' '} - {gettext('deleted')} + {taggedFile.file_deleted ? + + {taggedFile.filename}{' '} + {gettext('deleted')} + + + : + + {taggedFile.filename} + {Utils.bytesToSize(taggedFile.size)} + {moment.unix(taggedFile.mtime).fromNow()} + + } + + {!shareLinkToken && + + } - - - : - - {taggedFile.filename} - {Utils.bytesToSize(taggedFile.size)} - {moment.unix(taggedFile.mtime).fromNow()} - ); } diff --git a/frontend/src/components/repo-info-bar.js b/frontend/src/components/repo-info-bar.js index ff19ad8b08..f721797661 100644 --- a/frontend/src/components/repo-info-bar.js +++ b/frontend/src/components/repo-info-bar.js @@ -15,8 +15,10 @@ const propTypes = { usedRepoTags: PropTypes.array.isRequired, readmeMarkdown: PropTypes.object, draftCounts: PropTypes.number, - updateUsedRepoTags: PropTypes.func.isRequired, - onFileTagChanged: PropTypes.func.isRequired, + updateUsedRepoTags: PropTypes.func, + onFileTagChanged: PropTypes.func, + className: PropTypes.string, + shareLinkToken: PropTypes.string }; class RepoInfoBar extends React.Component { @@ -57,11 +59,20 @@ class RepoInfoBar extends React.Component { } render() { - let {repoID, currentPath, usedRepoTags, readmeMarkdown} = this.props; + let { repoID, currentPath, usedRepoTags, readmeMarkdown, draftCounts, className } = this.props; + + // to be compatible with the existing code + if (readmeMarkdown === undefined) { + readmeMarkdown = null; + } + if (draftCounts === undefined) { + draftCounts = 0; + } + let href = readmeMarkdown !== null ? siteRoot + 'lib/' + repoID + '/file' + Utils.joinPath(currentPath, readmeMarkdown.name) + '?mode=edit' : ''; let filePath = readmeMarkdown !== null ? currentPath + readmeMarkdown.name : ''; return ( -
+
{usedRepoTags.length > 0 && (
    {usedRepoTags.map((usedRepoTag) => { @@ -87,15 +98,15 @@ class RepoInfoBar extends React.Component { {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) < 2) && - {readmeMarkdown.name} + {readmeMarkdown.name} } - {this.props.draftCounts > 0 && + {draftCounts > 0 && {gettext('draft')} } @@ -109,6 +120,7 @@ class RepoInfoBar extends React.Component { toggleCancel={this.onListTaggedFiles} updateUsedRepoTags={this.props.updateUsedRepoTags} onFileTagChanged={this.props.onFileTagChanged} + shareLinkToken={this.props.shareLinkToken} /> )} diff --git a/frontend/src/shared-dir-view.js b/frontend/src/shared-dir-view.js index 7152bdeb64..58f09566d9 100644 --- a/frontend/src/shared-dir-view.js +++ b/frontend/src/shared-dir-view.js @@ -1,10 +1,10 @@ import React, { Fragment } from 'react'; import MD5 from 'MD5'; import ReactDOM from 'react-dom'; -import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Dropdown, DropdownToggle, DropdownItem, UncontrolledTooltip} from 'reactstrap'; +import { Button, Dropdown, DropdownToggle, DropdownItem, UncontrolledTooltip } from 'reactstrap'; import moment from 'moment'; import Account from './components/common/account'; -import { isPro, useGoFileserver, fileServerRoot, gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, thumbnailSizeForOriginal } from './utils/constants'; +import { useGoFileserver, fileServerRoot, gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, thumbnailSizeForOriginal } from './utils/constants'; import { Utils } from './utils/utils'; import { seafileAPI } from './utils/seafile-api'; import Loading from './components/loading'; @@ -15,14 +15,11 @@ import ImageDialog from './components/dialog/image-dialog'; import FileUploader from './components/shared-link-file-uploader/file-uploader'; import SaveSharedDirDialog from './components/dialog/save-shared-dir-dialog'; import CopyMoveDirentProgressDialog from './components/dialog/copy-move-dirent-progress-dialog'; - +import RepoInfoBar from './components/repo-info-bar'; import RepoTag from './models/repo-tag'; -import FileTag from './models/file-tag'; - import './css/shared-dir-view.css'; import './css/grid-view.css'; -import './css/repo-info-bar.css'; moment.locale(window.app.config.lang); @@ -98,7 +95,7 @@ class SharedDirView extends React.Component { }); }); - this.getShareLinkRepoTags() + this.getShareLinkRepoTags(); } sortItems = (sortBy, sortOrder) => { @@ -274,7 +271,7 @@ class SharedDirView extends React.Component { this.setState({ isSaveSharedDirDialogShow: false, itemsForSave: [], - isCopyMoveProgressDialogShow: true, + isCopyMoveProgressDialogShow: true, asyncCopyMoveTaskId: res.data.task_id, asyncOperatedFilesLength: itemsForSave.length, }, () => { @@ -493,12 +490,13 @@ class SharedDirView extends React.Component { /> )} - {this.state.isRepoInfoBarShow && ( + {this.state.isRepoInfoBarShow && ( )} @@ -646,11 +644,11 @@ class Content extends React.Component { } - {gettext('Name')} {sortBy == 'name' && sortIcon} - + {gettext('Name')} {sortBy == 'name' && sortIcon} + {gettext('Size')} {sortBy == 'size' && sortIcon} - {gettext('Last Update')} {sortBy == 'time' && sortIcon} - + {gettext('Last Update')} {sortBy == 'time' && sortIcon} + {tbody} @@ -928,176 +926,6 @@ class GridItem extends React.Component { } } - -class RepoInfoBar extends React.Component { - - constructor(props) { - super(props); - this.state = { - currentTag: null, - isListTaggedFileShow: false, - }; - } - - onListTaggedFiles = (currentTag) => { - this.setState({ - currentTag: currentTag, - isListTaggedFileShow: !this.state.isListTaggedFileShow, - }); - } - - onCloseDialog = () => { - this.setState({ - isListTaggedFileShow: false - }); - } - - render() { - let {repoID, currentPath, usedRepoTags} = this.props; - // let href = readmeMarkdown !== null ? siteRoot + 'lib/' + repoID + '/file' + Utils.joinPath(currentPath, readmeMarkdown.name) + '?mode=edit' : ''; - // let filePath = readmeMarkdown !== null ? currentPath + readmeMarkdown.name : ''; - return ( -
    - {usedRepoTags.length > 0 && ( -
      - {usedRepoTags.map((usedRepoTag) => { - return ( -
    • - - {usedRepoTag.name} - -
      • - ); - })} -
    - )} - {this.state.isListTaggedFileShow && ( - - - - )} -
    - ); - } -} - - -class ListTaggedFilesDialog extends React.Component { - - constructor(props) { - super(props); - this.state = { - taggedFileList: [], - }; - } - - componentDidMount() { - this.getTaggedFiles(); - } - - getTaggedFiles = () => { - let { repoID, currentTag } = this.props; - seafileAPI.getShareLinkTaggedFiles(token, currentTag.id).then(res => { - let taggedFileList = []; - res.data.tagged_files !== undefined && - res.data.tagged_files.forEach(file => { - let taggedFile = file; - taggedFileList.push(taggedFile); - }); - this.setState({ - taggedFileList: taggedFileList, - }); - }).catch(error => { - let errMessage = Utils.getErrorMsg(error); - toaster.danger(errMessage); - }); - } - - render() { - let taggedFileList = this.state.taggedFileList; - return ( - - {gettext('Tagged Files')} - - - - - - - - - - - {taggedFileList.map((taggedFile, index) => { - return ( - - ); - })} - -
    {gettext('Name')}{gettext('Size')}{gettext('Last Update')}
    -     - - - -     - ); - } -} - -class TaggedFile extends React.Component { - - constructor(props) { - super(props); - this.state = ({ - active: false, - }); - } - - onMouseEnter = () => { - this.setState({ - active: true - }); - } - - onMouseLeave = () => { - this.setState({ - active: false - }); - } - - render() { - const taggedFile = this.props.taggedFile; - let className = this.state.active ? 'action-icon sf2-icon-x3' : 'action-icon vh sf2-icon-x3'; - let path = taggedFile.parent_path ? Utils.joinPath(taggedFile.parent_path, taggedFile.filename) : ''; - let href = siteRoot + 'd/' + token + '/files/?p=' + Utils.encodePath(path); - return ( taggedFile.file_deleted ? - - {taggedFile.filename}{' '} - {gettext('deleted')} - - - : - - {taggedFile.filename} - {Utils.bytesToSize(taggedFile.size)} - {moment.unix(taggedFile.mtime).fromNow()} - - ); - } -} - ReactDOM.render( , document.getElementById('wrapper')