@gpa-gemstone/common-pages 0.0.59 → 0.0.61

package/lib/LoadingIcon.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    Show: boolean;
+    Label?: string;
+    Size?: number;
+}
+declare const LoadingIcon: React.FunctionComponent<IProps>;
+export default LoadingIcon;

package/lib/LoadingIcon.js

@@ -0,0 +1,40 @@
+"use strict";
+// ******************************************************************************************************
+//  LoadingIcon.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  01/11/2020 - Christoph Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var styled_components_1 = require("styled-components");
+var spin = styled_components_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n"], ["\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n"])));
+var Icon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1s linear infinite;\n\tborder: ", "px solid #f3f3f3;\n\tborder-Top: ", "px solid #555;\n\tborder-Radius: 50%;\n\twidth: ", "px;\n\theight: ", "px\n"], ["\n\tanimation: ", " 1s linear infinite;\n\tborder: ", "px solid #f3f3f3;\n\tborder-Top: ", "px solid #555;\n\tborder-Radius: 50%;\n\twidth: ", "px;\n\theight: ", "px\n"])), spin, function (props) { return props.size / 5; }, function (props) { return props.size / 5; }, function (props) { return props.size; }, function (props) { return props.size; });
+var LoadingIcon = function (props) {
+    var h = (props.Size === undefined ? 25 : props.Size);
+    return (React.createElement("div", null,
+        React.createElement("div", { style: { width: (props.Label === undefined ? h : undefined), margin: 'auto' }, hidden: !props.Show },
+            React.createElement(Icon, { size: h }),
+            props.Label !== undefined ? React.createElement("span", null, props.Label) : null)));
+};
+exports.default = LoadingIcon;
+var templateObject_1, templateObject_2;

package/lib/LoadingScreen.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface IProps {
+    Show: boolean;
+}
+declare const LoadingScreen: React.FunctionComponent<IProps>;
+export default LoadingScreen;

package/lib/LoadingScreen.js

@@ -0,0 +1,41 @@
+"use strict";
+// ******************************************************************************************************
+//  LoadingScreen.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  01/11/2020 - Christoph Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var LoadingIcon_1 = require("./LoadingIcon");
+var LoadingScreen = function (props) {
+    var x = window.innerHeight / 2 - 20;
+    return (props.Show ? React.createElement("div", { style: {
+            width: '100%',
+            height: '100%',
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            opacity: 0.5,
+            backgroundColor: '#000000',
+            zIndex: 9980,
+        } },
+        React.createElement("div", { style: { height: '40px', width: '40px', margin: 'auto', marginTop: x } },
+            React.createElement(LoadingIcon_1.default, { Show: true, Size: 40 }))) : null);
+};
+exports.default = LoadingScreen;

package/lib/Modal.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+interface IProps {
+    Title: string;
+    ShowX?: boolean;
+    CallBack: ((confirmed: boolean, isButton?: boolean) => void);
+    Show: boolean;
+    Size?: ('lg' | 'sm' | 'xlg');
+    ShowCancel?: boolean;
+    DisableConfirm?: boolean;
+    DisableCancel?: boolean;
+    CancelText?: string;
+    ConfirmText?: string;
+    ConfirmBtnClass?: string;
+    CancelBtnClass?: string;
+    ConfirmShowToolTip?: boolean;
+    CancelShowToolTip?: boolean;
+    ConfirmToolTipContent?: React.ReactNode;
+    CancelToolTipContent?: React.ReactNode;
+}
+declare const Modal: React.FunctionComponent<IProps>;
+export default Modal;

package/lib/Modal.js

