synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
354 lines • 18.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var json_schema_ref_parser_1 = (0, tslib_1.__importDefault)(require("json-schema-ref-parser"));
var lodash_es_1 = require("lodash-es");
var React = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var Alert_1 = (0, tslib_1.__importDefault)(require("react-bootstrap/Alert"));
var utils_1 = require("../../utils");
var SynapseConstants_1 = require("../../utils/SynapseConstants");
var SynapseForm_1 = (0, tslib_1.__importDefault)(require("./SynapseForm"));
var types_1 = require("./types");
var SynapseFormWrapper = /** @class */ (function (_super) {
(0, tslib_1.__extends)(SynapseFormWrapper, _super);
function SynapseFormWrapper(props) {
var _a, _b;
var _this = _super.call(this, props) || this;
//gets a file entity with content
_this.getFileEntityData = function (token, entityId, versionNumber) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var entity, fileHandleContent, fileContent, content, error_1, newError;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 4, , 5]);
return [4 /*yield*/, utils_1.SynapseClient.getEntity(token, entityId, versionNumber)];
case 1:
entity = _a.sent();
return [4 /*yield*/, utils_1.SynapseClient.getFileResult(entity, token, true, true)];
case 2:
fileHandleContent = _a.sent();
return [4 /*yield*/, utils_1.SynapseClient.getFileHandleContent(fileHandleContent.fileHandle, fileHandleContent.preSignedURL)];
case 3:
fileContent = _a.sent();
content = JSON.parse(fileContent);
return [2 /*return*/, {
version: entity.versionNumber,
content: content,
}];
case 4:
error_1 = _a.sent();
newError = {
message: error_1.message + ": configuration data for " + entityId + " failed to load",
};
this.onError(newError);
return [2 /*return*/, Promise.reject(newError)];
case 5: return [2 /*return*/];
}
});
}); };
//same as above but also uses $RefParser to convert json $refs to regular json
_this.getFileEntityDataDereferenced = function (token, entityId, versionNumber) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var _a, version, content, derefContent;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, this.getFileEntityData(token, entityId, versionNumber)];
case 1:
_a = _b.sent(), version = _a.version, content = _a.content;
return [4 /*yield*/, json_schema_ref_parser_1.default.dereference(content)];
case 2:
derefContent = (_b.sent());
return [2 /*return*/, {
version: version,
content: derefContent,
}];
}
});
}); };
_this.getData = function (token) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var formData, dataFileHandleId, submitted, formSchemaVersion, uiSchemaVersion, navSchemaVersion, searchParams, fileData, promises, configData, error_2;
var _a;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
if (!token) {
return [2 /*return*/];
}
_b.label = 1;
case 1:
_b.trys.push([1, 5, 6, 7]);
formData = {};
dataFileHandleId = void 0;
submitted = void 0;
formSchemaVersion = undefined;
uiSchemaVersion = undefined;
navSchemaVersion = undefined;
searchParams = this.props.searchParams;
if (searchParams) {
;
(dataFileHandleId = searchParams.dataFileHandleId, submitted = searchParams.submitted);
}
if (!dataFileHandleId) return [3 /*break*/, 3];
return [4 /*yield*/, utils_1.SynapseClient.getFileHandleContentFromID(dataFileHandleId, token)];
case 2:
fileData = _b.sent();
formData = JSON.parse(fileData);
if (submitted && formData && formData['metadata']) {
;
(_a = formData['metadata'], formSchemaVersion = _a.formSchemaVersion, uiSchemaVersion = _a.uiSchemaVersion, navSchemaVersion = _a.navSchemaVersion);
}
_b.label = 3;
case 3:
promises = [
this.getFileEntityDataDereferenced(token, this.props.formSchemaEntityId, formSchemaVersion),
this.getFileEntityData(token, this.props.formUiSchemaEntityId, uiSchemaVersion),
this.getFileEntityData(token, this.props.formNavSchemaEntityId, navSchemaVersion),
];
return [4 /*yield*/, Promise.all(promises)];
case 4:
configData = _b.sent();
if (!dataFileHandleId) {
//if we are creating a new file - store the versions
formData = {
metadata: {
formSchemaVersion: configData[0].version,
uiSchemaVersion: configData[1].version,
navSchemaVersion: configData[2].version,
},
};
}
this.setState({
formData: formData,
formSchema: configData[0].content,
formUiSchema: configData[1].content,
formNavSchema: configData[2].content,
isLoading: false,
});
return [3 /*break*/, 7];
case 5:
error_2 = _b.sent();
this.onError({ message: error_2 });
return [3 /*break*/, 7];
case 6:
this.setState({
isLoading: false,
});
return [7 /*endfinally*/];
case 7: return [2 /*return*/];
}
});
}); };
_this.finishedProcessing = function (status, message) {
_this.setState({
isLoading: false,
notification: { type: status, message: message },
status: status,
});
//this will show the update message for 7 seconds
setTimeout(function () {
_this.setState({ status: undefined });
}, 7000);
};
_this.onError = function (error) {
_this.setState({
notification: {
type: types_1.StatusEnum.ERROR,
message: error.message,
name: error.name,
},
status: types_1.StatusEnum.ERROR,
isLoading: false,
});
};
_this.submitForm = function (formData) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.saveToFile(formData)];
case 1:
_a.sent();
this.setState({
isLoading: true,
});
return [4 /*yield*/, utils_1.SynapseClient.submitFormData(this.state.formDataId, this.props.token)];
case 2:
_a.sent();
this.finishedProcessing(types_1.StatusEnum.SUBMIT_SUCCESS, 'File Submitted');
return [2 /*return*/];
}
});
}); };
_this.createOrUpdateFormDataFile = function (fileName, fileContentsBlob) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var fileUploadComplete, searchParams, formGroupId, newFileHandleId, formData, error_3;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
fileName = fileName + ".json";
return [4 /*yield*/, utils_1.SynapseClient.uploadFile(this.props.token, fileName, fileContentsBlob)];
case 1:
fileUploadComplete = _a.sent();
searchParams = this.props.searchParams;
formGroupId = searchParams && searchParams.formGroupId;
if (!formGroupId) {
console.error('formGroupId must be defined');
throw 'formGroupId must be defined';
}
_a.label = 2;
case 2:
_a.trys.push([2, 7, , 8]);
newFileHandleId = fileUploadComplete.fileHandleId;
formData = void 0;
if (!this.state.formDataId) return [3 /*break*/, 4];
return [4 /*yield*/, utils_1.SynapseClient.updateFormData(this.state.formDataId, fileName, newFileHandleId, this.props.token)];
case 3:
formData = _a.sent();
return [3 /*break*/, 6];
case 4: return [4 /*yield*/, utils_1.SynapseClient.createFormData(formGroupId, fileName, newFileHandleId, this.props.token)];
case 5:
formData = _a.sent();
_a.label = 6;
case 6: return [2 /*return*/, formData];
case 7:
error_3 = _a.sent();
this.onError(error_3);
throw error_3;
case 8: return [2 /*return*/];
}
});
}); };
_this.saveToFile = function (data) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var fileName, errorTitle, searchString, error, fileContent, formData, error_4;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
fileName = (0, lodash_es_1.get)(data, this.props.fileNamePath);
this.setState({
status: types_1.StatusEnum.PROGRESS,
notification: { type: types_1.StatusEnum.PROGRESS, message: 'Progress' },
isLoading: true,
});
if (!fileName) {
errorTitle = 'File Name';
try {
searchString = this.props.fileNamePath.replace('.', '.properties.') + ".title";
errorTitle = (0, lodash_es_1.get)(this.state.formSchema.properties, searchString, errorTitle);
}
finally {
error = "Please Provide the " + errorTitle + " before saving";
this.onError({ message: error });
}
return [2 /*return*/];
}
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
fileContent = new Blob([JSON.stringify(data)], {
type: 'text/json',
});
return [4 /*yield*/, this.createOrUpdateFormDataFile(fileName, fileContent)];
case 2:
formData = _a.sent();
this.setState({
formDataId: formData.formDataId,
});
this.finishedProcessing(types_1.StatusEnum.SAVE_SUCCESS, 'File Saved');
return [3 /*break*/, 4];
case 3:
error_4 = _a.sent();
this.onError({ message: error_4 });
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); };
_this.isReadyToDisplayForm = function (state) {
return (_this.state.status !== types_1.StatusEnum.ERROR_CRITICAL &&
state.formSchema &&
state.formUiSchema &&
state.formNavSchema &&
state.formData);
};
_this.renderLoader = function (state, props) {
if ((0, lodash_es_1.includes)([types_1.StatusEnum.ERROR, types_1.StatusEnum.ERROR_CRITICAL], state.status) &&
props.token &&
state.isLoading) {
return (React.createElement("div", { className: "text-center" },
React.createElement("span", { className: 'spinner' })));
}
else {
return React.createElement(React.Fragment, null);
}
};
_this.renderNotification = function (notification) {
if (!notification) {
return React.createElement(React.Fragment, null);
}
if (notification.type === types_1.StatusEnum.ERROR) {
return (React.createElement(Alert_1.default, { variant: "danger", onClose: function () { return _this.setState({ status: undefined }); } },
React.createElement(Alert_1.default.Heading, null, "Error"),
React.createElement("p", null,
notification.name,
" ",
notification.message)));
}
return React.createElement(React.Fragment, null);
};
_this.renderUnauthenticatedView = function (token) {
if (token) {
return React.createElement(React.Fragment, null);
}
else {
return (React.createElement("div", { className: "panel padding-full unauthenticated text-center bootstrap-4-backport" },
"Please",
React.createElement(react_bootstrap_1.Button, { variant: "light-primary-base", style: { margin: '10px' }, className: "pill " + SynapseConstants_1.SRC_SIGN_IN_CLASS }, "sign in"),
"to initiate or continue your submission"));
}
};
_this.state = {
isLoading: true,
formDataId: (_b = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.searchParams) === null || _b === void 0 ? void 0 : _b.formDataId,
};
return _this;
}
SynapseFormWrapper.prototype.componentDidMount = function () {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.getData(this.props.token)];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
};
SynapseFormWrapper.prototype.componentDidUpdate = function (prevProps) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var shouldUpdate;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
shouldUpdate = this.props.token !== prevProps.token;
if (!shouldUpdate) return [3 /*break*/, 2];
return [4 /*yield*/, this.getData(this.props.token)];
case 1:
_a.sent();
_a.label = 2;
case 2: return [2 /*return*/];
}
});
});
};
SynapseFormWrapper.prototype.render = function () {
var _this = this;
return (React.createElement("div", { className: "theme-" + this.props.formClass },
React.createElement("div", { className: "SRC-ReactJsonForm" },
this.renderNotification(this.state.notification),
this.renderLoader(this.state, this.props),
this.renderUnauthenticatedView(this.props.token),
this.isReadyToDisplayForm(this.state) && (React.createElement("div", null,
React.createElement(SynapseForm_1.default, { schema: this.state.formSchema, uiSchema: this.state.formUiSchema, formData: this.state.formData, navSchema: this.state.formNavSchema, isWizardMode: this.props.isWizardMode, formTitle: this.props.formTitle, formClass: this.props.formClass, callbackStatus: this.state.status, onSave: function (data) { return _this.saveToFile(data); }, onSubmit: function (data) { return _this.submitForm(data); }, isSubmitted: this.props.searchParams && !!this.props.searchParams.submitted }))))));
};
return SynapseFormWrapper;
}(React.Component));
exports.default = SynapseFormWrapper;
//# sourceMappingURL=SynapseFormWrapper.js.map