@gpa-gemstone/common-pages 0.0.121 → 0.0.123

package/lib/BulkUpload.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> {
+    /**
+    * Attribute used to control what type of files are filtered by default in file explorer
+    * @type {string}
+    * */
+    FileTypeAttribute: string;
+    /**
+    * Array of available pipelines to use
+    * @type {IPipeline[]}
+    * */
+    Pipelines: Gemstone.TSX.Interfaces.IPipeline<T, any>[];
+    /**
+    * React Component to be used in the Review Step
+    * @type {React.FC<IReviewProps<T>>}
+    * */
+    ReviewUI: (props: {
+        Data: T[];
+    }) => JSX.Element;
+    /**
+    * React Component to be used in the Review Step
+    * @type {React.FC<IReviewProps<T>>}
+    * */
+    CompleteUI?: JSX.Element;
+    /**
+    * Index of the steps array in the current pipline
+    * @type {React.FC<IReviewProps<T>>}
+    * */
+    CurrentPipelineStep: number;
+    /**
+    * Setter to pass into the pipeline UI Components
+    * @type {React.FC<IReviewProps<T>>}
+    * */
+    SetCurrentPipelineStep: (step: number) => void;
+    /**
+    * Step to represent current stage of component
+    * @type {'Upload' | 'Process' | 'Review' | 'Complete'}
+    * */
+    Step: Gemstone.TSX.Types.BulkUploadStep;
+    /**
+     * Callback function invoked when the Step prop is set to Complete.
+     * @param {T[]} records - The processed records.
+     */
+    OnComplete: (records: T[]) => void;
+    /**
+     * Callback function to set errors encountered during CSV processing.
+     * @param {string[]} errors - Array of error messages.
+     */
+    SetErrors: (errors: string[]) => void;
+}
+export default function BulkUpload<T>(props: IProps<T>): React.JSX.Element;
+export {};

package/lib/BulkUpload.js

