@gpa-gemstone/common-pages 0.0.62 → 0.0.64

package/lib/Note.d.ts

@@ -12,6 +12,8 @@ interface IProps {
     AllowEdit?: boolean;
     AllowRemove?: boolean;
     AllowAdd?: boolean;
+    ShowCard?: boolean;
+    DefaultApplication?: OpenXDA.Types.NoteApplication;
 }
 declare function Note(props: IProps): JSX.Element;
 export default Note;

package/lib/Note.js

@@ -41,14 +41,52 @@ 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' }
+        },
+        {
+            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); }
+        }
+    ];
+    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 _c = React.useState(CreateNewNote()), note = _c[0], setNote = _c[1];
+    var _d = React.useState(CreateNewNote()), note = _d[0], setNote = _d[1];
     React.useEffect(function () {
         if (dataStatus === 'unintiated' || dataStatus === 'changed' || parentID !== props.ReferenceTableID)
             dispatch(props.NoteSlice.Fetch(props.ReferenceTableID));
@@ -73,15 +111,22 @@ function Note(props) {
             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;
+    React.useEffect(function () {
+        var c = standardCollumns;
+        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; } });
+        setCollumns(c);
+    }, [props.NoteTags, props.NoteApplications]);
     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 (defaultApplication != null)
+            newNote.NoteApplicationID = defaultApplication.ID;
         if (props.NoteTypes.length > 0)
             newNote.NoteTypeID = props.NoteTypes[0].ID;
         if (props.NoteTags.length > 0)
@@ -108,48 +153,47 @@ function Note(props) {
         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%' } },
+    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: "card-header" },
+        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: "card-body", style: { maxHeight: props.MaxHeight - 100, overflowY: 'auto', width: '100%' } },
+        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: [
-                        { 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) {
+                React.createElement(react_table_1.default, { cols: collumns, 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 })
+                    }, 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, { Record: note, Setter: function (n) { return setNote(n); }, NoteTags: props.NoteTags, NoteTypes: props.NoteTypes, NoteApplications: props.NoteApplications }))),
-        allowAdd ?
+                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)
@@ -164,16 +208,17 @@ function Note(props) {
                         React.createElement("p", null,
                             gpa_symbols_1.CrossMark,
                             " The note field is already empty. "))))
-            : React.createElement("div", { className: "card-footer" }, " ")));
+            : 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" },
+    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.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));
+            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.js

@@ -150,7 +150,7 @@ var DefaultSearch;
         React.useEffect(function () {
             return props.GetAddlFields(setAddlFieldCols);
         }, []);
-        return React.createElement(react_interactive_1.SearchBar, { CollumnList: __spreadArray(__spreadArray([], defaultSearchcols, true), addlFieldCols, true), SetFilter: function (flds) { return dispatch(props.Slice.DBSearch({ filter: (props.AddlFilters === undefined ? flds : __spreadArray(__spreadArray([], flds, true), props.AddlFilters, true)), sortField: sortField, ascending: ascending })); }, Direction: 'left', defaultCollumn: standardSearch, Width: '50%', Label: 'Search', ShowLoading: searchStatus === 'loading', ResultNote: searchStatus === 'error' ? 'Could not complete Search' : 'Found ' + data.length + ' Asset Group(s)', GetEnum: props.GetEnum, StorageID: props.StorageID }, props.children);
+        return React.createElement(react_interactive_1.SearchBar, { CollumnList: __spreadArray(__spreadArray([], defaultSearchcols, true), addlFieldCols, true), SetFilter: function (flds) { return dispatch(props.Slice.DBSearch({ filter: (props.AddlFilters === undefined ? flds : __spreadArray(__spreadArray([], flds, true), props.AddlFilters, true)), sortField: sortField, ascending: ascending })); }, Direction: 'left', defaultCollumn: standardSearch, Width: '50%', Label: 'Search', ShowLoading: searchStatus === 'loading', ResultNote: searchStatus === 'error' ? 'Could not complete Search' : 'Found ' + data.length + ' User(s)', GetEnum: props.GetEnum, StorageID: props.StorageID }, props.children);
     }
     DefaultSearch.User = User;
     /** This Implements a standard Customer Search */

