IO-233 Added vehicle search & selection on form.

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

@@ -4,7 +4,9 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { useTranslation } from "react-i18next";
-
+import { useLazyQuery } from "@apollo/client";
+import { SEARCH_DMS_VEHICLES } from "../../graphql/dms.queries";
+import AlertComponent from "../alert/alert.component";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -12,76 +14,75 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
-export default connect(mapStateToProps, mapDispatchToProps)(DmsCdkMakes);
+export default connect(mapStateToProps, mapDispatchToProps)(DmsCdkVehicles);
 
-export function DmsCdkMakes({ bodyshop, form, socket }) {
-  const [makesList, setMakesList] = useState([]);
-  const [searchText, setSearchText] = useState("");
-  const [loading, setLoading] = useState(false);
+export function DmsCdkVehicles({ bodyshop, form, socket, job }) {
   const [visible, setVisible] = useState(false);
   const [selectedModel, setSelectedModel] = useState(null);
   const { t } = useTranslation();
+
+  const [callSearch, { loading, error, data }] =
+    useLazyQuery(SEARCH_DMS_VEHICLES);
   const columns = [
     {
-      title: t("jobs.fields.dms.makeFullName"),
-      dataIndex: "makeFullName",
-      key: "makeFullName",
+      title: t("jobs.fields.dms.make"),
+      dataIndex: "make",
+      key: "make",
     },
     {
-      title: t("jobs.fields.dms.modelFullName"),
-      dataIndex: "modelFullName",
-      key: "modelFullName",
+      title: t("jobs.fields.dms.model"),
+      dataIndex: "model",
+      key: "model",
     },
     {
-      title: t("jobs.fields.dms.makeCode"),
-      dataIndex: "makeCode",
-      key: "makeCode",
+      title: t("jobs.fields.dms.makecode"),
+      dataIndex: "makecode",
+      key: "makecode",
     },
     {
-      title: t("jobs.fields.dms.modelCode"),
-      dataIndex: "modelCode",
-      key: "modelCode",
+      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;
-
+  console.log(
+    "🚀  ~ file: dms-cdk-makes.component.jsx  ~ line 95  ~ selectedModel",
+    selectedModel
+  );
   return (
     <div>
-      <Modal width={"90%"} visible={visible} onCancel={() => setVisible(false)}>
+      <Modal
+        width={"90%"}
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        onOk={() => {
+          form.setFieldsValue({
+            dms_make: selectedModel.makecode,
+            dms_model: selectedModel.modelcode,
+          });
+          setVisible(false);
+        }}
+      >
+        {error && <AlertComponent error={error.message} />}
         <Table
           title={() => (
             <Input.Search
-              onSearch={(val) => setSearchText(val)}
+              onSearch={(val) => callSearch({ variables: { search: val } })}
               placeholder={t("general.labels.search")}
             />
           )}
           columns={columns}
           loading={loading}
-          id="id"
-          dataSource={filteredMakes}
+          rowKey="id"
+          dataSource={data ? data.search_dms_vehicles : []}
           onRow={(record) => {
             return {
-              onClick: setSelectedModel(record),
+              onClick: () => setSelectedModel(record),
             };
           }}
           rowSelection={{
-            onSelect: (record, selected, ...props) => {
+            onSelect: (record) => {
               setSelectedModel(record);
             },
 
@@ -93,9 +94,14 @@ export function DmsCdkMakes({ bodyshop, form, socket }) {
       <Button
         onClick={() => {
           setVisible(true);
+          callSearch({
+            variables: {
+              search: job && job.v_model_desc && job.v_model_desc.substr(0, 3),
+            },
+          });
         }}
       >
-        {t("jobs.actions.dms.selectmakemodel")}
+        {t("jobs.actions.dms.getmakes")}
       </Button>
     </div>
   );

client/src/components/dms-post-form/dms-post-form.component.jsx

@@ -111,7 +111,7 @@ export function DmsPostForm({ bodyshop, socket, job }) {
             },
           ]}
         >
-          <Input />
+          <Input disabled />
         </Form.Item>
         <Form.Item
           name="dms_model"
@@ -122,9 +122,9 @@ export function DmsPostForm({ bodyshop, socket, job }) {
             },
           ]}
         >
-          <Input />
+          <Input disabled />
         </Form.Item>
-        <DmsCdkMakes form={form} socket={socket} />
+        <DmsCdkMakes form={form} socket={socket} job={job} />
         <DmsCdkMakesRefetch />
       </LayoutFormRow>