@@ -0,0 +1,156 @@
+"use strict";
+// ******************************************************************************************************
+//  BulkUpload.tsx - Gbtc
+//
+//  Copyright © 2024, 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/24/2024 - Preston Crawford
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BulkUpload;
+var React = __importStar(require("react"));
+var react_interactive_1 = require("@gpa-gemstone/react-interactive");
+var steps = [{ short: 'Upload', long: 'Upload', id: 'Upload' }, { short: 'Process', long: 'Process', id: 'Process' }, { short: "Review", id: 'Review', long: 'Review' }, { short: 'Complete', long: 'Complete', id: 'Complete' }];
+var fileExtRegex = /(\.[^.]+)$/;
+function BulkUpload(props) {
+    var _a, _b;
+    var _c = React.useState([]), data = _c[0], setData = _c[1];
+    var _d = React.useState([]), pipelineErrors = _d[0], setPipelineErrors = _d[1];
+    var _e = React.useState(null), fileName = _e[0], setFileName = _e[1];
+    var _f = React.useState(null), rawFileContent = _f[0], setRawFileContent = _f[1];
+    var _g = React.useState(null), currentPipelineIndex = _g[0], setCurrentPipelineIndex = _g[1];
+    var _h = React.useState(true), isFileTypeValid = _h[0], setIsFileTypeValid = _h[1];
+    var _j = React.useState('Upload'), activeProgressStep = _j[0], setActiveProgressStep = _j[1];
+    var pipelineUI = React.useMemo(function () {
+        var _a, _b, _c, _d;
+        if (props.Step === 'Upload' || props.Step === 'Complete' || currentPipelineIndex == null || currentPipelineIndex > props.Pipelines.length - 1 || props.CurrentPipelineStep > ((_c = (_b = (_a = props.Pipelines) === null || _a === void 0 ? void 0 : _a[currentPipelineIndex]) === null || _b === void 0 ? void 0 : _b.Steps) === null || _c === void 0 ? void 0 : _c.length) - 1)
+            return React.createElement(React.Fragment, null);
+        var pipeline = props.Pipelines[currentPipelineIndex].Steps[props.CurrentPipelineStep];
+        return React.createElement(pipeline.UI, { AdditionalProps: (_d = props.Pipelines[currentPipelineIndex].Steps[props.CurrentPipelineStep]) === null || _d === void 0 ? void 0 : _d.AdditionalProps, RawFileData: rawFileContent, SetData: setData, SetPipelineStep: props.SetCurrentPipelineStep, CurrentPipelineStep: props.CurrentPipelineStep, Errors: pipelineErrors, SetErrors: setPipelineErrors });
+    }, [props.Step, currentPipelineIndex, rawFileContent, props.CurrentPipelineStep, props.Pipelines]);
+    var progressSteps = React.useMemo(function () {
+        var _a, _b, _c;
+        if (currentPipelineIndex == null || currentPipelineIndex > props.Pipelines.length - 1 || props.CurrentPipelineStep > ((_c = (_b = (_a = props.Pipelines) === null || _a === void 0 ? void 0 : _a[currentPipelineIndex]) === null || _b === void 0 ? void 0 : _b.Steps) === null || _c === void 0 ? void 0 : _c.length) - 1)
+            return steps;
+        var pipelineSteps = props.Pipelines[currentPipelineIndex].Steps.map(function (step, i) { return ({ short: step.Label, long: step.Label, id: i }); });
+        var uploadIndex = steps.findIndex(function (step) { return step.short === 'Upload'; });
+        var progressIndex = steps.findIndex(function (step) { return step.short === 'Process'; });
+        var remainingSteps = steps.slice(progressIndex + 1);
+        return [steps[uploadIndex]].concat(pipelineSteps, remainingSteps);
+    }, [currentPipelineIndex, props.Pipelines]);
+    React.useEffect(function () {
+        var _a, _b, _c;
+        if (props.Step !== 'Process') {
+            setActiveProgressStep(props.Step);
+            return;
+        }
+        if (currentPipelineIndex == null || currentPipelineIndex > props.Pipelines.length - 1 || props.CurrentPipelineStep > ((_c = (_b = (_a = props.Pipelines) === null || _a === void 0 ? void 0 : _a[currentPipelineIndex]) === null || _b === void 0 ? void 0 : _b.Steps) === null || _c === void 0 ? void 0 : _c.length) - 1)
+            return;
+        setActiveProgressStep(props.CurrentPipelineStep); //ids for conditional progressSteps are index of the pipeline steps
+    }, [props.CurrentPipelineStep, currentPipelineIndex, props.Step]);
+    React.useEffect(function () {
+        var pipelineErrs = props.Step == 'Process' ? pipelineErrors : [];
+        var errors = __spreadArray([], pipelineErrs, true);
+        if (fileName == null)
+            errors.push('A file must be uploaded to continue');
+        if (rawFileContent == null || rawFileContent == '')
+            errors.push('File content is empty');
+        if (!isFileTypeValid)
+            errors.push("File must be of type ".concat(props.FileTypeAttribute));
+        props.SetErrors(errors);
+    }, [rawFileContent, fileName, isFileTypeValid, pipelineErrors, props.Step]);
+    React.useEffect(function () {
+        if (props.Step !== 'Complete')
+            return;
+        props.OnComplete(data);
+    }, [props.Step, data, props.OnComplete]);
+    var handleFileUpload = function (evt) {
+        if (evt.target == null || evt.target.files == null || evt.target.files.length === 0)
+            return;
+        var file = evt.target.files[0];
+        var matchArray = file.name.match(fileExtRegex);
+        var fileExtension = matchArray != null ? matchArray[0].substring(1) : '';
+        var pipelineIndex = props.Pipelines.findIndex(function (pipe) { return pipe.Select(file.type, fileExtension); });
+        if (pipelineIndex == -1) {
+            setIsFileTypeValid(false);
+            return;
+        }
+        setCurrentPipelineIndex(pipelineIndex);
+        setFileName(file.name);
+        var fileReader = new FileReader();
+        fileReader.readAsText(file);
+        fileReader.onload = function (e) {
+            if (e.target == null)
+                return;
+            setRawFileContent(e.target.result);
+        };
+    };
+    return (React.createElement("div", { className: "container-fluid d-flex flex-column p-0 h-100" },
+        React.createElement("div", { className: 'row h-100' },
+            React.createElement("div", { className: 'col-12 d-flex flex-column h-100' },
+                React.createElement("div", { className: 'row' },
+                    React.createElement("div", { className: 'col-12' },
+                        React.createElement(react_interactive_1.ProgressBar, { steps: progressSteps, activeStep: activeProgressStep }))),
+                props.Step === 'Upload' ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: 'row justify-content-center' },
+                            React.createElement("div", { className: 'col-6' },
+                                React.createElement("div", { className: "custom-file" },
+                                    React.createElement("input", { type: "file", className: "custom-file-input", id: "inputGroupFile02", onChange: handleFileUpload, accept: props.FileTypeAttribute, style: { cursor: 'pointer' } }),
+                                    React.createElement("label", { className: "custom-file-label", htmlFor: "inputGroupFile02", "aria-describedby": "inputGroupFileAddon02" }, fileName == null ? 'Upload File' : fileName)))),
+                        React.createElement("div", { className: 'row' },
+                            React.createElement("div", { className: 'col-12 h-100' }, currentPipelineIndex != null && ((_a = props.Pipelines[currentPipelineIndex]) === null || _a === void 0 ? void 0 : _a.AdditionalUploadUI) != null ? (_b = props.Pipelines[currentPipelineIndex]) === null || _b === void 0 ? void 0 : _b.AdditionalUploadUI : null)))
+                    : null,
+                React.createElement("div", { className: "".concat(props.Step !== 'Process' ? 'd-none' : 'row flex-grow-1'), style: { overflowY: 'hidden' } },
+                    React.createElement("div", { className: 'col-12 h-100' }, pipelineUI)),
+                props.Step === 'Review' || (props.Step === 'Complete' && props.CompleteUI != null) ?
+                    React.createElement("div", { className: 'row flex-grow-1', style: { overflowY: 'hidden' } },
+                        React.createElement("div", { className: 'col-12 h-100' }, props.Step == 'Review' ? React.createElement(props.ReviewUI, { Data: data }) : props.Step === 'Complete' ? props.CompleteUI : null)) : null))));
+}

