@gpa-gemstone/common-pages 0.0.17 → 0.0.22

package/lib/SearchBar.d.ts

@@ -1,36 +1,31 @@
 import * as React from 'react';
-interface IProps<T> {
-    CollumnList: Search.IField<T>[];
-    SetFilter: (filters: Search.IFilter<T>[]) => void;
-    defaultCollumn?: Search.IField<T>;
-    Direction?: 'left' | 'right';
-    Width?: string | number;
-    Label?: string;
+import { GenericSlice, Search } from '@gpa-gemstone/react-interactive';
+import { OpenXDA, SystemCenter } from '@gpa-gemstone/application-typings';
+interface U {
+    ID: number | string;
+}
+interface IProps<T extends U> {
+    /** A Generic Slyce for the Search */
+    Slice: GenericSlice<T>;
+    /** Functions that gets available values for any ENUM Types */
+    GetEnum: (setOptions: (options: IOptions[]) => void, field: Search.IField<T>) => () => void;
+    /** Function that Grabs any additional Filters that shoudl be available (such as Addl Fields) */
+    GetAddlFields: (setAddlFields: (cols: Search.IField<T>[]) => void) => () => void;
     children: React.ReactNode;
-    GetEnum?: EnumSetter<T>;
-    ShowLoading?: boolean;
-    ResultNote?: string;
 }
 interface IOptions {
     Value: string;
     Label: string;
 }
-declare type EnumSetter<T> = (setOptions: (options: IOptions[]) => void, field: Search.IField<T>) => () => void;
-export declare namespace Search {
-    type FieldType = ('string' | 'number' | 'enum' | 'integer' | 'datetime' | 'boolean');
-    interface IField<T> {
-        label: string;
-        key: string;
-        type: FieldType;
-        enum?: IOptions[];
-    }
-    type OperatorType = ('=' | '<>' | '>' | '<' | '>=' | '<=' | 'LIKE' | 'NOT LIKE' | 'IN' | 'NOT IN');
-    interface IFilter<T> {
-        FieldName: string;
-        SearchText: string;
-        Operator: Search.OperatorType;
-        Type: Search.FieldType;
-    }
+/** This Implements a few standardized SearchBars */
+export declare namespace DefaultSearch {
+    /** This Implements a standard Meter Search */
+    function Meter(props: IProps<SystemCenter.Types.DetailedMeter>): JSX.Element;
+    /** This Implements a standard Substation Search */
+    function Location(props: IProps<SystemCenter.Types.DetailedLocation>): JSX.Element;
+    /** This Implements a standard Transmission Asset Search */
+    function Asset(props: IProps<SystemCenter.Types.DetailedAsset>): JSX.Element;
+    /** This Implements a standard AssetGroup Search */
+    function AssetGroup(props: IProps<OpenXDA.Types.AssetGroup>): JSX.Element;
 }
-export default function SearchBar<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/SearchBar.js

@@ -2,7 +2,7 @@
 // ******************************************************************************************************
 //  SearchBar.tsx - Gbtc
 //
-//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//  Copyright © 2021, 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.
@@ -17,287 +17,113 @@
 //
 //  Code Modification History:
 //  ----------------------------------------------------------------------------------------------------
-//  01/06/2020 - Christoph Lackner
+//  12/17/2021 - Samuel Robinson
 //       Generated original version of source code.
+//  12/19/2021 - C. Lackner
+//       Cleaned up 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 __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultSearch = void 0;
 var React = require("react");
-var Modal_1 = require("./Modal");
-var LoadingIcon_1 = require("./LoadingIcon");
-var react_forms_1 = require("@gpa-gemstone/react-forms");
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-function SearchBar(props) {
-    var _a = React.useState(false), hover = _a[0], setHover = _a[1];
-    var _b = React.useState(false), show = _b[0], setShow = _b[1];
-    var _c = React.useState(false), isNew = _c[0], setIsNew = _c[1];
-    var _d = React.useState([]), filters = _d[0], setFilters = _d[1];
-    var _e = React.useState({ FieldName: props.CollumnList[0].key, SearchText: '', Operator: props.CollumnList[0].type === 'string' ? 'LIKE' : '=', Type: props.CollumnList[0].type }), filter = _e[0], setFilter = _e[1];
-    var _f = React.useState(""), search = _f[0], setSearch = _f[1];
-    var _g = React.useState(null), searchFilter = _g[0], setSearchFilter = _g[1];
-    // Update SearchFilter if there are any Character and only do it every 500ms to avoid hammering the server while typing
-    React.useEffect(function () {
-        var handle = null;
-        if (search.length > 0 && props.defaultCollumn !== undefined)
-            handle = setTimeout(function () {
-                if (props.defaultCollumn !== undefined)
-                    setSearchFilter({ FieldName: props.defaultCollumn.key, Operator: 'LIKE', Type: props.defaultCollumn.type, SearchText: ('*' + search + '*') });
-            }, 500);
-        else
-            handle = setTimeout(function () {
-                setSearchFilter(null);
-            }, 500);
-        return function () { if (handle !== null)
-            clearTimeout(handle); };
-    }, [search]);
-    React.useEffect(function () {
-        if (searchFilter !== null)
-            props.SetFilter(__spreadArrays(filters, [searchFilter]));
-        if (searchFilter === null)
-            props.SetFilter(filters);
-    }, [searchFilter]);
-    function deleteFilter(f) {
-        var index = filters.findIndex(function (fs) { return fs === f; });
-        var filts = __spreadArrays(filters);
-        filts.splice(index, 1);
-        setFilters(filts);
-        setHover(false);
-        if (props.defaultCollumn !== undefined && searchFilter !== null)
-            props.SetFilter(__spreadArrays(filts, [searchFilter]));
-        else
-            props.SetFilter(filts);
-    }
-    function addFilter() {
-        var oldFilters = __spreadArrays(filters);
-        var adjustedFilter = __assign({}, filter);
-        if (adjustedFilter.Type === 'string' && adjustedFilter.Operator === 'LIKE')
-            adjustedFilter.SearchText = '*' + adjustedFilter.SearchText + '*';
-        oldFilters.push(adjustedFilter);
-        setFilters(oldFilters);
-        setFilter({ FieldName: props.CollumnList[0].key, SearchText: '', Operator: props.CollumnList[0].type === 'string' ? 'LIKE' : '=', Type: props.CollumnList[0].type });
-        setFilter({ FieldName: props.CollumnList[0].key, SearchText: '', Operator: props.CollumnList[0].type === 'string' ? 'LIKE' : '=', Type: props.CollumnList[0].type });
-        if (props.defaultCollumn !== undefined && searchFilter !== null)
-            props.SetFilter(__spreadArrays(oldFilters, [searchFilter]));
-        else
-            props.SetFilter(oldFilters);
-    }
-    function editFilter(index) {
-        setIsNew(false);
-        var oldFilters = __spreadArrays(filters);
-        var filt = oldFilters[index];
-        oldFilters.splice(index, 1);
-        if (filt.Type === 'string' && filt.Operator === 'LIKE')
-            filt.SearchText = filt.SearchText.substr(1, filt.SearchText.length - 2);
-        setShow(true);
-        setFilters(oldFilters);
-        setFilter(filt);
-        if (props.defaultCollumn !== undefined && searchFilter !== null)
-            props.SetFilter(__spreadArrays(oldFilters, [searchFilter]));
-        else
-            props.SetFilter(oldFilters);
-    }
-    ;
-    function createFilter() {
-        setShow(!show);
-        setIsNew(true);
-        setFilter({ FieldName: props.CollumnList[0].key, SearchText: '', Operator: props.CollumnList[0].type === 'string' ? 'LIKE' : '=', Type: props.CollumnList[0].type });
-    }
-    var content = (React.createElement(React.Fragment, null,
-        React.createElement("form", null,
-            React.createElement("div", { className: "row" },
-                props.defaultCollumn !== undefined ?
-                    React.createElement("div", { className: "col" },
-                        React.createElement("div", { className: "input-group" },
-                            React.createElement("input", { className: "form-control mr-sm-2", type: "search", placeholder: "Search " + props.defaultCollumn.label, onChange: function (event) { return setSearch(event.target.value); } }),
-                            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' },
-                    React.createElement("button", { className: "btn btn-primary", onClick: function (evt) { evt.preventDefault(); createFilter(); }, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } }, "Add Filter"),
-                    React.createElement("div", { style: { width: window.innerWidth / 3, display: hover ? 'block' : 'none', position: 'absolute', backgroundColor: '#f1f1f1', boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)', zIndex: 1, right: (props.Direction === 'right' ? 0 : undefined), left: (props.Direction === 'left' ? 0 : undefined) }, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } },
-                        React.createElement("table", { className: 'table' },
-                            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, filters.map(function (f, i) { return React.createElement("tr", { key: i },
-                                React.createElement("td", null, f.FieldName),
-                                React.createElement("td", null, f.Operator),
-                                React.createElement("td", null, f.SearchText),
-                                React.createElement("td", null,
-                                    React.createElement("button", { className: "btn btn-sm", onClick: function (e) { return editFilter(i); } },
-                                        React.createElement("span", null, gpa_symbols_1.Pencil))),
-                                React.createElement("td", null,
-                                    React.createElement("button", { className: "btn btn-sm", onClick: function (e) { return deleteFilter(f); } },
-                                        React.createElement("span", null, gpa_symbols_1.TrashCan)))); })))))))));
-    return (React.createElement("div", { style: { width: '100%' } },
-        React.createElement("nav", { className: "navbar navbar-expand-lg navbar-light bg-light" },
-            React.createElement("div", { className: "collapse navbar-collapse", style: { width: '100%' } },
-                React.createElement("ul", { className: "navbar-nav mr-auto", style: { width: '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: filter, 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";
-                    setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { FieldName: record.FieldName, SearchText: '', Operator: operator, Type: (column !== undefined ? column.type : 'string') })); });
-                }, Label: 'Column' }),
-            React.createElement(FilterCreator, { Filter: filter, Field: props.CollumnList.find(function (fl) { return fl.key === filter.FieldName; }), Setter: function (record) { return setFilter(record); }, Enum: (props.GetEnum === undefined ? undefined : props.GetEnum) }))));
-}
-exports.default = SearchBar;
-function FilterCreator(props) {
-    var _a = React.useState([]), options = _a[0], setOptions = _a[1];
-    React.useEffect(function () {
-        if (props.Field === undefined)
-            return;
-        if (props.Field.enum !== undefined)
-            setOptions(props.Field.enum);
-        if (props.Enum !== undefined)
-            return props.Enum(setOptions, props.Field);
-        if (props.Field.enum === undefined)
-            setOptions([]);
-    }, [props.Field, props.Enum]);
-    if (props.Field === undefined)
-        return null;
-    if (props.Field.type === "string") {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("label", null, "Column type is string. Wildcard (*) can be used with 'LIKE' and 'NOT LIKE'"),
-            React.createElement("div", { className: 'row' },
-                React.createElement("div", { className: 'col-4' },
-                    React.createElement("select", { className: 'form-control', value: props.Filter.Operator, onChange: function (evt) {
-                            var value = evt.target.value;
-                            props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { Operator: value })); });
-                        } },
-                        React.createElement("option", { value: 'LIKE' }, "LIKE"),
-                        React.createElement("option", { value: '=' }, "="),
-                        React.createElement("option", { value: 'NOT LIKE' }, "NOT LIKE"))),
-                React.createElement("div", { className: 'col' },
-                    React.createElement("input", { className: 'form-control', value: props.Filter.SearchText, onChange: function (evt) {
-                            var value = evt.target.value;
-                            props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { SearchText: value })); });
-                        } })))));
-    }
-    else if (props.Field.type === "integer" || props.Field.type === "number") {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("label", null,
-                "Column type is ",
-                props.Field.type,
-                "."),
-            React.createElement("div", { className: 'row' },
-                React.createElement("div", { className: 'col-4' },
-                    React.createElement("select", { className: 'form-control', value: props.Filter.Operator, onChange: function (evt) {
-                            var value = evt.target.value;
-                            props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { Operator: value })); });
-                        } },
-                        React.createElement("option", { value: '=' }, "="),
-                        React.createElement("option", { value: '<>' }, "!="),
-                        React.createElement("option", { value: '>' }, ">"),
-                        React.createElement("option", { value: '>=' }, ">="),
-                        React.createElement("option", { value: '<' }, "<"),
-                        React.createElement("option", { value: '>=' }, ">="))),
-                React.createElement("div", { className: 'col' },
-                    React.createElement("input", { type: 'number', className: 'form-control', value: props.Filter.SearchText, onChange: function (evt) {
-                            var value = evt.target.value;
-                            props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { SearchText: value })); });
-                        } })))));
+var react_interactive_1 = require("@gpa-gemstone/react-interactive");
+var react_redux_1 = require("react-redux");
+/** This Implements a few standardized SearchBars */
+var DefaultSearch;
+(function (DefaultSearch) {
+    /** This Implements a standard Meter Search */
+    function Meter(props) {
+        var defaultSearchcols = [
+            { label: 'AssetKey', key: 'AssetKey', type: 'string', isPivotField: false },
+            { label: 'Name', key: 'Name', type: 'string', isPivotField: false },
+            { label: 'Location', key: 'Location', type: 'string', isPivotField: false },
+            { label: 'Make', key: 'Make', type: 'string', isPivotField: false },
+            { label: 'Model', key: 'Model', type: 'string', isPivotField: false },
+            { label: 'Number of Assets', key: 'MappedAssets', type: 'number', isPivotField: false },
+        ];
+        var dispatch = react_redux_1.useDispatch();
+        var _a = React.useState([]), addlFieldCols = _a[0], setAddlFieldCols = _a[1];
+        var searchStatus = react_redux_1.useSelector(props.Slice.SearchStatus);
+        var sortField = react_redux_1.useSelector(props.Slice.SortField);
+        var ascending = react_redux_1.useSelector(props.Slice.Ascending);
+        var data = react_redux_1.useSelector(props.Slice.SearchResults);
+        React.useEffect(function () {
+            return props.GetAddlFields(setAddlFieldCols);
+        }, []);
+        var standardSearch = { label: 'Name', key: 'Name', type: 'string', isPivotField: false };
+        return React.createElement(react_interactive_1.SearchBar, { CollumnList: __spreadArray(__spreadArray([], addlFieldCols), defaultSearchcols), SetFilter: function (flds) { return dispatch(props.Slice.DBSearch({ filter: flds, sortField: sortField, ascending: ascending })); }, Direction: 'left', defaultCollumn: standardSearch, Width: '50%', Label: 'Search', ShowLoading: searchStatus === 'loading', ResultNote: searchStatus === 'error' ? 'Could not complete Search' : 'Found ' + data.length + ' Meter(s)', GetEnum: props.GetEnum }, props.children);
     }
-    else if (props.Field.type === "datetime") {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("label", null,
-                "Column type is ",
-                props.Field.type,
-                "."),
-            React.createElement("div", { className: 'row' },
-                React.createElement("div", { className: 'col-4' },
-                    React.createElement("select", { className: 'form-control', value: props.Filter.Operator, onChange: function (evt) {
-                            var value = evt.target.value;
-                            props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { Operator: value })); });
-                        } },
-                        React.createElement("option", { value: '=' }, "="),
-                        React.createElement("option", { value: '<>' }, "!="),
-                        React.createElement("option", { value: '>' }, ">"),
-                        React.createElement("option", { value: '>=' }, ">="),
-                        React.createElement("option", { value: '<' }, "<"),
-                        React.createElement("option", { value: '>=' }, ">="))),
-                React.createElement("div", { className: 'col' },
-                    React.createElement("input", { type: 'date', className: 'form-control', value: props.Filter.SearchText.split(' ')[0], onChange: function (evt) {
-                            var value = evt.target.value;
-                            props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { SearchText: (value + ' ' + (prevState.SearchText.split(' ').length > 1 ? prevState.SearchText.split(' ')[1] : '0:00')) })); });
-                        } }),
-                    React.createElement("input", { type: 'time', className: 'form-control', value: props.Filter.SearchText.split(' ').length > 1 ? props.Filter.SearchText.split(' ')[1] : '0:00', onChange: function (evt) {
-                            var value = evt.target.value;
-                            props.Setter(function (prevState) { return (__assign(__assign({}, prevState), { SearchText: (prevState.SearchText.split(' ')[0] + ' ' + value) })); });
-                        } })))));
+    DefaultSearch.Meter = Meter;
+    /** This Implements a standard Substation Search */
+    function Location(props) {
+        var standardSearch = { label: 'Name', key: 'Name', type: 'string', isPivotField: false };
+        var _a = React.useState([]), addlFieldCols = _a[0], setAddlFieldCols = _a[1];
+        var dispatch = react_redux_1.useDispatch();
+        var searchStatus = react_redux_1.useSelector(props.Slice.SearchStatus);
+        var sortField = react_redux_1.useSelector(props.Slice.SortField);
+        var ascending = react_redux_1.useSelector(props.Slice.Ascending);
+        var data = react_redux_1.useSelector(props.Slice.SearchResults);
+        var defaultSearchcols = [
+            { label: 'Name', key: 'Name', type: 'string', isPivotField: false },
+            { label: 'Key', key: 'LocationKey', type: 'string', isPivotField: false },
+            { label: 'Asset', key: 'Asset', type: 'string', isPivotField: false },
+            { label: 'Meter', key: 'Meter', type: 'string', isPivotField: false },
+            { label: 'Number of Assets', key: 'Assets', type: 'integer', isPivotField: false },
+            { label: 'Number of Meters', key: 'Meters', type: 'integer', isPivotField: false },
+        ];
+        React.useEffect(function () {
+            return props.GetAddlFields(setAddlFieldCols);
+        }, []);
+        return React.createElement(react_interactive_1.SearchBar, { CollumnList: __spreadArray(__spreadArray([], addlFieldCols), defaultSearchcols), SetFilter: function (flds) { return dispatch(props.Slice.DBSearch({ filter: flds, sortField: sortField, ascending: ascending })); }, Direction: 'left', defaultCollumn: standardSearch, Width: '50%', Label: 'Search', ShowLoading: searchStatus === 'loading', ResultNote: searchStatus === 'error' ? 'Could not complete Search' : 'Found ' + data.length + '  Substation(s)', GetEnum: props.GetEnum }, props.children);
     }
