@gpa-gemstone/common-pages 0.0.14

package/README.md

@@ -0,0 +1,14 @@
+# react-table
+
+![gemstone logo](https://raw.githubusercontent.com/gemstone/web/master/docs/img/gemstone-wide-600.png)
+
+The Gemstone Web Library organizes all Gemstone functionality related to web.
+
+[![GitHub license](https://img.shields.io/github/license/gemstone/web?color=4CC61E)](https://github.com/gemstone/web/blob/master/LICENSE)
+
+This library includes helpful npm package component for common gp pages across PQ Apps.
+
+## Usage
+### General Modal
+
+

package/lib/Note.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { OpenXDA } from '@gpa-gemstone/application-typings';
+import { IGenericSlice } from './SliceInterfaces';
+interface IProps {
+    NoteTypes: OpenXDA.Types.NoteType[];
+    NoteTags: OpenXDA.Types.NoteTag[];
+    NoteApplications: OpenXDA.Types.NoteApplication[];
+    MaxHeight: number;
+    Title?: string;
+    ReferenceTableID?: number;
+    NoteSlice: IGenericSlice<OpenXDA.Types.Note>;
+    AllowEdit?: boolean;
+    AllowRemove?: boolean;
+    AllowAdd?: boolean;
+}
+declare function Note(props: IProps): JSX.Element;
+export default Note;

package/lib/Note.js

@@ -0,0 +1,179 @@
+"use strict";
+// ******************************************************************************************************
+//  Note.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:
+//  ----------------------------------------------------------------------------------------------------
+//  04/28/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 });
+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 moment = require("moment");
+var react_redux_1 = require("react-redux");
+function Note(props) {
+    var dispatch = 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 _c = React.useState(CreateNewNote()), note = _c[0], setNote = _c[1];
+    React.useEffect(function () {
+        if (dataStatus === 'unintiated' || dataStatus === 'changed' || parentID !== props.ReferenceTableID)
+            dispatch(props.NoteSlice.Fetch(props.ReferenceTableID));
+    }, [props.ReferenceTableID, dispatch, dataStatus]);
+    React.useEffect(function () {
+        if (note.NoteTypeID > 0 || props.NoteTypes.length === 0)
+            return;
+        setNote(function (n) { return (__assign(__assign({}, n), { NoteTypeID: props.NoteTypes[0].ID })); });
+    }, [props.NoteTypes]);
+    React.useEffect(function () {
+        if (note.NoteApplicationID > 0 || props.NoteApplications.length === 0)
+            return;
+        setNote(function (n) { return (__assign(__assign({}, n), { NoteApplicationID: props.NoteApplications[0].ID })); });
+    }, [props.NoteApplications]);
+    React.useEffect(function () {
+        if (note.NoteTagID > 0 || props.NoteTags.length === 0)
+            return;
+        setNote(function (n) { return (__assign(__assign({}, n), { NoteTagID: props.NoteTags[0].ID })); });
+    }, [props.NoteTags]);
+    React.useEffect(function () {
+        if (note.ReferenceTableID === undefined)
+            return;
+        setNote(function (n) { return (__assign(__assign({}, n), { ReferenceTableID: props.ReferenceTableID !== undefined ? props.ReferenceTableID : -1 })); });
+    }, [props.ReferenceTableID]);
+    var allowEdit = props.AllowEdit === undefined ? true : props.AllowEdit;
+    var allowRemove = props.AllowRemove === undefined ? true : props.AllowRemove;
+    var allowAdd = props.AllowAdd === undefined ? true : props.AllowAdd;
+    function CreateNewNote() {
+        var newNote = { ID: -1, ReferenceTableID: -1, NoteTagID: -1, NoteTypeID: -1, NoteApplicationID: -1, Timestamp: '', UserAccount: '', Note: '' };
+        if (props.ReferenceTableID !== undefined)
+            newNote.ReferenceTableID = props.ReferenceTableID;
+        if (props.NoteApplications.length > 0)
+            newNote.NoteApplicationID = props.NoteApplications[0].ID;
+        if (props.NoteTypes.length > 0)
+            newNote.NoteTypeID = props.NoteTypes[0].ID;
+        if (props.NoteTags.length > 0)
+            newNote.NoteTagID = props.NoteTags[0].ID;
+        return newNote;
+    }
+    function handleEdit(d) {
+        setNote(d);
+        setEdit(true);
+    }
+    function handleAdd(d) {
+        dispatch(props.NoteSlice.DBAction({ verb: 'POST', record: __assign(__assign({}, d), { UserAccount: undefined, Timestamp: moment().format('MM/DD/YYYY HH:mm') }) }));
+        setNote(CreateNewNote());
+    }
+    function handleSaveEdit(confirm) {
+        if (note.Note.length === 0 && confirm)
+            return;
+        setEdit(false);
+        if (confirm && allowEdit)
+            dispatch(props.NoteSlice.DBAction({ verb: 'PATCH', record: note }));
+        setNote(CreateNewNote());
+    }
+    if (dataStatus === "error")
+        return (React.createElement("div", { style: { width: '100%', height: '100%' } },
+            React.createElement("div", { style: { height: '40px', margin: 'auto', marginTop: 'calc(50% - 20 px)' } },
+                React.createElement(react_interactive_1.ServerErrorIcon, { Show: true, Size: 40, Label: 'A Server Error Occured. Please Reload the Application' }))));
+    return (React.createElement("div", { className: "card", style: { marginBottom: 10, maxHeight: props.MaxHeight, width: '100%' } },
+        React.createElement(react_interactive_1.LoadingScreen, { Show: dataStatus === 'loading' }),
+        React.createElement("div", { className: "card-header" },
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col" },
+                    React.createElement("h4", null, props.Title !== undefined ? props.Title : 'Notes:')))),
+        React.createElement("div", { className: "card-body", style: { maxHeight: props.MaxHeight - 100, overflowY: 'auto', width: '100%' } },
+            React.createElement("div", null,
+                React.createElement(react_table_1.default, { cols: [
+                        { key: 'Note', field: 'Note', label: 'Note', headerStyle: { width: '50%' }, rowStyle: { width: '50%' } },
+                        { key: 'Timestamp', field: 'Timestamp', label: 'Time', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' }, content: function (item) { return moment.utc(item.Timestamp).format("MM/DD/YYYY HH:mm"); } },
+                        { key: 'UserAccount', field: 'UserAccount', label: 'User', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' } },
+                        {
+                            key: 'buttons', label: '', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' }, content: function (item) { return React.createElement(React.Fragment, null,
+                                allowEdit ? React.createElement("button", { className: "btn btn-sm", onClick: function () { return handleEdit(item); } },
+                                    React.createElement("span", null,
+                                        " ",
+                                        gpa_symbols_1.Pencil,
+                                        " ")) : null,
+                                allowRemove ? React.createElement("button", { className: "btn btn-sm", onClick: function () { return dispatch(props.NoteSlice.DBAction({ verb: 'DELETE', record: item })); } },
+                                    React.createElement("span", null,
+                                        " ",
+                                        gpa_symbols_1.TrashCan,
+                                        " ")) : null); }
+                        },
+                    ], tableClass: "table table-hover", data: data, sortKey: sortField, ascending: ascending, onSort: function (d) {
+                        if (d.colField === undefined)
+                            return;
+                        if (d.colField === sortField)
+                            dispatch(props.NoteSlice.Sort({ SortField: sortField, Ascending: ascending }));
+                        else
+                            dispatch(props.NoteSlice.Sort({ SortField: d.colField, Ascending: true }));
+                    }, onClick: function () { return; }, 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; } })),
+            allowAdd ?
+                React.createElement(NoteOptions, { Record: note, Setter: function (n) { return setNote(n); }, NoteTags: props.NoteTags, NoteTypes: props.NoteTypes, NoteApplications: props.NoteApplications })
+                : null,
+            React.createElement(react_interactive_1.Modal, { Show: showEdit, Title: 'Edit Note', ShowCancel: true, CallBack: handleSaveEdit, DisableConfirm: note.Note == null || note.Note.length === 0, ShowX: true, ConfirmShowToolTip: note.Note == null || note.Note.length === 0, ConfirmToolTipContent: React.createElement("p", null,
+                    " ",
+                    gpa_symbols_1.CrossMark,
+                    " An empty Note can not be saved. ") },
+                React.createElement(NoteOptions, { Record: note, Setter: function (n) { return setNote(n); }, NoteTags: props.NoteTags, NoteTypes: props.NoteTypes, NoteApplications: props.NoteApplications }))),
+        allowAdd ?
+            React.createElement("div", { className: "card-footer" },
+                React.createElement("div", { className: "btn-group mr-2" },
+                    React.createElement("button", { className: "btn btn-primary" + (note.Note === null || note.Note.length === 0 ? ' disabled' : ''), onClick: function () { if (note.Note !== null && note.Note.length > 0)
+                            handleAdd(note); }, "data-tooltip": "Add", style: { cursor: note.Note === null || note.Note.length === 0 ? 'not-allowed' : 'pointer' }, onMouseOver: function () { return setHover('add'); }, onMouseOut: function () { return setHover('none'); } }, "Add Note"),
+                    React.createElement(react_interactive_1.ToolTip, { Show: hover === 'add' && (note.Note === null || note.Note.length === 0), Position: 'top', Theme: 'dark', Target: "Add" },
+                        React.createElement("p", null,
+                            gpa_symbols_1.CrossMark,
+                            " A note needs to be entered. "))),
+                React.createElement("div", { className: "btn-group mr-2" },
+                    React.createElement("button", { className: "btn btn-default" + (note.Note === null || note.Note.length === 0 ? ' disabled' : ''), onClick: function () { return setNote(function (n) { return (__assign(__assign({}, n), { Note: '' })); }); }, style: { cursor: note.Note === null || note.Note.length === 0 ? 'not-allowed' : 'pointer' }, "data-tooltip": "Remove", onMouseOver: function () { return setHover('clear'); }, onMouseOut: function () { return setHover('none'); } }, "Clear"),
+                    React.createElement(react_interactive_1.ToolTip, { Show: hover === 'clear' && (note.Note === null || note.Note.length === 0), Position: 'top', Theme: 'dark', Target: "Remove" },
+                        React.createElement("p", null,
+                            gpa_symbols_1.CrossMark,
+                            " The note field is already empty. "))))
+            : React.createElement("div", { className: "card-footer" }, " ")));
+}
+function NoteOptions(props) {
+    var showOptions = props.NoteTags.length > 1 || props.NoteTypes.length > 1 || props.NoteApplications.length > 1;
+    return (React.createElement("div", { className: "row" },
+        React.createElement("div", { className: showOptions ? "col-6" : 'col-12' },
+            React.createElement(react_forms_1.TextArea, { Record: props.Record, Rows: 4, Field: 'Note', Setter: function (n) { return props.Setter(n); }, Valid: function () { return props.Record.Note != null && props.Record.Note.length > 0; }, Label: '' })),
+        showOptions ? React.createElement("div", { className: "col-6" },
+            props.NoteTypes.length > 1 ? React.createElement(react_forms_1.Select, { Record: props.Record, Field: 'NoteTypeID', Label: 'Note for: ', Options: props.NoteTypes.map(function (r) { return ({ Value: r.ID.toString(), Label: r.Name }); }), Setter: function (record) { return props.Setter(__assign(__assign({}, record), { NoteTypeID: parseInt(record.NoteTypeID.toString(), 10) })); } }) : null,
+            props.NoteTags.length > 1 ? React.createElement(react_forms_1.Select, { Record: props.Record, Field: 'NoteTagID', Label: 'Type: ', Options: props.NoteTags.map(function (r) { return ({ Value: r.ID.toString(), Label: r.Name }); }), Setter: function (record) { return props.Setter(__assign(__assign({}, record), { NoteTagID: parseInt(record.NoteTagID.toString(), 10) })); } }) : null,
+            props.NoteApplications.length > 1 ? React.createElement(react_forms_1.Select, { Record: props.Record, Field: 'NoteApplicationID', Label: 'Application: ', Options: props.NoteApplications.map(function (r) { return ({ Value: r.ID.toString(), Label: r.Name }); }), Setter: function (record) { return props.Setter(__assign(__assign({}, record), { NoteApplicationID: parseInt(record.NoteApplicationID.toString(), 10) })); } }) : null) : null));
+}
+exports.default = Note;

