From b13ec279814a61c0de3a108a70384989928869b2 Mon Sep 17 00:00:00 2001
From: Yang Luo <hsluoyz@qq.com>
Date: Sun, 20 Dec 2020 23:33:38 +0800
Subject: [PATCH] Add providers to app.

---
 web/src/ApplicationEditPage.js  | 30 ++++++++++++++++++++++++------
 web/src/ApplicationListPage.js  |  2 +-
 web/src/OrganizationEditPage.js |  2 --
 web/src/ProviderEditPage.js     |  2 --
 web/src/UserEditPage.js         |  2 --
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index fd92677f..3077a28c 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -1,8 +1,11 @@
 import React from "react";
-import {Button, Card, Col, Input, Row} from 'antd';
+import {Button, Card, Col, Input, Row, Select} from 'antd';
 import {LinkOutlined} from "@ant-design/icons";
 import * as ApplicationBackend from "./backend/ApplicationBackend";
 import * as Setting from "./Setting";
+import * as ProviderBackend from "./backend/ProviderBackend";
+
+const { Option } = Select;
 
 class ApplicationEditPage extends React.Component {
   constructor(props) {
@@ -11,13 +14,13 @@ class ApplicationEditPage extends React.Component {
       classes: props,
       applicationName: props.match.params.applicationName,
       application: null,
-      tasks: [],
-      resources: [],
+      providers: [],
     };
   }
 
   componentWillMount() {
     this.getApplication();
+    this.getProviders();
   }
 
   getApplication() {
@@ -29,6 +32,15 @@ class ApplicationEditPage extends React.Component {
       });
   }
 
+  getProviders() {
+    ProviderBackend.getProviders("admin")
+      .then((res) => {
+        this.setState({
+          providers: res,
+        });
+      });
+  }
+
   parseApplicationField(key, value) {
     // if ([].includes(key)) {
     //   value = Setting.myParseInt(value);
@@ -79,9 +91,15 @@ class ApplicationEditPage extends React.Component {
             Providers:
           </Col>
           <Col span={22} >
-            <Input value={this.state.application.providers} onChange={e => {
-              this.updateApplicationField('providers', e.target.value);
-            }} />
+            <Select mode="tags" style={{width: '100%'}}
+                    value={this.state.application.providers}
+                    onChange={value => {
+                      this.updateApplicationField('providers', value);
+                    }} >
+              {
+                this.state.providers.map((provider, index) => <Option key={index} value={provider.name}>{provider.name}</Option>)
+              }
+            </Select>
           </Col>
         </Row>
       </Card>
diff --git a/web/src/ApplicationListPage.js b/web/src/ApplicationListPage.js
index 4bf3151a..b4085079 100644
--- a/web/src/ApplicationListPage.js
+++ b/web/src/ApplicationListPage.js
@@ -100,7 +100,7 @@ class ApplicationListPage extends React.Component {
         title: 'Providers',
         dataIndex: 'providers',
         key: 'providers',
-        width: '150px',
+        width: '300px',
         sorter: (a, b) => a.providers.localeCompare(b.providers),
       },
       {
diff --git a/web/src/OrganizationEditPage.js b/web/src/OrganizationEditPage.js
index 42f81905..fcff8739 100644
--- a/web/src/OrganizationEditPage.js
+++ b/web/src/OrganizationEditPage.js
@@ -11,8 +11,6 @@ class OrganizationEditPage extends React.Component {
       classes: props,
       organizationName: props.match.params.organizationName,
       organization: null,
-      tasks: [],
-      resources: [],
     };
   }
 
diff --git a/web/src/ProviderEditPage.js b/web/src/ProviderEditPage.js
index 44924bcc..e07b621f 100644
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -11,8 +11,6 @@ class ProviderEditPage extends React.Component {
       classes: props,
       providerName: props.match.params.providerName,
       provider: null,
-      tasks: [],
-      resources: [],
     };
   }
 
diff --git a/web/src/UserEditPage.js b/web/src/UserEditPage.js
index 7c5367f9..43de5b4f 100644
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@@ -11,8 +11,6 @@ class UserEditPage extends React.Component {
       classes: props,
       userName: props.match.params.userName,
       user: null,
-      tasks: [],
-      resources: [],
     };
   }