Add application list and edit pages.

2025-07-15 03:43:51 +08:00 · 2020-12-20 23:24:09 +08:00
parent b9adda2277
commit 84c1f2634e
8 changed files with 532 additions and 2 deletions
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.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 ApplicationBackend from "./backend/ApplicationBackend";
+import * as Setting from "./Setting";
+
+class ApplicationEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      applicationName: props.match.params.applicationName,
+      application: null,
+      tasks: [],
+      resources: [],
+    };
+  }
+
+  componentWillMount() {
+    this.getApplication();
+  }
+
+  getApplication() {
+    ApplicationBackend.getApplication("admin", this.state.applicationName)
+      .then((application) => {
+        this.setState({
+          application: application,
+        });
+      });
+  }
+
+  parseApplicationField(key, value) {
+    // if ([].includes(key)) {
+    //   value = Setting.myParseInt(value);
+    // }
+    return value;
+  }
+
+  updateApplicationField(key, value) {
+    value = this.parseApplicationField(key, value);
+
+    let application = this.state.application;
+    application[key] = value;
+    this.setState({
+      application: application,
+    });
+  }
+
+  renderApplication() {
+    return (
+      <Card size="small" title={
+        <div>
+          Edit Application&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button type="primary" onClick={this.submitApplicationEdit.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.application.name} onChange={e => {
+              this.updateApplicationField('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.application.displayName} onChange={e => {
+              this.updateApplicationField('displayName', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            Providers:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.application.providers} onChange={e => {
+              this.updateApplicationField('providers', e.target.value);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    )
+  }
+
+  submitApplicationEdit() {
+    let application = Setting.deepCopy(this.state.application);
+    ApplicationBackend.updateApplication(this.state.application.owner, this.state.applicationName, application)
+      .then((res) => {
+        if (res) {
+          Setting.showMessage("success", `Successfully saved`);
+          this.setState({
+            applicationName: this.state.application.name,
+          });
+          this.props.history.push(`/applications/${this.state.application.name}`);
+        } else {
+          Setting.showMessage("error", `failed to save: server side failure`);
+          this.updateApplicationField('name', this.state.applicationName);
+        }
+      })
+      .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.application !== null ? this.renderApplication() : 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.submitApplicationEdit.bind(this)}>Save</Button>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default ApplicationEditPage;