bodyshop/client/src/components/global-search/global-search.component.jsx

import { useLazyQuery } from "@apollo/client";
import { AutoComplete, Input } 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 AlertComponent from "../alert/alert.component";

export default function GlobalSearch() {
  const { t } = useTranslation();

  const [callSearch, { loading, error, data }] = useLazyQuery(
    GLOBAL_SEARCH_QUERY
  );

  const executeSearch = (v) => {
    callSearch(v);
  };
  const debouncedExecuteSearch = _.debounce(executeSearch, 500);

  const handleSearch = (value) => {
    if (value && value !== "")
      debouncedExecuteSearch({ variables: { search: value } });
  };

  const renderTitle = (title) => {
    return <span>{title}</span>;
  };

  const options = data
    ? [
        {
          label: renderTitle(t("menus.header.search.jobs")),
          options: data.search_jobs.map((job) => {
            return {
              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 || ""} ${
                      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>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.owners")),
          options: data.search_owners.map((owner) => {
            return {
              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>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.vehicles")),
          options: data.search_vehicles.map((vehicle) => {
            return {
              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>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.payments")),
          options: data.search_payments.map((payment) => {
            return {
              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>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.bills")),
          options: data.search_bills.map((bill) => {
            return {
              value: `${bill.invoice_number}`,
              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>
                </Link>
              ),
            };
          }),
        },
      ]
    : [];

  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
    <AutoComplete
      dropdownMatchSelectWidth={false}
      style={{ flex: 2 }}
      options={options}
      onSearch={handleSearch}
    >
      <Input.Search loading={loading} />
    </AutoComplete>
  );
}