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

Added searching to available jobs page. BOD-199

Browse Source
This commit is contained in:
Patrick Fic
2020-08-03 09:20:06 -07:00
parent 0f5deae22e
commit 0dbe56d36c
7 changed files with 86 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
client/src/components/jobs-available-new/jobs-available-new.component.jsx
View File

@@ -3,7 +3,7 @@ import {
PlusCircleFilled,
SyncOutlined,
} from "@ant-design/icons";
import { Button, notification, Table } from "antd";
import { Button, notification, Table, Input } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -27,7 +27,7 @@ export default function JobsAvailableComponent({
estData,
}) {
const { t } = useTranslation();
const [searchText, setSearchText] = useState("");
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: { text: "" },
@@ -156,6 +156,21 @@ export default function JobsAvailableComponent({
? estData.data.available_jobs_by_pk.est_data.owner.data
: null;
const availableJobs = data
? searchText
? data.available_jobs.filter(
(j) =>
(j.ownr_name || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.vehicle_info || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.clm_no || "").toLowerCase().includes(searchText.toLowerCase())
)
: data.available_jobs
: [];
return (
<div>
<OwnerFindModalContainer
@@ -173,12 +188,9 @@ export default function JobsAvailableComponent({
loading={loading}
title={() => {
return (
<div className="imex-flex-row">
<strong className="imex-flex-row__margin">
{t("jobs.labels.availablenew")}
</strong>
<div className="imex-table-header">
<strong>{t("jobs.labels.availablenew")}</strong>
<Button
className="imex-flex-row__margin"
onClick={() => {
refetch();
}}
@@ -186,7 +198,6 @@ export default function JobsAvailableComponent({
<SyncOutlined />
</Button>
<Button
className="imex-flex-row__margin"
onClick={() => {
deleteAllNewJobs()
.then((r) => {
@@ -204,16 +215,24 @@ export default function JobsAvailableComponent({
});
}}
>
Delete All
{t("general.actions.deleteall")}
</Button>
<div className="imex-table-header__search">
<Input.Search
placeholder={t("general.labels.search")}
onChange={(e) => {
setSearchText(e.currentTarget.value);
}}
/>
</div>
</div>
);
}}
size="small"
pagination={{ position: "top" }}
columns={columns.map((item) => ({ ...item }))}
columns={columns}
rowKey="id"
dataSource={data && data.available_jobs}
dataSource={availableJobs}
onChange={handleTableChange}
/>
</div>

42
client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx
View File

@@ -3,7 +3,7 @@ import {
PlusCircleFilled,
SyncOutlined,
} from "@ant-design/icons";
import { Button, notification, Table } from "antd";
import { Button, notification, Table, Input } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -29,6 +29,7 @@ export default function JobsAvailableSupplementComponent({
modalSearchState,
}) {
const { t } = useTranslation();
const [searchText, setSearchText] = useState("");
const [state, setState] = useState({
sortedInfo: {},
@@ -176,6 +177,21 @@ export default function JobsAvailableSupplementComponent({
});
};
const availableJobs = data
? searchText
? data.available_jobs.filter(
(j) =>
(j.ownr_name || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.vehicle_info || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.clm_no || "").toLowerCase().includes(searchText.toLowerCase())
)
: data.available_jobs
: [];
return (
<div>
<JobsFindModalContainer
@@ -193,24 +209,26 @@ export default function JobsAvailableSupplementComponent({
loading={loading}
title={() => {
return (
<div className="imex-flex-row">
<strong className="imex-flex-row__margin">
{t("jobs.labels.availablesupplements")}
</strong>
<div className="imex-table-header">
<strong>{t("jobs.labels.availablesupplements")}</strong>
<Button
className="imex-flex-row__margin"
onClick={() => {
refetch();
}}
>
<SyncOutlined />
</Button>
<Button
className="imex-flex-row__margin"
onClick={handleDeleteAll}
>
Delete All
<Button onClick={handleDeleteAll}>
{t("general.actions.deleteall")}
</Button>
<div className="imex-table-header__search">
<Input.Search
placeholder={t("general.labels.search")}
onChange={(e) => {
setSearchText(e.currentTarget.value);
}}
/>
</div>
</div>
);
}}
@@ -218,7 +236,7 @@ export default function JobsAvailableSupplementComponent({
pagination={{ position: "top" }}
columns={columns}
rowKey="id"
dataSource={data && data.available_jobs}
dataSource={availableJobs}
onChange={handleTableChange}
/>
</div>

5
client/src/components/jobs-export-all-button/jobs-export-all-button.component.jsx
View File

@@ -5,10 +5,9 @@ import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { auth } from "../../firebase/firebase.utils";
import { UPDATE_JOB, UPDATE_JOBS } from "../../graphql/jobs.queries";
import { auth, logImEXEvent } from "../../firebase/firebase.utils";
import { UPDATE_JOBS } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { logImEXEvent } from "../../firebase/firebase.utils";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,