@@ -0,0 +1,79 @@
+"use strict";
+// ******************************************************************************************************
+//  Modal.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  12/29/2020 - Christoph Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var ToolTip_1 = require("./ToolTip");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+// Props Description:
+// Title => Title of The Modal
+// ShowX => show or hide the X button (default true)
+// CallBack => Function to be called when closing the Modal either through Cancel (confirmed=false) or Accept Button (confirmed=true)
+// Show => Whether to show the modal
+// Size => Size of the modal
+// ShowCancel => Whether to show the cancel button
+// DisableConfirm => Disables the Confirm button
+// CancelText => Text on Cancel Button
+// Confirm text => Text on Confirm button
+// ConfirmBtnClass => Class of the Confirm Button
+// CancelBtnClass =>> Class of the Cancel Button
+var Modal = function (props) {
+    var _a = React.useState('none'), hover = _a[0], setHover = _a[1];
+    var _b = React.useState(''), guid = _b[0], setGuid = _b[1];
+    React.useEffect(function () {
+        setGuid(helper_functions_1.CreateGuid());
+    }, []);
+    var confirmBtn = (props.ConfirmText === undefined ? 'Save' : props.ConfirmText);
+    var cxnBtn = (props.CancelText === undefined ? 'Cancel' : props.CancelText);
+    var cxnbtnCls = 'btn ' + (props.CancelBtnClass === undefined ? 'btn-danger' : props.CancelBtnClass);
+    var confirmbtnCls = 'btn ' + (props.ConfirmBtnClass === undefined ? 'btn-primary' : props.ConfirmBtnClass);
+    var showConfirmToolTip = (props.ConfirmShowToolTip !== undefined && props.ConfirmShowToolTip) && hover === 'confirm';
+    var showCxnToolTip = (props.CancelShowToolTip !== undefined && props.CancelShowToolTip) && hover === 'cancel';
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "modal" + (props.Show ? " show" : ''), style: props.Show ? { display: 'block', zIndex: 9990 } : {} },
+            React.createElement("div", { className: "modal-dialog" + (props.Size === undefined ? '' : props.Size === 'xlg' ? '' : (" modal-" + props.Size)), style: props.Size === 'xlg' ? { maxWidth: window.innerWidth - 100 } : {} },
+                React.createElement("div", { className: "modal-content" },
+                    React.createElement("div", { className: "modal-header" },
+                        React.createElement("h4", { className: "modal-title" }, props.Title),
+                        props.ShowX ? React.createElement("button", { type: "button", className: "close", onClick: function () { return props.CallBack(false, false); } }, "\u00D7") : null),
+                    React.createElement("div", { className: "modal-body" }, props.Show ? props.children : null),
+                    React.createElement("div", { className: "modal-footer" },
+                        React.createElement("button", { type: "button", className: confirmbtnCls + (!(props.DisableConfirm === undefined || !props.DisableConfirm) ? ' disabled' : ''), "data-tooltip": guid + '-confirm', onClick: function () { if (!(props.DisableConfirm === undefined || !props.DisableConfirm))
+                                return; props.CallBack(true, true); }, onMouseEnter: function () { return setHover('confirm'); }, onMouseLeave: function () { return setHover('none'); } }, confirmBtn),
+                        props.ShowCancel === undefined || props.ShowCancel ?
+                            React.createElement("button", { type: "button", className: cxnbtnCls + (!(props.DisableCancel === undefined || !props.DisableCancel) ? ' disabled' : ''), "data-tooltip": guid + '-cancel', onClick: function () { if (!(props.DisableCancel === undefined || !props.DisableCancel))
+                                    return; props.CallBack(false, true); }, onMouseEnter: function () { return setHover('cancel'); }, onMouseLeave: function () { return setHover('none'); } }, cxnBtn)
+                            : null)))),
+        React.createElement(ToolTip_1.default, { Show: showConfirmToolTip, Position: 'top', Theme: 'dark', Target: guid + '-confirm', Zindex: 9999 }, props.ConfirmToolTipContent),
+        React.createElement(ToolTip_1.default, { Show: showCxnToolTip, Position: 'top', Theme: 'dark', Target: guid + '-cancel', Zindex: 9999 }, props.CancelToolTipContent),
+        props.Show ? React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                opacity: 0.5,
+                backgroundColor: '#ffffff',
+                zIndex: 9980,
+            } }) : null));
+};
+exports.default = Modal;

