diff --git a/frontend/src/pages/Subscribers/SubscriberOverview.js b/frontend/src/pages/Subscribers/SubscriberOverview.js index ad103607abff5e114f7189b632f53f17a523cc06..547665ec3f23cf91055748dbb41dc4bff2ee4038 100644 --- a/frontend/src/pages/Subscribers/SubscriberOverview.js +++ b/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)}/> + <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> ); diff --git a/frontend/src/pages/Subscribers/components/SubscriberModal.js b/frontend/src/pages/Subscribers/components/SubscriberModal.js index ccd43f086d488c3e84cad7b133895329a4bfc177..368e4fad5dc767aaf689c08ec2d6295016dee14f 100644 --- a/frontend/src/pages/Subscribers/components/SubscriberModal.js +++ b/frontend/src/pages/Subscribers/components/SubscriberModal.js @@ -1,5 +1,5 @@ -import React, { Component } from 'react'; -import { Modal } from "react-bootstrap"; +import React, {Component} from 'react'; +import {Modal} from "react-bootstrap"; import Form from "react-jsonschema-form"; import PropTypes from 'prop-types'; @@ -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> diff --git a/frontend/src/util/ApiHelper.js b/frontend/src/util/ApiHelper.js index cde71d88a3ea62fc0b9fde8fcd424406adea940c..553401b785a6c7c091e2d95afde2f5480fb4be91 100644 --- a/frontend/src/util/ApiHelper.js +++ b/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(