-    else if (props.Field.type === "boolean") {
-        return React.createElement(react_forms_1.CheckBox, { Record: props.Filter, Field: 'SearchText', Setter: function (filter) {
-                props.Setter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { Operator: '=', SearchText: filter.SearchText.toString() === 'true' ? '1' : '0' })); });
-            }, Label: "Column type is boolean. Yes/On is checked." });
+    DefaultSearch.Location = Location;
+    /** This Implements a standard Transmission Asset Search */
+    function Asset(props) {
+        var standardSearch = { label: 'Name', key: 'AssetName', type: 'string', isPivotField: false };
+        var _a = React.useState([]), addlFieldCols = _a[0], setAddlFieldCols = _a[1];
+        var dispatch = react_redux_1.useDispatch();
+        var searchStatus = react_redux_1.useSelector(props.Slice.SearchStatus);
+        var sortField = react_redux_1.useSelector(props.Slice.SortField);
+        var ascending = react_redux_1.useSelector(props.Slice.Ascending);
+        var data = react_redux_1.useSelector(props.Slice.SearchResults);
+        var defaultSearchcols = [
+            { label: 'Key', key: 'AssetKey', type: 'string', isPivotField: false },
+            { label: 'Name', key: 'AssetName', type: 'string', isPivotField: false },
+            { label: 'Voltage (kV)', key: 'VoltageKV', type: 'number', isPivotField: false },
+            { label: 'Type', key: 'AssetType', type: 'enum', isPivotField: false },
+            { label: 'Meters', key: 'Meters', type: 'integer', isPivotField: false },
+            { label: 'Substations', key: 'Locations', type: 'integer', isPivotField: false },
+        ];
+        React.useEffect(function () {
+            return props.GetAddlFields(setAddlFieldCols);
+        }, []);
+        return React.createElement(react_interactive_1.SearchBar, { CollumnList: __spreadArray(__spreadArray([], addlFieldCols), defaultSearchcols), SetFilter: function (flds) { return dispatch(props.Slice.DBSearch({ filter: flds, sortField: sortField, ascending: ascending })); }, Direction: 'left', defaultCollumn: standardSearch, Width: '50%', Label: 'Search', ShowLoading: searchStatus === 'loading', ResultNote: searchStatus === 'error' ? 'Could not complete Search' : 'Found ' + data.length + ' Transmission Asset(s)', GetEnum: props.GetEnum }, props.children);
     }
