@gpa-gemstone/common-pages 0.0.103 → 0.0.105

package/lib/SelectionPopup.js

@@ -1,90 +1,93 @@
-"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, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
-            " ",
-            props.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, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
-            " ",
-            props.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, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
-            " ",
-            props.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, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
-            " ",
-            props.children,
-            " ");
-    }
-    DefaultSelects.AssetGroup = AssetGroup;
-    /** This Implements a standard User Selection Modal */
-    function User(props) {
-        return React.createElement(StandardSelectPopup_1.default, __assign({}, props, { Searchbar: function (children) { return React.createElement(SearchBar_1.DefaultSearch.User, { Slice: props.Slice, GetAddlFields: props.GetAddlFields, GetEnum: props.GetEnum, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
-            " ",
-            props.children,
-            " ");
-    }
-    DefaultSelects.User = User;
-    /** This Implements a standard Customer Selection Modal */
-    function Customer(props) {
-        return React.createElement(StandardSelectPopup_1.default, __assign({}, props, { Searchbar: function (children) { return React.createElement(SearchBar_1.DefaultSearch.Customer, { Slice: props.Slice, GetAddlFields: props.GetAddlFields, GetEnum: props.GetEnum, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
-            " ",
-            props.children,
-            " ");
-    }
-    DefaultSelects.Customer = Customer;
-})(DefaultSelects = exports.DefaultSelects || (exports.DefaultSelects = {}));
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultSelects = void 0;
+var React = require("react");
+var StandardSelectPopup_1 = __importDefault(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, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
+            " ",
+            props.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, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
+            " ",
+            props.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, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
+            " ",
+            props.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, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
+            " ",
+            props.children,
+            " ");
+    }
+    DefaultSelects.AssetGroup = AssetGroup;
+    /** This Implements a standard User Selection Modal */
+    function User(props) {
+        return React.createElement(StandardSelectPopup_1.default, __assign({}, props, { Searchbar: function (children) { return React.createElement(SearchBar_1.DefaultSearch.User, { Slice: props.Slice, GetAddlFields: props.GetAddlFields, GetEnum: props.GetEnum, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
+            " ",
+            props.children,
+            " ");
+    }
+    DefaultSelects.User = User;
+    /** This Implements a standard Customer Selection Modal */
+    function Customer(props) {
+        return React.createElement(StandardSelectPopup_1.default, __assign({}, props, { Searchbar: function (children) { return React.createElement(SearchBar_1.DefaultSearch.Customer, { Slice: props.Slice, GetAddlFields: props.GetAddlFields, GetEnum: props.GetEnum, StorageID: props.StorageID, AddlFilters: props.AddlFilters }, children); } }),
+            " ",
+            props.children,
+            " ");
+    }
+    DefaultSelects.Customer = Customer;
+})(DefaultSelects || (exports.DefaultSelects = DefaultSelects = {}));

package/lib/Setting.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { ISearchableSlice } from './SliceInterfaces';
-import { SystemCenter } from '@gpa-gemstone/application-typings';
-interface IProps {
-    SettingsSlice: ISearchableSlice<SystemCenter.Types.Setting>;
-}
-declare function Setting(props: IProps): JSX.Element;
-export default Setting;
+import * as React from 'react';
+import { ISearchableSlice } from './SliceInterfaces';
+import { SystemCenter } from '@gpa-gemstone/application-typings';
+interface IProps {
+    SettingsSlice: ISearchableSlice<SystemCenter.Types.Setting>;
+}
+declare function Setting(props: IProps): React.JSX.Element;
+export default Setting;

package/lib/Setting.js

@@ -1,125 +1,151 @@
-"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");
-var react_redux_1 = require("react-redux");
-function Setting(props) {
-    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: '' };
-    var _c = React.useState(emptySetting), editnewSetting = _c[0], setEditNewSetting = _c[1];
-    var _d = React.useState('New'), editNew = _d[0], setEditNew = _d[1];
-    var _e = React.useState(false), showModal = _e[0], setShowModal = _e[1];
-    var _f = React.useState(false), showWarning = _f[0], setShowWarning = _f[1];
-    var _g = React.useState(false), hasChanged = _g[0], setHasChanged = _g[1];
-    var _h = React.useState([]), errors = _h[0], setErrors = _h[1];
-    React.useEffect(function () {
-        if (status === 'unintiated' || status === 'changed')
-            dispatch(props.SettingsSlice.Fetch());
-    }, [dispatch, status]);
-    React.useEffect(function () {
-        if (searchStatus === 'unintiated' || status === 'changed')
-            dispatch(props.SettingsSlice.DBSearch({ filter: search, sortField: sortField, ascending: ascending }));
-    }, [dispatch, searchStatus, ascending, sortField, search]);
-    React.useEffect(function () { setHasChanged(false); }, [showModal]);
-    React.useEffect(function () {
-        var e = [];
-        if (editnewSetting.Name == null || editnewSetting.Name.length === 0)
-            e.push('A Name is required');
-        if (editnewSetting.Name != null && editnewSetting.Name.length > 0 && allSettings.findIndex(function (s) { return s.Name.toLowerCase() === editnewSetting.Name.toLowerCase() && s.ID !== editnewSetting.ID; }) > -1)
-            e.push('A Settign with this Name already exists.');
-        if (editnewSetting.Value == null || editnewSetting.Value.length === 0)
-            e.push('A Value is required');
-        setErrors(e);
-    }, [editnewSetting]);
-    var searchFields = [
-        { key: 'Name', label: 'Name', type: 'string', isPivotField: false },
-        { key: 'DefaultValue', label: 'Default Value', type: 'string', isPivotField: false },
-        { key: 'Value', label: 'Value', type: 'string', isPivotField: false }
-    ];
-    if (status === 'error')
-        return React.createElement("div", { style: { width: '100%', height: '100%' } },
-            React.createElement(react_interactive_1.ServerErrorIcon, { Show: true, Label: 'A Server Error Occured. Please Reload the Application' }));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(react_interactive_1.LoadingScreen, { Show: status === 'loading' }),
-        React.createElement("div", { style: { width: '100%', height: '100%' } },
-            React.createElement(react_interactive_1.SearchBar, { CollumnList: searchFields, SetFilter: function (flds) { return dispatch(props.SettingsSlice.DBSearch({ filter: flds, sortField: sortField, ascending: ascending })); }, Direction: 'left', defaultCollumn: { key: 'Name', label: 'Name', type: 'string', isPivotField: false }, Width: '50%', Label: 'Search', ShowLoading: searchStatus === 'loading', ResultNote: searchStatus === 'error' ? 'Could not complete Search' : 'Found ' + data.length + ' Settings', GetEnum: function () {
-                    return function () { };
-                } },
-                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(emptySetting); 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', field: 'Name', label: 'Setting Name', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
-                        { key: 'Value', field: 'Value', label: 'Current Value', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
-                        { key: 'DefaultValue', field: 'DefaultValue', label: 'Default Value', headerStyle: { width: '20%' }, rowStyle: { width: '20%' } },
-                        { key: 'scroll', label: '', headerStyle: { width: 17, padding: 0 }, rowStyle: { width: 0, padding: 0 } },
-                    ], tableClass: "table table-hover", data: data, sortKey: sortField, ascending: ascending, onSort: function (d) {
-                        if (d.colKey === 'scroll' || d.colField === undefined)
-                            return;
-                        if (d.colField === sortField)
-                            setAscending(!ascending);
-                        else {
-                            setAscending(true);
-                            setSortField(d.colField);
-                        }
-                        if (d.colField === sortField)
-                            dispatch(props.SettingsSlice.DBSearch({ filter: search, sortField: sortField, ascending: true }));
-                        else
-                            dispatch(props.SettingsSlice.DBSearch({ filter: search, sortField: d.colField, ascending: ascending }));
-                    }, 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 () { 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')
-                    dispatch(props.SettingsSlice.DBAction({ verb: 'POST', record: editnewSetting }));
-                if (conf && editNew === 'Edit')
-                    dispatch(props.SettingsSlice.DBAction({ verb: 'PATCH', record: editnewSetting }));
-                if (!conf && isBtn)
-                    setShowWarning(true);
-                setShowModal(false);
-            }, DisableConfirm: (editNew === 'Edit' && !hasChanged) || errors.length > 0, ConfirmShowToolTip: errors.length > 0, ConfirmToolTipContent: errors.map(function (t, i) { return React.createElement("p", { key: i },
-                gpa_symbols_1.CrossMark,
-                " ",
-                t,
-                " "); }) },
-            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 && allSettings.findIndex(function (s) { return s.Name === editnewSetting.Name && s.ID !== editnewSetting.ID; }) < 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)
-                dispatch(props.SettingsSlice.DBAction({ verb: 'DELETE', record: editnewSetting })); setShowWarning(false); } })));
-}
-exports.default = Setting;
+"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.
+// ******************************************************************************************************
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var react_table_1 = __importDefault(require("@gpa-gemstone/react-table"));
+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 = (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: '' };
+    var _c = React.useState(emptySetting), editnewSetting = _c[0], setEditNewSetting = _c[1];
+    var _d = React.useState('New'), editNew = _d[0], setEditNew = _d[1];
+    var _e = React.useState(false), showModal = _e[0], setShowModal = _e[1];
+    var _f = React.useState(false), showWarning = _f[0], setShowWarning = _f[1];
+    var _g = React.useState(false), hasChanged = _g[0], setHasChanged = _g[1];
+    var _h = React.useState([]), errors = _h[0], setErrors = _h[1];
+    React.useEffect(function () {
+        if (status === 'unintiated' || status === 'changed')
+            dispatch(props.SettingsSlice.Fetch());
+    }, [dispatch, status]);
+    React.useEffect(function () {
+        if (searchStatus === 'unintiated' || status === 'changed')
+            dispatch(props.SettingsSlice.DBSearch({ filter: search, sortField: sortField, ascending: ascending }));
+    }, [dispatch, searchStatus, ascending, sortField, search]);
+    React.useEffect(function () { setHasChanged(false); }, [showModal]);
+    React.useEffect(function () {
+        var e = [];
+        if (editnewSetting.Name == null || editnewSetting.Name.length === 0)
+            e.push('A Name is required');
+        if (editnewSetting.Name != null && editnewSetting.Name.length > 0 && allSettings.findIndex(function (s) { return s.Name.toLowerCase() === editnewSetting.Name.toLowerCase() && s.ID !== editnewSetting.ID; }) > -1)
+            e.push('A Settign with this Name already exists.');
+        if (editnewSetting.Value == null || editnewSetting.Value.length === 0)
+            e.push('A Value is required');
+        setErrors(e);
+    }, [editnewSetting]);
+    var searchFields = [
+        { key: 'Name', label: 'Name', type: 'string', isPivotField: false },
+        { key: 'DefaultValue', label: 'Default Value', type: 'string', isPivotField: false },
+        { key: 'Value', label: 'Value', type: 'string', isPivotField: false }
+    ];
+    if (status === 'error')
+        return React.createElement("div", { style: { width: '100%', height: '100%' } },
+            React.createElement(react_interactive_1.ServerErrorIcon, { Show: true, Label: 'A Server Error Occured. Please Reload the Application' }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_interactive_1.LoadingScreen, { Show: status === 'loading' }),
+        React.createElement("div", { style: { width: '100%', height: '100%' } },
+            React.createElement(react_interactive_1.SearchBar, { CollumnList: searchFields, SetFilter: function (flds) { return dispatch(props.SettingsSlice.DBSearch({ filter: flds, sortField: sortField, ascending: ascending })); }, Direction: 'left', defaultCollumn: { key: 'Name', label: 'Name', type: 'string', isPivotField: false }, Width: '50%', Label: 'Search', ShowLoading: searchStatus === 'loading', ResultNote: searchStatus === 'error' ? 'Could not complete Search' : 'Found ' + data.length + ' Settings', GetEnum: function () {
+                    return function () { };
+                } },
+                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(emptySetting); 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', field: 'Name', label: 'Setting Name', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
+                        { key: 'Value', field: 'Value', label: 'Current Value', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
+                        { key: 'DefaultValue', field: 'DefaultValue', label: 'Default Value', headerStyle: { width: '20%' }, rowStyle: { width: '20%' } },
+                        { key: 'scroll', label: '', headerStyle: { width: 17, padding: 0 }, rowStyle: { width: 0, padding: 0 } },
+                    ], tableClass: "table table-hover", data: data, sortKey: sortField, ascending: ascending, onSort: function (d) {
+                        if (d.colKey === 'scroll' || d.colField === undefined)
+                            return;
+                        if (d.colField === sortField)
+                            setAscending(!ascending);
+                        else {
+                            setAscending(true);
+                            setSortField(d.colField);
+                        }
+                        if (d.colField === sortField)
+                            dispatch(props.SettingsSlice.DBSearch({ filter: search, sortField: sortField, ascending: true }));
+                        else
+                            dispatch(props.SettingsSlice.DBSearch({ filter: search, sortField: d.colField, ascending: ascending }));
+                    }, 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 () { 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')
+                    dispatch(props.SettingsSlice.DBAction({ verb: 'POST', record: editnewSetting }));
+                if (conf && editNew === 'Edit')
+                    dispatch(props.SettingsSlice.DBAction({ verb: 'PATCH', record: editnewSetting }));
+                if (!conf && isBtn)
+                    setShowWarning(true);
+                setShowModal(false);
+            }, DisableConfirm: (editNew === 'Edit' && !hasChanged) || errors.length > 0, ConfirmShowToolTip: errors.length > 0, ConfirmToolTipContent: errors.map(function (t, i) { return React.createElement("p", { key: i },
+                gpa_symbols_1.CrossMark,
+                " ",
+                t,
+                " "); }) },
+            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 && allSettings.findIndex(function (s) { return s.Name === editnewSetting.Name && s.ID !== editnewSetting.ID; }) < 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)
+                dispatch(props.SettingsSlice.DBAction({ verb: 'DELETE', record: editnewSetting })); setShowWarning(false); } })));
+}
+exports.default = Setting;