add config page logic

.idea/workspace.xml

@@ -2,8 +2,10 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="93d86d6a-0860-401c-996e-30fc26553ffc" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/config/diff/index.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/app/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/config/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/index.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/config/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/index.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/schema/change/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/schema/change/index.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/schema/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/schema/index.js" afterDir="false" />
@@ -27,10 +29,10 @@
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
-          <entry key="css" value="10" />
+          <entry key="css" value="11" />
           <entry key="html" value="1" />
           <entry key="ico" value="1" />
-          <entry key="js" value="17" />
+          <entry key="js" value="21" />
           <entry key="json" value="4" />
           <entry key="lock" value="2" />
           <entry key="png" value="2" />
@@ -38,11 +40,11 @@
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
-          <entry key="CSS" value="10" />
+          <entry key="CSS" value="11" />
           <entry key="HTML" value="1" />
           <entry key="Image" value="3" />
           <entry key="JSON" value="4" />
-          <entry key="JavaScript" value="17" />
+          <entry key="JavaScript" value="21" />
           <entry key="yarn.lock" value="2" />
         </counts>
       </usages-collector>
@@ -53,14 +55,14 @@
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="css" value="307" />
-          <entry key="js" value="9475" />
+          <entry key="css" value="309" />
+          <entry key="js" value="13115" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
-          <entry key="CSS" value="307" />
-          <entry key="JavaScript" value="9475" />
+          <entry key="CSS" value="309" />
+          <entry key="JavaScript" value="13115" />
         </counts>
       </usages-collector>
     </session>
@@ -70,22 +72,28 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/app/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="627">
-              <caret line="33" column="33" lean-forward="true" selection-start-line="33" selection-start-column="33" selection-end-line="33" selection-end-column="33" />
+            <state relative-caret-position="848">
+              <caret line="189" column="21" lean-forward="true" selection-start-line="189" selection-start-column="21" selection-end-line="189" selection-end-column="21" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
+                <element signature="e#827#875#0" />
+                <element signature="e#959#1012#0" />
+                <element signature="e#967#1544#0" />
+                <element signature="e#1058#1636#0" />
+                <element signature="e#1114#1636#0" />
+                <element signature="e#3113#3488#0" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/schema/index.js">
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/serviceWorker.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1064">
-              <caret line="56" column="31" selection-start-line="56" selection-start-column="31" selection-end-line="56" selection-end-column="31" />
+            <state relative-caret-position="418">
+              <caret line="22" column="34" lean-forward="true" selection-start-line="22" selection-start-column="34" selection-end-line="22" selection-end-column="34" />
               <folding>
-                <element signature="e#0#39#0" expanded="true" />
+                <element signature="n#!!doc" expanded="true" />
               </folding>
             </state>
           </provider>
@@ -100,11 +108,11 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/config/index.js">
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/config/diff/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="709">
-              <caret line="104" column="50" selection-start-line="104" selection-start-column="50" selection-end-line="104" selection-end-column="50" />
+            <state relative-caret-position="1746">
+              <caret line="159" column="26" lean-forward="true" selection-start-line="159" selection-start-column="26" selection-end-line="159" selection-end-column="26" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -112,16 +120,11 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/public/logo.png">
-          <provider selected="true" editor-type-id="images" />
-        </entry>
-      </file>
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/config/index.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="247">
-              <caret line="13" column="1" selection-start-line="13" selection-start-column="1" selection-end-line="13" selection-end-column="1" />
+            <state relative-caret-position="361">
+              <caret line="19" lean-forward="true" selection-start-line="19" selection-end-line="19" />
             </state>
           </provider>
         </entry>
@@ -129,8 +132,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/schema/index.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="513">
-              <caret line="27" column="11" selection-start-line="27" selection-start-column="11" selection-end-line="27" selection-end-column="11" />
+            <state relative-caret-position="380">
+              <caret line="20" column="10" lean-forward="true" selection-start-line="20" selection-start-column="10" selection-end-line="20" selection-end-column="10" />
             </state>
           </provider>
         </entry>
@@ -138,8 +141,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-155">
-              <caret line="93" column="11" lean-forward="true" selection-start-line="93" selection-start-column="11" selection-end-line="93" selection-end-column="11" />
+            <state relative-caret-position="1064">
+              <caret line="56" column="31" lean-forward="true" selection-start-line="56" selection-start-column="31" selection-end-line="56" selection-end-column="31" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -147,6 +150,18 @@
           </provider>
         </entry>
       </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/index.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="171">
