npm - @gpa-gemstone/common-pages - Versions diffs - 0.0.18 → 0.0.23 - Mend

@gpa-gemstone/common-pages 0.0.18 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/lib/Note.js +6 -6
package/lib/SearchBar.d.ts +22 -27
package/lib/SearchBar.js +108 -275
package/lib/SelectionPopup.d.ts +35 -0
package/lib/SelectionPopup.js +62 -0
package/lib/Setting.js +6 -6
package/lib/StandardSelectPopup.d.ts +19 -0
package/lib/StandardSelectPopup.js +98 -0
package/lib/ValueList/ByValueList.js +7 -7
package/lib/ValueList/Group.js +3 -3
package/lib/ValueList/GroupItem.js +4 -4
package/lib/ValueList/ItemForm.js +2 -2
package/lib/index.d.ts +4 -1
package/lib/index.js +7 -1
package/lib/user/AdditionalField.js +26 -22
package/lib/user/ByUser.js +14 -14
package/lib/user/User.js +3 -3
package/lib/user/UserForm.js +2 -2
package/lib/user/UserInfo.js +2 -2
package/lib/user/UserPermissions.js +5 -5
package/package.json +14 -14

package/lib/Note.js CHANGED Viewed

@@ -40,14 +40,14 @@ var react_interactive_1 = require("@gpa-gemstone/react-interactive");
 var moment = require("moment");
 var react_redux_1 = require("react-redux");
 function Note(props) {
-    var dispatch = react_redux_1.useDispatch();
+    var dispatch = (0, react_redux_1.useDispatch)();
     var _a = React.useState(false), showEdit = _a[0], setEdit = _a[1];
     var _b = React.useState('none'), hover = _b[0], setHover = _b[1];
-    var data = react_redux_1.useSelector(props.NoteSlice.Data);
-    var dataStatus = react_redux_1.useSelector(props.NoteSlice.Status);
-    var parentID = react_redux_1.useSelector((props.NoteSlice.ParentID === undefined ? function (state) { return props.ReferenceTableID; } : props.NoteSlice.ParentID));
-    var sortField = react_redux_1.useSelector(props.NoteSlice.SortField);
-    var ascending = react_redux_1.useSelector(props.NoteSlice.Ascending);
+    var data = (0, react_redux_1.useSelector)(props.NoteSlice.Data);
+    var dataStatus = (0, react_redux_1.useSelector)(props.NoteSlice.Status);
+    var parentID = (0, react_redux_1.useSelector)((props.NoteSlice.ParentID === undefined ? function (state) { return props.ReferenceTableID; } : props.NoteSlice.ParentID));
+    var sortField = (0, react_redux_1.useSelector)(props.NoteSlice.SortField);
+    var ascending = (0, react_redux_1.useSelector)(props.NoteSlice.Ascending);
     var _c = React.useState(CreateNewNote()), note = _c[0], setNote = _c[1];
     React.useEffect(function () {
         if (dataStatus === 'unintiated' || dataStatus === 'changed' || parentID !== props.ReferenceTableID)

package/lib/SearchBar.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,120 @@
 //
 //  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];
+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 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;
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 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 = (0, react_redux_1.useDispatch)();
+        var _a = React.useState([]), addlFieldCols = _a[0], setAddlFieldCols = _a[1];
+        var searchStatus = (0, react_redux_1.useSelector)(props.Slice.SearchStatus);
+        var sortField = (0, react_redux_1.useSelector)(props.Slice.SortField);
+        var ascending = (0, react_redux_1.useSelector)(props.Slice.Ascending);
+        var data = (0, 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([], defaultSearchcols, true), addlFieldCols, true), 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 = (0, react_redux_1.useDispatch)();
+        var searchStatus = (0, react_redux_1.useSelector)(props.Slice.SearchStatus);
+        var sortField = (0, react_redux_1.useSelector)(props.Slice.SortField);
+        var ascending = (0, react_redux_1.useSelector)(props.Slice.Ascending);
+        var data = (0, 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: 'Transmission Asset', key: 'Asset', type: 'string', isPivotField: false },
+            { label: 'Meter', key: 'Meter', type: 'string', isPivotField: false },
+            { label: 'Number of Transmission Assets', key: 'Assets', type: 'integer', isPivotField: false },
+            { label: 'Number of Meters', key: 'Meters', type: 'integer', isPivotField: false },
+            { label: 'Description', key: 'Description', type: 'string', isPivotField: false }
+        ];
+        React.useEffect(function () {
+            return props.GetAddlFields(setAddlFieldCols);
+        }, []);
+        return React.createElement(react_interactive_1.SearchBar, { CollumnList: __spreadArray(__spreadArray([], defaultSearchcols, true), addlFieldCols, true), 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 = (0, react_redux_1.useDispatch)();
+        var searchStatus = (0, react_redux_1.useSelector)(props.Slice.SearchStatus);
+        var sortField = (0, react_redux_1.useSelector)(props.Slice.SortField);
+        var ascending = (0, react_redux_1.useSelector)(props.Slice.Ascending);
+        var data = (0, 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: 'Meter', key: 'Meter', type: 'string', isPivotField: false },
+            { label: 'Substation', key: 'Location', type: 'string', isPivotField: false },
+            { label: 'Number of Meters', key: 'Meters', type: 'integer', isPivotField: false },
+            { label: 'Number of Substations', key: 'Locations', type: 'integer', isPivotField: false },
+        ];
+        React.useEffect(function () {
+            return props.GetAddlFields(setAddlFieldCols);
+        }, []);
+        return React.createElement(react_interactive_1.SearchBar, { CollumnList: __spreadArray(__spreadArray([], defaultSearchcols, true), addlFieldCols, true), 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 = (0, react_redux_1.useDispatch)();
+        var searchStatus = (0, react_redux_1.useSelector)(props.Slice.SearchStatus);
+        var sortField = (0, react_redux_1.useSelector)(props.Slice.SortField);
+        var ascending = (0, react_redux_1.useSelector)(props.Slice.Ascending);
+        var data = (0, 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([], defaultSearchcols, true), addlFieldCols, true), 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/Setting.js CHANGED Viewed

@@ -28,12 +28,12 @@ var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 var react_interactive_1 = require("@gpa-gemstone/react-interactive");
 var react_redux_1 = require("react-redux");
 function Setting(props) {
-    var dispatch = react_redux_1.useDispatch();
-    var search = react_redux_1.useSelector(props.SettingsSlice.SearchFilters);
-    var searchStatus = react_redux_1.useSelector(props.SettingsSlice.SearchStatus);
-    var data = react_redux_1.useSelector(props.SettingsSlice.SearchResults);
-    var allSettings = react_redux_1.useSelector(props.SettingsSlice.Data);
-    var status = react_redux_1.useSelector(props.SettingsSlice.Status);
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var search = (0, react_redux_1.useSelector)(props.SettingsSlice.SearchFilters);
+    var searchStatus = (0, react_redux_1.useSelector)(props.SettingsSlice.SearchStatus);
+    var data = (0, react_redux_1.useSelector)(props.SettingsSlice.SearchResults);
+    var allSettings = (0, react_redux_1.useSelector)(props.SettingsSlice.Data);
+    var status = (0, react_redux_1.useSelector)(props.SettingsSlice.Status);
     var _a = React.useState('Name'), sortField = _a[0], setSortField = _a[1];
     var _b = React.useState(true), ascending = _b[0], setAscending = _b[1];
     var emptySetting = { ID: 0, Name: '', Value: '', DefaultValue: '' };

package/lib/StandardSelectPopup.d.ts ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,98 @@
+"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, 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));
+};
+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 = (0, react_redux_1.useDispatch)();
+    var sortField = (0, react_redux_1.useSelector)(props.Slice.SortField);
+    var ascending = (0, react_redux_1.useSelector)(props.Slice.Ascending);
+    var data = (0, 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; }), true), [d.row], false)); }, 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/ValueList/ByValueList.js CHANGED Viewed

