Added viewing all CSI responses + read only version of configurable form BOD-154

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

@@ -0,0 +1,159 @@
+import { SyncOutlined } from "@ant-design/icons";
+import { Button, 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 { DateFormatter } from "../../utils/DateFormatter";
+import { alphaSort } from "../../utils/sorters";
+
+export default function CsiResponseListPaginated({
+  refetch,
+  loading,
+  responses,
+  total,
+}) {
+  const search = queryString.parse(useLocation().search);
+  const { responseid, page, sortcolumn, sortorder } = search;
+  const history = useHistory();
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+  });
+
+  const { t } = useTranslation();
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      width: "8%",
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
+      sortOrder: sortcolumn === "ro_number" && sortorder,
+
+      render: (text, record) => (
+        <Link to={"/manage/jobs/" + record.job.id}>{record.job.ro_number}</Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.est_number"),
+      dataIndex: "est_number",
+      key: "est_number",
+      width: "8%",
+      sorter: (a, b) => a.job.est_number - b.job.est_number,
+      sortOrder: sortcolumn === "est_number" && sortorder,
+
+      render: (text, record) => (
+        <Link to={"/manage/jobs/" + record.job.id}>
+          {record.job.est_number}
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
+      width: "25%",
+      sortOrder: sortcolumn === "owner" && sortorder,
+      render: (text, record) => {
+        return record.owner ? (
+          <Link to={"/manage/owners/" + record.owner.id}>
+            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""}`}
+          </Link>
+        ) : (
+          <span>{`${record.job.ownr_fn || ""} ${
+            record.job.ownr_ln || ""
+          }`}</span>
+        );
+      },
+    },
+    {
+      title: t("csi.fields.completedon"),
+      dataIndex: "completedon",
+      key: "completedon",
+      ellipsis: true,
+      sorter: (a, b) => a.completedon - b.completedon,
+      width: "25%",
+      sortOrder: sortcolumn === "completedon" && sortorder,
+      render: (text, record) => {
+        return record.completedon ? (
+          <DateFormatter>{record.completedon}</DateFormatter>
+        ) : null;
+      },
+    },
+  ];
+
+  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) });
+  };
+
+  const handleOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.responseid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.responseid;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+
+  return (
+    <div>
+      <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>
+          );
+        }}
+        size="small"
+        pagination={{
+          position: "top",
+          pageSize: 25,
+          current: parseInt(page || 1),
+          total: total,
+        }}
+        columns={columns}
+        rowKey="id"
+        dataSource={responses}
+        onChange={handleTableChange}
+        rowSelection={{
+          onSelect: (record) => {
+            handleOnRowClick(record);
+          },
+          selectedRowKeys: [responseid],
+          type: "radio",
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleOnRowClick(record);
+            }, // click row
+          };
+        }}
+      />
+    </div>
+  );
+}