fs-user-history.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-item/paper-item-body.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../fs-request/fs-request.html">
<link rel="import" href="../fs-user-mixin/fs-user-mixin.html">

<dom-module id="fs-user-history">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <paper-dropdown-menu id="menu" label="{{label}}" no-label-float horizontal-align="left">
      <paper-listbox id="list" slot="dropdown-content">
        <template is="dom-repeat" items="{{persons}}">
          <paper-item label="{{item.display.name}}" on-tap="_selectPerson">
            <paper-item-body two-line>
              <div>{{item.display.name}}</div>
              <div secondary>{{item.id}}</div>
            </paper-item-body>
          </paper-item>
        </template>
      </paper-listbox>
    </paper-card>
    <fs-request
      id="request"
      loading="{{loading}}"
      require-authentication
      on-response="_handleResponse"></fs-request>
  </template>

  <script>
    /**
     * `fs-user-history`
     * 
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class FsUserHistory extends FsUserMixin(Polymer.Element) {
      static get is() { return 'fs-user-history'; }
      static get properties() {
        return {
          
          /** List of persons in the history */
          persons: {
            type: Array,
            value: function(){
              return [];
            }
          },
          
          /** Label shown on the dropdown menu */
          label: {
            type: String,
            value: 'Person History'
          },
          
          /** Whether the initial list is loading */
          loading: {
            type: Boolean,
            value: false
          },
          
          /** Whether a new person is being added */
          updating: {
            type: Boolean,
            value: false
          }
        };
      }
      
      static get observers() {
        return [
          '_userIdChanged(userId)'
        ];
      }
      
      clear() {
        this.persons = [];
      }
      
      reload() {
        this.$.request.generateRequest();
      }
      
      addPerson(personId) {
        if(personId && this.userId) {
          this.updating = true;
          const request = new FSRequest();
          request.url = this._historyUrl(this.userId);
          request.headers = {
            'Content-Type': 'application/x-gedcomx-atom+json',
            Accept: 'application/x-gedcomx-atom+json'
          };
          request.method = 'POST';
          request.body = {
            entries : [{
              id : personId
            }]
          };
          request.addEventListener('response', (e) => {
            this.updating = false;
            const response = e.detail.response;
            if(response && response.data && response.data.entries) {
              this._addPerson(response.data.entries[0].content.gedcomx.persons[0]);
            }
          });
          request.ready();
          request.generateRequest();
        }
      }
      
      /**
       * Helper method that actually adds the person to the list and updates
       * the state.
       * 
       * @param {Person} person
       */
      _addPerson(person) {
        // Remove the person if they are already in the list
        for(let i = 0; i < this.persons.length; i++) {
          if(this.persons[i].id === person.id) {
            this.splice('persons', i, 1);
            break;
          }
        }
        
        // Now we can add the new person to the start of the list
        this.unshift('persons', person);
        
        setTimeout(() => {
          this._updateSelection();
        });
      }
      
      _userIdChanged(userId) {
        if(userId) {
          this.$.request.url = this._historyUrl(userId);
          this.$.request.headers = {
            Accept: 'application/x-gedcomx-atom+json'
          };
          this.$.request.generateRequest();
        }
      }
      
      _historyUrl(userId) {
        return `/platform/users/${userId}/history`;
      }
      
      _handleResponse(e) {
        const response = e.detail.response;
        if(response.data && Array.isArray(response.data.entries)) {
          this.persons = response.data.entries.filter((entry) => {
            // Not all entries have content, likely caused be a person being deleted
            return entry.content;
          }).map((entry) => {
            return entry.content.gedcomx.persons[0];
          });
        }
      }
      
      /**
       * Fired when a person is selected from the list.
       *
       * @event person-select
       * @param {number} personId ID of the person that was selected.
       */
      _selectPerson(event) {
        this.dispatchEvent(new CustomEvent('person-select', {
          detail: {personId: event.model.item.id},
          bubbles: true,
          composed: true
        }));
      }
      
      /**
       * Update the current selection
       */
      _updateSelection() {
        // Make sure the first person in the list is always selected. We do this
        // by explicitly selecting the first person whenever the list changes.
        //
        // Due to a bug (https://github.com/PolymerElements/iron-selector/issues/154)
        // we select the 2nd item then select the 1st item. Whenever that bug is
        // fixed then we should only need to select the 1st item.
        const list = this.$.list;
        list.selectIndex(1);
        list.selectIndex(0);
      }
    }

    window.customElements.define(FsUserHistory.is, FsUserHistory);
  </script>
</dom-module>