Add filtering functionality to config editor

Luligu · Jan 9, 2025 · ffa18dd · ffa18dd
1 parent 5ac8670
commit ffa18dd
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 11 deletions.
diff --git a/frontend/build/asset-manifest.json b/frontend/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "./static/css/main.18f673b9.css",
-    "main.js": "./static/js/main.5ba27b97.js",
+    "main.js": "./static/js/main.688f9551.js",
     "static/js/453.abd36b29.chunk.js": "./static/js/453.abd36b29.chunk.js",
     "static/media/roboto-latin-700-normal.woff2": "./static/media/roboto-latin-700-normal.4535474e1cf8598695ad.woff2",
     "static/media/roboto-latin-500-normal.woff2": "./static/media/roboto-latin-500-normal.7077203b1982951ecf76.woff2",
@@ -61,11 +61,11 @@
     "static/media/roboto-greek-ext-400-normal.woff": "./static/media/roboto-greek-ext-400-normal.16eb83b4a3b1ea994243.woff",
     "index.html": "./index.html",
     "main.18f673b9.css.map": "./static/css/main.18f673b9.css.map",
-    "main.5ba27b97.js.map": "./static/js/main.5ba27b97.js.map",
+    "main.688f9551.js.map": "./static/js/main.688f9551.js.map",
     "453.abd36b29.chunk.js.map": "./static/js/453.abd36b29.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.18f673b9.css",
-    "static/js/main.5ba27b97.js"
+    "static/js/main.688f9551.js"
   ]
 }
diff --git a/frontend/build/index.html b/frontend/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.5ba27b97.js"></script><link href="./static/css/main.18f673b9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.688f9551.js"></script><link href="./static/css/main.18f673b9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/frontend/build/static/js/main.5ba27b97.js → frontend/build/static/js/main.688f9551.js b/frontend/build/static/js/main.5ba27b97.js → frontend/build/static/js/main.688f9551.js
diff --git a/...ld/static/js/main.5ba27b97.js.LICENSE.txt → ...ld/static/js/main.688f9551.js.LICENSE.txt b/...ld/static/js/main.5ba27b97.js.LICENSE.txt → ...ld/static/js/main.688f9551.js.LICENSE.txt
diff --git a/...tend/build/static/js/main.5ba27b97.js.map → ...tend/build/static/js/main.688f9551.js.map b/...tend/build/static/js/main.5ba27b97.js.map → ...tend/build/static/js/main.688f9551.js.map
diff --git a/frontend/src/components/configEditor.js b/frontend/src/components/configEditor.js
@@ -19,6 +19,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ThemeProvider from '@mui/material/styles/ThemeProvider';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Tooltip from '@mui/material/Tooltip';
+import TextField from '@mui/material/TextField';
 
 // @mui/icons-material
 import DeleteForever from '@mui/icons-material/DeleteForever';
@@ -105,7 +106,7 @@ export function createConfigTheme(primaryColor) {
           },
           input: {
             color: 'var(--div-text-color)',
-            padding: '8px', 
+            padding: '4px 8px', 
           },
         },
       },
@@ -216,11 +217,16 @@ export function ArrayFieldTemplate(props) {
   // console.log('ArrayFieldTemplate: title', title, 'description', schema.description, 'items', props.items);
 
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [filter, setFilter] = useState('');
   const [dialogEntityOpen, setDialogEntityOpen] = useState(false);
 
   const primaryColor = useMemo(() => getCssVariable('--primary-color', '#009a00'), []);
   const theme = useMemo(() => createConfigTheme(primaryColor), []);
 
+  const handleFilterChange = (event) => {
+    setFilter(event.target.value);
+  };
+
   const handleDialogToggle = () => {
     setDialogOpen(!dialogOpen);
   };
@@ -317,8 +323,18 @@ export function ArrayFieldTemplate(props) {
           }}>
           <DialogTitle>Select a device</DialogTitle>
           <DialogContent>
+            <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+              <Typography variant="subtitle1" sx={{ whiteSpace: 'nowrap' }}>Filter by:</Typography>
+              <TextField
+                fullWidth
+                variant="outlined"
+                value={filter}
+                onChange={handleFilterChange}
+                placeholder="Enter serial or name"
+              />
+            </Box>
             <List dense>
-              {selectDevices.map((value, index) => (
+              {selectDevices.filter((v) => v.serial.includes(filter) || v.name.includes(filter)).map((value, index) => (
                 <ListItemButton onClick={() => handleSelectValue(value)} key={index}>
                   {value.icon==='wifi' && <ListItemIcon><WifiIcon /></ListItemIcon>}
                   {value.icon==='ble' && <ListItemIcon><BluetoothIcon /></ListItemIcon>}
@@ -342,8 +358,18 @@ export function ArrayFieldTemplate(props) {
           }}>
           <DialogTitle>Select an entity</DialogTitle>
           <DialogContent>
+            <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+              <Typography variant="subtitle1" sx={{ whiteSpace: 'nowrap' }}>Filter by:</Typography>
+              <TextField
+                fullWidth
+                variant="outlined"
+                value={filter}
+                onChange={handleFilterChange}
+                placeholder="Enter name or description"
+              />
+            </Box>
             <List dense>
-              {selectEntities.map((value, index) => (
+              {selectEntities.filter((v) => v.name.includes(filter) || v.description.includes(filter)).map((value, index) => (
                 <ListItemButton onClick={() => handleSelectEntityValue(value)} key={index}>
                   {value.icon==='wifi' && <ListItemIcon><WifiIcon /></ListItemIcon>}
                   {value.icon==='ble' && <ListItemIcon><BluetoothIcon /></ListItemIcon>}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.5ba27b97.js"></script><link href="./static/css/main.18f673b9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><base href="./"><link rel="icon" href="./matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="./manifest.json"/><script defer="defer" src="./static/js/main.688f9551.js"></script><link href="./static/css/main.18f673b9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>