@@ -39,18 +39,18 @@ var react_interactive_1 = require("@gpa-gemstone/react-interactive");
 var GroupForm_1 = require("./GroupForm");
 var react_redux_1 = require("react-redux");
 function ByValueListGroup(props) {
-    var dispatch = react_redux_1.useDispatch();
-    var data = react_redux_1.useSelector(props.ValueListSlice.SearchResults);
-    var dataStatus = react_redux_1.useSelector(props.ValueListSlice.SearchStatus);
-    var groups = react_redux_1.useSelector(props.ValueListSlice.Data);
-    var groupStatus = react_redux_1.useSelector(props.ValueListSlice.Status);
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var data = (0, react_redux_1.useSelector)(props.ValueListSlice.SearchResults);
+    var dataStatus = (0, react_redux_1.useSelector)(props.ValueListSlice.SearchStatus);
+    var groups = (0, react_redux_1.useSelector)(props.ValueListSlice.Data);
+    var groupStatus = (0, react_redux_1.useSelector)(props.ValueListSlice.Status);
     var _a = React.useState('Name'), sortKey = _a[0], setSortKey = _a[1];
     var _b = React.useState(false), asc = _b[0], setASC = _b[1];
     var emptyRecord = { ID: 0, Name: '', Description: '' };
     var _c = React.useState(false), showNew = _c[0], setShowNew = _c[1];
     var _d = React.useState(emptyRecord), record = _d[0], setRecord = _d[1];
-    var items = react_redux_1.useSelector(props.ValueListItemSlice.Data);
-    var itemStatus = react_redux_1.useSelector(props.ValueListItemSlice.Status);
+    var items = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Data);
+    var itemStatus = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Status);
     var _e = React.useState([]), search = _e[0], setSearch = _e[1];
     var _f = React.useState([]), newErrors = _f[0], setNewErrors = _f[1];
     var _g = React.useState(true), validName = _g[0], setValidName = _g[1];

