Adding dense JobsTable
This commit is contained in:
parent
17381dded1
commit
5c867af814
359
frontend/src/components/ui/JobsTable.tsx
Normal file
359
frontend/src/components/ui/JobsTable.tsx
Normal file
@ -0,0 +1,359 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Paper,
|
||||
Checkbox,
|
||||
TablePagination,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
Box,
|
||||
Typography,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Search as SearchIcon,
|
||||
Visibility as VisibilityIcon,
|
||||
Edit as EditIcon,
|
||||
Delete as DeleteIcon,
|
||||
} from '@mui/icons-material';
|
||||
|
||||
import * as Types from 'types/types';
|
||||
import { useAuth } from 'hooks/AuthContext';
|
||||
|
||||
interface JobsTableProps {
|
||||
onJobSelect?: (selectedJobs: Types.Job[]) => void;
|
||||
onJobView?: (job: Types.Job) => void;
|
||||
onJobEdit?: (job: Types.Job) => void;
|
||||
onJobDelete?: (job: Types.Job) => void;
|
||||
selectable?: boolean;
|
||||
showActions?: boolean;
|
||||
}
|
||||
|
||||
const JobsTable: React.FC<JobsTableProps> = ({
|
||||
onJobSelect,
|
||||
onJobView,
|
||||
onJobEdit,
|
||||
onJobDelete,
|
||||
selectable = true,
|
||||
showActions = true,
|
||||
}) => {
|
||||
const { apiClient } = useAuth();
|
||||
const [jobs, setJobs] = React.useState<Types.Job[]>([]);
|
||||
const [loading, setLoading] = React.useState<boolean>(true);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [page, setPage] = React.useState<number>(0);
|
||||
const [limit, setLimit] = React.useState<number>(25);
|
||||
const [total, setTotal] = React.useState<number>(0);
|
||||
const [searchQuery, setSearchQuery] = React.useState<string>('');
|
||||
const [searchTimeout, setSearchTimeout] = React.useState<NodeJS.Timeout | null>(null);
|
||||
const [selectedJobs, setSelectedJobs] = React.useState<Set<string>>(new Set());
|
||||
|
||||
// Fetch jobs from API
|
||||
const fetchJobs = React.useCallback(async (pageNum: number = 0, searchTerm: string = '') => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const paginationRequest : Partial<Types.PaginatedRequest> = {
|
||||
page: pageNum + 1,
|
||||
limit: limit,
|
||||
sortBy: 'createdAt',
|
||||
sortOrder: 'desc',
|
||||
};
|
||||
|
||||
let paginationResponse : Types.PaginatedResponse;
|
||||
let url = `/api/1.0/jobs`;
|
||||
if (searchTerm.trim()) {
|
||||
paginationResponse = await apiClient.searchJobs(searchTerm);
|
||||
} else {
|
||||
paginationResponse = await apiClient.getJobs(paginationRequest);
|
||||
}
|
||||
|
||||
setJobs(paginationResponse.data);
|
||||
setTotal(paginationResponse.totalPages);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching jobs');
|
||||
setJobs([]);
|
||||
setTotal(0);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [limit]);
|
||||
|
||||
// Initial load
|
||||
React.useEffect(() => {
|
||||
fetchJobs(0, searchQuery);
|
||||
}, [fetchJobs]);
|
||||
|
||||
// Handle search with debouncing
|
||||
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = event.target.value;
|
||||
setSearchQuery(value);
|
||||
|
||||
if (searchTimeout) {
|
||||
clearTimeout(searchTimeout);
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
setPage(0);
|
||||
fetchJobs(0, value);
|
||||
}, 500);
|
||||
|
||||
setSearchTimeout(timeout);
|
||||
};
|
||||
|
||||
// Handle page change
|
||||
const handlePageChange = (event: unknown, newPage: number) => {
|
||||
setPage(newPage);
|
||||
fetchJobs(newPage, searchQuery);
|
||||
};
|
||||
|
||||
// Handle rows per page change
|
||||
const handleRowsPerPageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newLimit = parseInt(event.target.value, 10);
|
||||
setLimit(newLimit);
|
||||
setPage(0);
|
||||
fetchJobs(0, searchQuery);
|
||||
};
|
||||
|
||||
// Handle selection
|
||||
const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.checked) {
|
||||
const newSelected = new Set<string>(jobs.map(job => job.id || ''));
|
||||
setSelectedJobs(newSelected);
|
||||
onJobSelect?.(jobs);
|
||||
} else {
|
||||
setSelectedJobs(new Set());
|
||||
onJobSelect?.([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectJob = (jobId: string) => {
|
||||
const newSelected = new Set(selectedJobs);
|
||||
if (newSelected.has(jobId)) {
|
||||
newSelected.delete(jobId);
|
||||
} else {
|
||||
newSelected.add(jobId);
|
||||
}
|
||||
setSelectedJobs(newSelected);
|
||||
|
||||
const selectedJobsList = jobs.filter(job => newSelected.has(job.id || ''));
|
||||
onJobSelect?.(selectedJobsList);
|
||||
};
|
||||
|
||||
// Utility functions
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString();
|
||||
};
|
||||
|
||||
const getOwnerName = (owner?: Types.Job['owner']) => {
|
||||
if (!owner) return 'Unknown';
|
||||
return `${owner.firstName || ''} ${owner.lastName || ''}`.trim() || owner.email || 'Unknown';
|
||||
};
|
||||
|
||||
const truncateDescription = (description: string, maxLength: number = 100) => {
|
||||
if (description.length <= maxLength) return description;
|
||||
return description.substring(0, maxLength) + '...';
|
||||
};
|
||||
|
||||
const isSelected = (jobId: string) => selectedJobs.has(jobId);
|
||||
const numSelected = selectedJobs.size;
|
||||
const rowCount = jobs.length;
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Paper sx={{ p: 2 }}>
|
||||
<Alert severity="error">{error}</Alert>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Paper>
|
||||
<Box sx={{ p: 2 }}>
|
||||
<Typography variant="h6" component="h2" sx={{ mb: 2 }}>
|
||||
Jobs ({total})
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
placeholder="Search jobs by title, description, or skills..."
|
||||
value={searchQuery}
|
||||
onChange={handleSearchChange}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<TableContainer>
|
||||
<Table size="small" aria-label="jobs table">
|
||||
<TableHead sx={{"& th": { whiteSpace: "nowrap" }}}>
|
||||
<TableRow>
|
||||
{selectable && (
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
||||
checked={rowCount > 0 && numSelected === rowCount}
|
||||
onChange={handleSelectAll}
|
||||
inputProps={{
|
||||
'aria-label': 'select all jobs',
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell>Title</TableCell>
|
||||
<TableCell>Description</TableCell>
|
||||
{/* <TableCell>Skills</TableCell> */}
|
||||
<TableCell>Owner</TableCell>
|
||||
{/* <TableCell align="right">Views</TableCell> */}
|
||||
<TableCell>Status</TableCell>
|
||||
<TableCell>Created</TableCell>
|
||||
{showActions && <TableCell align="center">Actions</TableCell>}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody sx={{ "& p, & td" : { m: 0, p: 0.5, fontSize: '0.75rem !important'}}}>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={selectable ? (showActions ? 9 : 8) : (showActions ? 8 : 7)} align="center">
|
||||
<CircularProgress size={24} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : jobs.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={selectable ? (showActions ? 9 : 8) : (showActions ? 8 : 7)} align="center">
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
No jobs found
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
jobs.map((job) => {
|
||||
const isItemSelected = isSelected(job.id || '');
|
||||
return (
|
||||
<TableRow
|
||||
key={job.id}
|
||||
hover
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
selected={isItemSelected}
|
||||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||
>
|
||||
{selectable && (
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
checked={isItemSelected}
|
||||
onChange={() => handleSelectJob(job.id || '')}
|
||||
inputProps={{
|
||||
'aria-labelledby': `job-${job.id}`,
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell scope="row" id={`job-${job.id}`}>
|
||||
<Typography variant="body2" fontWeight="medium">
|
||||
{job.title}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
{truncateDescription(job.description)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
{/* <TableCell>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{job.skills?.slice(0, 3).map((skill) => (
|
||||
<Chip key={skill} label={skill} size="small" variant="outlined" />
|
||||
))}
|
||||
{job.skills && job.skills.length > 3 && (
|
||||
<Chip label={`+${job.skills.length - 3}`} size="small" />
|
||||
)}
|
||||
</Box>
|
||||
</TableCell> */}
|
||||
<TableCell>
|
||||
<Typography variant="body2">
|
||||
{getOwnerName(job.owner)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
{/* <TableCell align="right">
|
||||
<Typography variant="body2">
|
||||
{job.views}
|
||||
</Typography>
|
||||
</TableCell> */}
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={job.details?.isActive ? 'Active' : 'Inactive'}
|
||||
color={job.details?.isActive ? 'success' : 'default'}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell sx={{whiteSpace: "nowrap" }}>
|
||||
<Typography variant="body2">
|
||||
{job.createdAt?.toLocaleDateString()}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
{showActions && (
|
||||
<TableCell align="center">
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
{onJobView && (
|
||||
<Tooltip title="View Job">
|
||||
<IconButton size="small" onClick={() => onJobView(job)}>
|
||||
<VisibilityIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
{onJobEdit && (
|
||||
<Tooltip title="Edit Job">
|
||||
<IconButton size="small" onClick={() => onJobEdit(job)}>
|
||||
<EditIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
{onJobDelete && (
|
||||
<Tooltip title="Delete Job">
|
||||
<IconButton size="small" onClick={() => onJobDelete(job)}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[10, 25, 50, 100]}
|
||||
component="div"
|
||||
count={total}
|
||||
rowsPerPage={limit}
|
||||
page={page}
|
||||
onPageChange={handlePageChange}
|
||||
onRowsPerPageChange={handleRowsPerPageChange}
|
||||
/>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export { JobsTable };
|
||||
@ -48,6 +48,9 @@ import { JobViewer } from 'components/ui/JobViewer';
|
||||
import { CandidatePicker } from 'components/ui/CandidatePicker';
|
||||
import { ResumeViewer } from 'components/ui/ResumeViewer';
|
||||
|
||||
import { JobsTable } from 'components/ui/JobsTable';
|
||||
import * as Types from 'types/types';
|
||||
|
||||
// Beta page components for placeholder routes
|
||||
const BackstoryPage = () => (
|
||||
<BetaPage>
|
||||
@ -195,6 +198,24 @@ export const navigationConfig: NavigationConfig = {
|
||||
showInUserMenu: true,
|
||||
userMenuGroup: 'profile',
|
||||
},
|
||||
{
|
||||
id: 'jobs-table',
|
||||
label: 'Jobs Table',
|
||||
path: '/candidate/jobs-table/:jobId?',
|
||||
icon: <WorkIcon />,
|
||||
component: <JobsTable
|
||||
onJobSelect={(selectedJobs: Types.Job[]) => console.log('Selected:', selectedJobs)}
|
||||
onJobView={(job: Types.Job) => console.log('View job:', job)}
|
||||
onJobEdit={(job: Types.Job) => console.log('Edit job:', job)}
|
||||
onJobDelete={(job: Types.Job) => console.log('Delete job:', job)}
|
||||
selectable={true}
|
||||
showActions={true}
|
||||
/>,
|
||||
userTypes: ['candidate', 'guest', 'employer'],
|
||||
showInNavigation: false,
|
||||
showInUserMenu: true,
|
||||
userMenuGroup: 'profile',
|
||||
},
|
||||
{
|
||||
id: 'explore-resumes',
|
||||
label: 'Resumes',
|
||||
|
||||
@ -107,7 +107,7 @@ const useResizeObserverAndMutationObserver = (
|
||||
const useAutoScrollToBottom = (
|
||||
scrollToRef: RefObject<HTMLElement | null>,
|
||||
smooth = true,
|
||||
fallbackThreshold = 0.33,
|
||||
fallbackThreshold = 0.33
|
||||
): RefObject<HTMLDivElement | null> => {
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const lastScrollTop = useRef(0);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user