package/lib/Setting.d.ts

@@ -0,0 +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;

package/lib/Setting.js

@@ -0,0 +1,125 @@
+"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 = 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 _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;

package/lib/SliceInterfaces.d.ts

@@ -0,0 +1,76 @@
+import { Application } from '@gpa-gemstone/application-typings';
+import { Search } from '@gpa-gemstone/react-interactive';
+import { ActionCreatorWithPayload, AsyncThunk, ActionCreatorWithoutPayload } from '@reduxjs/toolkit';
+declare type DBAction = 'POST' | 'DELETE' | 'PATCH';
+export declare type UserValidation = 'Resolving' | 'Valid' | 'Invalid' | 'Unknown';
+export interface IGenericSlice<T> {
+    Fetch: (AsyncThunk<any, void | number, {}>);
+    DBAction: (AsyncThunk<any, {
+        verb: DBAction;
+        record: T;
+    }, {}>);
+    Sort: ActionCreatorWithPayload<{
+        SortField: keyof T;
+        Ascending: boolean;
+    }, string>;
+    Data: (state: any) => T[];
+    Status: (state: any) => Application.Types.Status;
+    SortField: (state: any) => keyof T;
+    Ascending: (state: any) => boolean;
+    ParentID?: (state: any) => number | null;
+}
+export interface ISearchableSlice<T> extends IGenericSlice<T> {
+    DBSearch: (AsyncThunk<any, {
+        filter: Search.IFilter<T>[];
+        sortField?: keyof T;
+        ascending?: boolean;
+    }, {}>);
+    SearchFilters: (state: any) => Search.IFilter<T>[];
+    SearchResults: (state: any) => T[];
+    SearchStatus: (state: any) => Application.Types.Status;
+}
+export interface IAdditionalFieldSlice<F, V> {
+    FetchField: AsyncThunk<any, void, {}>;
+    FieldAction: AsyncThunk<any, {
+        Verb: DBAction;
+        Record: F;
+    }, {}>;
+    FetchValues: AsyncThunk<any, number | string, {}>;
+    UpdateValues: AsyncThunk<any, {
+        ParentID: number | string;
+        Values: V[];
+    }, {}>;
+    Sort: ActionCreatorWithPayload<{
+        SortField: keyof F;
+        Ascending: boolean;
+    }, string>;
+    Fields: (state: any) => F[];
+    Values: (state: any) => V[];
+    FieldStatus: (state: any) => Application.Types.Status;
+    ValueStatus: (state: any) => Application.Types.Status;
+    ValueParentId: (state: any) => number | string;
+    SortField: (state: any) => keyof F;
+    Ascending: (state: any) => boolean;
+}
+export interface IUserAccountSlice extends ISearchableSlice<Application.Types.iUserAccount> {
+    ADUpdate: (AsyncThunk<any, void, {}>);
+    SetCurrentUser: (AsyncThunk<any, Application.Types.iUserAccount, {}>);
+    LoadExistingUser: (AsyncThunk<any, string, {}>);
+    SetNewUser: ActionCreatorWithoutPayload;
+    CurrentID: (state: any) => string | undefined;
+    CurrentUser: (state: any) => Application.Types.iUserAccount;
+    ADValidation: (state: any) => UserValidation;
+}
+export interface ISecurityRoleSlice {
+    FetchRoles: (AsyncThunk<any, void, {}>);
+    FetchUserRoles: (AsyncThunk<any, string, {}>);
+    SetUserRoles: (AsyncThunk<any, {
+        UserId: string;
+        Roles: Application.Types.iApplicationRoleUserAccount[];
+    }, {}>);
+    Status: (state: any) => Application.Types.Status;
+    CurrentRoleStatus: (state: any) => Application.Types.Status;
+    Roles: (state: any) => Application.Types.iApplicationRoleUserAccount[];
+    AvailableRoles: (state: any) => Application.Types.iApplicationRole<Application.Types.SecurityRoleName>[];
+}
+export {};

