diff --git a/frontend/src/components/dir-view-mode/dir-grid-view.js b/frontend/src/components/dir-view-mode/dir-grid-view.js index 75010029b5..617da702a9 100644 --- a/frontend/src/components/dir-view-mode/dir-grid-view.js +++ b/frontend/src/components/dir-view-mode/dir-grid-view.js @@ -79,6 +79,7 @@ class DirGridView extends React.Component { isDirentDetailShow={this.props.isDirentDetailShow} onItemRename={this.props.onItemRename} onAddFolder={this.props.onAddFolder} + onFileTagChanged={this.props.onFileTagChanged} /> ); diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-item.js b/frontend/src/components/dirent-grid-view/dirent-grid-item.js index af012282bc..d59a704d47 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-item.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-item.js @@ -1,5 +1,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; +import MD5 from 'MD5'; +import { UncontrolledTooltip } from 'reactstrap'; import { gettext, siteRoot, mediaUrl } from '../../utils/constants'; import { Utils } from '../../utils/utils'; @@ -136,6 +138,14 @@ class DirentGridItem extends React.Component { let iconUrl = Utils.getDirentIcon(dirent, true); let fileUrl = dirent.encoded_thumbnail_src ? this.getFileUrl(dirent.encoded_thumbnail_src) : ''; + let toolTipID = MD5(dirent.name).slice(0, 7); + let tagTitle = ''; + if (dirent.file_tags && dirent.file_tags.length > 0) { + dirent.file_tags.forEach(item => { + tagTitle += item.name + ' '; + }); + } + let dirHref = ''; if (this.props.currentRepoInfo) { dirHref = siteRoot + 'library/' + this.props.repoID + '/' + this.props.currentRepoInfo.repo_name + Utils.encodePath(direntPath); @@ -169,6 +179,21 @@ class DirentGridItem extends React.Component { {dirent.is_locked && {gettext('locked')}}
+ {(dirent.type !== 'dir' && dirent.file_tags) && ( + +
+ {dirent.file_tags.map((fileTag, index) => { + let length = dirent.file_tags.length; + return ( + + ); + })} +
+ + {tagTitle} + + + )} {dirent.name}
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index 417416906e..f9be35fd7c 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js @@ -15,6 +15,7 @@ import MoveDirentDialog from '../dialog/move-dirent-dialog'; import CopyDirentDialog from '../dialog/copy-dirent-dialog'; import ShareDialog from '../dialog/share-dialog'; import ZipDownloadDialog from '../dialog/zip-download-dialog'; +import EditFileTagDialog from '../dialog/edit-filetag-dialog'; import Rename from '../../components/dialog/rename-grid-item-dialog'; import CreateFile from '../dialog/create-file-dialog'; import CreateFolder from '../dialog/create-folder-dialog'; @@ -40,6 +41,7 @@ const propTypes = { updateDirent: PropTypes.func.isRequired, isDirentDetailShow: PropTypes.bool.isRequired, onGridItemClick: PropTypes.func, + onFileTagChanged: PropTypes.func, onAddFolder: PropTypes.func.isRequired, showDirentDetail: PropTypes.func.isRequired, onItemRename: PropTypes.func.isRequired, @@ -48,7 +50,7 @@ const propTypes = { class DirentGridView extends React.Component{ constructor(props) { super(props); - this.state= { + this.state = { isImagePopupOpen: false, imageItems: [], imageIndex: 0, @@ -56,6 +58,7 @@ class DirentGridView extends React.Component{ isShareDialogShow: false, isMoveDialogShow: false, isCopyDialogShow: false, + isEditFileTagShow: false, isZipDialogOpen: false, isRenameDialogShow: false, isCreateFolderDialogShow: false, @@ -133,6 +136,9 @@ class DirentGridView extends React.Component{ case 'Copy': this.onItemCopyToggle(); break; + case 'Tags': + this.onEditFileTagToggle(); + break; case 'Permission': this.onPermissionItem(); break; @@ -165,6 +171,18 @@ class DirentGridView extends React.Component{ } } + onEditFileTagToggle = () => { + this.setState({ + isEditFileTagShow: !this.state.isEditFileTagShow + }); + } + + onFileTagChanged = () => { + let dirent = this.state.activeDirent ? this.state.activeDirent : ''; + let direntPath = Utils.joinPath(this.props.path, dirent.name); + this.props.onFileTagChanged(dirent, direntPath); + } + getDirentPath = (dirent) => { let path = this.props.path; return path === '/' ? path + dirent.name : path + '/' + dirent.name; @@ -437,7 +455,7 @@ class DirentGridView extends React.Component{ contextmenuList = contextmenuList.length > 0 ? [...contextmenuList, 'Divider'] : []; } - let { RENAME, MOVE, COPY, PERMISSION, OPEN_VIA_CLIENT, LOCK, UNLOCK, COMMENT, HISTORY, ACCESS_LOG } = TextTranslation; + let { RENAME, MOVE, COPY, PERMISSION, OPEN_VIA_CLIENT, LOCK, UNLOCK, COMMENT, HISTORY, ACCESS_LOG, TAGS } = TextTranslation; if (type === 'dir' && permission === 'rw') { if (can_set_folder_perm) { menuList = [...contextmenuList, RENAME, MOVE, COPY, 'Divider', PERMISSION, 'Divider', OPEN_VIA_CLIENT]; @@ -460,6 +478,7 @@ class DirentGridView extends React.Component{ menuList.push(MOVE); } menuList.push(COPY); + menuList.push(TAGS); if (isPro) { if (dirent.is_locked) { if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && permission === 'rw')) { @@ -590,6 +609,15 @@ class DirentGridView extends React.Component{ dirent={this.state.activeDirent} /> } + {this.state.isEditFileTagShow && + + } {this.state.isShareDialogShow &&