From 41c7be5f1d6175d9291ea83bc4767453311cd834 Mon Sep 17 00:00:00 2001 From: AmitChauhan63390 Date: Wed, 20 Nov 2024 14:16:26 +0530 Subject: [PATCH] search robots and runs --- src/components/molecules/RecordingsTable.tsx | 101 +++++++++---------- src/components/molecules/RunsTable.tsx | 42 ++++++-- 2 files changed, 79 insertions(+), 64 deletions(-) diff --git a/src/components/molecules/RecordingsTable.tsx b/src/components/molecules/RecordingsTable.tsx index c5895193..0039a0f3 100644 --- a/src/components/molecules/RecordingsTable.tsx +++ b/src/components/molecules/RecordingsTable.tsx @@ -11,6 +11,7 @@ import { useEffect } from "react"; import { WorkflowFile } from "maxun-core"; import { IconButton, Button, Box, Typography, TextField } from "@mui/material"; import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power } from "@mui/icons-material"; +import SearchIcon from '@mui/icons-material/Search'; import LinkIcon from '@mui/icons-material/Link'; import { useGlobalInfoStore } from "../../context/globalInfo"; import { deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage"; @@ -19,7 +20,6 @@ import { useNavigate } from 'react-router-dom'; import { stopRecording } from "../../api/recording"; import { GenericModal } from '../atoms/GenericModal'; - /** TODO: * 1. allow editing existing robot after persisting browser steps * 2. show robot settings: id, url, etc. @@ -36,17 +36,6 @@ interface Column { const columns: readonly Column[] = [ { id: 'interpret', label: 'Run', minWidth: 80 }, { id: 'name', label: 'Name', minWidth: 80 }, - // { - // id: 'createdAt', - // label: 'Created at', - // minWidth: 80, - // //format: (value: string) => value.toLocaleString('en-US'), - // }, - // { - // id: 'edit', - // label: 'Edit', - // minWidth: 80, - // }, { id: 'schedule', label: 'Schedule', @@ -57,12 +46,6 @@ const columns: readonly Column[] = [ label: 'Integrate', minWidth: 80, }, - // { - // id: 'updatedAt', - // label: 'Updated at', - // minWidth: 80, - // //format: (value: string) => value.toLocaleString('en-US'), - // }, { id: 'settings', label: 'Settings', @@ -97,6 +80,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl const [rowsPerPage, setRowsPerPage] = React.useState(10); const [rows, setRows] = React.useState([]); const [isModalOpen, setModalOpen] = React.useState(false); + const [searchTerm, setSearchTerm] = React.useState(''); console.log('rows', rows); @@ -112,6 +96,11 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl setPage(0); }; + const handleSearchChange = (event: React.ChangeEvent) => { + setSearchTerm(event.target.value); + setPage(0); + }; + const fetchRecordings = async () => { const recordings = await getStoredRecordings(); if (recordings) { @@ -150,7 +139,6 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl const startRecording = () => { setModalOpen(false); handleStartRecording(); - // notify('info', 'New Recording started for ' + recordingUrl); }; useEffect(() => { @@ -159,34 +147,50 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl } }, []); + // Filter rows based on search term + const filteredRows = rows.filter((row) => + row.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + return ( My Robots - - Create Robot - + + + }} + sx={{ width: '250px' }} + /> + + Create Robot + + @@ -204,7 +208,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl - {rows.length !== 0 ? rows + {filteredRows.length !== 0 ? filteredRows .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((row) => { return ( @@ -226,16 +230,6 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl handleRunRecording(row.id, row.name, row.params || [])} /> ); - // case 'edit': - // return ( - // - // { - // handleEditRecording(row.id, row.name); - // }} sx={{ '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}> - // - // - // - // ); case 'schedule': return ( @@ -285,7 +279,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl { ) } - interface ScheduleButtonProps { handleSchedule: () => void; } diff --git a/src/components/molecules/RunsTable.tsx b/src/components/molecules/RunsTable.tsx index b1cb97ef..a7c67f2a 100644 --- a/src/components/molecules/RunsTable.tsx +++ b/src/components/molecules/RunsTable.tsx @@ -12,8 +12,9 @@ import { useGlobalInfoStore } from "../../context/globalInfo"; import { getStoredRuns } from "../../api/storage"; import { RunSettings } from "./RunSettings"; import { CollapsibleRow } from "./ColapsibleRow"; -import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material'; +import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import SearchIcon from '@mui/icons-material/Search'; interface Column { id: 'runStatus' | 'name' | 'startedAt' | 'finishedAt' | 'delete' | 'settings'; @@ -28,7 +29,6 @@ export const columns: readonly Column[] = [ { id: 'name', label: 'Robot Name', minWidth: 80 }, { id: 'startedAt', label: 'Started at', minWidth: 80 }, { id: 'finishedAt', label: 'Finished at', minWidth: 80 }, - // { id: 'task', label: 'Task', minWidth: 80 }, { id: 'settings', label: 'Settings', minWidth: 80 }, { id: 'delete', label: 'Delete', minWidth: 80 }, ]; @@ -42,7 +42,6 @@ export interface Data { runByUserId?: string; runByScheduleId?: string; runByAPI?: boolean; - // task: string; log: string; runId: string; interpreterSettings: RunSettings; @@ -62,6 +61,7 @@ export const RunsTable = ( const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(10); const [rows, setRows] = useState([]); + const [searchTerm, setSearchTerm] = useState(''); console.log(`rows runs: ${JSON.stringify(rows)}`); @@ -76,6 +76,11 @@ export const RunsTable = ( setPage(0); }; + const handleSearchChange = (event: React.ChangeEvent) => { + setSearchTerm(event.target.value); + setPage(0); + }; + const fetchRuns = async () => { const runs = await getStoredRuns(); if (runs) { @@ -105,8 +110,13 @@ export const RunsTable = ( fetchRuns(); }; - // Group runs by recording name - const groupedRows = rows.reduce((acc, row) => { + // Filter rows based on search term + const filteredRows = rows.filter((row) => + row.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + // Group filtered runs by recording name + const groupedRows = filteredRows.reduce((acc, row) => { if (!acc[row.name]) { acc[row.name] = []; } @@ -116,9 +126,21 @@ export const RunsTable = ( return ( - - All Runs - + + + All Runs + + + }} + sx={{ width: '250px' }} + /> + {Object.entries(groupedRows).map(([name, group]) => ( @@ -162,7 +184,7 @@ export const RunsTable = ( ); -}; +}; \ No newline at end of file