-    else {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("label", null, "Column type is enumerable. Select from below."),
-            React.createElement("ul", { style: { listStyle: 'none' } },
-                React.createElement("li", null,
-                    React.createElement("div", { className: "form-check" },
-                        React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
-                                if (evt.target.checked)
-                                    props.Setter(function (prevSetter) { return (__assign(__assign({}, prevSetter), { SearchText: "(" + options.map(function (x) { return x.Value; }).join(',') + ")" })); });
-                                else
-                                    props.Setter(function (prevSetter) { return (__assign(__assign({}, prevSetter), { SearchText: '' })); });
-                            }, defaultValue: 'off' }),
-                        React.createElement("label", { className: "form-check-label" }, "Select All"))),
-                options.map(function (vli, index) { return React.createElement("li", { key: index },
-                    React.createElement("div", { className: "form-check" },
-                        React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
-                                if (evt.target.checked) {
-                                    var list = props.Filter.SearchText.replace('(', '').replace(')', '').split(',');
-                                    list = list.filter(function (x) { return x !== ""; });
-                                    list.push(vli.Value);
-                                    var text_1 = "(" + list.join(',') + ")";
-                                    props.Setter(function (prevSetter) { return (__assign(__assign({}, prevSetter), { SearchText: text_1 })); });
-                                }
-                                else {
-                                    var list = props.Filter.SearchText.replace('(', '').replace(')', '').split(',');
-                                    list = list.filter(function (x) { return x !== ""; });
-                                    list = list.filter(function (x) { return x !== vli.Value; });
-                                    var text_2 = "(" + list.join(',') + ")";
-                                    props.Setter(function (prevSetter) { return (__assign(__assign({}, prevSetter), { SearchText: text_2 })); });
-                                }
-                            }, value: props.Filter.SearchText.indexOf(vli.Value) >= 0 ? 'on' : 'off', checked: props.Filter.SearchText.indexOf(vli.Value) >= 0 ? true : false }),
-                        React.createElement("label", { className: "form-check-label" }, vli.Label))); }))));
+    DefaultSearch.Asset = Asset;
+    /** This Implements a standard AssetGroup Search */
+    function AssetGroup(props) {
+        var standardSearch = { label: 'Name', key: 'AssetName', type: 'string', isPivotField: false };
+        var _a = React.useState([]), addlFieldCols = _a[0], setAddlFieldCols = _a[1];
+        var dispatch = react_redux_1.useDispatch();
+        var searchStatus = react_redux_1.useSelector(props.Slice.SearchStatus);
+        var sortField = react_redux_1.useSelector(props.Slice.SortField);
+        var ascending = react_redux_1.useSelector(props.Slice.Ascending);
+        var data = react_redux_1.useSelector(props.Slice.SearchResults);
+        var defaultSearchcols = [
+            { label: 'Name', key: 'Name', type: 'string', isPivotField: false },
+            { label: 'Number of Meter', key: 'Meters', type: 'integer', isPivotField: false },
+            { label: 'Number of Transmission Assets', key: 'Assets', type: 'integer', isPivotField: false },
+            { label: 'Number of Users', key: 'Users', type: 'integer', isPivotField: false },
+            { label: 'Show in PQ Dashboard', key: 'DisplayDashboard', type: 'boolean', isPivotField: false },
+        ];
+        React.useEffect(function () {
+            return props.GetAddlFields(setAddlFieldCols);
+        }, []);
+        return React.createElement(react_interactive_1.SearchBar, { CollumnList: __spreadArray(__spreadArray([], addlFieldCols), defaultSearchcols), SetFilter: function (flds) { return dispatch(props.Slice.DBSearch({ filter: flds, sortField: sortField, ascending: ascending })); }, Direction: 'left', defaultCollumn: standardSearch, Width: '50%', Label: 'Search', ShowLoading: searchStatus === 'loading', ResultNote: searchStatus === 'error' ? 'Could not complete Search' : 'Found ' + data.length + ' Asset Group(s)', GetEnum: props.GetEnum }, props.children);
     }
