frontend: add search for devices

ffreddow · ffreddow · commit 4cd9b01ea323 · 2025-10-09T10:32:31.000+02:00
diff --git a/frontend/src/components/device/SearchInput.tsx b/frontend/src/components/device/SearchInput.tsx
@@ -0,0 +1,41 @@
+import { useTranslation } from "react-i18next";
+import { Form, InputGroup } from "react-bootstrap";
+import { Search, X } from "react-feather";
+
+interface SearchInputProps {
+    searchTerm: string;
+    onSearchChange: (searchTerm: string) => void;
+    placeholder?: string;
+}
+
+export function SearchInput({ searchTerm, onSearchChange, placeholder }: SearchInputProps) {
+    const { t } = useTranslation("", { useSuspense: false, keyPrefix: "chargers" });
+
+    const handleClear = () => {
+        onSearchChange("");
+    };
+
+    return (
+        <InputGroup className="mb-3">
+            <InputGroup.Text>
+                <Search size={16} />
+            </InputGroup.Text>
+            <Form.Control
+                type="text"
+                placeholder={placeholder || t("search_devices_placeholder")}
+                value={searchTerm}
+                onChange={(e) => onSearchChange((e.target as HTMLInputElement).value)}
+                aria-label={t("search_devices")}
+            />
+            {searchTerm && (
+                <InputGroup.Text 
+                    onClick={handleClear}
+                    style={{ cursor: "pointer" }}
+                    title={t("clear_search")}
+                >
+                    <X size={16} />
+                </InputGroup.Text>
+            )}
+        </InputGroup>
+    );
+}
diff --git a/frontend/src/components/device/__tests__/SearchInput.test.tsx b/frontend/src/components/device/__tests__/SearchInput.test.tsx
@@ -0,0 +1,107 @@
+import { render, screen, fireEvent } from '@testing-library/preact';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { SearchInput } from '../SearchInput';
+
+describe('SearchInput', () => {
+  const defaultProps = {
+    searchTerm: '',
+    onSearchChange: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders search input with default placeholder', () => {
+    render(<SearchInput {...defaultProps} />);
+
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('')).toBeInTheDocument();
+  });
+
+  it('renders search input with custom placeholder', () => {
+    const customPlaceholder = 'Custom search placeholder';
+    render(<SearchInput {...defaultProps} placeholder={customPlaceholder} />);
+
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAttribute('placeholder', customPlaceholder);
+  });
+
+  it('displays current search term', () => {
+    render(<SearchInput {...defaultProps} searchTerm="test search" />);
+
+    expect(screen.getByDisplayValue('test search')).toBeInTheDocument();
+  });
+
+  it('calls onSearchChange when typing', () => {
+    const onSearchChange = vi.fn();
+    render(<SearchInput {...defaultProps} onSearchChange={onSearchChange} />);
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    // Simulate typing by setting the value and triggering the change event
+    input.value = 'new search term';
+    fireEvent.change(input);
+
+    expect(onSearchChange).toHaveBeenCalledWith('new search term');
+  });
+
+  it('shows clear button when search term is not empty', () => {
+    render(<SearchInput {...defaultProps} searchTerm="search text" />);
+
+    // The X icon should be visible
+    expect(screen.getByTestId('x-icon')).toBeInTheDocument();
+  });
+
+  it('does not show clear button when search term is empty', () => {
+    render(<SearchInput {...defaultProps} searchTerm="" />);
+
+    // Should not find X icon (clear button)
+    expect(screen.queryByTestId('x-icon')).not.toBeInTheDocument();
+  });
+
+  it('calls onSearchChange with empty string when clear button is clicked', () => {
+    const onSearchChange = vi.fn();
+    render(<SearchInput {...defaultProps} searchTerm="some text" onSearchChange={onSearchChange} />);
+
+    // Find the clear button (X icon)
+    const clearButton = screen.getByTestId('x-icon');
+    expect(clearButton).toBeInTheDocument();
+
+    const clearButtonContainer = clearButton.parentElement;
+    if (!clearButtonContainer) {
+      throw new Error('Expected clear button parent element to exist');
+    }
+
+    fireEvent.click(clearButtonContainer);
+    expect(onSearchChange).toHaveBeenCalledWith('');
+  });
+
+  it('has proper accessibility attributes', () => {
+    render(<SearchInput {...defaultProps} />);
+
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAttribute('aria-label');
+  });
+
+  it('handles multiple input changes correctly', () => {
+    const onSearchChange = vi.fn();
+    render(<SearchInput {...defaultProps} onSearchChange={onSearchChange} />);
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    input.value = 'first';
+    fireEvent.change(input);
+
+    input.value = 'second';
+    fireEvent.change(input);
+
+    input.value = 'third';
+    fireEvent.change(input);
+
+    expect(onSearchChange).toHaveBeenCalledTimes(3);
+    expect(onSearchChange).toHaveBeenNthCalledWith(1, 'first');
+    expect(onSearchChange).toHaveBeenNthCalledWith(2, 'second');
+    expect(onSearchChange).toHaveBeenNthCalledWith(3, 'third');
+  });
+});
diff --git a/frontend/src/components/device/types.ts b/frontend/src/components/device/types.ts
@@ -31,5 +31,7 @@ export interface DeviceListState {
     editNote: string,
     editChargerIdx: number,
     sortColumn: SortColumn,
-    sortSequence: "asc" | "desc"
+    sortSequence: "asc" | "desc",
+    searchTerm: string,
+    filteredDevices: StateDevice[]
 }
