intervention-pages/dist/intervention-timing/reporting-requirements/qpr/edit-qpr-dialog.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;
};
/* eslint-disable lit/no-legacy-template-syntax */
import { PolymerElement, html } from '@polymer/polymer';
import '@polymer/iron-label/iron-label';
import '@polymer/paper-button/paper-button';
import '@unicef-polymer/etools-dialog/etools-dialog.js';
import { prepareDatepickerDate } from '../../../utils/date-utils';
// import EndpointsMixin from '../mixins/endpoints-mixin';
import { getEndpoint } from '../../../utils/endpoint-helper';
import { interventionEndpoints } from '../../../utils/intervention-endpoints';
import './qpr-list.js';
import CONSTANTS from '../../../common/constants';
import '@unicef-polymer/etools-date-time/calendar-lite.js';
import { gridLayoutStylesPolymer } from '../../../common/styles/grid-layout-styles-polymer';
import { buttonsStylesPolymer } from '../styles/buttons-styles-polymer';
import { logError } from '@unicef-polymer/etools-behaviors/etools-logging';
import { sendRequest } from '@unicef-polymer/etools-ajax/etools-ajax-request';
import { parseRequestErrorsAndShowAsToastMsgs } from '@unicef-polymer/etools-ajax/ajax-error-parser.js';
import { property } from '@polymer/decorators';
import { fireEvent } from '../../../utils/fire-custom-event';
/**
 * @polymer
 * @customElement
 */
