@gpa-gemstone/common-pages 0.0.14

package/lib/user/AdditionalField.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { SystemCenter } from '@gpa-gemstone/application-typings';
+import { IAdditionalFieldSlice, IGenericSlice } from '../SliceInterfaces';
+interface IField {
+    FieldName: string;
+    Type: string;
+}
+interface IValue {
+    Value: string | number;
+    ID: number;
+}
+interface IProps<Field extends IField, Value extends IValue> {
+    Id: string | number;
+    AdditionalFieldSlice: IAdditionalFieldSlice<Field, Value>;
+    ValueListItemSlice: IGenericSlice<SystemCenter.Types.ValueListItem>;
+    ValueListGroupSlice: IGenericSlice<SystemCenter.Types.ValueListGroup>;
+    EmptyField: Field;
+    GetFieldValueIndex: (field: Field, values: Value[]) => number;
+    GetFieldIndex: (value: Value, fields: Field[]) => number;
+    FieldKeySelector: (field: Field) => string;
+    ValidateField: (field: Field) => string[];
+    CreateValue: (field: Field) => Value;
+    FieldUI: (field: Field, setField: (field: Field) => void) => JSX.Element;
+}
+declare function AdditionalField<Field extends IField, Value extends IValue>(props: IProps<Field, Value>): JSX.Element;
+export default AdditionalField;

package/lib/user/AdditionalField.js

