eco-json-schema-object.html

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

<!--
`eco-json-schema-object` takes in a JSON schema of type object and builds a form,
exposing a `value` property that represents an object described by the schema.

Given the element:

```
<eco-json-schema-object schema="[[schema]]" value="{{value}}"></eco-json-schema-object>
```

And a JSON schema:

```
> this.schema = {
  "$schema": "http://json-schema.org/schema#",
  "title": "Contact",
  "type": "object",
  "properties": {
    "name": {
      "title": "Name",
      "type": "string"
    }
  }
}
```

A form will be generated, with the elements `value` looking something like this:

```
> this.value
{
  "name": "Eric"
}
```

Deep / nested schemas are supported for type array and object:

```
> this.schema = {
  "$schema": "http://json-schema.org/schema#",
  "title": "Contact",
  "type": "object",
    "phoneNumbers": {
      "title": "Phone numbers",
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "type": {
            "title": "Type",
            "type": "string"
          },
          "phoneNumber": {
            "title": "Phone Number",
            "type": "string"
          }
        }
      }
    }
  }
}
```

Validation is handled for strings and number/integers by mapping JSON schema
validation keywords to `paper-input` attributes; form elements will automatically
try and validate themselves as users provide input:

```
> this.schema = {
  "$schema": "http://json-schema.org/schema#",
  "title": "Contact",
  "type": "object",
  "properties": {
    "name": {
      "title": "Name",
      "type": "string",
      "minLength": 2
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "exclusiveMinimum": true
    },
    "postalCode": {
      "title": "Postal/Zip Code",
      "type": "string",
      "pattern": "[a-zA-Z][0-9][a-zA-Z]\\s*[0-9][a-zA-Z][0-9]|[0-9]{5}(-[0-9]{4})?"
    },
    "email": {
      "title": "email",
      "type": "string",
      "format": "email"
    }
  }
}
```

Customizing components for schema properties is supported by extending your JSON
schema. For any schema sub-property (`properties` for `"type": "object"` and
`items` for `"type": "array"`) a `component` property may be specified, with
the following options:

- `component.name` - specifies the name of the custom component to use
- `component.valueProperty` - specifies which property of the custom element
  represents its value
- `component.properties` - properties that will be set on the element

Example schema using custom components (note that `"valueProperty": "value"` is
redundant in this case, `"valueProperty": "value"` will be the default if not specified):

```
> this.schema = {
  "$schema": "http://json-schema.org/schema#",
  "title": "Contact",
  "type": "object",
  "properties": {
    "phoneNumber": {
      "title": "Phone Number",
      "type": "string",
      "component": {
        "name": "gold-phone-input",
        "valueProperty": "value",
        "properties": {
          "countryCode": "1"
        }
      }
    }
  }
}
```

Items set in `component.properties` will override any attributes / properties set
by `eco-json-schema-form` elements, making it possible to override JSON schema
validation properties mapped to `paper-input` attributes:

```
> this.schema = {
  "$schema": "http://json-schema.org/schema#",
  "title": "Contact",
  "type": "object",
  "properties": {
    "postalCode": {
      "title": "Postal/Zip Code",
      "type": "string",
      "pattern": "[a-zA-Z][0-9][a-zA-Z]\\s*[0-9][a-zA-Z][0-9]|[0-9]{5}(-[0-9]{4})?",
      "component": {
        "properties": {
          "autoValidate": false
        }
      }
    }
  }
}
```

Putting it all together, this schema:

```
> this.schema = {
  "$schema": "http://json-schema.org/schema#",
  "title": "Contact",
  "type": "object",
  "properties": {
    "name": {
      "title": "Name",
      "type": "string",
      "minLength": 2
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "exclusiveMinimum": true
    },
    "postalCode": {
      "title": "Postal/Zip Code",
      "type": "string",
      "pattern": "[a-zA-Z][0-9][a-zA-Z]\\s*[0-9][a-zA-Z][0-9]|[0-9]{5}(-[0-9]{4})?",
      "component": {
        "properties": {
          "autoValidate": false
        }
      }
    },
    "phoneNumbers": {
      "title": "Phone numbers",
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "type": {
            "title": "Type",
            "type": "string"
          },
          "phoneNumber": {
            "title": "Phone Number",
            "type": "string",
            "component": {
              "name": "gold-phone-input",
              "valueProperty": "value",
              "properties": {
                "countryCode": "1"
              }
            }
          }
        }
      }
    },
    "emailAddresses": {
      "title": "Emails",
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "type": {
            "title": "Type",
            "type": "string"
          },
          "email": {
            "title": "email",
            "type": "string",
            "format": "email"
          }
        }
      }
    }
  }
}
```

Will build a form describing an object:

```
> this.value
{
  "name": "Eric",
  "age": 28,
  "postalCode": "H1W 2C5",
  "phoneNumbers": [
    {
      "type": "Mobile",
      "phoneNumber": "123-456-7890"
    }
  ]
  "emailAddresses": [
    {
      "type": "Personal",
      "email": "eric@wat.com"
    }
  ]
}
```

