eco-json-schema-object.html

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="../iron-flex-layout/iron-flex-layout.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-input.html"/>

  <template>

    <style>

      :host {
        display: block;
        @apply(--layout-vertical);
      }

    </style>

    <div class="header" hidden$="[[!label]]">[[label]]</div>
    <div id="form"></div>

  </template>

  <script>
    Polymer({
      is: 'eco-json-schema-object',
      properties: {
        schema: {
          type: Object,
          observer: '_schemaChanged'
        },
        label: {
          type: String
        },
        value: {
          type: Object,
          notify: true,
          value: function() { return {}; }
        },
        error: {
          type: Object,
          observer: '_errorChanged'
        }
      },
      ready: function() {

      },
      detached: function () {
        this._clearForm();
      },
      _buildSchemaProperties: function() {
        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._isSchemaBoolean(schema.type)) {
            property.component.name = property.component.name || 'eco-json-schema-boolean';
            property.value = false;
          } 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: function (event, detail) {

        if (detail.path && /\.length$/.test(detail.path)) {
          return;
        }

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

        if (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('.')];
                });
              });
            }
          }

          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.path) {
          var parts = detail.path.split('.').slice(1);
          while (parts.length) {
            path.push(parts.shift());
            if (property.keyMap && property.keyMap[path.join('.')]) {
              path = property.keyMap[path.join('.')].split('.');
            }
          }
          this.set(path, this._deepClone(detail.value));
        } else {
          property.value = detail.value;
          this.set(path, this._deepClone(detail.value));
        }
      },
      _setValue: function() {
        var ctx = this;
        var value = {};
        this._schemaProperties.forEach(function (property) {
          value[property.property] = ctx._deepClone(property.value);
        });
        this.value = value;
      },
      _buildForm: function() {
        var ctx = this;
        this._schemaProperties.forEach(function(property) {

          var el = ctx.create(property.component.name, {
            label: property.label,
            schema: property.schema,
            schemaProperty: property
          });

          el.setAttribute('name', property.property);

          property.value = el[property.component.valueProperty];
          ctx.listen(el, property.component.valueProperty.replace(/([A-Z])/g, '-$1').toLowerCase() + '-changed', '_schemaPropertyChanged');
          Polymer.dom(ctx.$.form).appendChild(el);
        });
      },
      _removePropertyEl: function (el) {
        this.unlisten(el, el.schemaProperty.component.valueProperty.replace(/([A-Z])/g, '-$1').toLowerCase() + '-changed', '_schemaPropertyChanged');
        el.schemaProperty = null;
        Polymer.dom(this.$.form).removeChild(el);
      },
      _clearForm: function () {
        var formEl = Polymer.dom(this.$.form);
        while (formEl.firstChild) {
          this._removePropertyEl(formEl.firstChild);
        }
      },
      _schemaChanged: function() {
        this._clearForm();
        this._buildSchemaProperties();
        this._buildForm();
        this._setValue();
      },
      _errorChanged: function() {
        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: function(o) {
        return JSON.parse(JSON.stringify(o));
      },
      _isSchemaValue: function (type) {
        return this._isSchemaBoolean(type) || this._isSchemaNumber(type) || this._isSchemaString(type);
      },
      _isSchemaBoolean: function (type) {
        if (Array.isArray(type)) {
          return type.indexOf('boolean') !== -1;
        } else {
          return type === 'boolean';
        }
      },
      _isSchemaEnum: function (schema) {
        return !!schema.enum;
      },
      _isSchemaNumber: function (type) {
        if (Array.isArray(type)) {
          return type.indexOf('number') !== -1 || type.indexOf('integer') !== -1;
        } else {
          return type === 'number' || type === 'integer';
        }
      },
      _isSchemaString: function (type) {
        if (Array.isArray(type)) {
          return type.indexOf('string') !== -1;
        } else {
          return type === 'string';
        }
      },
      _isSchemaObject: function (type) {
        return type === 'object';
      },
      _isSchemaArray: function (type) {
        return type === 'array';
      }
    });
  </script>

</dom-module>