synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
381 lines (380 loc) • 13.7 kB
JavaScript
import { jsxs as n, Fragment as h, jsx as t } from "react/jsx-runtime";
import { ReactComponent as y } from "../../assets/icons/json-form-tool-no-submissions.svg.js";
import { WideButton as I } from "../styled/WideButton.js";
import * as T from "../../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import { StatusEnum as p } from "@sage-bionetworks/synapse-types";
import "../../utils/functions/EntityTypeUtils.js";
import { SRC_SIGN_IN_CLASS as k } from "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "../../utils/PermissionLevelToAccessType.js";
import { Component as E } from "react";
import { useSynapseContext as D } from "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import "@tanstack/react-query";
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import { Typography as x, Link as u, IconButton as C, Box as N, Button as M } from "@mui/material";
import "@sage-bionetworks/synapse-client";
import "../../utils/types/IsType.js";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import '../../style/components/_spinner.css';/* empty css */
import "react-router";
import v from "@mui/icons-material/DeleteTwoTone";
import w from "@mui/icons-material/PhoneTwoTone";
import f from "dayjs";
import $ from "dayjs/plugin/calendar";
import { ConfirmationDialog as B } from "../ConfirmationDialog/ConfirmationDialog.js";
import { WarningDialog as U } from "./WarningDialog.js";
f.extend($);
class m extends E {
modalTitle = "Trash Submission?";
listingText = {
inProgress: {
subhead: "In Progress",
noRecords: "You don't have submissions in progress"
},
submitted: {
subhead: "Submitted",
noRecords: "You don't have anything submitted"
}
};
modalCopy = /* @__PURE__ */ n(h, { children: [
/* @__PURE__ */ t("p", { children: "This submission is currently incomplete and has not been submitted. If you trash this submission, you won't be able to recover the data." }),
/* @__PURE__ */ t("p", { children: "Are you sure you want to trash this submission?" })
] });
static requestFilter = {
IN_PROGRESS: [p.WAITING_FOR_SUBMISSION],
SUBMITTED: [
p.SUBMITTED_WAITING_FOR_REVIEW,
p.ACCEPTED,
p.REJECTED
]
};
constructor(e) {
super(e), this.state = {
isLoading: !0,
isShowInfoModal: !1,
inProgress: {
fileList: []
},
submitted: {
fileList: []
}
};
}
componentDidMount() {
this.refresh(this.props.token);
}
componentDidUpdate(e) {
this.props.token !== e.token && this.refresh(this.props.token);
}
async refresh(e) {
e && await this.getUserFileListing().catch((i) => {
this.onError(i);
});
}
getTypeFileListing = async (e, i) => {
this.setState({
isLoading: !0
});
const s = this.props.token, r = this.props.formGroupId;
try {
const o = (l) => (l = { ...l, name: l.name.replace(".json", "") }, l), c = {
filterByState: e,
groupId: r,
nextPageToken: i
}, d = await T.listFormData(
c,
s
);
return {
fileList: d.page ? d.page.map((l) => o(l)) : [],
nextPageToken: d.nextPageToken
};
} catch (o) {
return this.onError(o), Promise.reject(o);
} finally {
this.setState({
isLoading: !1
});
}
};
getMore = async (e, i) => {
const s = e === "SUBMITTED" ? m.requestFilter.SUBMITTED : m.requestFilter.IN_PROGRESS, r = await this.getTypeFileListing(s, i);
e === "SUBMITTED" ? this.setState((o) => ({
submitted: {
fileList: [...o.submitted.fileList, ...r.fileList],
nextPageToken: r.nextPageToken
}
})) : this.setState((o) => ({
inProgress: {
fileList: [...o.inProgress.fileList, ...r.fileList],
nextPageToken: r.nextPageToken
}
}));
};
getUserFileListing = async () => {
const e = await this.getTypeFileListing(
m.requestFilter.IN_PROGRESS,
this.state.inProgress.nextPageToken
), i = await this.getTypeFileListing(
m.requestFilter.SUBMITTED,
this.state.submitted.nextPageToken
);
this.setState({
inProgress: e,
submitted: i
});
};
onError = (e) => {
console.log(e);
};
deleteFile = async (e, i) => {
this.setState({
isLoading: !0,
modalContext: void 0
});
try {
await T.deleteFormData(i, e), this.setState((s, r) => ({
inProgress: {
fileList: s.inProgress.fileList.filter(
(o) => o.formDataId !== i
),
nextPageToken: s.inProgress.nextPageToken
}
}));
} catch (s) {
return this.onError(s), [];
} finally {
this.setState({
isLoading: !1
});
}
};
setModalConfirmationState = (e, i) => {
this.setState({
modalContext: {
action: (...s) => {
this.deleteFile(s[0], s[1]);
},
arguments: [e, i]
}
});
};
/* ------------------------------------------ rendering fns ------------------------------------------------*/
renderLoading = (e, i) => e && i ? /* @__PURE__ */ n("div", { className: "text-center", children: [
/* @__PURE__ */ t("span", { children: "Loading…" }),
/* @__PURE__ */ t("span", { style: { marginLeft: "2px" }, className: "spinner" })
] }) : /* @__PURE__ */ t(h, {});
renderUnauthenticatedView = (e) => e ? /* @__PURE__ */ t(h, {}) : /* @__PURE__ */ n("div", { className: "file-grid", children: [
/* @__PURE__ */ t(x, { variant: "h3", children: "Your Submissions" }),
/* @__PURE__ */ n("div", { className: "panel padding-full unauthenticated text-center", children: [
/* @__PURE__ */ t("p", { className: "padding-full", children: "Please sign in or register to initiate or continue your submission" }),
/* @__PURE__ */ t(
I,
{
className: `${k}`,
variant: "contained",
color: "primary",
size: "large",
children: "Sign In"
}
)
] })
] });
renderSubmissionsTable = (e, i, s, r, o) => {
if (!s)
return this.onError("Form Group ID is undefined"), /* @__PURE__ */ t(h, {});
const c = r === "IN_PROGRESS", d = c ? this.listingText.inProgress : this.listingText.submitted, g = /* @__PURE__ */ t("h4", { children: d.subhead }), l = c ? /* @__PURE__ */ n("tr", { children: [
/* @__PURE__ */ t("th", { children: "Submission Name" }),
/* @__PURE__ */ t("th", { children: "Edited On" }),
/* @__PURE__ */ t("th", {}),
/* @__PURE__ */ t("th", {})
] }) : /* @__PURE__ */ n("tr", { children: [
/* @__PURE__ */ t("th", { children: "Submission Name" }),
/* @__PURE__ */ t("th", { children: "Submitted On" }),
/* @__PURE__ */ t("th", { children: "Status" }),
/* @__PURE__ */ t("th", {})
] });
let S = /* @__PURE__ */ t("h5", { className: "text-center no-submissions padding-full", children: d.noRecords });
const L = o ? /* @__PURE__ */ t(N, { sx: { textAlign: "right", paddingTop: "5px" }, children: /* @__PURE__ */ t(
M,
{
variant: "text",
onClick: () => {
this.getMore(r, o);
},
children: "More..."
}
) }) : /* @__PURE__ */ t(h, {});
return e.length > 0 && (S = /* @__PURE__ */ n("div", { className: "file-table", children: [
/* @__PURE__ */ n("table", { className: "table", children: [
/* @__PURE__ */ t("thead", { children: l }),
/* @__PURE__ */ t("tbody", { children: e.map((a, b) => c ? /* @__PURE__ */ n(
"tr",
{
children: [
/* @__PURE__ */ t("td", { children: /* @__PURE__ */ t(
u,
{
href: `${i}?formGroupId=${s}&formDataId=${a.formDataId}&dataFileHandleId=${a.dataFileHandleId}`,
children: a.name
}
) }),
/* @__PURE__ */ t("td", { children: f(a.modifiedOn).calendar() }),
/* @__PURE__ */ t("td", { children: " " }),
/* @__PURE__ */ t("td", { className: "text-right", children: /* @__PURE__ */ t(
C,
{
"aria-label": "delete",
color: "primary",
onClick: () => this.setModalConfirmationState(
this.props.token,
a.formDataId
),
children: /* @__PURE__ */ t(v, {})
}
) })
]
},
`${a.formDataId}-${b}-${r}`
) : /* @__PURE__ */ n("tr", { children: [
/* @__PURE__ */ t("td", { children: /* @__PURE__ */ t(
u,
{
href: `${i}?formGroupId=${s}&formDataId=${a.formDataId}&dataFileHandleId=${a.dataFileHandleId}&submitted=1`,
children: a.name
}
) }),
/* @__PURE__ */ t("td", { children: f(a.modifiedOn).calendar() }),
/* @__PURE__ */ t("td", { children: a.submissionStatus.state }),
/* @__PURE__ */ t("td", { className: "text-right", children: /* @__PURE__ */ t(
C,
{
color: "primary",
"aria-label": "information",
onClick: () => this.setState({ isShowInfoModal: !0 }),
children: /* @__PURE__ */ t(w, {})
}
) })
] }, `${a.formDataId}-${b}`)) })
] }),
L
] }, `table${r}`)), /* @__PURE__ */ n("div", { children: [
g,
" ",
S
] }, `grid-${r}`);
};
renderSubmissionsTables = (e, i, s, r) => e.fileList.length === 0 && i.fileList.length === 0 ? /* @__PURE__ */ n("div", { className: "text-center", children: [
/* @__PURE__ */ t(y, { title: "no submissions" }),
/* @__PURE__ */ t("p", { className: "padding-full", children: "You have no submissions" })
] }) : [
this.renderSubmissionsTable(
e.fileList,
s,
r,
"IN_PROGRESS",
e.nextPageToken
),
this.renderSubmissionsTable(
i.fileList,
s,
r,
"SUBMITTED",
i.nextPageToken
)
];
render() {
return /* @__PURE__ */ t("div", { className: `theme-${this.props.formClass}`, children: /* @__PURE__ */ n("div", { className: "SRC-ReactJsonForm", children: [
this.renderLoading(this.props.token, this.state.isLoading),
this.renderUnauthenticatedView(this.props.token),
this.props.token && !this.state.isLoading && /* @__PURE__ */ n("div", { className: "file-grid ", children: [
/* @__PURE__ */ t(x, { variant: "h3", children: "Your Submissions" }),
/* @__PURE__ */ n("div", { className: "panel panel-default padding-full", children: [
this.renderSubmissionsTables(
this.state.inProgress,
this.state.submitted,
this.props.pathpart,
this.props.formGroupId
),
/* @__PURE__ */ t(
N,
{
sx: {
textAlign: "center"
},
children: /* @__PURE__ */ n(
I,
{
variant: "contained",
color: "primary",
sx: {
padding: "0.75rem 1.5rem"
},
href: `${this.props.pathpart}?formGroupId=${this.props.formGroupId}`,
children: [
"Add new ",
this.props.itemNoun
]
}
)
}
)
] })
] }),
this.state.modalContext && /* @__PURE__ */ t(
U,
{
className: `theme-${this.props.formClass}`,
open: typeof this.state.modalContext < "u",
title: this.modalTitle,
content: this.modalCopy,
onConfirmCallbackArgs: this.state.modalContext.arguments,
onCancel: () => this.setState({ modalContext: void 0 }),
onConfirm: (e, i) => this.deleteFile(e, i)
}
),
/* @__PURE__ */ t(
B,
{
open: this.state.isShowInfoModal,
title: "More Information",
content: /* @__PURE__ */ n(h, { children: [
"Please ",
/* @__PURE__ */ t(u, { href: "mailto:ModelAD@iu.edu", children: "contact us" }),
" for more information about your submission"
] }),
className: `theme-${this.props.formClass}`,
hasCloseButton: !1,
hasCancelButton: !1,
confirmButtonProps: {
color: "success"
},
onCancel: () => this.setState({ isShowInfoModal: !1 }),
onConfirm: () => this.setState({ isShowInfoModal: !1 })
}
)
] }) });
}
}
function It(P) {
const e = D();
return /* @__PURE__ */ t(m, { ...P, token: e.accessToken });
}
export {
It as SynapseFormSubmissionGrid,
It as default
};
//# sourceMappingURL=SynapseFormSubmissionGrid.js.map