+              <caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
+              <folding>
+                <element signature="e#0#26#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/index.css">
           <provider selected="true" editor-type-id="text-editor">
@@ -157,12 +172,12 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/index.js">
+        <entry file="file://$PROJECT_DIR$/src/schema/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="171">
-              <caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
+            <state relative-caret-position="145">
+              <caret line="69" column="22" lean-forward="true" selection-start-line="69" selection-start-column="22" selection-end-line="69" selection-end-column="22" />
               <folding>
-                <element signature="e#0#26#0" expanded="true" />
+                <element signature="e#0#39#0" expanded="true" />
               </folding>
             </state>
           </provider>
@@ -191,6 +206,13 @@
       <find>addS</find>
       <find>tableName</find>
       <find>schemaName</find>
+      <find>config</find>
+      <find>changeConfig</find>
+      <find>add Sc</find>
+      <find>Input</find>
+      <find>changeName</find>
+      <find>ADD SC</find>
+      <find>add</find>
     </findStrings>
   </component>
   <component name="Git.Settings">
@@ -213,9 +235,12 @@
         <option value="$PROJECT_DIR$/src/app/App.js" />
         <option value="$PROJECT_DIR$/src/index.js" />
         <option value="$PROJECT_DIR$/src/schema/index.css" />
-        <option value="$PROJECT_DIR$/src/config/index.js" />
+        <option value="$PROJECT_DIR$/src/config/index.css" />
+        <option value="$PROJECT_DIR$/src/config/change/index.js" />
         <option value="$PROJECT_DIR$/src/schema/index.js" />
         <option value="$PROJECT_DIR$/src/schema/change/index.js" />
+        <option value="$PROJECT_DIR$/src/config/index.js" />
+        <option value="$PROJECT_DIR$/src/config/diff/index.js" />
         <option value="$PROJECT_DIR$/src/app/index.js" />
       </list>
     </option>
@@ -237,8 +262,8 @@
     </packageJsonPaths>
   </component>
   <component name="ProjectFrameBounds">
-    <option name="x" value="804" />
-    <option name="y" value="133" />
+    <option name="x" value="497" />
+    <option name="y" value="31" />
     <option name="width" value="2063" />
     <option name="height" value="1341" />
   </component>
@@ -278,7 +303,14 @@
               <item name="online" type="b2602c69:ProjectViewProjectNode" />
               <item name="online" type="462c0819:PsiDirectoryNode" />
               <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="graphiql" type="462c0819:PsiDirectoryNode" />
+              <item name="config" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="online" type="b2602c69:ProjectViewProjectNode" />
+              <item name="online" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="config" type="462c0819:PsiDirectoryNode" />
+              <item name="diff" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
               <item name="online" type="b2602c69:ProjectViewProjectNode" />
@@ -343,15 +375,15 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1540954591627</updated>
-      <workItem from="1540954593719" duration="50063000" />
+      <workItem from="1540954593719" duration="68432000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="50063000" />
+    <option name="totallyTimeSpent" value="68432000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="804" y="133" width="2063" height="1341" extended-state="0" />
+    <frame x="497" y="31" width="2063" height="1341" extended-state="0" />
     <editor active="true" />
     <layout>
       <window_info id="npm" side_tool="true" />
@@ -360,10 +392,10 @@
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Terminal" visible="true" weight="0.20176141" />
+      <window_info anchor="bottom" id="Terminal" weight="0.3002402" />
       <window_info anchor="bottom" id="Event Log" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
-      <window_info anchor="bottom" id="Find" order="1" weight="0.32952547" />
+      <window_info anchor="bottom" id="Find" order="1" weight="0.47317854" />
       <window_info anchor="bottom" id="Run" order="2" />
       <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
@@ -424,16 +456,6 @@
     <entry file="file://$PROJECT_DIR$/package-lock.json">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/serviceWorker.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="418">
-          <caret line="22" column="34" lean-forward="true" selection-start-line="22" selection-start-column="34" selection-end-line="22" selection-end-column="34" />
-          <folding>
-            <element signature="n#!!doc" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/public/favicon.ico">
       <provider selected="true" editor-type-id="images" />
     </entry>
@@ -452,81 +474,107 @@
     <entry file="file://$PROJECT_DIR$/src/schema/index.js">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.css">
