intervention-pages
Version:
280 lines (273 loc) • 10.2 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';
import '@polymer/paper-button/paper-button.js';
import '@unicef-polymer/etools-dialog/etools-dialog';
import '@unicef-polymer/etools-data-table/etools-data-table';
import '@unicef-polymer/etools-date-time/calendar-lite';
import '@unicef-polymer/etools-date-time/datepicker-lite';
import { sendRequest } from '@unicef-polymer/etools-ajax/etools-ajax-request';
import './hru-list.js';
import CONSTANTS from '../../../common/constants';
import { fireEvent } from '../../../utils/fire-custom-event';
import { gridLayoutStylesPolymer } from '../../../common/styles/grid-layout-styles-polymer';
import { buttonsStylesPolymer } from '../styles/buttons-styles-polymer';
import { requiredFieldStarredStyles } from '../../../common/styles/required-field-styles';
import { prepareDatepickerDate, convertDate } from '../../../utils/date-utils';
// this was refactored
// import EndpointsMixin from '../mixins/endpoints-mixin';
import { getEndpoint } from '../../../utils/endpoint-helper';
import { connect } from 'pwa-helpers/connect-mixin';
import { parseRequestErrorsAndShowAsToastMsgs } from '@unicef-polymer/etools-ajax/ajax-error-parser';
import { logError } from '@unicef-polymer/etools-behaviors/etools-logging';
import { property } from '@polymer/decorators';
import { interventionEndpoints } from '../../../utils/intervention-endpoints';
import { isEmptyObject } from '../../../utils/utils.js';
import { getStore } from '../../../utils/redux-store-access.js';
/**
* @polymer
* @customElement
* @appliesMixin EndpointsMixin
*/
class EditHruDialog extends connect(getStore())(PolymerElement) {
constructor() {
super(...arguments);
this.hruData = [];
this._hruEditedIndex = -1;
this.datePickerOpen = false;
}
static get template() {
return html `
${requiredFieldStarredStyles}${gridLayoutStylesPolymer()}${buttonsStylesPolymer()}
<style include="data-table-styles">
*[hidden] {
display: none !important;
}
#add-selected-date {
display: inline-block;
width: auto;
margin-top: 24px;
padding-right: 0;
}
.start-date {
padding-bottom: 24px;
max-width: 300px;
}
calendar-lite {
position: relative;
}
</style>
<etools-dialog
id="editHruDialog"
size="lg"
dialog-title="Add/Edit Dates for Humanitarian Report - UNICEF"
on-confirm-btn-clicked="_saveHurData"
ok-btn-text="Save"
keep-dialog-open
hidden$="[[datePickerOpen]]"
spinner-text="Saving..."
>
<div class="start-date">
<datepicker-lite
id="dtPickerStDate"
label="Select start date"
value="{{repStartDate}}"
required
min-date="[[minDate]]"
auto-validate
open="{{datePickerOpen}}"
selected-date-display-format="D MMM YYYY"
>
</datepicker-lite>
</div>
<div>
Use the date picker to select end dates of humanitarian report requirements.
</div>
<div class="layout-horizontal row-padding-v">
<div class="col layout-vertical col-6">
<calendar-lite
id="datepicker"
date="[[prepareDatepickerDate(selectedDate)]]"
pretty-date="{{selectedDate}}"
format="YYYY-MM-DD"
hide-header
>
</calendar-lite>
<paper-button id="add-selected-date" class="secondary-btn" on-click="_addToList">
Add Selected Date to List
</paper-button>
</div>
<div class="col col-6">
<div class="row-h" hidden$="[[!_empty(hruData.length)]]">
No dates added.
</div>
<hru-list
id="hruList"
class="flex-c"
with-scroll
hru-data="[[hruData]]"
hidden$="[[_empty(hruData.length)]]"
edit-mode
in-amendment="[[inAmendment]]"
on-delete-hru="_deleteHruDate"
>
</hru-list>
</div>
</div>
</etools-dialog>
`;
}
static get observers() {
return ['intervDataChanged(interventionStart, interventionId)'];
}
stateChanged(_state) {
// @lajos in ammendment will be used!
this.inAmendment = false;
// original:
// this.inAmendment = state.pageData!.in_amendment;
}
intervDataChanged() {
this.minDate = this._getMinDate();
}
_getMinDate() {
if (!this.interventionStart) {
return null;
}
const stDt = this.interventionStart instanceof Date ? this.interventionStart : convertDate(this.interventionStart);
if (stDt) {
return moment(stDt).add(-1, 'days').toDate();
}
return null;
}
_setDefaultStartDate() {
if (isEmptyObject(this.hruData)) {
this.repStartDate = this.interventionStart;
}
else {
this.repStartDate = this._getSavedStartDate();
}
}
_getSavedStartDate() {
this.hruData.sort((a, b) => {
// @ts-ignore
return new Date(a.due_date) - new Date(b.due_date);
});
return this.hruData[0].start_date;
}
openDialog() {
this._setDefaultStartDate();
this.$.editHruDialog.opened = true;
}
closeDialog() {
this.$.editHruDialog.opened = false;
}
_empty(listLength) {
return listLength === 0 || !listLength;
}
_addToList() {
const alreadySelected = this.hruData.find((d) => d.end_date === this.selectedDate);
if (alreadySelected) {
fireEvent(this.toastMsgLoadingSource, 'toast', {
text: 'This date is already added to the list.',
showCloseBtn: true
});
return;
}
this.push('hruData', {
end_date: moment(this.selectedDate).format('YYYY-MM-DD'),
due_date: this._oneDayAfterEndDate(this.selectedDate)
});
}
_oneDayAfterEndDate(endDt) {
return moment(endDt).add(1, 'days').format('YYYY-MM-DD');
}
_deleteHruDate(e) {
this.splice('hruData', e.detail.index, 1);
}
_hideEditedIndexInfo(index) {
return index === -1;
}
updateStartDates(startDate) {
if (isEmptyObject(this.hruData)) {
return;
}
this.set('hruData.0.start_date', startDate);
this._calculateStartDateForTheRestOfItems();
}
_calculateStartDateForTheRestOfItems() {
let i;
for (i = 1; i < this.hruData.length; i++) {
this.set('hruData.' + i + '.start_date', this._computeStartDate(i));
}
}
_computeStartDate(i) {
return moment(this.hruData[i - 1].end_date)
.add(1, 'days')
.format('YYYY-MM-DD');
}
_saveHurData() {
this.updateStartDates(this.repStartDate);
// @lajos TO BE REFACTORED and checked
const endpoint = getEndpoint(interventionEndpoints.reportingRequirements, {
intervId: this.interventionId,
reportType: CONSTANTS.REQUIREMENTS_REPORT_TYPE.HR
});
const dialog = this.$.editHruDialog;
dialog.startSpinner();
sendRequest({
method: 'POST',
endpoint: endpoint,
body: { reporting_requirements: this.hruData }
})
.then((response) => {
fireEvent(this, 'reporting-requirements-saved', response.reporting_requirements);
dialog.stopSpinner();
this.closeDialog();
})
.catch((error) => {
logError('Failed to save/update HR data!', 'edit-hru-dialog', error);
parseRequestErrorsAndShowAsToastMsgs(error, this.toastMsgLoadingSource);
dialog.stopSpinner();
});
}
prepareDatepickerDate(dateStr) {
return prepareDatepickerDate(dateStr);
}
}
__decorate([
property({ type: Number })
], EditHruDialog.prototype, "interventionId", void 0);
__decorate([
property({ type: Date })
], EditHruDialog.prototype, "interventionStart", void 0);
__decorate([
property({ type: Boolean })
], EditHruDialog.prototype, "inAmendment", void 0);
__decorate([
property({ type: Date })
], EditHruDialog.prototype, "repStartDate", void 0);
__decorate([
property({ type: Date })
], EditHruDialog.prototype, "minDate", void 0);
__decorate([
property({ type: String })
], EditHruDialog.prototype, "selectedDate", void 0);
__decorate([
property({ type: Array })
], EditHruDialog.prototype, "hruData", void 0);
__decorate([
property({ type: Object })
], EditHruDialog.prototype, "toastMsgLoadingSource", void 0);
__decorate([
property({ type: Number })
], EditHruDialog.prototype, "_hruEditedIndex", void 0);
__decorate([
property({ type: Boolean })
], EditHruDialog.prototype, "datePickerOpen", void 0);
window.customElements.define('edit-hru-dialog', EditHruDialog);
export { EditHruDialog };