Admin vehicle/owner reassociation IO-157

2021-01-19 09:34:43 -08:00
parent 56cb193460
commit 5a1eb37544
18 changed files with 655 additions and 5 deletions
--- a/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
+++ b/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
@@ -0,0 +1,96 @@
+import { LoadingOutlined } from "@ant-design/icons";
+import { useLazyQuery } from "@apollo/react-hooks";
+import { Empty, Select } from "antd";
+import _ from "lodash";
+import React, { forwardRef, useEffect, useState } from "react";
+import {
+    SEARCH_VEHICLES_BY_ID_FOR_AUTOCOMPLETE,
+    SEARCH_VEHICLES_FOR_AUTOCOMPLETE
+} from "../../graphql/vehicles.queries";
+import AlertComponent from "../alert/alert.component";
+
+const { Option } = Select;
+
+const VehicleSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
+  const [callSearch, { loading, error, data }] = useLazyQuery(
+    SEARCH_VEHICLES_FOR_AUTOCOMPLETE
+  );
+
+  const [
+    callIdSearch,
+    { loading: idLoading, error: idError, data: idData },
+  ] = useLazyQuery(SEARCH_VEHICLES_BY_ID_FOR_AUTOCOMPLETE);
+
+  const executeSearch = (v) => {
+    callSearch(v);
+  };
+  const debouncedExecuteSearch = _.debounce(executeSearch, 500);
+
+  const handleSearch = (value) => {
+    debouncedExecuteSearch({ variables: { search: value } });
+  };
+
+  const [option, setOption] = useState(value);
+
+  useEffect(() => {
+    if (value === option && value) {
+      callIdSearch({ variables: { id: value } });
+    }
+  }, [value, option, callIdSearch]);
+
+  // useEffect(() => {
+  //   if (value !== option && onChange) {
+  //     onChange(option);
+  //   }
+  // }, [value, option, onChange]);
+
+  const handleSelect = (value) => {
+    setOption(value);
+    if (value !== option && onChange) {
+      onChange(value);
+    }
+  };
+
+  const theOptions = [
+    ...(idData && idData.vehicles_by_pk ? [idData.vehicles_by_pk] : []),
+    ...(data && data.search_vehicles ? data.search_vehicles : []),
+  ];
+
+  return (
+    <div>
+      <Select
+        ref={ref}
+        disabled={disabled}
+        showSearch
+        autoFocus
+        value={option}
+        style={{
+          width: "100%",
+        }}
+        filterOption={false}
+        onSearch={handleSearch}
+        //     onChange={setOption}
+        onChange={handleSelect}
+        onSelect={handleSelect}
+        notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
+        onBlur={onBlur}
+      >
+        {theOptions
+          ? theOptions.map((o) => (
+              <Option key={o.id} value={o.id}>
+                {`${o.v_vin || ""} ${o.v_model_yr || ""} ${
+                  o.v_make_desc || ""
+                } ${o.v_model_desc || ""} `}
+              </Option>
+            ))
+          : null}
+      </Select>
+      {idLoading || loading ? <LoadingOutlined /> : null}
+      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {idError ? (
+        <AlertComponent message={idError.message} type="error" />
+      ) : null}
+    </div>
+  );
+};
+export default forwardRef(VehicleSearchSelect);