@@ -0,0 +1,260 @@
+"use strict";
+// ******************************************************************************************************
+//  AdditionalField.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/14/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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = 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 react_forms_1 = require("@gpa-gemstone/react-forms");
+var react_redux_1 = require("react-redux");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+function AdditionalField(props) {
+    var dispatch = react_redux_1.useDispatch();
+    var valueListItems = react_redux_1.useSelector(props.ValueListItemSlice.Data);
+    var valueListItemStatus = react_redux_1.useSelector(props.ValueListItemSlice.Status);
+    var valueListGroups = react_redux_1.useSelector(props.ValueListGroupSlice.Data);
+    var valueListGroupStatus = react_redux_1.useSelector(props.ValueListGroupSlice.Status);
+    var fields = react_redux_1.useSelector(props.AdditionalFieldSlice.Fields);
+    var values = react_redux_1.useSelector(props.AdditionalFieldSlice.Values);
+    var fieldStatus = react_redux_1.useSelector(props.AdditionalFieldSlice.FieldStatus);
+    var valueStatus = react_redux_1.useSelector(props.AdditionalFieldSlice.ValueStatus);
+    var valueParentID = react_redux_1.useSelector(props.AdditionalFieldSlice.ValueParentId);
+    var _a = React.useState('unintiated'), pageStatus = _a[0], setPageStatus = _a[1];
+    var _b = React.useState([]), editValues = _b[0], setEditValues = _b[1];
+    var sortField = react_redux_1.useSelector(props.AdditionalFieldSlice.SortField);
+    var ascending = react_redux_1.useSelector(props.AdditionalFieldSlice.Ascending);
+    var _c = React.useState(props.EmptyField), newField = _c[0], setNewField = _c[1];
+    var _d = React.useState(false), showWarning = _d[0], setShowWarning = _d[1];
+    var _e = React.useState(false), showEdit = _e[0], setShowEdit = _e[1];
+    var _f = React.useState('None'), hover = _f[0], setHover = _f[1];
+    var _g = React.useState('View'), mode = _g[0], setMode = _g[1];
+    var _h = React.useState([]), changedFields = _h[0], setChangedFields = _h[1];
+    var _j = React.useState([]), errorFields = _j[0], setErrorFields = _j[1];
+    var _k = React.useState([]), fieldErrors = _k[0], setFieldErrors = _k[1];
+    React.useEffect(function () {
+        if (fieldStatus === 'error' || valueStatus === 'error' || valueListGroupStatus === 'error' || valueListItemStatus === 'error')
+            setPageStatus('error');
+        else if (fieldStatus === 'loading' || valueStatus === 'loading' || valueListGroupStatus === 'loading' || valueListItemStatus === 'loading')
+            setPageStatus('loading');
+        else
+            setPageStatus('idle');
+    }, [fieldStatus, valueStatus, valueListGroupStatus, valueListItemStatus]);
+    React.useEffect(function () {
+        if (fieldStatus === 'unintiated' || fieldStatus === 'changed')
+            dispatch(props.AdditionalFieldSlice.FetchField());
+    }, [dispatch, fieldStatus]);
+    React.useEffect(function () {
+        if (valueStatus === 'unintiated' || valueStatus === 'changed' || props.Id !== valueParentID)
+            dispatch(props.AdditionalFieldSlice.FetchValues(props.Id));
+    }, [dispatch, valueStatus, props.Id, valueParentID]);
+    React.useEffect(function () {
+        if (valueListItemStatus === 'unintiated' || valueListItemStatus === 'changed')
+            dispatch(props.ValueListItemSlice.Fetch());
+    }, [dispatch, valueListItemStatus]);
+    React.useEffect(function () {
+        if (valueListGroupStatus === 'unintiated' || valueListGroupStatus === 'changed')
+            dispatch(props.ValueListGroupSlice.Fetch());
+    }, [dispatch, valueListGroupStatus]);
+    React.useEffect(function () { setEditValues(values); }, [values]);
+    var typeOptions = [{ Value: 'string', Label: 'string' }, { Value: 'integer', Label: 'integer' }, { Value: 'number', Label: 'number' }].concat(valueListGroups.map(function (x) { return { Value: x.Name, Label: x.Name }; }));
+    React.useEffect(function () {
+        var e = props.ValidateField(newField);
+        if (newField.FieldName == null || newField.FieldName.length === 0)
+            e.push('A FieldName is required');
+        else if (fields.findIndex(function (f) { return f.FieldName.toLowerCase() === newField.FieldName.toLowerCase() && props.FieldKeySelector(f) !== props.FieldKeySelector(newField); }) > -1)
+            e.push('A Field with this FieldName already exists');
+        setFieldErrors(e);
+    }, [newField]);
+    React.useEffect(function () {
+        var c = [];
+        var e = [];
+        editValues.forEach(function (v) {
+            var eIndex = values.findIndex(function (val) { return val.ID === v.ID; });
+            var fldIndex = props.GetFieldIndex(v, fields);
+            if (eIndex === -1 && fldIndex > -1)
+                c.push(fields[fldIndex].FieldName);
+            else if (fldIndex > -1 && v.Value !== values[eIndex].Value)
+                c.push(fields[fldIndex].FieldName);
+            if (fldIndex > -1 && fields[fldIndex].Type === 'integer' && !helper_functions_1.IsInteger(v.Value))
+                e.push("'" + fields[fldIndex].FieldName + "' has to be a valid integer");
+            if (fldIndex > -1 && fields[fldIndex].Type === 'number' && !helper_functions_1.IsNumber(v.Value))
+                e.push("'" + fields[fldIndex].FieldName + "' has to be a valid number");
+        });
+        setErrorFields(e);
+        setChangedFields(c);
+    }, [values, editValues]);
+    if (pageStatus === 'error')
+        return React.createElement("div", { className: "card", style: { marginBottom: 10, maxHeight: window.innerHeight - 215 } },
+            React.createElement("div", { className: "card-header" },
+                React.createElement("div", { className: "row" },
+                    React.createElement("div", { className: "col" },
+                        React.createElement("h4", null, "Additional Fields:")))),
+            React.createElement("div", { className: "card-body", style: { maxHeight: window.innerHeight - 315, overflowY: 'auto' } },
+                React.createElement("div", { style: { width: '100%', height: '200px' } },
+                    React.createElement("div", { style: { height: '40px', marginLeft: 'auto', marginRight: 'auto', marginTop: 'calc(50% - 20 px)' } },
+                        React.createElement(react_interactive_1.ServerErrorIcon, { Show: true, Size: 40, Label: 'A Server Error Occurred. Please Reload the Application' })))));
+    return (React.createElement("div", { className: "card", style: { marginBottom: 10, maxHeight: window.innerHeight - 215 } },
+        React.createElement("div", { className: "card-header" },
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col" },
+                    React.createElement("h4", null, "Additional Fields:")),
+                React.createElement("div", { className: "col" },
+                    (mode === 'Edit') ?
+                        React.createElement("button", { className: "btn btn-default pull-right", "data-tooltip": 'View', onClick: function () { setMode('View'); setEditValues(values); }, onMouseEnter: function () { return setHover('View'); }, onMouseLeave: function () { return setHover('None'); } }, "View") :
+                        React.createElement("button", { className: "btn btn-primary pull-right", onClick: function () { return setMode('Edit'); } }, "Edit"),
+                    React.createElement(react_interactive_1.ToolTip, { Show: hover === 'View' && changedFields.length > 0, Position: 'left', Theme: 'dark', Target: "View" }, changedFields.map(function (fld, i) { return React.createElement("p", { key: i },
+                        gpa_symbols_1.Warning,
+                        " Changes to '",
+                        fld,
+                        "' will be lost. "); }))))),
+        React.createElement("div", { className: "card-body", style: { maxHeight: window.innerHeight - 315, overflowY: 'auto' } },
+            React.createElement(react_table_1.default, { cols: [
+                    { key: 'FieldName', field: 'FieldName', label: 'Field', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' } },
+                    { key: 'Type', field: 'Type', label: 'Type', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' } },
+                    {
+                        key: 'Value', label: 'Value', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' }, content: function (item) {
+                            var valueListgrpId = valueListGroups.findIndex(function (g) { return g.Name === item.Type; });
+                            valueListgrpId = (valueListgrpId > -1 ? valueListGroups[valueListgrpId].ID : -1);
+                            var vList = valueListItems.filter(function (i) { return i.GroupID === valueListgrpId; });
+                            var valIdx = props.GetFieldValueIndex(item, editValues);
+                            if (valIdx > -1)
+                                return React.createElement(ValueDisplay, { Mode: mode, Type: item.Type, ValueListItems: vList, Value: editValues[valIdx], Setter: function (val) { return setEditValues(function (d) { var u = __spreadArray([], d); u[valIdx] = val; return u; }); } });
+                            return React.createElement(ValueDisplay, { Mode: mode, Type: item.Type, ValueListItems: vList, Value: props.CreateValue(item), Setter: function (val) { return setEditValues(function (d) { var u = __spreadArray([], d); u.push(val); return u; }); } });
+                        }
+                    },
+                    { key: 'EditButton', label: '', headerStyle: { width: 40, paddingRight: 0, paddingLeft: 10 }, rowStyle: { width: 40, paddingRight: 0, paddingLeft: 10, paddingTop: 36 }, content: function (item) { return (mode === 'Edit' ? React.createElement("button", { className: "btn btn-sm", onClick: function () { setNewField(item); setShowEdit(true); } },
+                            React.createElement("span", null,
+                                React.createElement("i", { className: "fa fa-pencil" }))) : ''); } },
+                    { key: 'DeleteButton', label: '', headerStyle: { width: 40, paddingLeft: 0, paddingRight: 10 }, rowStyle: { width: 40, paddingLeft: 0, paddingTop: 36, paddingRight: 10 }, content: function (item) { return (mode === 'Edit' ? React.createElement("button", { className: "btn btn-sm", onClick: function () { setNewField(item); setShowWarning(true); } },
+                            React.createElement("span", null,
+                                React.createElement("i", { className: "fa fa-times" }))) : ''); } },
+                ], tableClass: "table table-hover", data: fields, sortKey: sortField, ascending: ascending, onSort: function (d) {
+                    if (d.colField === undefined)
+                        return;
+                    if (d.colKey === sortField)
+                        dispatch(props.AdditionalFieldSlice.Sort({ SortField: d.colField, Ascending: !ascending }));
+                    else
+                        dispatch(props.AdditionalFieldSlice.Sort({ SortField: d.colField, Ascending: true }));
+                }, onClick: function () { }, theadStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, tbodyStyle: { display: 'block', overflowY: 'scroll', maxHeight: window.innerHeight - 455, }, rowStyle: { display: 'table', tableLayout: 'fixed', width: '100%' }, selected: function () { return false; }, keySelector: props.FieldKeySelector })),
+        React.createElement("div", { className: "card-footer" },
+            React.createElement("div", { className: "btn-group mr-2" },
+                React.createElement("button", { className: "btn btn-primary" + (mode === 'View' ? ' disabled' : ''), onMouseEnter: function () { return setHover('New'); }, onMouseLeave: function () { return setHover('None'); }, onClick: function () { if (mode === 'Edit') {
+                        setShowEdit(true);
+                        setNewField(props.EmptyField);
+                    } }, "data-tooltip": 'New' }, "Add Field")),
+            React.createElement(react_interactive_1.ToolTip, { Show: hover === 'New' && mode === 'View', Position: 'top', Theme: 'dark', Target: "New" },
+                React.createElement("p", null, " To add a new Field switch to Edit mode by clicking on the Edit Button on the upper right corner.")),
+            React.createElement("div", { className: "btn-group mr-2" },
+                React.createElement("button", { className: "btn btn-primary" + (changedFields.length === 0 || mode === 'View' || errorFields.length > 0 ? ' disabled' : ''), onClick: function () { if (errorFields.length === 0 && changedFields.length > 0 && mode === 'Edit')
+                        dispatch(props.AdditionalFieldSlice.UpdateValues({ ParentID: props.Id, Values: editValues })); }, onMouseEnter: function () { return setHover('Save'); }, onMouseLeave: function () { return setHover('None'); }, "data-tooltip": 'SaveValues' }, "Save Changes")),
+            React.createElement(react_interactive_1.ToolTip, { Show: hover === 'Save' && (mode === 'View' || changedFields.length > 0), Position: 'top', Theme: 'dark', Target: "SaveValues" },
+                mode === 'View' ? React.createElement("p", null, " To change any Fields switch to Edit mode by clicking on the Edit Button on the upper right corner.") : null,
+                changedFields.length > 0 && errorFields.length === 0 ? changedFields.map(function (fld, i) { return React.createElement("p", { key: i },
+                    " ",
+                    gpa_symbols_1.HeavyCheckMark,
+                    " Changes to '",
+                    fld,
+                    "' are valid."); }) : null,
+                changedFields.length > 0 && errorFields.length > 0 ? errorFields.map(function (t, i) { return React.createElement("p", { key: i },
+                    " ",
+                    gpa_symbols_1.CrossMark,
+                    " ",
+                    t,
+                    "."); }) : null),
+            React.createElement("div", { className: "btn-group mr-2" },
+                React.createElement("button", { className: "btn btn-default" + (changedFields.length === 0 || mode === 'View' ? ' disabled' : ''), onClick: function () {
+                        if (changedFields.length > 0 && mode === 'Edit')
+                            setEditValues(values);
+                    }, onMouseEnter: function () { return setHover('Clear'); }, onMouseLeave: function () { return setHover('None'); }, "data-tooltip": 'Reset' }, "Reset")),
+            React.createElement(react_interactive_1.ToolTip, { Show: hover === 'Clear' && (mode === 'View' || changedFields.length > 0), Position: 'top', Theme: 'dark', Target: 'Reset' },
+                mode === 'View' ? React.createElement("p", null, " To change any Fields switch to Edit mode by clicking on the Edit Button on the upper right corner.") : null,
+                changedFields.length > 0 ? changedFields.map(function (fld, i) { return React.createElement("p", { key: i },
+                    gpa_symbols_1.Warning,
+                    " Changes to '",
+                    fld,
+                    "' will be lost. "); }) : null)),
+        React.createElement(react_interactive_1.Warning, { Show: showWarning, Title: 'Delete ' + newField.FieldName, Message: "This will delete all instances of '" + newField.FieldName + "' and will also delete all information assigned to these fields.", CallBack: function (confirm) { if (confirm)
+                dispatch(props.AdditionalFieldSlice.FieldAction({ Verb: 'DELETE', Record: newField })); setShowWarning(false); } }),
+        React.createElement(react_interactive_1.Modal, { Title: 'Additional Field', ConfirmText: 'Save', ShowX: true, ShowCancel: false, ConfirmBtnClass: 'btn-primary' + (fieldErrors.length > 0 ? ' disabled' : ''), Show: showEdit, Size: 'lg', CallBack: function (confirmation) {
+                if (confirmation) {
+                    if (props.FieldKeySelector(newField) === "new")
+                        dispatch(props.AdditionalFieldSlice.FieldAction({ Verb: "POST", Record: newField }));
+                    else
+                        dispatch(props.AdditionalFieldSlice.FieldAction({ Verb: "PATCH", Record: newField }));
+                }
+                setShowEdit(false);
+            }, ConfirmShowToolTip: fieldErrors.length > 0, ConfirmToolTipContent: fieldErrors.map(function (t, i) { return React.createElement("p", { key: i },
+                gpa_symbols_1.CrossMark,
+                " ",
+                t,
+                " "); }) },
+            React.createElement(react_forms_1.Input, { Record: newField, Field: 'FieldName', Valid: function (field) {
+                    return newField.FieldName != null && newField.FieldName.length > 0
+                        && fields.findIndex(function (f) { return f.FieldName.toLowerCase() === newField.FieldName.toLowerCase() && props.FieldKeySelector(f) !== props.FieldKeySelector(newField); }) < 0;
+                }, Label: "Field Name", Setter: setNewField, Feedback: 'The additional field needs to have a unique Field Name' }),
+            React.createElement(react_forms_1.Select, { Record: newField, Field: 'Type', Options: typeOptions, Label: "Field Type", Setter: setNewField }),
+            props.FieldUI !== undefined ? props.FieldUI(newField, setNewField) : null)));
+}
+exports.default = AdditionalField;
+function ValueDisplay(props) {
+    React.useEffect(function () {
+        if (props.Type === 'integer' || props.Type === 'number' || props.Type === 'string')
+            return;
+        else if (props.Type !== 'boolean' &&
+            props.ValueListItems.findIndex(function (i) { return i.Value.toLowerCase() === props.Value.Value.toString().toLowerCase(); }) < 0
+            && props.ValueListItems.length > 0)
+            props.Setter(__assign(__assign({}, props.Value), { Value: props.ValueListItems[0].Value }));
+    }, [props.Type, props.Value, props.ValueListItems]);
+    if (props.Mode === 'View') {
+        if (props.Type === 'boolean')
+            return React.createElement("span", null, props.Value.Value.toString().toLowerCase() === "true" ? "true" : "false");
+        else
+            return React.createElement("span", null, props.Value.Value);
+    }
+    if (props.Type === 'number')
+        return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return helper_functions_1.IsInteger(props.Value.Value); }, Label: '', Type: 'number', Setter: props.Setter, Feedback: 'Thi Field is a numeric field.' });
+    if (props.Type === 'integer')
+        return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return helper_functions_1.IsNumber(props.Value.Value); }, Label: '', Type: 'number', Setter: props.Setter, Feedback: 'Thi Field is an integer field.' });
+    else if (props.Type === 'string')
+        return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return true; }, Label: '', Type: 'text', Setter: props.Setter });
+    else if (props.Type === 'boolean')
+        return React.createElement(react_forms_1.CheckBox, { Record: props.Value, Field: 'Value', Label: '', Setter: props.Setter });
+    else
+        return React.createElement(react_forms_1.Select, { EmptyOption: true, Record: props.Value, Field: 'Value', Label: '', Setter: props.Setter, Options: props.ValueListItems.map(function (x) { return ({ Value: x.ID.toString(), Label: x.Value }); }) });
+}

