@gpa-gemstone/common-pages 0.0.104 → 0.0.106

package/lib/Note.js

@@ -1,230 +1,256 @@
-"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 = (0, react_redux_1.useDispatch)();
-    var standardCollumns = [
-        {
-            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' }
-        }
-    ];
-    var allowEdit = props.AllowEdit === undefined ? true : props.AllowEdit;
-    var allowRemove = props.AllowRemove === undefined ? true : props.AllowRemove;
-    var allowAdd = props.AllowAdd === undefined ? true : props.AllowAdd;
-    var useFixedApp = props.NoteApplications.length === 1 || props.DefaultApplication !== undefined;
-    var defaultApplication = props.DefaultApplication !== undefined ? props.DefaultApplication : props.NoteApplications[0];
-    var showCard = props.ShowCard === undefined || props.ShowCard;
-    var _a = React.useState(false), showEdit = _a[0], setEdit = _a[1];
-    var _b = React.useState('none'), hover = _b[0], setHover = _b[1];
-    var _c = React.useState(standardCollumns), collumns = _c[0], setCollumns = _c[1];
-    var data = (0, react_redux_1.useSelector)(props.NoteSlice.Data);
-    var dataStatus = (0, react_redux_1.useSelector)(props.NoteSlice.Status);
-    var parentID = (0, react_redux_1.useSelector)((props.NoteSlice.ParentID === undefined ? function (state) { return props.ReferenceTableID; } : props.NoteSlice.ParentID));
-    var sortField = (0, react_redux_1.useSelector)(props.NoteSlice.SortField);
-    var ascending = (0, react_redux_1.useSelector)(props.NoteSlice.Ascending);
-    var _d = React.useState(CreateNewNote()), note = _d[0], setNote = _d[1];
-    var _e = React.useState([]), notes = _e[0], setNotes = _e[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]);
-    React.useEffect(function () {
-        var c = standardCollumns;
-        if (props.AdditionalCollumns !== undefined)
-            c.push.apply(c, props.AdditionalCollumns);
-        if (props.NoteTags.length > 1)
-            c.push({ key: 'NoteTagID', field: 'NoteTagID', label: 'Type', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' },
-                content: function (n) { var _a; return (_a = props.NoteTags.find(function (t) { return t.ID === n.NoteTagID; })) === null || _a === void 0 ? void 0 : _a.Name; } });
-        if (props.NoteApplications.length > 1)
-            c.push({ key: 'NoteApplicationID', field: 'NoteApplicationID', label: 'Application', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' },
-                content: function (n) { var _a; return (_a = props.NoteApplications.find(function (t) { return t.ID === n.NoteApplicationID; })) === null || _a === void 0 ? void 0 : _a.Name; } });
-        c.push({
-            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); }
-        });
-        setCollumns(c);
-    }, [props.NoteTags, props.NoteApplications, props.AdditionalCollumns]);
-    React.useEffect(function () {
-        setNotes(data.filter(function (n) { return (props.Filter === undefined ? true : props.Filter(n)); }));
-    }, [props.Filter, data]);
-    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 (defaultApplication != null)
-            newNote.NoteApplicationID = defaultApplication.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 }))));
-    return (React.createElement("div", { className: showCard ? "card" : "", style: { marginBottom: 10, maxHeight: props.MaxHeight, width: '100%' } },
-        React.createElement(react_interactive_1.LoadingScreen, { Show: dataStatus === 'loading' }),
-        React.createElement("div", { className: props.ShowCard === undefined || props.ShowCard ? "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: showCard ? "card-body" : "", style: { maxHeight: props.MaxHeight - 100, overflowY: 'auto', width: '100%' } },
-            allowAdd && !showCard ?
-                React.createElement(React.Fragment, null,
-                    React.createElement(NoteOptions, { Record: note, Setter: function (n) { return setNote(n); }, NoteTags: props.NoteTags, NoteTypes: props.NoteTypes, NoteApplications: props.NoteApplications, ShowApplications: !useFixedApp }),
-                    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. ")))) : null,
-            React.createElement("div", null,
-                React.createElement(react_table_1.default, { cols: collumns, tableClass: "table table-hover", data: notes, 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: props.MaxHeight - 300, width: '100%' }, rowStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, selected: function () { return false; } })),
-            allowAdd && showCard ?
-                React.createElement(NoteOptions, { Record: note, Setter: function (n) { return setNote(n); }, NoteTags: props.NoteTags, NoteTypes: props.NoteTypes, NoteApplications: props.NoteApplications, ShowApplications: !useFixedApp })
-                : 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, { ShowApplications: !useFixedApp, Record: note, Setter: function (n) { return setNote(n); }, NoteTags: props.NoteTags, NoteTypes: props.NoteTypes, NoteApplications: props.NoteApplications }))),
-        allowAdd && showCard ?
-            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. "))))
-            : null,
-        !allowAdd && showCard ? React.createElement("div", { className: props.ShowCard === undefined || props.ShowCard ? "card-footer" : "" }, " ") : null));
-}
-function NoteOptions(props) {
-    var showOptions = props.NoteTags.length > 1 || props.NoteTypes.length > 1 || props.NoteApplications.length > 1;
-    return (React.createElement("div", { className: "row", style: { marginRight: 0, marginLeft: 0 } },
-        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.ShowApplications && 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;
+"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);
+};
+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 moment = require("moment");
+var react_redux_1 = require("react-redux");
+function Note(props) {
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var standardCollumns = [
+        {
+            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' }
+        }
+    ];
+    var allowEdit = props.AllowEdit === undefined ? true : props.AllowEdit;
+    var allowRemove = props.AllowRemove === undefined ? true : props.AllowRemove;
+    var allowAdd = props.AllowAdd === undefined ? true : props.AllowAdd;
+    var useFixedApp = props.NoteApplications.length === 1 || props.DefaultApplication !== undefined;
+    var defaultApplication = props.DefaultApplication !== undefined ? props.DefaultApplication : props.NoteApplications[0];
+    var showCard = props.ShowCard === undefined || props.ShowCard;
+    var _a = React.useState(false), showEdit = _a[0], setEdit = _a[1];
+    var _b = React.useState('none'), hover = _b[0], setHover = _b[1];
+    var _c = React.useState(standardCollumns), collumns = _c[0], setCollumns = _c[1];
+    var data = (0, react_redux_1.useSelector)(props.NoteSlice.Data);
+    var dataStatus = (0, react_redux_1.useSelector)(props.NoteSlice.Status);
+    var parentID = (0, react_redux_1.useSelector)((props.NoteSlice.ParentID === undefined ? function (state) { return props.ReferenceTableID; } : props.NoteSlice.ParentID));
+    var sortField = (0, react_redux_1.useSelector)(props.NoteSlice.SortField);
+    var ascending = (0, react_redux_1.useSelector)(props.NoteSlice.Ascending);
+    var _d = React.useState(CreateNewNote()), note = _d[0], setNote = _d[1];
+    var _e = React.useState([]), notes = _e[0], setNotes = _e[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]);
+    React.useEffect(function () {
+        var c = standardCollumns;
+        if (props.AdditionalCollumns !== undefined)
+            c.push.apply(c, props.AdditionalCollumns);
+        if (props.NoteTags.length > 1)
+            c.push({ key: 'NoteTagID', field: 'NoteTagID', label: 'Type', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' },
+                content: function (n) { var _a; return (_a = props.NoteTags.find(function (t) { return t.ID === n.NoteTagID; })) === null || _a === void 0 ? void 0 : _a.Name; } });
+        if (props.NoteApplications.length > 1)
+            c.push({ key: 'NoteApplicationID', field: 'NoteApplicationID', label: 'Application', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' },
+                content: function (n) { var _a; return (_a = props.NoteApplications.find(function (t) { return t.ID === n.NoteApplicationID; })) === null || _a === void 0 ? void 0 : _a.Name; } });
+        c.push({
+            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); }
+        });
+        setCollumns(c);
+    }, [props.NoteTags, props.NoteApplications, props.AdditionalCollumns]);
+    React.useEffect(function () {
+        setNotes(data.filter(function (n) { return (props.Filter === undefined ? true : props.Filter(n)); }));
+    }, [props.Filter, data]);
+    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 (defaultApplication != null)
+            newNote.NoteApplicationID = defaultApplication.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 }))));
+    return (React.createElement("div", { className: showCard ? "card" : "", style: { marginBottom: 10, maxHeight: props.MaxHeight, width: '100%' } },
+        React.createElement(react_interactive_1.LoadingScreen, { Show: dataStatus === 'loading' }),
+        React.createElement("div", { className: props.ShowCard === undefined || props.ShowCard ? "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: showCard ? "card-body" : "", style: { maxHeight: props.MaxHeight - 100, overflowY: 'auto', width: '100%' } },
+            allowAdd && !showCard ?
+                React.createElement(React.Fragment, null,
+                    React.createElement(NoteOptions, { Record: note, Setter: function (n) { return setNote(n); }, NoteTags: props.NoteTags, NoteTypes: props.NoteTypes, NoteApplications: props.NoteApplications, ShowApplications: !useFixedApp }),
+                    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. ")))) : null,
+            React.createElement("div", null,
+                React.createElement(react_table_1.default, { cols: collumns, tableClass: "table table-hover", data: notes, 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: props.MaxHeight - 300, width: '100%' }, rowStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, selected: function () { return false; } })),
+            allowAdd && showCard ?
+                React.createElement(NoteOptions, { Record: note, Setter: function (n) { return setNote(n); }, NoteTags: props.NoteTags, NoteTypes: props.NoteTypes, NoteApplications: props.NoteApplications, ShowApplications: !useFixedApp })
+                : 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, { ShowApplications: !useFixedApp, Record: note, Setter: function (n) { return setNote(n); }, NoteTags: props.NoteTags, NoteTypes: props.NoteTypes, NoteApplications: props.NoteApplications }))),
+        allowAdd && showCard ?
+            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. "))))
+            : null,
+        !allowAdd && showCard ? React.createElement("div", { className: props.ShowCard === undefined || props.ShowCard ? "card-footer" : "" }, " ") : null));
+}
+function NoteOptions(props) {
+    var showOptions = props.NoteTags.length > 1 || props.NoteTypes.length > 1 || props.NoteApplications.length > 1;
+    return (React.createElement("div", { className: "row", style: { marginRight: 0, marginLeft: 0 } },
+        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.ShowApplications && 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/SearchBar.d.ts

@@ -1,37 +1,37 @@
-import * as React from 'react';
-import { GenericSlice, Search } from '@gpa-gemstone/react-interactive';
-import { OpenXDA, SystemCenter, Application } from '@gpa-gemstone/application-typings';
-interface U {
-    ID: number | string;
-}
-interface IProps<T extends U> {
-    /** A Generic Slyce for the Search */
-    Slice: GenericSlice<T>;
-    /** Functions that gets available values for any ENUM Types */
-    GetEnum: (setOptions: (options: IOptions[]) => void, field: Search.IField<T>) => () => void;
-    /** Function that Grabs any additional Filters that shoudl be available (such as Addl Fields) */
-    GetAddlFields: (setAddlFields: (cols: Search.IField<T>[]) => void) => () => void;
-    children: React.ReactNode;
-    AddlFilters?: Search.IFilter<T>[];
-    StorageID?: string;
-}
-interface IOptions {
-    Value: string;
-    Label: string;
-}
-/** This Implements a few standardized SearchBars */
-export declare namespace DefaultSearch {
-    /** This Implements a standard Meter Search */
-    function Meter(props: IProps<SystemCenter.Types.DetailedMeter>): JSX.Element;
-    /** This Implements a standard Substation Search */
-    function Location(props: IProps<SystemCenter.Types.DetailedLocation>): JSX.Element;
-    /** This Implements a standard Transmission Asset Search */
-    function Asset(props: IProps<SystemCenter.Types.DetailedAsset>): JSX.Element;
-    /** This Implements a standard AssetGroup Search */
-    function AssetGroup(props: IProps<OpenXDA.Types.AssetGroup>): JSX.Element;
-    /** This Implements a standard User Search */
-    function User(props: IProps<Application.Types.iUserAccount>): JSX.Element;
-    /** This Implements a standard Customer Search */
-    function Customer(props: IProps<OpenXDA.Types.Customer>): JSX.Element;
-}
-export {};
+import * as React from 'react';
+import { GenericSlice, Search } from '@gpa-gemstone/react-interactive';
+import { OpenXDA, SystemCenter, Application } from '@gpa-gemstone/application-typings';
+interface U {
+    ID: number | string;
+}
+interface IProps<T extends U> {
+    /** A Generic Slyce for the Search */
+    Slice: GenericSlice<T>;
+    /** Functions that gets available values for any ENUM Types */
+    GetEnum: (setOptions: (options: IOptions[]) => void, field: Search.IField<T>) => () => void;
+    /** Function that Grabs any additional Filters that shoudl be available (such as Addl Fields) */
+    GetAddlFields: (setAddlFields: (cols: Search.IField<T>[]) => void) => () => void;
+    children: React.ReactNode;
+    AddlFilters?: Search.IFilter<T>[];
+    StorageID?: string;
+}
+interface IOptions {
+    Value: string;
+    Label: string;
+}
+/** This Implements a few standardized SearchBars */
+export declare namespace DefaultSearch {
+    /** This Implements a standard Meter Search */
+    function Meter(props: IProps<SystemCenter.Types.DetailedMeter>): React.JSX.Element;
+    /** This Implements a standard Substation Search */
+    function Location(props: IProps<SystemCenter.Types.DetailedLocation>): React.JSX.Element;
+    /** This Implements a standard Transmission Asset Search */
+    function Asset(props: IProps<SystemCenter.Types.DetailedAsset>): React.JSX.Element;
+    /** This Implements a standard AssetGroup Search */
+    function AssetGroup(props: IProps<OpenXDA.Types.AssetGroup>): React.JSX.Element;
+    /** This Implements a standard User Search */
+    function User(props: IProps<Application.Types.iUserAccount>): React.JSX.Element;
+    /** This Implements a standard Customer Search */
+    function Customer(props: IProps<OpenXDA.Types.Customer>): React.JSX.Element;
+}
+export {};