+    <entry file="file://$PROJECT_DIR$/public/logo.png">
+      <provider selected="true" editor-type-id="images" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="266">
-          <caret line="14" lean-forward="true" selection-start-line="14" selection-end-line="14" />
+        <state relative-caret-position="124">
+          <caret line="16" column="23" lean-forward="true" selection-start-line="16" selection-start-column="23" selection-end-line="16" selection-end-column="23" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.js">
+    <entry file="file://$PROJECT_DIR$/src/schema/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="171">
-          <caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
+        <state relative-caret-position="380">
+          <caret line="20" column="10" lean-forward="true" selection-start-line="20" selection-start-column="10" selection-end-line="20" selection-end-column="10" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/config/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="247">
-          <caret line="13" column="1" selection-start-line="13" selection-start-column="1" selection-end-line="13" selection-end-column="1" />
+        <state relative-caret-position="361">
+          <caret line="19" lean-forward="true" selection-start-line="19" selection-end-line="19" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/public/logo.png">
-      <provider selected="true" editor-type-id="images" />
+    <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="1064">
+          <caret line="56" column="31" lean-forward="true" selection-start-line="56" selection-start-column="31" selection-end-line="56" selection-end-column="31" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/config/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="709">
-          <caret line="104" column="50" selection-start-line="104" selection-start-column="50" selection-end-line="104" selection-end-column="50" />
+        <state relative-caret-position="551">
+          <caret line="54" column="20" lean-forward="true" selection-start-line="54" selection-start-column="20" selection-end-line="54" selection-end-column="20" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/index.css">
+    <entry file="file://$PROJECT_DIR$/src/app/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="513">
-          <caret line="27" column="11" selection-start-line="27" selection-start-column="11" selection-end-line="27" selection-end-column="11" />
+        <state relative-caret-position="848">
+          <caret line="189" column="21" lean-forward="true" selection-start-line="189" selection-start-column="21" selection-end-line="189" selection-end-column="21" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+            <element signature="e#827#875#0" />
+            <element signature="e#959#1012#0" />
+            <element signature="e#967#1544#0" />
+            <element signature="e#1058#1636#0" />
+            <element signature="e#1114#1636#0" />
+            <element signature="e#3113#3488#0" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
+    <entry file="file://$PROJECT_DIR$/src/serviceWorker.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-155">
-          <caret line="93" column="11" lean-forward="true" selection-start-line="93" selection-start-column="11" selection-end-line="93" selection-end-column="11" />
+        <state relative-caret-position="418">
+          <caret line="22" column="34" lean-forward="true" selection-start-line="22" selection-start-column="34" selection-end-line="22" selection-end-column="34" />
           <folding>
-            <element signature="e#0#39#0" expanded="true" />
+            <element signature="n#!!doc" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/index.js">
+    <entry file="file://$PROJECT_DIR$/src/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="627">
-          <caret line="33" column="33" lean-forward="true" selection-start-line="33" selection-start-column="33" selection-end-line="33" selection-end-column="33" />
+        <state relative-caret-position="171">
+          <caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
           <folding>
-            <element signature="e#0#39#0" expanded="true" />
+            <element signature="e#0#26#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
+    <entry file="file://$PROJECT_DIR$/src/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="124">
-          <caret line="16" column="23" lean-forward="true" selection-start-line="16" selection-start-column="23" selection-end-line="16" selection-end-column="23" />
+        <state relative-caret-position="266">
+          <caret line="14" lean-forward="true" selection-start-line="14" selection-end-line="14" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/schema/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1064">
-          <caret line="56" column="31" selection-start-line="56" selection-start-column="31" selection-end-line="56" selection-end-column="31" />
+        <state relative-caret-position="145">
+          <caret line="69" column="22" lean-forward="true" selection-start-line="69" selection-start-column="22" selection-end-line="69" selection-end-column="22" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/config/diff/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="1746">
+          <caret line="159" column="26" lean-forward="true" selection-start-line="159" selection-start-column="26" selection-end-line="159" selection-end-column="26" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>

src/app/index.js

@@ -39,6 +39,26 @@ class App extends Component {
             }
           ]
         },
+        {
+          name: 'store',
+          tables: [
+            {
+              name: 'custom',
+              cols: [
+                {
+                  name: 'id',
+                  type: 'string',
+                  desc: 'key'
+                },
+                {
+                  name: 'wealth',
+                  type: 'int',
+                  desc: 'description'
+                }
+              ]
+            }
+          ]
+        },
         {
           name: 'online',
           tables: [
@@ -90,7 +110,32 @@ class App extends Component {
           ]
         }
       ],