package/lib/user/ByUser.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SystemCenter, Application } from '@gpa-gemstone/application-typings';
+import { IAdditionalFieldSlice, IGenericSlice, IUserAccountSlice } from '../SliceInterfaces';
+interface IProps {
+    UserSlice: IUserAccountSlice;
+    AdditionalFieldSlice: IAdditionalFieldSlice<Application.Types.iAdditionalUserField, Application.Types.iAdditionalUserFieldValue>;
+    ValueListItemSlice: IGenericSlice<SystemCenter.Types.ValueListItem>;
+    ValueListGroupSlice: IGenericSlice<SystemCenter.Types.ValueListGroup>;
+    OnUserSelect: (userID: string) => void;
+}
+declare function ByUser(props: IProps): JSX.Element;
+export default ByUser;

package/lib/user/ByUser.js

@@ -0,0 +1,148 @@
+"use strict";
+// ******************************************************************************************************
+//  ByUser.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/14/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 CryptoJS = require("crypto-js");
+var _ = require("lodash");
+var UserForm_1 = require("./UserForm");
+var react_redux_1 = require("react-redux");
+var defaultSearchcols = [
+    { label: 'First Name', key: 'FirstName', type: 'string', isPivotField: false },
+    { label: 'Last Name', key: 'LastName', type: 'string', isPivotField: false },
+    { label: 'Location', key: 'Location', type: 'string', isPivotField: false },
+    { label: 'Phone', key: 'Phone', type: 'string', isPivotField: false },
+    { label: 'Email', key: 'Email', type: 'string', isPivotField: false },
+];
+function ByUser(props) {
+    var dispatch = react_redux_1.useDispatch();
+    var search = react_redux_1.useSelector(props.UserSlice.SearchFilters);
+    var data = react_redux_1.useSelector(props.UserSlice.SearchResults);
+    var userStatus = react_redux_1.useSelector(props.UserSlice.Status);
+    var searchStatus = react_redux_1.useSelector(props.UserSlice.SearchStatus);
+    var sortField = react_redux_1.useSelector(props.UserSlice.SortField);
+    var ascending = react_redux_1.useSelector(props.UserSlice.Ascending);
+    var currentUserAccount = react_redux_1.useSelector(props.UserSlice.CurrentUser);
+    var adlFields = react_redux_1.useSelector(props.AdditionalFieldSlice.Fields);
+    var adlFieldStatus = react_redux_1.useSelector(props.AdditionalFieldSlice.FieldStatus);
+    var _a = React.useState(defaultSearchcols), filterableList = _a[0], setFilterableList = _a[1];
+    var _b = React.useState(false), showModal = _b[0], setShowModal = _b[1];
+    var _c = React.useState([]), userError = _c[0], setUserError = _c[1];
+    var valueListItems = react_redux_1.useSelector(props.ValueListItemSlice.Data);
+    var valueListItemStatus = react_redux_1.useSelector(props.ValueListItemSlice.Status);
+    var valueListGroups = react_redux_1.useSelector(props.ValueListGroupSlice.Data);
+    var valueListGroupStatus = react_redux_1.useSelector(props.ValueListGroupSlice.Status);
+    var _d = React.useState('unintiated'), pageStatus = _d[0], setPageStatus = _d[1];
+    React.useEffect(function () {
+        if (userStatus === 'error' || adlFieldStatus === 'error' || valueListItemStatus === 'error' || valueListGroupStatus === 'error')
+            setPageStatus('error');
+        else if (userStatus === 'loading' || adlFieldStatus === 'loading' || valueListItemStatus === 'loading' || valueListGroupStatus === 'loading')
+            setPageStatus('loading');
+        else
+            setPageStatus('idle');
+    }, [userStatus, adlFieldStatus, valueListItemStatus, valueListGroupStatus]);
+    React.useEffect(function () {
+        if (adlFieldStatus === 'unintiated' || adlFieldStatus === 'changed')
+            dispatch(props.AdditionalFieldSlice.FetchField());
+    }, [dispatch, adlFieldStatus]);
+    React.useEffect(function () {
+        dispatch(props.UserSlice.DBSearch({ sortField: sortField, ascending: ascending, filter: search }));
+        dispatch(props.UserSlice.SetNewUser());
+    }, [dispatch]);
+    React.useEffect(function () {
+        if (valueListItemStatus === 'unintiated' || valueListItemStatus === 'changed')
+            dispatch(props.ValueListItemSlice.Fetch());
+    }, [dispatch, valueListItemStatus]);
+    React.useEffect(function () {
+        if (valueListGroupStatus === 'unintiated' || valueListGroupStatus === 'changed')
+            dispatch(props.ValueListGroupSlice.Fetch());
+    }, [dispatch, valueListGroupStatus]);
+    React.useEffect(function () {
+        function ConvertType(type) {
+            if (type === 'string' || type === 'integer' || type === 'number' || type === 'datetime' || type === 'boolean')
+                return { type: type };
+            return { type: 'enum', enum: [{ Label: type, Value: type }] };
+        }
+        var ordered = _.orderBy(defaultSearchcols.concat(adlFields.map(function (item) { return (__assign({ label: "[AF] " + item.FieldName, key: item.FieldName }, ConvertType(item.Type))); })), ['label'], ["asc"]);
+        setFilterableList(ordered);
+    }, [adlFields]);
+    if (pageStatus === '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("div", { style: { width: '100%', height: '100%' } },
+        React.createElement(react_interactive_1.LoadingScreen, { Show: pageStatus === 'loading' }),
+        React.createElement(react_interactive_1.SearchBar, { CollumnList: filterableList, SetFilter: function (flds) { return dispatch(props.UserSlice.DBSearch({ sortField: sortField, ascending: ascending, filter: flds })); }, Direction: 'left', defaultCollumn: { label: 'Last Name', key: 'LastName', type: 'string', isPivotField: false }, Width: '50%', Label: 'Search', ShowLoading: searchStatus === 'loading', ResultNote: searchStatus === 'error' ? 'Could not complete Search' : 'Found ' + data.length + ' UserAccounts', GetEnum: function (setOptions, field) {
+                if (field.type !== 'enum' || field.enum === undefined || field.enum.length !== 1)
+                    return function () { };
+                var grpName = (field.enum !== undefined ? field.enum[0].Value.toLowerCase() : '');
+                var grpIndex = valueListGroups.findIndex(function (g) { return g.Name.toLowerCase() === grpName; });
+                if (grpIndex < 0)
+                    return function () { };
+                setOptions(valueListItems.filter(function (v) { return v.GroupID === valueListGroups[grpIndex].ID; }).map(function (item) { return ({ Value: item.ID.toString(), Label: item.Value }); }));
+                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) { event.preventDefault(); setShowModal(true); } }, "Add User"))))),
+        React.createElement("div", { style: { width: '100%', height: 'calc( 100% - 136px)' } },
+            React.createElement(react_table_1.default, { cols: [
+                    { key: 'Name', field: 'Name', label: 'User Name', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
+                    { key: 'FirstName', field: 'FirstName', label: 'First Name', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
+                    { key: 'LastName', field: 'LastName', label: 'Last Name', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
+                    { key: 'Phone', field: 'Phone', label: 'Phone', headerStyle: { width: '10%' }, rowStyle: { width: '10%' } },
+                    { key: 'Email', field: 'Email', label: 'Email', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' } },
+                    { 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.colField === undefined)
+                        return;
+                    if (d.colField !== sortField)
+                        dispatch(props.UserSlice.DBSearch({ sortField: sortField, ascending: !ascending, filter: search }));
+                    else
+                        dispatch(props.UserSlice.DBSearch({ sortField: d.colField, ascending: true, filter: search }));
+                }, onClick: function (d) { return props.OnUserSelect(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: showModal, Size: 'lg', ShowCancel: false, ShowX: true, ConfirmText: 'Save', Title: 'Add User', CallBack: function (confirm) {
+                if (confirm)
+                    dispatch(props.UserSlice.DBAction({ verb: 'POST', record: __assign(__assign({}, currentUserAccount), { Password: CryptoJS.SHA256(currentUserAccount.Password + "0").toString(CryptoJS.enc.Base64) }) }));
+                dispatch(props.UserSlice.SetNewUser());
+                setShowModal(false);
+            }, ConfirmShowToolTip: userError.length > 0, ConfirmToolTipContent: userError.map(function (t, i) { return React.createElement("p", { key: i },
+                gpa_symbols_1.CrossMark,
+                " ",
+                t); }), DisableConfirm: userError.length > 0 }, currentUserAccount !== undefined ? React.createElement(UserForm_1.default, { UserAccount: currentUserAccount, Setter: function (u) { return dispatch(props.UserSlice.SetCurrentUser(u)); }, Edit: false, SetErrors: setUserError, UserSlice: props.UserSlice }) : null)));
+}
+exports.default = ByUser;