IO-233 CDK Get Makes & Taxes calculation.

client/src/components/dms-cdk-makes/dms-cdk-makes.component.jsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
-import { Modal, Button, Table } from "antd";
+import { Modal, Button, Table, Input } from "antd";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -14,26 +16,96 @@ export default connect(mapStateToProps, mapDispatchToProps)(DmsCdkMakes);
 
 export function DmsCdkMakes({ bodyshop, form, socket }) {
   const [makesList, setMakesList] = useState([]);
+  const [searchText, setSearchText] = useState("");
   const [loading, setLoading] = useState(false);
   const [visible, setVisible] = useState(false);
+  const [selectedModel, setSelectedModel] = useState(null);
+  const { t } = useTranslation();
+  const columns = [
+    {
+      title: t("jobs.fields.dms.makeFullName"),
+      dataIndex: "makeFullName",
+      key: "makeFullName",
+    },
+    {
+      title: t("jobs.fields.dms.modelFullName"),
+      dataIndex: "modelFullName",
+      key: "modelFullName",
+    },
+    {
+      title: t("jobs.fields.dms.makeCode"),
+      dataIndex: "makeCode",
+      key: "makeCode",
+    },
+    {
+      title: t("jobs.fields.dms.modelCode"),
+      dataIndex: "modelCode",
+      key: "modelCode",
+    },
+  ];
+
+  const filteredMakes =
+    searchText !== "" && searchText
+      ? makesList.filter(
+          (make) =>
+            searchText
+              .split(" ")
+              .some((v) =>
+                make.makeFullName.toLowerCase().includes(v.toLowerCase())
+              ) ||
+            searchText
+              .split(" ")
+              .some((v) =>
+                make.modelFullName.toLowerCase().includes(v.toLowerCase())
+              )
+        )
+      : makesList;
+
   return (
     <div>
-      <Modal visible={visible} onCancel={() => setVisible(false)}>
-        {JSON.stringify(makesList, null, 2)}
-        <Table loading={loading} data={makesList} />
+      <Modal width={"90%"} visible={visible} onCancel={() => setVisible(false)}>
+        <Table
+          title={() => (
+            <Input.Search
+              onSearch={(val) => setSearchText(val)}
+              placeholder={t("general.labels.search")}
+            />
+          )}
+          columns={columns}
+          loading={loading}
+          id="id"
+          dataSource={filteredMakes}
+          onRow={(record) => {
+            return {
+              onClick: setSelectedModel(record),
+            };
+          }}
+          rowSelection={{
+            onSelect: (record, selected, ...props) => {
+              console.log(
+                "🚀  ~ file: dms-cdk-makes.component.jsx  ~ line 85  ~ record, selected, ...props",
+                record,
+                selected,
+                ...props
+              );
+
+              setSelectedModel(record);
+            },
+
+            type: "radio",
+            selectedRowKeys: [selectedModel && selectedModel.id],
+          }}
+        />
       </Modal>
       <Button
         onClick={() => {
           setVisible(true);
           setLoading(true);
-          socket.emit(
-            "cdk-get-makes",
-            (bodyshop.cdk_dealerid,
-            (makes) => {
-              setMakesList(makes);
-              setLoading(false);
-            })
-          );
+          socket.emit("cdk-get-makes", bodyshop.cdk_dealerid, (makes) => {
+            console.log("Called back", makes);
+            setMakesList(makes);
+            setLoading(false);
+          });
         }}
       >
         Get Makes