update my libs

frontend/src/components/dialog/lib-history-setting-dialog.js

@@ -0,0 +1,132 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Label, Input } from 'reactstrap';
+import { seafileAPI } from '../../utils/seafile-api.js';
+
+const propTypes = {
+  itemName: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+  repoID: PropTypes.string.isRequired,
+};
+
+class LibHistorySetting extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      keepDays: -1,
+      expireDays: 30,
+      disabled: true,
+      allHistory: true,
+      noHistory: false,
+      autoHistory: false,
+      errorInfo: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getRepoHistortLimit(this.props.repoID).then(res => {
+      this.setState({
+        keepDays: res.data.keep_days,
+        allHistory: res.data.keep_days < 0 ? true : false,
+        noHistory: res.data.keep_days === 0 ? true : false,
+        autoHistory: res.data.keep_days > 0 ? true : false,
+        disabled: res.data.keep_days > 0 ? false : true,
+        expireDays: res.data.keep_days > 0 ? res.data.keep_days : 30, 
+      });
+    });
+  }
+
+  submit = () => {
+    let days = this.state.keepDays;
+    let repoID = this.props.repoID;
+    let reg = /^-?\d+$/;
+    let flag = reg.test(days);
+    if (flag) {  
+      seafileAPI.setRepoHistortLimit(repoID, days).then(res => {
+        this.setState({
+          keepDays: res.data.keep_days
+        });
+      });
+      this.props.toggleDialog();
+    } else {
+      this.setState({
+        errorInfo: gettext('Please enter a non-negative integer'),
+      })
+    }
+  }
+
+  onChange = (e) => {
+    let num = e.target.value;
+    this.setState({
+      keepDays: num,
+      expireDays: num,
+    });
+  }
+
+  setLimitDays = (type) => {
+    if (type === 'allHistory') {
+      this.setState({
+        keepDays: -1,
+      });
+    } else if (type === 'noHistory') {
+      this.setState({
+        keepDays: 0,
+      });
+    } else {
+      this.setState({
+        disabled: false 
+      });
+    }
+
+    this.setState({
+      allHistory: type === 'allHistory' ? true : false,
+      noHistory: type === 'noHistory' ? true : false,
+      autoHistory: type === 'autoHistory' ? true : false,
+    });
+  }
+
+  render() {
+    const itemName = this.props.itemName;
+    return (
+      <Modal isOpen={true} centered={true}>
+        <ModalHeader toggle={this.props.toggleDialog}>
+        <span className="sf-font" title={itemName}>{itemName}</span>{' '}{gettext('History Setting')}
+        </ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup check>
+              <Label check>
+                <Input type="radio" name="radio1" checked={this.state.allHistory} onChange={() => {this.setLimitDays('allHistory')}}/>{' '}{gettext('Keep full history')}
+              </Label>
+            </FormGroup>
+            <FormGroup check>
+              <Label check>
+                <Input type="radio" name="radio1" checked={this.state.noHistory} onChange={() =>{this.setLimitDays('noHistory')}}/>{' '}{gettext('Don\'t keep history')}
+              </Label>
+            </FormGroup>
+            <FormGroup check>
+              <Label check>
+                <Input type="radio" name="radio1" checked={this.state.autoHistory} onChange={() =>{this.setLimitDays('autoHistory')}}/>{' '}{gettext('Only keep a period of history:')}
+                <Input className="expire-input" type="text" 
+                       value={this.state.expireDays}
+                       onChange={this.onChange} 
+                       disabled={this.state.disabled}
+                       /> 
+                <span>{gettext('days')}</span>
+              </Label>
+            </FormGroup>
+            <Label className="err-message">{this.state.errorInfo}</Label>
+            <br />
+            <Button onClick={this.submit}>{gettext('Submit')}</Button>
+          </Form>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+LibHistorySetting.propTypes = propTypes;
+
+export default LibHistorySetting;

frontend/src/components/dialog/transfer-dialog.js

@@ -0,0 +1,85 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import AsyncSelect from 'react-select/lib/Async';
+import { gettext } from '../../utils/constants';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { seafileAPI } from '../../utils/seafile-api.js';
+
+const propTypes = {
+  itemName: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+};
+
+class TransferDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: null,
+      errorMsg: [],
+      sharedItems: []
+    };
+    this.options = [];
+  }
+
+  handleSelectChange = (option) => {
+    this.setState({selectedOption: option});
+    this.options = [];
+  }
+
+  loadOptions = (value, callback) => {
+    if (value.trim().length > 0) {
+      seafileAPI.searchUsers(value.trim()).then((res) => {
+        this.options = [];
+        for (let i = 0 ; i < res.data.users.length; i++) {
+          let obj = {};
+          obj.value = res.data.users[i].name;
+          obj.email = res.data.users[i].email;
+          obj.label =
+            <Fragment>
+              <img src={res.data.users[i].avatar_url} className="avatar reviewer-select-avatar" alt=""/>
+              <span className='reviewer-select-name'>{res.data.users[i].name}</span>
+            </Fragment>;
+          this.options.push(obj);
+        }
+        callback(this.options);
+      });
+    }
+  }
+
+  submit = () => {
+    let repoID = this.props.repoID;
+    let user = this.state.selectedOption.email;
+    seafileAPI.transferRepo(repoID, user).then(res => {
+      this.props.submit(repoID);
+      this.props.toggleDialog();
+    })
+  } 
+
+  render() {
+    const itemName = this.props.itemName;
+    return (
+      <Modal isOpen={true} centered={true}>
+        <ModalHeader toggle={this.props.toggleDialog}>
+        {gettext('Transfer Library')} <span className="sf-font" title={itemName}>{itemName}</span> {gettext('TO')}
+        </ModalHeader>
+        <ModalBody>
+          <AsyncSelect
+            className='reviewer-select' isFocused
+            loadOptions={this.loadOptions}
+            placeholder={gettext('Please enter 1 or more character')}
+            onChange={this.handleSelectChange}
+            isClearable classNamePrefix
+            inputId={'react-select-transfer-input'}
+          /><br />
+          <Button onClick={this.submit}>{gettext('Submit')}</Button>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+TransferDialog.propTypes = propTypes;
+
+export default TransferDialog;

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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';
+
+class LibDetail extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      fileCount: '',
+      libName: '',
+      isLoading: true, 
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getRepoInfo(this.props.libID).then(res => {
+      this.setState({
+        fileCount: res.data.file_count,
+        libName: res.data.repo_name
+      }); 
+    });
+  }
+
+  render() {
+    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>
+          </div>
+        </div>
+        <div className="detail-body dirent-info">
+          <div className="img">
+            <img src={siteRoot + 'media/img/lib/256/lib.png'} alt="icon"></img>
+          </div>
+          <div className="dirent-table-container">
+            <table>
+              <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>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+export default LibDetail;

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

@@ -6,23 +6,43 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro, storages, canGenerateShareLink, canGenerateUploadLink, folderPermEnabled, enableRepoSnapshotLabel } from '../../utils/constants';
 import Loading from '../../components/loading';
+import ModalPortal from '../../components/modal-portal';
 import DeleteItemPopup from './popups/delete-item';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
+import TransferDialog from '../../components/dialog/transfer-dialog';
+import LibHistorySetting from '../../components/dialog/lib-history-setting-dialog';
+import LibDetail from '../../components/dirent-detail/lib-details';
 
 class Content extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      deleteItemPopupOpen: false
+      deleteItemPopupOpen: false,
+      showTransfer: false,
+      itemName: '',
+      showHistorySetting: false,
+      showDetails: false,
+      libID: '',
+      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
+      showDeleteItemPopup: this.showDeleteItemPopup,
+      onTransfer: this.onTransfer,
+      onHistorySetting: this.onHistorySetting,
+      onDetails: this.onDetails,
+      onRenameRepo: this.props.renameRepo,
     };
   }
 
