fs-person-sources.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../fs-request/fs-request.html">
<link rel="import" href="../fs-api-aware/fs-api-aware.html">
<link rel="import" href="../paper-card/paper-card.html">
<link rel="import" href="../paper-item/paper-item.html">

<!--
List sources attached to a person in the Family Tree

Example:

    <fs-person-sources person-id="PPP-PPPP"></fs-person-sources>
    
@group FamilySearch Elements
@customElement
@polymer
@demo demo/index.html
-->
<dom-module id="fs-person-sources">
  <template>
    <style>
      :host, paper-card {
        display: block;
      }
    </style>
    <fs-request
      auto
      url="{{_computeUrl(personId)}}"
      client-name="[[clientName]]"
      on-response="_handleResponse"
      on-loading-changed="_updateLoading"
      require-authentication></fs-request>
    <paper-card>
      <template is="dom-repeat" items="{{sources}}">
        <paper-item><a href="{{item.about}}" target="_blank">{{_sourceTitle(item)}}</a></paper-item>
      </template>
      <paper-item hidden$="{{!_isEmpty(sources)}}">No sources</paper-item>
    </paper-card>
  </template>
  <script>
    class FSPersonSources extends FSApiAwareMixin(Polymer.Element) {
      
      static get is() { return 'fs-person-sources'; }
      
      static get properties() {
        return {
          personId: {
            type: String,
            observer: '_personIdChanged',
            reflectToAttribute: true
          },
          loading: {
            type: Boolean,
            readOnly: true,
            value: false,
            notify: true
          },
          sources: {
            type: Array,
            value: function(){
              return [];
            }
          }
        };
      }
      
      _personIdChanged() {
        this.sources = [];
      }
      
      _updateLoading(e) {
        this._setLoading(e.detail.value);
      }
      
      _computeUrl() {
        if(this.personId){
          return `/platform/tree/persons/${this.personId}/sources`;
        }
      }
      
      _handleResponse(e) {
        if(e && e.detail && e.detail.response && e.detail.response.data && e.detail.response.data.sourceDescriptions) {
          this.sources = e.detail.response.data.sourceDescriptions;
        }
      }
      
      _sourceTitle(source) {
        return source.titles[0].value;
      }
      
      _isEmpty() {
        return this.sources && this.sources.length === 0;
      }
      
    }
    
    customElements.define(FSPersonSources.is, FSPersonSources);
  </script>
</dom-module>