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 { alphaSort, dateSort } from "../../utils/sorters";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+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),
+      sorter: (a, b) => alphaSort(a.job?.ro_number, b.job?.ro_number),
-      sortOrder: sortcolumn === "ro_number" && sortorder,
+      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",
+      dataIndex: "owner_name",
-      key: "owner",
+      key: "owner_name",
-      ellipsis: true,
+      sorter: (a, b) =>
-      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
+        alphaSort(
-      sortOrder: sortcolumn === "owner" && sortorder,
+          OwnerNameDisplayFunction(a.job),
+          OwnerNameDisplayFunction(b.job)
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner_name" && state.sortedInfo.order,
       render: (text, record) => {
-        return record.job.owner ? (
+        return record.job.ownerid ? (
-          <Link to={"/manage/owners/" + record.job.owner.id}>
+          <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,
+      sorter: (a, b) => dateSort(a.completedon, b.completedon),
-      sortOrder: sortcolumn === "completedon" && sortorder,
+      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 });
+    setState({
-    search.page = pagination.current;
+      ...state,
-    search.sortcolumn = sorter.columnKey;
+      filteredInfo: filters,
-    search.sortorder = sorter.order;
+      sortedInfo: sorter,
-    history.push({ search: queryString.stringify(search) });
+      page: pagination.current,
+    });
   };
 
   const handleOnRowClick = (record) => {
-    if (record) {
+    if (record?.id) {
-      if (record.id) {
+      setresponseid(record.id);
-        search.responseid = record.id;
-        history.push({ search: queryString.stringify(search) });
-      }
     } else {
-      delete search.responseid;
+      setresponseid("");
-      history.push({ search: queryString.stringify(search) });
     }
   };
-
   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) => {

client/src/graphql/csi.queries.js

@@ -57,19 +57,15 @@ export const INSERT_CSI = gql`
 `;
 
 export const QUERY_CSI_RESPONSE_PAGINATED = gql`
-  query QUERY_CSI_RESPONSE_PAGINATED(
+  query QUERY_CSI_RESPONSE_PAGINATED {
-    $offset: Int
+    csi(order_by: { completedon: desc_nulls_last }) {
-    $limit: Int
-    $order: [csi_order_by!]!
-  ) {
-    csi(offset: $offset, limit: $limit, order_by: $order) {
       id
       completedon
       job {
         ownr_fn
         ownr_ln
+        ownerid
         ro_number
-
         id
       }
     }
@@ -83,6 +79,7 @@ export const QUERY_CSI_RESPONSE_PAGINATED = gql`
 export const QUERY_CSI_RESPONSE_BY_PK = gql`
   query QUERY_CSI_RESPONSE_BY_PK($id: uuid!) {
     csi_by_pk(id: $id) {
+      completedon
       relateddata
       valid
       validuntil

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

@@ -1,22 +1,20 @@
-import { Row, Col } from "antd";
 import { useQuery } from "@apollo/client";
-import queryString from "query-string";
+import { Col, Row } from "antd";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import CsiResponseFormContainer from "../../components/csi-response-form/csi-response-form.container";
 import CsiResponseListPaginated from "../../components/csi-response-list-paginated/csi-response-list-paginated.component";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { QUERY_CSI_RESPONSE_PAGINATED } from "../../graphql/csi.queries";
 import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+
-import {pageLimit} from "../../utils/config";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -32,29 +30,13 @@ export function ShopCsiContainer({
   setSelectedHeader,
 }) {
   const { t } = useTranslation();
-
+  const [responseid, setresponseid] = useState("");
-  const searchParams = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(
     QUERY_CSI_RESPONSE_PAGINATED,
     {
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
-      variables: {
-        //search: search || "",
-        offset: page ? (page - 1) * pageLimit : 0,
-        limit: pageLimit,
-        order: [
-          {
-            [sortcolumn || "completedon"]: sortorder
-              ? sortorder === "descend"
-                ? "desc_nulls_last"
-                : "asc"
-              : "desc_nulls_last",
-          },
-        ],
-      },
     }
   );
 
@@ -73,12 +55,7 @@ export function ShopCsiContainer({
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <RbacWrapper
+    <RbacWrapper action="csi:page">
-      action="csi:page"
-      // noauth={
-      //   <AlertComponent message="You don't have acess to see this screen." />
-      // }
-    >
       <Row gutter={16}>
         <Col span={10}>
           <CsiResponseListPaginated
@@ -86,10 +63,11 @@ export function ShopCsiContainer({
             loading={loading}
             responses={data ? data.csi : []}
             total={data ? data.csi_aggregate.aggregate.count : 0}
+            setresponseid={setresponseid}
           />
         </Col>
         <Col span={14}>
-          <CsiResponseFormContainer />
+          <CsiResponseFormContainer responseid={responseid} />
         </Col>
       </Row>
     </RbacWrapper>

client/src/translations/en_us/common.json

@@ -845,7 +845,8 @@
 			"fields": {
 				"completedon": "Completed On",
 				"created_at": "Created At",
-				"surveyid": "Survey ID {{surveyId}}"
+				"surveyid": "Survey ID {{surveyId}}",
+				"validuntil": "Valid Until"
 			},
 			"labels": {
 				"nologgedinuser": "Please log out of ImEX Online",