render()

in source/frontend/src/components/UserTabApp.js [204:376]

• 156 lines of code
• 20 McCabe index (conditional complexity)

  render() {
    var appLoaded = false;
    if (Object.keys(this.state.app).length > 0){
      appLoaded = true;
    }
    var hasAttributes = false;
    if ('attributes' in this.state.stage){
      for (var i in this.state.stage.attributes){
        if (this.state.stage.attributes[i].attr_type === this.state.attributeType){
          hasAttributes = true;
        }
      }
    }

    return (
      hasAttributes?
      <div id="factory-tab-container" className="container-fluid rounded bg-white py-3 ">
        <div className="row px-3 pt-3"> <h3>{appLoaded?this.state.app.app_name:'Please select application'} > Application Information</h3></div>
        <form>
          <div className="row px-3 pt-3">
            <div className="col-12 px-0 pr-5">


              {this.state.stage.attributes.map((item, index) => {

                if(item.attr_type !== this.state.attributeType){
                  return null;
                }
                var read_only = false
                if ('read_only' in item) {
                  if (item['read_only'] === true) {
                    read_only = true
                  }
                }

                const attribute = this.getAttribute(item.attr_name);
                var displayName;
                if ('description' in attribute) {
                  displayName=attribute.description;
                } else {
                  displayName=item.attr_name;
                }

                var value='';
                if(item.attr_name in this.state.app) {
                  value = this.state.app[item.attr_name];
                }

                if (attribute.name === 'wave_id') {

                  value = "none";
                  if (this.state.app[item.attr_name] !== undefined){
                    value = this.state.app[item.attr_name]
                  }

                  return (
                    <div key={item.attr_name} className="form-group">
                      <label>Wave ID:</label>
                      <select disabled={read_only} value={value} onChange={this.onChange(item.attr_name)} className="form-control form-control-sm">
                        <option value="none" disabled> -- select a wave id -- </option>
                        {this.state.waves.map((item, index) => {
                          return (
                            <option key={index} value={item.wave_id}>{item.wave_name}</option>
                          )
                        })}
                      </select>
                    </div>
                  )
                }
                else {
                switch(attribute.type) {
                  case 'checkbox':
                    return (
                      <CheckBox
                        key={item.attr_name}
                        onChange={this.onChange}
                        disabled={read_only}
                        label={displayName}
                        attr_name={item.attr_name}
                        value={this.state.app[item.attr_name]}
                      />
                    )

                  case 'textarea':
                    return (
                      <TextArea
                        key={item.attr_name}
                        onChange={this.onChange}
                        disabled={read_only}
                        label={displayName}
                        attr_name={item.attr_name}
                        value={this.state.app[item.attr_name]}
                      />
                    )

                  case 'tag':
                    return (
                      <TextArea
                        key={item.attr_name}
                        onBlur={this.onChangeTag}
                        onChange={this.onChangeTag}
                        disabled={read_only}
                        label={displayName}
                        attr_name={item.attr_name}
                        value={this.state.app[item.attr_name]}
                      />
                    )

                  case 'list':
                    var options = '';
                    if ('listvalue' in attribute){
                      options = attribute.listvalue;
                    }
                    return (
                      <List
                        key={item.attr_name}
                        onChange={this.onChange}
                        disabled={read_only}
                        label={displayName}
                        attr_name={item.attr_name}
                        value={this.state.app[item.attr_name]}
                        options={options}
                      />
                    )

                  default:
                    return (
                      <String
                        key={item.attr_name}
                        onChange={this.onChange}
                        disabled={read_only}
                        label={displayName}
                        attr_name={item.attr_name}
                        value={this.state.app[item.attr_name]}
                      />
                    )
                }
              }

              })}

              <div className="row">
                <div className="col-3">
                  <input
                    className="btn btn-primary btn-outline mt-3"
                    type="button"
                    value="Save Application"
                    onClick={this.onClickSaveApp}
                  />
                </div>

                {(this.state.allowCreate && this.state.app.app_id !== null) &&
                  <div className="col-3">
                    <input
                      disabled={!('app_id' in this.state.app)}
                      onClick={this.onClickDeleteApp}
                      className="btn btn-danger btn-outline mt-3"
                      type="button"
                      value="Delete Application" />
                  </div>
                }
              </div>

            </div>
          </div>
        </form>
      </div>
      :
      <div id="factory-tab-container" className="container-fluid rounded bg-white py-3 ">
        <div className="row px-3 pt-3"> <h3>No application attributes defined for this stage</h3></div>
      </div>
    );
  }