UNPKG

intervention-pages

Version:
135 lines (132 loc) 4.79 kB
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 { gridLayoutStylesLit } from '../../common/styles/grid-layout-styles-lit'; import { buttonsStyles } from '../../common/styles/button-styles'; import { sharedStyles } from '../../common/styles/shared-styles-lit'; import { getStore } from '../../utils/redux-store-access'; import { connect } from 'pwa-helpers/connect-mixin'; import { validateRequiredFields, resetRequiredFields } from '../../utils/validation-helper'; /** * @customElement */ let SupplyAgreementDialog = class SupplyAgreementDialog extends connect(getStore())(LitElement) { constructor() { super(...arguments); this.dialogOpened = false; this.requestInProcess = false; this.isNewRecord = true; this.dialogTitle = ''; this.confirmBtnTxt = ''; } static get styles() { return [gridLayoutStylesLit, buttonsStyles]; } render() { // language=HTML return html ` <style> ${sharedStyles} </style> <etools-dialog id="supplyAgreementDialog" size="md" ?opened="${this.dialogOpened}" ?hide-confirm-btn="${!this.confirmBtnTxt}" ?show-spinner="${this.requestInProcess}" dialog-title="${this.dialogTitle}" ok-btn-text="${this.confirmBtnTxt}" keep-dialog-open ?disable-confirm-btn="${this.requestInProcess}" @confirm-btn-clicked="${this.onSaveClick}" @close="${() => this.closeDialog()}" > <div class="layout-horizontal"> <div class="col col-12"> <paper-input class="w100" value="${this.supplyItem.title}" label="Title" type="text" placeholder="Enter title" required > </div> </div> <div class="layout-horizontal"> <div class="col col-4"> </paper-input> <paper-input value="${this.supplyItem.unit_number ? this.supplyItem.unit_number : ''}" label="Number of units" allowed-pattern="[0-9]" placeholder="Enter number of units" required > </paper-input> </div> <div class="col col-4"> <paper-input value="${this.supplyItem.unit_price ? this.supplyItem.unit_price : ''}" label="Price / Unit" allowed-pattern="[0-9]" placeholder="Enter price / unit" required > </paper-input> </div> </div> </etools-dialog> `; } stateChanged(_state) { // NOT sure we need this, will see.. } connectedCallback() { super.connectedCallback(); } openDialog() { this.isNewRecord = !this.supplyItem.id; this.dialogTitle = this.isNewRecord ? 'Add Supply Agreement' : 'Edit Supply Agreement'; this.confirmBtnTxt = this.isNewRecord ? 'Add' : 'Save'; resetRequiredFields(this); this.dialogOpened = true; } closeDialog() { this.dialogOpened = false; } validate() { return validateRequiredFields(this); } onSaveClick() { if (this.validate()) { // TODO save } } }; __decorate([ property({ type: Object }) ], SupplyAgreementDialog.prototype, "supplyItem", void 0); __decorate([ property({ type: Boolean, reflect: true }) ], SupplyAgreementDialog.prototype, "dialogOpened", void 0); __decorate([ property({ type: Boolean }) ], SupplyAgreementDialog.prototype, "requestInProcess", void 0); __decorate([ property({ type: Boolean }) ], SupplyAgreementDialog.prototype, "isNewRecord", void 0); __decorate([ property({ type: String }) ], SupplyAgreementDialog.prototype, "dialogTitle", void 0); __decorate([ property({ type: String }) ], SupplyAgreementDialog.prototype, "confirmBtnTxt", void 0); SupplyAgreementDialog = __decorate([ customElement('supply-agreement-dialog') ], SupplyAgreementDialog); export { SupplyAgreementDialog };