-
+      configs: [
+        {
+          name: 'Tenc and Mongo',
+          schemas: ['magazine', 'store'],
+          cloudServer: 'tencent',
+          database: 'mongodb',
+          configLocal: {
+            SCF_secretID: 'scfscfscfididididiid',
+            SCF_secretKey: 'scfscfscfkeykeykeykeykey',
+            API_secretID: 'apiapiapiididididiid',
+            API_secretKey: 'apiapipaikeykeykey'
+          }
+        },
+        {
+          name: 'Ali but nedb',
+          schemas: ['online'],
+          cloudServer: 'Aliyun',
+          database: 'nedb',
+          configLocal: {
+            SCF_secretID: 'sididid34idiid',
+            SCF_secretKey: 'scfkeyk243weeykkeykey',
+            API_secretID: 'iidididdapi3eapiapidiid',
+            API_secretKey: 'apiapipav_ikeykeykey'
+          }
+        }
+      ]
     }
   }
 
@@ -127,6 +172,35 @@ class App extends Component {
     })
   };
 
+  addConfig = (content, name) => {
+    if(content === 'new') {
+      this.setState({
+        configs: [...this.state.configs, {
+          name,
+          schemas: [],
+          cloudServer: '',
+          database: '',
+          configLocal: {}
+        }]
+      })
+    } else {
+      let configs = this.state.configs;
+      console.log(this.state.configs.findIndex(obj => obj.name === name));
+      configs.splice(this.state.configs.findIndex(obj => obj.name === name), 1, content)
+      this.setState({
+        configs
+      })
+    }
+  };
+
+  deleteConfig = (name) => {
+    let configs = this.state.configs;
+    configs.splice(this.state.configs.findIndex(obj => obj.name === name), 1);
+    this.setState({
+      configs
+    });
+  };
+
   handleClick = (e) => {
     this.setState({
       current: e.key,
@@ -141,7 +215,6 @@ class App extends Component {
     }).then(response => response.json());
   };
 
-
   render() {
     return (
       <div>
@@ -174,7 +247,7 @@ class App extends Component {
                 case 'schema':
                   return <Schema addSchema={this.addSchema} addTable={this.addTable} deleteTable={this.deleteTable} schemas={this.state.schemas}/>;
                 case 'config':
-                  return <Config schemas={this.state.schemas}/>;
+                  return <Config addConfig={this.addConfig} deleteConfig={this.deleteConfig} schemas={this.state.schemas} configs={this.state.configs}/>;
                 default:
                   return <GraphiQL fetcher={this.graphQLFetcher}/>
               }

src/config/diff/index.js

@@ -0,0 +1,169 @@
+import React, {Component} from 'react';
+
+import {Input, Select, Button} from 'antd';
+
+const Option = Select.Option;
+
+class Diff extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      config: props.config || {
+        name: '',
+        schemas: [],
+        cloudServer: '',
+        database: '',
+        configLocal: {}
+      }
+    };
+  }
+
+  changeName = (e) => {
+    this.setState({
+      config: {
+        ...this.state.config,
+        name: e.target.value
+      }
+    })
+  };
+
+  changeSchemas = (value) => {
+    this.setState({
+      config: {
+        ...this.state.config,
+        schemas: value
+      }
+    })
+  };
+
+  changeCS = (value) => {
+    this.setState({
+      config: {
+        ...this.state.config,
+        cloudServer: value
+      }
+    })
+  };
+
+  changeConfigLocal = (label) => {
+    return (e) => {
+      this.setState({
+        config: {
+          ...this.state.config,
+          configLocal: {...this.state.config.configLocal, [label]: e.target.value}
+        }
+      })
+    };
+  };
+
+  changeDataBase = (value) => {
+    this.setState({
+      config: {
+        ...this.state.config,
+        database: value
+      }
+    })
+  };
+
+  componentWillReceiveProps(next) {
+    this.setState({
+      config: next.config
+    });
+    console.log(222);
+  };
+
+  render() {
+    return (
+      <div style={{margin: 10}}>
+        <div style={{marginTop: 10}}>
+          <p style={{fontSize: 30}}>Local Config</p>
+
+          <div style={{marginBottom: 30}}>
+            <p><b>Name: </b></p>
+            <Input disabled value={this.state.config.name} style={{width: 200}} onChange={this.changeName}/>
+          </div>
+
+          <div style={{marginBottom: 30}}>
+            <p><b>Schemas:</b></p>
+
+            <Select
+              mode="tags"
+              placeholder="Please select"
+              value={this.state.config.schemas}
+              style={{width: 300}}
+              onChange={this.changeSchemas}
+            >
+              {
+                this.props.schemas.map((schema) => {
+                  return <Option key={schema.name} value={schema.name}>{schema.name}</Option>
+                })
+              }
+            </Select>
+          </div>
+
+        </div>
+
+        <div style={{marginTop: 30}}>
+          <p style={{fontSize: 30}}>Cloud Config</p>
+
+          <div style={{marginBottom: 30}}>
+            <p><b>Cloud Server providers</b></p>
+            <Select defaultValue="tencent" value={this.state.config.cloudServer} style={{width: 120}} onChange={this.changeCS}>
+              <Option value="tencent">Tencent</Option>
+              <Option value="aliyun">Aliyun</Option>
+              <Option value="huawei">Huawei</Option>
+            </Select>
+          </div>
+
+          <div style={{marginBottom: 30}}>
+            <p><b>Serverless Cloud Function</b></p>
+            <div>
+              <div>
+                secretID: <Input value={this.state.config.configLocal.SCF_secretID} style={{width: 200}}
+                                 onChange={this.changeConfigLocal('SCF_secretID')}/>
+              </div>
+              <div>
+                secretKey: <Input value={this.state.config.configLocal.SCF_secretKey} style={{width: 200}}
+                                  onChange={this.changeConfigLocal('SCF_secretKey')}/>
+              </div>
+            </div>
+          </div>
+
+          <div style={{marginBottom: 30}}>
+            <p><b>API</b></p>
+            <div>
+              <div>
+                secretID: <Input value={this.state.config.configLocal.API_secretID} style={{width: 200}}
+                                 onChange={this.changeConfigLocal('API_secretID')}/>
+              </div>
+              <div>
+                secretKey: <Input value={this.state.config.configLocal.API_secretKey} style={{width: 200}}
+                                  onChange={this.changeConfigLocal('API_secretKey')}/>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <div style={{marginBottom: 30}}>
+          <p><b>Database</b></p>
+          <Select defaultValue="mongodb" value={this.state.config.database} style={{width: 120}}
+                  onChange={this.changeDataBase}>
+            <Option value="mongodb">MongoDB</Option>
+            <Option value="nedb">nedb</Option>
+            <Option value="postgres">postgres</Option>
+          </Select>
+        </div>
+
+        <Button type="primary" onClick={()=>{
+          this.props.addConfig(this.state.config, this.state.config.name);
+        }}>SUBMIT</Button>
+        <Button type="danger" onClick={() => {
+          this.props.deleteConfig(this.state.config.name);
+        }}>DELETE</Button>
+      </div>
+    )
+  }
+}
+
+export default Diff;

