Add organization list and edit pages.

web/src/App.js

@@ -19,6 +19,8 @@ import {DownOutlined, LogoutOutlined, SettingOutlined} from '@ant-design/icons';
 import {Avatar, BackTop, Dropdown, Layout, Menu} from 'antd';
 import {Switch, Route, withRouter, Redirect} from 'react-router-dom'
 import * as AccountBackend from "./backend/AccountBackend";
+import OrganizationListPage from "./OrganizationListPage";
+import OrganizationEditPage from "./OrganizationEditPage";
 import UserListPage from "./UserListPage";
 import UserEditPage from "./UserEditPage";
 
@@ -46,8 +48,10 @@ class App extends Component {
     const uri = location.pathname;
     if (uri === '/') {
       this.setState({ selectedMenuKey: 0 });
-    } else if (uri.includes('users')) {
+    } else if (uri.includes('organizations')) {
       this.setState({ selectedMenuKey: 1 });
+    } else if (uri.includes('users')) {
+      this.setState({ selectedMenuKey: 2 });
     } else {
       this.setState({ selectedMenuKey: -1 });
     }
@@ -189,6 +193,13 @@ class App extends Component {
     );
     res.push(
       <Menu.Item key="1">
+        <a href="/organizations">
+          Organizations
+        </a>
+      </Menu.Item>
+    );
+    res.push(
+      <Menu.Item key="2">
         <a href="/users">
           Users
         </a>
@@ -245,6 +256,8 @@ class App extends Component {
           </Menu>
         </Header>
         <Switch>
+          <Route exact path="/organizations" component={OrganizationListPage}/>
+          <Route exact path="/organizations/:organizationName" component={OrganizationEditPage}/>
           <Route exact path="/users" component={UserListPage}/>
           <Route exact path="/users/:userName" component={UserEditPage}/>
         </Switch>

web/src/OrganizationEditPage.js

@@ -0,0 +1,137 @@
+import React from "react";
+import {Button, Card, Col, Input, Row} from 'antd';
+import {LinkOutlined} from "@ant-design/icons";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as Setting from "./Setting";
+
+class OrganizationEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizationName: props.match.params.organizationName,
+      organization: null,
+      tasks: [],
+      resources: [],
+    };
+  }
+
+  componentWillMount() {
+    this.getOrganization();
+  }
+
+  getOrganization() {
+    OrganizationBackend.getOrganization("admin", this.state.organizationName)
+      .then((organization) => {
+        this.setState({
+          organization: organization,
+        });
+      });
+  }
+
+  parseOrganizationField(key, value) {
+    // if ([].includes(key)) {
+    //   value = Setting.myParseInt(value);
+    // }
+    return value;
+  }
+
+  updateOrganizationField(key, value) {
+    value = this.parseOrganizationField(key, value);
+
+    let organization = this.state.organization;
+    organization[key] = value;
+    this.setState({
+      organization: organization,
+    });
+  }
+
+  renderOrganization() {
+    return (
+      <Card size="small" title={
+        <div>
+          Edit Organization&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button type="primary" onClick={this.submitOrganizationEdit.bind(this)}>Save</Button>
+        </div>
+      } style={{marginLeft: '5px'}} type="inner">
+        <Row style={{marginTop: '10px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            Name:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.organization.name} onChange={e => {
+              this.updateOrganizationField('name', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            Display Name:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.organization.displayName} onChange={e => {
+              this.updateOrganizationField('displayName', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            Website Url:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.organization.websiteUrl} onChange={e => {
+              this.updateOrganizationField('websiteUrl', e.target.value);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    )
+  }
+
+  submitOrganizationEdit() {
+    let organization = Setting.deepCopy(this.state.organization);
+    OrganizationBackend.updateOrganization(this.state.organization.owner, this.state.organizationName, organization)
+      .then((res) => {
+        if (res) {
+          Setting.showMessage("success", `Successfully saved`);
+          this.setState({
+            organizationName: this.state.organization.name,
+          });
+          this.props.history.push(`/organizations/${this.state.organization.name}`);
+        } else {
+          Setting.showMessage("error", `failed to save: server side failure`);
+          this.updateOrganizationField('name', this.state.organizationName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `failed to save: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        <Row style={{width: "100%"}}>
+          <Col span={1}>
+          </Col>
+          <Col span={22}>
+            {
+              this.state.organization !== null ? this.renderOrganization() : null
+            }
+          </Col>
+          <Col span={1}>
+          </Col>
+        </Row>
+        <Row style={{margin: 10}}>
+          <Col span={2}>
+          </Col>
+          <Col span={18}>
+            <Button type="primary" size="large" onClick={this.submitOrganizationEdit.bind(this)}>Save</Button>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default OrganizationEditPage;

web/src/OrganizationListPage.js

@@ -0,0 +1,161 @@
+import React from "react";
+import {Button, Col, Popconfirm, Row, Table} from 'antd';
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+
+class OrganizationListPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizations: null,
+    };
+  }
+
+  componentWillMount() {
+    this.getOrganizations();
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: res,
+        });
+      });
+  }
+
+  newOrganization() {
+    return {
+      owner: "admin", // this.props.account.organizationname,
+      name: `organization_${this.state.organizations.length}`,
+      createdTime: moment().format(),
+      displayName: `New Organization - ${this.state.organizations.length}`,
+      websiteUrl: "https://example.com",
+    }
+  }
+
+  addOrganization() {
+    const newOrganization = this.newOrganization();
+    OrganizationBackend.addOrganization(newOrganization)
+      .then((res) => {
+          Setting.showMessage("success", `Organization added successfully`);
+          this.setState({
+            organizations: Setting.prependRow(this.state.organizations, newOrganization),
+          });
+        }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `Organization failed to add: ${error}`);
+      });
+  }
+
+  deleteOrganization(i) {
+    OrganizationBackend.deleteOrganization(this.state.organizations[i])
+      .then((res) => {
+          Setting.showMessage("success", `Organization deleted successfully`);
+          this.setState({
+            organizations: Setting.deleteRow(this.state.organizations, i),
+          });
+        }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `Organization failed to delete: ${error}`);
+      });
+  }
+
+  renderTable(organizations) {
+    const columns = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+        width: '120px',
+        sorter: (a, b) => a.name.localeCompare(b.name),
+        render: (text, record, index) => {
+          return (
+            <a href={`/organizations/${text}`}>{text}</a>
+          )
+        }
+      },
+      {
+        title: 'Created Time',
+        dataIndex: 'createdTime',
+        key: 'createdTime',
+        width: '160px',
+        sorter: (a, b) => a.createdTime.localeCompare(b.createdTime),
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        }
+      },
+      {
+        title: 'Display Name',
+        dataIndex: 'displayName',
+        key: 'displayName',
+        // width: '100px',
+        sorter: (a, b) => a.displayName.localeCompare(b.displayName),
+      },
+      {
+        title: 'Website Url',
+        dataIndex: 'websiteUrl',
+        key: 'websiteUrl',
+        width: '300px',
+        sorter: (a, b) => a.websiteUrl.localeCompare(b.websiteUrl),
+      },
+      {
+        title: 'Action',
+        dataIndex: '',
+        key: 'op',
+        width: '170px',
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => Setting.goToLink(`/organizations/${record.name}`)}>Edit</Button>
+              <Popconfirm
+                title={`Sure to delete organization: ${record.name} ?`}
+                onConfirm={() => this.deleteOrganization(index)}
+              >
+                <Button style={{marginBottom: '10px'}} type="danger">Delete</Button>
+              </Popconfirm>
+            </div>
+          )
+        }
+      },
+    ];
+
+    return (
+      <div>
+        <Table columns={columns} dataSource={organizations} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
+               title={() => (
+                 <div>
+                   Organizations&nbsp;&nbsp;&nbsp;&nbsp;
+                   <Button type="primary" size="small" onClick={this.addOrganization.bind(this)}>Add</Button>
+                 </div>
+               )}
+               loading={organizations === null}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <Row style={{width: "100%"}}>
+          <Col span={1}>
+          </Col>
+          <Col span={22}>
+            {
+              this.renderTable(this.state.organizations)
+            }
+          </Col>
+          <Col span={1}>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default OrganizationListPage;

web/src/backend/OrganizationBackend.js

@@ -0,0 +1,42 @@
+import * as Setting from "../Setting";
+
+export function getOrganizations(owner) {
+  return fetch(`${Setting.ServerUrl}/api/get-organizations?owner=${owner}`, {
+    method: "GET",
+    credentials: "include"
+  }).then(res => res.json());
+}
+
+export function getOrganization(owner, name) {
+  return fetch(`${Setting.ServerUrl}/api/get-organization?id=${owner}/${encodeURIComponent(name)}`, {
+    method: "GET",
+    credentials: "include"
+  }).then(res => res.json());
+}
+
+export function updateOrganization(owner, name, organization) {
+  let newOrganization = Setting.deepCopy(organization);
+  return fetch(`${Setting.ServerUrl}/api/update-organization?id=${owner}/${encodeURIComponent(name)}`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(newOrganization),
+  }).then(res => res.json());
+}
+
+export function addOrganization(organization) {
+  let newOrganization = Setting.deepCopy(organization);
+  return fetch(`${Setting.ServerUrl}/api/add-organization`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(newOrganization),
+  }).then(res => res.json());
+}
+
+export function deleteOrganization(organization) {
+  let newOrganization = Setting.deepCopy(organization);
+  return fetch(`${Setting.ServerUrl}/api/delete-organization`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(newOrganization),
+  }).then(res => res.json());
+}