ee-medication-list.html

<link rel="import" href="../polymer/polymer.html">

<!--  Paper -->
<link rel="import" href="../paper-fab/paper-fab.html">

<!-- Iron -->
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">

<!-- Third -->
<link rel="import" href="../vaadin-combo-box/vaadin-combo-box.html">

<!-- Elfy -->
<link rel="import" href="../ee-shared-styles/shared-styles.html">
<link rel="import" href="../ee-helper-behavior/ee-helper-behavior.html">
<link rel="import" href="../js-data-behaviors/js-data-collection-behavior.html">
<link rel="import" href="../elfy-api/elfy-api.html">

<link rel="import" href="ee-medication.html">

<!--
`ee-medication-list`
medication add and display

@demo demo/index.html
-->

<dom-module id="ee-medication-list">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
      }

      paper-fab {
        margin: 12px auto;
      }

      .list-container {
        background-color: #fff;
        padding: 24px;
        @apply(--ee-medication-list-container);
      }

    </style>
    <div class="error">[[errorMessage]]</div>

    <template is="dom-if" if="[[_lengthBigger(medications,0)]]" restamp="true">
      <div class="h mb mt">
        <span class="space">Name</span>
        <span class="space">Dosage</span>
        <span class="space"></span>
      </div>
    </template>

    <div class="list-container" hidden="[[!careRecipient.id]]">
      <template is="dom-repeat" items="{{medications}}" as="medication">
        <ee-medication medication="{{medication}}" on-remove="_removeMedication"></ee-medication>
      </template>
    </div>
    <paper-fab icon="add" on-tap="addMedication" hidden="[[!careRecipient.id]]"></paper-fab>
    <div class="center" hidden="[[careRecipient.id]]">Please first select a care recipient.</div>
  </template>
  <script>
    Polymer({

      is: 'ee-medication-list',

      behaviors: [
        Elfy.EEHelperBehavior,
        Elfy.JSDataCollectionBehavior,
        Polymer.IronResizableBehavior,
      ],

      properties: {
        medications: {
          type: Object,
          value() { return [] }
        },

        careRecipient: {
          type: Object,
          value() { return {} },
          notify: true
        },

      },

      observers: [
        '_careRecipientChanged(careRecipient, careRecipient.*)'
      ],

      attached() {
        this.fire('resize')
      },

      addMedication() {
        if (!this.careRecipient || !this.careRecipient.id) return
        var cr = App.Medication.createRecord()
        cr.careRecipient = this.careRecipient
        this.push('medications', cr)
      },

      _removeMedication(e) {
        if (this.medications.indexOf(e.model.medication) > -1) {
          this.splice('medications', this.medications.indexOf(e.model.medication), 1);
        }
      },

      _careRecipientChanged(cr) {
        this.set('medications', [])
        if (cr && cr.id) {
          this.JSData.collections = [{'name': 'medications', 'query': {'careRecipientId': cr.id}}]
          this._loadData()
        }
      },
    });
  </script>
</dom-module>