@gpa-gemstone/common-pages
Version:
Common UI pages for GPA products
534 lines (533 loc) • 36.6 kB
JavaScript
;
// ******************************************************************************************************
// CSVPipeline.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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
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));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCSVPipeline = useCSVPipeline;
var React = __importStar(require("react"));
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
var react_interactive_1 = require("@gpa-gemstone/react-interactive");
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 lodash_1 = require("lodash");
var ErrorBoundary_1 = __importDefault(require("../../ErrorBoundary"));
var CSVFieldContext_1 = require("./CSVFieldContext");
var AdditionalUploadUI = function (props) {
return (React.createElement("div", { className: 'row justify-content-center' },
React.createElement("div", { className: 'col-6 p-0' },
React.createElement(react_forms_1.CheckBox, { Record: { HasHeaders: props.HasHeaders }, Field: "HasHeaders", Setter: function (record) { return props.SetHasHeaders(record.HasHeaders); }, Label: 'My Data Has Headers' }))));
};
function useCSVPipeline(csvFields, additionalSteps) {
var _a = React.useState(false), hasHeaders = _a[0], setHasHeaders = _a[1];
//Define
var _b = React.useState([]), headers = _b[0], setHeaders = _b[1];
var _c = React.useState(new Map()), headerMap = _c[0], setHeaderMap = _c[1];
var _d = React.useState([]), data = _d[0], setData = _d[1];
var baseStep = {
Label: 'Edit CSV',
UI: CsvPipelineEditStep,
AdditionalProps: {
Fields: csvFields,
DataHasHeaders: hasHeaders,
Headers: headers,
SetHeaders: setHeaders,
Data: data,
SetData: setData,
HeaderMap: headerMap,
SetHeaderMap: setHeaderMap
}
};
var steps = additionalSteps == null ? [baseStep] : __spreadArray([baseStep], additionalSteps, true);
return {
Select: function (mimeType, fileExt) { return mimeType.toLowerCase() === 'text/csv' || fileExt === 'csv'; },
Steps: steps,
AdditionalUploadUI: React.createElement(AdditionalUploadUI, { HasHeaders: hasHeaders, SetHasHeaders: setHasHeaders })
};
}
function CsvPipelineEditStep(props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
var rawDataRef = React.useRef();
var _z = React.useState([]), pagedData = _z[0], setPagedData = _z[1];
var _0 = React.useState(0), page = _0[0], setPage = _0[1];
var _1 = React.useState(1), totalPages = _1[0], setTotalPages = _1[1];
var _2 = React.useState(true), isFileParseable = _2[0], setIsFileParseable = _2[1];
var _3 = React.useState(0), isCSVMissingHeadersCount = _3[0], setIsCSVMissingHeadersCount = _3[1];
var _4 = React.useState(0), isCSVMissingDataCellsCount = _4[0], setIsCSVMissingDataCellsCount = _4[1];
React.useEffect(function () {
var _a, _b, _c, _d, _e;
if (((_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Data.length) === 0)
return;
var pages = Math.ceil(((_c = (_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Data.length) !== null && _c !== void 0 ? _c : 0) / 10);
setTotalPages(pages);
var Data = __spreadArray([], ((_e = (_d = props.AdditionalProps) === null || _d === void 0 ? void 0 : _d.Data) !== null && _e !== void 0 ? _e : []), true);
setPagedData(Data.slice(page * 10, (page + 1) * 10));
}, [(_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Data, page]);
React.useEffect(function () {
var callback;
function runValidation() {
return __awaiter(this, void 0, void 0, function () {
var errors, headerMap, _loop_1, _i, _a, field;
var _b, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
errors = [];
if (props.AdditionalProps == null)
return [2 /*return*/];
headerMap = props.AdditionalProps.HeaderMap;
_loop_1 = function (field) {
var matchedHeader, fieldIndex, foundDuplicate, foundEmpty, foundInvalid, uniqueValues, _e, _f, row, value, result, isValid, abortCallback, allValues;
return __generator(this, function (_g) {
switch (_g.label) {
case 0:
matchedHeader = (_b = Array.from(headerMap).find(function (_a) {
var value = _a[1];
return value === field.Field;
})) === null || _b === void 0 ? void 0 : _b[0];
if (matchedHeader == null) {
if (field.Required)
errors.push("".concat(field.Label, " is required and must be mapped to a header."));
return [2 /*return*/, "continue"];
}
fieldIndex = props.AdditionalProps.Headers.indexOf(matchedHeader);
foundDuplicate = false;
foundEmpty = false;
foundInvalid = false;
uniqueValues = new Set();
_e = 0, _f = props.AdditionalProps.Data;
_g.label = 1;
case 1:
if (!(_e < _f.length)) return [3 /*break*/, 4];
row = _f[_e];
value = row[fieldIndex + 1];
// Unique check
if (field.Unique) {
if (uniqueValues.has(value))
foundDuplicate = true;
else
uniqueValues.add(value);
}
// Allowed emptiness
if (!field.AllowEmpty && (value == null || (value.trim() === '')))
foundEmpty = true;
return [4 /*yield*/, Promise.resolve(field.Validate(value))];
case 2:
result = _g.sent();
isValid = void 0;
if (Array.isArray(result)) {
//[boolean, abortCallback]
isValid = result[0];
abortCallback = result[1];
if (typeof abortCallback === 'function')
callback = abortCallback;
}
else
isValid = result;
if (!isValid) {
foundInvalid = true;
}
_g.label = 3;
case 3:
_e++;
return [3 /*break*/, 1];
case 4:
if (field.Unique && foundDuplicate)
errors.push("All ".concat(field.Label, " values must be unique."));
if (foundEmpty)
errors.push("All ".concat(field.Label, " values cannot be empty."));
if (foundInvalid)
errors.push("All ".concat(field.Label, " values must be valid."));
// Check for SameValueForAllRows
if ((_c = field.SameValueForAllRows) !== null && _c !== void 0 ? _c : false) {
allValues = props.AdditionalProps.Data.map(function (row) { var _a; return (_a = row[fieldIndex + 1]) !== null && _a !== void 0 ? _a : ''; });
if (new Set(allValues).size > 1)
errors.push("All rows must contain the same value for ".concat(field.Label, "."));
}
return [2 /*return*/];
}
});
};
_i = 0, _a = props.AdditionalProps.Fields;
_d.label = 1;
case 1:
if (!(_i < _a.length)) return [3 /*break*/, 4];
field = _a[_i];
return [5 /*yield**/, _loop_1(field)];
case 2:
_d.sent();
_d.label = 3;
case 3:
_i++;
return [3 /*break*/, 1];
case 4:
if (!(0, lodash_1.isEqual)(props.Errors.sort(), errors.sort()))
props.SetErrors(errors);
return [2 /*return*/];
}
});
});
}
runValidation();
return function () {
if (callback != null)
callback();
};
}, [(_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Data, (_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.Headers, (_d = props.AdditionalProps) === null || _d === void 0 ? void 0 : _d.HeaderMap, isFileParseable, (_e = props.AdditionalProps) === null || _e === void 0 ? void 0 : _e.Fields]);
//Effect to parse rawfiledata initially
React.useEffect(function () {
var _a, _b;
if (props.RawFileData == null || props.AdditionalProps == null || rawDataRef.current === props.RawFileData || props.AdditionalProps.Data.length !== 0 || props.AdditionalProps.Headers.length !== 0)
return;
var parsedData;
try {
parsedData = parseCSV(props.RawFileData, props.AdditionalProps.DataHasHeaders, props.AdditionalProps.Fields.filter(function (field) { return field.Required; }).length);
}
catch (_c) {
setIsFileParseable(false);
return;
}
setIsFileParseable(true);
if (parsedData.AddedMissingDataValues)
setIsCSVMissingDataCellsCount(function (p) { return p + 1; });
if (parsedData.AddedMissingHeaders)
setIsCSVMissingHeadersCount(function (p) { return p + 1; });
(_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.SetData(parsedData.Data);
props.AdditionalProps.SetHeaders(parsedData.Headers);
(_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.SetHeaderMap(autoMapHeaders(parsedData.Headers, props.AdditionalProps.Fields.map(function (field) { return field.Field; })));
rawDataRef.current = props.RawFileData;
}, [props.RawFileData, props.AdditionalProps]);
//Effect to add additional columns for required fields during mapping process
React.useEffect(function () {
var _a, _b, _c, _d, _e, _f, _g;
if (((_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields) == null || ((_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Fields.length) === 0 || ((_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.Data.length) === 0 || props.AdditionalProps.Headers == null)
return;
var requiredCount = props.AdditionalProps.Fields.filter(function (f) { return f.Required; }).length;
var optionalFields = props.AdditionalProps.Fields.filter(function (f) { return !f.Required; }).map(function (f) { return f.Field; });
var mappedOptionalCount = 0;
Array.from((_d = props.AdditionalProps) === null || _d === void 0 ? void 0 : _d.HeaderMap.values()).forEach(function (mappedField) {
if (mappedField != null && optionalFields.includes(mappedField))
mappedOptionalCount++;
});
var neededCols = requiredCount + mappedOptionalCount;
if (props.AdditionalProps.Headers.length >= neededCols)
return;
// Extend headers (A, B, C, etc.) until we reach 'neededCols'
var extendedHeaders = __spreadArray([], props.AdditionalProps.Headers, true);
for (var i = (_e = props.AdditionalProps) === null || _e === void 0 ? void 0 : _e.Headers.length; i < neededCols; i++) {
extendedHeaders.push(String.fromCharCode(65 + i)); // 'A', 'B', ...
}
// Extend every row in 'data' accordingly
var extendedData = (_f = props.AdditionalProps) === null || _f === void 0 ? void 0 : _f.Data.map(function (row) {
var currentCols = row.length - 1; // minus the row index at row[0]
if (currentCols < neededCols)
return __spreadArray(__spreadArray([], row, true), Array(neededCols - currentCols).fill(''), true);
return row;
});
(_g = props.AdditionalProps) === null || _g === void 0 ? void 0 : _g.SetHeaders(extendedHeaders);
props.AdditionalProps.SetData(extendedData);
}, [(_f = props.AdditionalProps) === null || _f === void 0 ? void 0 : _f.Fields, (_g = props.AdditionalProps) === null || _g === void 0 ? void 0 : _g.Headers, (_h = props.AdditionalProps) === null || _h === void 0 ? void 0 : _h.Data, (_j = props.AdditionalProps) === null || _j === void 0 ? void 0 : _j.HeaderMap]);
//Effect to add additionalFields that cant be determined at build time
React.useEffect(function () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
if (((_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields) == null || ((_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Fields.length) === 0 || ((_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.Data.length) === 0 || ((_d = props.AdditionalProps) === null || _d === void 0 ? void 0 : _d.Headers) == null)
return;
var requiredCount = props.AdditionalProps.Fields.filter(function (f) { return f.Required; }).length;
// If we already have enough columns, do nothing
if (((_e = props.AdditionalProps) === null || _e === void 0 ? void 0 : _e.Headers.length) >= requiredCount)
return;
// Extend 'headers' array (e.g., "A", "B", "C"...)
var extendedHeaders = __spreadArray([], props.AdditionalProps.Headers, true);
for (var i = (_f = props.AdditionalProps) === null || _f === void 0 ? void 0 : _f.Headers.length; i < requiredCount; i++) {
extendedHeaders.push(String.fromCharCode(65 + i)); // 'A', 'B', 'C', ...
}
// Extend each row in 'data' with blank strings for the new columns
var extendedData = (_g = props.AdditionalProps) === null || _g === void 0 ? void 0 : _g.Data.map(function (row) {
// row already has an index at row[0], plus (headers.length - 1) columns
var neededCols = requiredCount - (row.length - 1);
if (neededCols > 0) {
return __spreadArray(__spreadArray([], row, true), Array(neededCols).fill(''), true);
}
return row;
});
(_h = props.AdditionalProps) === null || _h === void 0 ? void 0 : _h.SetHeaders(extendedHeaders);
(_j = props.AdditionalProps) === null || _j === void 0 ? void 0 : _j.SetData(extendedData);
}, [(_k = props.AdditionalProps) === null || _k === void 0 ? void 0 : _k.Fields, (_l = props.AdditionalProps) === null || _l === void 0 ? void 0 : _l.Headers, (_m = props.AdditionalProps) === null || _m === void 0 ? void 0 : _m.Data]);
React.useEffect(function () {
var _a;
if (props.AdditionalProps == null || props.Errors.length !== 0)
return;
var mappedData = [];
(_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Data.forEach(function (row) {
var _a;
var record = {};
(_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Headers.forEach(function (header, index) {
var _a, _b;
var mappedField = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.HeaderMap.get(header);
if (mappedField == null)
return;
var field = (_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.Fields.find(function (f) { return f.Field === mappedField; });
if (field == null)
return;
var value = row[index + 1];
record = field.Process(value, record, field.Field);
});
mappedData.push(record);
});
props.SetData(mappedData);
}, [(_o = props.AdditionalProps) === null || _o === void 0 ? void 0 : _o.Data, (_p = props.AdditionalProps) === null || _p === void 0 ? void 0 : _p.Headers, (_q = props.AdditionalProps) === null || _q === void 0 ? void 0 : _q.HeaderMap, (_r = props.AdditionalProps) === null || _r === void 0 ? void 0 : _r.Fields, props.Errors]);
var getFieldSelect = React.useCallback(function (header) {
var _a, _b, _c;
if (props.AdditionalProps == null || ((_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Fields.length) === 0)
return;
var field = (_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.HeaderMap.get(header);
var usedFields = Array.from((_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.HeaderMap.entries())
.filter(function (_a) {
var mappedHeader = _a[0], mappedField = _a[1];
return mappedHeader !== header && mappedField != null;
})
.map(function (_a) {
var mappedField = _a[1];
return mappedField;
});
var selectOptions = props.AdditionalProps.Fields
.filter(function (f) { return !usedFields.includes(f.Field) || f.Field === field; })
.map(function (f) { return ({ Value: f.Field, Label: f.Label }); });
var updateMap = function (head, val) { var _a, _b; return (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.SetHeaderMap(new Map((_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.HeaderMap).set(head, val)); };
var matchedField = props.AdditionalProps.Fields.find(function (f) { return f.Field === field; });
var help = (matchedField === null || matchedField === void 0 ? void 0 : matchedField.Help) != null ? matchedField === null || matchedField === void 0 ? void 0 : matchedField.Help : undefined;
return React.createElement(react_forms_1.Select, { Record: { Header: header, Value: field }, EmptyOption: true, Label: ' ', Help: help, Options: selectOptions, Field: "Value", Setter: function (record) { return updateMap(record.Header, record.Value); } });
}, [(_s = props.AdditionalProps) === null || _s === void 0 ? void 0 : _s.Fields, (_t = props.AdditionalProps) === null || _t === void 0 ? void 0 : _t.HeaderMap]);
var handleValueChange = React.useCallback(function (rowIndex, colIndex, value) {
var _a, _b, _c;
var data = __spreadArray([], ((_b = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Data) !== null && _b !== void 0 ? _b : []), true);
data[rowIndex][colIndex] = value;
(_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.SetData(data);
}, [(_u = props.AdditionalProps) === null || _u === void 0 ? void 0 : _u.Data]);
var handleRowDelete = function (rowIndex) {
var _a, _b, _c;
var newData = __spreadArray([], ((_b = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.Data) !== null && _b !== void 0 ? _b : []), true);
newData.splice(rowIndex, 1);
(_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.SetData(newData);
};
var getHeader = function (header) {
var _a;
if (props.AdditionalProps == null)
return;
var mappedField = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.HeaderMap.get(header);
if (mappedField == null)
return header;
var matchedField = props.AdditionalProps.Fields.find(function (field) { return field.Field === mappedField; });
if (matchedField == null)
return header;
return null; //return null since the select element will have a label attached to it
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "container-fluid d-flex flex-column p-0 h-100" },
React.createElement(ErrorBoundary_1.default, { ClassName: "row h-100", ErrorMessage: 'Error loading page.' },
React.createElement("div", { className: 'row h-100' },
React.createElement("div", { className: 'col-12 d-flex flex-column h-100' }, pagedData.length !== 0 ?
React.createElement(React.Fragment, null,
isCSVMissingDataCellsCount > 0 && isCSVMissingHeadersCount > 0 ? (React.createElement("div", { className: 'row' },
React.createElement("div", { className: 'col-12' },
React.createElement(react_interactive_1.Alert, { Class: 'alert-info', ReTrigger: isCSVMissingDataCellsCount + isCSVMissingHeadersCount },
React.createElement("p", { style: { whiteSpace: 'nowrap' } }, "Missing data cells were added to meet the number of required fields."),
React.createElement("hr", null),
React.createElement("p", { style: { whiteSpace: 'nowrap' } }, "Missing headers were added to meet the number of required fields."))))) : isCSVMissingDataCellsCount > 0 || isCSVMissingHeadersCount > 0 ? (React.createElement("div", { className: 'row' },
React.createElement("div", { className: 'col-12' },
React.createElement(react_interactive_1.Alert, { Class: 'alert-info', ReTrigger: isCSVMissingDataCellsCount > 0 ? isCSVMissingDataCellsCount : isCSVMissingHeadersCount },
React.createElement("p", { style: { whiteSpace: 'nowrap' } }, isCSVMissingDataCellsCount > 0 ? 'Missing data cells were added to meet the number of required fields.' : 'Missing headers were added to meet the number of required fields.'))))) : null,
React.createElement("div", { className: 'row flex-grow-1', style: { overflowY: 'hidden' } },
React.createElement("div", { className: 'col-12 h-100' },
React.createElement(react_table_1.Table, { Data: pagedData, key: (_v = props.AdditionalProps) === null || _v === void 0 ? void 0 : _v.Headers.join(','), SortKey: '', Ascending: false, OnSort: function () { }, KeySelector: function (data) { return data[0]; }, TableClass: 'table', TableStyle: { height: '100%', width: ((_x = (_w = props.AdditionalProps) === null || _w === void 0 ? void 0 : _w.Headers.length) !== null && _x !== void 0 ? _x : 0) * 150 } }, (_y = props.AdditionalProps) === null || _y === void 0 ? void 0 :
_y.Headers.map(function (header, i) {
return React.createElement(react_table_1.Column, { Key: header, Field: i + 1, AllowSort: false, Content: function (_a) {
var _b, _c;
var item = _a.item, field = _a.field;
if (props.AdditionalProps == null)
return;
var mappedField = (_b = props.AdditionalProps) === null || _b === void 0 ? void 0 : _b.HeaderMap.get(header);
var matchedField = props.AdditionalProps.Fields.find(function (f) { return f.Field === mappedField; });
if (matchedField == null)
return item[field];
var value = item[field];
var allValues = {};
(_c = props.AdditionalProps) === null || _c === void 0 ? void 0 : _c.Headers.forEach(function (header, index) {
var _a;
var mappedField = (_a = props.AdditionalProps) === null || _a === void 0 ? void 0 : _a.HeaderMap.get(header);
if (mappedField != null) {
allValues[mappedField] = item[index + 1];
}
});
return (React.createElement(CSVFieldContext_1.CSVFieldEditContext.Provider, { value: {
Value: value,
SetValue: function (val) { return handleValueChange(parseInt(item[0]), field, val); },
Validate: matchedField.Validate,
Feedback: matchedField.Feedback,
AllRecordValues: allValues,
SelectOptions: matchedField.SelectOptions
} }, matchedField.EditComponent));
} },
getHeader(header),
getFieldSelect(header));
}),
React.createElement(react_table_1.Column, { Key: 'delete', Field: 0, AllowSort: false, RowStyle: { textAlign: 'right' }, Content: function (_a) {
var item = _a.item;
return (React.createElement("button", { className: 'btn', onClick: function () { return handleRowDelete(parseInt(item[0])); } },
React.createElement(gpa_symbols_1.ReactIcons.TrashCan, { Color: "red" })));
} }, '')))),
React.createElement("div", { className: 'row' },
React.createElement("div", { className: 'col-12' },
React.createElement(react_table_1.Paging, { Current: page + 1, Total: totalPages, SetPage: function (p) { return setPage(p - 1); } }))))
: null))))));
}
//Helper functions
function autoMapHeaders(headers, fields) {
if (headers.length === 0 || fields.length === 0)
return new Map();
var map = new Map();
headers.forEach(function (header) {
var match = fields.find(function (field) { return field === header; });
if (match != null)
map.set(match.toString(), match);
});
return map;
}
var parseCSV = function (csvContent, hasHeaders, numOfRequiredFields) {
var rows = (0, helper_functions_1.CsvStringToArray)(csvContent);
var headers = hasHeaders ? rows[0] : [];
var data = hasHeaders ? rows.slice(1) : rows;
data = data.map(function (row, index) { return __spreadArray([(index).toString()], row, true); }); // Add index at the beginning of row
var missingHeaders = false;
var missingData = false;
if (hasHeaders) {
// Adjust headers to match numOfRequiredFields
if (headers.length < numOfRequiredFields) {
missingHeaders = true;
while (headers.length < numOfRequiredFields) {
headers.push(String.fromCharCode(65 + headers.length)); // A, B, C, etc.
}
}
// Fix headers so no duplicates
for (var headerIndex = 0; headerIndex < headers.length; headerIndex++) {
var count = 1;
for (var index = 0; index < headerIndex; index++) {
if (headers[headerIndex] === headers[index]) {
// Change header and restart loop to look for another duplicate
headers[headerIndex] += "_".concat(count);
count++;
index = -1;
continue;
}
}
}
}
else {
var colCount = rows[0].length - 1 < numOfRequiredFields ? numOfRequiredFields : rows[0].length - 1;
missingData = rows[0].length - 1 < numOfRequiredFields;
for (var i = 0; i < colCount; i++) {
headers.push(String.fromCharCode(65 + i)); // A, B, C, etc.
}
}
if (data.some(function (d) { return d.length - 1 < numOfRequiredFields; })) {
data = data.map(function (row) {
if (row.length - 1 < numOfRequiredFields) {
missingData = true;
var missingDataVals = Array(numOfRequiredFields - (row.length - 1)).fill('');
return __spreadArray(__spreadArray([], row, true), missingDataVals, true);
}
return row;
});
}
return { Headers: headers, Data: data, AddedMissingHeaders: missingHeaders, AddedMissingDataValues: missingData };
};