BOD-17 Basic creation of a contract functioning.

client/src/components/contract-cars/contract-cars.component.jsx

@@ -0,0 +1,119 @@
+import { Input, Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { alphaSort } from "../../utils/sorters";
+
+export default function ContractsCarsComponent({
+  loading,
+  data,
+  selectedCar,
+  handleSelect
+}) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+    search: ""
+  });
+
+  const { t } = useTranslation();
+
+  const columns = [
+    {
+      title: t("courtesycars.fields.fleetnumber"),
+      dataIndex: "fleetnumber",
+      key: "fleetnumber",
+      sorter: (a, b) => alphaSort(a.fleetnumber, b.fleetnumber),
+      sortOrder:
+        state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order
+    },
+    {
+      title: t("courtesycars.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      sorter: (a, b) => alphaSort(a.status, b.status),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order
+    },
+    {
+      title: t("courtesycars.fields.year"),
+      dataIndex: "year",
+      key: "year",
+      sorter: (a, b) => alphaSort(a.year, b.year),
+      sortOrder: state.sortedInfo.columnKey === "year" && state.sortedInfo.order
+    },
+    {
+      title: t("courtesycars.fields.make"),
+      dataIndex: "make",
+      key: "make",
+      sorter: (a, b) => alphaSort(a.make, b.make),
+      sortOrder: state.sortedInfo.columnKey === "make" && state.sortedInfo.order
+    },
+    {
+      title: t("courtesycars.fields.model"),
+      dataIndex: "model",
+      key: "model",
+      sorter: (a, b) => alphaSort(a.model, b.model),
+      sortOrder:
+        state.sortedInfo.columnKey === "model" && state.sortedInfo.order
+    },
+    {
+      title: t("courtesycars.fields.plate"),
+      dataIndex: "plate",
+      key: "plate",
+      sorter: (a, b) => alphaSort(a.plate, b.plate),
+      sortOrder:
+        state.sortedInfo.columnKey === "plate" && state.sortedInfo.order
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const filteredData =
+    state.search === ""
+      ? data
+      : data.filter(
+          cc =>
+            (cc.fleetnumber || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (cc.status || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (cc.year || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (cc.make || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (cc.model || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (cc.plate || "").toLowerCase().includes(state.search.toLowerCase())
+        );
+  console.log("filteredData", filteredData);
+  return (
+    <Table
+      loading={loading}
+      title={() => (
+        <Input.Search
+          placeholder={t("general.labels.search")}
+          value={state.search}
+          onChange={e => setState({ ...state, search: e.target.value })}
+        />
+      )}
+      size="small"
+      pagination={{ position: "top" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={filteredData}
+      onChange={handleTableChange}
+      rowSelection={{
+        onSelect: handleSelect,
+        type: "radio",
+        selectedRowKeys: [selectedCar]
+      }}
+    />
+  );
+}

client/src/components/contract-cars/contract-cars.container.jsx

@@ -0,0 +1,29 @@
+import { useQuery } from "@apollo/react-hooks";
+import React from "react";
+import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
+import AlertComponent from "../alert/alert.component";
+import ContractCarsComponent from "./contract-cars.component";
+
+
+
+export default function ContractCarsContainer({ selectedCarState, bodyshop }) {
+  const { loading, error, data } = useQuery(QUERY_AVAILABLE_CC);
+
+  const [selectedCar, setSelectedCar] = selectedCarState;
+
+  const handleSelect = record => {
+    setSelectedCar(record.id);
+  };
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <div>
+      <ContractCarsComponent
+        handleSelect={handleSelect}
+        selectedCar={selectedCar}
+        loading={loading}
+        data={data ? data.courtesycars : []}
+      />
+    </div>
+  );
+}