synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
124 lines • 6.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getFlatData = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var lodash_es_1 = require("lodash-es");
function findLabel(key, schema, uiSchema) {
var regex1 = /\[\d+\]\./g;
var regex3 = /\.(\d)+/g;
key = key.replace(regex3, '[$1]');
var propArr = key.split('.');
// some things require labels in schema (e.g. checkboxes) so this is preferred
var labelFromSchema = propArr.join('.properties.') + ".title";
//can be overriden by label in UI
var labelFromUi = key + ".ui:title";
//for array fields we need to change the property e.g.
// ld50.experiments[0].species_other should look like 'ld50.experiments.items.species_other'
var arrayLabelFromSchema = labelFromSchema.replace(regex1, '.items.');
var arrayLabelFromUiSchema = labelFromUi.replace(regex1, '.items.');
var indexMatch = labelFromSchema.match(regex1);
var index = (0, lodash_es_1.first)(indexMatch);
if (index) {
index = index.substring(1, index.length - 2);
index = !isNaN(parseInt(index)) ? parseInt(index) + 1 + '' : '';
}
var label = (0, lodash_es_1.get)(uiSchema, labelFromUi) ||
(0, lodash_es_1.get)(schema.properties, labelFromSchema) ||
(0, lodash_es_1.get)(uiSchema, arrayLabelFromUiSchema) ||
(0, lodash_es_1.get)(schema.properties, arrayLabelFromSchema) ||
"" + arrayLabelFromSchema;
return "" + (index ? '[' + index + '] ' : '') + label;
}
function getFlatData(formData, steps, schema, uiSchema) {
//takes nested json and converts it into flattened item list
function flatten(object, flattenedObject, prefix) {
var separator = '.';
Object.keys(object).forEach(function (key) {
if (object[key] === null) {
flattenedObject[prefix + key] = '';
}
else if (
//if the value is a proper array
(0, lodash_es_1.isArray)(object[key]) &&
!(0, lodash_es_1.isString)(object[key])) {
for (var i in object[key]) {
if ((0, lodash_es_1.isArray)(object[key][i]) ||
((0, lodash_es_1.isObject)(object[key]) && !(0, lodash_es_1.isString)(object[key][i]))) {
flatten(object[key][i], flattenedObject, "" + prefix + key + "[" + i + "]" + separator);
}
else {
var prevVal = flattenedObject["" + prefix + key];
prevVal = prevVal ? prevVal + ', ' : '';
flattenedObject["" + prefix + key] = prevVal + object[key][i];
}
}
}
else if ((0, lodash_es_1.isObject)(object[key]) && !(0, lodash_es_1.isDate)(object[key])) {
flatten(object[key], flattenedObject, "" + prefix + key + separator);
}
else {
flattenedObject[prefix + key] = object[key];
}
});
return flattenedObject;
}
var flatData = flatten((0, lodash_es_1.cloneDeep)(formData), [], '');
var flatFormData = (0, lodash_es_1.keys)(flatData)
.map(function (key) {
var val = flatData[key];
if (flatData[key] === false) {
val = 'false';
}
if (flatData[key] === true) {
val = 'true';
}
var boundary = key.indexOf('.');
return {
screen: (0, lodash_es_1.find)(steps, { id: key.substring(0, boundary) }),
label: findLabel(key, schema, uiSchema),
value: val,
};
})
.filter(function (item) { return item.label.indexOf('.properties.included.title') === -1; }); //included is the property we generate to help with validation of optional forms
var result = flatFormData
.filter(function (item) { return item.screen && typeof item.value !== 'undefined'; })
.map(function (item) {
return {
label: item.label,
value: item.value,
screen: item.screen,
};
})
.sort(function (a, b) { return a.screen.order - b.screen.order; });
return result;
}
exports.getFlatData = getFlatData;
function SummaryTable(props) {
var flatFormData = [];
flatFormData = getFlatData((0, lodash_es_1.cloneDeep)(props.formData), props.steps, props.schema, props.uiSchema);
var prevScreenId = '';
var table = (React.createElement(React.Fragment, null,
React.createElement("table", { className: "table summary-table-header" },
React.createElement("thead", null,
React.createElement("tr", null,
React.createElement("th", null, "Step"),
React.createElement("th", null, "Label"),
React.createElement("th", null, "Value")))),
React.createElement("div", { className: "scroll-area table-body" },
React.createElement("table", { className: "table summary-table" },
React.createElement("tbody", null, flatFormData.map(function (line, i) {
return (React.createElement("tr", { key: i + line.screen.id + line.label },
React.createElement("td", null, prevScreenId !== line.screen.id &&
(prevScreenId = line.screen.id) && (React.createElement("span", null, line.screen.title))),
React.createElement("td", null, line.label),
React.createElement("td", null, line.value)));
}))))));
return (React.createElement(React.Fragment, null,
React.createElement("p", { className: "step-exclude-directions" }, "Below is all of the data you have entered. Before submitting, click 'Validate' to ensure that all of the required data has been entered."),
React.createElement("button", { className: "nav-link pull-right", onClick: function () { return window.print(); } }, "Print this data"),
React.createElement("div", { className: "panel panel-default padding-full wrap" },
React.createElement("div", { className: "summary scroll-area" }, table))));
}
exports.default = SummaryTable;
//# sourceMappingURL=SummaryTable.js.map