Files
bodyshop/client/src/components/csi-response-form/csi-response-form.container.jsx

56 lines
1.7 KiB
JavaScript

import { useQuery } from "@apollo/client/react";
import { Card, Form, Result } from "antd";
import queryString from "query-string";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { QUERY_CSI_RESPONSE_BY_PK } from "../../graphql/csi.queries";
import { DateFormatter } from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";
import ConfigFormComponents from "../config-form-components/config-form-components.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
export default function CsiResponseFormContainer() {
const { t } = useTranslation();
const [form] = Form.useForm();
const searchParams = queryString.parse(useLocation().search);
const { responseid } = searchParams;
const { loading, error, data } = useQuery(QUERY_CSI_RESPONSE_BY_PK, {
variables: {
id: responseid
},
skip: !responseid,
fetchPolicy: "network-only",
nextFetchPolicy: "network-only"
});
useEffect(() => {
form.resetFields();
}, [data, form]);
if (!responseid)
return (
<Card>
<Result title={t("csi.labels.noneselected")} />
</Card>
);
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent title={error.message} type="error" />;
return (
<Card>
<Form form={form} initialValues={data.csi_by_pk.response}>
<ConfigFormComponents readOnly componentList={data.csi_by_pk.csiquestion.config} />
{data.csi_by_pk.validuntil ? (
<>
{t("csi.fields.validuntil")}
{": "}
<DateFormatter>{data.csi_by_pk.validuntil}</DateFormatter>
</>
) : null}
</Form>
</Card>
);
}