admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-814 Global Search Changes

Browse Source
This commit is contained in:
Patrick Fic
2021-03-31 14:35:58 -07:00
parent 79fc39b964
commit 3c7ce84be2
4 changed files with 56 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
client/src/components/global-search/global-search.component.jsx
View File

@@ -1,11 +1,11 @@
import { useLazyQuery } from "@apollo/client"; import { useLazyQuery } from "@apollo/client";
import { AutoComplete, Input } from "antd"; import { AutoComplete, Divider, Input, Space } from "antd";
import _ from "lodash"; import _ from "lodash";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries"; import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
import CurrencyFormatter from "../../utils/CurrencyFormatter"; import PhoneNumberFormatter from "../../utils/PhoneFormatter";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
export default function GlobalSearch() { export default function GlobalSearch() {
@@ -16,13 +16,12 @@ export default function GlobalSearch() {
); );
const executeSearch = (v) => { 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) => { const handleSearch = (value) => {
if (value && value !== "") debouncedExecuteSearch({ variables: { search: value } });
debouncedExecuteSearch({ variables: { search: value } });
}; };
const renderTitle = (title) => { const renderTitle = (title) => {
@@ -35,27 +34,20 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.jobs")), label: renderTitle(t("menus.header.search.jobs")),
options: data.search_jobs.map((job) => { options: data.search_jobs.map((job) => {
return { return {
key: job.id,
value: job.ro_number, value: job.ro_number,
label: ( label: (
<Link to={`/manage/jobs/${job.id}`}> <Link to={`/manage/jobs/${job.id}`}>
<div className="imex-flex-row"> <Space wrap split={<Divider type="vertical" />}>
<span className="imex-flex-row__margin-large"> <strong>{job.ro_number || t("general.labels.na")}</strong>
<strong>{job.ro_number || t("general.labels.na")}</strong> <span>{`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
</span> job.ownr_co_nm || ""
}`}</span>
<span className="imex-flex-row__margin-large">{`${ <span>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
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 || "" job.v_model_desc || ""
}`}</span> }`}</span>
<span className="imex-flex-row__margin-large">{`${job.clm_no}`}</span> <span>{`${job.clm_no}`}</span>
<span className="imex-flex-row__margin-large imex-flex-row__grow"> </Space>
<CurrencyFormatter>{`${job.clm_total}`}</CurrencyFormatter>
</span>
</div>
</Link> </Link>
), ),
}; };
@@ -65,16 +57,20 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.owners")), label: renderTitle(t("menus.header.search.owners")),
options: data.search_owners.map((owner) => { options: data.search_owners.map((owner) => {
return { return {
key: owner.id,
value: `${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${ value: `${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
owner.ownr_co_nm || "" owner.ownr_co_nm || ""
}`, }`,
label: ( label: (
<Link to={`/manage/owners/${owner.id}`}> <Link to={`/manage/owners/${owner.id}`}>
<div className="imex-flex-row"> <Space wrap split={<Divider type="vertical" />}>
<span className="imex-flex-row__margin-large">{`${ <span>{`${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
owner.ownr_fn || "" owner.ownr_co_nm || ""
} ${owner.ownr_ln || ""} ${owner.ownr_co_nm || ""}`}</span> }`}</span>
</div> <PhoneNumberFormatter>
{owner.ownr_ph1}
</PhoneNumberFormatter>
</Space>
</Link> </Link>
), ),
}; };
@@ -84,18 +80,21 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.vehicles")), label: renderTitle(t("menus.header.search.vehicles")),
options: data.search_vehicles.map((vehicle) => { options: data.search_vehicles.map((vehicle) => {
return { return {
key: vehicle.id,
value: `${vehicle.v_model_yr || ""} ${ value: `${vehicle.v_model_yr || ""} ${
vehicle.v_make_desc || "" vehicle.v_make_desc || ""
} ${vehicle.v_model_desc || ""}`, } ${vehicle.v_model_desc || ""}`,
label: ( label: (
<Link to={`/manage/vehicles/${vehicle.id}`}> <Link to={`/manage/vehicles/${vehicle.id}`}>
<div className="imex-flex-row"> <Space wrap split={<Divider type="vertical" />}>
<span className="imex-flex-row__margin-large">{`${ <span>
vehicle.v_model_yr || "" {`${vehicle.v_model_yr || ""} ${
} ${vehicle.v_make_desc || ""} ${ vehicle.v_make_desc || ""
vehicle.v_model_desc || "" } ${vehicle.v_model_desc || ""}`}
} - ${vehicle.plate_no} - ${vehicle.v_vin}`}</span> </span>
</div> <span>{vehicle.plate_no}</span>
<span> {vehicle.v_vin}</span>
</Space>
</Link> </Link>
), ),
}; };
@@ -105,15 +104,16 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.payments")), label: renderTitle(t("menus.header.search.payments")),
options: data.search_payments.map((payment) => { options: data.search_payments.map((payment) => {
return { return {
key: payment.id,
value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`, value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`,
label: ( label: (
<Link to={`/manage/jobs/${payment.job.id}`}> <Link to={`/manage/jobs/${payment.job.id}`}>
<div className="imex-flex-row"> <Space wrap split={<Divider type="vertical" />}>
<span className="imex-flex-row__margin-large">{`${payment.job.ro_number}`}</span> <span>{payment.job.ro_number}</span>
<span className="imex-flex-row__margin-large">{`${payment.job.memo}`}</span> <span>{payment.job.memo}</span>
<span className="imex-flex-row__margin-large">{`${payment.job.amount}`}</span> <span>{payment.job.amount}</span>
<span className="imex-flex-row__margin-large">{`${payment.job.transactionid}`}</span> <span>{payment.job.transactionid}</span>
</div> </Space>
</Link> </Link>
), ),
}; };
@@ -123,14 +123,15 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.bills")), label: renderTitle(t("menus.header.search.bills")),
options: data.search_bills.map((bill) => { options: data.search_bills.map((bill) => {
return { return {
value: `${bill.invoice_number}`, key: bill.id,
value: `${bill.invoice_number} - ${bill.vendor.name}`,
label: ( label: (
<Link to={`/manage/bills?billid=${bill.id}`}> <Link to={`/manage/bills?billid=${bill.id}`}>
<div className="imex-flex-row"> <Space wrap split={<Divider type="vertical" />}>
<span className="imex-flex-row__margin-large">{`${bill.invoice_number}`}</span> <span>{bill.invoice_number}</span>
<span className="imex-flex-row__margin-large">{`${bill.vendor.name}`}</span> <span>{bill.vendor.name}</span>
<span className="imex-flex-row__margin-large">{`${bill.date}`}</span> <span>{bill.date}</span>
</div> </Space>
</Link> </Link>
), ),
}; };
@@ -144,11 +145,11 @@ export default function GlobalSearch() {
return ( return (
<AutoComplete <AutoComplete
dropdownMatchSelectWidth={false} dropdownMatchSelectWidth={false}
style={{ flex: 2 }}
options={options} options={options}
onSearch={handleSearch} onSearch={handleSearch}
allowClear
> >
<Input.Search loading={loading} /> <Input.Search loading={loading} style={{ width: "20vw" }} />
</AutoComplete> </AutoComplete>
); );
} }

10
client/src/components/header/header.component.jsx
View File

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

2
client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
View File

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

1
client/src/graphql/search.queries.js
View File

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