intervention-pages
Version:
168 lines (167 loc) • 7.08 kB
JavaScript
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, customElement, html, property } from 'lit-element';
import { sharedStyles } from '../../common/styles/shared-styles-lit';
import { gridLayoutStylesLit } from '../../common/styles/grid-layout-styles-lit';
import { elevationStyles } from '../../common/styles/elevation-styles';
import { selectBudgetSummary } from './budgetSummary.selectors';
import { connect } from 'pwa-helpers/connect-mixin';
import { getStore } from '../../utils/redux-store-access';
import { pageIsNotCurrentlyActive } from '../../utils/common-methods';
import get from 'lodash-es/get';
/**
* @customElement
*/
let BudgetSummaryEl = class BudgetSummaryEl extends connect(getStore())(LitElement) {
static get styles() {
return [gridLayoutStylesLit, elevationStyles];
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
// language=HTML
return html `
<style>
${sharedStyles} :host {
display: block;
margin-bottom: 24px;
}
</style>
<section class="elevation content-wrapper" elevation="1">
<div class="layout-horizontal">
<div class="col col-1">
<span>
<label class="paper-label">Budget Currency</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="paper-label">Budget HQ Rate</label>
</span>
</div>
<div class="col col-2">
<span>
<label class="paper-label">% Prgm Effectiveness</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="paper-label">Total CSO Contrib</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="paper-label">Total Unicef Contrib</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="paper-label">Total Supply</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="paper-label">% Partner Contrib</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="paper-label">Total Cash Amt</label>
</span>
</div>
<div class="col col-2">
<span>
<label class="paper-label">Total Amt (Cash + Supply)</label>
</span>
</div>
</div>
<div class="layout-horizontal">
<div class="col col-1">
<span>
<label class="input-label" ?empty="${!((_a = this.budgetSummary) === null || _a === void 0 ? void 0 : _a.currency)}">
${(_b = this.budgetSummary) === null || _b === void 0 ? void 0 : _b.currency}
</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="input-label" ?empty="${!((_c = this.budgetSummary) === null || _c === void 0 ? void 0 : _c.hq_rate)}">
${(_d = this.budgetSummary) === null || _d === void 0 ? void 0 : _d.hq_rate} %
</label>
</span>
</div>
<div class="col col-2">
<span>
<label class="input-label" ?empty="${!((_e = this.budgetSummary) === null || _e === void 0 ? void 0 : _e.prgm_effectiveness)}">
${(_f = this.budgetSummary) === null || _f === void 0 ? void 0 : _f.prgm_effectiveness} %
</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="input-label" ?empty="${!((_g = this.budgetSummary) === null || _g === void 0 ? void 0 : _g.total_cso)}">
${(_h = this.budgetSummary) === null || _h === void 0 ? void 0 : _h.total_cso}
</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="input-label" ?empty="${!((_j = this.budgetSummary) === null || _j === void 0 ? void 0 : _j.total_unicef)}">
${(_k = this.budgetSummary) === null || _k === void 0 ? void 0 : _k.total_unicef}
</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="input-label" ?empty="${!((_l = this.budgetSummary) === null || _l === void 0 ? void 0 : _l.total_supply)}">
${(_m = this.budgetSummary) === null || _m === void 0 ? void 0 : _m.total_supply}
</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="input-label" ?empty="${!((_o = this.budgetSummary) === null || _o === void 0 ? void 0 : _o.partner_contrib)}">
${(_p = this.budgetSummary) === null || _p === void 0 ? void 0 : _p.partner_contrib}
</label>
</span>
</div>
<div class="col col-1">
<span>
<label class="input-label" ?empty="${!((_q = this.budgetSummary) === null || _q === void 0 ? void 0 : _q.total_cash)}">
${(_r = this.budgetSummary) === null || _r === void 0 ? void 0 : _r.total_cash}
</label>
</span>
</div>
<div class="col col-2">
<span>
<label class="input-label" ?empty="${!((_s = this.budgetSummary) === null || _s === void 0 ? void 0 : _s.total_amt)}">
${(_t = this.budgetSummary) === null || _t === void 0 ? void 0 : _t.total_amt}
</label>
</span>
</div>
</div>
</section>
`;
}
connectedCallback() {
super.connectedCallback();
}
stateChanged(state) {
if (pageIsNotCurrentlyActive(get(state, 'app.routeDetails'), 'interventions', 'results')) {
return;
}
if (state.interventions.current) {
this.budgetSummary = selectBudgetSummary(state);
}
}
};
__decorate([
property({ type: Object })
], BudgetSummaryEl.prototype, "budgetSummary", void 0);
BudgetSummaryEl = __decorate([
customElement('budget-summary')
], BudgetSummaryEl);
export { BudgetSummaryEl };