Edit subscriber

frontend/src/pages/Subscribers/SubscriberOverview.js

@@ -8,6 +8,7 @@ import ApiHelper from "../../util/ApiHelper";
 class SubscriberOverview extends Component {
   state = {
     subscriberModalOpen: false,
+    subscriberModalData: null,
   };
 
   componentDidMount() {
@@ -15,7 +16,23 @@ class SubscriberOverview extends Component {
   }
 
   openAddSubscriber() {
-    this.setState({subscriberModalOpen: true});
+    this.setState({
+      subscriberModalOpen: true,
+      subscriberModalData: null,
+    });
+  }
+
+  /**
+   * @param subscriberId  {number}
+   * @param plmn          {number}
+   */
+  async openEditSubscriber(subscriberId, plmn) {
+    const subscriber = await ApiHelper.fetchSubscriberById(subscriberId, plmn);
+
+    this.setState({
+      subscriberModalOpen: true,
+      subscriberModalData: subscriber,
+    });
   }
 
   async addSubscriber(subscriberData) {
@@ -27,6 +44,17 @@ class SubscriberOverview extends Component {
     ApiHelper.fetchSubscribers().then();
   }
 
+  /**
+   * @param subscriber  {Subscriber}
+   */
+  async updateSubscriber(subscriber) {
+    const result = await ApiHelper.updateSubscriber(subscriber.id, subscriber.plmn);
+
+    if (!result) {
+      alert("Error updating subscriber: " + subscriber.id);
+    }
+  }
+
   /**
    * @param subscriber  {Subscriber}
    */
@@ -68,6 +96,8 @@ class SubscriberOverview extends Component {
                       <td>{subscriber.plmn}</td>
                       <td>{subscriber.id}</td>
                       <td style={{textAlign: 'center'}}>
+                        <i className="fa fa-pencil-alt" onClick={this.openEditSubscriber.bind(this, subscriber.id, subscriber.plmn)}/>
+                        &nbsp;&nbsp;&nbsp;&nbsp;
                         <i className="fa fa-trash-alt" onClick={this.deleteSubscriber.bind(this, subscriber)}/>
                       </td>
                     </tr>
@@ -85,6 +115,8 @@ class SubscriberOverview extends Component {
 
         <SubscriberModal open={this.state.subscriberModalOpen}
                          setOpen={val => this.setState({subscriberModalOpen: val})}
+                         subscriber={this.state.subscriberModalData}
+                         onModify={this.updateSubscriber.bind(this)}
                          onSubmit={this.addSubscriber.bind(this)}/>
       </div>
     );

frontend/src/pages/Subscribers/components/SubscriberModal.js

@@ -7,10 +7,13 @@ class SubscriberModal extends Component {
   static propTypes = {
     open: PropTypes.bool.isRequired,
     setOpen: PropTypes.func.isRequired,
+    subscriber: PropTypes.object,
+    onModify: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
   };
 
   state = {
+    editMode: false,
     formData: undefined,
     // for force re-rendering json form
     rerenderCounter: 0,
@@ -73,6 +76,29 @@ class SubscriberModal extends Component {
     },
   };
 
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (prevProps !== this.props) {
+      this.setState({editMode: !!this.props.subscriber});
+
+      if (this.props.subscriber) {
+        const subscriber = this.props.subscriber;
+        const isOp = subscriber['AuthenticationSubscription']["milenage"]["op"]["opValue"] !== "";
+
+        let formData = {
+          plmnID: subscriber['plmnID'],
+          ueId: subscriber['ueId'].replace("imsi-", ""),
+          authenticationMethod: subscriber['AuthenticationSubscription']["authenticationMethod"],
+          K: subscriber['AuthenticationSubscription']["permanentKey"]["permanentKeyValue"],
+          OPOPcSelect: isOp ? "OP" : "OPc",
+          OPOPc: isOp ? subscriber['AuthenticationSubscription']["milenage"]["op"]["opValue"] :
+                        subscriber['AuthenticationSubscription']["opc"]["opcValue"],
+        };
+
+        this.updateFormData(formData).then();
+      }
+    }
+  }
+
   async onChange(data) {
     const lastData = this.state.formData;
     const newData = data.formData;
@@ -85,12 +111,7 @@ class SubscriberModal extends Component {
       const plmn = newData.plmnID ? newData.plmnID : "";
       newData.ueId = plmn + newData.ueId.substr(lastData.plmnID.length);
 
-      // Workaround for bug: https://github.com/rjsf-team/react-jsonschema-form/issues/758
-      await this.setState({ rerenderCounter: this.state.rerenderCounter + 1 });
-      await this.setState({
-        rerenderCounter: this.state.rerenderCounter + 1,
-        formData: newData,
-      });
+      await this.updateFormData(newData);
 
       // Keep plmnID input focused at the end
       const plmnInput = document.getElementById("root_plmnID");
@@ -103,6 +124,15 @@ class SubscriberModal extends Component {
     }
   }
 
+  async updateFormData(newData) {
+    // Workaround for bug: https://github.com/rjsf-team/react-jsonschema-form/issues/758
+    await this.setState({ rerenderCounter: this.state.rerenderCounter + 1 });
+    await this.setState({
+      rerenderCounter: this.state.rerenderCounter + 1,
+      formData: newData,
+    });
+  }
+
   onSubmitClick(result) {
     const formData = result.formData;
     const OP = formData["OPOPcSelect"] === "OP" ? formData["OPOPc"] : "";
@@ -256,7 +286,7 @@ class SubscriberModal extends Component {
         onHide={this.props.setOpen.bind(this, false)}>
         <Modal.Header closeButton>
           <Modal.Title id="example-modal-sizes-title-lg">
-            New Subscriber
+            {this.state.editMode ? "Edit Subscriber" : "New Subscriber"}
           </Modal.Title>
         </Modal.Header>
 

frontend/src/util/ApiHelper.js

@@ -19,6 +19,18 @@ class ApiHelper {
     return false;
   }
 
+  static async fetchSubscriberById(id, plmn) {
+    try {
+      let response = await Http.get(`subscriber/${id}/${plmn}`);
+      if (response.status === 200 && response.data) {
+        return response.data;
+      }
+    } catch (error) {
+    }
+
+    return false;
+  }
+
   static async createSubscriber(subscriberData) {
     try {
       let response = await Http.post(