object-sync.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">

<!--
`object-sync` syncs an Object to a remote server.

You simply specify a URL where the JSON resource resides.

The URL should accept:

-  `GET` requests for fetching the object
- `PUT` requests for saving the object

The payload for saving - `PUT` - would be included in the `body` of the request.

The `value` is saved to the server only if it changes *after* it was initially
fetched successfully from the remote server so you don't have to worry about
timing issues.

@demo demo/index.html
-->

<dom-module id="object-sync">
  <template>
    <style>
      :host {
        display: block;
      }

      .label {
        font-family: Helvetica;
        @apply --status-label;
      }

      .label.success {
        color: #8BC34A;
        @apply --status-label-success;
      }

      .label.error {
        color: #F44336;
        @apply --status-label-error;
      }
    </style>

    <iron-ajax
      id="ajaxGet"
      method="GET"
      url="[[url]]"
      headers="[[headers]]"
      last-error="{{lastError}}"
      on-response="_gotRemoteValue"
      on-error="_notifyAjaxError">
    </iron-ajax>
    <iron-ajax
      id="ajaxPut"
      method="PUT"
      url="[[url]]"
      headers="[[headers]]"
      last-error="{{lastError}}"
      on-response="_putRemoteValue"
      on-error="_notifyAjaxError"
      content-type="application/json">
    </iron-ajax>
    <span class="label success" hidden="[[!_syncSuccess]]">[[successMsg]]</span>
    <span class="label error" hidden="[[!lastError]]">[[errorMsg]]</span>
  </template>

  <script>
    Polymer({

      is: "object-sync",

      properties: {
        /** The URL where the JSON resource resides */
        url: {
          type: String
        },

        /** The request headers for both `GET` & `PUT` */
        headers: {
          type: Object
        },

        /** The data associated with this storage */
        value: {
          type: Object,
          notify: true
        },

        /** The last Ajax error, if any. */
        lastError: {
          type: Object,
          value: false,
          notify: true
        },

        /** Set to `true` to enable this element. If false no requests/syncing
        will take place. Most commonly used to conditionally enable syncing
        if for example a user is logged-in. Resetting this value to `true` will
        re-trigger an initial fetch */
        shouldFetch: {
          type: Boolean,
          value: false,
          observer: "_fetchInitialObject"
        },

        /** Set to `true` to prevent all requests for this element */
        disabled: {
          type: Boolean,
          value: false
        },

        /** Message to be displayed if object was synced succesfully */
        successMsg: {
          type: String,
          value: "Saved"
        },

        /** Message to be displayed if any of the requests fail */
        errorMsg: {
          type: String,
          value: "An error occured :("
        },

        _fetchedInitialValue: {
          type: Boolean,
          value: false,
          readOnly: true
        },
        _syncSuccess: {
          type: Boolean,
          value: false,
          readOnly: true
        },
      },

      /**
       * Fired when the initial value is succesfully fetched from the server
       *
       * @event value-fetched
       */

       /**
        * Fired when the value is succesfully saved to remote
        *
        * @event value-saved
        */

       /**
        * Fired when an Ajax error occurs
        *
        * @event error
        * @param {Object} error The Ajax error event
        */

      observers: [
        "_valueChanged(value.*)"
      ],

      attached: function() {
        window.objectSync = this;
      },

      _valueChanged: function(changes) {
        if (!this._fetchedInitialValue) return false;

        this.debounce("_syncingValueChange", function() {
          this._syncObjectToRemote(changes.base);
        }, 750);
      },

      _fetchInitialObject: function(shouldFetch) {
        if (!shouldFetch || this.disabled) return false;

        /*
         * `shouldFetch` prop observer might trigger many times, until it's set,
         * for example if it's bound to a logged-in-user type variable, user
         * would be first logged-out until the system logs him in
         * (in AJAX-login mechanisms)
         *
         * @TODO investigate a better way of handling such issues
         */
        this.debounce("_fetchInitialObject", function() {
          this.$.ajaxGet.generateRequest();
        }.bind(this));
      },

      _syncObjectToRemote: function(value) {
        if (this.disabled) return false;

        this.$.ajaxPut.body = JSON.stringify(value);
        this.$.ajaxPut.generateRequest();
      },

      _gotRemoteValue: function(e) {
        this.set("value", e.detail.response);
        this._set_fetchedInitialValue(true);
        this.fire("value-fetched", e.detail.response);
      },

      _putRemoteValue: function(e) {
        this.fire("value-saved", e);
        this._setSyncSuccess();
      },

      _setSyncSuccess: function() {
        this._set_syncSuccess(true);
        this.async(function() {
          this._set_syncSuccess(false);
        }, 1000);
      },

      _notifyAjaxError: function(e) {
        this.fire("error", e);
      }
    });
  </script>
</dom-module>