IO-2626 Correct Sorting, Linking, Pagination and Update Response Container

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

@@ -1,19 +1,19 @@
 import { useQuery } from "@apollo/client";
 import { Card, Form, Result } from "antd";
-import queryString from "query-string";
+// import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
+// 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() {
+export default function CsiResponseFormContainer({ responseid }) {
   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,
@@ -44,6 +44,19 @@ export default function CsiResponseFormContainer() {
           readOnly
           componentList={data.csi_by_pk.csiquestion.config}
         />
+        {data.csi_by_pk.completedon ? (
+          <>
+            {t("csi.fields.completedon")}
+            {": "}
+            <DateFormatter>{data.csi_by_pk.completedon}</DateFormatter>
+          </>
+        ) : data.csi_by_pk.validuntil ? (
+          <>
+            {t("csi.fields.validuntil")}
+            {": "}
+            <DateFormatter>{data.csi_by_pk.validuntil}</DateFormatter>
+          </>
+        ) : null}
       </Form>
     </Card>
   );

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

@@ -1,37 +1,37 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Table } from "antd";
-import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { pageLimit } from "../../utils/config";
-import { alphaSort } from "../../utils/sorters";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import { alphaSort, dateSort } from "../../utils/sorters";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
 
 export default function CsiResponseListPaginated({
   refetch,
   loading,
   responses,
   total,
+  setresponseid,
 }) {
-  const search = queryString.parse(useLocation().search);
-  const { responseid, page, sortcolumn, sortorder } = search;
-  const history = useHistory();
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
+    page: "",
   });
-
   const { t } = useTranslation();
+
   const columns = [
     {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
-      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
-      sortOrder: sortcolumn === "ro_number" && sortorder,
-
+      sorter: (a, b) => alphaSort(a.job?.ro_number, b.job?.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
       render: (text, record) => (
         <Link to={"/manage/jobs/" + record.job.id}>
           {record.job.ro_number || t("general.labels.na")}
@@ -40,14 +40,18 @@ export default function CsiResponseListPaginated({
     },
     {
       title: t("jobs.fields.owner"),
-      dataIndex: "owner",
-      key: "owner",
-      ellipsis: true,
-      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
-      sortOrder: sortcolumn === "owner" && sortorder,
+      dataIndex: "owner_name",
+      key: "owner_name",
+      sorter: (a, b) =>
+        alphaSort(
+          OwnerNameDisplayFunction(a.job),
+          OwnerNameDisplayFunction(b.job)
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner_name" && state.sortedInfo.order,
       render: (text, record) => {
-        return record.job.owner ? (
-          <Link to={"/manage/owners/" + record.job.owner.id}>
+        return record.job.ownerid ? (
+          <Link to={"/manage/owners/" + record.job.ownerid}>
             <OwnerNameDisplay ownerObject={record.job} />
           </Link>
         ) : (
@@ -62,8 +66,9 @@ export default function CsiResponseListPaginated({
       dataIndex: "completedon",
       key: "completedon",
       ellipsis: true,
-      sorter: (a, b) => a.completedon - b.completedon,
-      sortOrder: sortcolumn === "completedon" && sortorder,
+      sorter: (a, b) => dateSort(a.completedon, b.completedon),
+      sortOrder:
+        state.sortedInfo.columnKey === "completedon" && state.sortedInfo.order,
       render: (text, record) => {
         return record.completedon ? (
           <DateFormatter>{record.completedon}</DateFormatter>
@@ -73,25 +78,21 @@ export default function CsiResponseListPaginated({
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-    search.page = pagination.current;
-    search.sortcolumn = sorter.columnKey;
-    search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    setState({
+      ...state,
+      filteredInfo: filters,
+      sortedInfo: sorter,
+      page: pagination.current,
+    });
   };
 
   const handleOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        search.responseid = record.id;
-        history.push({ search: queryString.stringify(search) });
-      }
+    if (record?.id) {
+      setresponseid(record.id);
     } else {
-      delete search.responseid;
-      history.push({ search: queryString.stringify(search) });
+      setresponseid("");
     }
   };
-
   return (
     <Card
       extra={
@@ -105,7 +106,7 @@ export default function CsiResponseListPaginated({
         pagination={{
           position: "top",
           pageSize: pageLimit,
-          current: parseInt(page || 1),
+          current: parseInt(state.page || 1),
           total: total,
         }}
         columns={columns}
@@ -116,7 +117,6 @@ export default function CsiResponseListPaginated({
           onSelect: (record) => {
             handleOnRowClick(record);
           },
-          selectedRowKeys: [responseid],
           type: "radio",
         }}
         onRow={(record, rowIndex) => {