intervention-pages
Version:
201 lines (198 loc) • 7.17 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;
};
import { LitElement, html, property, customElement } from 'lit-element';
import '@unicef-polymer/etools-content-panel/etools-content-panel.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@unicef-polymer/etools-table/etools-table';
import { getStore } from '../../utils/redux-store-access';
import { connect } from 'pwa-helpers/connect-mixin';
import ComponentBaseMixin from '../../common/mixins/component-base-mixin';
import '@unicef-polymer/etools-loading';
import { sharedStyles } from '../../common/styles/shared-styles-lit';
import { buttonsStyles } from '../../common/styles/button-styles';
import { gridLayoutStylesLit } from '../../common/styles/grid-layout-styles-lit';
import { EtoolsTableColumnType } from '@unicef-polymer/etools-table/etools-table';
import './supply-agreement-dialog';
import { InterventionSupplyItem } from '../../common/models/intervention.types';
const getSupplyItems = () => {
const arr = [];
let i = 0;
while (i < 10) {
const supplyItem = new InterventionSupplyItem();
supplyItem.id = i;
supplyItem.title = `Title ${i}`;
supplyItem.result = `CP Output ${i}`;
supplyItem.other_mentions = `Other mentions ${i}`;
supplyItem.unit_number = i;
supplyItem.unit_price = Math.floor(Math.random() * Math.floor(15));
supplyItem.total_price = supplyItem.unit_number * supplyItem.unit_price;
supplyItem.outputs = ['CP Output Health Related', 'CP Output Health Related', 'CP Output Health Related'];
arr.push(supplyItem);
i++;
}
return arr;
};
const customStyles = html `
<style>
.col_title {
width: 99%;
}
.col_nowrap {
width: 1%;
white-space: nowrap;
}
.expand-cell iron-icon {
width: 70px !important;
color: #2b2b2b !important;
}
</style>
`;
let FollowUpPage = class FollowUpPage extends connect(getStore())(ComponentBaseMixin(LitElement)) {
constructor() {
super(...arguments);
this.dataItems = [];
this.showLoading = false;
this.columns = [
{
label: 'Item (all prices in PD Currency)',
name: 'title',
type: EtoolsTableColumnType.Text,
cssClass: 'col_title'
},
{
label: 'Number of Units',
name: 'unit_number',
type: EtoolsTableColumnType.Number,
cssClass: 'col_nowrap'
},
{
label: 'Price / Unit',
name: 'unit_price',
type: EtoolsTableColumnType.Number,
cssClass: 'col_nowrap'
},
{
label: 'Total Price',
name: 'total_price',
cssClass: 'col_nowrap',
type: EtoolsTableColumnType.Number
}
];
this.canEditSupply = true;
}
static get styles() {
return [gridLayoutStylesLit, buttonsStyles];
}
render() {
return html `
<style>
${sharedStyles} :host {
display: block;
margin-bottom: 24px;
--ecp-content-padding: 0;
}
.mr-40 {
margin-right: 40px;
}
.f-12 {
font-size: 12px;
}
</style>
<etools-content-panel panel-title="Supply Agreement">
<etools-loading loading-text="Loading..." .active="${this.showLoading}"></etools-loading>
<div slot="panel-btns">
<span class="mr-40">
<label class="label-input font-bold">TOTAL SUPPLY BUDGET: </label>
<label class="f-12 font-bold">LBP 54353</label>
</span>
<paper-icon-button ?hidden="${!this.canEditSupply}" @tap="${() => this.addSupplyItem()}" icon="add">
</paper-icon-button>
</div>
<etools-table
.columns="${this.columns}"
.items="${this.dataItems}"
@edit-item="${this.editSupplyItem}"
@delete-item="${this.deleteSupplyItem}"
.getChildRowTemplateMethod="${this.getChildRowTemplate.bind(this)}"
.extraCSS="${this.getTableStyle()}"
.showEdit=${this.canEditSupply}
.showDelete=${this.canEditSupply}
>
</etools-table>
</etools-content-panel>
`;
}
async stateChanged(_state) {
this.dataItems = getSupplyItems();
}
getChildRowTemplate(item) {
const childRow = {};
childRow.showExpanded = false;
childRow.rowHTML = html `
<td></td>
<td class="ptb-0">
<div class="child-row-inner-container">
<label class="label-input">Cp Outputs</label><br />
${item.outputs.map((output) => html `<label>${output}</label><br />`)}
</div>
</td>
<td colspan="4" class="ptb-0">
<div class="child-row-inner-container">
<label class="label-input">Other Mentions</label><br />
<label>${item.other_mentions}</label>
</paper-input>
</div>
</td>
`;
return childRow;
}
getTableStyle() {
return html `<style>
${sharedStyles}
</style>
${customStyles}`;
}
cancelSupply() {
this.editMode = false;
}
editSupplyItem(e) {
this.openSupplyDialog(e.detail);
}
addSupplyItem() {
this.openSupplyDialog(new InterventionSupplyItem());
}
deleteSupplyItem(event) {
console.log(event);
}
openSupplyDialog(item) {
this.createDialog();
this.supplyItemDialog.supplyItem = item;
this.supplyItemDialog.openDialog();
}
createDialog() {
if (!this.supplyItemDialog) {
this.supplyItemDialog = document.createElement('supply-agreement-dialog');
document.querySelector('body').appendChild(this.supplyItemDialog);
}
}
};
__decorate([
property({ type: Array })
], FollowUpPage.prototype, "dataItems", void 0);
__decorate([
property({ type: Boolean })
], FollowUpPage.prototype, "showLoading", void 0);
__decorate([
property({ type: Array })
], FollowUpPage.prototype, "columns", void 0);
__decorate([
property({ type: Boolean })
], FollowUpPage.prototype, "canEditSupply", void 0);
FollowUpPage = __decorate([
customElement('supply-agreements')
], FollowUpPage);
export { FollowUpPage };