External validation is supported via the `error` property. By providing an
object tree with each leaf representing an error message for properties, the
message will be attached to the appropriate element.

Example, for the Contact schema:

```
el.error = {
  "name": "String is too short (0 chars) minimum 2",
  "phoneNumbers": [
    {
      "phoneNumber": "String does not match required format"
    }
  ]
}
```

@group eco Elements
@element eco-json-schema-object
@demo demo/index.html
-->

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

  <!--<link rel="import" href="./eco-json-schema-array.html" />
    <link rel="import" href="./eco-json-schema-boolean.html" />
    <link rel="import" href="./eco-json-schema-enum.html" />
    <link rel="import" href="./eco-json-schema-file.html" />
    <link rel="import" href="./eco-json-schema-geolocation.html" />-->
  <link rel="import" href="./eco-json-schema-input.html" />
  <link rel="import" href="./eco-json-schema-reference.html" />

  <template>

    <style include="iron-flex-layout">
      #form {
        display: block;
        @apply --layout-vertical;
        @apply --layout-wrap;
      }
    </style>



    <template is="dom-if" if={{!wizard}}>
      <div class="header" hidden$="[[!label]]">[[label]]</div>
    </template>
    <div class="layout vertical flex start-justified">
      <div id="form" class="layout horizontal flex start-justified"></div>
    </div>

  </template>

  <script>

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

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

      static get properties() {
        return {
          language: {
            value: 'en'
          },
          resources: {
            value: function () {
              return {};
            }
          },
          _componentLookup: {
            type: Object,
            value: function () {
              return {}
            }
          },
          schema: {
            type: Object,
            observer: '_schemaChanged'
          },
          label: {
            type: String
          },
          value: {
            type: Object,
            notify: true,
            observer: "setValue",
            value: function () {
              return {};
            }
          },
          error: {
            type: Object,
            observer: '_errorChanged'
          },
          wizard: {
            type: Boolean,
            notify: true
          }

        }
      }

      connectedCallback () {
        super.connectedCallback();
        console.log("connected callback");
      }

      disconnectedCallback () {
        super.disconnectedCallback();
        this._clearForm();
      }

      setValue(value) {
        if (!value) return;
        this.set('value', value);
        this.updateFormFromValue();
      }

      updateFormFromValue() {
        for (var propertyName in this.value) {
          var propertyValue = this.value[propertyName];
          var component = this._componentLookup[propertyName];
          if (component) {
            component.value = propertyValue;
          }
        }
      }

      _buildSchemaProperties() {
        var ctx = this;

        this._schemaProperties = Object.keys(this.schema.properties || []).map(function (key) {
          var schema = ctx.schema.properties[key];
          var property = {
            property: key,
            label: schema.title || key,
            schema: schema,
            component: schema.component || {}
          };

          if (!property.component.valueProperty) {
            property.component.valueProperty = 'value';
          }

          if (ctx._isSchemaEnum(schema)) {
            property.component.name = property.component.name || 'eco-json-schema-enum';
            property.value = '';
          } else if (ctx._isSchemaReference(schema)) {
            property.component.name = property.component.name || 'eco-json-schema-reference';
            property.value = false;
          } else if (ctx._isSchemaGeo(schema.type)) {
            property.component.name = property.component.name || 'eco-json-schema-geolocation';
            property.value = {};
            property.map = true;
            if (schema.zoom !== undefined) {
              property.zoom = schema.zoom;
            }
          } else if (ctx._isSchemaBoolean(schema.type)) {
            property.component.name = property.component.name || 'eco-json-schema-boolean';
            property.value = false;
          } else if (ctx._isSchemaFile(schema.type)) {
            property.component.name = property.component.name || 'eco-json-schema-file';
            property.value = {};
          } else if (ctx._isSchemaValue(schema.type)) {
            property.component.name = property.component.name || 'eco-json-schema-input';
            property.value = '';
          } else if (ctx._isSchemaObject(schema.type)) {
            property.component.name = property.component.name || 'eco-json-schema-object';
            property.value = {};
          } else if (ctx._isSchemaArray(schema.type)) {
            property.component.name = property.component.name || 'eco-json-schema-array';
            property.value = [];
          } else {
            return console.error('Unknown property type %s', schema.type);
          }

          return property;
        });
      }

      _schemaPropertyChanged(event, detail) {

        //TODO: figure out how to fix or create detail. Currently none of the detail blocks are executed ???
        if (detail && detail.path && /\.length$/.test(detail.path)) {
          return;
        }

        var ctx = this;
        var property = event.target.schemaProperty;
        var path = ['value', property.property];

        if (detail && detail.path && /\.splices$/.test(detail.path)) {
          var parts = detail.path.split('.').slice(1, -1);
          while (parts.length) {
            path.push(parts.shift());
            if (property.keyMap && property.keyMap[path.join('.')]) {
              path = property.keyMap[path.join('.')].split('.');
            }
          }

          if (detail.value.keySplices) {
            if (property.keyMap) {
              detail.value.keySplices.forEach(function (splice) {
                splice.removed.forEach(function (k) {
                  delete property.keyMap[path.concat([k]).join('.')];
                });
              });
            }
          }

          if (detail.value) {
            detail.value.indexSplices.forEach(function (splice) {
              var args = [path.join('.'), splice.index, splice.removed.length];
              if (splice.addedCount) {
                for (var i = 0, ii = splice.addedCount; i < ii; i++) {
                  if (splice.addedKeys && splice.addedKeys[i]) {
                    property.keyMap = property.keyMap || {};
                    property.keyMap[path.concat([splice.addedKeys[i]]).join('.')] = path.concat([i + splice.index]).join('.');
                  }
                  args.push(ctx._deepClone(splice.object[i + splice.index]));
                }
              }
              ctx.splice.apply(ctx, args);
            });
          }
        } else if (detail && detail.path) {
          var parts = detail.path.split('.').slice(1);
          var v = this.value;
          if (!v.hasOwnProperty(property.property)) {
            this.set('value.' + property.property, {})
          }
          while (parts.length) {
            var k = parts.shift();
            path.push(k);
            if (property.keyMap && property.keyMap[path.join('.')]) {
              path = property.keyMap[path.join('.')].split('.');
            }
          }
          this.set(path.join('.'), this._deepClone(detail.value));
        } else {
          property.value = event.detail.value;
          this.set(path, this._deepClone(event.detail.value));
        }
      }

      _setValue() {
        var ctx = this;
        var value = {};
        this._schemaProperties.forEach(function (property) {
          value[property.property] = ctx._deepClone(property.value);
        });
        this.value = value;
      }

      _buildForm() {
        var ctx = this;
        this._schemaProperties.forEach(function (property) {
          var el = document.createElement(property.component.name);
          el.label = property.label;
          el.schema = property.schema;
          el.schemaProperty = property;
          el.language = ctx.language;
          el.resources = ctx.resources;

          ctx._componentLookup[property.property] = el;
          el.setAttribute('name', property.property);
          el.className = 'flex start-justified';
          property.value = el[property.component.valueProperty];
          el.addEventListener(property.component.valueProperty.replace(/([A-Z])/g, '-$1').toLowerCase() + '-changed', ctx._schemaPropertyChanged.bind(ctx));
          //ctx.listen(el, property.component.valueProperty.replace(/([A-Z])/g, '-$1').toLowerCase() + '-changed', '_schemaPropertyChanged');
          ctx.$.form.appendChild(el);
        });
      }

      _removePropertyEl(el) {
        if (el.schemaProperty) {
          //this.unlisten(el, el.schemaProperty.component.valueProperty.replace(/([A-Z])/g, '-$1').toLowerCase() + '-changed', '_schemaPropertyChanged');
          el.removeEventListener(el.schemaProperty.component.valueProperty.replace(/([A-Z])/g, '-$1').toLowerCase() + '-changed', this._schemaPropertyChanged);
          el.schemaProperty = null;
        }
        Polymer.dom(this.$.form).removeChild(el);
      }

      _clearForm() {
        var formEl = Polymer.dom(this.$.form);
        while (formEl.firstChild) {
          this._removePropertyEl(formEl.firstChild);
        }
      }

      _schemaChanged() {
        this._clearForm();
        this._buildSchemaProperties();
        this._buildForm();
        this._setValue();
      }

      _errorChanged() {
        var ctx = this;
        Polymer.dom(this.$.form).childNodes.forEach(function (el) {
          var name = el.getAttribute('name');
          if (ctx.error && ctx.error[name]) {
            el.error = ctx.error[name];
          } else {
            el.error = null;
          }
        });
      }

      _deepClone(o) {
        return JSON.parse(JSON.stringify(o));
      }

      _isSchemaValue(type) {
        return this._isSchemaBoolean(type) || this._isSchemaNumber(type) || this._isSchemaString(type) || this._isSchemaFile(type);
      }

      _isSchemaFile(type) {
        if (Array.isArray(type)) {
          return type.indexOf('file') !== -1;
        } else {
          return type === 'file';
        }
      }

      _isSchemaBoolean(type) {
        if (Array.isArray(type)) {
          return type.indexOf('boolean') !== -1;
        } else {
          return type === 'boolean';
        }
      }

      _isSchemaEnum(schema) {
        return !!schema.enum;
      }

      _isSchemaReference(schema) {
        return !!schema['x-reference'];
      }

      _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';
        }
      }

      _isSchemaGeo(type) {
        return type === 'geolocation';
      }

      _isSchemaObject(type) {
        return type === 'object';
      }

      _isSchemaArray(type) {
        return type === 'array';
      }

    }
    window.customElements.define(EcoJsonSchemaObject.is, EcoJsonSchemaObject);
  </script>

</dom-module>