package/lib/SliceInterfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ValueList/ByValueList.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SystemCenter } from '@gpa-gemstone/application-typings';
+import { IGenericSlice, ISearchableSlice } from '../SliceInterfaces';
+interface IProps {
+    OnValueListSelect: (id: number) => void;
+    ValueListSlice: ISearchableSlice<SystemCenter.Types.ValueListGroup>;
+    ValueListItemSlice: IGenericSlice<SystemCenter.Types.ValueListItem>;
+}
+declare function ByValueListGroup(props: IProps): JSX.Element;
+export default ByValueListGroup;

package/lib/ValueList/ByValueList.js

@@ -0,0 +1,115 @@
+"use strict";
+// ******************************************************************************************************
+//  ValueList.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:
+//  ----------------------------------------------------------------------------------------------------
+//  07/10/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 });
+var React = require("react");
+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 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 _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 _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];
+    React.useEffect(function () {
+        if (dataStatus === 'unintiated' || dataStatus === 'changed')
+            dispatch(props.ValueListSlice.DBSearch({ filter: search, sortField: sortKey, ascending: asc }));
+    }, [dispatch]);
+    React.useEffect(function () {
+        dispatch(props.ValueListSlice.DBSearch({ filter: search, sortField: sortKey, ascending: asc }));
+    }, [search, asc, sortKey]);
+    React.useEffect(function () {
+        if (itemStatus === 'unintiated' || itemStatus === 'changed')
+            dispatch(props.ValueListItemSlice.Fetch());
+    }, [dispatch]);
+    React.useEffect(function () {
+        if (groupStatus === 'unintiated' || groupStatus === 'changed')
+            dispatch(props.ValueListSlice.Fetch());
+    }, [dispatch]);
+    React.useEffect(function () {
+        if (record.Name == null)
+            setValidName(true);
+        else
+            setValidName(groups.findIndex(function (g) { return g.Name.toLowerCase() === record.Name.toLowerCase(); }) < 0);
+    }, [record]);
+    return (React.createElement("div", { style: { width: '100%', height: '100%' } },
+        React.createElement(react_interactive_1.SearchBar, { CollumnList: [{ label: 'Name', key: 'Name', type: 'string', isPivotField: false }], SetFilter: function (flds) { return setSearch(flds); }, Direction: 'left', defaultCollumn: { label: 'Name', key: 'Name', type: 'string', isPivotField: false }, Width: '50%', Label: 'Search', ShowLoading: dataStatus === 'loading' || itemStatus === 'loading', ResultNote: dataStatus === 'error' || itemStatus === 'error' ? 'Could not complete Search' : 'Found ' + data.length + ' Groups', 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 (evt) { evt.preventDefault(); setRecord(__assign({}, emptyRecord)); setShowNew(true); } }, "Add Group"))))),
+        React.createElement("div", { style: { width: '100%', height: 'calc( 100% - 136px)' } },
+            React.createElement(react_table_1.default, { cols: [
+                    { key: 'Name', field: 'Name', label: 'Name', headerStyle: { width: '15%' }, rowStyle: { width: '15%' } },
+                    { key: 'Description', field: 'Description', label: 'Description/Comments', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' } },
+                    { key: 'Items', field: 'Items', label: 'Items', headerStyle: { width: '10%' }, rowStyle: { width: '10%' }, content: function (item) { return items.filter(function (i) { return i.GroupID === item.ID; }).length; } },
+                    { key: 'Scroll', label: '', headerStyle: { width: 17, padding: 0 }, rowStyle: { width: 0, padding: 0 } },
+                ], tableClass: "table table-hover", data: data, sortKey: sortKey, ascending: asc, onSort: function (d) {
+                    if (d.colKey === 'remove' || d.colKey === 'scroll' || d.colField === undefined)
+                        return;
+                    setSortKey(d.colField);
+                    if (d.colField === sortKey)
+                        setASC(function (b) { return !b; });
+                    else
+                        setASC(true);
+                }, onClick: function (d) { return props.OnValueListSelect(d.row.ID); }, 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, { Show: showNew, Title: 'Add new Value List', ShowX: true, ShowCancel: false, DisableConfirm: newErrors.length > 0 || !validName, ConfirmShowToolTip: newErrors.length > 0 || !validName, ConfirmToolTipContent: React.createElement(React.Fragment, null,
+                newErrors.map(function (t, i) { return React.createElement("p", { key: i },
+                    " ",
+                    gpa_symbols_1.CrossMark,
+                    " ",
+                    t); }),
+                !validName ? React.createElement("p", null,
+                    gpa_symbols_1.CrossMark,
+                    " The Name has to be unique.") : null), CallBack: function (c) {
+                setShowNew(false);
+                if (c)
+                    dispatch(props.ValueListSlice.DBAction({ verb: 'POST', record: record }));
+            } },
+            React.createElement(GroupForm_1.default, { Record: record, Setter: setRecord, ErrorSetter: setNewErrors }))));
+}
+exports.default = ByValueListGroup;