-}
+    DefaultSearch.AssetGroup = AssetGroup;
+})(DefaultSearch = exports.DefaultSearch || (exports.DefaultSearch = {}));

package/lib/SelectionPopup.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { Column } from "@gpa-gemstone/react-table";
+import { GenericSlice, Search } from "@gpa-gemstone/react-interactive";
+import { OpenXDA, SystemCenter } from "@gpa-gemstone/application-typings";
+interface U {
+    ID: number | string;
+}
+interface IProps<T extends U> {
+    Slice: GenericSlice<T>;
+    Selection: T[];
+    OnClose: (selected: T[], conf: boolean) => void;
+    Show: boolean;
+    Type?: 'single' | 'multiple';
+    Columns: Column<T>[];
+    Title: string;
+    GetEnum: (setOptions: (options: IOptions[]) => void, field: Search.IField<T>) => () => void;
+    GetAddlFields: (setAddlFields: (cols: Search.IField<T>[]) => void) => () => void;
+    MinSelection?: number;
+}
+interface IOptions {
+    Value: string;
+    Label: string;
+}
+/** This Implements a few standardized Selection Popups */
+export declare namespace DefaultSelects {
+    /** This Implements a standard Meter Selection Modal */
+    function Meter(props: IProps<SystemCenter.Types.DetailedMeter>): JSX.Element;
+    /** This Implements a standard Substation Selection Modal */
+    function Location(props: IProps<SystemCenter.Types.DetailedLocation>): JSX.Element;
+    /** This Implements a standard Transmission Asset Selection Modal */
+    function Asset(props: IProps<SystemCenter.Types.DetailedAsset>): JSX.Element;
+    /** This Implements a standard Asset Group Selection Modal */
+    function AssetGroup(props: IProps<OpenXDA.Types.AssetGroup>): JSX.Element;
+}
+export {};

