Added basic global search. BOD-30
This commit is contained in:
4
.gitignore
vendored
4
.gitignore
vendored
@@ -25,7 +25,9 @@ client/.env
|
|||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
client/npm-debug.log*
|
||||||
|
client/yarn-debug.log*
|
||||||
|
client/yarn-error.log*
|
||||||
|
|
||||||
#Firebase Ignore
|
#Firebase Ignore
|
||||||
# Logs
|
# Logs
|
||||||
|
|||||||
@@ -13748,6 +13748,95 @@
|
|||||||
</translation>
|
</translation>
|
||||||
</translations>
|
</translations>
|
||||||
</concept_node>
|
</concept_node>
|
||||||
|
<folder_node>
|
||||||
|
<name>search</name>
|
||||||
|
<children>
|
||||||
|
<concept_node>
|
||||||
|
<name>jobs</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>owners</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>payments</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>vehicles</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
</children>
|
||||||
|
</folder_node>
|
||||||
<concept_node>
|
<concept_node>
|
||||||
<name>shiftclock</name>
|
<name>shiftclock</name>
|
||||||
<definition_loaded>false</definition_loaded>
|
<definition_loaded>false</definition_loaded>
|
||||||
|
|||||||
143
client/src/components/global-search/global-search.component.jsx
Normal file
143
client/src/components/global-search/global-search.component.jsx
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { useLazyQuery } from "@apollo/react-hooks";
|
||||||
|
import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
|
||||||
|
import { Input, AutoComplete } from "antd";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
export default function GlobalSearch() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const [callSearch, { loading, error, data }] = useLazyQuery(
|
||||||
|
GLOBAL_SEARCH_QUERY
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSearch = (searchTerm) => {
|
||||||
|
if (searchTerm.length > 0)
|
||||||
|
callSearch({ variables: { search: searchTerm } });
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderTitle = (title) => {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
{title}
|
||||||
|
<a
|
||||||
|
style={{ float: "right" }}
|
||||||
|
href='https://www.google.com/search?q=antd'
|
||||||
|
target='_blank'
|
||||||
|
rel='noopener noreferrer'>
|
||||||
|
more
|
||||||
|
</a>
|
||||||
|
</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
|
||||||
|
? `${job.ro_number || ""} / ${job.est_number || ""}`
|
||||||
|
: `${job.est_number || ""}`}
|
||||||
|
</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 || ""
|
||||||
|
}`}</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>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<AutoComplete
|
||||||
|
dropdownClassName='certain-category-search-dropdown'
|
||||||
|
dropdownMatchSelectWidth={false}
|
||||||
|
style={{ width: 250 }}
|
||||||
|
options={options}>
|
||||||
|
<Input.Search size='large' loading={loading} onSearch={handleSearch} />
|
||||||
|
</AutoComplete>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -22,6 +22,7 @@ import {
|
|||||||
selectCurrentUser,
|
selectCurrentUser,
|
||||||
} from "../../redux/user/user.selectors";
|
} from "../../redux/user/user.selectors";
|
||||||
import "./header.styles.scss";
|
import "./header.styles.scss";
|
||||||
|
import GlobalSearch from "../global-search/global-search.component";
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
currentUser: selectCurrentUser,
|
currentUser: selectCurrentUser,
|
||||||
@@ -95,7 +96,11 @@ function Header({
|
|||||||
mode='horizontal'
|
mode='horizontal'
|
||||||
theme='dark'
|
theme='dark'
|
||||||
className='header-main-menu'
|
className='header-main-menu'
|
||||||
|
selectedKeys={["home"]}
|
||||||
onClick={handleMenuClick}>
|
onClick={handleMenuClick}>
|
||||||
|
<Menu.Item>
|
||||||
|
<GlobalSearch />
|
||||||
|
</Menu.Item>
|
||||||
<Menu.Item key='home'>
|
<Menu.Item key='home'>
|
||||||
<Link to='/manage'>
|
<Link to='/manage'>
|
||||||
<HomeFilled />
|
<HomeFilled />
|
||||||
|
|||||||
@@ -62,9 +62,11 @@ const determineFieldName = (operation) => {
|
|||||||
switch (operation) {
|
switch (operation) {
|
||||||
case "body":
|
case "body":
|
||||||
return "employee_body";
|
return "employee_body";
|
||||||
break;
|
|
||||||
case "refinish":
|
case "refinish":
|
||||||
return "employee_refinish";
|
return "employee_refinish";
|
||||||
break;
|
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
44
client/src/graphql/search.queries.js
Normal file
44
client/src/graphql/search.queries.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import gql from "graphql-tag";
|
||||||
|
|
||||||
|
export const GLOBAL_SEARCH_QUERY = gql`
|
||||||
|
query GLOBAL_SEARCH_QUERY($search: String) {
|
||||||
|
search_jobs(args: { search: $search }) {
|
||||||
|
id
|
||||||
|
ro_number
|
||||||
|
est_number
|
||||||
|
clm_total
|
||||||
|
clm_no
|
||||||
|
v_model_yr
|
||||||
|
v_model_desc
|
||||||
|
v_make_desc
|
||||||
|
v_color
|
||||||
|
plate_no
|
||||||
|
ownr_fn
|
||||||
|
ownr_ln
|
||||||
|
ownr_co_nm
|
||||||
|
}
|
||||||
|
search_owners(args: { search: $search }) {
|
||||||
|
id
|
||||||
|
ownr_fn
|
||||||
|
ownr_ln
|
||||||
|
ownr_co_nm
|
||||||
|
}
|
||||||
|
search_vehicles(args: { search: $search }) {
|
||||||
|
id
|
||||||
|
v_model_yr
|
||||||
|
v_model_desc
|
||||||
|
v_make_desc
|
||||||
|
v_color
|
||||||
|
}
|
||||||
|
search_payments(args: { search: $search }) {
|
||||||
|
id
|
||||||
|
amount
|
||||||
|
job {
|
||||||
|
ro_number
|
||||||
|
id
|
||||||
|
}
|
||||||
|
memo
|
||||||
|
transactionid
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
@@ -837,6 +837,12 @@
|
|||||||
"productionlist": "Production - List",
|
"productionlist": "Production - List",
|
||||||
"schedule": "Schedule",
|
"schedule": "Schedule",
|
||||||
"scoreboard": "Scoreboard",
|
"scoreboard": "Scoreboard",
|
||||||
|
"search": {
|
||||||
|
"jobs": "Jobs",
|
||||||
|
"owners": "Owners",
|
||||||
|
"payments": "Payments",
|
||||||
|
"vehicles": "Vehicles"
|
||||||
|
},
|
||||||
"shiftclock": "Shift Clock",
|
"shiftclock": "Shift Clock",
|
||||||
"shop": "My Shop",
|
"shop": "My Shop",
|
||||||
"shop_config": "Configuration",
|
"shop_config": "Configuration",
|
||||||
|
|||||||
@@ -837,6 +837,12 @@
|
|||||||
"productionlist": "",
|
"productionlist": "",
|
||||||
"schedule": "Programar",
|
"schedule": "Programar",
|
||||||
"scoreboard": "",
|
"scoreboard": "",
|
||||||
|
"search": {
|
||||||
|
"jobs": "",
|
||||||
|
"owners": "",
|
||||||
|
"payments": "",
|
||||||
|
"vehicles": ""
|
||||||
|
},
|
||||||
"shiftclock": "",
|
"shiftclock": "",
|
||||||
"shop": "Mi tienda",
|
"shop": "Mi tienda",
|
||||||
"shop_config": "Configuración",
|
"shop_config": "Configuración",
|
||||||
|
|||||||
@@ -837,6 +837,12 @@
|
|||||||
"productionlist": "",
|
"productionlist": "",
|
||||||
"schedule": "Programme",
|
"schedule": "Programme",
|
||||||
"scoreboard": "",
|
"scoreboard": "",
|
||||||
|
"search": {
|
||||||
|
"jobs": "",
|
||||||
|
"owners": "",
|
||||||
|
"payments": "",
|
||||||
|
"vehicles": ""
|
||||||
|
},
|
||||||
"shiftclock": "",
|
"shiftclock": "",
|
||||||
"shop": "Mon magasin",
|
"shop": "Mon magasin",
|
||||||
"shop_config": "Configuration",
|
"shop_config": "Configuration",
|
||||||
|
|||||||
@@ -0,0 +1,9 @@
|
|||||||
|
- args:
|
||||||
|
cascade: false
|
||||||
|
read_only: false
|
||||||
|
sql: "CREATE OR REPLACE FUNCTION public.search_owner(search text)\n RETURNS SETOF
|
||||||
|
owners\n LANGUAGE plpgsql\n STABLE\nAS $function$\r\n\r\nBEGIN\r\n if search
|
||||||
|
= '' then\r\n return query select * from owners ;\r\n else \r\n return
|
||||||
|
query SELECT\r\n *\r\nFROM\r\n owners\r\nWHERE\r\n search <% (ownr_fn) OR\r\n
|
||||||
|
\ search <% (ownr_ln) OR\r\n search <% (ownr_co_nm) ;\r\n end if;\r\n\r\n\tEND\r\n$function$;"
|
||||||
|
type: run_sql
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
- args:
|
||||||
|
cascade: false
|
||||||
|
read_only: false
|
||||||
|
sql: DROP FUNCTION "public"."search_owner"("pg_catalog"."text");
|
||||||
|
type: run_sql
|
||||||
@@ -4054,9 +4054,6 @@ functions:
|
|||||||
- function:
|
- function:
|
||||||
schema: public
|
schema: public
|
||||||
name: search_jobs
|
name: search_jobs
|
||||||
- function:
|
|
||||||
schema: public
|
|
||||||
name: search_owner
|
|
||||||
- function:
|
- function:
|
||||||
schema: public
|
schema: public
|
||||||
name: search_owners
|
name: search_owners
|
||||||
|
|||||||
Reference in New Issue
Block a user