From 3c7ce84be2e706d0e7bc62c832e557ad28894f5b Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 31 Mar 2021 14:35:58 -0700
Subject: [PATCH] IO-814 Global Search Changes
---
.../global-search/global-search.component.jsx | 97 ++++++++++---------
.../components/header/header.component.jsx | 10 +-
.../jobs-detail-header.component.jsx | 2 +-
client/src/graphql/search.queries.js | 1 +
4 files changed, 56 insertions(+), 54 deletions(-)
diff --git a/client/src/components/global-search/global-search.component.jsx b/client/src/components/global-search/global-search.component.jsx
index 38f2dbf49..feb2ef1f1 100644
--- a/client/src/components/global-search/global-search.component.jsx
+++ b/client/src/components/global-search/global-search.component.jsx
@@ -1,11 +1,11 @@
import { useLazyQuery } from "@apollo/client";
-import { AutoComplete, Input } from "antd";
+import { AutoComplete, Divider, Input, Space } from "antd";
import _ from "lodash";
import React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
import AlertComponent from "../alert/alert.component";
export default function GlobalSearch() {
@@ -16,13 +16,12 @@ export default function GlobalSearch() {
);
const executeSearch = (v) => {
- callSearch(v);
+ if (v && v.variables.search && v.variables.search !== "") callSearch(v);
};
- const debouncedExecuteSearch = _.debounce(executeSearch, 500);
+ const debouncedExecuteSearch = _.debounce(executeSearch, 750);
const handleSearch = (value) => {
- if (value && value !== "")
- debouncedExecuteSearch({ variables: { search: value } });
+ debouncedExecuteSearch({ variables: { search: value } });
};
const renderTitle = (title) => {
@@ -35,27 +34,20 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.jobs")),
options: data.search_jobs.map((job) => {
return {
+ key: job.id,
value: job.ro_number,
label: (
-
-
- {job.ro_number || t("general.labels.na")}
-
-
- {`${
- job.ownr_fn || ""
- } ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`}
- {`${
- job.v_model_yr || ""
- } ${job.v_make_desc || ""} ${
+ }>
+ {job.ro_number || t("general.labels.na")}
+ {`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
+ job.ownr_co_nm || ""
+ }`}
+ {`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
job.v_model_desc || ""
}`}
- {`${job.clm_no}`}
-
- {`${job.clm_total}`}
-
-
+ {`${job.clm_no}`}
+
),
};
@@ -65,16 +57,20 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.owners")),
options: data.search_owners.map((owner) => {
return {
+ key: owner.id,
value: `${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
owner.ownr_co_nm || ""
}`,
label: (
-
- {`${
- owner.ownr_fn || ""
- } ${owner.ownr_ln || ""} ${owner.ownr_co_nm || ""}`}
-
+ }>
+ {`${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
+ owner.ownr_co_nm || ""
+ }`}
+
+ {owner.ownr_ph1}
+
+
),
};
@@ -84,18 +80,21 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.vehicles")),
options: data.search_vehicles.map((vehicle) => {
return {
+ key: vehicle.id,
value: `${vehicle.v_model_yr || ""} ${
vehicle.v_make_desc || ""
} ${vehicle.v_model_desc || ""}`,
label: (
-
- {`${
- vehicle.v_model_yr || ""
- } ${vehicle.v_make_desc || ""} ${
- vehicle.v_model_desc || ""
- } - ${vehicle.plate_no} - ${vehicle.v_vin}`}
-
+ }>
+
+ {`${vehicle.v_model_yr || ""} ${
+ vehicle.v_make_desc || ""
+ } ${vehicle.v_model_desc || ""}`}
+
+ {vehicle.plate_no}
+ {vehicle.v_vin}
+
),
};
@@ -105,15 +104,16 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.payments")),
options: data.search_payments.map((payment) => {
return {
+ key: payment.id,
value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`,
label: (
-
- {`${payment.job.ro_number}`}
- {`${payment.job.memo}`}
- {`${payment.job.amount}`}
- {`${payment.job.transactionid}`}
-
+ }>
+ {payment.job.ro_number}
+ {payment.job.memo}
+ {payment.job.amount}
+ {payment.job.transactionid}
+
),
};
@@ -123,14 +123,15 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.bills")),
options: data.search_bills.map((bill) => {
return {
- value: `${bill.invoice_number}`,
+ key: bill.id,
+ value: `${bill.invoice_number} - ${bill.vendor.name}`,
label: (
-
- {`${bill.invoice_number}`}
- {`${bill.vendor.name}`}
- {`${bill.date}`}
-
+ }>
+ {bill.invoice_number}
+ {bill.vendor.name}
+ {bill.date}
+
),
};
@@ -144,11 +145,11 @@ export default function GlobalSearch() {
return (
-
+
);
}
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index 08d71de55..6a5bec000 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -298,11 +298,8 @@ function Header({
{t("menus.header.shop_csi")}
-
-
-
-
- }>
+ }>
{recentItems.map((i, idx) => (
{i.label}
))}
+
+
+
);
diff --git a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
index 4b5901ad9..e4271543c 100644
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -109,7 +109,7 @@ export function JobsDetailHeader({ job, bodyshop }) {
-
+