intervention-pages
Version:
274 lines (269 loc) • 11.2 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 { selectPartnerDetails, selectPartnerDetailsPermissions } from './partnerDetails.selectors';
import '@polymer/paper-button/paper-button';
import '@polymer/paper-input/paper-input';
import '@polymer/paper-icon-button/paper-icon-button';
import '@unicef-polymer/etools-loading/etools-loading';
import '@unicef-polymer/etools-dropdown/etools-dropdown';
import '@unicef-polymer/etools-dropdown/etools-dropdown-multi';
import '@unicef-polymer/etools-content-panel/etools-content-panel';
import { buttonsStyles } from '../../common/styles/button-styles';
import { getStore } from '../../utils/redux-store-access';
import { connect } from 'pwa-helpers/connect-mixin';
import ComponentBaseMixin from '../../common/mixins/component-base-mixin';
import { gridLayoutStylesLit } from '../../common/styles/grid-layout-styles-lit';
import get from 'lodash-es/get';
import cloneDeep from 'lodash-es/cloneDeep';
import { sharedStyles } from '../../common/styles/shared-styles-lit';
import { validateRequiredFields } from '../../utils/validation-helper';
import { patchIntervention } from '../../common/actions';
import { sendRequest } from '@unicef-polymer/etools-ajax';
import { getEndpoint } from '../../utils/endpoint-helper';
import { interventionEndpoints } from '../../utils/intervention-endpoints';
import { pageIsNotCurrentlyActive } from '../../utils/common-methods';
import { isJsonStrMatch } from '../../utils/utils';
// import {isUnicefUSer} from '../../common/selectors';
import isEmpty from 'lodash-es/isEmpty';
/**
* @customElement
*/
let PartnerDetailsElement = class PartnerDetailsElement extends connect(getStore())(ComponentBaseMixin(LitElement)) {
constructor() {
super(...arguments);
this.dataToSave = {};
this.showLoading = false;
}
static get styles() {
return [buttonsStyles, gridLayoutStylesLit];
}
render() {
if (!this.originalData) {
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="Partner Details">
<etools-loading loading-text="Loading..." .active="${this.showLoading}"></etools-loading>
<div slot="panel-btns">
${this.renderEditBtn(this.editMode, this.canEditAtLeastOneField)}
</div>
<div class="row-padding-v layout-horizontal">
<div class="col col-7">
<paper-input
class="w100"
label="Partner Organization"
.value="${this.originalData.partner}"
required
readonly
always-float-label
>
</paper-input>
</div>
<div class="col col-5">
<etools-dropdown
id="agreements"
label="Agreements"
.options="${this.partnerAgreements}"
.selected="${this.originalData.agreement}"
option-value="id"
option-label="agreement_number_status"
trigger-value-change-event
-selected-item-changed="${({ detail }) => this.selectedAgreementChanged(detail)}"
?readonly="${this.isReadonly(this.editMode, this.permissions.edit.agreement)}"
required
auto-validate
>
</etools-dropdown>
</div>
</div>
<div class="row-padding-v layout-horizontal">
<div class="col col-7">
<paper-input
class="w100"
label="Partner Vendor Number"
.value="${this.originalData.partner_vendor}"
required
readonly
always-float-label
>
</paper-input>
</div>
<div class="col col-5 layout-vertical">
<label for="agreementAuthOff" class="paper-label">Agreement Authorized Officers</label>
<div id="agreementAuthOff">
${this.renderAgreementAuthorizedOfficers(this.agreementAuthorizedOfficers)}
</div>
</div>
</div>
<div class="row-padding-v">
<div class="col col-7 layout-vertical">
<etools-dropdown-multi
label="Partner Focal Points"
.selectedValues="${cloneDeep(this.originalData.partner_focal_points)}"
.options="${this.partnerStaffMembers}"
option-label="name"
option-value="id"
trigger-value-change-event
-selected-items-changed="${({ detail }) => this.selectedItemsChanged(detail, 'partner_focal_points')}"
?hidden="${this.isReadonly(this.editMode, this.permissions.edit.partner_focal_points)}"
>
</etools-dropdown-multi>
${this.isReadonly(this.editMode, this.permissions.edit.partner_focal_points)
? html `<label for="focalPointsDetails" class="paper-label">Partner Focal Points</label>
<div id="focalPointsDetails">
${this.renderReadonlyPartnerFocalPoints(this.partnerStaffMembers, this.originalData.partner_focal_points)}
</div>`
: html ``}
</div>
</div>
${this.renderActions(this.editMode, this.canEditAtLeastOneField)}
</etools-content-panel>
`;
}
connectedCallback() {
super.connectedCallback();
}
async stateChanged(state) {
if (!state.interventions.current) {
return;
}
if (pageIsNotCurrentlyActive(get(state, 'app.routeDetails'), 'interventions', 'details')) {
return;
}
await this.setPartnerDetailsAndPopulateDropdowns(state);
this.permissions = selectPartnerDetailsPermissions(state);
this.set_canEditAtLeastOneField(this.permissions.edit);
}
async setPartnerDetailsAndPopulateDropdowns(state) {
const newPartnerDetails = selectPartnerDetails(state);
if (!isJsonStrMatch(this.originalData, newPartnerDetails)) {
if (this.partnerIdHasChanged(newPartnerDetails)) {
await this.populateDropdowns(newPartnerDetails.partner_id);
}
this.originalData = newPartnerDetails;
}
}
async populateDropdowns(partnerId) {
this.partnerStaffMembers = await this.getAllPartnerStaffMembers(partnerId);
// Uncomment when we can login with partner users
// if (isUnicefUSer(state)) {
// this.filterAgreementsByPartner(get(state, 'agreements.list'), partnerId);
// } else {
this.partnerAgreements = await this.getPartnerAgreements(partnerId);
// }
}
filterAgreementsByPartner(agreements, partnerId) {
this.partnerAgreements = agreements.filter((a) => a.partner === partnerId);
}
partnerIdHasChanged(newPartnerDetails) {
return get(this.originalData, 'partner_id') !== newPartnerDetails.partner_id;
}
getAllPartnerStaffMembers(partnerId) {
return sendRequest({
endpoint: getEndpoint(interventionEndpoints.partnerStaffMembers, { id: partnerId })
}).then((resp) => {
resp.forEach((staff) => {
staff.name = staff.first_name + ' ' + staff.last_name;
});
return resp;
});
}
getPartnerAgreements(partnerId) {
return sendRequest({
endpoint: getEndpoint(interventionEndpoints.partnerAgreements, { id: partnerId })
}).then((resp) => {
return resp;
});
}
selectedAgreementChanged(detail) {
var _a;
this.selectedItemChanged(detail, 'agreement');
this.agreementAuthorizedOfficers = (_a = detail.selectedItem) === null || _a === void 0 ? void 0 : _a.authorized_officers;
}
renderAgreementAuthorizedOfficers(authOfficers) {
if (isEmpty(authOfficers)) {
return html `—`;
}
else {
return authOfficers.map((authOfficer) => {
return html `<div class="w100">
${this.renderNameEmailPhone(authOfficer)}
</div>`;
});
}
}
renderReadonlyPartnerFocalPoints(partnerStaffMembers, partnerFocalPoints) {
if (isEmpty(partnerStaffMembers) || isEmpty(partnerFocalPoints)) {
return html `—`;
}
const focalPointDetails = partnerStaffMembers.filter((staff) => partnerFocalPoints.includes(staff.id));
if (isEmpty(focalPointDetails)) {
return html ``;
}
else {
return focalPointDetails.map((focal) => {
return html `<div class="w100">
${this.renderNameEmailPhone(focal)}
</div>`;
});
}
}
cancel() {
this.originalData = cloneDeep(this.originalData);
this.editMode = false;
}
validate() {
return validateRequiredFields(this);
}
save() {
if (!this.validate()) {
return;
}
getStore()
.dispatch(patchIntervention(this.dataToSave))
.then(() => {
this.editMode = false;
this.dataToSave = {};
});
}
};
__decorate([
property({ type: Object })
], PartnerDetailsElement.prototype, "originalData", void 0);
__decorate([
property({ type: Object })
], PartnerDetailsElement.prototype, "dataToSave", void 0);
__decorate([
property({ type: Object })
], PartnerDetailsElement.prototype, "permissions", void 0);
__decorate([
property({ type: Boolean })
], PartnerDetailsElement.prototype, "showLoading", void 0);
__decorate([
property({ type: Array })
], PartnerDetailsElement.prototype, "partnerAgreements", void 0);
__decorate([
property({ type: Array })
], PartnerDetailsElement.prototype, "agreementAuthorizedOfficers", void 0);
__decorate([
property({ type: Array })
], PartnerDetailsElement.prototype, "partnerStaffMembers", void 0);
PartnerDetailsElement = __decorate([
customElement('partner-details')
], PartnerDetailsElement);
export { PartnerDetailsElement };