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

Show file tags (#2509)

Browse Source
This commit is contained in:
WangJianhui666
2018-11-13 16:39:13 +08:00
committed by Daniel Pan
parent 66422e3454
commit f50fe8a2bd
24 changed files with 346 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/dialog/create-tag-dialog.js
View File

@@ -64,10 +64,12 @@ class CreateTagDialog extends React.Component {
<Modal isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{gettext('New Tag')}</ModalHeader>
<ModalBody>
<div className="tag-create">
<p>{gettext('Name')}</p>
<Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} placeholder={gettext('name')} value={this.state.tagName} onChange={this.inputNewName}/>
<div className="form-group color-chooser">
<div role="form" className="tag-create">
<div className="form-group">
<label className="form-label">{gettext('Name')}</label>
<Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} placeholder={gettext('name')} value={this.state.tagName} onChange={this.inputNewName}/>
</div>
<div className="form-group">
<label className="form-label">{gettext('Select a color')}</label>
<div className="row gutters-xs">
{colorList.map((item, index)=>{

110
frontend/src/components/dialog/edit-filetag-dialog.js Normal file
View File

@@ -0,0 +1,110 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { repoID, gettext } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import RepoTag from '../../models/repo-tag';
const propTypes = {
filePath: PropTypes.string.isRequired,
fileTagList: PropTypes.array.isRequired,
onFileTagChanged: PropTypes.func.isRequired,
toggleCancel: PropTypes.func.isRequired,
};
class EditFileTagDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
repotagList: [],
};
}
componentDidMount() {
this.getRepoTagList();
}
getRepoTagList = () => {
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,
});
});
}
getRepoTagIdList = () => {
let repoTagIdList = [];
let fileTagList = this.props.fileTagList;
fileTagList.map((fileTag) => {
repoTagIdList.push(fileTag.repo_tag_id);
});
return repoTagIdList;
}
editFileTag = (repoTag) => {
let repoTagIdList = this.getRepoTagIdList();
if (repoTagIdList.indexOf(repoTag.id) === -1) {
let id = repoTag.id;
let filePath = this.props.filePath;
seafileAPI.addFileTag(repoID, filePath, id).then(() => {
repoTagIdList = this.getRepoTagIdList();
});
} else {
let fileTag = null;
let fileTagList = this.props.fileTagList;
for(let i = 0; i < fileTagList.length; i++) {
if (fileTagList[i].repo_tag_id === repoTag.id) {
fileTag = fileTagList[i];
break;
}
}
seafileAPI.deleteFileTag(repoID, fileTag.id).then(() => {
repoTagIdList = this.getRepoTagIdList();
});
}
this.props.onFileTagChanged();
}
toggle = () => {
this.props.toggleCancel();
}
render() {
let repoTagIdList = this.getRepoTagIdList();
return (
<Modal isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{gettext('File Tags')}</ModalHeader>
<ModalBody>
{
<ul className="tag-list tag-list-container">
{this.state.repotagList.map((repoTag) => {
return (
<li key={repoTag.id} className="tag-list-item" onClick={this.editFileTag.bind(this, repoTag)}>
<div className={`tag-demo bg-${repoTag.color}`}>
<span>{repoTag.name}</span>
{repoTagIdList.indexOf(repoTag.id) > -1 &&
<i className="fas fa-check tag-operation"></i>
}
</div>
</li>
);
})}
</ul>
}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>{gettext('Close')}</Button>
</ModalFooter>
</Modal>
);
}
}
EditFileTagDialog.propTypes = propTypes;
export default EditFileTagDialog;

5
frontend/src/components/dialog/list-tag-dialog.js
View File

