update it

webui/src/components/Shared/Form.js

@@ -130,6 +130,7 @@ class Form extends Component {
     schema: PropTypes.object,
     uiSchema: PropTypes.object,
     formData: PropTypes.object,
+    valdate: PropTypes.func,
     onHide: PropTypes.func,
     onSubmit: PropTypes.func
   };

webui/src/components/Subscriber/Edit.js

@@ -161,8 +161,11 @@ const uiSchema = {
 class Edit extends Component {
   static propTypes = {
     visible: PropTypes.bool, 
+    title: PropTypes.string, 
+    formData: PropTypes.object,
+    validate: PropTypes.func, 
     onHide: PropTypes.func, 
-    onSubmit: PropTypes.func,
+    onSubmit: PropTypes.func
   }
 
   state = {
@@ -185,32 +188,14 @@ class Edit extends Component {
     }
   }
 
-  validate = (formData, errors) => {
-    const { subscribers } = this.props;
-    const { imsi } = formData;
-    
-    if (subscribers && subscribers.filter(subscriber => subscriber.imsi === imsi).length > 0) {
-      errors.imsi.addError(`'${imsi}' is duplicated`);
-    }
-
-    return errors;
-  }
-
-  handleSubmit = (formData) => {
-    console.log(formData);
-  }
-
   render() {
-    const {
-      validate,
-      handleSubmit
-    } = this;
-
     const {
       visible,
       title,
+      formData,
+      validate,
       onHide,
-      formData
+      onSubmit
     } = this.props;
 
     return (
@@ -222,7 +207,7 @@ class Edit extends Component {
         formData={formData}
         validate={validate}
         onHide={onHide}
-        onSubmit={handleSubmit} />
+        onSubmit={onSubmit} />
     )
   }
 }

webui/src/components/Subscriber/Item.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import styled from 'styled-components';
@@ -97,28 +97,79 @@ const propTypes = {
   onDelete: PropTypes.func
 }
 
-const Item = ({ subscriber, onShow, onEdit, onDelete }) => {
-  const {
-    imsi
-  } = subscriber;
+class Item extends Component {
+  static propTypes = {
+    subscriber: PropTypes.shape({
+      imsi: PropTypes.string
+    }),
+    onShow: PropTypes.func,
+    onEdit: PropTypes.func,
+    onDelete: PropTypes.func
+  }
 
-  return (
-    <Sizer>
-      <Card onClick={() => onShow(imsi)}>
-        <Imsi>{subscriber.imsi}</Imsi>
-        <div className="actions">
-          <Tooltip content='Edit' width="60px">
-            <CircleButton onClick={() => onEdit(imsi)}><EditIcon/></CircleButton>
-          </Tooltip>
-          <Tooltip content='Delete' width="60px">
-            <CircleButton className="delete" onClick={() => onDelete(imsi)}><DeleteIcon/></CircleButton>
-          </Tooltip>
-        </div>
-      </Card>
-    </Sizer>
-  )
+  handleEdit = e => {
+    e.stopPropagation();
+
+    const {
+      subscriber,
+      onEdit,
+    } = this.props;
+
+    const {
+      imsi
+    } = subscriber;
+
+    onEdit(imsi)
+  }
+
+  handleDelete = e => {
+    e.stopPropagation();
+
+    const {
+      subscriber,
+      onDelete
+    } = this.props;
+
+    const {
+      imsi
+    } = subscriber;
+
+    onDelete(imsi)
+  }
+
+  render() {
+    const {
+      handleEdit,
+      handleDelete
+    } = this;
+    
+    const {
+      subscriber,
+      onShow,
+      onEdit,
+      onDelete
+    } = this.props;
+
+    const {
+      imsi
+    } = subscriber;
+
+    return (
+      <Sizer>
+        <Card onClick={() => onShow(imsi)}>
+          <Imsi>{subscriber.imsi}</Imsi>
+          <div className="actions">
+            <Tooltip content='Edit' width="60px">
+              <CircleButton onClick={handleEdit}><EditIcon/></CircleButton>
+            </Tooltip>
+            <Tooltip content='Delete' width="60px">
+              <CircleButton className="delete" onClick={handleDelete}><DeleteIcon/></CircleButton>
+            </Tooltip>
+          </div>
+        </Card>
+      </Sizer>
+    )
+  }
 }
 
-Item.propTypes = propTypes;
-
 export default Item;

webui/src/containers/Subscriber/Collection.js

@@ -76,18 +76,14 @@ class Collection extends Component {
     },
     actions: {
       add: () => {
-        console.log('add')
         this.documentHandler.show('add');
       },
       browser: (imsi) => {
-        console.log('brower' + imsi)
       },
       change: (imsi) => {
-        console.log('change' + imsi)
         this.documentHandler.show('change', { imsi });
       },
       delete: (imsi) => {
-        console.log('delete')
       }
     }
   }

webui/src/containers/Subscriber/Document.js

@@ -11,6 +11,13 @@ import {
 } from 'components';
 
 class Document extends Component {
+  static propTypes = {
+    action: PropTypes.string,
+    visible: PropTypes.bool, 
+    onHide: PropTypes.func, 
+    onSubmit: PropTypes.func,
+  }
+
   componentWillMount() {
     const { subscriber, dispatch } = this.props
 
@@ -27,19 +34,31 @@ class Document extends Component {
     }
   }
 
-  handleSubmit = () => {
+  validate = (formData, errors) => {
+    const { subscribers, action } = this.props;
+    const { imsi } = formData;
+    
+    if (action === 'add' && subscribers && subscribers.data &&
+      subscribers.data.filter(subscriber => subscriber.imsi === imsi).length > 0) {
+      errors.imsi.addError(`'${imsi}' is duplicated`);
+    }
 
+    return errors;
+  }
+
+  handleSubmit = (formData) => {
+    console.log(formData);
   }
 
   render() {
     const {
+      validate,
       handleSubmit
     } = this;
 
     const { 
-      visible,
       action,
-      subscribers,
+      visible,
       subscriber,
       onHide
     } = this.props
@@ -49,16 +68,14 @@ class Document extends Component {
       data
     } = subscriber;
 
-    const title = (action === 'change') ? 'Edit Subscriber' : 'Create Subscriber';
-
     return (
       <div>
-        {isLoading && <Spinner md/>}
+        {isLoading && <Spinner/>}
         <Subscriber.Edit
-          subscribers={subscribers.data}
-          formData={data}
-          title={title}
           visible={visible} 
+          title={(action === 'change') ? 'Edit Subscriber' : 'Create Subscriber'}
+          formData={data}
+          validate={validate}
           onHide={onHide}
           onSubmit={handleSubmit} />
       </div>