Add user 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 UserListPage from "./UserListPage";
+import UserEditPage from "./UserEditPage";
 
 const { Header, Footer } = Layout;
 
@@ -30,6 +32,8 @@ class App extends Component {
       selectedMenuKey: 0,
       account: undefined,
     };
+
+    Setting.initServerUrl();
   }
 
   componentWillMount() {
@@ -42,6 +46,8 @@ class App extends Component {
     const uri = location.pathname;
     if (uri === '/') {
       this.setState({ selectedMenuKey: 0 });
+    } else if (uri.includes('users')) {
+      this.setState({ selectedMenuKey: 1 });
     } else {
       this.setState({ selectedMenuKey: -1 });
     }
@@ -170,9 +176,9 @@ class App extends Component {
   renderMenu() {
     let res = [];
 
-    if (this.state.account === null || this.state.account === undefined) {
-      return [];
-    }
+    // if (this.state.account === null || this.state.account === undefined) {
+    //   return [];
+    // }
 
     res.push(
       <Menu.Item key="0">
@@ -183,8 +189,8 @@ class App extends Component {
     );
     res.push(
       <Menu.Item key="1">
-        <a href="/program-edit">
-          Programs
+        <a href="/users">
+          Users
         </a>
       </Menu.Item>
     );
@@ -239,7 +245,8 @@ class App extends Component {
           </Menu>
         </Header>
         <Switch>
-          {/*<Route exact path="/" component={ProgramPage}/>*/}
+          <Route exact path="/users" component={UserListPage}/>
+          <Route exact path="/users/:userName" component={UserEditPage}/>
         </Switch>
       </div>
     )

web/src/Setting.js

@@ -21,7 +21,7 @@ export let ServerUrl = '';
 export function initServerUrl() {
   const hostname = window.location.hostname;
   if (hostname === 'localhost') {
-    ServerUrl = `http://${hostname}:10000`;
+    ServerUrl = `http://${hostname}:7000`;
   }
 }
 
@@ -33,6 +33,17 @@ export function parseJson(s) {
   }
 }
 
+export function myParseInt(i) {
+  const res = parseInt(i);
+  return isNaN(res) ? 0 : res;
+}
+
+export function openLink(link) {
+  // this.props.history.push(link);
+  const w = window.open('about:blank');
+  w.location.href = link;
+}
+
 export function goToLink(link) {
   window.location.href = link;
 }
@@ -47,11 +58,46 @@ export function showMessage(type, text) {
   }
 }
 
+export function deepCopy(obj) {
+  return Object.assign({}, obj);
+}
+
+export function addRow(array, row) {
+  return [...array, row];
+}
+
+export function prependRow(array, row) {
+  return [row, ...array];
+}
+
+export function deleteRow(array, i) {
+  // return array = array.slice(0, i).concat(array.slice(i + 1));
+  return [...array.slice(0, i), ...array.slice(i + 1)];
+}
+
+export function swapRow(array, i, j) {
+  return [...array.slice(0, i), array[j], ...array.slice(i + 1, j), array[i], ...array.slice(j + 1)];
+}
+
 export function isMobile() {
   // return getIsMobileView();
   return isMobileDevice;
 }
 
+export function getFormattedDate(date) {
+  if (date === undefined) {
+    return null;
+  }
+
+  date = date.replace('T', ' ');
+  date = date.replace('+08:00', ' ');
+  return date;
+}
+
+export function getFormattedDateShort(date) {
+  return date.slice(0, 10);
+}
+
 export function getShortName(s) {
   return s.split('/').slice(-1)[0];
 }

web/src/UserEditPage.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 UserBackend from "./backend/UserBackend";
+import * as Setting from "./Setting";
+
+class UserEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      userName: props.match.params.userName,
+      user: null,
+      tasks: [],
+      resources: [],
+    };
+  }
+
+  componentWillMount() {
+    this.getUser();
+  }
+
+  getUser() {
+    UserBackend.getUser("admin", this.state.userName)
+      .then((user) => {
+        this.setState({
+          user: user,
+        });
+      });
+  }
+
+  parseUserField(key, value) {
+    // if ([].includes(key)) {
+    //   value = Setting.myParseInt(value);
+    // }
+    return value;
+  }
+
+  updateUserField(key, value) {
+    value = this.parseUserField(key, value);
+
+    let user = this.state.user;
+    user[key] = value;
+    this.setState({
+      user: user,
+    });
+  }
+
+  renderUser() {
+    return (
+      <Card size="small" title={
+        <div>
+          Edit User&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button type="primary" onClick={this.submitUserEdit.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.user.name} onChange={e => {
+              this.updateUserField('name', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '10px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            Title:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.title} onChange={e => {
+              this.updateUserField('title', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '10px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            链接：
+          </Col>
+          <Col span={22} >
+            <Input prefix={<LinkOutlined/>} value={this.state.user.url} onChange={e => {
+              this.updateUserField('url', e.target.value);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    )
+  }
+
+  submitUserEdit() {
+    let user = Setting.deepCopy(this.state.user);
+    UserBackend.updateUser(this.state.user.owner, this.state.userName, user)
+      .then((res) => {
+        if (res) {
+          Setting.showMessage("success", `Successfully saved`);
+          this.setState({
+            userName: this.state.user.name,
+          });
+          this.props.history.push(`/users/${this.state.user.name}`);
+        } else {
+          Setting.showMessage("error", `failed to save: server side failure`);
+          this.updateUserField('name', this.state.userName);
+        }
+      })
+      .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.user !== null ? this.renderUser() : 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.submitUserEdit.bind(this)}>Save</Button>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default UserEditPage;

web/src/UserListPage.js

@@ -0,0 +1,170 @@
+import React from "react";
+import {Button, Col, Popconfirm, Row, Table} from 'antd';
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as UserBackend from "./backend/UserBackend";
+
+class UserListPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      users: null,
+    };
+  }
+
+  componentWillMount() {
+    this.getUsers();
+  }
+
+  getUsers() {
+    UserBackend.getUsers("admin")
+      .then((res) => {
+        this.setState({
+          users: res,
+        });
+      });
+  }
+
+  newUser() {
+    return {
+      owner: "admin", // this.props.account.username,
+      name: `user_${this.state.users.length}`,
+      title: `New User - ${this.state.users.length}`,
+      createdTime: moment().format(),
+      Url: "",
+    }
+  }
+
+  addUser() {
+    const newUser = this.newUser();
+    UserBackend.addUser(newUser)
+      .then((res) => {
+          Setting.showMessage("success", `User added successfully`);
+          this.setState({
+            users: Setting.prependRow(this.state.users, newUser),
+          });
+        }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `User failed to add: ${error}`);
+      });
+  }
+
+  deleteUser(i) {
+    UserBackend.deleteUser(this.state.users[i])
+      .then((res) => {
+          Setting.showMessage("success", `User deleted successfully`);
+          this.setState({
+            users: Setting.deleteRow(this.state.users, i),
+          });
+        }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `User failed to delete: ${error}`);
+      });
+  }
+
+  renderTable(users) {
+    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={`/users/${text}`}>{text}</a>
+          )
+        }
+      },
+      {
+        title: 'Title',
+        dataIndex: 'title',
+        key: 'title',
+        // width: '80px',
+        sorter: (a, b) => a.title.localeCompare(b.title),
+      },
+      {
+        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: 'Url',
+        dataIndex: 'url',
+        key: 'url',
+        width: '150px',
+        sorter: (a, b) => a.url.localeCompare(b.url),
+        render: (text, record, index) => {
+          return (
+            <a target="_blank" href={text}>
+              {
+                text
+              }
+            </a>
+          )
+        }
+      },
+      {
+        title: 'Action',
+        dataIndex: '',
+        key: 'op',
+        width: '220px',
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => Setting.goToLink(`/users/${record.name}`)}>Edit</Button>
+              <Popconfirm
+                title={`Sure to delete user: ${record.name} ?`}
+                onConfirm={() => this.deleteUser(index)}
+              >
+                <Button style={{marginBottom: '10px'}} type="danger">Delete</Button>
+              </Popconfirm>
+            </div>
+          )
+        }
+      },
+    ];
+
+    return (
+      <div>
+        <Table columns={columns} dataSource={users} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
+               title={() => (
+                 <div>
+                   Users&nbsp;&nbsp;&nbsp;&nbsp;
+                   <Button type="primary" size="small" onClick={this.addUser.bind(this)}>Add</Button>
+                 </div>
+               )}
+               loading={users === null}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <Row style={{width: "100%"}}>
+          <Col span={1}>
+          </Col>
+          <Col span={22}>
+            {
+              this.renderTable(this.state.users)
+            }
+          </Col>
+          <Col span={1}>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default UserListPage;

web/src/backend/UserBackend.js

@@ -0,0 +1,45 @@
+import * as Setting from "../Setting";
+
+export function getUsers(owner) {
+  return fetch(`${Setting.ServerUrl}/api/get-users?owner=${owner}`, {
+    method: "GET",
+    credentials: "include"
+  }).then(res => res.json());
+}
+
+export function getUser(owner, name) {
+  return fetch(`${Setting.ServerUrl}/api/get-user?id=${owner}/${encodeURIComponent(name)}`, {
+    method: "GET",
+    credentials: "include"
+  }).then(res => res.json());
+}
+
+export function updateUser(owner, name, user) {
+  let newUser = Setting.deepCopy(user);
+  newUser.ticket = JSON.stringify(user.ticket);
+  return fetch(`${Setting.ServerUrl}/api/update-user?id=${owner}/${encodeURIComponent(name)}`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(newUser),
+  }).then(res => res.json());
+}
+
+export function addUser(user) {
+  let newUser = Setting.deepCopy(user);
+  newUser.ticket = JSON.stringify(user.ticket);
+  return fetch(`${Setting.ServerUrl}/api/add-user`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(newUser),
+  }).then(res => res.json());
+}
+
+export function deleteUser(user) {
+  let newUser = Setting.deepCopy(user);
+  newUser.ticket = JSON.stringify(user.ticket);
+  return fetch(`${Setting.ServerUrl}/api/delete-user`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(newUser),
+  }).then(res => res.json());
+}

web/src/index.css

@@ -21,3 +21,11 @@ code {
   margin: 17px 10px 16px 20px;
   float: left;
 }
+
+.ant-table.ant-table-middle .ant-table-title, .ant-table.ant-table-middle .ant-table-footer, .ant-table.ant-table-middle thead > tr > th, .ant-table.ant-table-middle tbody > tr > td {
+  padding: 1px 8px !important;
+}
+
+.ant-list-sm .ant-list-item {
+  padding: 2px !important;
+}