package/lib/ToolTip.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    Show: boolean;
+    Position?: ('top' | 'bottom' | 'left' | 'right');
+    Theme?: ('dark' | 'light');
+    Target?: string;
+    Zindex?: number;
+}
+declare const ToolTip: React.FunctionComponent<IProps>;
+export default ToolTip;

package/lib/ToolTip.js

@@ -0,0 +1,87 @@
+"use strict";
+// ******************************************************************************************************
+//  ToolTip.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  01/14/2021 - Christoph Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var styled_components_1 = require("styled-components");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var WrapperDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px 21px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    color: ", ";\n    background: ", ";\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n  ", "\n  ", "\n  ", "\n  ", ""], ["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px 21px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    color: ", ";\n    background: ", ";\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n  ",
+    "\n  ",
+    "\n  ",
+    "\n  ",
+    ""
+    // The other element needs to be labeld as data-tooltip that will only be used for positioning
+])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "0.9" : "0"; }, function (props) { return (props.Theme === 'dark' ? "#fff" : '#222'); }, function (props) { return (props.Theme === 'dark' ? "#222" : '#fff'); }, function (props) { return props.Top + "px"; }, function (props) { return props.Left + "px"; }, function (props) { return (props.Location === 'top' ? "\n    &::after {\n     border-left: 8px solid transparent;\n     border-right: 8px solid transparent;\n     border-top: 8px solid " + (props.Theme === 'dark' ? "#222" : '#fff') + ";\n     left: 50%;\n     bottom: -6px;\n     margin-left: -8px;\n     content: \"\";\n     width: 0px;\n     height: 0px;\n     position: absolute\n    }\n  " : ''); }, function (props) { return (props.Location === 'bottom' ? "\n    &::before {\n     border-left: 8px solid transparent;\n     border-right: 8px solid transparent;\n     border-bottom: 8px solid " + (props.Theme === 'dark' ? "#222" : '#fff') + ";\n     left: 50%;\n     top: -6px;\n     margin-left: -8px;\n     content: \"\";\n     width: 0px;\n     height: 0px;\n     position: absolute\n    }\n  " : ''); }, function (props) { return (props.Location === 'left' ? "\n    &::before {\n     border-top: 8px solid transparent;\n     border-bottom: 8px solid transparent;\n     border-left: 8px solid " + (props.Theme === 'dark' ? "#222" : '#fff') + ";\n     top: 50%;\n     left: 100%;\n     margin-top: -8px;\n     content: \"\";\n     width: 0px;\n     height: 0px;\n     position: absolute\n    }\n  " : ''); }, function (props) { return (props.Location === 'right' ? "\n    &::before {\n     border-top: 8px solid transparent;\n     border-bottom: 8px solid transparent;\n     border-right: 8px solid " + (props.Theme === 'dark' ? "#222" : '#fff') + ";\n     top: 50%;\n     left: -6px;\n     margin-top: -8px;\n     content: \"\";\n     width: 0px;\n     height: 0px;\n     position: absolute\n    }\n  " : ''); });
+// The other element needs to be labeld as data-tooltip that will only be used for positioning
+var ToolTip = function (props) {
+    var _a = React.useState(0), top = _a[0], setTop = _a[1];
+    var _b = React.useState(0), left = _b[0], setLeft = _b[1];
+    var _c = React.useState(""), guid = _c[0], setGuid = _c[1];
+    React.useEffect(function () {
+        setGuid(helper_functions_1.CreateGuid());
+    }, []);
+    React.useLayoutEffect(function () {
+        var _a = UpdatePosition(), t = _a[0], l = _a[1];
+        if (t !== top)
+            setTop(t);
+        if (l !== left)
+            setLeft(l);
+    });
+    var zIndex = (props.Zindex === undefined ? 2000 : props.Zindex);
+    function UpdatePosition() {
+        var target = document.querySelectorAll("[data-tooltip" + (props.Target === undefined ? '' : "=\"" + props.Target + "\"") + "]");
+        if (target.length === 0)
+            return [-999, -999];
+        var targetLocation = helper_functions_1.GetNodeSize(target[0]);
+        var toolTip = document.getElementById(guid);
+        if (toolTip === null)
+            return [-999, -999];
+        var tipLocation = helper_functions_1.GetNodeSize(toolTip);
+        var offset = 5;
+        var result = [0, 0];
+        if (props.Position === 'left') {
+            result[0] = targetLocation.top + 0.5 * targetLocation.height - 0.5 * tipLocation.height;
+            result[1] = targetLocation.left - tipLocation.width - offset;
+        }
+        else if (props.Position === 'right') {
+            result[0] = targetLocation.top + 0.5 * targetLocation.height - 0.5 * tipLocation.height;
+            result[1] = targetLocation.left + targetLocation.width + offset;
+        }
+        else if (props.Position === 'top') {
+            result[0] = targetLocation.top - tipLocation.height - offset;
+            result[1] = targetLocation.left + 0.5 * targetLocation.width - 0.5 * tipLocation.width;
+        }
+        else if (props.Position === 'bottom') {
+            result[0] = targetLocation.top + targetLocation.height + offset;
+            result[1] = targetLocation.left + 0.5 * targetLocation.width - 0.5 * tipLocation.width;
+        }
+        return result;
+    }
+    var theme = (props.Theme === undefined ? 'dark' : props.Theme);
+    return (React.createElement(WrapperDiv, { Show: props.Show, Theme: theme, Top: top, Left: left, id: guid, Location: props.Position === undefined ? 'top' : props.Position, Zindex: zIndex }, props.children));
+};
+exports.default = ToolTip;
+var templateObject_1;

