eco-json-schema-reference.html

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"/>

<dom-module id="eco-json-schema-reference">

  <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html"/>
  <link rel="import" href="../paper-listbox/paper-listbox.html"/>
  <link rel="import" href="../paper-item/paper-item.html"/>
  <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html"/>

  <template>
    <style include="iron-flex-layout">
      paper-dropdown-menu {
        width: 300px;
      }
    /*  paper-input {
        --paper-input-container-label: {
          white-space: normal;
          position: static;
          font-size: 22px;
          color: #212121;
        }
      };

      paper-dropdown-menu {
        --paper-input-container-label: {
          white-space: normal;
          position: static;
          font-size: 22px;
          color: #212121;
        }
        --paper-dropdown-menu-button: {
          padding: 2px;
        }
      }*/
    </style>
    <paper-dropdown-menu id="dropdown" class="layout horizontal vertical" label="[[label]]" required>
      <paper-listbox id="list" slot="dropdown-content" attr-for-selected="value" selected="{{listboxval}}">
        <template is="dom-repeat" items="[[_items]]">
          <paper-item class="flex"  value="[[item.value]]">[[item.label]]</paper-item>
        </template>
      </paper-listbox>
    </paper-dropdown-menu>

  </template>

  <script>

    class EcoJsonSchemaReference extends Polymer.Element {
      static get is() {
        return 'eco-json-schema-reference';
      }

     /* static get behaviors() {
        return [Polymer.AppLocalizeBehavior]
      }*/

      static get properties() {
        return {
          schema: {
            type: Object,
            observer: '_schemaChanged'
          },
          value: {
            type: String,
            notify: true,
            value: null
          },
          listboxval: {
            type: String,
            notify: true,
            value: '',
            computed: '_computeListBoxValue(value)'
          },
          error: {
            type: String,
            observer: '_errorChanged',
            value: null
          },
          _items: {
            type: Object,
            value: function () {
              return {};
            }
          }
        }
      }

      ready() {
        super.ready();
        console.log("Ready in eco-json-reference ");
      }

      connectedCallback() {
        super.connectedCallback();
        //this.listen(this.$.list, 'selected-changed', '_selectedPropertyChanged');
        this.$.list.addEventListener('selected-changed', this._selectedPropertyChanged.bind(this));

      }

      disconnectedCallback() {
        super.connectedCallback();
      }

      /*
       This is needed because backend returns array of selected roles and we are trying to display
       this using a dropdown,which displays one item at a time. Dropdown has to change to some other
       comp. setting the first value as currently we can only "admin" or "read_only"
       */
      _computeListBoxValue(value) {
        if (!value || value.length <= 0) {
          return;
        }
        return value[0];

      }
      _selectedPropertyChanged(val1, val2) {
        this.value = [val1.detail.value];

      }
      _schemaChanged() {
        var schema = this.schema;
        var inputEl = this.$.dropdown;

        if (schema.component && schema.component.properties) {
          Object.keys(schema.component.properties).forEach(function(prop) {
            inputEl[prop] = schema.component.properties[prop];
          });
        }
        //load the items
        window.fetch(schema['x-referenceUri']).then((response)=> {
          console.log(response);
        response.json().then((r)=>{
          if(schema['x-referenceDataPath'] && r[schema['x-referenceDataPath']])  {
          r = r[schema['x-referenceDataPath']];
        }
        this._items = r.map( (e) => {
            return {
              label: e[schema['x-labelAttr']],
              value: e[schema['x-valueAttr']]
            }
          });
      });
      });

        //this._items = schema.reference.filter(function(item) {
        //  return item !== null;
        //});

        if (schema.title) {
          inputEl.label = schema.title;
        }
      }
      _errorChanged() {
        if (this.error) {
          this.$.dropdown.invalid = true;
        } else {
          this.$.dropdown.invalid = false;
        }
      }
      _isSchemaValue(type) {
        return this._isSchemaBoolean(type) || this._isSchemaNumber(type) || this._isSchemaString(type);
      }
      _isSchemaBoolean(type) {
        if (Array.isArray(type)) {
          return type.indexOf('boolean') !== -1;
        } else {
          return type === 'boolean';
        }
      }
      _isSchemaNumber(type) {
        if (Array.isArray(type)) {
          return type.indexOf('number') !== -1 || type.indexOf('integer') !== -1;
        } else {
          return type === 'number' || type === 'integer';
        }
      }
      _isSchemaString(type) {
        if (Array.isArray(type)) {
          return type.indexOf('string') !== -1;
        } else {
          return type === 'string';
        }
      }
      _isSchemaObject(type) {
        return type === 'object';
      }
      _isSchemaArray(type) {
        return type === 'array';
      }
    }

    window.customElements.define(EcoJsonSchemaReference.is, EcoJsonSchemaReference);

  </script>

</dom-module>