synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
369 lines • 21.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var utils_1 = require("../../utils");
var synapseTypes_1 = require("../../utils/synapseTypes/");
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var WarningModal_1 = (0, tslib_1.__importDefault)(require("./WarningModal"));
var Button_1 = (0, tslib_1.__importDefault)(require("react-bootstrap/Button"));
var Modal_1 = (0, tslib_1.__importDefault)(require("react-bootstrap/Modal"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var SynapseConstants_1 = require("../../utils/SynapseConstants");
var json_form_tool_no_submissions_svg_1 = (0, tslib_1.__importDefault)(require("../../assets/icons/json-form-tool-no-submissions.svg"));
var SynapseFormSubmissionGrid = /** @class */ (function (_super) {
(0, tslib_1.__extends)(SynapseFormSubmissionGrid, _super);
function SynapseFormSubmissionGrid(props) {
var _this = _super.call(this, props) || this;
_this.modalTitle = 'Trash Submission?';
_this.listingText = {
inProgress: {
subhead: 'In Progress',
noRecords: "You don't have submissions in progress",
},
submitted: {
subhead: 'Submitted',
noRecords: "You don't have anything submitted",
},
};
_this.modalCopy = (React.createElement(React.Fragment, null,
React.createElement("p", null, "This submission is currently incomplete and has not been submitted. If you trash this submission, you won't be able to recover the data."),
React.createElement("p", null, "Are you sure you want to trash this submission?")));
_this.getTypeFileListing = function (filter, nextPageToken) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var token, groupId, cleanUpName_1, request, response, fileList, error_1;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
this.setState({
isLoading: true,
});
token = this.props.token;
groupId = this.props.formGroupId;
_a.label = 1;
case 1:
_a.trys.push([1, 3, 4, 5]);
cleanUpName_1 = function (item) {
item = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { name: item.name.replace('.json', '') });
return item;
};
request = {
filterByState: filter,
groupId: groupId,
nextPageToken: nextPageToken,
};
return [4 /*yield*/, utils_1.SynapseClient.listFormData(request, token)];
case 2:
response = _a.sent();
fileList = response.page
? response.page.map(function (item) { return cleanUpName_1(item); })
: [];
return [2 /*return*/, {
fileList: fileList,
nextPageToken: response.nextPageToken,
}];
case 3:
error_1 = _a.sent();
this.onError(error_1);
return [2 /*return*/, Promise.reject(error_1)];
case 4:
this.setState({
isLoading: false,
});
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
_this.getMore = function (fileListType, nextPageToken) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var statusList, result;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
statusList = fileListType === 'SUBMITTED'
? SynapseFormSubmissionGrid.requestFilter.SUBMITTED
: SynapseFormSubmissionGrid.requestFilter.IN_PROGRESS;
return [4 /*yield*/, this.getTypeFileListing(statusList, nextPageToken)];
case 1:
result = _a.sent();
if (fileListType === 'SUBMITTED') {
this.setState(function (prevState) { return ({
submitted: {
fileList: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], prevState.submitted.fileList, true), result.fileList, true),
nextPageToken: result.nextPageToken,
},
}); });
}
else {
this.setState(function (prevState) { return ({
inProgress: {
fileList: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], prevState.inProgress.fileList, true), result.fileList, true),
nextPageToken: result.nextPageToken,
},
}); });
}
return [2 /*return*/];
}
});
}); };
_this.getUserFileListing = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var inProgress, submitted;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.getTypeFileListing(SynapseFormSubmissionGrid.requestFilter.IN_PROGRESS, this.state.inProgress.nextPageToken)];
case 1:
inProgress = _a.sent();
return [4 /*yield*/, this.getTypeFileListing(SynapseFormSubmissionGrid.requestFilter.SUBMITTED, this.state.submitted.nextPageToken)];
case 2:
submitted = _a.sent();
this.setState({
inProgress: inProgress,
submitted: submitted,
});
return [2 /*return*/];
}
});
}); };
_this.onError = function (args) {
console.log(args);
};
_this.deleteFile = function (token, formDataId) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var error_2;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
this.setState({
isLoading: true,
modalContext: undefined,
});
_a.label = 1;
case 1:
_a.trys.push([1, 3, 4, 5]);
return [4 /*yield*/, utils_1.SynapseClient.deleteFormData(formDataId, token)
//await this.getUserFileListing(token, this.props.formGroupId)
];
case 2:
_a.sent();
//await this.getUserFileListing(token, this.props.formGroupId)
this.setState(function (prevState, props) { return ({
inProgress: {
fileList: prevState.inProgress.fileList.filter(function (item) { return item.formDataId !== formDataId; }),
nextPageToken: prevState.inProgress.nextPageToken,
},
}); });
return [3 /*break*/, 5];
case 3:
error_2 = _a.sent();
this.onError(error_2);
return [2 /*return*/, []];
case 4:
this.setState({
isLoading: false,
});
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
_this.setModalConfirmationState = function (token, formDataId) {
_this.setState({
modalContext: {
action: _this.deleteFile,
arguments: [token, formDataId],
},
});
};
/* ------------------------------------------ rendering fns ------------------------------------------------*/
_this.renderLoading = function (token, isLoading) {
if (token && isLoading) {
return (React.createElement("div", { className: "text-center" },
React.createElement("span", null, "Loading\u2026"),
React.createElement("span", { style: { marginLeft: '2px' }, className: 'spinner' })));
}
else {
return React.createElement(React.Fragment, null);
}
};
_this.renderUnauthenticatedView = function (token) {
if (token) {
return React.createElement(React.Fragment, null);
}
else {
return (React.createElement("div", { className: "bootstrap-4-backport file-grid" },
React.createElement("h3", null, "Your Submissions"),
React.createElement("div", { className: "panel padding-full unauthenticated text-center" },
React.createElement("p", { className: "padding-full" }, "Please sign in or register to initiate or continue your submission"),
React.createElement(Button_1.default, { className: SynapseConstants_1.SRC_SIGN_IN_CLASS + " pill", variant: "primary", size: "lg" }, "Sign In"))));
}
};
_this.renderSubmissionsTable = function (fileList, pathpart, formGroupId, fileListType, nextPageToken) {
if (!formGroupId) {
_this.onError('Form Group ID is undefined');
return React.createElement(React.Fragment, null);
}
var isInProgress = fileListType === 'IN_PROGRESS';
var textSource = isInProgress
? _this.listingText.inProgress
: _this.listingText.submitted;
var subhead = React.createElement("h4", null, textSource.subhead);
var tableTitleRow = isInProgress ? (React.createElement("tr", null,
React.createElement("th", null, "Submission Name"),
React.createElement("th", null, "Edited On"),
React.createElement("th", null),
React.createElement("th", null))) : (React.createElement("tr", null,
React.createElement("th", null, "Submission Name"),
React.createElement("th", null, "Submitted On"),
React.createElement("th", null, "Status"),
React.createElement("th", null)));
var content = (React.createElement("h5", { className: "text-center no-submissions padding-full" }, textSource.noRecords));
var viewMore = nextPageToken ? (React.createElement("div", { className: "view-more" },
React.createElement("button", { className: "btn btn-link", onClick: function () { return _this.getMore(fileListType, nextPageToken); } }, "more ..."))) : (React.createElement(React.Fragment, null));
if (fileList.length > 0) {
content = (React.createElement("div", { className: "file-table", key: "table" + fileListType },
React.createElement("table", { className: "table" },
React.createElement("thead", null, tableTitleRow),
React.createElement("tbody", null, fileList.map(function (dataFileRecord, key) {
if (isInProgress) {
return (React.createElement("tr", { key: dataFileRecord.formDataId + key + fileListType },
React.createElement("td", null,
React.createElement("a", { href: pathpart + "?formGroupId=" + formGroupId + "&formDataId=" + dataFileRecord.formDataId + "&dataFileHandleId=" + dataFileRecord.dataFileHandleId }, dataFileRecord.name)),
React.createElement("td", null, (0, moment_1.default)(dataFileRecord.modifiedOn).calendar()),
React.createElement("td", null, "\u00A0"),
React.createElement("td", { className: "text-right" },
React.createElement("button", { className: "btn", "aria-label": "delete", onClick: function () {
return _this.setModalConfirmationState(_this.props.token, dataFileRecord.formDataId);
} },
React.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTrash, "aria-hidden": "true" })))));
}
else {
return (React.createElement("tr", { key: dataFileRecord.formDataId + key },
React.createElement("td", null,
React.createElement("a", { href: pathpart + "?formGroupId=" + formGroupId + "&formDataId=" + dataFileRecord.formDataId + "&dataFileHandleId=" + dataFileRecord.dataFileHandleId + "&submitted=1" }, dataFileRecord.name)),
React.createElement("td", null, (0, moment_1.default)(dataFileRecord.modifiedOn).calendar()),
React.createElement("td", null, dataFileRecord.submissionStatus.state),
React.createElement("td", { className: "text-right" },
React.createElement("button", { className: "btn", "aria-label": "information", onClick: function () {
return _this.setState({ isShowInfoModal: true });
} },
React.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faPhone, "aria-hidden": "true" })))));
}
}))),
viewMore));
}
return (React.createElement("div", { key: "grid-" + fileListType },
subhead,
" ",
content));
};
_this.renderSubmissionsTables = function (inProgress, submitted, pathpart, formGroupId) {
if (inProgress.fileList.length === 0 && submitted.fileList.length === 0) {
return (React.createElement("div", { className: "text-center" },
React.createElement("img", { src: json_form_tool_no_submissions_svg_1.default, alt: "no submissions" }),
React.createElement("p", { className: "padding-full" }, "You have no submissions")));
}
else {
return [
_this.renderSubmissionsTable(inProgress.fileList, pathpart, formGroupId, 'IN_PROGRESS', inProgress.nextPageToken),
_this.renderSubmissionsTable(submitted.fileList, pathpart, formGroupId, 'SUBMITTED', submitted.nextPageToken),
];
}
};
_this.state = {
isLoading: true,
isShowInfoModal: false,
inProgress: {
fileList: [],
},
submitted: {
fileList: [],
},
};
return _this;
}
SynapseFormSubmissionGrid.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.refresh(this.props.token)];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
};
SynapseFormSubmissionGrid.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.refresh(this.props.token)];
case 1:
_a.sent();
_a.label = 2;
case 2: return [2 /*return*/];
}
});
});
};
SynapseFormSubmissionGrid.prototype.refresh = function (token) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _this = this;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
if (!token) return [3 /*break*/, 2];
return [4 /*yield*/, this.getUserFileListing().catch(function (error) {
_this.onError(error);
})];
case 1:
_a.sent();
_a.label = 2;
case 2: return [2 /*return*/];
}
});
});
};
SynapseFormSubmissionGrid.prototype.render = function () {
var _this = this;
return (React.createElement("div", { className: "theme-" + this.props.formClass },
React.createElement("div", { className: "SRC-ReactJsonForm" },
this.renderLoading(this.props.token, this.state.isLoading),
this.renderUnauthenticatedView(this.props.token),
!this.state.isLoading && (React.createElement("div", { className: "file-grid " },
React.createElement("h3", null, "Your Submissions"),
React.createElement("div", { className: "panel panel-default padding-full" },
this.renderSubmissionsTables(this.state.inProgress, this.state.submitted, this.props.pathpart, this.props.formGroupId),
React.createElement("div", { className: "text-center bootstrap-4-backport" },
React.createElement(Button_1.default, { className: "pill-xl btn-large" // .btn-large is a custom class, don't use size="lg"
, variant: "primary", href: this.props.pathpart + "?formGroupId=" + this.props.formGroupId },
"Add new ",
this.props.itemNoun))))),
this.state.modalContext && (React.createElement(WarningModal_1.default, { className: "theme-" + this.props.formClass, show: typeof this.state.modalContext !== 'undefined', title: this.modalTitle, modalBody: this.modalCopy, onConfirmCallbackArgs: this.state.modalContext.arguments, onCancel: function () { return _this.setState({ modalContext: undefined }); }, onConfirm: function (token, formDataId) {
return _this.deleteFile(token, formDataId);
} })),
React.createElement(Modal_1.default, { show: this.state.isShowInfoModal, animation: false, className: "theme-" + this.props.formClass },
React.createElement(Modal_1.default.Header, { closeButton: false, onHide: function () { return _this.setState({ isShowInfoModal: false }); } },
React.createElement(Modal_1.default.Title, null, "More Information")),
React.createElement(Modal_1.default.Body, null,
"Please ",
React.createElement("a", { href: "mailto:ModelAD@iupui.edu" }, "contact us"),
" for more information about your submission"),
React.createElement(Modal_1.default.Footer, null,
React.createElement(Button_1.default, { variant: "success", onClick: function () { return _this.setState({ isShowInfoModal: false }); } }, "OK"))))));
};
SynapseFormSubmissionGrid.requestFilter = {
IN_PROGRESS: [synapseTypes_1.StatusEnum.WAITING_FOR_SUBMISSION],
SUBMITTED: [
synapseTypes_1.StatusEnum.SUBMITTED_WAITING_FOR_REVIEW,
synapseTypes_1.StatusEnum.ACCEPTED,
synapseTypes_1.StatusEnum.REJECTED,
],
};
return SynapseFormSubmissionGrid;
}(React.Component));
exports.default = SynapseFormSubmissionGrid;
//# sourceMappingURL=SynapseFormSubmissionsGrid.js.map