package/lib/SelectionPopup.js

@@ -0,0 +1,62 @@
+"use strict";
+// ******************************************************************************************************
+//  SelectionPopup.tsx - Gbtc
+//
+//  Copyright © 2021, 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:
+//  ----------------------------------------------------------------------------------------------------
+//  12/19/2021 - C. 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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultSelects = void 0;
+var React = require("react");
+var StandardSelectPopup_1 = require("./StandardSelectPopup");
+var SearchBar_1 = require("./SearchBar");
+/** This Implements a few standardized Selection Popups */
+var DefaultSelects;
+(function (DefaultSelects) {
+    /** This Implements a standard Meter Selection Modal */
+    function Meter(props) {
+        return React.createElement(StandardSelectPopup_1.default, __assign({}, props, { Searchbar: function (children) { return React.createElement(SearchBar_1.DefaultSearch.Meter, { Slice: props.Slice, GetAddlFields: props.GetAddlFields, GetEnum: props.GetEnum }, children); } }));
+    }
+    DefaultSelects.Meter = Meter;
+    /** This Implements a standard Substation Selection Modal */
+    function Location(props) {
+        return React.createElement(StandardSelectPopup_1.default, __assign({}, props, { Searchbar: function (children) { return React.createElement(SearchBar_1.DefaultSearch.Location, { Slice: props.Slice, GetAddlFields: props.GetAddlFields, GetEnum: props.GetEnum }, children); } }));
+    }
+    DefaultSelects.Location = Location;
+    /** This Implements a standard Transmission Asset Selection Modal */
+    function Asset(props) {
+        return React.createElement(StandardSelectPopup_1.default, __assign({}, props, { Searchbar: function (children) { return React.createElement(SearchBar_1.DefaultSearch.Asset, { Slice: props.Slice, GetAddlFields: props.GetAddlFields, GetEnum: props.GetEnum }, children); } }));
+    }
+    DefaultSelects.Asset = Asset;
+    /** This Implements a standard Asset Group Selection Modal */
+    function AssetGroup(props) {
+        return React.createElement(StandardSelectPopup_1.default, __assign({}, props, { Searchbar: function (children) { return React.createElement(SearchBar_1.DefaultSearch.AssetGroup, { Slice: props.Slice, GetAddlFields: props.GetAddlFields, GetEnum: props.GetEnum }, children); } }));
+    }
+    DefaultSelects.AssetGroup = AssetGroup;
+})(DefaultSelects = exports.DefaultSelects || (exports.DefaultSelects = {}));