src/config/index.css

@@ -11,4 +11,9 @@
     font-weight: bold;
     font-size: 16px;
     margin: 10px 0 0 5px;
-}
+}
+
+p.show {
+    margin: 5px 0 3px 10px;
+    cursor: pointer;
+}

src/config/index.js

@@ -1,108 +1,86 @@
 import React, {Component} from 'react';
 
-import {Row, Col, Input, Select, Button} from 'antd';
+import {Row, Col, Input, Icon, Button} from 'antd';
 
 import './index.css';
+import Diff from './diff';
 
 const Search = Input.Search;
-const Option = Select.Option;
 
 
-class Index extends Component {
+
+class Config extends Component {
   constructor(props) {
-    super();
+    super(props);
     this.state = {
-      currentSchema: 'magazine',
+      noConfig: !props.configs.length,
+      config: '',
+      switch: true
+    };
+    if(!this.state.noConfig) {
+      this.state.config = props.configs[0];
     }
   }
 
-  changeSchema = (schema) => {
+  switchConfig = (name) => {
     return () => {
       this.setState({
-        currentSchema: schema
+        config: this.props.configs.find(obj=> obj.name === name)
       })
     }
   };
 
-  handleCSChange = () => {
-
-  };
 
   render() {
     return (
       <div>
         <Row>
           <Col span={6}>
+            <div className='warpper'>
+              <div className='current'>{this.state.config.name}</div>
+              {
+                this.state.switch?
+                  <Button className='add' type='dashed' icon="plus" onClick={()=>{this.setState({switch: false})}}>Add Config</Button> :
+                  <Search
+                    className='add'
+                    placeholder="input config_name"
+                    enterButton="Confirm"
+                    onSearch={value => {
+                      this.setState({
+                        switch: true,
+                      });
+                      this.props.addConfig('new', value);
+                    }}
+                    disabled={this.state.switch}
+                  />
+              }
+            </div>
+
 
-            <div className='current'>{this.state.currentSchema}</div>
             <Search
-              placeholder="search schema"
+              placeholder="search configs"
               enterButton
               onSearch={value => console.log(value)}
               style={{marginTop: 10}}
             />
             {
-              this.props.schemas.map((schema) => {
-                return <div key={schema.name} onClick={this.changeSchema(schema.name)} className='title'>
+              this.props.configs.map((config) => {
+                return <div key={config.name} onClick={this.switchConfig(config.name)} className='title'>
                   <Row>
-                    <Col span={22}>Schemas: ({schema.name})</Col>
+                    <Col span={22}>Configs: ({config.name})({config.schemas.length})</Col>
                   </Row>
+                    {
+                      config.schemas.map((schema)=>{
+                        return <p key={schema} className='show'><Icon type="database" theme="filled"/>{schema}</p>
+                      })
+                    }
                 </div>
               })
             }
 
           </Col>
           <Col span={18}>
-            You are in config of <b>{this.state.currentSchema}</b>
-            <p style={{fontSize: 30}}>Cloud Config</p>
-            <div style={{marginBottom: 30}}>
-              <p><b>Cloud Server providers</b></p>
-              <Select defaultValue="tencent" style={{ width: 120 }} onChange={this.handleCSChange}>
-                <Option value="tencent">Tencent</Option>
-                <Option disabled value="aliyun">Aliyun</Option>
-                <Option disabled value="huawei">Huawei</Option>
-              </Select>
-            </div>
-
-
-            <div>
-
-              <div style={{marginBottom: 30}}>
-                <p><b>Serverless Cloud Function</b></p>
-                <div>
-                  <div>
-                    secretID: <Input style={{width: 200}}/>
-                  </div>
-                  <div>
-                    secretKey: <Input style={{width: 200}}/>
-                  </div>
-                </div>
-              </div>
-
-              <div style={{marginBottom: 30}}>
-                <p><b>API</b></p>
-                <div>
-                  <div>
-                    secretID: <Input style={{width: 200}}/>
-                  </div>
-                  <div>
-                    secretKey: <Input style={{width: 200}}/>
-                  </div>
-                </div>
-              </div>
-
-            </div>
-
-            <div style={{marginBottom: 30}}>
-              <p><b>Database</b></p>
-              <Select defaultValue="mongodb" style={{ width: 120 }} onChange={this.handleCSChange}>
-                <Option value="mongodb">MongoDB</Option>
-                <Option disabled value="nedb">nedb</Option>
-                <Option disabled value="postgres">postgres</Option>
-              </Select>
-            </div>
-
-            <Button type="primary">submit</Button>
+            <Diff addConfig={this.props.addConfig} deleteConfig={this.props.deleteConfig} config={this.state.config} schemas={this.props.schemas}/>
           </Col>
         </Row>
       </div>
@@ -111,4 +89,4 @@ class Index extends Component {
 
 }
 
-export default Index;
+export default Config;

src/schema/change/index.js

@@ -133,7 +133,7 @@ class Change extends Component {
         <Button type="primary" onClick={() => {
           this.props.addTable(this.state.columns, this.state.currentTable, this.state.currentSchema);
         }}>
-          Submit
+          SUBMIT
         </Button>
         <Button type="danger" onClick={() => {
           this.props.deleteTable(this.state.currentTable, this.state.currentSchema);

src/schema/index.js

@@ -90,8 +90,7 @@ class Schema extends Component {
                   </Row>
                   {
                     schema.tables.map((table) =>
-                      <p onClick={this.changeTable(table.name)} key={table.name} className='show'><Icon type="database"
-                                                                                                        theme="filled"/> {table.name}
+                      <p onClick={this.changeTable(table.name)} key={table.name} className='show'><Icon type="ordered-list" theme="outlined" /> {table.name}
                       </p>
                     )
                   }