package/lib/ValueList/Group.js CHANGED Viewed

@@ -27,9 +27,9 @@ var GroupInfo_1 = require("./GroupInfo");
 var GroupItem_1 = require("./GroupItem");
 var react_redux_1 = require("react-redux");
 function ValueListGroup(props) {
-    var dispatch = react_redux_1.useDispatch();
-    var record = react_redux_1.useSelector(function (state) { return props.ValueListSlice.Data(state).find(function (i) { return i.ID === props.Id; }); });
-    var recordStatus = react_redux_1.useSelector(props.ValueListSlice.Status);
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var record = (0, react_redux_1.useSelector)(function (state) { return props.ValueListSlice.Data(state).find(function (i) { return i.ID === props.Id; }); });
+    var recordStatus = (0, react_redux_1.useSelector)(props.ValueListSlice.Status);
     var _a = React.useState('items'), tab = _a[0], setTab = _a[1];
     var _b = React.useState(false), showWarning = _b[0], setShowWarning = _b[1];
     React.useEffect(function () {

package/lib/ValueList/GroupItem.js CHANGED Viewed

@@ -39,10 +39,10 @@ var react_table_1 = require("@gpa-gemstone/react-table");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 var react_redux_1 = require("react-redux");
 function GroupItemsWindow(props) {
-    var dispatch = react_redux_1.useDispatch();
-    var recordStatus = react_redux_1.useSelector(props.ValueListItemSlice.Status);
-    var data = react_redux_1.useSelector(props.ValueListItemSlice.Data);
-    var parentID = react_redux_1.useSelector((props.ValueListItemSlice.ParentID === undefined ? function (state) { return -1; } : props.ValueListItemSlice.ParentID));
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var recordStatus = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Status);
+    var data = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Data);
+    var parentID = (0, react_redux_1.useSelector)((props.ValueListItemSlice.ParentID === undefined ? function (state) { return -1; } : props.ValueListItemSlice.ParentID));
     var _a = React.useState('Value'), sortField = _a[0], setSortField = _a[1];
     var _b = React.useState(false), ascending = _b[0], setAscending = _b[1];
     var emptyRecord = { ID: 0, GroupID: props.Record.ID, Value: '', AltValue: '', SortOrder: 0 };

package/lib/ValueList/ItemForm.js CHANGED Viewed

@@ -34,7 +34,7 @@ function ItemForm(props) {
             e.push('Value has to be less than 200 characters.');
         if (props.Record.AltValue != null && props.Record.AltValue.length > 200)
             e.push('Alt Value has to be less than 200 characters.');
-        if (props.Record.SortOrder != null && !helper_functions_1.IsInteger(props.Record.SortOrder))
+        if (props.Record.SortOrder != null && !(0, helper_functions_1.IsInteger)(props.Record.SortOrder))
             e.push('Sort Order has to be an integer or be left blank.');
         setErrors(e);
     }, [props.Record]);
@@ -48,7 +48,7 @@ function ItemForm(props) {
         else if (field === 'AltValue')
             return props.Record.AltValue == null || props.Record.AltValue.length <= 200;
         else if (field === 'SortOrder')
-            return props.Record.SortOrder == null || helper_functions_1.IsInteger(props.Record.SortOrder);
+            return props.Record.SortOrder == null || (0, helper_functions_1.IsInteger)(props.Record.SortOrder);
         return true;
     }
     return (React.createElement("form", null,

package/lib/index.d.ts CHANGED Viewed

@@ -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 './SelectionPopup';
+export { Setting, Note, ValueList, ByValueList, User, ByUser, DefaultSearch, SelectPopup, DefaultSelects };

package/lib/index.js CHANGED Viewed

@@ -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 SelectionPopup_1 = require("./SelectionPopup");
+Object.defineProperty(exports, "DefaultSelects", { enumerable: true, get: function () { return SelectionPopup_1.DefaultSelects; } });

package/lib/user/AdditionalField.js CHANGED Viewed

@@ -31,10 +31,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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;
+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));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
@@ -45,20 +49,20 @@ var react_forms_1 = require("@gpa-gemstone/react-forms");
 var react_redux_1 = require("react-redux");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 function AdditionalField(props) {
-    var dispatch = react_redux_1.useDispatch();
-    var valueListItems = react_redux_1.useSelector(props.ValueListItemSlice.Data);
-    var valueListItemStatus = react_redux_1.useSelector(props.ValueListItemSlice.Status);
-    var valueListGroups = react_redux_1.useSelector(props.ValueListGroupSlice.Data);
-    var valueListGroupStatus = react_redux_1.useSelector(props.ValueListGroupSlice.Status);
-    var fields = react_redux_1.useSelector(props.AdditionalFieldSlice.Fields);
-    var values = react_redux_1.useSelector(props.AdditionalFieldSlice.Values);
-    var fieldStatus = react_redux_1.useSelector(props.AdditionalFieldSlice.FieldStatus);
-    var valueStatus = react_redux_1.useSelector(props.AdditionalFieldSlice.ValueStatus);
-    var valueParentID = react_redux_1.useSelector(props.AdditionalFieldSlice.ValueParentId);
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var valueListItems = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Data);
+    var valueListItemStatus = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Status);
+    var valueListGroups = (0, react_redux_1.useSelector)(props.ValueListGroupSlice.Data);
+    var valueListGroupStatus = (0, react_redux_1.useSelector)(props.ValueListGroupSlice.Status);
+    var fields = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.Fields);
+    var values = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.Values);
+    var fieldStatus = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.FieldStatus);
+    var valueStatus = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.ValueStatus);
+    var valueParentID = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.ValueParentId);
     var _a = React.useState('unintiated'), pageStatus = _a[0], setPageStatus = _a[1];
     var _b = React.useState([]), editValues = _b[0], setEditValues = _b[1];
