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>
 

client/src/graphql/dms.queries.js

@@ -0,0 +1,13 @@
+import { gql } from "@apollo/client";
+
+export const SEARCH_DMS_VEHICLES = gql`
+  query SEARCH_DMS_VEHICLES($search: String) {
+    search_dms_vehicles(args: { search: $search }) {
+      id
+      make
+      makecode
+      model
+      modelcode
+    }
+  }
+`;

client/src/graphql/jobs.queries.js

@@ -1888,6 +1888,7 @@ export const QUERY_JOB_EXPORT_DMS = gql`
       job_totals
       kmin
       kmout
+      v_model_desc
     }
   }
 `;

client/src/pages/dms/dms.container.jsx

@@ -103,8 +103,6 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
 
   if (!jobId || !bodyshop.cdk_dealerid) return <Result status="404" />;
 
-  const dmsType = determineDmsType(bodyshop);
-
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
@@ -112,6 +110,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     <div>
       <Row gutter={32}>
         <Col span={18}>
+          {data && data.jobs_by_pk.ro_number}
           <DmsAllocationsSummary socket={socket} jobId={jobId} />
           <DmsPostForm
             socket={socket}

hasura/migrations/1629738990845_run_sql_migration/down.yaml

@@ -0,0 +1 @@
+[]

hasura/migrations/1629738990845_run_sql_migration/up.yaml

@@ -0,0 +1,13 @@
+- args:
+    cascade: true
+    read_only: false
+    sql: CREATE OR REPLACE FUNCTION public.search_dms_vehicles(search text)RETURNS
+      SETOF dms_vehicles LANGUAGE plpgsql STABLE AS $FUNCTION$ BEGIN IF search=''
+      THEN RETURN query SELECT*FROM dms_vehicles;ELSE RETURN query SELECT*FROM dms_vehicles
+      WHERE make ILIKE'%'||search||'%' OR model ILIKE'%'||search||'%' ORDER BY make
+      ILIKE'%'||search||'%' OR NULL,model ILIKE'%'||search||'%' OR NULL;END IF;END$FUNCTION$;
+  type: run_sql
+- args:
+    name: search_dms_vehicles
+    schema: public
+  type: track_function

hasura/migrations/metadata.yaml

@@ -4642,6 +4642,9 @@ functions:
 - function:
     schema: public
     name: search_cccontracts
+- function:
+    schema: public
+    name: search_dms_vehicles
 - function:
     schema: public
     name: search_exportlog