Merge pull request #171 from amosproj/feat/#33search-container-by-name

Feat/#33search container by name
amosproj · Jun 20, 2023 · 166f087 · 166f087
2 parents 312ae94 + b37bc53
commit 166f087
Showing 1 changed file with 41 additions and 1 deletion.
diff --git a/Explorer/src/components/containerTable.tsx b/Explorer/src/components/containerTable.tsx
@@ -13,6 +13,29 @@ export default function ContainerTable({
 }): JSX.Element {
   const [sortedList, setSortedList] = useState([...list]);
 
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredContainers, setFilteredContainers] =
+    useState<ContainerList>(list);
+
+  const handleSearch = () => {
+    const filtered = list.filter(
+      (container) =>
+        container.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        container.image.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    setFilteredContainers(filtered);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+
   const handleSortAsc = () => {
     const sorted = [...sortedList];
     sorted.sort((a, b) => a.status.localeCompare(b.status));
@@ -26,6 +49,23 @@ export default function ContainerTable({
   };
   return (
     <div>
+      <div className="mb-4 text-right">
+        <input
+          type="text"
+          placeholder="Search..."
+          value={searchTerm}
+          onChange={handleInputChange}
+          onKeyPress={handleKeyPress}
+          className="border border-gray-300 px-4 py-2 rounded-md"
+        />
+        <button
+          type="button"
+          onClick={handleSearch}
+          className="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md"
+        >
+          Search
+        </button>
+      </div>
       <Table>
         <Table.Head>
           <Table.HeadCell
@@ -58,7 +98,7 @@ export default function ContainerTable({
           </Table.HeadCell>
         </Table.Head>
         <Table.Body>
-          {sortedList.map((container: ContainerData, index: number) => (
+          {filteredContainers.map((container: ContainerData, index: number) => (
             <Table.Row key={index}>
               <Table.Cell className="whitespace-normal font-medium text-gray-900 dark:text-white !py-2">
                 <Link