-    var sortField = react_redux_1.useSelector(props.AdditionalFieldSlice.SortField);
-    var ascending = react_redux_1.useSelector(props.AdditionalFieldSlice.Ascending);
+    var sortField = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.SortField);
+    var ascending = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.Ascending);
     var _c = React.useState(props.EmptyField), newField = _c[0], setNewField = _c[1];
     var _d = React.useState(false), showWarning = _d[0], setShowWarning = _d[1];
     var _e = React.useState(false), showEdit = _e[0], setShowEdit = _e[1];
@@ -111,9 +115,9 @@ function AdditionalField(props) {
                 c.push(fields[fldIndex].FieldName);
             else if (fldIndex > -1 && v.Value !== values[eIndex].Value)
                 c.push(fields[fldIndex].FieldName);
-            if (fldIndex > -1 && fields[fldIndex].Type === 'integer' && !helper_functions_1.IsInteger(v.Value))
+            if (fldIndex > -1 && fields[fldIndex].Type === 'integer' && !(0, helper_functions_1.IsInteger)(v.Value))
                 e.push("'" + fields[fldIndex].FieldName + "' has to be a valid integer");
-            if (fldIndex > -1 && fields[fldIndex].Type === 'number' && !helper_functions_1.IsNumber(v.Value))
+            if (fldIndex > -1 && fields[fldIndex].Type === 'number' && !(0, helper_functions_1.IsNumber)(v.Value))
                 e.push("'" + fields[fldIndex].FieldName + "' has to be a valid number");
         });
         setErrorFields(e);
