synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
135 lines • 9.41 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EvaluationEditor = void 0;
var tslib_1 = require("tslib");
var react_bootstrap_1 = require("react-bootstrap");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var SynapseClient_1 = require("../../utils/SynapseClient");
var ErrorBanner_1 = require("../ErrorBanner");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
var CreatedOnByUserDiv_1 = require("./CreatedOnByUserDiv");
var WarningModal_1 = (0, tslib_1.__importDefault)(require("../synapse_form_wrapper/WarningModal"));
var SynapseContext_1 = require("../../utils/SynapseContext");
/**
* Edits basic properties of an Evaluation
*/
var EvaluationEditor = function (_a) {
var evaluationId = _a.evaluationId, entityId = _a.entityId, onDeleteSuccess = _a.onDeleteSuccess, onSaveSuccess = _a.onSaveSuccess;
if (evaluationId && entityId) {
throw new Error('please use either evaluationId or entityId but not both');
}
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _b = (0, react_1.useState)(), error = _b[0], setError = _b[1];
var _c = (0, react_1.useState)(false), showSaveSuccess = _c[0], setShowSaveSuccess = _c[1];
(0, react_1.useEffect)(function () {
if (error) {
setShowSaveSuccess(false);
}
}, [error]);
var _d = (0, react_1.useState)(''), name = _d[0], setName = _d[1];
var _e = (0, react_1.useState)(''), description = _e[0], setDescription = _e[1];
var _f = (0, react_1.useState)(''), submissionInstructionsMessage = _f[0], setSubmissionInstructionsMessage = _f[1];
var _g = (0, react_1.useState)(''), submissionReceiptMessage = _g[0], setSubmissionReceiptMessage = _g[1];
var _h = (0, react_1.useState)({
contentSource: entityId,
}), evaluation = _h[0], setEvaluation = _h[1];
(0, react_1.useEffect)(function () {
var _a, _b, _c, _d;
setName((_a = evaluation.name) !== null && _a !== void 0 ? _a : '');
setDescription((_b = evaluation.description) !== null && _b !== void 0 ? _b : '');
setSubmissionInstructionsMessage((_c = evaluation.submissionInstructionsMessage) !== null && _c !== void 0 ? _c : '');
setSubmissionReceiptMessage((_d = evaluation.submissionReceiptMessage) !== null && _d !== void 0 ? _d : '');
}, [evaluation]);
(0, react_1.useEffect)(function () {
// if we initially passed in a update the we retrieve a new Evaluation
if (evaluationId) {
//clear error
setError(undefined);
(0, SynapseClient_1.getEvaluation)(evaluationId, accessToken)
.then(function (retrievedEvaluation) {
setEvaluation(retrievedEvaluation);
})
.catch(function (error) { return setError(error); });
}
}, [evaluationId, accessToken]);
var onSave = function () {
// clear out error
setError(undefined);
setShowSaveSuccess(false);
var newOrUpdatedEvaluation = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, evaluation), { name: name, description: description, submissionInstructionsMessage: submissionInstructionsMessage, submissionReceiptMessage: submissionReceiptMessage });
var promise = newOrUpdatedEvaluation.id
? (0, SynapseClient_1.updateEvaluation)(newOrUpdatedEvaluation, accessToken)
: (0, SynapseClient_1.createEvaluation)(newOrUpdatedEvaluation, accessToken);
promise
.then(function (evaluation) {
setEvaluation(evaluation);
setShowSaveSuccess(true);
if (onSaveSuccess) {
onSaveSuccess(evaluation.id);
}
})
.catch(function (error) { return setError(error); });
};
// create delete callback if the evaluation has id
var onDelete = (evaluation === null || evaluation === void 0 ? void 0 : evaluation.id)
? function () {
setError(undefined);
(0, SynapseClient_1.deleteEvaluation)(evaluation.id, accessToken)
.then(onDeleteSuccess)
.catch(function (error) { return setError(error); });
}
: undefined;
return (react_1.default.createElement("div", { className: "bootstrap-4-backport" },
react_1.default.createElement("div", { className: "evaluation-editor" },
react_1.default.createElement(react_bootstrap_1.Row, null,
react_1.default.createElement(react_bootstrap_1.Col, null,
react_1.default.createElement("h4", null,
evaluation.id ? 'Edit' : 'Create',
" Evaluation Queue")),
react_1.default.createElement(react_bootstrap_1.Col, null,
react_1.default.createElement(EvaluationEditorDropdown, { onClick: onSave, onDelete: onDelete }))),
react_1.default.createElement(react_bootstrap_1.Form, null,
react_1.default.createElement(react_bootstrap_1.Form.Group, null,
react_1.default.createElement(react_bootstrap_1.Form.Label, null, "Name"),
react_1.default.createElement(react_bootstrap_1.Form.Control, { type: "text", value: name, onChange: function (event) { return setName(event.target.value); } })),
react_1.default.createElement(react_bootstrap_1.Form.Group, null,
react_1.default.createElement(react_bootstrap_1.Form.Label, null, "Description"),
react_1.default.createElement(react_bootstrap_1.Form.Control, { as: "textarea", value: description, rows: 2, onChange: function (event) { return setDescription(event.target.value); } })),
react_1.default.createElement(react_bootstrap_1.Form.Group, null,
react_1.default.createElement(react_bootstrap_1.Form.Label, null, "Submission Instructions"),
react_1.default.createElement(react_bootstrap_1.Form.Control, { as: "textarea", value: submissionInstructionsMessage, rows: 2, onChange: function (event) {
return setSubmissionInstructionsMessage(event.target.value);
} })),
react_1.default.createElement(react_bootstrap_1.Form.Group, null,
react_1.default.createElement(react_bootstrap_1.Form.Label, null, "Submission Receipt Message"),
react_1.default.createElement(react_bootstrap_1.Form.Control, { type: "text", value: submissionReceiptMessage, onChange: function (event) {
return setSubmissionReceiptMessage(event.target.value);
} })),
(evaluation === null || evaluation === void 0 ? void 0 : evaluation.createdOn) && (react_1.default.createElement(CreatedOnByUserDiv_1.CreatedOnByUserDiv, { userId: evaluation.ownerId, date: new Date(evaluation.createdOn) })),
error && react_1.default.createElement(ErrorBanner_1.ErrorBanner, { error: error }),
showSaveSuccess && (react_1.default.createElement(react_bootstrap_1.Alert, { className: "save-success-alert", dismissible: true, variant: "success", transition: false, onClose: function () { return setShowSaveSuccess(false); } }, "Successfully saved.")),
react_1.default.createElement("div", { className: "d-flex justify-content-end" },
react_1.default.createElement(react_bootstrap_1.Button, { className: "save-button", onClick: onSave }, "Save"))))));
};
exports.EvaluationEditor = EvaluationEditor;
var EvaluationEditorDropdown = function (_a) {
var onClick = _a.onClick, onDelete = _a.onDelete;
var _b = (0, react_1.useState)(false), deleteWarningShow = _b[0], setDeleteWarningShow = _b[1];
return (react_1.default.createElement(react_1.default.Fragment, null,
onDelete && (react_1.default.createElement(WarningModal_1.default, { title: "Delete Evaluation Queue", modalBody: "Are you sure you want to delete this Evaluation Queue?", show: deleteWarningShow, confirmButtonText: "Delete", onConfirm: function () {
onDelete();
setDeleteWarningShow(false);
}, onConfirmCallbackArgs: [], onCancel: function () {
setDeleteWarningShow(false);
}, confirmButtonVariant: "danger" })),
react_1.default.createElement(react_bootstrap_1.Dropdown, { className: "float-right" },
react_1.default.createElement(react_bootstrap_1.Dropdown.Toggle, { variant: "link", className: "dropdown-no-caret" },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faEllipsisV })),
react_1.default.createElement(react_bootstrap_1.Dropdown.Menu, { alignRight: true },
react_1.default.createElement(react_bootstrap_1.Dropdown.Item, { onClick: onClick }, "Save"),
onDelete && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_bootstrap_1.Dropdown.Divider, null),
react_1.default.createElement(react_bootstrap_1.Dropdown.Item, { onClick: function () { return setDeleteWarningShow(true); } }, "Delete")))))));
};
//# sourceMappingURL=EvaluationEditor.js.map