@gpa-gemstone/common-pages
Version:
Common UI pages for GPA products
233 lines (232 loc) • 19.4 kB
JavaScript
"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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(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 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 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 () { 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([]), notes = _d[0], setNotes = _d[1];
React.useEffect(function () {
if (dataStatus === 'uninitiated' || 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 () {
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: { border: '0px', 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', Target: "Add" },
React.createElement("p", null,
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', Target: "Remove" },
React.createElement("p", 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.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; }, 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.Pencil, 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,
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', Target: "Add" },
React.createElement("p", null,
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', Target: "Remove" },
React.createElement("p", null,
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));
}
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;