lee/Scraperr
1
0
Fork 0
mirror of https://github.com/jaypyles/Scraperr.git synced 2025-12-17 05:05:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add search to job table

Browse Source
This commit is contained in:
Jayden Pyles
2024-07-07 20:54:28 -05:00
parent 82154232a2
commit b2dda324fe
1 changed files with 77 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/JobTable.tsx
View File

@@ -14,6 +14,12 @@ import {
Checkbox, Checkbox,
Tooltip, Tooltip,
Button, Button,
TextField,
FormControl,
InputLabel,
Select,
MenuItem,
SelectChangeEvent,
} from "@mui/material"; } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";
import SelectAllIcon from "@mui/icons-material/SelectAll"; import SelectAllIcon from "@mui/icons-material/SelectAll";
@@ -37,6 +43,9 @@ interface JobTableProps {
const JobTable: React.FC<JobTableProps> = ({ jobs, fetchJobs }) => { const JobTable: React.FC<JobTableProps> = ({ jobs, fetchJobs }) => {
const [selectedJobs, setSelectedJobs] = useState<Set<string>>(new Set()); const [selectedJobs, setSelectedJobs] = useState<Set<string>>(new Set());
const [allSelected, setAllSelected] = useState(false); const [allSelected, setAllSelected] = useState(false);
const [searchQuery, setSearchQuery] = useState<string>("");
const [searchMode, setSearchMode] = useState<string>("url");
const router = useRouter(); const router = useRouter();
const handleDownload = async (ids: string[]) => { const handleDownload = async (ids: string[]) => {
@@ -106,6 +115,15 @@ const JobTable: React.FC<JobTableProps> = ({ jobs, fetchJobs }) => {
} }
}; };
const filteredJobs = jobs.filter((job) => {
if (searchMode === "url") {
return job.url.toLowerCase().includes(searchQuery.toLowerCase());
} else if (searchMode === "id") {
return job.id.toLowerCase().includes(searchQuery.toLowerCase());
}
return true;
});
return ( return (
<Box <Box
width="100%" width="100%"
@@ -122,41 +140,67 @@ const JobTable: React.FC<JobTableProps> = ({ jobs, fetchJobs }) => {
overflow="auto" overflow="auto"
> >
<Box <Box
className="flex flex-row w-3/4 items-center p-2" className="flex flex-row w-3/4 justify-between p-2"
bgcolor="background.paper" bgcolor="background.paper"
> >
<Typography className="mr-2" variant="body1"> <div className="flex flex-row w-1/2 items-center p-2">
Scrape Jobs <Typography className="mr-2" variant="body1">
</Typography> Scrape Jobs
<Tooltip title="Select All"> </Typography>
<span> <Tooltip title="Select All">
<IconButton color="primary" onClick={handleSelectAll}> <span>
<SelectAllIcon /> <IconButton color="primary" onClick={handleSelectAll}>
</IconButton> <SelectAllIcon />
</span> </IconButton>
</Tooltip> </span>
<Tooltip title="Delete Selected"> </Tooltip>
<span> <Tooltip title="Delete Selected">
<IconButton <span>
color="secondary" <IconButton
onClick={handleDeleteSelected} color="secondary"
disabled={selectedJobs.size === 0} onClick={handleDeleteSelected}
disabled={selectedJobs.size === 0}
>
<DeleteIcon />
</IconButton>
</span>
</Tooltip>
<Tooltip title="Download Selected">
<span>
<IconButton
color="primary"
onClick={() => handleDownload(Array.from(selectedJobs))}
disabled={selectedJobs.size === 0}
>
<DownloadIcon />
</IconButton>
</span>
</Tooltip>
</div>
<div className="flex flex-row space-x-2 w-1/2">
<TextField
label="Search"
variant="outlined"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-3/4"
/>
<FormControl className="w-1/2">
<InputLabel id="search-mode-label">Search Mode</InputLabel>
<Select
labelId="search-mode-label"
id="search-mode"
value={searchMode}
label="Mode"
onChange={(e: SelectChangeEvent) =>
setSearchMode(e.target.value as string)
}
> >
<DeleteIcon /> <MenuItem value="url">URL</MenuItem>
</IconButton> <MenuItem value="id">ID</MenuItem>
</span> </Select>
</Tooltip> </FormControl>
<Tooltip title="Download Selected"> </div>
<span>
<IconButton
color="primary"
onClick={() => handleDownload(Array.from(selectedJobs))}
disabled={selectedJobs.size === 0}
>
<DownloadIcon />
</IconButton>
</span>
</Tooltip>
</Box> </Box>
<Box sx={{ overflow: "auto", width: "75%" }}> <Box sx={{ overflow: "auto", width: "75%" }}>
<Table sx={{ tableLayout: "fixed", width: "100%" }}> <Table sx={{ tableLayout: "fixed", width: "100%" }}>
@@ -172,7 +216,7 @@ const JobTable: React.FC<JobTableProps> = ({ jobs, fetchJobs }) => {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{jobs.map((row, index) => ( {filteredJobs.map((row, index) => (
<TableRow key={index}> <TableRow key={index}>
<TableCell padding="checkbox"> <TableCell padding="checkbox">
<Checkbox <Checkbox