Fixes #7 - Adds a simple quick search to records list. (#3366)

* Fixes #7 - Adds a simple quick search to records list.

Author: alexcottner

css/styles.css

@@ -454,6 +454,10 @@ form button[type="submit"].btn-primary {
   display: none;
 }
 
+.quickFilter {
+  margin-bottom: -0.5em;
+}
+
 /* Spinner http://tobiasahlin.com/spinkit/ */
 .spinner {
   margin: 30px auto 0;

src/components/collection/RecordTable.tsx

@@ -7,7 +7,7 @@ import SignoffContainer from "@src/containers/signoff/SignoffToolBar";
 import { canCreateRecord } from "@src/permission";
 import type { RecordData } from "@src/types";
 import { capitalize } from "@src/utils";
-import React from "react";
+import React, { useState } from "react";
 import { SortUp } from "react-bootstrap-icons";
 import { SortDown } from "react-bootstrap-icons";
 
@@ -129,6 +129,12 @@ export default function RecordTable({
   redirectTo,
   capabilities,
 }: TableProps) {
+  const [filter, setFilter] = useState("");
+
+  const onFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilter(e.target.value);
+  };
+
   const getFieldTitle = displayField => {
     if (displayField === "__json") {
       return "Data";
@@ -154,6 +160,12 @@ export default function RecordTable({
     );
   }
 
+  if (filter && records.length) {
+    records = records.filter(x =>
+      JSON.stringify(x).match(new RegExp(filter, "i"))
+    );
+  }
+
   const thead = (
     <thead>
       <tr>
@@ -201,13 +213,23 @@ export default function RecordTable({
   );
 
   return (
-    <PaginatedTable
-      thead={thead}
-      tbody={tbody}
-      dataLoaded={recordsLoaded}
-      colSpan={displayFields.length + 2}
-      hasNextPage={hasNextRecords}
-      listNextPage={listNextRecords}
-    />
+    <>
+      <input
+        type="text"
+        className="form-control quickFilter"
+        placeholder="Quicksearch"
+        onChange={onFilterChange}
+        value={filter}
+        data-testid="quickFilter"
+      />
+      <PaginatedTable
+        thead={thead}
+        tbody={tbody}
+        dataLoaded={recordsLoaded}
+        colSpan={displayFields.length + 2}
+        hasNextPage={hasNextRecords}
+        listNextPage={listNextRecords}
+      />
+    </>
   );
 }

test/components/CollectionRecords_test.tsx

@@ -1,6 +1,6 @@
 import CollectionRecords from "@src/components/collection/CollectionRecords";
 import { renderWithProvider } from "@test/testUtils";
-import { screen } from "@testing-library/react";
+import { fireEvent, screen } from "@testing-library/react";
 import React from "react";
 
 describe("CollectionRecords component", () => {
@@ -129,6 +129,27 @@ describe("CollectionRecords component", () => {
       expect(screen.getByTestId("id1-foo").textContent).toBe("bar");
       expect(screen.getByTestId("id2-foo").textContent).toBe("baz");
     });
+
+    it("should apply live filtering", () => {
+      let quickFilter = screen.getByTestId("quickFilter");
+      fireEvent.change(quickFilter, {
+        target: { value: "bar" },
+      });
+      expect(screen.getByTestId("id1-row")).toBeDefined();
+      expect(screen.queryByTestId("id2-row")).toBeNull();
+
+      fireEvent.change(quickFilter, {
+        target: { value: "baz" },
+      });
+      expect(screen.getByTestId("id2-row")).toBeDefined();
+      expect(screen.queryByTestId("id1-row")).toBeNull();
+
+      fireEvent.change(quickFilter, {
+        target: { value: "" },
+      });
+      expect(screen.getByTestId("id1-row")).toBeDefined();
+      expect(screen.queryByTestId("id2-row")).toBeDefined();
+    });
   });
 
   describe("No schema defined", () => {