diff --git a/frontend/src/locales/de.ts b/frontend/src/locales/de.ts
@@ -94,7 +94,11 @@ export const de ={
         "loading_webinterface": "Webinterface wird geladen",
         "invalid_key": "Die auf dem Gerät gespeicherten Schlüssel scheinen fehlerhaft zu sein. Sollte der Fehler weiterhin bestehen, entferne das Gerät und füge es erneut hinzu.",
         "connection_timeout": "Timeout",
-        "connection_timeout_text": "Ein Timeout ist während des Aufbaus der Verbindung aufgetreten. Bitte versuche es später erneut oder kontaktiere uns falls das Problem bestehen bleibt."
+        "connection_timeout_text": "Ein Timeout ist während des Aufbaus der Verbindung aufgetreten. Bitte versuche es später erneut oder kontaktiere uns falls das Problem bestehen bleibt.",
+        "search_devices": "Geräte suchen",
+        "search_devices_placeholder": "Suche nach Name, ID, Notiz oder Status...",
+        "clear_search": "Suche löschen",
+        "no_devices_found": "Keine Geräte gefunden, die deiner Suche entsprechen."
     },
     "navbar": {
         "home": "Home",
diff --git a/frontend/src/locales/en.ts b/frontend/src/locales/en.ts
@@ -94,7 +94,11 @@ export const en = {
         "loading_webinterface": "Loading webinterface",
         "invalid_key": "The keys saved on the device seem to be corrupted. If the error persists, remove the device and add it again.",
         "connection_timeout": "Timeout",
-        "connection_timeout_text": "A timeout occured while establishing the connection. Please try again later or contact us in case the problem persists."
+        "connection_timeout_text": "A timeout occured while establishing the connection. Please try again later or contact us in case the problem persists.",
+        "search_devices": "Search devices",
+        "search_devices_placeholder": "Search by name, ID, note, or status...",
+        "clear_search": "Clear search",
+        "no_devices_found": "No devices found matching your search."
     },
     "navbar": {
         "home": "Home",
diff --git a/frontend/src/pages/Devices.tsx b/frontend/src/pages/Devices.tsx
@@ -13,6 +13,7 @@ import { DeviceTable } from "../components/device/DeviceTable";
 import { DeviceMobileView } from "../components/device/DeviceMobileView";
 import { DeleteDeviceModal } from "../components/device/DeleteDeviceModal";
 import { EditNoteModal } from "../components/device/EditNoteModal";
+import { SearchInput } from "../components/device/SearchInput";
 
 export class DeviceList extends Component<{}, DeviceListState> {
     removalDevice: StateDevice;
@@ -40,6 +41,8 @@ export class DeviceList extends Component<{}, DeviceListState> {
             editChargerIdx: 0,
             sortColumn: "none",
             sortSequence: "asc",
+            searchTerm: "",
+            filteredDevices: [],
         };
 
         this.updateChargers();
@@ -223,6 +226,24 @@ export class DeviceList extends Component<{}, DeviceListState> {
         });
     }
 
+    filterDevices(devices: StateDevice[], searchTerm: string): StateDevice[] {
+        if (!searchTerm.trim()) {
+            return devices;
+        }
+
+        const lowerSearchTerm = searchTerm.toLowerCase().trim();
+        return devices.filter(device => {
+            return (
+                device.name.toLowerCase().includes(lowerSearchTerm) ||
+                device.id.toLowerCase().includes(lowerSearchTerm) ||
+                device.uid.toString().includes(lowerSearchTerm) ||
+                device.status.toLowerCase().includes(lowerSearchTerm) ||
+                device.note.toLowerCase().includes(lowerSearchTerm) ||
+                device.firmware_version.toLowerCase().includes(lowerSearchTerm)
+            );
+        });
+    }
+
     setSortedDevices(devices: StateDevice[]) {
         devices.sort((a, b) => {
             let sortColumn = this.state.sortColumn;
@@ -256,7 +277,9 @@ export class DeviceList extends Component<{}, DeviceListState> {
                 return ret * -1;
 
         });
-        this.setState({ devices });
+        
+        const filteredDevices = this.filterDevices(devices, this.state.searchTerm);
+        this.setState({ devices, filteredDevices });
     }
 
     handleDelete = (device: StateDevice) => {
@@ -311,17 +334,22 @@ export class DeviceList extends Component<{}, DeviceListState> {
         });
     }
 
+    handleSearchChange = (searchTerm: string) => {
+        const filteredDevices = this.filterDevices(this.state.devices, searchTerm);
+        this.setState({ searchTerm, filteredDevices });
+    }
+
     render() {
         const { t } = useTranslation("", { useSuspense: false, keyPrefix: "chargers" });
         const { route } = useLocation();
-        const devices = this.state.devices;
+        const devices = this.state.filteredDevices.length > 0 || this.state.searchTerm ? this.state.filteredDevices : this.state.devices;
 
         const handleConnect = async (device: StateDevice) => {
             await this.connect_to_charger(device, route);
         };
 
-        // Show empty state message if no devices
-        if (devices.length === 0) {
+        // Show empty state message if no devices at all
+        if (this.state.devices.length === 0) {
             return (
                 <Container fluid className="text-center mt-5">
                     <div className="text-muted">
@@ -348,33 +376,50 @@ export class DeviceList extends Component<{}, DeviceListState> {
                     onCancel={this.handleEditNoteCancel}
                 />
 
-                <DeviceTable
-                    devices={devices}
-                    sortColumn={this.state.sortColumn}
-                    sortSequence={this.state.sortSequence}
-                    onSort={(column) => this.setSort(column)}
-                    onConnect={handleConnect}
-                    onDelete={this.handleDelete}
-                    onEditNote={this.handleEditNote}
-                    connectionPossible={(device) => this.connection_possible(device)}
-                    formatLastStateChange={(t, timestamp) => this.formatLastStateChange(t, timestamp)}
-                />
+                <Container fluid className="mb-3">
+                    <SearchInput
+                        searchTerm={this.state.searchTerm}
+                        onSearchChange={this.handleSearchChange}
+                    />
+                </Container>
 
-                <DeviceMobileView
-                    devices={devices}
-                    sortColumn={this.state.sortColumn}
-                    sortSequence={this.state.sortSequence}
-                    onMobileSort={(column) => this.setMobileSort(column)}
-                    onSortSequenceChange={(sequence) => this.setState({ sortSequence: sequence }, () => {
-                        // Re-sort the devices after state update
-                        this.setSortedDevices([...this.state.devices]);
-                    })}
-                    onConnect={handleConnect}
-                    onDelete={this.handleDelete}
-                    onEditNote={this.handleEditNote}
-                    connectionPossible={(device) => this.connection_possible(device)}
-                    formatLastStateChange={(t, timestamp) => this.formatLastStateChange(t, timestamp)}
-                />
+                {devices.length === 0 && this.state.searchTerm ? (
+                    <Container fluid className="text-center mt-5">
+                        <div className="text-muted">
+                            <h5>{t("no_devices_found")}</h5>
+                        </div>
+                    </Container>
+                ) : (
+                    <>
+                        <DeviceTable
+                            devices={devices}
+                            sortColumn={this.state.sortColumn}
+                            sortSequence={this.state.sortSequence}
+                            onSort={(column) => this.setSort(column)}
+                            onConnect={handleConnect}
+                            onDelete={this.handleDelete}
+                            onEditNote={this.handleEditNote}
+                            connectionPossible={(device) => this.connection_possible(device)}
+                            formatLastStateChange={(t, timestamp) => this.formatLastStateChange(t, timestamp)}
+                        />
+
+                        <DeviceMobileView
+                            devices={devices}
+                            sortColumn={this.state.sortColumn}
+                            sortSequence={this.state.sortSequence}
+                            onMobileSort={(column) => this.setMobileSort(column)}
+                            onSortSequenceChange={(sequence) => this.setState({ sortSequence: sequence }, () => {
+                                // Re-sort the devices after state update
+                                this.setSortedDevices([...this.state.devices]);
+                            })}
+                            onConnect={handleConnect}
+                            onDelete={this.handleDelete}
+                            onEditNote={this.handleEditNote}
+                            connectionPossible={(device) => this.connection_possible(device)}
+                            formatLastStateChange={(t, timestamp) => this.formatLastStateChange(t, timestamp)}
+                        />
+                    </>
+                )}
             </>
         );
     }
diff --git a/frontend/src/pages/__tests__/Devices.test.tsx b/frontend/src/pages/__tests__/Devices.test.tsx
diff --git a/frontend/src/test-setup.ts b/frontend/src/test-setup.ts

Original file line number	Diff line number	Diff line change
`@@ -31,5 +31,7 @@ export interface DeviceListState {`
`31`	`31`	`editNote: string,`
`32`	`32`	`editChargerIdx: number,`
`33`	`33`	`sortColumn: SortColumn,`
`34`		`- sortSequence: "asc" \| "desc"`
	`34`	`+ sortSequence: "asc" \| "desc",`
	`35`	`+ searchTerm: string,`
	`36`	`+ filteredDevices: StateDevice[]`
`35`	`37`	`}`