mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-05 17:02:47 +00:00
[related files] removed all the related functions
This commit is contained in:
llj
@@ -1,118 +0,0 @@
|
||||
import React ,{ Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import FileChooser from '../file-chooser/file-chooser';
|
||||
import '../../css/dirent-detail.css';
|
||||
|
||||
const propTypes = {
|
||||
repoID: PropTypes.string.isRequired,
|
||||
filePath: PropTypes.string.isRequired,
|
||||
toggleCancel: PropTypes.func.isRequired,
|
||||
onRelatedFileChange: PropTypes.func.isRequired,
|
||||
dirent: PropTypes.object.isRequired,
|
||||
onClose: PropTypes.func,
|
||||
};
|
||||
|
||||
class AddRelatedFileDialog extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
repo: null,
|
||||
selectedPath: '',
|
||||
isShowFile: true,
|
||||
errMessage: '',
|
||||
};
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
this.onAddRelatedFile();
|
||||
}
|
||||
|
||||
onAddRelatedFile = () => {
|
||||
let { repo, selectedPath } = this.state;
|
||||
let oRepoID = this.props.repoID;
|
||||
let rRepoID = repo.repo_id;
|
||||
let oFilePath = this.props.filePath;
|
||||
let rFilePath = selectedPath;
|
||||
|
||||
if (oRepoID === rRepoID && oFilePath === rFilePath) {
|
||||
let message = gettext('Can not select self as a related file.');
|
||||
this.setState({errMessage: message});
|
||||
return;
|
||||
}
|
||||
|
||||
seafileAPI.addRelatedFile(oRepoID, rRepoID, oFilePath, rFilePath).then((res) => {
|
||||
this.props.onRelatedFileChange();
|
||||
this.toggle();
|
||||
}).catch((error) => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
this.setState({errMessage: errMessage});
|
||||
});
|
||||
}
|
||||
|
||||
toggle = () => {
|
||||
this.props.toggleCancel();
|
||||
}
|
||||
|
||||
onDirentItemClick = (repo, selectedPath, dirent) => {
|
||||
if (dirent.type === 'file') {
|
||||
this.setState({
|
||||
repo: repo,
|
||||
selectedPath: selectedPath,
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.setState({
|
||||
repo: null,
|
||||
selectedPath: '',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onRepoItemClick = (repo) => {
|
||||
this.setState({
|
||||
repo: null,
|
||||
selectedPath: '',
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let subtitle = gettext('Select related file for {placeholder}');
|
||||
subtitle = subtitle.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
|
||||
return (
|
||||
<div className="sf-add-related-file">
|
||||
<ModalHeader toggle={this.props.onClose}>
|
||||
<span className="tag-dialog-back fas fa-sm fa-arrow-left" onClick={this.toggle} aria-label={gettext('Back')}></span>
|
||||
{gettext('Select File')}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<div className="related-file-subtitle" dangerouslySetInnerHTML={{__html: subtitle}}></div>
|
||||
<FileChooser
|
||||
isShowFile={this.state.isShowFile}
|
||||
repoID={this.props.repoID}
|
||||
onDirentItemClick={this.onDirentItemClick}
|
||||
onRepoItemClick={this.onRepoItemClick}
|
||||
mode="current_repo_and_other_repos"
|
||||
/>
|
||||
{this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
|
||||
{ this.state.selectedPath ?
|
||||
<Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
|
||||
:
|
||||
<Button color="primary" disabled>{gettext('Submit')}</Button>
|
||||
}
|
||||
</ModalFooter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AddRelatedFileDialog.propTypes = propTypes;
|
||||
|
||||
export default AddRelatedFileDialog;
|
||||
@@ -1,159 +0,0 @@
|
||||
import React ,{ Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
|
||||
import Dirent from '../../models/dirent';
|
||||
import { gettext, siteRoot } from '../../utils/constants';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import toaster from '../toast';
|
||||
import '../../css/list-related-file-dialog.css';
|
||||
|
||||
const propTypes = {
|
||||
relatedFiles: PropTypes.array.isRequired,
|
||||
repoID: PropTypes.string.isRequired,
|
||||
filePath: PropTypes.string.isRequired,
|
||||
toggleCancel: PropTypes.func.isRequired,
|
||||
addRelatedFileToggle: PropTypes.func.isRequired,
|
||||
onRelatedFileChange: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class ListRelatedFileDialog extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = ({
|
||||
direntList: [],
|
||||
});
|
||||
}
|
||||
|
||||
onDeleteRelatedFile = (item) => {
|
||||
let filePath = this.props.filePath;
|
||||
let repoID = this.props.repoID;
|
||||
let relatedID = item.related_id;
|
||||
seafileAPI.deleteRelatedFile(repoID, filePath, relatedID).then((res) => {
|
||||
this.props.onRelatedFileChange();
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
|
||||
toggle = () => {
|
||||
this.props.toggleCancel();
|
||||
}
|
||||
|
||||
getDirentList = (relatedFiles) => {
|
||||
if (relatedFiles.length === 0) {
|
||||
this.setState({
|
||||
direntList: [],
|
||||
});
|
||||
return;
|
||||
}
|
||||
let direntList = [];
|
||||
relatedFiles.map((item) => {
|
||||
seafileAPI.getFileInfo(item.repo_id, item.path).then(res => {
|
||||
let dirent = new Dirent(res.data);
|
||||
dirent['repo_name'] = item.repo_name;
|
||||
dirent['related_id'] = item.related_id;
|
||||
dirent['link'] = siteRoot + 'lib/' + item.repo_id + '/file' + Utils.encodePath(item.path);
|
||||
direntList.push(dirent);
|
||||
});
|
||||
});
|
||||
this.setState({direntList: direntList});
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.getDirentList(this.props.relatedFiles);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.relatedFiles.length !== this.props.relatedFiles.length) {
|
||||
this.getDirentList(nextProps.relatedFiles);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<ModalHeader toggle={this.toggle}>{gettext('Related Files')}</ModalHeader>
|
||||
<ModalBody className={this.state.direntList.length > 0 ? 'list-related-file-body' : ''}>
|
||||
<Table hover size="sm" className="list-related-file-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width='40%'>{gettext('Name')}</th>
|
||||
<th width='20%'>{gettext('Library Name')}</th>
|
||||
<th width='13%'>{gettext('Size')}</th>
|
||||
<th width='20%'>{gettext('Last Update')}</th>
|
||||
<th width='5%'></th>
|
||||
<th width='2%'></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
this.state.direntList.map((relatedFile, index) => {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<RelatedFile relatedFile={relatedFile} onDeleteRelatedFile={this.onDeleteRelatedFile}/>
|
||||
</React.Fragment>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</Table>
|
||||
<a href="#" className="add-related-file-link" onClick={this.props.addRelatedFileToggle}>{gettext('Add File')}</a>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
|
||||
</ModalFooter>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ListRelatedFileDialog.propTypes = propTypes;
|
||||
|
||||
const RelatedFilePropTypes = {
|
||||
relatedFile: PropTypes.object,
|
||||
onDeleteRelatedFile: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class RelatedFile extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = ({
|
||||
active: false,
|
||||
});
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
this.setState({
|
||||
active: true
|
||||
});
|
||||
}
|
||||
|
||||
onMouseLeave = () => {
|
||||
this.setState({
|
||||
active: false
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let className = this.state.active ? 'action-icon sf2-icon-x3' : 'action-icon vh sf2-icon-x3';
|
||||
const relatedFile = this.props.relatedFile;
|
||||
return (
|
||||
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<td><a href={relatedFile.link} target='_blank'>{relatedFile.name}</a></td>
|
||||
<td>{relatedFile.repo_name}</td>
|
||||
<td>{relatedFile.size}</td>
|
||||
<td>{relatedFile.mtime_relative}</td>
|
||||
<td><i className={className} onClick={this.props.onDeleteRelatedFile.bind(this, relatedFile)}></i></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
RelatedFile.propTypes = RelatedFilePropTypes;
|
||||
|
||||
export default ListRelatedFileDialog;
|
||||
@@ -1,71 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Modal } from 'reactstrap';
|
||||
import AddRelatedFileDialog from './add-related-file-dialog';
|
||||
import ListRelatedFileDialog from './list-related-file-dialog';
|
||||
import ModalPortal from '../modal-portal';
|
||||
|
||||
const propTypes = {
|
||||
repoID: PropTypes.string.isRequired,
|
||||
filePath: PropTypes.string.isRequired,
|
||||
toggleCancel: PropTypes.func.isRequired,
|
||||
onRelatedFileChange: PropTypes.func.isRequired,
|
||||
dirent: PropTypes.object.isRequired,
|
||||
relatedFiles: PropTypes.array,
|
||||
viewMode: PropTypes.oneOf(['list_related_file','add_related_file']).isRequired,
|
||||
};
|
||||
|
||||
class RelatedFileDialogs extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
showListRelatedFileDialog: props.viewMode === 'list_related_file',
|
||||
};
|
||||
}
|
||||
|
||||
onAddRelatedFileToggle = () => {
|
||||
this.setState({
|
||||
showListRelatedFileDialog: false,
|
||||
});
|
||||
}
|
||||
|
||||
onCloseAddRelatedFileDialog = () => {
|
||||
this.setState({
|
||||
showListRelatedFileDialog: true,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ModalPortal>
|
||||
<Modal isOpen={true} toggle={this.props.toggleCancel} size='lg' style={{width:'650px'}}>
|
||||
{this.state.showListRelatedFileDialog &&
|
||||
<ListRelatedFileDialog
|
||||
filePath={this.props.filePath}
|
||||
relatedFiles={this.props.relatedFiles}
|
||||
repoID={this.props.repoID}
|
||||
toggleCancel={this.props.toggleCancel}
|
||||
addRelatedFileToggle={this.onAddRelatedFileToggle}
|
||||
onRelatedFileChange={this.props.onRelatedFileChange}
|
||||
/>
|
||||
}
|
||||
{!this.state.showListRelatedFileDialog &&
|
||||
<AddRelatedFileDialog
|
||||
filePath={this.props.filePath}
|
||||
repoID={this.props.repoID}
|
||||
toggleCancel={this.onCloseAddRelatedFileDialog}
|
||||
onRelatedFileChange={this.props.onRelatedFileChange}
|
||||
dirent={this.props.dirent}
|
||||
onClose={this.props.toggleCancel}
|
||||
/>
|
||||
}
|
||||
</Modal>
|
||||
</ModalPortal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
RelatedFileDialogs.propTypes = propTypes;
|
||||
|
||||
export default RelatedFileDialogs;
|
||||
Reference in New Issue
Block a user