package/package.json

@@ -1,66 +1,60 @@
-{
-  "name": "@gpa-gemstone/common-pages",
-  "version": "0.0.62",
-  "description": "Common UI pages for GPA products",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "files": [
-    "lib/**/*"
-  ],
-  "scripts": {
-    "test": "jest --config jestconfig.json",
-    "build": "tsc",
-    "format": "prettier --write \"src/**/*.tsx\"",
-    "lint": "tslint -p tsconfig.json",
-    "prepare": "npm run build",
-    "prepublishOnly": "npm test && npm run lint",
-    "preversion": "npm run lint",
-    "version": "npm run format && git add -A src",
-    "postversion": "git push && git push --tags"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
-  },
-  "keywords": [
-    "React",
-    "Interactive",
-    "GSF",
-    "Gemstone",
-    "GridProtectionAlliance"
-  ],
-  "author": "GridProtectionAlliance",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"
-  },
-  "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
-  "devDependencies": {
-    "@types/crypto-js": "4.0.2",
-    "@types/jest": "^27.0.0",
-    "@types/jquery": "3.5.6",
-    "jest": "^27.0.6",
-    "prettier": "^2.3.2",
-    "ts-jest": "^27.0.4",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "4.4.4"
-  },
-  "dependencies": {
-    "@gpa-gemstone/application-typings": "0.0.53",
-    "@gpa-gemstone/gpa-symbols": "0.0.23",
-    "@gpa-gemstone/helper-functions": "0.0.18",
-    "@gpa-gemstone/react-forms": "1.1.35",
-    "@gpa-gemstone/react-interactive": "1.0.77",
-    "@gpa-gemstone/react-table": "1.2.20",
-    "@reduxjs/toolkit": "1.8.3",
-    "crypto-js": "4.0.0",
-    "moment": "^2.29.4",
-    "react": "^18.2.0",
-    "react-redux": "8.0.2",
-    "styled-components": "5.3.3"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@gpa-gemstone/common-pages",
+  "version": "0.0.64",
+  "description": "Common UI pages for GPA products",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": ["lib/**/*"],
+  "scripts":   {
+    "test": "jest --config jestconfig.json",
+    "build": "tsc",
+    "format": "prettier --write \"src/**/*.tsx\"",
+    "lint": "tslint -p tsconfig.json",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm test && npm run lint",
+    "preversion": "npm run lint",
+    "version": "npm run format && git add -A src",
+    "postversion": "git push && git push --tags"
+  },
+  "repository":   {
+    "type": "git",
+    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
+  },
+  "keywords":   [
+    "React",
+    "Interactive",
+    "GSF",
+    "Gemstone",
+    "GridProtectionAlliance"
+  ],
+  "author": "GridProtectionAlliance",
+  "license": "MIT",
+  "bugs": {"url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"},
+  "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
+  "devDependencies":   {
+    "@types/crypto-js": "4.0.2",
+    "@types/jest": "^27.0.0",
+    "@types/jquery": "3.5.6",
+    "jest": "^27.0.6",
+    "prettier": "^2.3.2",
+    "ts-jest": "^27.0.4",
+    "tslint": "^6.1.3",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "4.4.4"
+  },
+  "dependencies":   {
+    "@gpa-gemstone/application-typings": "0.0.55",
+    "@gpa-gemstone/gpa-symbols": "0.0.25",
+    "@gpa-gemstone/helper-functions": "0.0.19",
+    "@gpa-gemstone/react-forms": "1.1.36",
+    "@gpa-gemstone/react-interactive": "1.0.79",
+    "@gpa-gemstone/react-table": "1.2.22",
+    "@reduxjs/toolkit": "1.8.3",
+    "crypto-js": "4.0.0",
+    "moment": "^2.29.4",
+    "react": "^18.2.0",
+    "react-redux": "8.0.2",
+    "styled-components": "5.3.3"
+  },
+  "publishConfig": {"access": "public"}
+}