WIP for viewing CSI question sets BOD-380

client/src/components/shop-csi-config-form/shop-csi-config-form.component.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Form } from "antd";
+import ConfigFormComponents from "../config-form-components/config-form-components.component";
+
+export default function ShopCsiConfigForm({ selectedCsi }) {
+  console.log("ShopCsiConfigForm -> selectedCsi", selectedCsi);
+  const readOnly = !!selectedCsi;
+  const [form] = Form.useForm();
+  const handleFinish = (values) => {
+    console.log("values :>> ", values);
+  };
+
+  return (
+    <div>
+      The Config Form {readOnly}
+      {selectedCsi && (
+        <Form form={form} onFinish={handleFinish}>
+          <ConfigFormComponents
+            readOnly={selectedCsi}
+            componentList={selectedCsi.config}
+          />
+        </Form>
+      )}
+    </div>
+  );
+}

client/src/components/shop-csi-config/shop-csi-config.component.jsx

@@ -0,0 +1,48 @@
+import { CheckCircleFilled } from "@ant-design/icons";
+import { Button, Col, List, Row } from "antd";
+import React, { useState } from "react";
+import { useQuery } from "react-apollo";
+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);
+  const [selectedCsi, setselectedCsi] = useState(null);
+  const { t } = useTranslation();
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <div>
+      The Config Form
+      <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={21}>
+          <ShopCsiConfigForm selectedCsi={selectedCsi} />
+        </Col>
+      </Row>
+    </div>
+  );
+}