From 846745ea051d8213a390cd96a183591ea35ceb3b Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Fri, 9 Apr 2021 08:00:31 -0700
Subject: [PATCH] IO-847 Show search terms on paginated components

---
 bodyshop_translations.babel                   | 42 +++++++++++++++++++
 .../contracts-list.component.jsx              | 20 +++++++--
 .../jobs-list-paginated.component.jsx         | 19 ++++++++-
 .../owners-list/owners-list.component.jsx     | 19 ++++++++-
 .../payment-list-paginated.component.jsx      | 19 ++++++++-
 .../vehicles-list/vehicles-list.component.jsx | 21 ++++++++--
 .../src/pages/bills/bills.page.component.jsx  | 34 ++++++++++-----
 client/src/translations/en_us/common.json     |  2 +
 client/src/translations/es/common.json        |  2 +
 client/src/translations/fr/common.json        |  2 +
 10 files changed, 158 insertions(+), 22 deletions(-)

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index c4638611c..9b099f05a 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -11436,6 +11436,27 @@
                                             </translation>
                                         </translations>
                                     </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>
                                         <name>close</name>
                                         <definition_loaded>false</definition_loaded>
@@ -12559,6 +12580,27 @@
                                             </translation>
                                         </translations>
                                     </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>
                                         <name>selectdate</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/contracts-list/contracts-list.component.jsx b/client/src/components/contracts-list/contracts-list.component.jsx
index 1b8227ff2..4cbe5d7b6 100644
--- a/client/src/components/contracts-list/contracts-list.component.jsx
+++ b/client/src/components/contracts-list/contracts-list.component.jsx
@@ -1,5 +1,5 @@
 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 React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -131,9 +131,23 @@ export default function ContractsList({ loading, contracts, refetch, total }) {
           </Button>
 
           <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
-            placeholder={t("general.labels.search")}
+            placeholder={search.searh || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
               history.push({ search: queryString.stringify(search) });
diff --git a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
index a47a599b8..519b815c7 100644
--- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
@@ -1,5 +1,5 @@
 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 React from "react";
 import { useTranslation } from "react-i18next";
@@ -193,11 +193,26 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
     <Card
       extra={
         <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()}>
             <SyncOutlined />
           </Button>
           <Input.Search
-            placeholder={t("general.labels.search")}
+            placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
               history.push({ search: queryString.stringify(search) });
diff --git a/client/src/components/owners-list/owners-list.component.jsx b/client/src/components/owners-list/owners-list.component.jsx
index d72ce148d..0047b0451 100644
--- a/client/src/components/owners-list/owners-list.component.jsx
+++ b/client/src/components/owners-list/owners-list.component.jsx
@@ -1,5 +1,5 @@
 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 React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -78,11 +78,26 @@ export default function OwnersListComponent({
       title={t("menus.header.owners")}
       extra={
         <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()}>
             <SyncOutlined />
           </Button>
           <Input.Search
-            placeholder={t("general.labels.search")}
+            placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
               history.push({ search: queryString.stringify(search) });
diff --git a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
index 78081e7f4..e058e6c42 100644
--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
@@ -1,5 +1,5 @@
 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 React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -178,11 +178,26 @@ export function PaymentsListPaginated({
     <Card
       extra={
         <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()}>
             <SyncOutlined />
           </Button>
           <Input.Search
-            placeholder={t("general.labels.search")}
+            placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
               history.push({ search: queryString.stringify(search) });
diff --git a/client/src/components/vehicles-list/vehicles-list.component.jsx b/client/src/components/vehicles-list/vehicles-list.component.jsx
index 9352658ae..294dfb7ea 100644
--- a/client/src/components/vehicles-list/vehicles-list.component.jsx
+++ b/client/src/components/vehicles-list/vehicles-list.component.jsx
@@ -1,5 +1,5 @@
 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 React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,7 +13,7 @@ export default function VehiclesListComponent({
   const search = queryString.parse(useLocation().search);
   const {
     page,
-    //sortcolumn, sortorder
+    //sortcolumn, sortorder,
   } = search;
   const history = useHistory();
 
@@ -66,11 +66,26 @@ export default function VehiclesListComponent({
       title={t("menus.header.vehicles")}
       extra={
         <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()}>
             <SyncOutlined />
           </Button>
           <Input.Search
-            placeholder={t("general.labels.search")}
+            placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
               history.push({ search: queryString.stringify(search) });
diff --git a/client/src/pages/bills/bills.page.component.jsx b/client/src/pages/bills/bills.page.component.jsx
index 80d9e2670..3577a0108 100644
--- a/client/src/pages/bills/bills.page.component.jsx
+++ b/client/src/pages/bills/bills.page.component.jsx
@@ -1,5 +1,5 @@
 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 React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -205,6 +205,21 @@ export function BillsListPage({
       title={t("bills.labels.bills")}
       extra={
         <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()}>
             <SyncOutlined />
           </Button>
@@ -218,15 +233,14 @@ export function BillsListPage({
           >
             {t("jobs.actions.postbills")}
           </Button>
-          <div className="imex-table-header__search">
-            <Input.Search
-              placeholder={t("general.labels.search")}
-              onSearch={(value) => {
-                search.search = value;
-                history.push({ search: queryString.stringify(search) });
-              }}
-            />
-          </div>
+
+          <Input.Search
+            placeholder={search.search || t("general.labels.search")}
+            onSearch={(value) => {
+              search.search = value;
+              history.push({ search: queryString.stringify(search) });
+            }}
+          />
         </Space>
       }
     >
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index e2862234d..766e5773f 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -741,6 +741,7 @@
 				"add": "Add",
 				"calculate": "Calculate",
 				"cancel": "Cancel",
+				"clear": "Clear",
 				"close": "Close",
 				"copylink": "Copy Link",
 				"create": "Create",
@@ -798,6 +799,7 @@
 				"required": "Required",
 				"saturday": "Saturday",
 				"search": "Search...",
+				"searchresults": "Results for {{search}}",
 				"selectdate": "Select date...",
 				"sendagain": "Send Again",
 				"sendby": "Send By",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 8135c4c8f..15bd8e667 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -741,6 +741,7 @@
 				"add": "",
 				"calculate": "",
 				"cancel": "",
+				"clear": "",
 				"close": "",
 				"copylink": "",
 				"create": "",
@@ -798,6 +799,7 @@
 				"required": "",
 				"saturday": "",
 				"search": "Buscar...",
+				"searchresults": "",
 				"selectdate": "",
 				"sendagain": "",
 				"sendby": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 2b4d515bf..1a73b55b2 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -741,6 +741,7 @@
 				"add": "",
 				"calculate": "",
 				"cancel": "",
+				"clear": "",
 				"close": "",
 				"copylink": "",
 				"create": "",
@@ -798,6 +799,7 @@
 				"required": "",
 				"saturday": "",
 				"search": "Chercher...",
+				"searchresults": "",
 				"selectdate": "",
 				"sendagain": "",
 				"sendby": "",