IO-993 CSI undefined for owner name.

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

@@ -1,13 +1,13 @@
 import { useQuery } from "@apollo/client";
-import { Form } from "antd";
+import { Card, Form, Result } from "antd";
 import queryString from "query-string";
 import React, { 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 ConfigFormComponents from "../config-form-components/config-form-components.component";
-import { useTranslation } from "react-i18next";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 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();
@@ -25,19 +25,24 @@ export default function CsiResponseFormContainer() {
     form.resetFields();
   }, [data, form]);
 
-  if (!!!responseid) return <div>{t("csi.labels.noneselected")}</div>;
+  if (!!!responseid)
+    return (
+      <Card>
+        <Result title={t("csi.labels.noneselected")} />
+      </Card>
+    );
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <div>
+    <Card>
       <Form form={form} initialValues={data.csi_by_pk.response}>
         <ConfigFormComponents
           readOnly
           componentList={data.csi_by_pk.csiquestion.config}
         />
       </Form>
-    </div>
+    </Card>
   );
 }

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Table } from "antd";
+import { Button, Card, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -46,15 +46,15 @@ export default function CsiResponseListPaginated({
       width: "25%",
       sortOrder: sortcolumn === "owner" && sortorder,
       render: (text, record) => {
-        return record.owner ? (
+        return record.job.owner ? (
-          <Link to={"/manage/owners/" + record.owner.id}>
+          <Link to={"/manage/owners/" + record.job.owner.id}>
             {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
-              record.job.ownr_co_nm
+              record.job.ownr_co_nm || ""
             }`}
           </Link>
         ) : (
           <span>{`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
-            record.job.ownr_co_nm
+            record.job.ownr_co_nm || ""
           }`}</span>
         );
       },
@@ -96,28 +96,15 @@ export default function CsiResponseListPaginated({
   };
 
   return (
-    <div>
+    <Card
+      extra={
+        <Button onClick={() => refetch()}>
+          <SyncOutlined />
+        </Button>
+      }
+    >
       <Table
         loading={loading}
-        title={() => {
-          return (
-            <div style={{ display: "flex" }}>
-              <Button onClick={() => refetch()}>
-                <SyncOutlined />
-              </Button>
-              {
-                // <Input.Search
-                //   placeholder={t("general.labels.search")}
-                //   onSearch={(value) => {
-                //     search.search = value;
-                //     history.push({ search: queryString.stringify(search) });
-                //   }}
-                //   enterButton
-                // />
-              }
-            </div>
-          );
-        }}
         pagination={{
           position: "top",
           pageSize: 25,
@@ -143,6 +130,6 @@ export default function CsiResponseListPaginated({
           };
         }}
       />
-    </div>
+    </Card>
   );
 }

client/src/pages/shop-csi/shop-csi.container.page.jsx

@@ -76,7 +76,7 @@ export function ShopCsiContainer({
       //   <AlertComponent message="You don't have acess to see this screen." />
       // }
     >
-      <Row>
+      <Row gutter={16}>
         <Col span={10}>
           <CsiResponseListPaginated
             refetch={refetch}
@@ -85,7 +85,7 @@ export function ShopCsiContainer({
             total={data ? data.csi_aggregate.aggregate.count : 0}
           />
         </Col>
-        <Col span={13} offset={1}>
+        <Col span={14}>
           <CsiResponseFormContainer />
         </Col>
       </Row>