Org user page (#2941)

* init org user * optimized code style * freezed item * update select-ediotr style * optimized code style * add state
2025-09-23 12:27:48 +00:00 · 2019-02-27 19:44:22 +08:00
parent e28f6361d0
commit e2ad2fd023
21 changed files with 1033 additions and 16 deletions
--- a/frontend/src/pages/org-admin/org-admin-list.js
+++ b/frontend/src/pages/org-admin/org-admin-list.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext, orgID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import Toast from '../../components/toast';
+import OrgUserInfo from '../../models/org-user';
+import ModalPortal from '../../components/modal-portal';
+import AddOrgAdminDialog from '../../components/dialog/org-add-admin-dialog';
+import UserItem from './org-user-item';
+
+import '../../css/org-admin-paginator.css';
+
+const propTypes = {
+  toggleAddOrgAdmin: PropTypes.func.isRequired,
+  currentTab: PropTypes.string.isRequired,
+  isShowAddOrgAdminDialog: PropTypes.bool.isRequired,
+};
+
+class OrgAdminList extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      orgAdminUsers: [],
+      isItemFreezed: false,
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.listOrgUsers(orgID, true).then(res => {
+      let userList = res.data.user_list.map(item => {
+        return new OrgUserInfo(item);
+      });
+      this.setState({orgAdminUsers: userList});
+    });
+  }
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  toggleDelete = (email) => {
+    seafileAPI.deleteOrgUser(orgID, email).then(res => {
+      this.setState({
+        orgAdminUsers: this.state.orgAdminUsers.filter(item => item.email != email)
+      });
+      let msg = gettext('Successfully deleted %s');
+      msg = msg.replace('%s', email);
+      Toast.success(msg);
+    });
+  } 
+
+  toggleRevokeAdmin = (email) => {
+    seafileAPI.setOrgAdmin(orgID, email, false).then(res => {
+      this.setState({
+        orgAdminUsers: this.state.orgAdminUsers.filter(item => item.email != email)
+      });
+      let msg = gettext('Successfully revoke the admin permission of %s');
+      msg = msg.replace('%s', email);
+      Toast.success(msg);
+    });
+  }
+
+  addOrgAdmin = (users) => {
+    seafileAPI.setOrgAdmin(orgID, users, true).then(res => {
+      let userInfo = new OrgUserInfo(res.data);
+      this.state.orgAdminUsers.unshift(userInfo);
+      this.setState({
+        orgAdminUsers: this.state.orgAdminUsers
+      });
+      this.props.toggleAddOrgAdmin();
+      let msg = gettext('Successfully set %s as admin.');
+      msg = msg.replace('%s', userInfo.email);
+      Toast.success(msg);
+    });
+  } 
+
+  render() {
+    let orgAdminUsers = this.state.orgAdminUsers;
+
+    return (
+       <div className="cur-view-content">
+         <table>
+           <thead>
+             <tr>
+               <th width="30%">{gettext('Name')}</th>
+               <th width="15%">{gettext('Status')}</th>
+               <th width="15%">{gettext('Space Used')}</th>
+               <th width="20%">{gettext('Create At / Last Login')}</th>
+               <th width="20%" className="text-center">{gettext('Operations')}</th>
+             </tr>
+           </thead>
+           <tbody>
+            {orgAdminUsers.map(item => {
+              return (
+                <UserItem 
+                  key={item.id}
+                  user={item}
+                  currentTab={this.props.currentTab}
+                  isItemFreezed={this.state.isItemFreezed}
+                  toggleDelete={this.toggleDelete}
+                  toggleRevokeAdmin={this.toggleRevokeAdmin}
+                  onFreezedItem={this.onFreezedItem}
+                  onUnfreezedItem={this.onUnfreezedItem}
+                />
+            )})}
+           </tbody>
+         </table>
+         {this.props.isShowAddOrgAdminDialog && (
+           <ModalPortal>
+             <AddOrgAdminDialog toggle={this.props.toggleAddOrgAdmin} addOrgAdmin={this.addOrgAdmin} />
+           </ModalPortal>
+         )}
+      </div>
+    );
+  }
+}
+
+OrgAdminList.propTypes = propTypes;
+
+export default OrgAdminList;