52 lines
1.8 KiB
JavaScript
52 lines
1.8 KiB
JavaScript
import { CheckCircleFilled } from "@ant-design/icons";
|
|
import { useQuery } from "@apollo/client";
|
|
import { Button, Col, List, Row } from "antd";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { GET_ALL_QUESTION_SETS } from "../../graphql/csi.queries";
|
|
import { DateFormatter } from "../../utils/DateFormatter";
|
|
import AlertComponent from "../alert/alert.component";
|
|
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
|
import ShopCsiConfigForm from "../shop-csi-config-form/shop-csi-config-form.component";
|
|
|
|
export default function ShopCsiConfig() {
|
|
const { loading, error, data } = useQuery(GET_ALL_QUESTION_SETS, {
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only",
|
|
});
|
|
const [selectedCsi, setselectedCsi] = useState(null);
|
|
const { t } = useTranslation();
|
|
|
|
if (loading) return <LoadingSpinner />;
|
|
if (error) return <AlertComponent message={error.message} type="error" />;
|
|
return (
|
|
<div>
|
|
<Row>
|
|
<Col span={3}>
|
|
<List
|
|
dataSource={data ? data.csiquestions : []}
|
|
renderItem={(item) => (
|
|
<List.Item>
|
|
<DateFormatter>{item.created_at}</DateFormatter>
|
|
{item.csis_aggregate.aggregate.count}
|
|
<Button onClick={() => setselectedCsi(item)}>
|
|
{t("general.actions.view")}
|
|
</Button>
|
|
{item.current ? (
|
|
<CheckCircleFilled />
|
|
) : (
|
|
<Button>{t("csi.actions.activate")}</Button>
|
|
)}
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</Col>
|
|
<Col span={1} />
|
|
<Col span={20}>
|
|
<ShopCsiConfigForm selectedCsi={selectedCsi} />
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
}
|