@gpa-gemstone/react-interactive
Version:
Interactive UI Components for GPA products
288 lines (287 loc) • 17.3 kB
JavaScript
;
// ******************************************************************************************************
// SearchBar.tsx - Gbtc
//
// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
//
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
// file except in compliance with the License. You may obtain a copy of the License at:
//
// http://opensource.org/licenses/MIT
//
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
// License for the specific language governing permissions and limitations.
//
// Code Modification History:
// ----------------------------------------------------------------------------------------------------
// 01/06/2020 - Christoph Lackner
// Generated original version of source code.
// ******************************************************************************************************
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GetStoredFilters = void 0;
exports.default = SearchBar;
var React = __importStar(require("react"));
var Modal_1 = __importDefault(require("../Modal"));
var LoadingIcon_1 = __importDefault(require("../LoadingIcon"));
var react_forms_1 = require("@gpa-gemstone/react-forms");
var FilterCreator_1 = __importDefault(require("./FilterCreator"));
var FilterRow_1 = __importDefault(require("./FilterRow"));
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
function SearchBar(props) {
var _a, _b;
var useQuickSearch = props.defaultCollumn !== undefined;
var _c = React.useState(false), hover = _c[0], setHover = _c[1];
var _d = React.useState(false), show = _d[0], setShow = _d[1];
var _e = React.useState(false), isNew = _e[0], setIsNew = _e[1];
var _f = React.useState(function () {
if (props.Filters !== undefined)
return props.Filters;
if (props.StorageID != null)
return getStoredSearchState(props.StorageID).filters;
return [];
}), internalFilters = _f[0], setInternalFilters = _f[1];
var _g = React.useState(function () {
if (props.Filters !== undefined)
return "";
if (props.StorageID != null)
return getStoredSearchState(props.StorageID).search;
return "";
}), search = _g[0], setSearch = _g[1];
// Debounced version of search that the push-up effect watches
var _h = React.useState(search), debouncedSearch = _h[0], setDebouncedSearch = _h[1];
var _j = React.useState(setDefaultDraftFilter(props.CollumnList[0])), draftFilter = _j[0], setDraftFilter = _j[1];
var _k = React.useState(false), showHelpTooltip = _k[0], setShowHelpTooltip = _k[1];
var helpTooltipRef = React.useRef((0, helper_functions_1.CreateGuid)());
var memoizedDefaultColumn = (0, helper_functions_1.useStringMemonization)(props.defaultCollumn);
// Tracks the last filters we pushed to the parent so we can guard against unstable SetFilter
var lastPushedFilters = React.useRef([]);
React.useEffect(function () {
var timer = setTimeout(function () { return setDebouncedSearch(search); }, 500);
return function () { return clearTimeout(timer); };
}, [search]);
// Sync external filters into internal state when parent changes them
React.useEffect(function () {
if (props.Filters === undefined)
return;
if (filtersEqual(props.Filters, lastPushedFilters.current))
return;
setInternalFilters(props.Filters);
}, [props.Filters]);
// Build the combined filter list (base filters + quick search) and push up
React.useEffect(function () {
var combined = buildCombinedFilters(internalFilters, debouncedSearch, memoizedDefaultColumn, useQuickSearch);
if (filtersEqual(combined, lastPushedFilters.current))
return;
lastPushedFilters.current = combined;
props.SetFilter(combined);
// Persist to localStorage when managing our own filters
if (props.Filters === undefined && props.StorageID != null) {
localStorage.setItem("".concat(props.StorageID, ".Filters"), JSON.stringify(internalFilters));
localStorage.setItem("".concat(props.StorageID, ".Search"), debouncedSearch);
}
}, [internalFilters, debouncedSearch, memoizedDefaultColumn, useQuickSearch]);
var deleteFilter = function (filterToDelete) {
setHover(false);
setInternalFilters(function (prev) { return prev.filter(function (f) { return f !== filterToDelete; }); });
};
var addFilter = function () {
var adjustedFilter = __assign({}, draftFilter);
if (adjustedFilter.Type === 'string' && (adjustedFilter.Operator === 'LIKE' || adjustedFilter.Operator === 'NOT LIKE'))
adjustedFilter.SearchText = '*' + adjustedFilter.SearchText + '*';
setDraftFilter(setDefaultDraftFilter(props.CollumnList[0]));
setInternalFilters(function (prev) { return __spreadArray(__spreadArray([], prev, true), [adjustedFilter], false); });
};
var editFilter = function (index) {
setIsNew(false);
var filt = __assign({}, internalFilters[index]);
if (filt.Type === 'string' && (filt.Operator === 'LIKE' || filt.Operator === 'NOT LIKE'))
filt.SearchText = filt.SearchText.substr(1, filt.SearchText.length - 2);
setShow(true);
setDraftFilter(filt);
setInternalFilters(function (prev) { return prev.filter(function (_, i) { return i !== index; }); });
};
var createFilter = function () {
setShow(!show);
setIsNew(true);
setDraftFilter(setDefaultDraftFilter(props.CollumnList[0]));
};
var editSearch = function (text) {
setSearch(text);
};
var content = (React.createElement("form", null,
React.createElement("div", { className: "row" },
useQuickSearch ?
React.createElement("div", { className: "col" },
React.createElement("div", { className: "input-group" },
React.createElement("input", { className: "form-control mr-sm-2", type: "search", placeholder: "Search " + ((_a = memoizedDefaultColumn === null || memoizedDefaultColumn === void 0 ? void 0 : memoizedDefaultColumn.label) !== null && _a !== void 0 ? _a : ''), onChange: function (event) { return editSearch(event.target.value); }, value: search, disabled: props.Disabled }),
props.ShowLoading !== undefined && props.ShowLoading ?
React.createElement("div", { className: "input-group-append" },
React.createElement(LoadingIcon_1.default, { Show: true }))
: null),
React.createElement("p", { style: { marginTop: 2, marginBottom: 2 } }, props.ResultNote)) : null,
React.createElement("div", { style: { position: 'relative', display: 'inline-block' }, className: 'col align-items-start' },
React.createElement("button", { disabled: props.Disabled, className: "btn btn-" + (internalFilters.length > 0 ? "warning" : "primary"), onClick: function (evt) { evt.preventDefault(); createFilter(); }, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } },
"Add Filter",
internalFilters.length > 0 ? ("(" + internalFilters.length + ")") : ""),
props.Help != null ?
React.createElement("button", { className: 'btn', onMouseEnter: function () { return setShowHelpTooltip(true); }, onMouseLeave: function () { return setShowHelpTooltip(false); }, "data-tooltip": helpTooltipRef.current },
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }),
React.createElement(react_forms_1.ToolTip, { Show: showHelpTooltip, Target: helpTooltipRef.current, Class: "info" }, props.Help))
: null,
React.createElement("div", { className: "popover", style: {
display: hover ? 'block' : 'none', maxWidth: 'unset',
right: (props.Direction === 'right' ? 0 : 'unset'), left: (props.Direction === 'left' ? 0 : 'unset'),
top: 'unset'
}, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } },
React.createElement("table", { className: 'table table-hover' },
React.createElement("thead", null,
React.createElement("tr", null,
React.createElement("th", null, "Column"),
React.createElement("th", null, "Operator"),
React.createElement("th", null, "Search Text"),
React.createElement("th", null, "Edit"),
React.createElement("th", null, "Remove"))),
React.createElement("tbody", null, internalFilters.map(function (f, i) { return React.createElement(FilterRow_1.default, { Filter: f, Edit: function () { return editFilter(i); }, Delete: function () { return deleteFilter(f); }, key: i, Collumns: props.CollumnList }); }))))))));
return (React.createElement("div", { className: (_b = props.Class) !== null && _b !== void 0 ? _b : 'w-100' },
React.createElement("nav", { className: "navbar navbar-expand" },
React.createElement("div", { className: 'w-100' },
React.createElement("ul", { className: "navbar-nav mr-auto d-flex align-items-center w-100" },
props.Direction === 'right' ? props.children : null,
props.Label !== undefined ?
React.createElement("li", { className: "nav-item", style: { minWidth: (props.Width === undefined ? '150px' : undefined), width: props.Width, paddingRight: 10 } },
React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } },
props.Label,
":"),
content)) :
React.createElement("li", { className: "nav-item", style: { minWidth: (props.Width === undefined ? '150px' : undefined), width: props.Width, paddingRight: 10 } }, content),
props.Direction === 'left' ? props.children : null))),
React.createElement(Modal_1.default, { Title: 'Add Filter', Show: show, CallBack: function (conf) { if (conf)
addFilter(); setShow(false); }, ConfirmText: isNew ? 'Add' : 'Save', CancelText: isNew ? 'Close' : 'Delete' },
React.createElement(react_forms_1.Select, { Record: draftFilter, Field: 'FieldName', Options: props.CollumnList.map(function (fl) { return ({ Value: fl.key, Label: fl.label }); }), Setter: function (record) {
var operator = "IN";
var column = props.CollumnList.find(function (fl) { return fl.key === record.FieldName; });
if (column !== undefined && column.type === 'string')
operator = "LIKE";
if (column !== undefined && (column.type === 'number' || column.type === 'integer' || column.type === 'boolean'))
operator = '=';
if (column !== undefined && column.type === 'datetime')
operator = '>';
setDraftFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { FieldName: record.FieldName, SearchText: '', Operator: operator, Type: (column !== undefined ? column.type : 'string'), IsPivotColumn: (column !== undefined ? column.isPivotField : true) })); });
}, Label: 'Column' }),
React.createElement(FilterCreator_1.default, { Filter: draftFilter, Field: props.CollumnList.find(function (fl) { return fl.key === draftFilter.FieldName; }), Setter: function (record) { return setDraftFilter(record); }, Enum: (props.GetEnum === undefined ? undefined : props.GetEnum) }))));
}
// Returns all stored filters including the quick search filter if one exists
var GetStoredFilters = function (storageID, defaultCol) {
var _a = getStoredSearchState(storageID), filters = _a.filters, search = _a.search;
if (defaultCol == null || search.length === 0)
return filters;
var quick = {
FieldName: defaultCol.key,
Operator: 'LIKE',
Type: defaultCol.type,
SearchText: "*".concat(search, "*"),
IsPivotColumn: defaultCol.isPivotField
};
return __spreadArray(__spreadArray([], filters, true), [quick], false);
};
exports.GetStoredFilters = GetStoredFilters;
// Reads both filters and search text from localStorage in one pass
function getStoredSearchState(storageID) {
var _a, _b;
var filters = [];
try {
filters = (_a = JSON.parse(localStorage.getItem("".concat(storageID, ".Filters")))) !== null && _a !== void 0 ? _a : [];
}
catch (_c) {
filters = [];
}
var search = (_b = localStorage.getItem("".concat(storageID, ".Search"))) !== null && _b !== void 0 ? _b : "";
return { filters: filters, search: search };
}
var setDefaultDraftFilter = function (filter) {
var draftFilter = {
FieldName: filter.key,
SearchText: '',
Operator: filter.type === 'string' ? 'LIKE' : '=',
Type: filter.type,
IsPivotColumn: filter.isPivotField
};
return draftFilter;
};
// Appends a quick search filter to the base filters when quick search is active
function buildCombinedFilters(baseFilters, searchText, defaultCol, quickSearchEnabled) {
if (!quickSearchEnabled || defaultCol == null || searchText.length === 0)
return baseFilters;
var quick = {
FieldName: defaultCol.key,
Operator: 'LIKE',
Type: defaultCol.type,
SearchText: "*".concat(searchText, "*"),
IsPivotColumn: defaultCol.isPivotField
};
return __spreadArray(__spreadArray([], baseFilters, true), [quick], false);
}
// Order-independent comparison of two filter arrays
function filtersEqual(a, b) {
if (a === b)
return true;
if (a.length !== b.length)
return false;
var serialize = function (f) {
return "".concat(f.FieldName, "|").concat(f.Operator, "|").concat(f.SearchText, "|").concat(f.Type, "|").concat(f.IsPivotColumn);
};
var sortedA = a.map(serialize).sort();
var sortedB = b.map(serialize).sort();
return sortedA.every(function (val, i) { return val === sortedB[i]; });
}