Org group (#3097)

* org groups

* update front page

* update operation ui

frontend/src/pages/org-admin/org-groups.js

@@ -0,0 +1,231 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+import OrgGroupInfo from '../../models/org-group';
+import Toast from '../../components/toast';
+
+import { seafileAPI } from '../../utils/seafile-api';
+import { siteRoot, gettext, orgID } from '../../utils/constants';
+
+class OrgGroups extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      pageNext: 2,
+      orgGroups: [],
+      isItemFreezed: false  
+    }
+  }
+
+  componentDidMount() {
+    let page = this.state.page;
+    this.initData(page);
+  }
+
+  initData = (page) => {
+    seafileAPI.listOrgGroups(orgID, page).then(res => {
+      let orgGroups = res.data.groups.map(item => {
+        return new OrgGroupInfo(item);
+      });
+
+      this.setState({
+        orgGroups: orgGroups,
+        pageNext: res.data.page_next,
+        page: res.data.page,
+      });
+    });
+  }
+
+
+  onChangePageNum = (e, num) => {
+    e.preventDefault();
+    let page = this.state.page;
+
+    if (num == 1) {
+      page = page + 1;
+    } else {
+      page = page - 1;
+    }
+    this.initData(page);
+  } 
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  deleteGroupItem = (group) => {
+    seafileAPI.deleteOrgGroup(orgID, group.id).then(res => {
+      this.setState({
+        orgGroups: this.state.orgGroups.filter(item => item.id != group.id)
+      }); 
+      let msg = gettext('Successfully deleted {name}');
+      msg = msg.replace('{name}', group.groupName);
+      Toast.success(msg);
+    })
+  }
+
+  render() {
+    let groups = this.state.orgGroups;
+    return (
+      <div className="main-panel-center flex-row">
+        <div className="cur-view-container">
+          <div className="cur-view-path org-user-nav">
+           <h3 className="sf-heading">{gettext('All Groups')}</h3>
+          </div>
+          <div className="cur-view-content">
+            <table>
+              <thead>
+                <tr>
+                  <th width="30%">{gettext('Name')}</th>
+                  <th width="35%">{gettext('Creator')}</th>
+                  <th width="23%">{gettext('Created At')}</th>
+                  <th width="12%" className="text-center">{gettext('Operations')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {groups.map(item => {
+                  return (
+                    <GroupItem
+                      key={item.id}
+                      group={item}
+                      isItemFreezed={this.state.isItemFreezed}
+                      onFreezedItem={this.onFreezedItem} 
+                      onUnfreezedItem={this.onUnfreezedItem}
+                      deleteGroupItem={this.deleteGroupItem}
+                    />
+                )})}
+              </tbody>
+            </table>
+            <div className="paginator">
+              {this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext("Previous")}</a>}
+              {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext("Next")}</a>}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+class GroupItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      highlight: false,
+      showMenu: false,
+      isItemMenuShow: false
+    };
+  }
+
+  onMouseEnter = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        showMenu: true,
+        highlight: true,
+      });
+    }
+  }
+
+  onMouseLeave = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        showMenu: false,
+        highlight: false
+      });
+    }
+  } 
+
+  onDropdownToggleClick = (e) => {
+    e.preventDefault();
+    this.toggleOperationMenu(e);
+  }
+
+  toggleOperationMenu = (e) => {
+    e.stopPropagation();
+    this.setState(
+      {isItemMenuShow: !this.state.isItemMenuShow }, () => {
+        if (this.state.isItemMenuShow) {
+          this.props.onFreezedItem();
+        } else {
+          this.setState({
+            highlight: false,
+            showMenu: false,
+          });
+          this.props.onUnfreezedItem();
+        }
+      }
+    );
+  }
+
+  toggleDelete = () => {
+    this.props.deleteGroupItem(this.props.group);
+  }
+
+  renderGroupHref = (group) => {
+    let groupInfoHref;
+    if (group.creatorName == 'system admin') {
+      groupInfoHref = siteRoot + 'org/admin/#address-book/groups/' + group.id + '/'
+    } else {
+      groupInfoHref = siteRoot + 'org/groupadmin/' + group.id + '/'
+    } 
+                                                         
+    return groupInfoHref; 
+  }
+
+  renderGroupCreator = (group) => {
+    let userInfoHref = siteRoot + 'org/useradmin/info/' + group.creatorEmail + '/';
+    if (group.creatorName == 'system admin') {
+      return (
+        <td> -- </td>
+      )
+    } else {
+      return(
+        <td>
+          <a href={userInfoHref} className="font-weight-normal">{group.creatorName}</a>
+        </td>
+      )
+    }     
+  }
+
+  render() {
+    let { group } = this.props;
+    let isOperationMenuShow = (group.creatorName != 'system admin') && this.state.showMenu;
+    return (
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td>
+          <a href={this.renderGroupHref(group)} className="font-weight-normal">{group.groupName}</a>
+        </td>
+        {this.renderGroupCreator(group)}
+        <td>{group.ctime}</td>
+        <td className="text-center cursor-pointer">
+        {isOperationMenuShow &&
+          <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
+            <DropdownToggle
+              tag="a"
+              className="attr-action-icon fas fa-ellipsis-v"
+              title={gettext('More Operations')}
+              data-toggle="dropdown"
+              aria-expanded={this.state.isItemMenuShow}
+              onClick={this.onDropdownToggleClick}
+            />
+            <DropdownMenu>
+              <DropdownItem onClick={this.toggleDelete}>{gettext('Delete')}</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        }
+        </td>
+      </tr>
+    );
+  }
+
+}
+
+export default OrgGroups;