package/lib/ValueList/Setting.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/// <reference types="jquery" />
+import { Search } from '@gpa-gemstone/react-interactive';
+interface S {
+    Value: string;
+    Name: string;
+    DefaultValue: string;
+}
+interface IProps<T extends S> {
+    getNewSetting: () => T;
+    searchSetting: (search: Search.IFilter<T>[], ascending: boolean, sortField: string) => JQuery.jqXHR<string>;
+    addSetting: (setting: T) => JQuery.jqXHR;
+    updateSetting: (setting: T) => JQuery.jqXHR;
+    deleteSetting: (setting: T) => JQuery.jqXHR;
+}
+declare function Setting<T extends S>(props: IProps<T>): JSX.Element;
+export default Setting;

package/lib/ValueList/Setting.js

@@ -0,0 +1,112 @@
+"use strict";
+// ******************************************************************************************************
+//  Setting.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  04/28/2021 - C. Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var react_table_1 = require("@gpa-gemstone/react-table");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var react_interactive_1 = require("@gpa-gemstone/react-interactive");
+function Setting(props) {
+    var _a = React.useState([]), search = _a[0], setSearch = _a[1];
+    var _b = React.useState('Idle'), searchState = _b[0], setSearchState = _b[1];
+    var _c = React.useState([]), data = _c[0], setData = _c[1];
+    var _d = React.useState('Name'), sortField = _d[0], setSortField = _d[1];
+    var _e = React.useState(true), ascending = _e[0], setAscending = _e[1];
+    var _f = React.useState(props.getNewSetting()), editnewSetting = _f[0], setEditNewSetting = _f[1];
+    var _g = React.useState('New'), editNew = _g[0], setEditNew = _g[1];
+    var _h = React.useState(false), showModal = _h[0], setShowModal = _h[1];
+    var _j = React.useState(false), showWarning = _j[0], setShowWarning = _j[1];
+    var _k = React.useState(false), hasChanged = _k[0], setHasChanged = _k[1];
+    var _l = React.useState(0), triggerReload = _l[0], setTriggerReload = _l[1];
+    React.useEffect(function () {
+        setEditNewSetting(props.getNewSetting());
+    }, []);
+    React.useEffect(function () {
+        setSearchState('Loading');
+        var handle = props.searchSetting(search, ascending, sortField);
+        handle.done(function (d) { setData(JSON.parse(d)); setSearchState('Idle'); });
+        handle.fail(function (msg) { return setSearchState('Error'); });
+        return function () { if (handle != null && handle.abort != null)
+            handle.abort(); };
+    }, [search, ascending, sortField, triggerReload]);
+    React.useEffect(function () { setHasChanged(false); }, [showModal]);
+    function isValidSetting() {
+        return editnewSetting != null && editnewSetting.Name != null && editnewSetting.Name.length > 0
+            && editnewSetting.Value != null && editnewSetting.Value.length > 0;
+    }
+    var searchFields = [
+        { key: 'Name', label: 'Name', type: 'string' },
+        { key: 'DefaultValue', label: 'Default Value', type: 'string' },
+        { key: 'Value', label: 'Value', type: 'string' }
+    ];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { width: '100%', height: '100%' } },
+            React.createElement(react_interactive_1.SearchBar, { CollumnList: searchFields, SetFilter: function (flds) { return setSearch(flds); }, Direction: 'left', defaultCollumn: { key: 'Name', label: 'Name', type: 'string' }, Width: '50%', Label: 'Search', ShowLoading: searchState === 'Loading', ResultNote: searchState === 'Error' ? 'Could not complete Search' : 'Found ' + data.length + ' Settings', GetEnum: function (setOptions, field) {
+                    return function () {
+                        // do nothing.
+                    };
+                } },
+                React.createElement("li", { className: "nav-item", style: { width: '15%', paddingRight: 10 } },
+                    React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
+                        React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "Actions:"),
+                        React.createElement("form", null,
+                            React.createElement("button", { className: "btn btn-primary", onClick: function (event) { setEditNewSetting(props.getNewSetting()); setEditNew('New'); setShowModal(true); event.preventDefault(); } }, "Add Setting"))))),
+            React.createElement("div", { style: { width: '100%', height: 'calc( 100% - 136px)' } },
+                React.createElement(react_table_1.default, { cols: [
+                        { key: 'Name', label: 'Setting Name', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
+                        { key: 'Value', label: 'Current Value', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
+                        { key: 'DefaultValue', label: 'Default Value', headerStyle: { width: '20%' }, rowStyle: { width: '20%' } },
+                        { key: null, label: '', headerStyle: { width: 17, padding: 0 }, rowStyle: { width: 0, padding: 0 } },
+                    ], tableClass: "table table-hover", data: data, sortField: sortField, ascending: ascending, onSort: function (d) {
+                        if (d.col === sortField)
+                            setAscending(!ascending);
+                        else {
+                            setAscending(true);
+                            setSortField(d.col);
+                        }
+                    }, onClick: function (item) { setEditNewSetting(item.row); setShowModal(true); setEditNew('Edit'); }, theadStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, tbodyStyle: { display: 'block', overflowY: 'scroll', maxHeight: window.innerHeight - 300, width: '100%' }, rowStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, selected: function (item) { return false; } }))),
+        React.createElement(react_interactive_1.Modal, { Title: editNew === 'Edit' ? editnewSetting.Name + ' - Setting' : 'Add New Setting', Show: showModal, ShowX: true, Size: 'lg', ShowCancel: editNew === 'Edit', ConfirmText: 'Save', CancelText: 'Delete', CallBack: function (conf, isBtn) {
+                if (conf && editNew === 'New')
+                    props.addSetting(editnewSetting).then(function (d) { return setTriggerReload(function (x) { return x + 1; }); });
+                if (conf && editNew === 'Edit')
+                    props.updateSetting(editnewSetting).then(function (d) { return setTriggerReload(function (x) { return x + 1; }); });
+                if (!conf && isBtn)
+                    setShowWarning(true);
+                setShowModal(false);
+            }, DisableConfirm: (editNew === 'Edit' && !hasChanged) || !isValidSetting(), ConfirmShowToolTip: !isValidSetting(), ConfirmToolTipContent: [
+                editnewSetting.Name == null || editnewSetting.Name.length === 0 ? React.createElement("p", { key: 1 },
+                    gpa_symbols_1.CrossMark,
+                    " A Name is required.") : null,
+                editnewSetting.Value == null || editnewSetting.Value.length === 0 ? React.createElement("p", { key: 2 },
+                    gpa_symbols_1.CrossMark,
+                    " A Value is required. ") : null,
+            ] },
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col" },
+                    React.createElement(react_forms_1.Input, { Record: editnewSetting, Field: 'Name', Label: 'Setting Name', Feedback: 'A unique Name is required.', Valid: function (field) { return editnewSetting.Name != null && editnewSetting.Name.length > 0; }, Setter: function (record) { setEditNewSetting(record); setHasChanged(true); } }),
+                    React.createElement(react_forms_1.Input, { Record: editnewSetting, Field: 'Value', Label: 'Value', Feedback: 'Value is required.', Valid: function (field) { return editnewSetting.Value != null && editnewSetting.Value.length > 0; }, Setter: function (record) { setEditNewSetting(record); setHasChanged(true); } }),
+                    React.createElement(react_forms_1.Input, { Record: editnewSetting, Field: 'DefaultValue', Label: 'Default Value', Valid: function (field) { return true; }, Setter: function (record) { setEditNewSetting(record); setHasChanged(true); } })))),
+        React.createElement(react_interactive_1.Warning, { Title: 'Delete Setting', Message: 'This will Delete this Setting from the System. this can have unintended consequences and cause the System to crash are you Sure you want to continue?.', Show: showWarning, CallBack: function (conf) { if (conf)
+                props.deleteSetting(editnewSetting).then(function (d) { return setTriggerReload(function (x) { return x + 1; }); }); setShowWarning(false); } })));
+}
+exports.default = Setting;