class EditQprDialog extends PolymerElement {
    constructor() {
        super(...arguments);
        this.qprData = [];
        this.addOrModifyQprDialogOpened = false;
        this._qprDatesSetModel = {
            start_date: null,
            end_date: null,
            due_date: null
        };
        this._qprDatesSetEditedIndex = -1;
    }
    static get template() {
        return html `
      ${gridLayoutStylesPolymer()}${buttonsStylesPolymer()}
      <style>
        *[hidden] {
          display: none !important;
        }

        #qpr-edit-info {
          margin-right: 24px;
        }

        qpr-list {
          margin-top: 24px;
        }

        iron-label {
          margin-bottom: 24px;
        }

        calendar-lite {
          position: relative;
          width: 268px;
          height: 100%;
        }
      </style>

      <etools-dialog
        id="editQprDialog"
        size="lg"
        dialog-title="Edit Quarterly Progress Reporting Requirements"
        hidden$="[[addOrModifyQprDialogOpened]]"
        on-confirm-btn-clicked="_saveModifiedQprData"
        ok-btn-text="Save"
        keep-dialog-open
        spinner-text="Saving..."
      >
        <div class="layout-horizontal">
          <span id="qpr-edit-info">All dates in the future can be edited before saving. | Or</span>
          <paper-button class="secondary-btn" on-click="_addNewQpr">
            Add Requirement
          </paper-button>
        </div>

        <qpr-list
          id="qprList"
          with-scroll
          qpr-data="[[qprData]]"
          edit-mode
          in-amendment="[[inAmendment]]"
          on-edit-qpr="_editQprDatesSet"
          on-delete-qpr="_deleteQprDatesSet"
          always-show-row-actions
        ></qpr-list>
      </etools-dialog>

      <!-- add or edit a QPR row -->
      <etools-dialog
        id="addOrModifyQprDialog"
        size="lg"
        dialog-title="Edit Standard Quarterly Report Requirements"
        opened="{{addOrModifyQprDialogOpened}}"
        no-padding
        on-close="_updateQprData"
        ok-btn-text="Save"
      >
        <div class="row-h" hidden$="[[_hideEditedIndexInfo(_qprDatesSetEditedIndex)]]">
          You are editing ID [[_getEditedQprDatesSetId(_qprDatesSetEditedIndex)]]
        </div>

        <div class="row-h">
          <div class="col layout-vertical">
            <iron-label for="startDate">
              Start Date
            </iron-label>
            <calendar-lite
              id="startDate"
              date="[[prepareDatepickerDate(_editedQprDatesSet.start_date)]]"
              pretty-date="{{_editedQprDatesSet.start_date}}"
              format="YYYY-MM-DD"
              hide-header
            >
            </calendar-lite>
          </div>
          <div class="col layout-vertical">
            <iron-label for="endDate">
              End Date
            </iron-label>
            <calendar-lite
              id="endDate"
              date="[[prepareDatepickerDate(_editedQprDatesSet.end_date)]]"
              pretty-date="{{_editedQprDatesSet.end_date}}"
              format="YYYY-MM-DD"
              hide-header
            >
            </calendar-lite>
          </div>
          <div class="col layout-vertical">
            <iron-label for="dueDate">
              Due Date
            </iron-label>
            <calendar-lite
              id="dueDate"
              date="[[prepareDatepickerDate(_editedQprDatesSet.due_date)]]"
              pretty-date="{{_editedQprDatesSet.due_date}}"
              format="YYYY-MM-DD"
              hide-header
            >
            </calendar-lite>
          </div>
        </div>
      </etools-dialog>
    `;
    }
    openQprDialog() {
        this.$.editQprDialog.opened = true;
    }
    closeQprDialog() {
        this.$.editQprDialog.opened = false;
    }
    _addNewQpr() {
        this.set('_editedQprDatesSet', Object.assign({}, this._qprDatesSetModel));
        this.set('addOrModifyQprDialogOpened', true);
    }
    _duplicateDueDate(dueDate) {
        const foundQpr = this.qprData.find((d) => d.due_date === dueDate);
        if (this._qprDatesSetEditedIndex > -1 && foundQpr) {
            const foundQprIndex = this.qprData.indexOf(foundQpr);
            return foundQprIndex !== +this._qprDatesSetEditedIndex;
        }
        return !!foundQpr;
    }
    _updateQprData(e) {
        if (e.detail.confirmed) {
            if (this._duplicateDueDate(this._editedQprDatesSet.due_date)) {
                fireEvent(this.toastMsgLoadingSource, 'toast', {
                    text: 'Requirement dates not added, selected Due Date is already in the list.',
                    showCloseBtn: true
                });
                return;
            }
            if (this._qprDatesSetEditedIndex < 0) {
                // add
                this.push('qprData', this._editedQprDatesSet);
            }
            else {
                // edit
                this.splice('qprData', this._qprDatesSetEditedIndex, 1, this._editedQprDatesSet);
            }
        }
        this.set('_qprDatesSetEditedIndex', -1);
    }
    _editQprDatesSet(e) {
        this.set('_qprDatesSetEditedIndex', e.detail.index);
        this.set('_editedQprDatesSet', Object.assign({}, this.qprData[this._qprDatesSetEditedIndex]));
        this.set('addOrModifyQprDialogOpened', true);
    }
    _deleteQprDatesSet(e) {
        this.splice('qprData', e.detail.index, 1);
    }
    _hideEditedIndexInfo(index) {
        return index === -1;
    }
    _getEditedQprDatesSetId(index) {
        return this.$.qprList.getIndex(index, this.qprData.length);
    }
    _saveModifiedQprData() {
        const endpoint = getEndpoint(interventionEndpoints.reportingRequirements, {
            intervId: this.interventionId,
            reportType: CONSTANTS.REQUIREMENTS_REPORT_TYPE.QPR
        });
        const dialog = this.$.editQprDialog;
        dialog.startSpinner();
        sendRequest({
            method: 'POST',
            endpoint: endpoint,
            body: { reporting_requirements: this.qprData }
        })
            .then((response) => {
            fireEvent(this, 'reporting-requirements-saved', response.reporting_requirements);
            dialog.stopSpinner();
            this.closeQprDialog();
        })
            .catch((error) => {
            logError('Failed to save/update qpr data!', 'edit-qpr-dialog', error);
            parseRequestErrorsAndShowAsToastMsgs(error, this.toastMsgLoadingSource);
            dialog.stopSpinner();
        });
    }
    prepareDatepickerDate(dateStr) {
        return prepareDatepickerDate(dateStr);
    }
}
__decorate([
    property({ type: Number })
], EditQprDialog.prototype, "interventionId", void 0);
__decorate([
    property({ type: Boolean })
], EditQprDialog.prototype, "inAmendment", void 0);
__decorate([
    property({ type: Array })
], EditQprDialog.prototype, "qprData", void 0);
__decorate([
    property({ type: Boolean })
], EditQprDialog.prototype, "addOrModifyQprDialogOpened", void 0);
__decorate([
    property({ type: Object })
], EditQprDialog.prototype, "toastMsgLoadingSource", void 0);
__decorate([
    property({ type: Object })
], EditQprDialog.prototype, "_qprDatesSetModel", void 0);
__decorate([
    property({ type: Object })
], EditQprDialog.prototype, "_editedQprDatesSet", void 0);
__decorate([
    property({ type: Number })
], EditQprDialog.prototype, "_qprDatesSetEditedIndex", void 0);
window.customElements.define('edit-qpr-dialog', EditQprDialog);
export { EditQprDialog as EditQprDialogEl };