Select editor encapsulate (#2794)

frontend/src/components/dialog/manage-members-dialog.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
-import PermissionEditor from '../permission-editor';
+import RoleEditor from '../select-editor/role-eidtor';
 import UserSelect from '../../models/user-select';
 import '../../css/manage-members-dialog.css';
 
@@ -152,10 +152,11 @@ class Member extends React.PureComponent {
 
   constructor(props) {
     super(props);
+    this.roles = ['Admin', 'Member'];
   }
 
-  onChangeUserPermission = (permission) => {
-    let isAdmin = permission === 'Admin' ? 'True' : 'False';
+  onChangeUserRole = (role) => {
+    let isAdmin = role === 'Admin' ? 'True' : 'False';
     seafileAPI.setGroupAdmin(this.props.groupID, this.props.item.email, isAdmin).then((res) => {
       this.props.onGroupMembersChange();
     });
@@ -169,7 +170,6 @@ class Member extends React.PureComponent {
 
   render() {
     const { item, isOwner } = this.props;
-    const permissions = ['Admin', 'Member'];
     return(
       <tr>
         <th scope="row"><img className="avatar" src={item.avatar_url} alt=""/></th>
@@ -179,12 +179,12 @@ class Member extends React.PureComponent {
             <span className="group-admin">{item.role}</span>
           }
           {(isOwner === true && item.role !== 'Owner') &&
-            <PermissionEditor 
+            <RoleEditor 
               isTextMode={true}
               isEditIconShow={true}
-              currentPermission={this.props.item.role}
-              permissions={permissions}
-              onPermissionChangedHandler={this.onChangeUserPermission}
+              currentRole={this.props.item.role}
+              roles={this.roles}
+              onRoleChangedHandler={this.onChangeUserRole}
             />
           }
         </td>

frontend/src/components/dialog/share-to-group.js

@@ -5,7 +5,7 @@ import Select from 'react-select';
 import makeAnimated from 'react-select/lib/animated';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api.js';
-import PermissionEditor from '../permission-editor';
+import PermissionEditor from '../select-editor/permission-editor';
 
 class GroupItem extends React.Component {
 
@@ -250,9 +250,9 @@ class ShareToGroup extends React.Component {
         <table>
           <thead>
             <tr>
-              <th width="40%">{gettext('Group')}</th>
-              <th width="40%">{gettext('Permission')}</th>
-              <th width="20%"></th>
+              <th width="50%">{gettext('Group')}</th>
+              <th width="35%">{gettext('Permission')}</th>
+              <th width="15%"></th>
             </tr>
           </thead>
           <tbody>
@@ -298,9 +298,9 @@ class ShareToGroup extends React.Component {
           <table className="table-thead-hidden">
             <thead>
               <tr>
-                <th width="40%">{gettext('Group')}</th>
-                <th width="40%">{gettext('Permission')}</th>
-                <th width="20%"></th>
+                <th width="50%">{gettext('Group')}</th>
+                <th width="35%">{gettext('Permission')}</th>
+                <th width="15%"></th>
               </tr>
             </thead>
             <GroupList 

frontend/src/components/dialog/share-to-user.js

@@ -4,7 +4,7 @@ import AsyncSelect from 'react-select/lib/Async';
 import { gettext } from '../../utils/constants';
 import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
-import PermissionEditor from '../permission-editor';
+import PermissionEditor from '../select-editor/permission-editor';
 
 class UserItem extends React.Component {
 
@@ -35,6 +35,7 @@ class UserItem extends React.Component {
 
   render() {
     let item = this.props.item;
+    let currentPermission = item.is_admin ? 'admin' : item.permission;
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="name">{item.user_info.nickname}</td>
@@ -42,7 +43,7 @@ class UserItem extends React.Component {
           <PermissionEditor 
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
-            currentPermission={item.permission}
+            currentPermission={currentPermission}
             permissions={this.props.permissions}
             onPermissionChangedHandler={this.onChangeUserPermission}
           />
@@ -255,6 +256,7 @@ class ShareToUser extends React.Component {
       if (username === sharedItemUsername) {
         sharedItem.permission = permission;
       }
+      sharedItem.is_admin = permission === 'admin' ? true : false;
       return sharedItem;
     });
     this.setState({sharedItems: sharedItems});
@@ -267,9 +269,9 @@ class ShareToUser extends React.Component {
         <table>
           <thead>
             <tr>
-              <th width="40%">{gettext('User')}</th>
-              <th width="40%">{gettext('Permission')}</th>
-              <th width="20%"></th>
+              <th width="50%">{gettext('User')}</th>
+              <th width="35%">{gettext('Permission')}</th>
+              <th width="15%"></th>
             </tr>
           </thead>
           <tbody>
@@ -323,9 +325,9 @@ class ShareToUser extends React.Component {
           <table className="table-thead-hidden">
             <thead>
               <tr>
-                <th width="40%">{gettext('User')}</th>
-                <th width="40%">{gettext('Permission')}</th>
-                <th width="20%"></th>
+                <th width="50%">{gettext('User')}</th>
+                <th width="35%">{gettext('Permission')}</th>
+                <th width="15%"></th>
               </tr>
             </thead>
             <UserList 

frontend/src/components/select-editor/permission-editor.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Utils } from '../../utils/utils';
+import SelectEditor from './select-editor';
+
+const propTypes = {
+  isTextMode: PropTypes.bool.isRequired,
+  isEditIconShow: PropTypes.bool.isRequired,
+  permissions: PropTypes.array.isRequired,
+  currentPermission: PropTypes.string.isRequired,
+  onPermissionChangedHandler: PropTypes.func.isRequired
+};
+
+class PermissionEditor extends React.Component {
+
+  translatePermission = (permission) => {
+    return Utils.sharePerms(permission);
+  }
+
+  render() {
+    return (
+      <SelectEditor 
+        isTextMode={this.props.isTextMode}
+        isEditIconShow={this.props.isEditIconShow}
+        options={this.props.permissions}
+        currentOption={this.props.currentPermission}
+        onOptionChangedHandler={this.props.onPermissionChangedHandler}
+        translateOption={this.translatePermission}
+      />
+    );
+  }
+}
+
+PermissionEditor.propTypes = propTypes;
+
+export default PermissionEditor;

frontend/src/components/select-editor/role-eidtor.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import SelectEditor from './select-editor';
+
+const propTypes = {
+  isTextMode: PropTypes.bool.isRequired,
+  isEditIconShow: PropTypes.bool.isRequired,
+  roles: PropTypes.array.isRequired,
+  currentRole: PropTypes.string.isRequired,
+  onRoleChangedHandler: PropTypes.func.isRequired,
+};
+
+class RoleEditor extends React.Component {
+
+  translateRole = (role) => {
+    if (role === 'Admin') {
+      return gettext('Admin');
+    }
+    
+    if (role === 'Member') {
+      return gettext('Member');
+    }
+  }
+
+  render() {
+    return (
+      <SelectEditor 
+        isTextMode={this.props.isTextMode}
+        isEditIconShow={this.props.isEditIconShow}
+        options={this.props.roles}
+        currentOption={this.props.currentRole}
+        onOptionChangedHandler={this.props.onRoleChangedHandler}
+        translateOption={this.translateRole}
+      />
+    );
+  }
+}
+
+RoleEditor.propTypes = propTypes;
+
+export default RoleEditor;

frontend/src/components/select-editor/select-editor.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'reactstrap';
-import { Utils } from '../utils/utils';
-import { gettext } from '../utils/constants';
+import { gettext } from '../../utils/constants';
 
 const propTypes = {
   isTextMode: PropTypes.bool.isRequired, // there will be two mode. first: text and select. second: just select
   isEditIconShow: PropTypes.bool.isRequired,
-  currentPermission: PropTypes.string.isRequired,
-  permissions: PropTypes.array.isRequired,
-  onPermissionChangedHandler: PropTypes.func.isRequired,
+  options: PropTypes.array.isRequired,
+  currentOption: PropTypes.string.isRequired,
+  translateOption: PropTypes.func.isRequired,
+  onOptionChangedHandler: PropTypes.func.isRequired,
 };
 
-class PermissionEditor extends React.Component {
+class SelectEditor extends React.Component {
 
   constructor(props) {
     super(props);
@@ -34,11 +34,11 @@ class PermissionEditor extends React.Component {
     this.setState({isEditing: true});
   }
 
-  onPermissionChangedHandler = (e) => {
+  onOptionChangedHandler = (e) => {
     e.nativeEvent.stopImmediatePropagation();
     let permission = e.target.value;
-    if (permission !== this.props.currentPermission) {
-      this.props.onPermissionChangedHandler(permission);
+    if (permission !== this.props.currentOption) {
+      this.props.onOptionChangedHandler(permission);
     }
     this.setState({isEditing: false});
   }
@@ -52,7 +52,7 @@ class PermissionEditor extends React.Component {
   }
 
   render() {
-    let { currentPermission, permissions, isTextMode } = this.props;
+    let { currentOption, options, isTextMode } = this.props;
 
     // scence1: isTextMode (text)editor-icon --> select
     // scence2: !isTextMode select
@@ -66,17 +66,17 @@ class PermissionEditor extends React.Component {
     return (
       <div className="permission-editor">
         {(!isTextMode || this.state.isEditing) &&
-          <Input style={selectStyle} type="select" onChange={this.onPermissionChangedHandler} onClick={this.onSelectHandler} value={currentPermission}>
-            {permissions.map((item, index) => {
+          <Input style={selectStyle} type="select" onChange={this.onOptionChangedHandler} onClick={this.onSelectHandler} value={currentOption}>
+            {options.map((item, index) => {
               return (
-                <option key={index} value={item}>{Utils.sharePerms(item)}</option>
-              )
+                <option key={index} value={item}>{this.props.translateOption(item)}</option>
+              );
             })}
           </Input>
         }
         {(isTextMode && !this.state.isEditing) &&
           <div>
-            {Utils.sharePerms(currentPermission)}
+            {this.props.translateOption(currentOption)}
             {this.props.isEditIconShow && (
               <span 
                 title={gettext('Edit')} 
@@ -91,6 +91,6 @@ class PermissionEditor extends React.Component {
   }
 }
 
-PermissionEditor.propTypes = propTypes;
+SelectEditor.propTypes = propTypes;
 
-export default PermissionEditor;
+export default SelectEditor;

frontend/src/models/dirent.js

@@ -15,7 +15,7 @@ class Dirent {
       this.size = Utils.bytesToSize(json.size);
       this.starred = json.starred || false;
       this.is_locked = json.is_locked || false;
-      this.lock_time = moment.unix(json.lock_time).fromNow();
+      this.lock_time = json.lock_time;
       this.lock_owner= json.lock_owner;
       this.locked_by_me = json.locked_by_me;
       this.modifier_name = json.modifier_name;

frontend/src/pages/share-admin/folders.js

@@ -3,7 +3,7 @@ import { Link } from '@reach/router';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
-import PermissionEditor from '../../components/permission-editor';
+import PermissionEditor from '../../components/select-editor/permission-editor';
 import SharedFolderInfo from '../../models/shared-folder-info';
 
 class Content extends Component {

frontend/src/pages/share-admin/libraries.js

@@ -3,7 +3,7 @@ import { Link } from '@reach/router';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
-import PermissionEditor from '../../components/permission-editor';
+import PermissionEditor from '../../components/select-editor/permission-editor';
 import SharedRepoInfo from '../../models/shared-repo-info';
 
 class Content extends Component {

frontend/src/utils/utils.js

@@ -321,12 +321,6 @@ export const Utils = {
       case 'preview':
         title = gettext("Preview-on-Cloud");
         break;
-      case 'Member':
-        title = gettext("Member");
-        break;
-      case 'Admin':
-        title = gettext("Admin");
-        break;
     }
     return title;
   },