cuba-service-form.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../cuba-app/cuba-app-aware-behavior.html">
<link rel="import" href="cuba-form-behavior.html">

<!--
`cuba-service-form`
-->

<dom-module id="cuba-service-form">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <form id="form">
      <slot></slot>
    </form>
  </template>

  <script>
    Polymer({

      is: 'cuba-service-form',

      behaviors: [CubaAppAwareBehavior, CubaFormBehavior],

      properties: {
        serviceName: String,
        method: String,
        params: {
          type: Object
        },
        result: {
          type: Object,
          notify: true,
          readOnly: true
        }
      },

      ready: function() {
        this.$.form.addEventListener('submit', function(event) {
          event.preventDefault();
          this.submit();
          return false;
        }.bind(this));
      },

      /**
       * Send data to server.
       */
      submit: function() {
        this._clearErrors();
        return this.app.invokeService(this.serviceName, this.method, this.params).then(function(resp) {
          this._setResult(resp);
          this.fire('cuba-form-response', {response: resp});
          return resp;
        }.bind(this), function(errResp) {
          this._handleError(errResp);
          this.fire('cuba-form-error', {errorResponse: errResp});
          return errResp;
        }.bind(this));
      }
    });
  </script>
</dom-module>