IO-847 Show search terms on paginated components

This commit is contained in:
Patrick Fic
2021-04-09 08:00:31 -07:00
parent 8b4da7b376
commit 846745ea05
10 changed files with 158 additions and 22 deletions

View File

@@ -11436,6 +11436,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>clear</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> <concept_node>
<name>close</name> <name>close</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -12559,6 +12580,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>searchresults</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> <concept_node>
<name>selectdate</name> <name>selectdate</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>

View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons"; import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Input, Space, Table } from "antd"; import { Button, Card, Input, Space, Table, Typography } from "antd";
import queryString from "query-string"; import queryString from "query-string";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -131,9 +131,23 @@ export default function ContractsList({ loading, contracts, refetch, total }) {
</Button> </Button>
<TimeTicketsDatesSelector /> <TimeTicketsDatesSelector />
{search.search && (
<>
<Typography.Title level={4}>
{t("general.labels.searchresults", { search: search.search })}
</Typography.Title>
<Button
onClick={() => {
delete search.search;
history.push({ search: queryString.stringify(search) });
}}
>
{t("general.actions.clear")}
</Button>
</>
)}
<Input.Search <Input.Search
placeholder={t("general.labels.search")} placeholder={search.searh || t("general.labels.search")}
onSearch={(value) => { onSearch={(value) => {
search.search = value; search.search = value;
history.push({ search: queryString.stringify(search) }); history.push({ search: queryString.stringify(search) });

View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons"; import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Input, Space, Table } from "antd"; import { Button, Card, Input, Space, Table, Typography } from "antd";
import queryString from "query-string"; import queryString from "query-string";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -193,11 +193,26 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
<Card <Card
extra={ extra={
<Space wrap> <Space wrap>
{search.search && (
<>
<Typography.Title level={4}>
{t("general.labels.searchresults", { search: search.search })}
</Typography.Title>
<Button
onClick={() => {
delete search.search;
history.push({ search: queryString.stringify(search) });
}}
>
{t("general.actions.clear")}
</Button>
</>
)}
<Button onClick={() => refetch()}> <Button onClick={() => refetch()}>
<SyncOutlined /> <SyncOutlined />
</Button> </Button>
<Input.Search <Input.Search
placeholder={t("general.labels.search")} placeholder={search.search || t("general.labels.search")}
onSearch={(value) => { onSearch={(value) => {
search.search = value; search.search = value;
history.push({ search: queryString.stringify(search) }); history.push({ search: queryString.stringify(search) });

View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons"; import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Input, Space, Table } from "antd"; import { Button, Card, Input, Space, Table, Typography } from "antd";
import queryString from "query-string"; import queryString from "query-string";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -78,11 +78,26 @@ export default function OwnersListComponent({
title={t("menus.header.owners")} title={t("menus.header.owners")}
extra={ extra={
<Space wrap> <Space wrap>
{search.search && (
<>
<Typography.Title level={4}>
{t("general.labels.searchresults", { search: search.search })}
</Typography.Title>
<Button
onClick={() => {
delete search.search;
history.push({ search: queryString.stringify(search) });
}}
>
{t("general.actions.clear")}
</Button>
</>
)}
<Button onClick={() => refetch()}> <Button onClick={() => refetch()}>
<SyncOutlined /> <SyncOutlined />
</Button> </Button>
<Input.Search <Input.Search
placeholder={t("general.labels.search")} placeholder={search.search || t("general.labels.search")}
onSearch={(value) => { onSearch={(value) => {
search.search = value; search.search = value;
history.push({ search: queryString.stringify(search) }); history.push({ search: queryString.stringify(search) });

View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons"; import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Input, Space, Table } from "antd"; import { Button, Card, Input, Space, Table, Typography } from "antd";
import queryString from "query-string"; import queryString from "query-string";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -178,11 +178,26 @@ export function PaymentsListPaginated({
<Card <Card
extra={ extra={
<Space wrap> <Space wrap>
{search.search && (
<>
<Typography.Title level={4}>
{t("general.labels.searchresults", { search: search.search })}
</Typography.Title>
<Button
onClick={() => {
delete search.search;
history.push({ search: queryString.stringify(search) });
}}
>
{t("general.actions.clear")}
</Button>
</>
)}
<Button onClick={() => refetch()}> <Button onClick={() => refetch()}>
<SyncOutlined /> <SyncOutlined />
</Button> </Button>
<Input.Search <Input.Search
placeholder={t("general.labels.search")} placeholder={search.search || t("general.labels.search")}
onSearch={(value) => { onSearch={(value) => {
search.search = value; search.search = value;
history.push({ search: queryString.stringify(search) }); history.push({ search: queryString.stringify(search) });

View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons"; import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Input, Space, Table } from "antd"; import { Button, Card, Input, Space, Table, Typography } from "antd";
import queryString from "query-string"; import queryString from "query-string";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -13,7 +13,7 @@ export default function VehiclesListComponent({
const search = queryString.parse(useLocation().search); const search = queryString.parse(useLocation().search);
const { const {
page, page,
//sortcolumn, sortorder //sortcolumn, sortorder,
} = search; } = search;
const history = useHistory(); const history = useHistory();
@@ -66,11 +66,26 @@ export default function VehiclesListComponent({
title={t("menus.header.vehicles")} title={t("menus.header.vehicles")}
extra={ extra={
<Space wrap> <Space wrap>
{search.search && (
<>
<Typography.Title level={4}>
{t("general.labels.searchresults", { search: search.search })}
</Typography.Title>
<Button
onClick={() => {
delete search.search;
history.push({ search: queryString.stringify(search) });
}}
>
{t("general.actions.clear")}
</Button>
</>
)}
<Button onClick={() => refetch()}> <Button onClick={() => refetch()}>
<SyncOutlined /> <SyncOutlined />
</Button> </Button>
<Input.Search <Input.Search
placeholder={t("general.labels.search")} placeholder={search.search || t("general.labels.search")}
onSearch={(value) => { onSearch={(value) => {
search.search = value; search.search = value;
history.push({ search: queryString.stringify(search) }); history.push({ search: queryString.stringify(search) });

View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons"; import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Checkbox, Input, Space, Table } from "antd"; import { Button, Card, Checkbox, Input, Space, Table, Typography } from "antd";
import queryString from "query-string"; import queryString from "query-string";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -205,6 +205,21 @@ export function BillsListPage({
title={t("bills.labels.bills")} title={t("bills.labels.bills")}
extra={ extra={
<Space wrap> <Space wrap>
{search.search && (
<>
<Typography.Title level={4}>
{t("general.labels.searchresults", { search: search.search })}
</Typography.Title>
<Button
onClick={() => {
delete search.search;
history.push({ search: queryString.stringify(search) });
}}
>
{t("general.actions.clear")}
</Button>
</>
)}
<Button onClick={() => refetch()}> <Button onClick={() => refetch()}>
<SyncOutlined /> <SyncOutlined />
</Button> </Button>
@@ -218,15 +233,14 @@ export function BillsListPage({
> >
{t("jobs.actions.postbills")} {t("jobs.actions.postbills")}
</Button> </Button>
<div className="imex-table-header__search">
<Input.Search <Input.Search
placeholder={t("general.labels.search")} placeholder={search.search || t("general.labels.search")}
onSearch={(value) => { onSearch={(value) => {
search.search = value; search.search = value;
history.push({ search: queryString.stringify(search) }); history.push({ search: queryString.stringify(search) });
}} }}
/> />
</div>
</Space> </Space>
} }
> >

View File

@@ -741,6 +741,7 @@
"add": "Add", "add": "Add",
"calculate": "Calculate", "calculate": "Calculate",
"cancel": "Cancel", "cancel": "Cancel",
"clear": "Clear",
"close": "Close", "close": "Close",
"copylink": "Copy Link", "copylink": "Copy Link",
"create": "Create", "create": "Create",
@@ -798,6 +799,7 @@
"required": "Required", "required": "Required",
"saturday": "Saturday", "saturday": "Saturday",
"search": "Search...", "search": "Search...",
"searchresults": "Results for {{search}}",
"selectdate": "Select date...", "selectdate": "Select date...",
"sendagain": "Send Again", "sendagain": "Send Again",
"sendby": "Send By", "sendby": "Send By",

View File

@@ -741,6 +741,7 @@
"add": "", "add": "",
"calculate": "", "calculate": "",
"cancel": "", "cancel": "",
"clear": "",
"close": "", "close": "",
"copylink": "", "copylink": "",
"create": "", "create": "",
@@ -798,6 +799,7 @@
"required": "", "required": "",
"saturday": "", "saturday": "",
"search": "Buscar...", "search": "Buscar...",
"searchresults": "",
"selectdate": "", "selectdate": "",
"sendagain": "", "sendagain": "",
"sendby": "", "sendby": "",

View File

@@ -741,6 +741,7 @@
"add": "", "add": "",
"calculate": "", "calculate": "",
"cancel": "", "cancel": "",
"clear": "",
"close": "", "close": "",
"copylink": "", "copylink": "",
"create": "", "create": "",
@@ -798,6 +799,7 @@
"required": "", "required": "",
"saturday": "", "saturday": "",
"search": "Chercher...", "search": "Chercher...",
"searchresults": "",
"selectdate": "", "selectdate": "",
"sendagain": "", "sendagain": "",
"sendby": "", "sendby": "",