update it

webui/src/components/Shared/Form.js

@@ -139,29 +139,6 @@ class Form extends Component {
     title: ""
   };
 
-  constructor(props) {
-    super(props);
-
-    this.state = this.getStateFromProps(props);
-  }
-
-  componentWillMount() {
-    this.setState(this.getStateFromProps(this.props));
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState(this.getStateFromProps(nextProps));
-  }
-
-  getStateFromProps(props) {
-    const disableSubmitButton = true;
-    const formData = "formData" in props ? props.formData : this.props.formData;
-    return {
-      disableSubmitButton,
-      formData
-    };
-  }
-
   handleSubmitButton = () => {
     this.submitButton.click();
   }
@@ -180,24 +157,20 @@ class Form extends Component {
 
   render() {
     const {
-      handleSubmitButton,
-      handleChange
+      handleSubmitButton
     } = this;
 
-    const {
-      disableSubmitButton
-    } = this.state;
-
     const {
       visible,
       title,
-      isLoading,
-      isPending,
       schema,
       uiSchema,
       formData,
+      isLoading,
+      disableSubmitButton,
       validate,
       onHide,
+      onChange,
       onSubmit
     } = this.props;
 
@@ -215,7 +188,8 @@ class Form extends Component {
               <JsonSchemaForm
                 schema={schema}
                 uiSchema={uiSchema}
-                formData={this.state.formData}
+                formData={formData}
+                disableSubmitButton={disableSubmitButton}
                 fields={fields}
                 FieldTemplate={CustomFieldTemplate}
                 liveValidate
@@ -223,7 +197,7 @@ class Form extends Component {
                 showErrorList={false}
                 transformErrors={transformErrors}
                 autocomplete="off"
-                onChange={handleChange}
+                onChange={data => onChange(data.formData, data.errors)}
                 onSubmit={data => onSubmit(data.formData)}>
                 <div>
                   <button type="submit" ref={(el => this.submitButton = el)}/>
@@ -231,7 +205,7 @@ class Form extends Component {
                     button {
                       display: none;
                     }
-                  `}</style>
+                  kkk`}</style>
                 </div>
               </JsonSchemaForm>
             }
@@ -240,7 +214,7 @@ class Form extends Component {
             <Button clear onClick={onHide}>
               CANCEL
             </Button>
-            <Button clear disabled={isPending || disableSubmitButton} onClick={handleSubmitButton}>
+            <Button clear disabled={disableSubmitButton} onClick={handleSubmitButton}>
               SAVE
             </Button>
           </Footer>

webui/src/components/Subscriber/Edit.js

@@ -152,33 +152,6 @@ const uiSchema = {
   }
 }
 
-const formData = {
-  "security": {
-    k: "465B5CE8 B199B49F AA5F0A2E E238A6BC",
-    op: "5F1D289C 5D354D0A 140C2548 F5F3E3BA",
-    amf: "8000"
-  },
-  "ue_ambr": {
-    "max_bandwidth_ul": 1024000,
-    "max_bandwidth_dl": 1024000
-  },
-  "pdn": [
-    {
-      "apn": "internet",
-      "qos": {
-        "qci": 9,
-        "arp": {
-          "priority_level": 8
-        }
-      },
-      "pdn_ambr": {
-        "max_bandwidth_ul": 1024000,
-        "max_bandwidth_dl": 1024000
-      }
-    }
-  ]
-}
-
 class Edit extends Component {
   static propTypes = {
     visible: PropTypes.bool, 
@@ -268,9 +241,11 @@ class Edit extends Component {
     const {
       visible,
       action,
+      formData,
       isLoading,
-      isPending,
+      disableSubmitButton,
       onHide,
+      onChange,
       onSubmit
     } = this.props;
 
@@ -281,10 +256,11 @@ class Edit extends Component {
         schema={this.state.schema}
         uiSchema={this.state.uiSchema}
         isLoading={isLoading}
-        isPending={isPending}
-        formData={(action === 'update') ? this.props.formData : formData}
+        formData={formData}
+        disableSubmitButton={disableSubmitButton}
         validate={validate}
         onHide={onHide}
+        onChange={onChange}
         onSubmit={onSubmit} />
     )
   }

webui/src/containers/Subscriber/Collection.js

@@ -37,6 +37,7 @@ class Collection extends Component {
   componentWillReceiveProps(nextProps) {
     const { subscribers } = nextProps
     const { dispatch } = this.props
+
     if (subscribers.needsFetch) {
       dispatch(subscribers.fetch)
     }
@@ -113,7 +114,7 @@ class Collection extends Component {
 
     return (
       <Layout.Content>
-        {data.length !== 0 && <Subscriber.Search 
+        {Object.keys(data).length > 0 && <Subscriber.Search 
           onChange={handleSearchChange}
           value={search}
           onClear={handleSearchClear} />}
@@ -126,7 +127,7 @@ class Collection extends Component {
         />
         {isLoading && <Spinner md />}
         <Blank
-          visible={!isLoading && !data.length}
+          visible={!isLoading && !(Object.keys(data).length > 0)}
           title="ADD A SUBSCRIBER"
           body="You have no subscribers... yet!"
           onTitle={documentHandler.actions.create}

webui/src/containers/Subscriber/Document.js

@@ -21,6 +21,33 @@ import {
 
 import { Subscriber } from 'components';
 
+const formData = {
+  "security": {
+    k: "465B5CE8 B199B49F AA5F0A2E E238A6BC",
+    op: "5F1D289C 5D354D0A 140C2548 F5F3E3BA",
+    amf: "8000"
+  },
+  "ue_ambr": {
+    "max_bandwidth_ul": 1024000,
+    "max_bandwidth_dl": 1024000
+  },
+  "pdn": [
+    {
+      "apn": "internet",
+      "qos": {
+        "qci": 9,
+        "arp": {
+          "priority_level": 8
+        }
+      },
+      "pdn_ambr": {
+        "max_bandwidth_ul": 1024000,
+        "max_bandwidth_dl": 1024000
+      }
+    }
+  ]
+}
+
 class Document extends Component {
   static propTypes = {
     action: PropTypes.string,
@@ -29,21 +56,28 @@ class Document extends Component {
     onSubmit: PropTypes.func,
   }
 
-  componentWillMount() {
-    const { subscriber, dispatch } = this.props
-
-    if (subscriber.needsFetch) {
-      dispatch(subscriber.fetch)
-    }
+  state = {
+    formData,
+    disableSubmitButton: true,
+    disableValidation: false
   }
 
   componentWillReceiveProps(nextProps) {
     const { subscriber, status } = nextProps
     const { dispatch, action, onHide } = this.props
+
     if (subscriber.needsFetch) {
       dispatch(subscriber.fetch)
     }
 
+    if (this.props.visible != nextProps.visible) {
+      if (subscriber.data) {
+        this.setState({ formData: subscriber.data })
+      } else {
+        this.setState({ formData });
+      }
+    }
+
     if (status.response) {
       dispatch(clearActionStatus(MODEL, action));
       onHide();
@@ -51,10 +85,12 @@ class Document extends Component {
   }
 
   validate = (formData, errors) => {
-    const { subscribers, action } = this.props;
+    const { subscribers, action, status } = this.props;
+    const { disableValidation } = this.state;
     const { imsi } = formData;
 
-    if (action === 'create' && subscribers && subscribers.data &&
+    if (action === 'create' && disableValidation !== true && 
+      subscribers && subscribers.data &&
       subscribers.data.filter(subscriber => subscriber.imsi === imsi).length > 0) {
       errors.imsi.addError(`'${imsi}' is duplicated`);
     }
@@ -62,8 +98,21 @@ class Document extends Component {
     return errors;
   }
 
+  handleChange = (formData, errors) => {
+    let disableSubmitButton = (Object.keys(errors).length > 0);
+    // I think there is a bug in React or Jsonschema library
+    // For workaround, I'll simply add 'formData' in setState
+    this.setState({
+      disableSubmitButton,
+      formData
+    });
+  }
+
   handleSubmit = (formData) => {
     const { dispatch, action, onHide } = this.props;
+
+    this.setState({ disableValidation: true })
+
     if (action === 'create') {
       dispatch(createSubscriber({}, formData));
     } else if (action === 'update') {
@@ -76,6 +125,7 @@ class Document extends Component {
   render() {
     const {
       validate,
+      handleChange,
       handleSubmit
     } = this;
 
@@ -87,20 +137,16 @@ class Document extends Component {
       onHide
     } = this.props
 
-    const {
-      isLoading,
-      data
-    } = subscriber;
-
     return (
       <Subscriber.Edit
         visible={visible} 
         action={action}
-        isLoading={isLoading}
-        isPending={status.pending}
-        formData={data}
+        formData={this.state.formData}
+        isLoading={subscriber.isLoading && !status.pending}
+        disableSubmitButton={this.state.disableSubmitButton}
         validate={validate}
         onHide={onHide}
+        onChange={handleChange}
         onSubmit={handleSubmit} />
     )
   }