@@ -154,8 +158,8 @@ function AdditionalField(props) {
                             var vList = valueListItems.filter(function (i) { return i.GroupID === valueListgrpId; });
                             var valIdx = props.GetFieldValueIndex(item, editValues);
                             if (valIdx > -1)
-                                return React.createElement(ValueDisplay, { Mode: mode, Type: item.Type, ValueListItems: vList, Value: editValues[valIdx], Setter: function (val) { return setEditValues(function (d) { var u = __spreadArray([], d); u[valIdx] = val; return u; }); } });
-                            return React.createElement(ValueDisplay, { Mode: mode, Type: item.Type, ValueListItems: vList, Value: props.CreateValue(item), Setter: function (val) { return setEditValues(function (d) { var u = __spreadArray([], d); u.push(val); return u; }); } });
+                                return React.createElement(ValueDisplay, { Mode: mode, Type: item.Type, ValueListItems: vList, Value: editValues[valIdx], Setter: function (val) { return setEditValues(function (d) { var u = __spreadArray([], d, true); u[valIdx] = val; return u; }); } });
+                            return React.createElement(ValueDisplay, { Mode: mode, Type: item.Type, ValueListItems: vList, Value: props.CreateValue(item), Setter: function (val) { return setEditValues(function (d) { var u = __spreadArray([], d, true); u.push(val); return u; }); } });
                         }
                     },
                     { key: 'EditButton', label: '', headerStyle: { width: 40, paddingRight: 0, paddingLeft: 10 }, rowStyle: { width: 40, paddingRight: 0, paddingLeft: 10, paddingTop: 36 }, content: function (item) { return (mode === 'Edit' ? React.createElement("button", { className: "btn btn-sm", onClick: function () { setNewField(item); setShowEdit(true); } },
@@ -248,9 +252,9 @@ function ValueDisplay(props) {
             return React.createElement("span", null, props.Value.Value);
     }
     if (props.Type === 'number')
-        return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return helper_functions_1.IsInteger(props.Value.Value); }, Label: '', Type: 'number', Setter: props.Setter, Feedback: 'Thi Field is a numeric field.' });
+        return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return (0, helper_functions_1.IsInteger)(props.Value.Value); }, Label: '', Type: 'number', Setter: props.Setter, Feedback: 'Thi Field is a numeric field.' });
     if (props.Type === 'integer')
-        return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return helper_functions_1.IsNumber(props.Value.Value); }, Label: '', Type: 'number', Setter: props.Setter, Feedback: 'Thi Field is an integer field.' });
+        return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return (0, helper_functions_1.IsNumber)(props.Value.Value); }, Label: '', Type: 'number', Setter: props.Setter, Feedback: 'Thi Field is an integer field.' });
     else if (props.Type === 'string')
         return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return true; }, Label: '', Type: 'text', Setter: props.Setter });
     else if (props.Type === 'boolean')