package/lib/StandardSelectPopup.d.ts

@@ -0,0 +1,19 @@
+import { Column } from "@gpa-gemstone/react-table";
+import * as React from 'react';
+import { GenericSlice } from "@gpa-gemstone/react-interactive";
+interface U {
+    ID: number | string;
+}
+interface IProps<T extends U> {
+    Slice: GenericSlice<T>;
+    Selection: T[];
+    OnClose: (selected: T[], conf: boolean) => void;
+    Show: boolean;
+    Searchbar: (children: React.ReactNode) => React.ReactNode;
+    Type?: 'single' | 'multiple';
+    Columns: Column<T>[];
+    Title: string;
+    MinSelection?: number;
+}
+export default function SelectPopup<T extends U>(props: IProps<T>): JSX.Element;
+export {};

package/lib/StandardSelectPopup.js

@@ -0,0 +1,94 @@
+"use strict";
+// ******************************************************************************************************
+//  StandardSelectPopup.tsx - Gbtc
+//
+//  Copyright © 2021, 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:
+//  ----------------------------------------------------------------------------------------------------
+//  12/19/2021 - C. Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_table_1 = require("@gpa-gemstone/react-table");
+var React = require("react");
+var react_redux_1 = require("react-redux");
+var react_interactive_1 = require("@gpa-gemstone/react-interactive");
+var _ = require("lodash");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+function SelectPopup(props) {
+    var dispatch = react_redux_1.useDispatch();
+    var sortField = react_redux_1.useSelector(props.Slice.SortField);
+    var ascending = react_redux_1.useSelector(props.Slice.Ascending);
+    var data = react_redux_1.useSelector(props.Slice.SearchResults);
+    var _a = React.useState(props.Selection), selectedData = _a[0], setSelectedData = _a[1];
+    var _b = React.useState(''), sortKeySelected = _b[0], setSortKeySelected = _b[1];
+    var _c = React.useState(false), ascendingSelected = _c[0], setAscendingSelected = _c[1];
+    React.useEffect(function () {
+        setSelectedData(props.Selection);
+    }, [props.Selection]);
+    function AddCurrentList() {
+        var updatedData;
+        updatedData = selectedData.concat(data);
+        setSelectedData(_.uniqBy(updatedData, function (d) { return d.ID; }));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_interactive_1.Modal, { Show: props.Show, Title: props.Title, ShowX: true, Size: 'xlg', CallBack: function (conf) { return props.OnClose(selectedData, conf); }, DisableConfirm: props.MinSelection !== undefined && selectedData.length < props.MinSelection, ConfirmShowToolTip: props.MinSelection !== undefined && selectedData.length < props.MinSelection, ConfirmToolTipContent: React.createElement("p", null,
+                gpa_symbols_1.CrossMark,
+                " At least ",
+                props.MinSelection,
+                " items must be selected. ") },
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col" }, props.Searchbar(props.Type === 'multiple' ? React.createElement("li", { className: "nav-item", style: { width: '20%', paddingRight: 10 } },
+                    React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
+                        React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "Quick Selects:"),
+                        React.createElement("form", null,
+                            React.createElement("div", { className: "form-group" },
+                                React.createElement("div", { className: "btn btn-primary", onClick: function (event) { event.preventDefault(); AddCurrentList(); } }, "Add Current List to Selection")),
+                            React.createElement("div", { className: "form-group" },
+                                React.createElement("div", { className: "btn btn-danger", onClick: function (event) { event.preventDefault(); setSelectedData([]); } }, "Remove All"))))) : null))),
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col", style: { width: (props.Type === undefined || props.Type === 'single' ? '100%' : '60%') } },
+                    React.createElement(react_table_1.default, { cols: props.Columns, tableClass: "table table-hover", data: data, sortKey: sortField, ascending: ascending, onSort: function (d) {
+                            if (d.colKey === "Scroll")
+                                return;
+                            if (d.colKey === sortField)
+                                dispatch(props.Slice.Sort({ SortField: sortField, Ascending: ascending }));
+                            else {
+                                dispatch(props.Slice.Sort({ SortField: d.colField, Ascending: true }));
+                            }
+                        }, onClick: function (d) { return setSelectedData(__spreadArray(__spreadArray([], selectedData.filter(function (item) { return item.ID !== d.row.ID; })), [d.row])); }, theadStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, tbodyStyle: { display: 'block', overflowY: 'scroll', maxHeight: '400px', width: '100%' }, rowStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, selected: props.Type === undefined || props.Type === 'single' ? function (item) { return selectedData.findIndex(function (d) { return d.ID === item.ID; }) > -1; } : function (item) { return false; } })),
+                props.Type === 'multiple' ? React.createElement("div", { className: "col", style: { width: '40%' } },
+                    React.createElement("div", { style: { width: '100%' } },
+                        React.createElement("h3", null, " Selected Assets ")),
+                    React.createElement(react_table_1.default, { cols: props.Columns, tableClass: "table table-hover", data: selectedData, sortKey: sortKeySelected, ascending: ascendingSelected, onSort: function (d) {
+                            if (d.colKey === sortKeySelected) {
+                                var ordered = _.orderBy(selectedData, [d.colKey], [(!ascendingSelected ? "asc" : "desc")]);
+                                setAscendingSelected(!ascendingSelected);
+                                setSelectedData(ordered);
+                            }
+                            else {
+                                var ordered = _.orderBy(selectedData, [d.colKey], ["asc"]);
+                                setAscendingSelected(!ascendingSelected);
+                                setSelectedData(ordered);
+                                setSortKeySelected(d.colKey);
+                            }
+                        }, onClick: function () { return true; }, theadStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, tbodyStyle: { display: 'block', overflowY: 'scroll', maxHeight: '400px', width: '100%' }, rowStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, selected: function (item) { return false; } })) : null))));
+}
+exports.default = SelectPopup;

