@paraboly/pwc-multi-filter
Version:
A wrapper over pwc-tabview and pwc-filter. Provides means of dynamically managing multiple filters via a single component.
314 lines (308 loc) • 12.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const core = require('./core-d69cee64.js');
require('./_commonjsHelpers-ab75601c.js');
const linq = require('./linq-23ba6bed.js');
const lodash = require('./lodash-23b825de.js');
// import _ from "lodash";
function resolveJson(input) {
return typeof input === "string" ? JSON.parse(input) : input;
}
function deepFilter(data, key, value) {
const navigationSteps = key.split(".");
return linq.Enumerable.from(data)
.where(datum => deepValidate(datum, 0))
.toArray();
function deepValidate(currentObj, navStepIndex) {
// if we are out of navigation steps, check for the value
if (navStepIndex === navigationSteps.length) {
if (value instanceof Array) {
// tslint:disable-next-line:triple-equals
return linq.Enumerable.from(value).any(v => v == currentObj);
}
else {
// tslint:disable-next-line:triple-equals
return currentObj == value;
}
}
const navStep = navigationSteps[navStepIndex];
if (currentObj instanceof Array) {
// if we have an array, any element of it needs to match
return linq.Enumerable.from(currentObj).any(arrayItem => deepValidate(arrayItem[navStep], navStepIndex + 1));
}
else {
// if we have a single element, then it needs to match
return deepValidate(currentObj[navStep], navStepIndex + 1);
}
}
}
function isCompoundKey(key) {
return key.includes(".");
}
function last(arr) {
return arr[arr.length - 1];
}
function deepGet(data, key) {
const navigationSteps = key.split(".");
return linq.Enumerable.from(data)
.selectMany(datum => deepRetreive(datum, 0))
.toArray();
function deepRetreive(currentObj, navStepIndex) {
// if we are out of navigation steps, return the value.
if (navStepIndex === navigationSteps.length) {
return [currentObj];
}
const navStep = navigationSteps[navStepIndex];
if (currentObj instanceof Array) {
// if we have an array, return all of the elements.
return linq.Enumerable.from(currentObj)
.selectMany(arrayItem => deepRetreive(arrayItem[navStep], navStepIndex + 1))
.toArray();
}
else {
// if we have a single element, then return it.
return deepRetreive(currentObj[navStep], navStepIndex + 1);
}
}
}
// function deepReplace(data, oldValue, newValue) {
// // we catch the value, just replace it and shortcut.
// if (data === oldValue) {
// return newValue;
// }
// // don't iterate characters of a string.
// if (typeof data === "string") {
// return data;
// }
// // we have an array, iterate over all elements.
// if (data instanceof Array) {
// return data.map(item => deepReplace(item, oldValue, newValue));
// }
// // we have an object, iterate over properties.
// return _.transform(
// data,
// (r: any, v: any, k: any) =>
// (r[k.trim()] = deepReplace(v, oldValue, newValue))
// );
// }
function moveIndexToEnd(arr, index) {
const removed = arr.splice(index, 1);
arr.push(...removed);
}
function moveItemToEnd(arr, item) {
const removed = lodash._.remove(arr, item);
arr.push(...removed);
}
const PwcFilter = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.mapping = {};
this.itemsAddedViaMethod = [];
this.nullValuePhrase = "pwc-filter___null";
this.undefinedValuePhrase = "pwc-filter___undefined";
this.nullOrUndefinedValuePhrase = "pwc-filter___nullOrUndefined";
this.defaultData = [];
this.defaultItems = [];
this.defaultHandleNullAndUndefinedSeparately = false;
/**
* If this is true, the same string representation is assigned to null and undefined values for generated pwc-choices options.
*/
this.handleNullAndUndefinedSeparately = this
.defaultHandleNullAndUndefinedSeparately;
this.filterChanged = core.createEvent(this, "filterChanged", 7);
}
dataWatchHandler(newDataValue) {
if (newDataValue === null || newDataValue === undefined) {
this.data = this.defaultData;
}
else {
this.resolvedData = resolveJson(newDataValue);
}
}
itemsWatchHandler(newItemsValue) {
if (newItemsValue === null || newItemsValue === undefined) {
this.items = this.defaultItems;
}
else {
this.resolvedItems = [
...resolveJson(newItemsValue),
...this.itemsAddedViaMethod
];
}
}
handleNullAndUndefinedSeparatelyWatchHandler(newValue) {
if (newValue === null || newValue === undefined) {
this.handleNullAndUndefinedSeparately = this.defaultHandleNullAndUndefinedSeparately;
}
}
async formChangedHandler(formChangedEventPayload) {
const filterResult = await this.filter();
this.filterChanged.emit({
originalEvent: formChangedEventPayload,
filterResult
});
}
async addItem(config) {
if (config) {
this.itemsAddedViaMethod = [...this.itemsAddedViaMethod, config];
this.resolvedItems = [...this.resolvedItems, config];
this.rootElement.forceUpdate();
}
}
async removeItem(id) {
const removedItemA = lodash._.remove(this.itemsAddedViaMethod, { id });
const removedItemB = lodash._.remove(this.resolvedItems, { id });
this.rootElement.forceUpdate();
return removedItemA && removedItemA.length > 0
? removedItemA
: removedItemB;
}
async filter() {
const dynamicForm = this.rootElement.querySelector("pwc-dynamic-form");
let formValues;
try {
formValues = await dynamicForm.getFieldValues();
}
catch (e) {
// tslint:disable-next-line: no-console
console.error("Exception while reading dynamic form field values.", "Returning the whole dataset without any filters.", e);
return this.resolvedData;
}
if (formValues === null || formValues === undefined || formValues === {}) {
// tslint:disable-next-line: no-console
console.warn("Dynamic form field values are empty.", "Returning the whole dataset without any filters.");
return this.resolvedData;
}
let filteredData = this.resolvedData;
for (const formElementName in formValues) {
if (formValues.hasOwnProperty(formElementName)) {
const formElementValue = formValues[formElementName];
const newFilteredData = this.filterFor(filteredData, formElementName, formElementValue);
filteredData = newFilteredData;
}
}
return filteredData;
}
getMappedNameOrDefault(formElementName) {
return this.mapping && this.mapping.hasOwnProperty(formElementName)
? this.mapping[formElementName]
: formElementName;
}
filterFor(resolvedData, formElementName, formElementValue) {
if (formElementValue === undefined ||
formElementValue === null ||
(formElementValue instanceof Array && formElementValue.length === 0)) {
return resolvedData;
}
if (formElementValue instanceof Array) {
if (formElementValue.some(a => a === this.nullValuePhrase)) {
lodash._.remove(formElementValue, this.nullValuePhrase);
formElementValue.push(null);
}
if (formElementValue.some(a => a === this.undefinedValuePhrase)) {
lodash._.remove(formElementValue, this.undefinedValuePhrase);
formElementValue.push(undefined);
}
if (formElementValue.some(a => a === this.nullOrUndefinedValuePhrase)) {
lodash._.remove(formElementValue, this.nullOrUndefinedValuePhrase);
formElementValue.push(null);
formElementValue.push(undefined);
}
}
const jsonFieldName = this.getMappedNameOrDefault(formElementName);
const vals = deepFilter(resolvedData, jsonFieldName, formElementValue);
return vals;
}
componentWillLoad() {
this.dataWatchHandler(this.data);
this.itemsWatchHandler(this.items);
this.handleNullAndUndefinedSeparatelyWatchHandler(this.handleNullAndUndefinedSeparately);
}
generateDynamicFormContent() {
const formElementConfigs = [];
const mapping = {};
for (const item of this.resolvedItems) {
let config;
switch (item.type) {
case "select-multi":
case "select-single":
config = this.generatePwcChoicesConfig(item);
break;
case "color":
config = this.generatePwcColorPickerConfig(item);
break;
default:
config = this.generateNativeInputConfig(item);
break;
}
formElementConfigs.push(config);
mapping[config.name] = item.dataField;
}
this.mapping = mapping;
return (core.h("pwc-dynamic-form-content", { items: formElementConfigs }));
}
generatePwcChoicesConfig(item) {
const itemClone = lodash._.cloneDeep(item);
delete itemClone.labelProvider;
delete itemClone.dataField;
const config = Object.assign({ name: this.generateElementName(item.dataField), options: this.generatePwcChoicesOptions(item.dataField, item.labelProvider, item.iconProvider) }, itemClone);
return config;
}
generatePwcColorPickerConfig(item) {
const itemClone = lodash._.cloneDeep(item);
delete itemClone.dataField;
const config = Object.assign({ name: this.generateElementName(item.dataField) }, itemClone);
return config;
}
generateNativeInputConfig(item) {
const itemClone = Object.assign({}, item);
delete itemClone.dataField;
const config = Object.assign({ name: this.generateElementName(item.dataField) }, itemClone);
return config;
}
generateElementName(dataFieldName) {
return dataFieldName.replace(".", "_") + "_elem";
}
generateValueStringForPwcChoicesOption(val) {
if (this.handleNullAndUndefinedSeparately) {
return val === null
? this.nullValuePhrase
: val === undefined
? this.undefinedValuePhrase
: val.toString();
}
else {
return val === null || val === undefined
? this.nullOrUndefinedValuePhrase
: val.toString();
}
}
generatePwcChoicesOptions(dataField, labelProvider, iconProvider) {
const values = lodash._.uniq(deepGet(this.resolvedData, dataField).map(v => this.generateValueStringForPwcChoicesOption(v)));
const moveToBottomArr = [
this.nullValuePhrase,
this.undefinedValuePhrase,
this.nullOrUndefinedValuePhrase
];
moveItemToEnd(values, v => moveToBottomArr.includes(v));
const options = values.map(valStr => {
return {
value: valStr,
label: labelProvider ? labelProvider(valStr) : valStr,
icon: iconProvider ? iconProvider(valStr) : undefined
};
});
return options;
}
render() {
return (core.h("pwc-dynamic-form", null, this.resolvedItems && this.generateDynamicFormContent()));
}
get rootElement() { return core.getElement(this); }
static get watchers() { return {
"data": ["dataWatchHandler"],
"items": ["itemsWatchHandler"],
"handleNullAndUndefinedSeparately": ["handleNullAndUndefinedSeparatelyWatchHandler"]
}; }
static get style() { return ""; }
};
exports.pwc_filter = PwcFilter;