intervention-pages
Version:
249 lines (230 loc) • 9.82 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;
};
/* eslint-disable lit/no-legacy-template-syntax */
import { PolymerElement, html } from '@polymer/polymer/polymer-element';
import '@polymer/polymer/polymer-element';
import '@polymer/iron-icons/iron-icons';
import '@polymer/iron-selector/iron-selector';
import '@polymer/iron-pages/iron-pages';
import '@polymer/iron-flex-layout/iron-flex-layout';
import '@polymer/paper-item/paper-item';
import '@polymer/paper-icon-button/paper-icon-button';
import '@unicef-polymer/etools-content-panel/etools-content-panel';
import './qpr/quarterly-reporting-requirements';
import './hr/humanitarian-reporting-req-unicef';
import './hr/humanitarian-reporting-req-cluster';
import './srr/special-reporting-requirements';
import { gridLayoutStylesPolymer } from '../../common/styles/grid-layout-styles-polymer';
import { sectionContentStylesPolymer } from '../../common/styles/content-section-styles-polymer';
// @lajos needs to be checked if OK
import { connect } from 'pwa-helpers/connect-mixin';
import { getStore } from '../../utils/redux-store-access';
import { property } from '@polymer/decorators';
import get from 'lodash-es/get';
import cloneDeep from 'lodash-es/cloneDeep';
/**
* @polymer
* @customElement
*/
class PartnerReportingRequirements extends connect(getStore())(PolymerElement) {
constructor() {
super(...arguments);
this.selectedReportType = 'qtyProgress';
// count properties
this.qprRequirementsCount = 0;
this.hrUnicefRequirementsCount = 0;
this.hrClusterRequirementsCount = 0;
this.specialRequirementsCount = 0;
}
static get template() {
return html `
${gridLayoutStylesPolymer()}${sectionContentStylesPolymer}
<style>
:host {
display: block;
margin-bottom: 24px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
etools-content-panel {
--ecp-content-padding: 0;
}
/* ------------------------------- */
.reporting-req-data {
border-left: 1px solid var(--darker-divider-color);
}
.nav-menu {
--layout-vertical;
background: var(--primary-background-color);
padding: 8px 0 8px 0;
min-width: 290px;
}
.nav-menu-item {
padding-left: 24px;
padding-right: 24px;
font-size: 14px;
font-weight: bold;
text-transform: capitalize;
--paper-item-focused-before: {
opacity: 0;
}
}
.nav-menu-item.iron-selected {
color: var(--primary-color);
}
.nav-menu-item {
color: var(--secondary-text-color);
}
.nav-menu-item.iron-selected {
background-color: var(--medium-theme-background-color);
}
/* ------------------------------- */
.edit-rep-req {
color: var(--medium-icon-color);
margin-left: 16px;
}
.nav-menu-item.qpr {
--layout-horizontal;
--layout-justified;
}
</style>
<etools-content-panel show-expand-btn class="content-section" panel-title="Partner Reporting Requirements">
<div class="flex-c layout-horizontal">
<div class="reports-menu nav-menu">
<iron-selector selected="{{selectedReportType}}" attr-for-selected="name" selectable="paper-item">
<paper-item name="qtyProgress" class="nav-menu-item qpr">
<span>Quarterly Progress Reports ([[qprRequirementsCount]])</span>
<paper-icon-button
class="edit-rep-req"
icon="create"
on-click="_openQprEditDialog"
hidden$="[[_hideRepReqEditBtn(editMode, qprRequirementsCount)]]"
></paper-icon-button>
</paper-item>
<paper-item name="humanitarianUnicef" class="nav-menu-item">
<span>Humanitarian Reports - UNICEF ([[hrUnicefRequirementsCount]])</span>
<paper-icon-button
class="edit-rep-req"
icon="create"
on-click="_openHruEditDialog"
hidden$="[[_hideRepReqEditBtn(editMode, hrUnicefRequirementsCount)]]"
></paper-icon-button>
</paper-item>
<paper-item name="humanitarianCluster" class="nav-menu-item">
Humanitarian Reports - Cluster ([[hrClusterRequirementsCount]])
</paper-item>
<paper-item name="special" class="nav-menu-item">
Special Report ([[specialRequirementsCount]])
</paper-item>
</iron-selector>
</div>
<div class="flex-c reporting-req-data">
<iron-pages
id="reportingPages"
selected="[[selectedReportType]]"
attr-for-selected="name"
fallback-selection="qtyProgress"
>
<quarterly-reporting-requirements
id="qpr"
name="qtyProgress"
intervention-id="[[interventionId]]"
intervention-start="[[interventionStart]]"
intervention-end="[[interventionEnd]]"
requirements-count="{{qprRequirementsCount}}"
edit-mode="[[editMode]]"
>
</quarterly-reporting-requirements>
<humanitarian-reporting-req-unicef
id="hru"
name="humanitarianUnicef"
intervention-id="[[interventionId]]"
intervention-start="[[interventionStart]]"
requirements-count="{{hrUnicefRequirementsCount}}"
expected-results="[[expectedResults]]"
edit-mode="[[editMode]]"
>
</humanitarian-reporting-req-unicef>
<humanitarian-reporting-req-cluster
name="humanitarianCluster"
intervention-id="[[interventionId]]"
requirements-count="{{hrClusterRequirementsCount}}"
expected-results="[[expectedResults]]"
>
</humanitarian-reporting-req-cluster>
<special-reporting-requirements
name="special"
intervention-id="[[interventionId]]"
requirements-count="{{specialRequirementsCount}}"
>
</special-reporting-requirements>
</iron-pages>
</div>
</div>
</etools-content-panel>
`;
}
stateChanged(state) {
if (!get(state, 'interventions.current')) {
return;
}
// @lajos TO DO: get correct values for bellow
// this.editMode = state.intervention!.permissions!.edit.reporting_requirements;
const currentIntervention = get(state, 'interventions.current');
this.intervention = cloneDeep(currentIntervention);
this.interventionId = this.intervention.id;
this.interventionStart = this.intervention.start;
this.interventionEnd = this.intervention.end;
this.expectedResults = this.intervention.result_links;
this.editMode = false;
}
_openQprEditDialog() {
this.$.qpr.openQuarterlyRepRequirementsDialog();
}
_openHruEditDialog() {
this.$.hru.openUnicefHumanitarianRepReqDialog();
}
_hideRepReqEditBtn(editMode, qprCount) {
return qprCount === 0 || !editMode;
}
}
__decorate([
property({ type: String })
], PartnerReportingRequirements.prototype, "selectedReportType", void 0);
__decorate([
property({ type: Number })
], PartnerReportingRequirements.prototype, "interventionId", void 0);
__decorate([
property({ type: Date })
], PartnerReportingRequirements.prototype, "interventionStart", void 0);
__decorate([
property({ type: String })
], PartnerReportingRequirements.prototype, "interventionEnd", void 0);
__decorate([
property({ type: Array })
], PartnerReportingRequirements.prototype, "expectedResults", void 0);
__decorate([
property({ type: Number })
], PartnerReportingRequirements.prototype, "qprRequirementsCount", void 0);
__decorate([
property({ type: Number })
], PartnerReportingRequirements.prototype, "hrUnicefRequirementsCount", void 0);
__decorate([
property({ type: Number })
], PartnerReportingRequirements.prototype, "hrClusterRequirementsCount", void 0);
__decorate([
property({ type: Number })
], PartnerReportingRequirements.prototype, "specialRequirementsCount", void 0);
__decorate([
property({ type: Boolean })
], PartnerReportingRequirements.prototype, "editMode", void 0);
__decorate([
property({ type: Object })
], PartnerReportingRequirements.prototype, "intervention", void 0);
window.customElements.define('partner-reporting-requirements', PartnerReportingRequirements);