add delete&create&transfer method

frontend/src/components/dirent-detail/lib-details.js

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

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

@@ -1,17 +1,23 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
 import { gettext, storages} from '../../utils/constants';
-import { Utils } from '../../utils/utils';
-import { seafileAPI } from '../../utils/seafile-api';
 import TransferDialog from '../dialog/transfer-dialog';
 import LibHistorySetting from '../dialog/lib-history-setting-dialog';
-import LibDetail from '../dirent-detail/lib-details';
 import Loading from '../loading';
 import ModalPortal from '../modal-portal';
 import DeleteItemPopup from './popups/delete-item';
 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 {
 
   constructor(props) {
@@ -26,38 +32,22 @@ class Content extends Component {
       libSize: '',
       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({
       deleteItemPopupOpen: !this.state.deleteItemPopupOpen
     });
   }
 
-  showDeleteItemPopup(data) {
+  showDeleteItemPopup = (data) => {
     this.toggleDeleteItemPopup();
     this.setState({
       deleteItemPopupData: data
     });
   }
 
-  onTransfer(itemName, itemID) {
+  onTransfer = (itemName, itemID) => {
     this.setState({
       showTransfer: !this.state.showTransfer,
       itemName: itemName,
@@ -65,7 +55,7 @@ class Content extends Component {
     });
   } 
 
-  onHistorySetting(itemName, itemID) {
+  onHistorySetting = (itemName, itemID) => {
     this.setState({
       showHistorySetting: !this.state.showHistorySetting,
       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() {
-    const {loading, errorMsg, items} = this.props.data;
+    const { loading, errorMsg, items } = this.props;
 
     if (loading) {
       return <Loading />;
@@ -149,42 +111,46 @@ class Content extends Component {
       const table = (
         <table>
           {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>
       );
 
       const nonEmpty = (
-        <React.Fragment>
+        <Fragment>
           {table}
-          <DeleteItemPopup isOpen={this.state.deleteItemPopupOpen} 
-            toggle={this.toggleDeleteItemPopup} data={this.state.deleteItemPopupData} />
+          <DeleteItemPopup 
+            isOpen={this.state.deleteItemPopupOpen} 
+            toggle={this.toggleDeleteItemPopup} 
+            data={this.state.deleteItemPopupData} 
+          />
           {this.state.showTransfer &&
             <ModalPortal>
-              <TransferDialog toggleDialog={this.onTransfer} 
+              <TransferDialog 
+                toggleDialog={this.onTransfer} 
                 itemName={this.state.itemName}
                 repoID={this.state.libID}
-                              submit={this.props.toggleTransferSubmit}
+                submit={this.props.onTransferRepo}
               />
             </ModalPortal>
           }
           {this.state.showHistorySetting &&
             <ModalPortal>
-              <LibHistorySetting toggleDialog={this.onHistorySetting} 
+              <LibHistorySetting 
+                toggleDialog={this.onHistorySetting} 
                 itemName={this.state.itemName}
                 repoID={this.state.libID}
               />
             </ModalPortal>
           }
-          {this.state.showDetails && (
-            <div className="cur-view-detail">
-              <LibDetail libID={this.state.libID}
-                         libSize={this.state.libSize}
-                         libUpdateTime={this.state.libUpdateTime}
-                         closeDetails={this.closeDetails}
-                         />
-            </div>
-          )}
-        </React.Fragment>
+        </Fragment>
       );
 
       return items.length ? nonEmpty : emptyTip; 
@@ -192,4 +158,6 @@ class Content extends Component {
   }
 }
 
+Content.propTypes = propTypes;
+
 export default Content;

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

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

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

@@ -4,7 +4,12 @@ import Item from './item';
 
 const propTypes = {
   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 {
@@ -12,7 +17,6 @@ class TableBody extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      items: this.props.items,
       isItemFreezed: false,
     };
   }
@@ -22,14 +26,19 @@ class TableBody extends Component {
   }
 
   render() {
-    let listItems = this.state.items.map((item, index) => {
+    let listItems = this.props.items.map((item, index) => {
       return (
         <Item 
           key={index} 
           data={item} 
-          operations={this.props.operations}
           isItemFreezed={this.state.isItemFreezed}
           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}
         />
       );
     });

frontend/src/pages/my-libs/my-libs.js

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

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

@@ -198,7 +198,7 @@ class MainPanel extends Component {
           </div>
           <CommonToolbar repoID={repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/>
         </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-path">
               <CurDirPath