Package update modifications & IO-2192 Add ability to preselect make and model when creating a job.

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "eslint.workingDirectories": ["./client", "./"],
   "xml.fileAssociations": [
     {
       "pattern": "**/Test.xml",

client/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@apollo/client": "^3.7.9",
     "@asseinfo/react-kanban": "^2.2.0",
-    "@craco/craco": "^6.4.5",
+    "@craco/craco": "^7.0.0",
     "@fingerprintjs/fingerprintjs": "^3.3.3",
     "@jsreport/browser-client": "^3.1.0",
     "@sentry/react": "^7.40.0",
@@ -16,7 +16,7 @@
     "antd": "^4.24.8",
     "apollo-link-logger": "^2.0.1",
     "axios": "^1.3.4",
-    "craco-less": "^1.20.0",
+    "craco-less": "^2.0.0",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.0.1",
     "enquire-js": "^0.2.1",
@@ -37,7 +37,7 @@
     "phone": "^3.1.35",
     "preval.macro": "^5.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^8.1.0",
+    "query-string": "^7.1.3",
     "rc-queue-anim": "^2.0.0",
     "rc-scroll-anim": "^2.7.6",
     "react": "^17.0.2",
@@ -54,7 +54,7 @@
     "react-redux": "^8.0.5",
     "react-resizable": "^3.0.4",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-sticky": "^6.0.3",
     "react-sublime-video": "^0.2.5",
     "react-virtualized": "^9.22.3",

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.component.jsx

@@ -9,7 +9,11 @@ const colSpan = {
   lg: { span: 12 },
 };
 
-export default function JobsCreateVehicleInfoComponent({ loading, vehicles }) {
+export default function JobsCreateVehicleInfoComponent({
+  loading,
+  vehicles,
+  form,
+}) {
   const [state, setState] = useContext(JobCreateContext);
   const { t } = useTranslation();
   return (
@@ -58,7 +62,7 @@ export default function JobsCreateVehicleInfoComponent({ loading, vehicles }) {
           />
         </Col>
         <Col {...colSpan}>
-          <JobsCreateVehicleInfoNewComponent />
+          <JobsCreateVehicleInfoNewComponent form={form}/>
         </Col>
       </Row>
     </div>

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx

@@ -20,6 +20,7 @@ export default function JobsCreateVehicleInfoContainer({ form }) {
     <JobsCreateVehicleInfoComponent
       loading={loading}
       vehicles={data ? data.search_vehicles : null}
+      form={form}
     />
   );
 }

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx

@@ -4,8 +4,9 @@ import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import JobsCreateVehicleInfoPredefined from "./jobs-create-vehicle-info.predefined.component";
 
-export default function JobsCreateVehicleInfoNewComponent() {
+export default function JobsCreateVehicleInfoNewComponent({ form }) {
   const [state] = useContext(JobCreateContext);
 
   const { t } = useTranslation();
@@ -25,7 +26,7 @@ export default function JobsCreateVehicleInfoNewComponent() {
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow grow>
+      <LayoutFormRow grow noDivider>
         <Form.Item
           label={t("vehicles.fields.v_color")}
           name={["vehicle", "data", "v_color"]}
@@ -52,8 +53,9 @@ export default function JobsCreateVehicleInfoNewComponent() {
         </Form.Item>
       </LayoutFormRow>
 
-      <LayoutFormRow grow>
+      <LayoutFormRow grow noDivider>
         <Form.Item
+          span={10}
           label={t("vehicles.fields.v_make_desc")}
           name={["vehicle", "data", "v_make_desc"]}
           rules={[
@@ -66,6 +68,7 @@ export default function JobsCreateVehicleInfoNewComponent() {
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item
+          span={11}
           label={t("vehicles.fields.v_model_desc")}
           name={["vehicle", "data", "v_model_desc"]}
           rules={[
@@ -77,6 +80,7 @@ export default function JobsCreateVehicleInfoNewComponent() {
         >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
+        <JobsCreateVehicleInfoPredefined form={form} span={1} />
       </LayoutFormRow>
 
       <LayoutFormRow header={t("vehicles.forms.registration")} grow>

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx

@@ -0,0 +1,82 @@
+import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
+import { Button, Input, Popover, Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import PredefinedVehicles from "./predefined-vehicles.json";
+
+export default function JobsCreateVehicleInfoPredefined({ form }) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const { t } = useTranslation();
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+    setSearch("");
+  };
+  const filteredPredefinedVehicles =
+    search === ""
+      ? PredefinedVehicles
+      : PredefinedVehicles.filter((v) =>
+          v.make
+            .toLowerCase()
+            .includes(
+              search.toLowerCase() ||
+                v.model.toLowerCase().includes(search.toLowerCase())
+            )
+        );
+
+  const popContent = () => (
+    <div>
+      <Table
+        title={() => <Input.Search onSearch={(value) => setSearch(value)} />}
+        dataSource={filteredPredefinedVehicles}
+        columns={[
+          {
+            dataIndex: "make",
+            key: "make",
+            title: t("vehicles.fields.v_make_desc"),
+          },
+          {
+            dataIndex: "model",
+            key: "model",
+            title: t("vehicles.fields.v_model_desc"),
+          },
+          {
+            dataIndex: "select",
+            key: "select",
+            title: t("general.labels.actions"),
+            render: (value, record) => (
+              <Button
+                onClick={() => {
+                  form.setFieldsValue({
+                    vehicle: {
+                      data: {
+                        v_make_desc: record.make,
+                        v_model_desc: record.model,
+                      },
+                    },
+                  });
+                  setOpen(false);
+                  setSearch("");
+                }}
+              >
+                <PlusOutlined />
+              </Button>
+            ),
+          },
+        ]}
+      />
+    </div>
+  );
+  return (
+    <Popover
+      content={popContent}
+      trigger="click"
+      open={open}
+      placement="left"
+      onOpenChange={handleOpenChange}
+      destroyTooltipOnHide
+    >
+      <SearchOutlined style={{ cursor: "pointer" }} />
+    </Popover>
+  );
+}

client/src/components/jobs-create-vehicle-info/predefined-vehicles.json

@@ -0,0 +1,4 @@
+[
+  { "make": "Toyota", "model": "Camry" },
+  { "make": "Volkswagen", "model": "Golf" }
+]

client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import cleanAxios from "../../utils/CleanAxios";
 import formatBytes from "../../utils/formatbytes";
-import yauzl from "yauzl";
+//import yauzl from "yauzl";
 import { useTreatments } from "@splitsoftware/splitio-react";
 
 import { connect } from "react-redux";
@@ -69,44 +69,44 @@ export function JobsDocumentsDownloadButton({
     setDownload(null);
     if (Direct_Media_Download.treatment === "on") {
       try {
-        const parentDir = await window.showDirectoryPicker({
+        // const parentDir = await window.showDirectoryPicker({
-          id: "media",
+        //   id: "media",
-          startIn: "downloads",
+        //   startIn: "downloads",
-        });
+        // });
 
-        const directory = await parentDir.getDirectoryHandle(identifier, {
+        // const directory = await parentDir.getDirectoryHandle(identifier, {
-          create: true,
+        //   create: true,
-        });
+        // });
 
-        yauzl.fromBuffer(
+        // yauzl.fromBuffer(
-          Buffer.from(theDownloadedZip.data),
+        //   Buffer.from(theDownloadedZip.data),
-          {},
+        //   {},
-          (err, zipFile) => {
+        //   (err, zipFile) => {
-            if (err) throw err;
+        //     if (err) throw err;
-            zipFile.on("entry", (entry) => {
+        //     zipFile.on("entry", (entry) => {
-              zipFile.openReadStream(entry, async (readErr, readStream) => {
+        //       zipFile.openReadStream(entry, async (readErr, readStream) => {
-                if (readErr) {
+        //         if (readErr) {
-                  zipFile.close();
+        //           zipFile.close();
-                  throw readErr;
+        //           throw readErr;
-                }
+        //         }
-                if (err) throw err;
+        //         if (err) throw err;
-                let fileSystemHandle = await directory.getFileHandle(
+        //         let fileSystemHandle = await directory.getFileHandle(
-                  entry.fileName,
+        //           entry.fileName,
-                  {
+        //           {
-                    create: true,
+        //             create: true,
-                  }
+        //           }
-                );
+        //         );
-                const writable = await fileSystemHandle.createWritable();
+        //         const writable = await fileSystemHandle.createWritable();
-                readStream.on("data", async function (chunk) {
+        //         readStream.on("data", async function (chunk) {
-                  await writable.write(chunk);
+        //           await writable.write(chunk);
-                });
+        //         });
-                readStream.on("end", async function () {
+        //         readStream.on("end", async function () {
-                  await writable.close();
+        //           await writable.close();
-                });
+        //         });
-              });
+        //       });
-            });
+        //     });
-          }
+        //   }
-        );
+        // );
       } catch (e) {
         console.log(e);
         standardMediaDownload(theDownloadedZip.data);

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -17,7 +17,7 @@ export default function JobsCreateComponent({ form }) {
   const steps = [
     {
       title: t("jobs.labels.create.vehicleinfo"),
-      content: <JobsCreateVehicleInfoContainer />,
+      content: <JobsCreateVehicleInfoContainer form={form} />,
       validation:
         !!state.vehicle.new ||
         !!state.vehicle.selectedid ||

client/src/utils/CurrencyFormatter.jsx

@@ -1,9 +1,9 @@
 import React from "react";
-import NumberFormat from "react-number-format";
+import { NumericFormat } from "react-number-format";
 
 export default function CurrencyFormatter(props) {
   return (
-    <NumberFormat
+    <NumericFormat
       thousandSeparator={true}
       decimalScale={2}
       fixedDecimalScale={true}

client/src/utils/GraphQLClient.js

@@ -142,7 +142,7 @@ middlewares.push(
 
 const cache = new InMemoryCache({});
 
-export default new ApolloClient({
+const client = new ApolloClient({
   link: ApolloLink.from(middlewares),
   cache,
   connectToDevTools: process.env.NODE_ENV !== "production",
@@ -161,3 +161,4 @@ export default new ApolloClient({
     },
   },
 });
+export default client;