intervention-pages
Version:
311 lines (300 loc) • 11 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, query } from 'lit-element';
import { gridLayoutStylesLit } from '../../common/styles/grid-layout-styles-lit';
import { buttonsStyles } from '../../common/styles/button-styles';
import { getStore } from '../../utils/redux-store-access';
import { connect } from 'pwa-helpers/connect-mixin';
import get from 'lodash-es/get';
import { isJsonStrMatch } from '../../utils/utils';
class GroupedLocations {
constructor() {
this.adminLevelLocation = null;
this.subordinateLocations = [];
}
}
/**
* @customElement
*/
let GroupedLocationsDialog = class GroupedLocationsDialog extends connect(getStore())(LitElement) {
constructor() {
super(...arguments);
this._interventionLocIds = [];
this.interventionLocations = [];
this.groupedLocations = [];
this.message = '';
this.dialogOpened = false;
}
static get styles() {
return [gridLayoutStylesLit, buttonsStyles];
}
render() {
// language=HTML
return html `
<style>
[hidden] {
display: none !important;
}
etools-dialog {
--etools-dialog-scrollable: {
min-height: 300px;
font-size: 16px;
}
}
.adminLevelLoc {
color: var(--primary-color);
font-weight: bold;
}
.left-padding {
padding-left: 16px;
}
.top-padding {
padding-top: 16px;
}
.child-bottom-padding {
padding-bottom: 8px;
}
.parent-padding {
padding-bottom: 8px;
padding-top: 8px;
}
.bordered-div {
border: solid 1px var(--error-box-border-color);
background-color: var(--error-box-bg-color);
padding: 10px;
margin: 16px 0;
}
div.child-bottom-padding:last-of-type {
padding-bottom: 0;
}
</style>
<etools-dialog
id="groupedLocDialog"
size="md"
dialog-title="Locations PD/SSFA Covers"
hide-confirm-btn
?opened="${this.dialogOpened}"
="${() => this.closeDialog()}"
>
<etools-dropdown
id="adminLevelsDropdw"
label="Group Locations By"
.selected="${this.adminLevel}"
placeholder="—"
.options="${this.adminLevels}"
option-label="name"
option-value="name"
disable-on-focus-handling
trigger-value-change-event
-selected-item-changed="${this.adminLevelChanged}"
>
</etools-dropdown>
${this._renderMessage(this.message)} ${this._renderGrouping(this.groupedLocations, this.interventionLocations)}
</etools-dialog>
`;
}
set adminLevels(locationTypes) {
this._adminLevels = this._removeCountry(locationTypes);
}
get adminLevels() {
return this._adminLevels;
}
get interventionLocationIds() {
return this._interventionLocIds;
}
set interventionLocationIds(locationIds) {
this.interventionLocationIdsChanged(locationIds);
}
stateChanged(state) {
if (!isJsonStrMatch(this.allLocations, state.commonData.locations)) {
this.allLocations = [...state.commonData.locations];
}
if (!isJsonStrMatch(this.adminLevels, state.commonData.locationTypes)) {
this.adminLevels = [...state.commonData.locationTypes];
}
}
connectedCallback() {
super.connectedCallback();
}
_renderGrouping(groupedLocations, interventionLocations) {
if (!this.adminLevel) {
return html `<div class="row-padding-v">
${interventionLocations.map((item) => html `<div class="top-padding">- ${item.name}</div>`)}
</div>`;
}
return html `
<div class="row-padding-v">
${groupedLocations.map((item) => html `
<div class="parent-padding">
<div class="adminLevelLoc">${item.adminLevelLocation.name}</div>
<div class="left-padding">
${item.subordinateLocations.map((sub) => html `
<div class="child-bottom-padding">
- ${sub.name}
</div>
`)}
</div>
</div>
`)}
</div>
`;
}
_renderMessage(message) {
if (message !== '') {
return html `
<div class="bordered-div">
${message}
</div>
`;
}
else {
return html ``;
}
}
openDialog() {
this.dialogOpened = true;
}
_removeCountry(locationTypes) {
if (!locationTypes || !locationTypes.length) {
return [];
}
const index = locationTypes.findIndex(function (al) {
return al.name === 'Country';
});
if (index > -1) {
locationTypes.splice(index, 1);
// this.adminLevels = [];
return JSON.parse(JSON.stringify(locationTypes));
}
}
interventionLocationIdsChanged(locationIds) {
if (!locationIds || !locationIds.length || !this.allLocations) {
this.interventionLocations = [];
return;
}
this._setInterventionLocationsDetails(locationIds);
this._interventionLocIds = locationIds;
}
_setInterventionLocationsDetails(locationIds) {
locationIds = locationIds.map(function (loc) {
return parseInt(loc);
});
const interventionLocations = this.allLocations.filter(function (loc) {
return locationIds.indexOf(parseInt(loc.id)) > -1;
});
this.interventionLocations = [];
this.interventionLocations = interventionLocations;
}
adminLevelChanged(event) {
const selectedAdminLevelName = get(event.detail, 'selectedItem.name');
if (!selectedAdminLevelName) {
this.groupedLocations = [];
return;
}
this.adminLevel = selectedAdminLevelName;
this.message = '';
const groupedLocations = [];
const locationsUnableToGroup = [];
let i;
// Build grouped locations structure
for (i = 0; i < this.interventionLocations.length; i++) {
const grouping = new GroupedLocations();
if (this.interventionLocations[i].gateway.name === selectedAdminLevelName) {
// gateway.name is location_type
grouping.adminLevelLocation = this.interventionLocations[i];
groupedLocations.push(grouping);
continue;
}
// Find admin level parent location
const adminLevelLocation = this._findAdminLevelParent(this.interventionLocations[i], selectedAdminLevelName);
if (!adminLevelLocation) {
locationsUnableToGroup.push(this.interventionLocations[i].name);
continue;
}
// Check if admin level parent Location is already a parent to another intervention location
const existingGroup = this._findInGroupedLocations(groupedLocations, adminLevelLocation);
if (!existingGroup) {
groupedLocations.push({
adminLevelLocation: adminLevelLocation,
subordinateLocations: [this.interventionLocations[i]]
});
}
else {
existingGroup.subordinateLocations.push(this.interventionLocations[i]);
}
}
if (locationsUnableToGroup && locationsUnableToGroup.length) {
this.message = 'Locations unable to group: ' + locationsUnableToGroup.join(', ');
}
this.groupedLocations = groupedLocations;
this.groupedLocDialog.notifyResize();
}
_findInGroupedLocations(groupedLocations, adminLevelLocation) {
if (!groupedLocations || !groupedLocations.length) {
return null;
}
const existingGroup = groupedLocations.find(function (g) {
return parseInt(g.adminLevelLocation.id) === parseInt(adminLevelLocation.id);
});
if (!existingGroup) {
return null;
}
return existingGroup;
}
_findAdminLevelParent(location, adminLevel) {
if (!location.parent) {
return null;
}
const parentLoc = this.allLocations.find(function (loc) {
return parseInt(loc.id) === parseInt(location.parent);
});
if (!parentLoc) {
return null;
}
if (parentLoc.gateway.name === adminLevel) {
return parentLoc;
}
return this._findAdminLevelParent(parentLoc, adminLevel);
}
closeDialog() {
this.dialogOpened = false;
}
};
__decorate([
property({ type: Array })
], GroupedLocationsDialog.prototype, "adminLevels", null);
__decorate([
property({ type: String })
], GroupedLocationsDialog.prototype, "adminLevel", void 0);
__decorate([
property({ type: Array })
], GroupedLocationsDialog.prototype, "allLocations", void 0);
__decorate([
property({ type: Array })
], GroupedLocationsDialog.prototype, "interventionLocations", void 0);
__decorate([
property({ type: Array })
], GroupedLocationsDialog.prototype, "interventionLocationIds", null);
__decorate([
property({ type: Array })
], GroupedLocationsDialog.prototype, "groupedLocations", void 0);
__decorate([
property({ type: String })
], GroupedLocationsDialog.prototype, "message", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], GroupedLocationsDialog.prototype, "dialogOpened", void 0);
__decorate([
property({ type: Object })
], GroupedLocationsDialog.prototype, "toastEventSource", void 0);
__decorate([
query('#groupedLocDialog')
], GroupedLocationsDialog.prototype, "groupedLocDialog", void 0);
GroupedLocationsDialog = __decorate([
customElement('grouped-locations-dialog')
], GroupedLocationsDialog);
export { GroupedLocationsDialog };