intervention-pages
Version:
178 lines (174 loc) • 7.28 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, html, property, customElement } from 'lit-element';
import '@polymer/paper-input/paper-textarea';
import '@unicef-polymer/etools-content-panel';
import '@unicef-polymer/etools-data-table';
import '@unicef-polymer/etools-table/etools-table';
import { EtoolsTableColumnType } from '@unicef-polymer/etools-table/etools-table';
import '@unicef-polymer/etools-currency-amount-input';
import './activity-dialog';
import { connect } from 'pwa-helpers/connect-mixin';
import { getStore } from '../../utils/redux-store-access';
import { gridLayoutStylesLit } from '../../common/styles/grid-layout-styles-lit';
import { buttonsStyles } from '../../common/styles/button-styles';
import { sharedStyles } from '../../common/styles/shared-styles-lit';
import { elevationStyles } from '../../common/styles/elevation-styles';
import { pageIsNotCurrentlyActive } from '../../utils/common-methods';
import get from 'lodash-es/get';
import { isJsonStrMatch } from '../../utils/utils';
import { selectProgrammeManagement, selectProgrammeManagementActivityPermissions } from './effectiveAndEfficientProgrammeManagement.selectors';
import ComponentBaseMixin from '../../common/mixins/component-base-mixin';
/**
* @customElement
*/
let EffectiveAndEfficientProgrammeManagement = class EffectiveAndEfficientProgrammeManagement extends connect(getStore())(ComponentBaseMixin(LitElement)) {
constructor() {
super(...arguments);
this.showLoading = false;
this.activities = [
{
title: 'Standard activity',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis metus et neque viverra ',
unicef_cash: 3685,
partner_contribution: 54789
},
{
title: 'Standard activity',
description: 'There are many variations of passages available, but the majority have suffered alteration in some form',
unicef_cash: 125,
partner_contribution: 751
},
{
title: 'Standard activity',
description: 'It is a long established fact that a reader will be distracted by the readable content',
unicef_cash: 652,
partner_contribution: 441
}
];
this.columns = [
{
label: 'Item (all prices in PD currency)',
name: 'title',
type: EtoolsTableColumnType.Text
},
{
label: 'Unicef Cash',
name: 'unicef_cash',
type: EtoolsTableColumnType.Text
},
{
label: 'Partner Contribution',
name: 'partner_contribution',
type: EtoolsTableColumnType.Text
},
{
label: 'Total',
name: 'total',
type: EtoolsTableColumnType.Custom,
customMethod: (item) => {
return item ? item.unicef_cash + item.partner_contribution : '0';
}
}
];
this.total_amount = 0;
}
static get styles() {
return [gridLayoutStylesLit, buttonsStyles, elevationStyles];
}
render() {
// language=HTML
return html `
<style>
${sharedStyles}
</style>
<style>
:host {
display: block;
margin-bottom: 24px;
--ecp-content-padding: 0;
}
</style>
<etools-content-panel panel-title="Effective and efficient programme management">
<etools-loading loading-text="Loading..." .active="${this.showLoading}"></etools-loading>
<div slot="panel-btns">
Total: ${this.total_amount}
</div>
<etools-table
.items="${this.activities}"
.columns="${this.columns}"
.extraCSS="${sharedStyles}"
.getChildRowTemplateMethod="${this.getChildRowTemplate.bind(this)}"
>
</etools-table>
</etools-content-panel>
`;
}
connectedCallback() {
super.connectedCallback();
}
stateChanged(state) {
if (!state.interventions.current) {
return;
}
if (pageIsNotCurrentlyActive(get(state, 'app.routeDetails'), 'interventions', 'results')) {
return;
}
const newActivities = selectProgrammeManagement(state);
if (!isJsonStrMatch(this.originalData, newActivities)) {
this.activities = newActivities;
this.originalData = newActivities;
}
const newPermissions = selectProgrammeManagementActivityPermissions(state);
if (!isJsonStrMatch(this.permissions, newPermissions)) {
this.permissions = newPermissions;
}
}
openActivityDialog() {
this.createDialog();
this.activityDialog.permissions = this.permissions;
this.activityDialog.openDialog();
}
createDialog() {
this.activityDialog = document.createElement('activity-dialog');
this.activityDialog.setAttribute('id', 'activityDialog');
this.activityDialog.toastEventSource = this;
document.querySelector('body').appendChild(this.activityDialog);
}
getChildRowTemplate(item) {
const childRow = {};
childRow.showExpanded = false;
childRow.rowHTML = html `
<td colspan="7">
<div class="child-row-inner-container">
<label class="label-input">Description</label><br />
<label>${item.description}</label>
</div>
</td>
`;
return childRow;
}
};
__decorate([
property({ type: Boolean })
], EffectiveAndEfficientProgrammeManagement.prototype, "showLoading", void 0);
__decorate([
property({ type: Object })
], EffectiveAndEfficientProgrammeManagement.prototype, "activities", void 0);
__decorate([
property({ type: Array })
], EffectiveAndEfficientProgrammeManagement.prototype, "columns", void 0);
__decorate([
property({ type: Number })
], EffectiveAndEfficientProgrammeManagement.prototype, "total_amount", void 0);
__decorate([
property({ type: Object })
], EffectiveAndEfficientProgrammeManagement.prototype, "permissions", void 0);
EffectiveAndEfficientProgrammeManagement = __decorate([
customElement('effective-and-efficient-programme-management')
], EffectiveAndEfficientProgrammeManagement);
export { EffectiveAndEfficientProgrammeManagement };