@@ -18,9 +18,10 @@ class TagListItem extends React.Component {
}
render() {
let color = this.props.item.color;
return(
<li className="tag-list-item">
<span className="tag-demo" style={{background: this.props.item.color}}>{this.props.item.name}</span>
<span className={`tag-demo bg-${color}`}>{this.props.item.name}</span>
<i className="tag-edit fa fa-pencil" onClick={this.onTagUpdate}></i>
</li>
);
@@ -64,7 +65,7 @@ class ListTagDialog extends React.Component {
return (
<Fragment>
<Modal isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{gettext('Tag List')}</ModalHeader>
<ModalHeader toggle={this.toggle}>{gettext('Tags')}</ModalHeader>
<ModalBody>
{
this.state.repotagList.length === 0 &&

8
frontend/src/components/dialog/update-tag-dialog.js
View File

@@ -78,9 +78,11 @@ class UpdateTagDialog extends React.Component {
<ModalHeader toggle={this.toggle}>{gettext('Edit Tag')}</ModalHeader>
<ModalBody>
<div className="tag-edit">
<p>{gettext('Name:')}</p>
<Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} placeholder="newName" value={this.state.newName} onChange={this.inputNewName}/>
<div className="form-group color-chooser">
<div className="form-group">
<label className="form-label">{gettext('Name')}</label>
<Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} placeholder="newName" value={this.state.newName} onChange={this.inputNewName}/>
</div>
<div className="form-group">
<label className="form-label">{gettext('Select a color')}</label>
<div className="row gutters-xs">
{colorList.map((item, index)=>{

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

@@ -3,16 +3,26 @@ import PropTypes from 'prop-types';
import moment from 'moment';
import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import EditFileTagDialog from '../dialog/edit-filetag-dialog';
const propTypes = {
repo: PropTypes.object.isRequired,
direntType: PropTypes.string.isRequired,
direntDetail: PropTypes.object.isRequired,
direntPath: PropTypes.string.isRequired,
fileTagList: PropTypes.array.isRequired,
onFileTagChanged: PropTypes.func.isRequired,
};
class DetailListView extends React.Component {
constructor(props) {
super(props);
this.state = {
isEditFileTagShow: false,
};
}
getDirentPostion = () => {
let { repo, direntPath } = this.props;
let position = repo.repo_name + '/';
@@ -24,8 +34,14 @@ class DetailListView extends React.Component {
return position;
}
onEditFileTagToggle = () => {
this.setState({
isEditFileTagShow: !this.state.isEditFileTagShow
});
}
render() {
let { direntType, direntDetail } = this.props;
let { direntType, direntDetail, fileTagList } = this.props;
let position = this.getDirentPostion();
if (direntType === 'dir') {
return (
@@ -51,8 +67,32 @@ class DetailListView extends React.Component {
<tr><th>{gettext('Size')}</th><td>{direntDetail.size}</td></tr>
<tr><th>{gettext('Position')}</th><td>{position}</td></tr>
<tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr>
<tr className="file-tag-container"><th>{gettext('Tags')}</th>
<td>
<ul className="file-tag-list">
{fileTagList.map((fileTag) => {
return (
<li key={fileTag.id}>
<span className={`file-tag bg-${fileTag.color}`}></span>
<span className="tag-name">{fileTag.name}</span>
</li>
);
})}
</ul>
<i className='fa fa-pencil' onClick={this.onEditFileTagToggle}></i>
</td>
</tr>
</tbody>
</table>
{
this.state.isEditFileTagShow &&
<EditFileTagDialog
fileTagList={fileTagList}
filePath={this.props.direntPath}
toggleCancel={this.onEditFileTagToggle}
onFileTagChanged={this.props.onFileTagChanged}
/>
}
</div>
);
}

13
frontend/src/components/dirent-detail/dirent-details.js
View File

@@ -4,12 +4,14 @@ import { seafileAPI } from '../../utils/seafile-api';
import { serviceUrl, repoID } from '../../utils/constants';
import DetailListView from './detail-list-view';
import Repo from '../../models/repo';
import FileTag from '../../models/file-tag';
import '../../css/dirent-detail.css';
const propTypes = {
dirent: PropTypes.object.isRequired,
direntPath: PropTypes.string.isRequired,
onItemDetailsClose: PropTypes.func.isRequired,
onFileTagChanged: PropTypes.func.isRequired,
};
class DirentDetail extends React.Component {
@@ -20,6 +22,7 @@ class DirentDetail extends React.Component {
direntType: '',
direntDetail: '',
repo: null,
fileTagList: [],
};
}
@@ -44,6 +47,14 @@ class DirentDetail extends React.Component {
direntDetail: res.data,
});
});
seafileAPI.listFileTags(repoID, direntPath).then(res => {
let fileTagList = [];
res.data.file_tags.forEach(item => {
let file_tag = new FileTag(item);
fileTagList.push(file_tag);
});
this.setState({fileTagList: fileTagList});
});
} else {
seafileAPI.getDirInfo(repoID, direntPath).then(res => {
this.setState({
@@ -75,6 +86,8 @@ class DirentDetail extends React.Component {
direntPath={this.props.direntPath}
direntType={this.state.direntType}
direntDetail={this.state.direntDetail}
fileTagList={this.state.fileTagList}
onFileTagChanged={this.props.onFileTagChanged}
/>
}
</div>

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

@@ -6,6 +6,7 @@ import URLDecorator from '../../utils/url-decorator';
import Toast from '../toast';
import DirentMenu from './dirent-menu';
import DirentRename from './dirent-rename';
import FileTag from '../../models/file-tag';
const propTypes = {
filePath: PropTypes.string.isRequired,
@@ -35,11 +36,13 @@ class DirentListItem extends React.Component {
highlight: false,
isItemMenuShow: false,
menuPosition: {top: 0, left: 0 },
fileTagList: [],
};
}
componentDidMount() {
document.addEventListener('click', this.onItemMenuHide);
this.getFileTag();
}
componentWillUnmount() {
@@ -304,6 +307,22 @@ class DirentListItem extends React.Component {
return path === '/' ? path + dirent.name : path + '/' + dirent.name;
}
getFileTag = () => {
if (this.props.dirent.type === 'file' && this.props.dirent.file_tags!== undefined) {
let FileTgas = this.props.dirent.file_tags;
let fileTagList = [];
FileTgas.forEach(item => {
let fileTag = new FileTag(item)
fileTagList.push(fileTag)
});
this.setState({fileTagList: fileTagList});
}
}
componentWillReceiveProps() {
this.getFileTag();
}
render() {
let { dirent } = this.props;
return (
@@ -327,6 +346,15 @@ class DirentListItem extends React.Component {
<span onClick={this.onItemClick}>{dirent.name}</span>
}
</td>
<td>
<div className="dirent-item tag-list tag-list-stacked ">
{ dirent.type !== 'dir' && this.state.fileTagList.map((fileTag) => {
return (
<span className={`file-tag bg-${fileTag.color}`} key={fileTag.id} title={fileTag.name}></span>
);
})}
</div>
</td>
<td className="operation">
{
this.state.isOperationShow &&

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

@@ -147,7 +147,8 @@ class DirentListView extends React.Component {
<th width="3%" className="select"><input type="checkbox" className="vam" /></th>
<th width="3%"></th>
<th width="5%"></th>
<th width="45%">{gettext('Name')}</th>
<th width="35%">{gettext('Name')}</th>
<th width="10%"></th>
<th width="20%"></th>
<th width="11%">{gettext('Size')}</th>
<th width="13%">{gettext('Last Update')}</th>

2
frontend/src/components/toolbar/path-toolbar.js
View File

@@ -57,7 +57,7 @@ class PathToolbar extends React.Component {
return (
<Fragment>
<ul className="path-toolbar">
<li className="toolbar-item"><a className="op-link sf2-icon-tag-manager" onClick={this.onListRepoTagToggle} title={gettext('Tags')} aria-label={gettext('Tags')}></a></li>
<li className="toolbar-item"><a className="op-link sf2-icon-tag" onClick={this.onListRepoTagToggle} title={gettext('Tags')} aria-label={gettext('Tags')}></a></li>
<li className="toolbar-item"><a className="op-link sf2-icon-trash" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a></li>
<li className="toolbar-item"><a className="op-link sf2-icon-history" href={historyUrl} title={gettext('History')} aria-label={gettext('History')}></a></li>
</ul>