intervention-pages
Version:
108 lines (105 loc) • 4.72 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 '@unicef-polymer/etools-data-table/etools-data-table.js';
import '../../../common/layout/icons-actions';
import '../mixins/reporting-req-past-dates-check';
import '../styles/reporting-requirements-lists-styles';
import CommonMixin from '../mixins/common-mixin';
import ReportingReqPastDatesCheckMixin from '../mixins/reporting-req-past-dates-check';
import { gridLayoutStylesPolymer } from '../../../common/styles/grid-layout-styles-polymer';
import { reportingRequirementsListStyles } from '../styles/reporting-requirements-lists-styles';
import { fireEvent } from '../../../utils/fire-custom-event';
import { property } from '@polymer/decorators';
import { isEmptyObject } from '../../../utils/utils';
/**
* @polymer
* @customElement
* @appliesMixin CommonMixin
* @appliesMixin ReportingReqPastDatesCheckMixin
*/
class QprList extends CommonMixin(ReportingReqPastDatesCheckMixin(PolymerElement)) {
constructor() {
super(...arguments);
this.qprData = [];
this.preventPastDateEdit = false;
}
static get template() {
return html `
${reportingRequirementsListStyles}${gridLayoutStylesPolymer()}
<style include="data-table-styles"></style>
<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">Start Date</etools-data-table-column>
<etools-data-table-column class="col-3">End Date</etools-data-table-column>
<etools-data-table-column class="col-3">Due Date</etools-data-table-column>
<etools-data-table-column class="flex-c"></etools-data-table-column>
</etools-data-table-header>
<template is="dom-repeat" items="[[qprData]]">
<etools-data-table-row
no-collapse
secondary-bg-on-hover$="[[_canEdit(editMode, inAmendment, item.due_date, item.id)]]"
>
<div slot="row-data" style$="[[_uneditableStyles(inAmendment, item.due_date, item.id)]]">
<span class="col-data col-1 right-align index-col">[[getIndex(index, qprData.length)]]</span>
<span class="col-data col-3">[[getDateDisplayValue(item.start_date)]]</span>
<span class="col-data col-3">[[getDateDisplayValue(item.end_date)]]</span>
<span class="col-data col-3">[[getDateDisplayValue(item.due_date)]]</span>
<span class="col-data flex-c actions">
<icons-actions
hidden$="[[!_canEdit(editMode, inAmendment, item.due_date, item.id)]]"
data-args$="[[index]]"
on-edit="_editQprReq"
on-delete="_deleteQprReq"
>
</icons-actions>
</span>
</div>
</etools-data-table-row>
</template>
`;
}
static get observers() {
return ['_sortReportingReq(qprData, qprData.length)'];
}
getIndex(index, dataItemsLength) {
if (+index + 1 === dataItemsLength) {
return 'FINAL';
}
return +index + 1;
}
_sortReportingReq(qprData) {
if (!isEmptyObject(qprData)) {
this._sortRequirementsAsc();
}
}
_sortRequirementsAsc() {
this.qprData.sort((a, b) => {
// @ts-ignore
return new Date(a.due_date) - new Date(b.due_date);
});
}
_editQprReq(e) {
fireEvent(this, 'edit-qpr', {
index: e.target.getAttribute('data-args')
});
}
_deleteQprReq(e) {
fireEvent(this, 'delete-qpr', {
index: e.target.getAttribute('data-args')
});
}
}
__decorate([
property({ type: Array })
], QprList.prototype, "qprData", void 0);
__decorate([
property({ type: Boolean })
], QprList.prototype, "preventPastDateEdit", void 0);
window.customElements.define('qpr-list', QprList);
export { QprList as QprListEl };