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 }) { - +