@gpa-gemstone/common-pages
Version:
Common UI pages for GPA products
137 lines (136 loc) • 9.3 kB
JavaScript
;
// ******************************************************************************************************
// StandardSelectPopup.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:
// ----------------------------------------------------------------------------------------------------
// 12/19/2021 - C. Lackner
// 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 = SelectPopup;
var react_table_1 = require("@gpa-gemstone/react-table");
var React = __importStar(require("react"));
var react_redux_1 = require("react-redux");
var react_interactive_1 = require("@gpa-gemstone/react-interactive");
var _ = require("lodash");
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
function SelectPopup(props) {
var dispatch = (0, react_redux_1.useDispatch)();
var sortField = (0, react_redux_1.useSelector)(props.Slice.SortField);
var ascending = (0, react_redux_1.useSelector)(props.Slice.Ascending);
var data = (0, react_redux_1.useSelector)(props.Slice.SearchResults);
var _a = React.useState(props.Selection), selectedData = _a[0], setSelectedData = _a[1];
var _b = React.useState(''), sortKeySelected = _b[0], setSortKeySelected = _b[1];
var _c = React.useState(false), ascendingSelected = _c[0], setAscendingSelected = _c[1];
React.useEffect(function () {
setSelectedData(props.Selection);
}, [props.Selection]);
function AddCurrentList() {
var updatedData = selectedData.concat(data);
setSelectedData(_.uniqBy(updatedData, function (d) { return d.ID; }));
}
return (React.createElement(React.Fragment, null,
React.createElement(react_interactive_1.Modal, { Show: props.Show, Title: props.Title, ShowX: true, Size: 'xlg', CallBack: function (conf) { return props.OnClose(selectedData, conf); }, DisableConfirm: props.MinSelection !== undefined && selectedData.length < props.MinSelection, ConfirmShowToolTip: props.MinSelection !== undefined && selectedData.length < props.MinSelection, ConfirmToolTipContent: React.createElement("p", null,
React.createElement(gpa_symbols_1.ReactIcons.CrossMark, null),
" At least ",
props.MinSelection,
" items must be selected. ") },
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col" }, props.Searchbar(React.createElement(React.Fragment, null,
props.Type === 'multiple' ? React.createElement("li", { className: "nav-item", style: { width: '20%', paddingRight: 10 } },
React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "Quick Selects:"),
React.createElement("form", null,
React.createElement("div", { className: "form-group" },
React.createElement("div", { className: "btn btn-primary", onClick: function (event) { event.preventDefault(); AddCurrentList(); } }, "Add Current List to Selection")),
React.createElement("div", { className: "form-group" },
React.createElement("div", { className: "btn btn-danger", onClick: function (event) { event.preventDefault(); setSelectedData([]); } }, "Remove All"))))) : null,
React.Children.map(props.children, function (e) {
if (React.isValidElement(e)) {
if ((e.type === react_table_1.FilterableColumn) ||
(e.type === react_table_1.Column) ||
(e.type === react_table_1.ConfigurableColumn))
return null;
return e;
}
return null;
}))))),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col", style: { width: (props.Type === undefined || props.Type === 'single' ? '100%' : '60%') } },
React.createElement(react_table_1.Table, { TableClass: "table table-hover", Data: data, SortKey: sortField, Ascending: ascending, OnSort: function (d) {
if (d.colKey === "Scroll")
return;
if (d.colKey === sortField)
dispatch(props.Slice.Sort({ SortField: sortField, Ascending: ascending }));
else {
dispatch(props.Slice.Sort({ SortField: d.colField, Ascending: true }));
}
}, OnClick: function (d) {
if (props.Type === undefined || props.Type === 'single')
setSelectedData([d.row]);
else
setSelectedData(function (s) { return __spreadArray(__spreadArray([], s.filter(function (item) { return item.ID !== d.row.ID; }), true), [d.row], false); });
}, Selected: function (item) { return selectedData.findIndex(function (d) { return d.ID === item.ID; }) > -1; }, KeySelector: function (item) { return item.ID; } }, props.children)),
props.Type === 'multiple' ? React.createElement("div", { className: "col", style: { width: '40%' } },
React.createElement("div", { style: { width: '100%' } },
React.createElement("h3", null, " Current Selection ")),
React.createElement(react_table_1.Table, { TableClass: "table table-hover", Data: selectedData, SortKey: sortKeySelected, Ascending: ascendingSelected, OnSort: function (d) {
if (d.colKey === sortKeySelected) {
var ordered = _.orderBy(selectedData, [d.colKey], [(!ascendingSelected ? "asc" : "desc")]);
setAscendingSelected(!ascendingSelected);
setSelectedData(ordered);
}
else {
var ordered = _.orderBy(selectedData, [d.colKey], ["asc"]);
setAscendingSelected(!ascendingSelected);
setSelectedData(ordered);
setSortKeySelected(d.colKey);
}
}, OnClick: function (d) { return setSelectedData(__spreadArray([], selectedData.filter(function (item) { return item.ID !== d.row.ID; }), true)); }, Selected: function () { return false; }, KeySelector: function (item) { return item.ID; } }, props.children)) : null))));
}