package/lib/index.d.ts

@@ -4,4 +4,7 @@ import ByValueList from './ValueList/ByValueList';
 import ValueList from './ValueList/Group';
 import ByUser from './user/ByUser';
 import User from './user/User';
-export { Setting, Note, ValueList, ByValueList, User, ByUser };
+import { DefaultSearch } from './SearchBar';
+import SelectPopup from './StandardSelectPopup';
+import DefaultSelects from './StandardSelectPopup';
+export { Setting, Note, ValueList, ByValueList, User, ByUser, DefaultSearch, SelectPopup, DefaultSelects };

package/lib/index.js

@@ -22,7 +22,7 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ByUser = exports.User = exports.ByValueList = exports.ValueList = exports.Note = exports.Setting = void 0;
+exports.DefaultSelects = exports.SelectPopup = exports.DefaultSearch = exports.ByUser = exports.User = exports.ByValueList = exports.ValueList = exports.Note = exports.Setting = void 0;
 var Setting_1 = require("./Setting");
 exports.Setting = Setting_1.default;
 var Note_1 = require("./Note");
@@ -35,3 +35,9 @@ var ByUser_1 = require("./user/ByUser");
 exports.ByUser = ByUser_1.default;
 var User_1 = require("./user/User");
 exports.User = User_1.default;