package/lib/Note.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Column } from '@gpa-gemstone/react-table';
 import { OpenXDA } from '@gpa-gemstone/application-typings';
 import { IGenericSlice } from './SliceInterfaces';
 interface IProps {
@@ -16,7 +15,6 @@ interface IProps {
     ShowCard?: boolean;
     DefaultApplication?: OpenXDA.Types.NoteApplication;
     Filter?: (note: OpenXDA.Types.Note) => boolean;
-    AdditionalCollumns?: Column<OpenXDA.Types.Note>[];
 }
-declare function Note(props: IProps): React.JSX.Element;
+declare function Note(props: React.PropsWithChildren<IProps>): React.JSX.Element;
 export default Note;

package/lib/Note.js

@@ -54,34 +54,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 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;
@@ -90,14 +72,13 @@ function Note(props) {
     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 parentID = (0, react_redux_1.useSelector)((props.NoteSlice.ParentID === undefined ? function () { 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];
+    var _c = React.useState(CreateNewNote()), note = _c[0], setNote = _c[1];
+    var _d = React.useState([]), notes = _d[0], setNotes = _d[1];
     React.useEffect(function () {
         if (dataStatus === 'unintiated' || dataStatus === 'changed' || parentID !== props.ReferenceTableID)
             dispatch(props.NoteSlice.Fetch(props.ReferenceTableID));
@@ -122,34 +103,6 @@ function Note(props) {
             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]);
@@ -198,50 +151,73 @@ function Note(props) {
                     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(react_interactive_1.ToolTip, { Show: hover === 'add' && (note.Note === null || note.Note.length === 0), Position: 'top', Target: "Add" },
                             React.createElement("p", null,
-                                gpa_symbols_1.CrossMark,
+                                React.createElement(gpa_symbols_1.ReactIcons.CrossMark, null),
                                 " 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(react_interactive_1.ToolTip, { Show: hover === 'clear' && (note.Note === null || note.Note.length === 0), Position: 'top', Target: "Remove" },
                             React.createElement("p", null,
-                                gpa_symbols_1.CrossMark,
-                                " The note field is already empty. ")))) : null,
+                                React.createElement(gpa_symbols_1.ReactIcons.CrossMark, null),
+                                " 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) {
+                React.createElement(react_table_1.Table, { 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; } })),
+                    }, OnClick: function () { return; }, TbodyStyle: { maxHeight: props.MaxHeight - 300 }, Selected: function () { return false; }, KeySelector: function (d) { return d.ID; } },
+                    React.createElement(react_table_1.Column, { Key: "Note", Field: "Note", HeaderStyle: { width: '50%' }, RowStyle: { width: '50%' } }, "Note"),
+                    React.createElement(react_table_1.Column, { Key: "Timestamp", Field: "Timestamp", HeaderStyle: { width: 'auto' }, RowStyle: { width: 'auto' }, Content: function (row) { return moment.utc(row.item.Timestamp).format("MM/DD/YYYY HH:mm"); } }, "Time"),
+                    React.createElement(react_table_1.Column, { Key: "UserAccount", Field: "UserAccount", HeaderStyle: { width: 'auto' }, RowStyle: { width: 'auto' } }, "User"),
+                    props.children,
+                    props.NoteTags.length > 1 ?
+                        React.createElement(react_table_1.Column, { Key: "NoteTagID", Field: "NoteTagID", HeaderStyle: { width: 'auto' }, RowStyle: { width: 'auto' }, Content: function (row) { var _a; return (_a = props.NoteTags.find(function (t) { return t.ID === row.item.NoteTagID; })) === null || _a === void 0 ? void 0 : _a.Name; } }, "Type")
+                        : React.createElement(React.Fragment, null),
+                    props.NoteApplications.length > 1 ?
+                        React.createElement(react_table_1.Column, { Key: "NoteApplicationID", Field: "NoteApplicationID", HeaderStyle: { width: 'auto' }, RowStyle: { width: 'auto' }, Content: function (row) { var _a; return (_a = props.NoteApplications.find(function (t) { return t.ID === row.item.NoteApplicationID; })) === null || _a === void 0 ? void 0 : _a.Name; } }, "Application")
+                        : React.createElement(React.Fragment, null),
+                    React.createElement(react_table_1.Column, { Key: "buttons", HeaderStyle: { width: 'auto' }, RowStyle: { width: 'auto' }, Content: function (row) {
+                            return React.createElement(React.Fragment, null,
+                                allowEdit ?
+                                    React.createElement("button", { className: "btn btn-sm", onClick: function () { return handleEdit(row.item); } },
+                                        React.createElement(gpa_symbols_1.ReactIcons.CrossMark, null))
+                                    : null,
+                                allowRemove ?
+                                    React.createElement("button", { className: "btn btn-sm", onClick: function () { return dispatch(props.NoteSlice.DBAction({ verb: 'DELETE', record: row.item })); } },
+                                        React.createElement(gpa_symbols_1.ReactIcons.TrashCan, null))
+                                    : null);
+                        } }, "\u00A0"))),
             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(gpa_symbols_1.ReactIcons.CrossMark, null),