package/lib/ValueList/ValueListForm.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/// <reference types="jquery" />
+import { Search } from '@gpa-gemstone/react-interactive';
+interface S {
+    Value: string;
+    Name: string;
+    DefaultValue: string;
+}
+interface IProps<T extends S> {
+    getNewSetting: () => T;
+    searchSetting: (search: Search.IFilter<T>[], ascending: boolean, sortField: string) => JQuery.jqXHR<string>;
+    addSetting: (setting: T) => JQuery.jqXHR;
+    updateSetting: (setting: T) => JQuery.jqXHR;
+    deleteSetting: (setting: T) => JQuery.jqXHR;
+}
+declare function Setting<T extends S>(props: IProps<T>): JSX.Element;
+export default Setting;

package/lib/ValueList/ValueListForm.js

@@ -0,0 +1,112 @@
+"use strict";
+// ******************************************************************************************************
+//  Setting.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  04/28/2021 - C. Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var react_table_1 = require("@gpa-gemstone/react-table");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var react_interactive_1 = require("@gpa-gemstone/react-interactive");
+function Setting(props) {
+    var _a = React.useState([]), search = _a[0], setSearch = _a[1];
+    var _b = React.useState('Idle'), searchState = _b[0], setSearchState = _b[1];
+    var _c = React.useState([]), data = _c[0], setData = _c[1];
+    var _d = React.useState('Name'), sortField = _d[0], setSortField = _d[1];
+    var _e = React.useState(true), ascending = _e[0], setAscending = _e[1];
+    var _f = React.useState(props.getNewSetting()), editnewSetting = _f[0], setEditNewSetting = _f[1];
+    var _g = React.useState('New'), editNew = _g[0], setEditNew = _g[1];
+    var _h = React.useState(false), showModal = _h[0], setShowModal = _h[1];
+    var _j = React.useState(false), showWarning = _j[0], setShowWarning = _j[1];
+    var _k = React.useState(false), hasChanged = _k[0], setHasChanged = _k[1];
+    var _l = React.useState(0), triggerReload = _l[0], setTriggerReload = _l[1];
+    React.useEffect(function () {
+        setEditNewSetting(props.getNewSetting());
+    }, []);
+    React.useEffect(function () {
+        setSearchState('Loading');
+        var handle = props.searchSetting(search, ascending, sortField);
+        handle.done(function (d) { setData(JSON.parse(d)); setSearchState('Idle'); });
+        handle.fail(function (msg) { return setSearchState('Error'); });
+        return function () { if (handle != null && handle.abort != null)
+            handle.abort(); };
+    }, [search, ascending, sortField, triggerReload]);
+    React.useEffect(function () { setHasChanged(false); }, [showModal]);
+    function isValidSetting() {
+        return editnewSetting != null && editnewSetting.Name != null && editnewSetting.Name.length > 0
+            && editnewSetting.Value != null && editnewSetting.Value.length > 0;
+    }
+    var searchFields = [
+        { key: 'Name', label: 'Name', type: 'string' },
+        { key: 'DefaultValue', label: 'Default Value', type: 'string' },
+        { key: 'Value', label: 'Value', type: 'string' }
+    ];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { width: '100%', height: '100%' } },
+            React.createElement(react_interactive_1.SearchBar, { CollumnList: searchFields, SetFilter: function (flds) { return setSearch(flds); }, Direction: 'left', defaultCollumn: { key: 'Name', label: 'Name', type: 'string' }, Width: '50%', Label: 'Search', ShowLoading: searchState === 'Loading', ResultNote: searchState === 'Error' ? 'Could not complete Search' : 'Found ' + data.length + ' Settings', GetEnum: function (setOptions, field) {
+                    return function () {
+                        // do nothing.
+                    };
+                } },
+                React.createElement("li", { className: "nav-item", style: { width: '15%', paddingRight: 10 } },
+                    React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
+                        React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "Actions:"),
+                        React.createElement("form", null,
+                            React.createElement("button", { className: "btn btn-primary", onClick: function (event) { setEditNewSetting(props.getNewSetting()); setEditNew('New'); setShowModal(true); event.preventDefault(); } }, "Add Setting"))))),
+            React.createElement("div", { style: { width: '100%', height: 'calc( 100% - 136px)' } },
+                React.createElement(react_table_1.default, { cols: [
+                        { key: 'Name', label: 'Setting Name', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
+                        { key: 'Value', label: 'Current Value', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
+                        { key: 'DefaultValue', label: 'Default Value', headerStyle: { width: '20%' }, rowStyle: { width: '20%' } },
+                        { key: null, label: '', headerStyle: { width: 17, padding: 0 }, rowStyle: { width: 0, padding: 0 } },
+                    ], tableClass: "table table-hover", data: data, sortField: sortField, ascending: ascending, onSort: function (d) {
+                        if (d.col === sortField)
+                            setAscending(!ascending);
+                        else {
+                            setAscending(true);
+                            setSortField(d.col);
+                        }
+                    }, onClick: function (item) { setEditNewSetting(item.row); setShowModal(true); setEditNew('Edit'); }, theadStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, tbodyStyle: { display: 'block', overflowY: 'scroll', maxHeight: window.innerHeight - 300, width: '100%' }, rowStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, selected: function (item) { return false; } }))),
+        React.createElement(react_interactive_1.Modal, { Title: editNew === 'Edit' ? editnewSetting.Name + ' - Setting' : 'Add New Setting', Show: showModal, ShowX: true, Size: 'lg', ShowCancel: editNew === 'Edit', ConfirmText: 'Save', CancelText: 'Delete', CallBack: function (conf, isBtn) {
+                if (conf && editNew === 'New')
+                    props.addSetting(editnewSetting).then(function (d) { return setTriggerReload(function (x) { return x + 1; }); });
+                if (conf && editNew === 'Edit')
+                    props.updateSetting(editnewSetting).then(function (d) { return setTriggerReload(function (x) { return x + 1; }); });
+                if (!conf && isBtn)
+                    setShowWarning(true);
+                setShowModal(false);
+            }, DisableConfirm: (editNew === 'Edit' && !hasChanged) || !isValidSetting(), ConfirmShowToolTip: !isValidSetting(), ConfirmToolTipContent: [
+                editnewSetting.Name == null || editnewSetting.Name.length === 0 ? React.createElement("p", { key: 1 },
+                    gpa_symbols_1.CrossMark,
+                    " A Name is required.") : null,
+                editnewSetting.Value == null || editnewSetting.Value.length === 0 ? React.createElement("p", { key: 2 },
+                    gpa_symbols_1.CrossMark,
+                    " A Value is required. ") : null,
+            ] },
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col" },
+                    React.createElement(react_forms_1.Input, { Record: editnewSetting, Field: 'Name', Label: 'Setting Name', Feedback: 'A unique Name is required.', Valid: function (field) { return editnewSetting.Name != null && editnewSetting.Name.length > 0; }, Setter: function (record) { setEditNewSetting(record); setHasChanged(true); } }),
+                    React.createElement(react_forms_1.Input, { Record: editnewSetting, Field: 'Value', Label: 'Value', Feedback: 'Value is required.', Valid: function (field) { return editnewSetting.Value != null && editnewSetting.Value.length > 0; }, Setter: function (record) { setEditNewSetting(record); setHasChanged(true); } }),
+                    React.createElement(react_forms_1.Input, { Record: editnewSetting, Field: 'DefaultValue', Label: 'Default Value', Valid: function (field) { return true; }, Setter: function (record) { setEditNewSetting(record); setHasChanged(true); } })))),
+        React.createElement(react_interactive_1.Warning, { Title: 'Delete Setting', Message: 'This will Delete this Setting from the System. this can have unintended consequences and cause the System to crash are you Sure you want to continue?.', Show: showWarning, CallBack: function (conf) { if (conf)
+                props.deleteSetting(editnewSetting).then(function (d) { return setTriggerReload(function (x) { return x + 1; }); }); setShowWarning(false); } })));
+}
+exports.default = Setting;