package/lib/user/ByUser.js CHANGED Viewed

@@ -48,23 +48,23 @@ var defaultSearchcols = [
     { label: 'Email', key: 'Email', type: 'string', isPivotField: false },
 ];
 function ByUser(props) {
-    var dispatch = react_redux_1.useDispatch();
-    var search = react_redux_1.useSelector(props.UserSlice.SearchFilters);
-    var data = react_redux_1.useSelector(props.UserSlice.SearchResults);
-    var userStatus = react_redux_1.useSelector(props.UserSlice.Status);
-    var searchStatus = react_redux_1.useSelector(props.UserSlice.SearchStatus);
-    var sortField = react_redux_1.useSelector(props.UserSlice.SortField);
-    var ascending = react_redux_1.useSelector(props.UserSlice.Ascending);
-    var currentUserAccount = react_redux_1.useSelector(props.UserSlice.CurrentUser);
-    var adlFields = react_redux_1.useSelector(props.AdditionalFieldSlice.Fields);
-    var adlFieldStatus = react_redux_1.useSelector(props.AdditionalFieldSlice.FieldStatus);
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var search = (0, react_redux_1.useSelector)(props.UserSlice.SearchFilters);
+    var data = (0, react_redux_1.useSelector)(props.UserSlice.SearchResults);
+    var userStatus = (0, react_redux_1.useSelector)(props.UserSlice.Status);
+    var searchStatus = (0, react_redux_1.useSelector)(props.UserSlice.SearchStatus);
+    var sortField = (0, react_redux_1.useSelector)(props.UserSlice.SortField);
+    var ascending = (0, react_redux_1.useSelector)(props.UserSlice.Ascending);
+    var currentUserAccount = (0, react_redux_1.useSelector)(props.UserSlice.CurrentUser);
+    var adlFields = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.Fields);
+    var adlFieldStatus = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.FieldStatus);
     var _a = React.useState(defaultSearchcols), filterableList = _a[0], setFilterableList = _a[1];
     var _b = React.useState(false), showModal = _b[0], setShowModal = _b[1];
     var _c = React.useState([]), userError = _c[0], setUserError = _c[1];
