IO-814 Global Search Changes

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: (
                 <Link to={`/manage/jobs/${job.id}`}>
-                  <div className="imex-flex-row">
-                    <span className="imex-flex-row__margin-large">
-                      <strong>{job.ro_number || t("general.labels.na")}</strong>
-                    </span>
-
-                    <span className="imex-flex-row__margin-large">{`${
-                      job.ownr_fn || ""
-                    } ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`}</span>
-                    <span className="imex-flex-row__margin-large">{`${
-                      job.v_model_yr || ""
-                    } ${job.v_make_desc || ""} ${
+                  <Space wrap split={<Divider type="vertical" />}>
+                    <strong>{job.ro_number || t("general.labels.na")}</strong>
+                    <span>{`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
+                      job.ownr_co_nm || ""
+                    }`}</span>
+                    <span>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
                       job.v_model_desc || ""
                     }`}</span>
-                    <span className="imex-flex-row__margin-large">{`${job.clm_no}`}</span>
-                    <span className="imex-flex-row__margin-large imex-flex-row__grow">
-                      <CurrencyFormatter>{`${job.clm_total}`}</CurrencyFormatter>
-                    </span>
-                  </div>
+                    <span>{`${job.clm_no}`}</span>
+                  </Space>
                 </Link>
               ),
             };
@@ -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: (
                 <Link to={`/manage/owners/${owner.id}`}>
-                  <div className="imex-flex-row">
-                    <span className="imex-flex-row__margin-large">{`${
-                      owner.ownr_fn || ""
-                    } ${owner.ownr_ln || ""} ${owner.ownr_co_nm || ""}`}</span>
-                  </div>
+                  <Space wrap split={<Divider type="vertical" />}>
+                    <span>{`${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
+                      owner.ownr_co_nm || ""
+                    }`}</span>
+                    <PhoneNumberFormatter>
+                      {owner.ownr_ph1}
+                    </PhoneNumberFormatter>
+                  </Space>
                 </Link>
               ),
             };
@@ -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: (
                 <Link to={`/manage/vehicles/${vehicle.id}`}>
-                  <div className="imex-flex-row">
-                    <span className="imex-flex-row__margin-large">{`${
-                      vehicle.v_model_yr || ""
-                    } ${vehicle.v_make_desc || ""} ${
-                      vehicle.v_model_desc || ""
-                    } - ${vehicle.plate_no} - ${vehicle.v_vin}`}</span>
-                  </div>
+                  <Space wrap split={<Divider type="vertical" />}>
+                    <span>
+                      {`${vehicle.v_model_yr || ""} ${
+                        vehicle.v_make_desc || ""
+                      } ${vehicle.v_model_desc || ""}`}
+                    </span>
+                    <span>{vehicle.plate_no}</span>
+                    <span> {vehicle.v_vin}</span>
+                  </Space>
                 </Link>
               ),
             };
@@ -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: (
                 <Link to={`/manage/jobs/${payment.job.id}`}>
-                  <div className="imex-flex-row">
-                    <span className="imex-flex-row__margin-large">{`${payment.job.ro_number}`}</span>
-                    <span className="imex-flex-row__margin-large">{`${payment.job.memo}`}</span>
-                    <span className="imex-flex-row__margin-large">{`${payment.job.amount}`}</span>
-                    <span className="imex-flex-row__margin-large">{`${payment.job.transactionid}`}</span>
-                  </div>
+                  <Space wrap split={<Divider type="vertical" />}>
+                    <span>{payment.job.ro_number}</span>
+                    <span>{payment.job.memo}</span>
+                    <span>{payment.job.amount}</span>
+                    <span>{payment.job.transactionid}</span>
+                  </Space>
                 </Link>
               ),
             };
@@ -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: (
                 <Link to={`/manage/bills?billid=${bill.id}`}>
-                  <div className="imex-flex-row">
-                    <span className="imex-flex-row__margin-large">{`${bill.invoice_number}`}</span>
-                    <span className="imex-flex-row__margin-large">{`${bill.vendor.name}`}</span>
-                    <span className="imex-flex-row__margin-large">{`${bill.date}`}</span>
-                  </div>
+                  <Space wrap split={<Divider type="vertical" />}>
+                    <span>{bill.invoice_number}</span>
+                    <span>{bill.vendor.name}</span>
+                    <span>{bill.date}</span>
+                  </Space>
                 </Link>
               ),
             };
@@ -144,11 +145,11 @@ export default function GlobalSearch() {
   return (
     <AutoComplete
       dropdownMatchSelectWidth={false}
-      style={{ flex: 2 }}
       options={options}
       onSearch={handleSearch}
+      allowClear
     >
-      <Input.Search loading={loading} />
+      <Input.Search loading={loading} style={{ width: "20vw" }} />
     </AutoComplete>
   );
 }

client/src/components/header/header.component.jsx

@@ -298,11 +298,8 @@ function Header({
             <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
           </Menu.Item>
         </Menu.SubMenu>
-
-        <Menu.Item>
-          <GlobalSearch />
-        </Menu.Item>
         <Menu.SubMenu
+          style={{ float: "right" }}
           title={
             currentUser.displayName ||
             currentUser.email ||
@@ -344,13 +341,16 @@ function Header({
             </Menu.Item>
           </Menu.SubMenu>
         </Menu.SubMenu>
-        <Menu.SubMenu title={<ClockCircleFilled />}>
+        <Menu.SubMenu style={{ float: "right" }} title={<ClockCircleFilled />}>
           {recentItems.map((i, idx) => (
             <Menu.Item key={idx}>
               <Link to={i.url}>{i.label}</Link>
             </Menu.Item>
           ))}
         </Menu.SubMenu>
+        <Menu.Item style={{ float: "right" }}>
+          <GlobalSearch />
+        </Menu.Item>
       </Menu>
     </Layout.Header>
   );

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -109,7 +109,7 @@ export function JobsDetailHeader({ job, bodyshop }) {
         </Link>
       </Col>
       <Col {...colSpan}>
-        <Link to={`/manage/vehicles/${job.vehicle.id}`}>
+        <Link to={job.vehicle && `/manage/vehicles/${job.vehicle.id}`}>
           <Card
             className="ant-card-grid-hoverable"
             style={{ height: "100%" }}

client/src/graphql/search.queries.js

@@ -22,6 +22,7 @@ export const GLOBAL_SEARCH_QUERY = gql`
       ownr_fn
       ownr_ln
       ownr_co_nm
+      ownr_ph1
     }
     search_vehicles(args: { search: $search }) {
       id