osm.etsi.org Git - osm/riftware.git/blob

   1 /*
   2  * STANDARD_RIFT_IO_COPYRIGHT
   3  */
   4
   5 import React from 'react';
   6 // import AppHeaderActions from 'widgets/header/headerActions.js';
   7 import AppHeaderActions from '../../../../framework/widgets/header/headerActions.js';
   8 import './configAgentAccount.scss';
   9 import Button from 'widgets/button/rw.button.js';
  10 import Crouton from 'react-crouton';
  11 import 'style/common.scss';
  12 var ConfigAgentAccountStore = require('./configAgentAccountStore')
  13 var ConfigAgentAccountActions = require('./configAgentAccountActions')
  14 class ConfigAgentAccount extends React.Component {
  15     constructor(props) {
  16         super(props);
  17         this.state = ConfigAgentAccountStore.getState();
  18         ConfigAgentAccountStore.listen(this.storeListener);
  19
  20
  21         this.state.validateErrorEvent = 0;
  22         this.state.validateErrorMsg = '';
  23
  24     }
  25     storeListener = (state) => {
  26         this.setState(
  27             {
  28                 configAgentAccount: {
  29                     name:state.configAgentAccount.name,
  30                     "account-type":state.configAgentAccount["account-type"],
  31                     params:state.configAgentAccount[state.configAgentAccount["account-type"]]
  32                 },
  33                 isLoading: state.isLoading,
  34                 validateErrorMsg: state.validateErrorMsg,
  35                 validateErrorEvent: state.validateErrorEvent
  36             }
  37         )
  38     }
  39     create() {
  40         var self = this;
  41         if (self.state.configAgentAccount.name == "") {
  42             self.validateError("Please give the config agent account a name");
  43             return;
  44         } else {
  45             var type = self.state.configAgentAccount['account-type'];
  46             if (typeof(self.state.params[type]) != 'undefined') {
  47                 var params = self.state.params[type];
  48                 for (var i = 0; i < params.length; i++) {
  49                     var param = params[i].ref;
  50                     if (typeof(self.state.configAgentAccount[type]) == 'undefined' || typeof(self.state.configAgentAccount[type][param]) == 'undefined' || self.state.configAgentAccount[type][param] == "") {
  51                         if (!params[i].optional) {
  52                             self.validateError("Please fill all account details");
  53                             return;
  54                         }
  55                     }
  56                 }
  57             }
  58         }
  59         self.validateReset();
  60         ConfigAgentAccountStore.create(self.state.configAgentAccount).then(function() {
  61             self.context.router.push({pathname:'accounts'});
  62         }).catch(function(){
  63             console.log("Caught error", arguments[0].responseJSON.errorMessage.body)
  64             ConfigAgentAccountStore.createConfigAccountFailed(arguments[0].responseJSON.errorMessage.body);
  65         });
  66     }
  67     update() {
  68         var self = this;
  69
  70         if (self.state.configAgentAccount.name == "") {
  71             self.validateError("Please give the config agent account a name");
  72             return;
  73         }
  74
  75           var submit_obj = {
  76             'account-type':self.state.configAgentAccount['account-type'],
  77             name:self.state.configAgentAccount.name
  78           }
  79           submit_obj[submit_obj['account-type']] = self.state.configAgentAccount[submit_obj['account-type']];
  80           if(!submit_obj[submit_obj['account-type']]) {
  81             submit_obj[submit_obj['account-type']] = {};
  82           }
  83           for (var key in self.state.configAgentAccount.params) {
  84             if (submit_obj[submit_obj['account-type']][key]) {
  85                 //submit_obj[submit_obj['account-type']][key] = self.state.configAgentAccount.params[key];
  86                 console.log('hold')
  87             } else {
  88                 submit_obj[submit_obj['account-type']][key] = self.state.configAgentAccount.params[key];
  89             }
  90           }
  91
  92          ConfigAgentAccountStore.update(submit_obj).then(function() {
  93             self.context.router.push({pathname:'accounts'});
  94          }).catch(function(){});
  95     }
  96     cancel = (e) => {
  97         e.preventDefault();
  98         e.stopPropagation();
  99         this.context.router.push({pathname:'accounts'});
 100     }
 101     componentWillReceiveProps(nextProps) {
 102     }
 103     componentWillUnmount() {
 104         ConfigAgentAccountStore.unlisten(this.storeListener);
 105         ConfigAgentAccountStore.validateReset();
 106     }
 107     shouldComponentUpdate(nextProps) {
 108         return true;
 109     }
 110     handleDelete = () => {
 111         let self = this;
 112         ConfigAgentAccountStore.delete(self.state.configAgentAccount.name, function() {
 113             self.context.router.push({pathname:'accounts'});
 114         });
 115     }
 116     handleNameChange(event) {
 117         var temp = this.state.configAgentAccount;
 118         temp.name = event.target.value;
 119         this.setState({
 120             configAgentAccount: temp
 121         });
 122     }
 123     handleAccountChange(node, event) {
 124         var temp = this.state.configAgentAccount;
 125         temp['account-type'] = event.target.value;
 126         this.setState({
 127             configAgentAccount: temp
 128         })
 129     }
 130     handleParamChange(node, event) {
 131         var temp = this.state.configAgentAccount;
 132         if (!this.state.configAgentAccount[this.state.configAgentAccount['account-type']]) {
 133             temp[temp['account-type']] = {}
 134         }
 135         temp[temp['account-type']][node.ref] = event.target.value;
 136         this.setState({
 137             configAgentAccount: temp
 138         });
 139     }
 140     preventDefault = (e) => {
 141         e.preventDefault();
 142         e.stopPropagation();
 143     }
 144     evaluateSubmit = (e) => {
 145         if (e.keyCode == 13) {
 146             this.update(e);
 147             e.preventDefault();
 148             e.stopPropagation();
 149         }
 150     }
 151     validateError = (msg) => {
 152         this.setState({
 153             validateErrorEvent: true,
 154             validateErrorMsg: msg
 155         });
 156     }
 157     validateReset = () => {
 158         this.setState({
 159             validateErrorEvent: false
 160         });
 161     }
 162     returnCrouton = () => {
 163         return <Crouton
 164             id={Date.now()}
 165             message={this.state.validateErrorMsg}
 166             type={"error"}
 167             hidden={!(this.state.validateErrorEvent && this.state.validateErrorMsg)}
 168             onDismiss={this.validateReset}
 169         />;
 170     }
 171     render() {
 172         // This section builds elements that only show up on the create page.
 173         var name = <label>Name <input type="text" onChange={this.handleNameChange.bind(this)} style={{'textAlign':'left'}} /></label>
 174         var buttons = [
 175             <Button key="0" onClick={this.cancel} className="cancel light" label="Cancel"></Button>,
 176             <Button key="1" role="button" onClick={this.create.bind(this)} className="save dark" label="Save" />
 177         ]
 178         if (this.props.edit) {
 179             name = <label>{this.state.configAgentAccount.name}</label>
 180             var buttons = [
 181                 <a key="0" onClick={this.handleDelete} ng-click="create.delete(create.configAgentAccount)" className="delete">Remove Account</a>,
 182                     <Button key="1" onClick={this.cancel} className="cancel light" label="Cancel"></Button>,
 183                     <Button key="2" role="button" onClick={this.update.bind(this)} className="update dark" label="Update" />
 184             ]
 185             let selectAccount = null;
 186             let params = null;
 187         }
 188         // This creates the create screen radio button for account type.
 189         var selectAccountStack = [];
 190         if (!this.props.edit) {
 191             for (var i = 0; i < this.state.accountType.length; i++) {
 192                 var node = this.state.accountType[i];
 193                 selectAccountStack.push(
 194                   <label key={i}>
 195                     <input type="radio" name="account" onChange={this.handleAccountChange.bind(this, node)} defaultChecked={node.name == this.state.accountType[0].name} value={node['account-type']} /> {node.name}
 196                   </label>
 197                 )
 198
 199             }
 200             var selectAccount = (
 201                 <div className="select-type" style={{"marginLeft":"27px"}}>
 202                     Select Account Type:
 203                     {selectAccountStack}
 204                 </div>
 205             )
 206         }
 207
 208
 209
 210         // This sections builds the parameters for the account details.
 211         var params = null;
 212         if (this.state.params[this.state.configAgentAccount['account-type']]) {
 213             var paramsStack = [];
 214             for (var i = 0; i < this.state.params[this.state.configAgentAccount['account-type']].length; i++) {
 215                 var optionalField = '';
 216                 var node = this.state.params[this.state.configAgentAccount['account-type']][i];
 217                 var value = ""
 218                 if (this.state.configAgentAccount[this.state.configAgentAccount['account-type']]) {
 219                     value = this.state.configAgentAccount[this.state.configAgentAccount['account-type']][node.ref]
 220                 }
 221                 if (this.props.edit && this.state.configAgentAccount.params) {
 222                     value = this.state.configAgentAccount.params[node.ref];
 223                 }
 224
 225                 // If you're on the edit page, but the params have not been recieved yet, this stops us from defining a default value that is empty.
 226                 if (this.props.edit && !this.state.configAgentAccount.params) {
 227                     break;
 228                 }
 229                 if (node.optional) {
 230                     optionalField = <span className="optional">Optional</span>;
 231                 }
 232                 paramsStack.push(
 233                     <label key={i}>
 234                       <label className="create-fleet-pool-params">{node.label} {optionalField}</label>
 235                       <input className="create-fleet-pool-input" type="text" onChange={this.handleParamChange.bind(this, node)} defaultValue={value}/>
 236                     </label>
 237                 );
 238             }
 239
 240             params = (
 241                 <li className="create-fleet-pool">
 242               <h3> Enter Account Details</h3>
 243               {paramsStack}
 244           </li>
 245             )
 246         } else {
 247             params = (
 248                 <li className="create-fleet-pool">
 249               <h3> Enter Account Details</h3>
 250               <label style={{'marginLeft':'17px', color:'#888'}}>No Details Required</label>
 251           </li>
 252             )
 253         }
 254
 255         // This section builds elements that only show up in the edit page.
 256         if (this.props.edit) {
 257             name = <label>{this.state.configAgentAccount.name}</label>
 258             var buttons = [
 259                 <a key={0} onClick={this.handleDelete} ng-click="create.delete(create.configAgentAccount)" className="delete">Remove Account</a>,
 260                     <a key={1} onClick={this.cancel} className="cancel">Cancel</a>,
 261                     <Button key={2} role="button" onClick={this.update.bind(this)} className="update" label="Update" />
 262             ]
 263             let selectAccount = null;
 264             let params = null;
 265         }
 266
 267         var html = (
 268
 269               <form className="app-body create configAgentAccount"  onSubmit={this.preventDefault} onKeyDown={this.evaluateSubmit}>
 270               {this.returnCrouton()}
 271                   <h2 className="create-management-domain-header name-input">
 272                        {name}
 273                   </h2>
 274                   {selectAccount}
 275                   <ol className="flex-row">
 276                       {params}
 277                   </ol>
 278                   <div className="form-actions">
 279                       {buttons}
 280                   </div>
 281               </form>
 282         )
 283         return html;
 284     }
 285 }
 286 ConfigAgentAccount.contextTypes = {
 287     router: React.PropTypes.object
 288 };
 289 export default ConfigAgentAccount