-    var valueListItems = react_redux_1.useSelector(props.ValueListItemSlice.Data);
-    var valueListItemStatus = react_redux_1.useSelector(props.ValueListItemSlice.Status);
-    var valueListGroups = react_redux_1.useSelector(props.ValueListGroupSlice.Data);
-    var valueListGroupStatus = react_redux_1.useSelector(props.ValueListGroupSlice.Status);
+    var valueListItems = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Data);
+    var valueListItemStatus = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Status);
+    var valueListGroups = (0, react_redux_1.useSelector)(props.ValueListGroupSlice.Data);
+    var valueListGroupStatus = (0, react_redux_1.useSelector)(props.ValueListGroupSlice.Status);
     var _d = React.useState('unintiated'), pageStatus = _d[0], setPageStatus = _d[1];
     React.useEffect(function () {
         if (userStatus === 'error' || adlFieldStatus === 'error' || valueListItemStatus === 'error' || valueListGroupStatus === 'error')

package/lib/user/User.js CHANGED Viewed

@@ -29,9 +29,9 @@ var AdditionalField_1 = require("./AdditionalField");
 var react_redux_1 = require("react-redux");
 var react_forms_1 = require("@gpa-gemstone/react-forms");
 function User(props) {
-    var dispatch = react_redux_1.useDispatch();
-    var user = react_redux_1.useSelector(props.UserSlice.CurrentUser);
-    var status = react_redux_1.useSelector(props.UserSlice.Status);
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var user = (0, react_redux_1.useSelector)(props.UserSlice.CurrentUser);
+    var status = (0, react_redux_1.useSelector)(props.UserSlice.Status);
     var _a = React.useState('userInfo'), tab = _a[0], setTab = _a[1];
     var _b = React.useState(false), showWarning = _b[0], setShowWarning = _b[1];
     React.useEffect(function () {

package/lib/user/UserForm.js CHANGED Viewed

@@ -26,9 +26,9 @@ var react_forms_1 = require("@gpa-gemstone/react-forms");
 var _ = require("lodash");
 var react_redux_1 = require("react-redux");
 function UserForm(props) {
-    var dispatch = react_redux_1.useDispatch();
+    var dispatch = (0, react_redux_1.useDispatch)();
     var _a = React.useState(false), updatedAD = _a[0], setUpdatedAD = _a[1];
-    var userValidation = react_redux_1.useSelector(props.UserSlice.ADValidation);
+    var userValidation = (0, react_redux_1.useSelector)(props.UserSlice.ADValidation);
     var _b = React.useState([]), userError = _b[0], setUserError = _b[1];
     React.useEffect(function () {
         if (userValidation === 'Valid' && !props.Edit && updatedAD === false)

package/lib/user/UserInfo.js CHANGED Viewed

@@ -39,8 +39,8 @@ var react_interactive_1 = require("@gpa-gemstone/react-interactive");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 var react_redux_1 = require("react-redux");
 function UserInfo(props) {
-    var dispatch = react_redux_1.useDispatch();
-    var currentUser = react_redux_1.useSelector(props.UserSlice.CurrentUser);
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var currentUser = (0, react_redux_1.useSelector)(props.UserSlice.CurrentUser);
     var _a = React.useState(currentUser), user = _a[0], setUser = _a[1];
     var _b = React.useState([]), warnings = _b[0], setWarning = _b[1];
     var _c = React.useState('None'), hover = _c[0], setHover = _c[1];

package/lib/user/UserPermissions.js CHANGED Viewed

@@ -26,11 +26,11 @@ var _ = require("lodash");
 var react_forms_1 = require("@gpa-gemstone/react-forms");
 var react_redux_1 = require("react-redux");
 function UserPermission(props) {
-    var dispatch = react_redux_1.useDispatch();
-    var currentRoles = react_redux_1.useSelector(props.RoleSlice.Roles);
-    var allRoleStatus = react_redux_1.useSelector(props.RoleSlice.Status);
-    var availableRoles = react_redux_1.useSelector(props.RoleSlice.AvailableRoles);
-    var currentRoleStatus = react_redux_1.useSelector(props.RoleSlice.CurrentRoleStatus);
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var currentRoles = (0, react_redux_1.useSelector)(props.RoleSlice.Roles);
+    var allRoleStatus = (0, react_redux_1.useSelector)(props.RoleSlice.Status);
+    var availableRoles = (0, react_redux_1.useSelector)(props.RoleSlice.AvailableRoles);
+    var currentRoleStatus = (0, react_redux_1.useSelector)(props.RoleSlice.CurrentRoleStatus);
     var _a = React.useState([]), workingRoles = _a[0], setWorkingRoles = _a[1];
     var _b = React.useState(false), changed = _b[0], setChanged = _b[1];
     React.useEffect(function () {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/common-pages",
-  "version": "0.0.18",
+  "version": "0.0.23",
   "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.4.4"
   },
   "dependencies": {
-    "@gpa-gemstone/application-typings": "0.0.31",
-    "@gpa-gemstone/gpa-symbols": "0.0.13",
-    "@gpa-gemstone/react-forms": "1.1.13",
-    "@gpa-gemstone/react-interactive": "1.0.24",
-    "@gpa-gemstone/react-table": "1.2.5",
-    "@gpa-gemstone/helper-functions": "0.0.9",
+    "@gpa-gemstone/application-typings": "",
+    "@gpa-gemstone/gpa-symbols": "",
+    "@gpa-gemstone/helper-functions": "",
+    "@gpa-gemstone/react-forms": "",
+    "@gpa-gemstone/react-interactive": "",
+    "@gpa-gemstone/react-table": "",
+    "@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"