intervention-pages/dist/intervention-results/results-structure/pd-indicators.js

PD pages

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, css, customElement, property } from 'lit-element';
import { ResultStructureStyles } from './results-structure.styles';
import { gridLayoutStylesLit } from '../../common/styles/grid-layout-styles-lit';
import '@polymer/iron-icons';
import { connect } from 'pwa-helpers/connect-mixin';
import { getStore } from '../../utils/redux-store-access';
let PdIndicators = class PdIndicators extends connect(getStore())(LitElement) {
    constructor() {
        super(...arguments);
        this.indicators = [];
        this.locations = [];
        this.sections = [];
        this.disaggregations = [];
    }
    static get styles() {
        // language=CSS
        return [
            gridLayoutStylesLit,
            ResultStructureStyles,
            css `
        :host {
          --blue-background: #b6d5f1;
          --blue-background-dark: #a4c4e1;
          display: block;
          background: var(--blue-background);
        }
      `
        ];
    }
    render() {
        // language=HTML
        return html `
      <style>
        etools-data-table-row {
          --list-row-collapse-wrapper: {
            padding: 0 !important;
            background-color: var(--blue-background-dark);
            border-top: 1px solid var(--main-border-color);
          }
          --list-row-wrapper: {
            background-color: var(--blue-background) !important;
            min-height: 55px;
            border: 1px solid var(--main-border-color) !important;
            border-bottom: none !important;
          }
        }
      </style>

      <div class="row-h align-items-center header">
        <div class="heading flex-auto">
          PD Indicators
          <iron-icon icon="add-box"></iron-icon>
        </div>
        <div class="heading number-data flex-none">Baseline</div>
        <div class="heading number-data flex-none">Target</div>
      </div>

      ${this.indicators.map((indicator) => html `
          <etools-data-table-row>
            <div slot="row-data" class="layout-horizontal">
              <!--    Indicator name    -->
              <div class="text flex-auto">
                ${(indicator.indicator && indicator.indicator.title) || '-'}
              </div>

              <!--    Baseline    -->
              <div class="text number-data flex-none">
                ${indicator.baseline.v || '-'}
              </div>

              <!--    Target    -->
              <div class="text number-data flex-none">
                ${indicator.target.v || '-'}
              </div>
            </div>

            <!--    Indicator row collapsible Details    -->
            <div slot="row-data-details" class="row-h">
              <!--    Locations    -->
              <div class="details-container">
                <div class="text details-heading">Locations</div>
                <div class="details-text">
                  ${indicator.locations.length
            ? indicator.locations.map((location) => html `
                          <div class="details-list-item">${this.getLocationName(location)}</div>
                        `)
            : '-'}
                </div>
              </div>

              <!--    Section and Cluster    -->
              <div class="details-container">
                <div class="text details-heading">Section/Cluster</div>
                <div class="details-text">${this.getSectionAndCluster(indicator.section, indicator.cluster_name)}</div>
              </div>

              <!--    Disagregations    -->
              <div class="details-container">
                <div class="text details-heading">Disagregation</div>
                <div class="details-text">
                  ${indicator.disaggregation.length
            ? indicator.disaggregation.map((disaggregation) => this.getDisaggregation(disaggregation))
            : '-'}
                </div>
              </div>
            </div>
          </etools-data-table-row>
        `)}
    `;
    }
    stateChanged(state) {
        this.sections = (state.commonData && state.commonData.sections) || [];
        this.locations = (state.commonData && state.commonData.locations) || [];
        this.disaggregations = (state.commonData && state.commonData.disaggregations) || [];
    }
    getLocationName(id) {
        const location = this.locations.find((location) => location.id === String(id));
        return location ? `${location.name} [${location.p_code}]` : '';
    }
    getDisaggregation(disaggregationId) {
        const disaggregation = this.disaggregations.find(({ id }) => String(id) === String(disaggregationId)) || null;
        const values = (disaggregation &&
            disaggregation.disaggregation_values.map(({ value }) => value).join(', ')) ||
            '';
        return disaggregation && values
            ? html ` <div class="details-list-item"><b>${disaggregation.name}</b>: ${values}</div> `
            : html ``;
    }
    getSectionAndCluster(sectionId, clusterName) {
        const section = (sectionId && this.sections.find(({ id }) => String(id) === String(sectionId))) || null;
        return ([(section && section.name) || null, clusterName || null]
            .filter((name) => Boolean(name))
            .join(' / ') || '-');
    }
};
__decorate([
    property({ type: Array })
], PdIndicators.prototype, "indicators", void 0);
__decorate([
    property()
], PdIndicators.prototype, "locations", void 0);
__decorate([
    property()
], PdIndicators.prototype, "sections", void 0);
__decorate([
    property()
], PdIndicators.prototype, "disaggregations", void 0);
PdIndicators = __decorate([
    customElement('pd-indicators')
], PdIndicators);
export { PdIndicators };