@@ -39,6 +59,50 @@ class Content extends Component {
     });
   }
 
+  onTransfer(itemName, itemID) {
+    this.setState({
+      showTransfer: !this.state.showTransfer,
+      itemName: itemName,
+      libID: itemID 
+    });
+  } 
+
+  onHistorySetting(itemName, itemID) {
+    this.setState({
+      showHistorySetting: !this.state.showHistorySetting,
+      itemName: itemName,
+      libID: itemID
+    });
+  } 
+
+  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;
 
@@ -96,6 +160,32 @@ class Content extends Component {
           {table}
           <DeleteItemPopup isOpen={this.state.deleteItemPopupOpen} 
             toggle={this.toggleDeleteItemPopup} data={this.state.deleteItemPopupData} />
+          {this.state.showTransfer &&
+            <ModalPortal>
+              <TransferDialog toggleDialog={this.onTransfer} 
+                              itemName={this.state.itemName}
+                              repoID={this.state.libID}
+                              submit={this.props.toggleTransferSubmit}
+                              />
+            </ModalPortal>
+          }
+          {this.state.showHistorySetting &&
+            <ModalPortal>
+              <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>
       );
 
@@ -132,7 +222,9 @@ class Item extends Component {
     this.state = {
       showOpIcon: false,
       operationMenuOpen: false,
-      deleted: false
+      deleted: false,
+      showChangeLibName: false, 
+      repoName: this.props.data.repo_name,
     };
 
     this.handleMouseOver = this.handleMouseOver.bind(this);
@@ -213,12 +305,37 @@ class Item extends Component {
   }
 
   rename() {
+    this.setState({
+      showChangeLibName: !this.state.showChangeLibName
+    })
+  }
+
+  onChangeLibName = (e) => {
+    this.setState({
+      repoName: e.target.value
+    })
+  }
+
+  updateLibName = () => {
+    const itemID = this.props.data.repo_id;
+    seafileAPI.renameRepo(itemID, this.state.repoName).then(res => {
+      this.rename();
+      this.props.operations.onRenameRepo(itemID, this.state.repoName);
+    }).catch(res => {
+      // TODO res error 
+    })
   }
 
   transfer() {
+    const itemName = this.props.data.repo_name;
+    const itemID = this.props.data.repo_id;
+    this.props.operations.onTransfer(itemName, itemID);
   }
 
   historySetting() {
+    const itemName = this.props.data.repo_name;
+    const itemID = this.props.data.repo_id;
+    this.props.operations.onHistorySetting(itemName, itemID);
   }
 
   changePassword() {
@@ -231,6 +348,8 @@ class Item extends Component {
   }
 
   showDetails() {
+    let data = this.props.data;
+    this.props.operations.onDetails(data);
   }
   
   label() {
@@ -321,11 +440,21 @@ class Item extends Component {
     const desktopItem = (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
         <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+        {
+          this.state.showChangeLibName ? (
+            <td>
+              <input value={this.state.repoName} onChange={this.onChangeLibName} />
+              <button type='button' className='sf2-icon-tick text-success' onClick={this.updateLibName} />
+              <button type='button' className='sf2-icon-x2' onClick={this.rename}/>
+            </td>
+          ) : (
             <td>
               {data.repo_name ?
                 <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link> :
                 gettext('Broken (please contact your administrator to fix this library)')}
             </td>
+          )
+        }
         <td>{data.repo_name ? desktopOperations : ''}</td>
         <td>{Utils.formatSize({bytes: data.size})}</td>
         {storages.length ? <td>{data.storage_name}</td> : null}
@@ -399,6 +528,25 @@ class MyLibraries extends Component {
     });
   }
 
+  toggleTransferSubmit = (repoID) => {
+    this.setState({
+      items: this.state.items.filter(item => item.repo_id !== repoID) 
+    }) 
+  }
+
+  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
+    })
+  }
+
   render() {
     return (
       <Fragment>
@@ -412,7 +560,10 @@ class MyLibraries extends Component {
               <h3 className="sf-heading">{gettext("My Libraries")}</h3>
             </div>
             <div className="cur-view-content">
-              <Content data={this.state} />
+              <Content data={this.state}
+                       toggleTransferSubmit={this.toggleTransferSubmit}
+                       renameRepo={this.renameRepo}
+                       />
             </div>
           </div>
         </div>

media/css/seahub_react.css

@@ -67,6 +67,8 @@
 .sf2-icon-history:before { content:"\e014"; }
 .sf2-icon-cog1:before { content:"\e015"; }
 .sf2-icon-trash:before { content:"\e016"; }
+.sf2-icon-tick:before { content:"\e01e"; }
+.sf2-icon-x2:before { content:"\e01f"; }
 .sf2-icon-edit:before { content:"\e018"; }
 .sf2-icon-caret-down:before { content:"\e01a"; }
 .sf2-icon-x1:before { content:"\e01d"; }