intervention-pages/dist/intervention-timing/intervention-dates/intervention-dates.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;
};
import { LitElement, html, customElement, property } from 'lit-element';
import ComponentBaseMixin from '../../common/mixins/component-base-mixin';
import FrNumbersConsistencyMixin from '../../common/mixins/fr-numbers-consistency-mixin';
import '@unicef-polymer/etools-date-time/datepicker-lite';
import '@unicef-polymer/etools-info-tooltip/etools-info-tooltip';
import '@unicef-polymer/etools-content-panel/etools-content-panel';
import { gridLayoutStylesLit } from '../../common/styles/grid-layout-styles-lit';
import { sharedStyles } from '../../common/styles/shared-styles-lit';
import cloneDeep from 'lodash-es/cloneDeep';
import { selectInterventionDates, selectInterventionDatesPermissions } from './interventionDates.selectors';
import { validateRequiredFields } from '../../utils/validation-helper';
import { buttonsStyles } from '../../common/styles/button-styles';
import { connect } from 'pwa-helpers/connect-mixin';
import { getStore } from '../../utils/redux-store-access';
import { patchIntervention } from '../../common/actions';
import { isJsonStrMatch } from '../../utils/utils';
/**
 * @customElement
 */
let InterventionDates = class InterventionDates extends connect(getStore())(ComponentBaseMixin(FrNumbersConsistencyMixin(LitElement))) {
    constructor() {
        super(...arguments);
        this.showLoading = false;
        this._frsStartConsistencyWarning = '';
        this._frsEndConsistencyWarning = '';
    }
    static get styles() {
        return [gridLayoutStylesLit, buttonsStyles];
    }
    render() {
        if (!this.interventionDates) {
            return html `<style>
          ${sharedStyles}
        </style>
        <etools-loading loading-text="Loading..." active></etools-loading>`;
        }
        // language=HTML
        return html `
      <style>
        ${sharedStyles} :host {
          display: block;
          margin-bottom: 24px;
        }
      </style>

      <etools-content-panel show-expand-btn panel-title="Programme Document Dates">
        <etools-loading loading-text="Loading..." .active="${this.showLoading}"></etools-loading>

        <div slot="panel-btns">
          ${this.renderEditBtn(this.editMode, this.canEditAtLeastOneField)}
        </div>
        <div class="layout-horizontal row-padding-v">
          <div class="col col-3">
            <!-- Start date -->
            <etools-info-tooltip
              class="fr-nr-warn"
              icon-first
              custom-icon
              form-field-align
              ?hide-tooltip="${!this.frsConsistencyWarningIsActive(this._frsStartConsistencyWarning)}"
            >
              <datepicker-lite
                slot="field"
                id="intStart"
                label="Start date"
                .value="${this.interventionDates.start}"
                ?readonly="${!this.permissions.edit.start}"
                ?required="${!this.permissions.required.start}"
                error-message="Please select start date"
                auto-validate
                selected-date-display-format="D MMM YYYY"
              >
              </datepicker-lite>
              <iron-icon icon="pmp-custom-icons:not-equal" slot="custom-icon"></iron-icon>
              <span slot="message">${this._frsStartConsistencyWarning}</span>
            </etools-info-tooltip>
          </div>

          <!-- End date -->
          <div class="col col-3">
            <etools-info-tooltip
              class="fr-nr-warn"
              custom-icon
              icon-first
              form-field-align
              ?hide-tooltip="${!this.frsConsistencyWarningIsActive(this._frsEndConsistencyWarning)}"
            >
              <datepicker-lite
                slot="field"
                id="intEnd"
                label="End date"
                .value="${this.interventionDates.end}"
                ?readonly="${!this.permissions.edit.end}"
                ?required="${this.permissions.required.end}"
                error-message="Please select end date"
                auto-validate
                selected-date-display-format="D MMM YYYY"
              >
              </datepicker-lite>
              <iron-icon icon="pmp-custom-icons:not-equal" slot="custom-icon"></iron-icon>
              <span slot="message">${this._frsEndConsistencyWarning}</span>
            </etools-info-tooltip>
          </div>
        </div>

        ${this.renderActions(this.editMode, this.canEditAtLeastOneField)}
      </etools-content-panel>
    `;
    }
    connectedCallback() {
        super.connectedCallback();
    }
    stateChanged(state) {
        if (!state.interventions.current) {
            return;
        }
        this.interventionDates = selectInterventionDates(state);
        this.originalInterventionDates = cloneDeep(this.interventionDates);
        this.sePermissions(state);
    }
    sePermissions(state) {
        const newPermissions = selectInterventionDatesPermissions(state);
        if (!isJsonStrMatch(this.permissions, newPermissions)) {
            this.permissions = newPermissions;
            this.set_canEditAtLeastOneField(this.permissions.edit);
        }
    }
    validate() {
        return validateRequiredFields(this);
    }
    cancel() {
        this.interventionDates = cloneDeep(this.originalInterventionDates);
        this.editMode = false;
    }
    save() {
        if (!this.validate()) {
            return;
        }
        getStore()
            .dispatch(patchIntervention(this.interventionDates))
            .then(() => {
            this.editMode = false;
        });
    }
};
__decorate([
    property({ type: Boolean })
], InterventionDates.prototype, "showLoading", void 0);
__decorate([
    property({ type: Object })
], InterventionDates.prototype, "intervention", void 0);
__decorate([
    property({ type: Object })
], InterventionDates.prototype, "originalInterventionDates", void 0);
__decorate([
    property({ type: Object })
], InterventionDates.prototype, "interventionDates", void 0);
__decorate([
    property({ type: String })
], InterventionDates.prototype, "_frsStartConsistencyWarning", void 0);
__decorate([
    property({ type: String })
], InterventionDates.prototype, "_frsEndConsistencyWarning", void 0);
__decorate([
    property({ type: Object })
], InterventionDates.prototype, "permissions", void 0);
InterventionDates = __decorate([
    customElement('intervention-dates')
], InterventionDates);
export { InterventionDates };