haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-13 22:01:06 +00:00
Code Issues Releases Wiki Activity

[dir view] Tags: don't send the 'get tags' request when open the 'tags' popover/dialog (handled 6 cases); removed the repeated 'get tags' request after creating a new tag; improved the 'no tags' tip (#5936)

Browse Source
This commit is contained in:
llj
2024-02-02 20:52:58 +08:00
committed by GitHub
parent 631419c436
commit 23785bb28b
14 changed files with 83 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/dialog/edit-filetag-dialog.js
View File

@@ -4,7 +4,6 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import RepoTag from '../../models/repo-tag';
import CreateTagDialog from './create-tag-dialog';
import toaster from '../toast';
require('../../css/repo-tag.css');
@@ -103,6 +102,7 @@ TagItem.propTypes = TagItemPropTypes;
const TagListPropTypes = {
repoID: PropTypes.string.isRequired,
repoTags: PropTypes.array.isRequired,
filePath: PropTypes.string.isRequired,
fileTagList: PropTypes.array.isRequired,
onFileTagChanged: PropTypes.func.isRequired,
@@ -111,39 +111,15 @@ const TagListPropTypes = {
};
class TagList extends React.Component {
constructor(props) {
super(props);
this.state = {
repotagList: [],
};
}
componentDidMount() {
this.getRepoTagList();
}
getRepoTagList = () => {
let repoID = this.props.repoID;
seafileAPI.listRepoTags(repoID).then(res => {
let repotagList = [];
res.data.repo_tags.forEach(item => {
let repoTag = new RepoTag(item);
repotagList.push(repoTag);
});
this.setState({repotagList: repotagList});
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
render() {
const { repoTags } = this.props;
return (
<Fragment>
<ModalHeader toggle={this.props.toggleCancel}>{gettext('Select Tags')}</ModalHeader>
<ModalBody className="px-0">
<ul className="tag-list tag-list-container">
{this.state.repotagList.map((repoTag) => {
{repoTags.map((repoTag) => {
return (
<TagItem
key={repoTag.id}
@@ -177,6 +153,7 @@ TagList.propTypes = TagListPropTypes;
const propTypes = {
repoID: PropTypes.string.isRequired,
repoTags: PropTypes.array.isRequired,
filePath: PropTypes.string.isRequired,
fileTagList: PropTypes.array.isRequired,
toggleCancel: PropTypes.func.isRequired,
@@ -215,6 +192,7 @@ class EditFileTagDialog extends React.Component {
{this.state.isListRepoTagShow &&
<TagList
repoID={this.props.repoID}
repoTags={this.props.repoTags}
filePath={this.props.filePath}
fileTagList={this.props.fileTagList}
onFileTagChanged={this.props.onFileTagChanged}

2
frontend/src/components/dir-view-mode/dir-column-view.js
View File

@@ -64,6 +64,7 @@ const propTypes = {
onItemsMove: PropTypes.func.isRequired,
onItemsCopy: PropTypes.func.isRequired,
onItemsDelete: PropTypes.func.isRequired,
repoTags: PropTypes.array.isRequired,
onFileTagChanged: PropTypes.func,
showDirentDetail: PropTypes.func.isRequired,
fullDirentList: PropTypes.array,
@@ -226,6 +227,7 @@ class DirColumnView extends React.Component {
onItemsMove={this.props.onItemsMove}
onItemsCopy={this.props.onItemsCopy}
onItemsDelete={this.props.onItemsDelete}
repoTags={this.props.repoTags}
onFileTagChanged={this.props.onFileTagChanged}
showDirentDetail={this.props.showDirentDetail}
/>

2
frontend/src/components/dir-view-mode/dir-grid-view.js
View File

@@ -29,6 +29,7 @@ const propTypes = {
updateDirent: PropTypes.func.isRequired,
showDirentDetail: PropTypes.func.isRequired,
onAddFolder: PropTypes.func.isRequired,
repoTags: PropTypes.array.isRequired,
onFileTagChanged: PropTypes.func,
onItemRename: PropTypes.func.isRequired,
fullDirentList: PropTypes.array,
@@ -81,6 +82,7 @@ class DirGridView extends React.Component {
isDirentDetailShow={this.props.isDirentDetailShow}
onItemRename={this.props.onItemRename}
onAddFolder={this.props.onAddFolder}
repoTags={this.props.repoTags}
onFileTagChanged={this.props.onFileTagChanged}
/>
</Fragment>

2
frontend/src/components/dir-view-mode/dir-list-view.js
View File

@@ -12,6 +12,7 @@ const propTypes = {
userPerm: PropTypes.string,
enableDirPrivateShare: PropTypes.bool.isRequired,
isRepoInfoBarShow: PropTypes.bool.isRequired,
repoTags: PropTypes.array.isRequired,
usedRepoTags: PropTypes.array.isRequired,
draftCounts: PropTypes.number,
updateUsedRepoTags: PropTypes.func.isRequired,
@@ -99,6 +100,7 @@ class DirListView extends React.Component {
onItemsDelete={this.props.onItemsDelete}
onAddFile={this.props.onAddFile}
onAddFolder={this.props.onAddFolder}
repoTags={this.props.repoTags}
onFileTagChanged={this.props.onFileTagChanged}
showDirentDetail={this.props.showDirentDetail}
loadDirentList={this.props.loadDirentList}

2
frontend/src/components/dirent-grid-view/dirent-grid-view.js
View File

@@ -44,6 +44,7 @@ const propTypes = {
updateDirent: PropTypes.func.isRequired,
isDirentDetailShow: PropTypes.bool.isRequired,
onGridItemClick: PropTypes.func,
repoTags: PropTypes.array.isRequired,
onFileTagChanged: PropTypes.func,
onAddFolder: PropTypes.func.isRequired,
showDirentDetail: PropTypes.func.isRequired,
@@ -626,6 +627,7 @@ class DirentGridView extends React.Component {
fileTagList={dirent.file_tags}
filePath={direntPath}
toggleCancel={this.onEditFileTagToggle}
repoTags={this.props.repoTags}
onFileTagChanged={this.onFileTagChanged}
/>
}

3
frontend/src/components/dirent-list-view/dirent-list-item.js
View File

@@ -51,6 +51,7 @@ const propTypes = {
selectedDirentList: PropTypes.array.isRequired,
activeDirent: PropTypes.object,
getDirentItemMenuList: PropTypes.func.isRequired,
repoTags: PropTypes.array.isRequired,
onFileTagChanged: PropTypes.func,
enableDirPrivateShare: PropTypes.bool.isRequired,
showDirentDetail: PropTypes.func.isRequired,
@@ -892,6 +893,7 @@ class DirentListItem extends React.Component {
{this.state.isEditFileTagShow &&
<EditFileTagPopover
repoID={this.props.repoID}
repoTags={this.props.repoTags}
fileTagList={dirent.file_tags}
filePath={direntPath}
toggleCancel={this.onEditFileTagToggle}
@@ -905,6 +907,7 @@ class DirentListItem extends React.Component {
{this.state.isEditFileTagShow &&
<EditFileTagDialog
repoID={this.props.repoID}
repoTags={this.props.repoTags}
fileTagList={dirent.file_tags}
filePath={direntPath}
toggleCancel={this.onEditFileTagToggle}

2
frontend/src/components/dirent-list-view/dirent-list-view.js
View File

@@ -44,6 +44,7 @@ const propTypes = {
onItemsCopy: PropTypes.func.isRequired,
onItemConvert: PropTypes.func.isRequired,
onItemsDelete: PropTypes.func.isRequired,
repoTags: PropTypes.array.isRequired,
onFileTagChanged: PropTypes.func,
enableDirPrivateShare: PropTypes.bool.isRequired,
isGroupOwnedRepo: PropTypes.bool.isRequired,
@@ -671,6 +672,7 @@ class DirentListView extends React.Component {
onItemContextMenu={this.onItemContextMenu}
selectedDirentList={this.props.selectedDirentList}
activeDirent={this.state.activeDirent}
repoTags={this.props.repoTags}
onFileTagChanged={this.props.onFileTagChanged}
getDirentItemMenuList={this.getDirentItemMenuList}
showDirentDetail={this.props.showDirentDetail}

56
frontend/src/components/popover/edit-filetag-popover.js
View File

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import RepoTag from '../../models/repo-tag';
import toaster from '../toast';
import CommonAddTool from '../common/common-add-tool';
import SearchInput from '../common/search-input';
@@ -19,35 +18,15 @@ class EditFileTagPopover extends React.Component {
constructor(props) {
super(props);
this.state = {
repotagList: [],
searchVal: '',
highlightIndex: -1,
};
}
componentDidMount() {
this.getRepoTagList();
}
setHighlightIndex = (highlightIndex) => {
this.setState({ highlightIndex });
};
getRepoTagList = () => {
let repoID = this.props.repoID;
seafileAPI.listRepoTags(repoID).then(res => {
let repotagList = [];
res.data.repo_tags.forEach(item => {
let repoTag = new RepoTag(item);
repotagList.push(repoTag);
});
this.setState({repotagList: repotagList});
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
generateRandomColor = () => {
return TAG_COLORS[Math.floor(Math.random() * TAG_COLORS.length)];
};
@@ -64,7 +43,6 @@ class EditFileTagPopover extends React.Component {
searchVal: '',
highlightIndex: -1,
});
this.getRepoTagList();
}).catch((error) => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
@@ -116,13 +94,14 @@ class EditFileTagPopover extends React.Component {
};
onKeyDown = (e) => {
const { repoTags } = this.props;
if (e.keyCode === KeyCodes.ChineseInputMethod || e.keyCode === KeyCodes.LeftArrow || e.keyCode === KeyCodes.RightArrow) {
e.stopPropagation();
}
else if (e.keyCode === KeyCodes.Enter) {
const searchText = this.state.searchVal.trim();
const repotagList = this.state.repotagList.filter(item => item.name.includes(searchText));
const tag = repotagList[this.state.highlightIndex];
const repoTagList = repoTags.filter(item => item.name.includes(searchText));
const tag = repoTagList[this.state.highlightIndex];
if (tag) {
this.onEditFileTag(tag);
}
@@ -134,8 +113,8 @@ class EditFileTagPopover extends React.Component {
}
else if (e.keyCode === KeyCodes.DownArrow) {
const searchText = this.state.searchVal.trim();
const repotagList = this.state.repotagList.filter(item => item.name.includes(searchText));
if (this.state.highlightIndex < repotagList.length) {
const repoTagList = repoTags.filter(item => item.name.includes(searchText));
if (this.state.highlightIndex < repoTagList.length) {
this.setHighlightIndex(this.state.highlightIndex + 1);
}
}
@@ -148,8 +127,21 @@ class EditFileTagPopover extends React.Component {
render() {
const searchText = this.state.searchVal.trim();
const repotagList = this.state.repotagList.filter(item => item.name.includes(searchText));
const showAddTool = searchText && !this.state.repotagList.find(item => item.name === searchText);
const { repoTags: repoTagList } = this.props;
const filteredRepoTagList = repoTagList.filter(item => item.name.includes(searchText));
const showAddTool = searchText && !repoTagList.find(item => item.name === searchText);
let noTagsTip = '';
if (!searchText) {
if (repoTagList.length == 0) {
noTagsTip = gettext('No tags');
}
} else {
if (filteredRepoTagList.length == 0) {
noTagsTip = gettext('Tag not found');
}
}
return (
<SeahubPopover
popoverClassName="edit-filetag-popover"
@@ -165,11 +157,9 @@ class EditFileTagPopover extends React.Component {
onChange={this.onChangeSearch}
autoFocus={true}
/>
{noTagsTip ? <div className='tag-not-found my-4 mx-1'>{noTagsTip}</div> :
<ul className="tag-list-container">
{repotagList.length === 0 &&
<div className='tag-not-found mt-2 mb-4 mx-1'>{gettext('Tag not found')}</div>
}
{repotagList.length > 0 && repotagList.map((repoTag, index) => {
{filteredRepoTagList.map((repoTag, index) => {
return (
<TagItem
index={index}
@@ -185,6 +175,7 @@ class EditFileTagPopover extends React.Component {
);
})}
</ul>
}
{showAddTool &&
<CommonAddTool
callBack={this.createNewTag}
@@ -201,6 +192,7 @@ EditFileTagPopover.propTypes = {
repoID: PropTypes.string.isRequired,
filePath: PropTypes.string.isRequired,
fileTagList: PropTypes.array.isRequired,
repoTags: PropTypes.array.isRequired,
toggleCancel: PropTypes.func.isRequired,
onFileTagChanged: PropTypes.func.isRequired,
};

4
frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
View File

@@ -25,6 +25,7 @@ const propTypes = {
userPerm: PropTypes.string.isRequired,
repoID: PropTypes.string.isRequired,
repoEncrypted: PropTypes.bool.isRequired,
repoTags: PropTypes.array.isRequired,
selectedDirentList: PropTypes.array.isRequired,
onItemsMove: PropTypes.func.isRequired,
onItemsCopy: PropTypes.func.isRequired,
@@ -328,7 +329,7 @@ class MultipleDirOperationToolbar extends React.Component {
render() {
const { repoID, userPerm } = this.props;
const { repoID, repoTags, userPerm } = this.props;
const dirent = this.props.selectedDirentList[0];
const direntPath = this.getDirentPath(dirent);
@@ -458,6 +459,7 @@ class MultipleDirOperationToolbar extends React.Component {
<ModalPortal>
<EditFileTagDialog
repoID={repoID}
repoTags={repoTags}
filePath={direntPath}
fileTagList={this.state.fileTagList}
toggleCancel={this.toggleCancel}

2
frontend/src/components/toolbar/view-file-toolbar.js
View File

@@ -12,6 +12,7 @@ import EditFileTagDialog from '../dialog/edit-filetag-dialog';
const propTypes = {
path: PropTypes.string.isRequired,
repoID: PropTypes.string.isRequired,
repoTags: PropTypes.array.isRequired,
userPerm: PropTypes.string.isRequired,
repoEncrypted: PropTypes.bool.isRequired,
enableDirPrivateShare: PropTypes.bool.isRequired,
@@ -127,6 +128,7 @@ class ViewFileToolbar extends React.Component {
<EditFileTagDialog
filePath={this.props.path}
repoID={this.props.repoID}
repoTags={this.props.repoTags}
fileTagList={this.props.fileTags}
toggleCancel={this.onEditFileTagToggle}
onFileTagChanged={this.props.onFileTagChanged}

2
frontend/src/css/edit-filetag-popover.css
View File

@@ -15,7 +15,7 @@
padding: 10px 0;
}
.edit-filetag-popover .tag-list-container .tag-not-found {
.edit-filetag-popover .tag-not-found {
opacity: 0.5;
}

4
frontend/src/pages/lib-content-view/lib-content-container.js
View File

@@ -51,6 +51,7 @@ const propTypes = {
onAddFolderNode: PropTypes.func.isRequired,
// repo content
draftCounts: PropTypes.number,
repoTags: PropTypes.array.isRequired,
usedRepoTags: PropTypes.array.isRequired,
updateUsedRepoTags: PropTypes.func.isRequired,
// list
@@ -211,6 +212,7 @@ class LibContentContainer extends React.Component {
userPerm={this.props.userPerm}
enableDirPrivateShare={this.props.enableDirPrivateShare}
isRepoInfoBarShow={isRepoInfoBarShow}
repoTags={this.props.repoTags}
usedRepoTags={this.props.usedRepoTags}
draftCounts={this.props.draftCounts}
updateUsedRepoTags={this.props.updateUsedRepoTags}
@@ -252,6 +254,7 @@ class LibContentContainer extends React.Component {
enableDirPrivateShare={this.props.enableDirPrivateShare}
onRenameNode={this.props.onRenameNode}
isRepoInfoBarShow={isRepoInfoBarShow}
repoTags={this.props.repoTags}
usedRepoTags={this.props.usedRepoTags}
draftCounts={this.props.draftCounts}
updateUsedRepoTags={this.props.updateUsedRepoTags}
@@ -304,6 +307,7 @@ class LibContentContainer extends React.Component {
latestContributor={this.props.latestContributor}
onLinkClick={this.props.onLinkClick}
isRepoInfoBarShow={isRepoInfoBarShow}
repoTags={this.props.repoTags}
usedRepoTags={this.props.usedRepoTags}
draftCounts={this.props.draftCounts}
updateUsedRepoTags={this.props.updateUsedRepoTags}

3
frontend/src/pages/lib-content-view/lib-content-toolbar.js
View File

@@ -20,6 +20,7 @@ const propTypes = {
// mutiple-dir
isDirentSelected: PropTypes.bool.isRequired,
repoID: PropTypes.string.isRequired,
repoTags: PropTypes.array.isRequired,
path: PropTypes.string.isRequired,
selectedDirentList: PropTypes.array.isRequired,
onItemsMove: PropTypes.func.isRequired,
@@ -77,6 +78,7 @@ class LibContentToolbar extends React.Component {
fileTags={this.props.fileTags}
onFileTagChanged={this.props.onFileTagChanged}
showShareBtn={this.props.showShareBtn}
repoTags={this.props.repoTags}
/>
<ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} isCustomPermission={isCustomPermission} />
</div>
@@ -101,6 +103,7 @@ class LibContentToolbar extends React.Component {
path={this.props.path}
userPerm={this.props.userPerm}
repoEncrypted={this.props.repoEncrypted}
repoTags={this.props.repoTags}
selectedDirentList={this.props.selectedDirentList}
direntList={this.props.direntList}
onItemsMove={this.props.onItemsMove}

16
frontend/src/pages/lib-content-view/lib-content-view.js
View File

@@ -51,6 +51,7 @@ class LibContentView extends React.Component {
fileTags: [],
draftID: '',
draftCounts: 0,
repoTags: [],
usedRepoTags: [],
isTreeDataLoading: true,
treeData: treeHelper.buildTree(),
@@ -266,14 +267,19 @@ class LibContentView extends React.Component {
updateUsedRepoTags = () => {
let repoID = this.props.repoID;
seafileAPI.listRepoTags(repoID).then(res => {
let repoTags = [];
let usedRepoTags = [];
res.data.repo_tags.forEach(item => {
let usedRepoTag = new RepoTag(item);
if (usedRepoTag.fileCount > 0) {
usedRepoTags.push(usedRepoTag);
const repoTag = new RepoTag(item);
repoTags.push(repoTag);
if (repoTag.fileCount > 0) {
usedRepoTags.push(repoTag);
}
});
this.setState({usedRepoTags: usedRepoTags});
this.setState({
repoTags: repoTags,
usedRepoTags: usedRepoTags
});
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
@@ -2018,6 +2024,7 @@ class LibContentView extends React.Component {
showDirentDetail={this.showDirentDetail}
unSelectDirent={this.unSelectDirent}
onFilesTagChanged={this.onFileTagChanged}
repoTags={this.state.repoTags}
/>
</div>
<div className="main-panel-center flex-row">
@@ -2057,6 +2064,7 @@ class LibContentView extends React.Component {
onRenameNode={this.onRenameTreeNode}
onDeleteNode={this.onDeleteTreeNode}
draftCounts={this.state.draftCounts}
repoTags={this.state.repoTags}
usedRepoTags={this.state.usedRepoTags}
updateUsedRepoTags={this.updateUsedRepoTags}
isDirentListLoading={this.state.isDirentListLoading}