intervention-pages/dist/intervention-timing/reporting-requirements/srr/special-reporting-requirements.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/paper-button/paper-button';
import '@unicef-polymer/etools-data-table/etools-data-table';
import { createDynamicDialog } from '@unicef-polymer/etools-dialog/dynamic-dialog';
import '../../../common/layout/icons-actions';
import './add-edit-special-rep-req';
import CommonMixin from '../mixins/common-mixin';
import ReportingRequirementsCommonMixin from '../mixins/reporting-requirements-common-mixin';
import { gridLayoutStylesPolymer } from '../../../common/styles/grid-layout-styles-polymer';
import { buttonsStylesPolymer } from '../styles/buttons-styles-polymer';
import { reportingRequirementsListStyles } from '../styles/reporting-requirements-lists-styles';
import CONSTANTS from '../../../common/constants';
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';
import { property } from '@polymer/decorators';
import { getEndpoint } from '../../../utils/endpoint-helper';
import { interventionEndpoints } from '../../../utils/intervention-endpoints';
/**
 * @customElement
 * @polymer
 * @mixinFunction
 * @appliesMixin CommonMixin
 * @appliesMixin ReportingRequirementsCommonMixin
 */
class SpecialReportingRequirements extends CommonMixin(ReportingRequirementsCommonMixin(PolymerElement)) {
    constructor() {
        super(...arguments);
        this._itemToDeleteIndex = -1;
    }
    static get template() {
        return html `
      ${reportingRequirementsListStyles}${gridLayoutStylesPolymer()}${buttonsStylesPolymer()}
      <style include="data-table-styles"></style>

      <div class="row-h" hidden$="[[!_empty(reportingRequirements, reportingRequirements.length)]]">
        There are no special reporting requirements set.
      </div>

      <div class="row-h">
        <paper-button class="secondary-btn" on-click="_openAddDialog">
          ADD REQUIREMENTS
        </paper-button>
      </div>

      <div class="flex-c" hidden$="[[_empty(reportingRequirements, reportingRequirements.length)]]">
        <etools-data-table-header no-collapse no-title>
          <etools-data-table-column class="col-1 right-align index-col">ID</etools-data-table-column>
          <etools-data-table-column class="col-3">Due Date</etools-data-table-column>
          <etools-data-table-column class="flex-6">Reporting Requirements</etools-data-table-column>
          <etools-data-table-column class="flex-c"></etools-data-table-column>
        </etools-data-table-header>
        <template is="dom-repeat" items="[[reportingRequirements]]">
          <etools-data-table-row no-collapse secondary-bg-on-hover>
            <div slot="row-data">
              <span class="col-data col-1 right-align index-col">[[_getIndex(index, reportingRequirements)]]</span>
              <span class="col-data col-3">[[getDateDisplayValue(item.due_date)]]</span>
              <span class="col-data col-6">[[item.description]]</span>
              <span class="col-data flex-c actions">
                <icons-actions item$="[[item]]" on-edit="_onEdit" on-delete="_onDelete"> </icons-actions>
              </span>
            </div>
          </etools-data-table-row>
        </template>
      </div>
    `;
    }
    ready() {
        super.ready();
        this._createAddEditDialog();
        this._createDeleteConfirmationsDialog();
        this._addEventListeners();
    }
    _addEventListeners() {
        this._onEdit = this._onEdit.bind(this);
        this._onDelete = this._onDelete.bind(this);
        this.addEventListener('edit', this._onEdit);
        this.addEventListener('delete', this._onDelete);
    }
    _removeEventListeners() {
        this.removeEventListener('edit', this._onEdit);
        this.removeEventListener('delete', this._onDelete);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._removeEventListeners();
        this._removeAddEditDialog();
        this._removeDeleteConfirmationsDialog();
    }
    _onEdit(e) {
        e.stopPropagation();
        this._setDialogData(e);
        this.addEditDialog.opened = true;
    }
    _setDialogData(e) {
        this.addEditDialog.interventionId = this.interventionId;
        if (e.target !== null) {
            // @ts-ignore
            this.addEditDialog.item = JSON.parse(e.target.getAttribute('item'));
        }
    }
    _onDelete(e) {
        e.stopPropagation();
        if (this._deleteConfirmationDialog) {
            if (e.target !== null) {
                // @ts-ignore
                const itemToDelete = JSON.parse(e.target.getAttribute('item'));
                const index = this._getIndexById(itemToDelete.id);
                this.set('_itemToDeleteIndex', index);
            }
            this._deleteConfirmationDialog.opened = true;
        }
    }
    _onDeleteConfirmation(e) {
        if (!e.detail.confirmed) {
            this.set('_itemToDeleteIndex', -1);
            return;
        }
        if (this._itemToDeleteIndex > -1) {
            const itemToDelete = this.reportingRequirements[this._itemToDeleteIndex];
            const endpoint = getEndpoint(interventionEndpoints.specialReportingRequirementsUpdate, {
                reportId: itemToDelete.id
            });
            sendRequest({
                method: 'DELETE',
                endpoint: endpoint
            })
                .then(() => {
                this.splice('reportingRequirements', this._itemToDeleteIndex, 1);
            })
                .catch((error) => {
                logError('Failed to delete special report requirement!', 'special-reporting-requirements', error);
                parseRequestErrorsAndShowAsToastMsgs(error, this);
            })
                .then(() => {
                // delete complete, reset _itemToDeleteIndex
                this.set('_itemToDeleteIndex', -1);
            });
        }
    }
    _createAddEditDialog() {
        this.addEditDialog = document.createElement('add-edit-special-rep-req');
        this.addEditDialog.set('toastMsgLoadingSource', this);
        this._onSpecialReportingRequirementsSaved = this._onSpecialReportingRequirementsSaved.bind(this);
        this.addEditDialog.addEventListener('reporting-requirements-saved', this._onSpecialReportingRequirementsSaved);
        document.querySelector('body').appendChild(this.addEditDialog);
    }
    _removeAddEditDialog() {
        if (this.addEditDialog) {
            this.addEditDialog.removeEventListener('reporting-requirements-saved', this._onSpecialReportingRequirementsSaved);
            document.querySelector('body').removeChild(this.addEditDialog);
        }
    }
    _createDeleteConfirmationsDialog() {
        this._onDeleteConfirmation = this._onDeleteConfirmation.bind(this);
        const confirmationMSg = document.createElement('span');
        confirmationMSg.innerText = 'Are you sure you want to delete this Special Reporting Requirement?';
        const confirmationDialogConf = {
            title: 'Delete Special Reporting Requirement',
            size: 'md',
            okBtnText: 'Yes',
            cancelBtnText: 'No',
            closeCallback: this._onDeleteConfirmation,
            content: confirmationMSg
        };
        this._deleteConfirmationDialog = createDynamicDialog(confirmationDialogConf);
    }
    _removeDeleteConfirmationsDialog() {
        if (this._deleteConfirmationDialog) {
            this._deleteConfirmationDialog.removeEventListener('close', this._onDeleteConfirmation);
            document.querySelector('body').removeChild(this._deleteConfirmationDialog);
        }
    }
    _openAddDialog() {
        this.addEditDialog.item = {};
        this.addEditDialog.interventionId = this.interventionId;
        this.addEditDialog.opened = true;
    }
    _sortRequirementsAsc() {
        this.reportingRequirements.sort((a, b) => {
            // @ts-ignore
            return new Date(a.due_date) - new Date(b.due_date);
        });
    }
    _getReportType() {
        return CONSTANTS.REQUIREMENTS_REPORT_TYPE.SPECIAL;
    }
    _getIndexById(id) {
        return this.reportingRequirements.findIndex((r) => r.id === id);
    }
    _onSpecialReportingRequirementsSaved(e) {
        const savedReqItem = e.detail;
        const index = this._getIndexById(savedReqItem.id);
        if (index > -1) {
            // edit
            this.splice('reportingRequirements', index, 1, savedReqItem);
        }
        else {
            this.push('reportingRequirements', savedReqItem);
        }
    }
}
__decorate([
    property({ type: Object })
], SpecialReportingRequirements.prototype, "addEditDialog", void 0);
__decorate([
    property({ type: Object })
], SpecialReportingRequirements.prototype, "_deleteConfirmationDialog", void 0);
__decorate([
    property({ type: Number })
], SpecialReportingRequirements.prototype, "_itemToDeleteIndex", void 0);
window.customElements.define('special-reporting-requirements', SpecialReportingRequirements);