CEC-5367: add vin: prefix and implement in fleets (#478)

src/components/Cars/List/useQuery.js

@@ -6,11 +6,16 @@ const TYPE_VIN = "vin";
 /**
  * Match VIN with RegEx
  * @param {string} vin - potential VIN
- * @returns {boolean}
+ * @returns {[boolean, string]}
  */
-function isVIN(vin) {
+function parseVin(vin = "") {
+  const prefix = new RegExp(`^${TYPE_VIN}:`);
+  if (vin.match(prefix)) {
+    return [true, vin.replace(prefix, "")];
+  }
+
   var re = new RegExp("^[A-HJ-NPR-Z0-9]{8}[0-9X][A-HJ-NPR-Z0-9]{2}[0-9]{6}$");
-  return vin.match(re)
+  return [vin.match(re), vin];
 }
 
 /**
@@ -24,9 +29,10 @@ function isVIN(vin) {
 function parseQueryPart(part) {
   let type = "search";
 
-  if (isVIN(part)) {
+  const [isVin, vin] = parseVin(part)
+  if (isVin) {
     type = TYPE_VIN;
-    part = `${part}`;
+    part = vin;
   }
 
   return [type, part];
@@ -55,11 +61,19 @@ export default function useQuery() {
       }
     });
 
+    setQuery(() => parts.map(([type, part]) => {
+      if (type !== "search") {
+        return `${type}:${part}`;
+      }
+
+      return part;
+    }).join(" ").replace(/\s{2,}/g, ' ').trim());
+
     setPayload({
       search,
       vins: vins.join(","),
     })
-  }, [query, setPayload]);
+  }, [query, setPayload, setQuery]);
 
   useEffect(() => {
     setLoading(false);