package/lib/Warning.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    Title: string;
+    CallBack: ((confirmed: boolean) => void);
+    Show: boolean;
+    Message: string;
+}
+declare const Warning: React.FunctionComponent<IProps>;
+export default Warning;

package/lib/Warning.js

@@ -0,0 +1,38 @@
+"use strict";
+// ******************************************************************************************************
+//  Warning.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  12/29/2020 - Christoph Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var Modal_1 = require("./Modal");
+// Usage:
+// <Warning Title='This is a Warning' Message={'Are you sure you want to Continue?'} Callback={(canceled) => setShow(false)} Show={show} />
+//
+// Props Description:
+// Title => Title of The Modal
+// CallBack => Function to be called when closing the Modal either through Cancel (confirmed=false) or Confirm Button (confirmed=true)
+// Show => Whether to show the modal
+// Message => The message shown by the Modal
+var Warning = function (props) {
+    return (React.createElement(Modal_1.default, { Title: props.Title, Show: props.Show, CancelBtnClass: 'btn-danger', CancelText: 'Cancel', ConfirmBtnClass: 'btn-success', ConfirmText: 'Confirm', ShowX: false, ShowCancel: true, Size: 'sm', CallBack: function (confirmed) { return props.CallBack(confirmed); } },
+        React.createElement("p", null, props.Message)));
+};
+exports.default = Warning;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/common-pages",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "description": "Common UI pages for GPA products",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -49,10 +49,10 @@
   "dependencies": {
     "@gpa-gemstone/application-typings": "0.0.53",
     "@gpa-gemstone/gpa-symbols": "0.0.23",
-    "@gpa-gemstone/helper-functions": "0.0.17",
-    "@gpa-gemstone/react-forms": "1.1.33",
-    "@gpa-gemstone/react-interactive": "1.0.74",
-    "@gpa-gemstone/react-table": "1.2.19",
+    "@gpa-gemstone/helper-functions": "0.0.18",
+    "@gpa-gemstone/react-forms": "1.1.35",
+    "@gpa-gemstone/react-interactive": "1.0.76",
+    "@gpa-gemstone/react-table": "1.2.20",
     "@reduxjs/toolkit": "1.8.3",
     "crypto-js": "4.0.0",
     "moment": "^2.29.4",