+                    " 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(react_interactive_1.ToolTip, { Show: hover === 'add' && (note.Note === null || note.Note.length === 0), Position: 'top', Target: "Add" },
                         React.createElement("p", null,
-                            gpa_symbols_1.CrossMark,
-                            " A note needs to be entered. "))),
+                            React.createElement(gpa_symbols_1.ReactIcons.CrossMark, null),
+                            " 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(react_interactive_1.ToolTip, { Show: hover === 'clear' && (note.Note === null || note.Note.length === 0), Position: 'top', Target: "Remove" },
                         React.createElement("p", null,
-                            gpa_symbols_1.CrossMark,
+                            React.createElement(gpa_symbols_1.ReactIcons.CrossMark, null),
                             " The note field is already empty. "))))
             : null,
-        !allowAdd && showCard ? React.createElement("div", { className: props.ShowCard === undefined || props.ShowCard ? "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;

package/lib/Pipelines/CSVPipeline.d.ts

@@ -0,0 +1,7 @@
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IAdditionalProps<T> {
+    Fields: Gemstone.TSX.Interfaces.ICSVField<T>[];
+    DataHasHeaders: boolean;
+}
+export declare function useCSVPipeline<T = unknown>(csvFields: Gemstone.TSX.Interfaces.ICSVField<T>[]): Gemstone.TSX.Interfaces.IPipeline<T, IAdditionalProps<T>>;
+export {};