+var SearchBar_1 = require("./SearchBar");
+Object.defineProperty(exports, "DefaultSearch", { enumerable: true, get: function () { return SearchBar_1.DefaultSearch; } });
+var StandardSelectPopup_1 = require("./StandardSelectPopup");
+exports.SelectPopup = StandardSelectPopup_1.default;
+var StandardSelectPopup_2 = require("./StandardSelectPopup");
+exports.DefaultSelects = StandardSelectPopup_2.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/common-pages",
-  "version": "0.0.17",
+  "version": "0.0.22",
   "description": "Common UI pages for GPA products",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -36,29 +36,29 @@
   },
   "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
   "devDependencies": {
+    "@types/crypto-js": "4.0.2",
     "@types/jest": "^26.0.4",
+    "@types/jquery": "3.5.6",
     "jest": "^27.0.6",
     "prettier": "^2.3.2",
     "ts-jest": "^27.0.3",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "4.3.4",
-    "@types/jquery": "3.5.6",
-    "@types/crypto-js": "4.0.2"
+    "typescript": "4.3.4"
   },
   "dependencies": {
-    "@gpa-gemstone/application-typings": "0.0.30",
+    "@gpa-gemstone/application-typings": "0.0.37",
     "@gpa-gemstone/gpa-symbols": "0.0.13",
-    "@gpa-gemstone/react-forms": "1.1.12",
-    "@gpa-gemstone/react-interactive": "1.0.23",
-    "@gpa-gemstone/react-table": "1.2.4",
-    "@gpa-gemstone/helper-functions": "0.0.8",
+    "@gpa-gemstone/helper-functions": "0.0.9",
+    "@gpa-gemstone/react-forms": "1.1.15",
+    "@gpa-gemstone/react-interactive": "1.0.32",
+    "@gpa-gemstone/react-table": "1.2.5",
+    "@reduxjs/toolkit": "1.6.0",
+    "crypto-js": "4.0.0",
     "moment": "^2.29.1",
     "react": "^17.0.2",
-    "styled-components": "^5.3.0",
-    "crypto-js": "4.0.0",
-    "react-redux": "7.2.4",
-    "@reduxjs/toolkit": "1.6.0"
+    "react-redux": "7.2.6",
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public"