haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-09 02:42:47 +00:00
Code Issues Releases Wiki Activity

add delete&create&transfer method

Browse Source
This commit is contained in:
shanshuirenjia
2018-12-12 15:34:54 +08:00
parent e01ed3c836
commit 6080fe39e3
6 changed files with 161 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,41 +1,42 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import moment from 'moment';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { siteRoot, gettext } from '../../utils/constants'; import { siteRoot, gettext } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import DetailListView from './detail-list-view';
import Repo from '../../models/repo';
import FileTag from '../../models/file-tag';
import '../../css/dirent-detail.css'; import '../../css/dirent-detail.css';
import { seafileAPI } from '../../utils/seafile-api';
const propTypes = {
currentRepo: PropTypes.object.isRequired
};
class LibDetail extends React.Component { class LibDetail extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
fileCount: '', fileCount: 0,
libName: '',
isLoading: true,
}; };
} }
componentDidMount() { componentDidMount() {
seafileAPI.getRepoInfo(this.props.libID).then(res => { let repo = this.props.currentRepo;
seafileAPI.getRepoInfo(repo.repo_id).then(res => {
this.setState({ this.setState({
fileCount: res.data.file_count, fileCount: res.data.file_count,
libName: res.data.repo_name
}); });
}); });
} }
render() { render() {
let repo = this.props.currentRepo;
return ( return (
<div className="detail-container"> <div className="detail-container">
<div className="detail-header"> <div className="detail-header">
<div className="detail-control sf2-icon-x1" onClick={this.props.closeDetails}></div> <div className="detail-control sf2-icon-x1" onClick={this.props.closeDetails}></div>
<div className="detail-title dirent-title"> <div className="detail-title dirent-title">
<img src={siteRoot + 'media/img/lib/256/lib.png'} alt="icon"></img>{' '} <img src={siteRoot + 'media/img/lib/256/lib.png'} alt="icon"></img>{' '}
<span className="name">{this.state.libName}</span> <span className="name">{repo.repo_name}</span>
</div> </div>
</div> </div>
<div className="detail-body dirent-info"> <div className="detail-body dirent-info">
@@ -47,8 +48,8 @@ class LibDetail extends React.Component {
<tbody> <tbody>
<tr><th width="35%"></th><td width="65%"></td></tr> <tr><th width="35%"></th><td width="65%"></td></tr>
<tr><th>{gettext('Files')}</th><td>{this.state.fileCount}</td></tr> <tr><th>{gettext('Files')}</th><td>{this.state.fileCount}</td></tr>
<tr><th>{gettext('Size')}</th><td>{this.props.libSize}</td></tr> <tr><th>{gettext('Size')}</th><td>{Utils.bytesToSize(repo.size)}</td></tr>
<tr><th>{gettext('Last Update')}</th><td>{this.props.libUpdateTime}</td></tr> <tr><th>{gettext('Last Update')}</th><td>{ moment(repo.last_modified).fromNow()}</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@@ -58,5 +59,6 @@ class LibDetail extends React.Component {
} }
} }
LibDetail.propTypes = propTypes;
export default LibDetail; export default LibDetail;

122
frontend/src/components/mylib-repo-list-view/content.js
View File

@@ -1,17 +1,23 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import moment from 'moment';
import { gettext, storages} from '../../utils/constants'; import { gettext, storages} from '../../utils/constants';
import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api';
import TransferDialog from '../dialog/transfer-dialog'; import TransferDialog from '../dialog/transfer-dialog';
import LibHistorySetting from '../dialog/lib-history-setting-dialog'; import LibHistorySetting from '../dialog/lib-history-setting-dialog';
import LibDetail from '../dirent-detail/lib-details';
import Loading from '../loading'; import Loading from '../loading';
import ModalPortal from '../modal-portal'; import ModalPortal from '../modal-portal';
import DeleteItemPopup from './popups/delete-item'; import DeleteItemPopup from './popups/delete-item';
import TableBody from './table-body'; import TableBody from './table-body';
const propTypes = {
loading: PropTypes.bool.isRequired,
errorMsg: PropTypes.string.isRequired,
items: PropTypes.array.isRequired,
onRenameRepo: PropTypes.func.isRequired,
onDeleteRepo: PropTypes.func.isRequired,
onTransferRepo: PropTypes.func.isRequired,
onRepoDetails: PropTypes.func.isRequired,
};
class Content extends Component { class Content extends Component {
constructor(props) { constructor(props) {
@@ -26,38 +32,22 @@ class Content extends Component {
libSize: '', libSize: '',
libUpdateTime: '' libUpdateTime: ''
}; };
this.toggleDeleteItemPopup = this.toggleDeleteItemPopup.bind(this);
this.showDeleteItemPopup = this.showDeleteItemPopup.bind(this);
this.onTransfer = this.onTransfer.bind(this);
this.onHistorySetting = this.onHistorySetting.bind(this);
this.onFileTagChanged = this.onFileTagChanged.bind(this);
this.onDetails = this.onDetails.bind(this);
this.closeDetails = this.closeDetails.bind(this);
this.operations = {
showDeleteItemPopup: this.showDeleteItemPopup,
onTransfer: this.onTransfer,
onHistorySetting: this.onHistorySetting,
onDetails: this.onDetails,
onRenameRepo: this.props.renameRepo,
};
} }
toggleDeleteItemPopup() { toggleDeleteItemPopup = () => {
this.setState({ this.setState({
deleteItemPopupOpen: !this.state.deleteItemPopupOpen deleteItemPopupOpen: !this.state.deleteItemPopupOpen
}); });
} }
showDeleteItemPopup(data) { showDeleteItemPopup = (data) => {
this.toggleDeleteItemPopup(); this.toggleDeleteItemPopup();
this.setState({ this.setState({
deleteItemPopupData: data deleteItemPopupData: data
}); });
} }
onTransfer(itemName, itemID) { onTransfer = (itemName, itemID) => {
this.setState({ this.setState({
showTransfer: !this.state.showTransfer, showTransfer: !this.state.showTransfer,
itemName: itemName, itemName: itemName,
@@ -65,7 +55,7 @@ class Content extends Component {
}); });
} }
onHistorySetting(itemName, itemID) { onHistorySetting = (itemName, itemID) => {
this.setState({ this.setState({
showHistorySetting: !this.state.showHistorySetting, showHistorySetting: !this.state.showHistorySetting,
itemName: itemName, itemName: itemName,
@@ -73,36 +63,8 @@ class Content extends Component {
}); });
} }
onDetails(data) {
const libSize = Utils.formatSize({bytes: data.size});
const libID = data.repo_id;
const libUpdateTime = moment(data.last_modified).fromNow();
this.setState({
showDetails: !this.state.showDetails,
libID: libID,
libSize: libSize,
libUpdateTime: libUpdateTime
});
}
closeDetails() {
this.setState({
showDetails: !this.state.showDetails
})
}
onFileTagChanged() {
seafileAPI.listFileTags(this.state.detailsRepoID, '/').then(res => {
let fileTags = res.data.file_tags.map(item => {
console.log(item);
});
});
}
render() { render() {
const {loading, errorMsg, items} = this.props.data; const { loading, errorMsg, items } = this.props;
if (loading) { if (loading) {
return <Loading />; return <Loading />;
@@ -149,42 +111,46 @@ class Content extends Component {
const table = ( const table = (
<table> <table>
{window.innerWidth >= 768 ? desktopThead : mobileThead} {window.innerWidth >= 768 ? desktopThead : mobileThead}
<TableBody items={items} operations={this.operations} /> <TableBody
items={items}
onRenameRepo={this.props.onRenameRepo}
onDeleteRepo={this.props.onDeleteRepo}
onRepoDetails={this.props.onRepoDetails}
onTransfer={this.onTransfer}
showDeleteItemPopup={this.showDeleteItemPopup}
onHistorySetting={this.onHistorySetting}
/>
</table> </table>
); );
const nonEmpty = ( const nonEmpty = (
<React.Fragment> <Fragment>
{table} {table}
<DeleteItemPopup isOpen={this.state.deleteItemPopupOpen} <DeleteItemPopup
toggle={this.toggleDeleteItemPopup} data={this.state.deleteItemPopupData} /> isOpen={this.state.deleteItemPopupOpen}
toggle={this.toggleDeleteItemPopup}
data={this.state.deleteItemPopupData}
/>
{this.state.showTransfer && {this.state.showTransfer &&
<ModalPortal> <ModalPortal>
<TransferDialog toggleDialog={this.onTransfer} <TransferDialog
itemName={this.state.itemName} toggleDialog={this.onTransfer}
repoID={this.state.libID} itemName={this.state.itemName}
submit={this.props.toggleTransferSubmit} repoID={this.state.libID}
/> submit={this.props.onTransferRepo}
/>
</ModalPortal> </ModalPortal>
} }
{this.state.showHistorySetting && {this.state.showHistorySetting &&
<ModalPortal> <ModalPortal>
<LibHistorySetting toggleDialog={this.onHistorySetting} <LibHistorySetting
itemName={this.state.itemName} toggleDialog={this.onHistorySetting}
repoID={this.state.libID} itemName={this.state.itemName}
/> repoID={this.state.libID}
/>
</ModalPortal> </ModalPortal>
} }
{this.state.showDetails && ( </Fragment>
<div className="cur-view-detail">
<LibDetail libID={this.state.libID}
libSize={this.state.libSize}
libUpdateTime={this.state.libUpdateTime}
closeDetails={this.closeDetails}
/>
</div>
)}
</React.Fragment>
); );
return items.length ? nonEmpty : emptyTip; return items.length ? nonEmpty : emptyTip;
@@ -192,4 +158,6 @@ class Content extends Component {
} }
} }
Content.propTypes = propTypes;
export default Content; export default Content;

59
frontend/src/components/mylib-repo-list-view/item.js
View File

@@ -11,9 +11,14 @@ import RenameInput from '../../components/rename-input';
const propTypes = { const propTypes = {
data: PropTypes.object.isRequired, data: PropTypes.object.isRequired,
operations: PropTypes.object.isRequired,
isItemFreezed: PropTypes.bool.isRequired, isItemFreezed: PropTypes.bool.isRequired,
onItemFreezedToggle: PropTypes.func.isRequired, onItemFreezedToggle: PropTypes.func.isRequired,
onRenameRepo: PropTypes.func.isRequired,
onDeleteRepo: PropTypes.func.isRequired,
onTransfer: PropTypes.func.isRequired,
showDeleteItemPopup: PropTypes.func.isRequired,
onHistorySetting: PropTypes.func.isRequired,
onRepoDetails: PropTypes.func.isRequired,
} }
class Item extends Component { class Item extends Component {
@@ -74,7 +79,7 @@ class Item extends Component {
showDeleteItemPopup = (e) => { showDeleteItemPopup = (e) => {
e.preventDefault(); // for `<a>` e.preventDefault(); // for `<a>`
const data = this.props.data; const data = this.props.data;
this.props.operations.showDeleteItemPopup({ this.props.showDeleteItemPopup({
repoName: data.repo_name, repoName: data.repo_name,
yesCallback: this.deleteItem, yesCallback: this.deleteItem,
_this: this _this: this
@@ -82,46 +87,50 @@ class Item extends Component {
} }
deleteItem = () => { deleteItem = () => {
const data = this.props.data; const repo = this.props.data;
seafileAPI.deleteRepo(data.repo_id).then((res) => { seafileAPI.deleteRepo(repo.repo_id).then((res) => {
this.props.onDeleteRepo(repo);
// TODO: show feedback msg // TODO: show feedback msg
}).catch((error) => { }).catch((error) => {
// TODO: show feedback msg // TODO: show feedback msg
}); });
} }
rename = () => { onRenameToggle = () => {
this.setState({ this.setState({
showOpIcon: false, showOpIcon: false,
showChangeLibName: !this.state.showChangeLibName, showChangeLibName: true,
operationMenuOpen: !this.state.operationMenuOpen, operationMenuOpen: false,
}) });
} }
updateLibName = () => { onRenameConfirm = (newName) => {
const itemID = this.props.data.repo_id; let repo = this.props.data;
seafileAPI.renameRepo(itemID, this.state.repoName).then(res => { let repoID = repo.repo_id;
this.props.operations.onRenameRepo(itemID, this.state.repoName); seafileAPI.renameRepo(repoID, newName).then(() => {
this.setState({ this.props.onRenameRepo(repo, newName);
showOpIcon: false, this.onRenameCancel();
showChangeLibName: false,
});
this.props.onItemFreezedToggle();
}); });
} }
onRenameCancel = () => {
this.setState({
showChangeLibName: !this.state.showChangeLibName,
});
this.props.onItemFreezedToggle();
}
transfer = () => { transfer = () => {
const itemName = this.props.data.repo_name; const itemName = this.props.data.repo_name;
const itemID = this.props.data.repo_id; const itemID = this.props.data.repo_id;
this.props.operations.onTransfer(itemName, itemID); this.props.onTransfer(itemName, itemID);
} }
historySetting = () => { historySetting = () => {
const itemName = this.props.data.repo_name; const itemName = this.props.data.repo_name;
const itemID = this.props.data.repo_id; const itemID = this.props.data.repo_id;
this.props.operations.onHistorySetting(itemName, itemID); this.props.onHistorySetting(itemName, itemID);
} }
changePassword = () => { changePassword = () => {
@@ -135,7 +144,7 @@ class Item extends Component {
showDetails = () => { showDetails = () => {
let data = this.props.data; let data = this.props.data;
this.props.operations.onDetails(data); this.props.onRepoDetails(data);
} }
label = () => { label = () => {
@@ -184,7 +193,7 @@ class Item extends Component {
); );
const commonOperationsInMenu = ( const commonOperationsInMenu = (
<React.Fragment> <React.Fragment>
<DropdownItem data-toggle="item" onClick={this.rename}>{gettext('Rename')}</DropdownItem> <DropdownItem data-toggle="item" onClick={this.onRenameToggle}>{gettext('Rename')}</DropdownItem>
<DropdownItem onClick={this.transfer}>{gettext('Transfer')}</DropdownItem> <DropdownItem onClick={this.transfer}>{gettext('Transfer')}</DropdownItem>
<DropdownItem onClick={this.historySetting}>{gettext('History Setting')}</DropdownItem> <DropdownItem onClick={this.historySetting}>{gettext('History Setting')}</DropdownItem>
{data.encrypted ? <DropdownItem onClick={this.changePassword}>{gettext('Change Password')}</DropdownItem> : ''} {data.encrypted ? <DropdownItem onClick={this.changePassword}>{gettext('Change Password')}</DropdownItem> : ''}
@@ -229,8 +238,8 @@ class Item extends Component {
{this.state.showChangeLibName && ( {this.state.showChangeLibName && (
<RenameInput <RenameInput
name={data.repo_name} name={data.repo_name}
onRenameConfirm={this.updateLibName} onRenameConfirm={this.onRenameConfirm}
onRenameCancel={this.rename} onRenameCancel={this.onRenameCancel}
/> />
)} )}
{!this.state.showChangeLibName && data.repo_name && ( {!this.state.showChangeLibName && data.repo_name && (

17
frontend/src/components/mylib-repo-list-view/table-body.js
View File

@@ -4,7 +4,12 @@ import Item from './item';
const propTypes = { const propTypes = {
items: PropTypes.array.isRequired, items: PropTypes.array.isRequired,
operations: PropTypes.object.isRequired, onRenameRepo: PropTypes.func.isRequired,
onDeleteRepo: PropTypes.func.isRequired,
onTransfer: PropTypes.func.isRequired,
showDeleteItemPopup: PropTypes.func.isRequired,
onHistorySetting: PropTypes.func.isRequired,
onRepoDetails: PropTypes.func.isRequired,
}; };
class TableBody extends Component { class TableBody extends Component {
@@ -12,7 +17,6 @@ class TableBody extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
items: this.props.items,
isItemFreezed: false, isItemFreezed: false,
}; };
} }
@@ -22,14 +26,19 @@ class TableBody extends Component {
} }
render() { render() {
let listItems = this.state.items.map((item, index) => { let listItems = this.props.items.map((item, index) => {
return ( return (
<Item <Item
key={index} key={index}
data={item} data={item}
operations={this.props.operations}
isItemFreezed={this.state.isItemFreezed} isItemFreezed={this.state.isItemFreezed}
onItemFreezedToggle={this.onItemFreezedToggle} onItemFreezedToggle={this.onItemFreezedToggle}
onRenameRepo={this.props.onRenameRepo}
onDeleteRepo={this.props.onDeleteRepo}
onTransfer={this.props.onTransfer}
showDeleteItemPopup={this.props.showDeleteItemPopup}
onHistorySetting={this.props.onHistorySetting}
onRepoDetails={this.props.onRepoDetails}
/> />
); );
}); });

75
frontend/src/pages/my-libs/my-libs.js
View File

@@ -4,16 +4,16 @@ import { gettext, loginUrl} from '../../utils/constants';
import CommonToolbar from '../../components/toolbar/common-toolbar'; import CommonToolbar from '../../components/toolbar/common-toolbar';
import RepoViewToolbar from '../../components/toolbar/repo-view-toobar'; import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
import Content from '../../components/mylib-repo-list-view/content'; import Content from '../../components/mylib-repo-list-view/content';
import LibDetail from '../../components/dirent-detail/lib-details';
class MyLibraries extends Component { class MyLibraries extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
isShowDetails: false,
loading: true, loading: true,
errorMsg: '', errorMsg: '',
items: [] items: [],
}; };
} }
@@ -38,7 +38,6 @@ class MyLibraries extends Component {
errorMsg: gettext("Error") errorMsg: gettext("Error")
}); });
} }
} else { } else {
this.setState({ this.setState({
loading: false, loading: false,
@@ -50,25 +49,47 @@ class MyLibraries extends Component {
onCreateRepo = (repo) => { onCreateRepo = (repo) => {
seafileAPI.createMineRepo(repo).then((res) => { seafileAPI.createMineRepo(repo).then((res) => {
//todo update repoList let repo = res.data;
this.state.items.push(repo);
this.setState({items: this.state.items});
}); });
} }
toggleTransferSubmit = (repoID) => { onTransferRepo = (repoID) => {
this.setState({ let items = this.state.items.filter(item => {
items: this.state.items.filter(item => item.repo_id !== repoID) return item.repo_id !== repoID;
}) })
this.setState({items: items});
} }
renameRepo = (repoID, newName) => { onRenameRepo = (repo, newName) => {
let array = this.state.items; let items = this.state.items.map(item => {
for (var i=0; i < array.length; i++) { if (item.repo_id === repo.repo_id) {
if (array[i].repo_id === repoID) { item.repo_name = newName;
array[i].repo_name=newName;
break;
} }
} return item;
this.setState({items: array}); });
this.setState({items: items});
}
onDeleteRepo = (repo) => {
let items = this.state.items.map(item => {
return item.repo_id !== repo.repo_id;
});
this.setState({items: items});
}
onRepoDetails = (repo) => {
this.setState({
isShowDetails: true,
currentRepo: repo
})
}
closeDetails = () => {
this.setState({
isShowDetails: !this.state.isShowDetails
});
} }
render() { render() {
@@ -78,19 +99,31 @@ class MyLibraries extends Component {
<RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel} onCreateRepo={this.onCreateRepo} libraryType={'mine'}/> <RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel} onCreateRepo={this.onCreateRepo} libraryType={'mine'}/>
<CommonToolbar onSearchedClick={this.props.onSearchedClick} /> <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
</div> </div>
<div className="main-panel-center"> <div className="main-panel-center flex-row">
<div className="cur-view-container"> <div className="cur-view-container">
<div className="cur-view-path"> <div className="cur-view-path">
<h3 className="sf-heading">{gettext("My Libraries")}</h3> <h3 className="sf-heading">{gettext("My Libraries")}</h3>
</div> </div>
<div className="cur-view-content"> <div className="cur-view-content">
<Content <Content
data={this.state} loading={this.state.loading}
toggleTransferSubmit={this.toggleTransferSubmit} errorMsg={this.state.errorMsg}
renameRepo={this.renameRepo} items={this.state.items}
onDeleteRepo={this.onDeleteRepo}
onRenameRepo={this.onRenameRepo}
onTransferRepo={this.onTransferRepo}
onRepoDetails={this.onRepoDetails}
/> />
</div> </div>
</div> </div>
{this.state.isShowDetails && (
<div className="cur-view-detail">
<LibDetail
currentRepo={this.state.currentRepo}
closeDetails={this.closeDetails}
/>
</div>
)}
</div> </div>
</Fragment> </Fragment>
); );

2
frontend/src/pages/repo-wiki-mode/main-panel.js
View File

@@ -198,7 +198,7 @@ class MainPanel extends Component {
</div> </div>
<CommonToolbar repoID={repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/> <CommonToolbar repoID={repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/>
</div> </div>
<div className="main-panel-center flex-direction-row"> <div className="main-panel-center flex-row">
<div className="cur-view-container"> <div className="cur-view-container">
<div className="cur-view-path"> <div className="cur-view-path">
<CurDirPath <CurDirPath