From 440c0746061c57345f8f015e185389d35531d0bc Mon Sep 17 00:00:00 2001
From: catloversg <152669316+catloversg@users.noreply.github.com>
Date: Thu, 15 Aug 2024 12:18:27 +0700
Subject: [PATCH] UI: Allow filtering graftable augmentations (#1570)

---
 .../Grafting/ui/GraftingRoot.tsx              | 58 ++++++++++++-------
 1 file changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/PersonObjects/Grafting/ui/GraftingRoot.tsx b/src/PersonObjects/Grafting/ui/GraftingRoot.tsx
index 6e45362bf..80050acb6 100644
--- a/src/PersonObjects/Grafting/ui/GraftingRoot.tsx
+++ b/src/PersonObjects/Grafting/ui/GraftingRoot.tsx
@@ -4,8 +4,8 @@ import { Player } from "@player";
 import { AugmentationName } from "@enums";
 
 import React, { useState } from "react";
-import { CheckBox, CheckBoxOutlineBlank, Construction } from "@mui/icons-material";
-import { Box, Button, Container, List, ListItemButton, Paper, Typography } from "@mui/material";
+import { CheckBox, CheckBoxOutlineBlank, Construction, Search } from "@mui/icons-material";
+import { Box, Button, Container, List, ListItemButton, Paper, TextField, Typography } from "@mui/material";
 
 import { GraftingWork } from "../../../Work/GraftingWork";
 import { Augmentations } from "../../../Augmentation/Augmentations";
@@ -66,17 +66,25 @@ export const GraftingRoot = (): React.ReactElement => {
 
   const [selectedAug, setSelectedAug] = useState(getGraftingAvailableAugs()[0]);
   const [graftOpen, setGraftOpen] = useState(false);
+  const [filterText, setFilterText] = useState("");
   const selectedAugmentation = Augmentations[selectedAug];
   const rerender = useCycleRerender();
 
+  const matches = (s1: string, s2: string) => s1.toLowerCase().includes(s2.toLowerCase());
   const getAugsSorted = (): AugmentationName[] => {
     const augs = getGraftingAvailableAugs();
-    switch (Settings.PurchaseAugmentationsOrder) {
-      case PurchaseAugmentationsOrderSetting.Cost:
-        return augs.sort((a, b) => graftableAugmentations[a].cost - graftableAugmentations[b].cost);
-      default:
-        return augs;
+    if (Settings.PurchaseAugmentationsOrder === PurchaseAugmentationsOrderSetting.Cost) {
+      augs.sort((a, b) => graftableAugmentations[a].cost - graftableAugmentations[b].cost);
     }
+    if (filterText !== "") {
+      return augs.filter(
+        (aug: AugmentationName) =>
+          matches(Augmentations[aug].name, filterText) ||
+          matches(Augmentations[aug].info, filterText) ||
+          matches(Augmentations[aug].stats, filterText),
+      );
+    }
+    return augs;
   };
 
   const switchSortOrder = (newOrder: PurchaseAugmentationsOrderSetting): void => {
@@ -114,19 +122,29 @@ export const GraftingRoot = (): React.ReactElement => {
         </Paper>
         {getGraftingAvailableAugs().length > 0 ? (
           <Paper sx={{ mb: 1, width: "fit-content", display: "grid", gridTemplateColumns: "1fr 3fr" }}>
-            <List sx={{ height: 400, overflowY: "scroll", borderRight: `1px solid ${Settings.theme.welllight}` }}>
-              {getAugsSorted().map((k, i) => (
-                <ListItemButton key={i + 1} onClick={() => setSelectedAug(k)} selected={selectedAug === k}>
-                  <Typography
-                    sx={{
-                      color: canGraft(graftableAugmentations[k]) ? Settings.theme.primary : Settings.theme.disabled,
-                    }}
-                  >
-                    {k}
-                  </Typography>
-                </ListItemButton>
-              ))}
-            </List>
+            <Box>
+              <TextField
+                style={{ width: "100%" }}
+                value={filterText}
+                onChange={(e) => {
+                  setFilterText(e.target.value);
+                }}
+                InputProps={{ startAdornment: <Search /> }}
+              />
+              <List sx={{ height: 400, overflowY: "scroll", borderRight: `1px solid ${Settings.theme.welllight}` }}>
+                {getAugsSorted().map((k, i) => (
+                  <ListItemButton key={i + 1} onClick={() => setSelectedAug(k)} selected={selectedAug === k}>
+                    <Typography
+                      sx={{
+                        color: canGraft(graftableAugmentations[k]) ? Settings.theme.primary : Settings.theme.disabled,
+                      }}
+                    >
+                      {k}
+                    </Typography>
+                  </ListItemButton>
+                ))}
+              </List>
+            </Box>
             <Box sx={{ m: 1 }}>
               <Typography variant="h6" sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
                 <Construction sx={{ mr: 1 }} /> {selectedAug}