106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
SxProps,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
useTheme,
|
|
useMediaQuery,
|
|
Typography,
|
|
LinearProgress,
|
|
} from '@mui/material';
|
|
import * as Types from 'types/types'; // Adjust the import path as necessary
|
|
import { useAuth } from 'hooks/AuthContext';
|
|
import { JobsView } from 'components/ui/JobsView';
|
|
import { StatusBox, StatusIcon } from 'components/ui/StatusIcon';
|
|
|
|
interface JobsViewPageProps {
|
|
sx?: SxProps;
|
|
}
|
|
|
|
interface ProgressDialogProps {
|
|
isOpen: boolean;
|
|
title: string;
|
|
status: string;
|
|
statusType: Types.ApiActivityType;
|
|
}
|
|
|
|
const ProgressDialog: React.FC<ProgressDialogProps> = (props: ProgressDialogProps) => {
|
|
const { isOpen, title, status, statusType } = props;
|
|
const theme = useTheme();
|
|
const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
|
|
return (
|
|
<Dialog fullScreen={fullScreen} open={isOpen} aria-labelledby="responsive-dialog-title">
|
|
<DialogTitle id="responsive-dialog-title">{title}</DialogTitle>
|
|
<DialogContent>
|
|
<StatusBox>
|
|
{statusType && <StatusIcon type={statusType} />}
|
|
<Typography variant="body2" sx={{ ml: 1, minWidth: '200px', maxWidth: '200px' }}>
|
|
{status || 'Processing...'}
|
|
</Typography>
|
|
</StatusBox>
|
|
{status && <LinearProgress sx={{ mt: 1 }} />}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const JobsViewPage: React.FC<JobsViewPageProps> = (props: JobsViewPageProps) => {
|
|
const { sx } = props;
|
|
const { apiClient } = useAuth();
|
|
const [status, setStatus] = useState<string | null>(null);
|
|
const [statusType, setStatusType] = useState<Types.ApiActivityType | null>(null);
|
|
|
|
return (
|
|
<>
|
|
<JobsView
|
|
onJobSelect={(selectedJobs: Types.Job[]): void => console.log('Selected:', selectedJobs)}
|
|
onJobView={(job: Types.Job): void => console.log('View job:', job)}
|
|
onJobEdit={(job: Types.Job): void => console.log('Edit job:', job)}
|
|
onJobRegenerate={async (job: Types.Job): Promise<Types.Job> => {
|
|
setStatus('Re-extracting Job information...');
|
|
const jobStatusHandlers = {
|
|
onStatus: (status: Types.ChatMessageStatus): void => {
|
|
console.log('status:', status.content);
|
|
setStatusType(status.activity);
|
|
setStatus(status.content);
|
|
},
|
|
onMessage: async (
|
|
jobRequirementsMessage: Types.JobRequirementsMessage
|
|
): Promise<void> => {
|
|
console.log('onMessage - job', jobRequirementsMessage);
|
|
setStatusType(null);
|
|
setStatus(null);
|
|
},
|
|
onError: (error: Types.ChatMessageError): void => {
|
|
console.log('onError', error);
|
|
setStatusType(null);
|
|
setStatus(null);
|
|
},
|
|
onComplete: (): void => {
|
|
setStatusType(null);
|
|
setStatus(null);
|
|
},
|
|
};
|
|
const result = apiClient.regenerateJob(job, jobStatusHandlers);
|
|
return (await result.promise).job;
|
|
}}
|
|
onJobDelete={async (job: Types.Job): Promise<void> => {
|
|
await apiClient.deleteJob(job.id || '');
|
|
}}
|
|
selectable={true}
|
|
showActions={true}
|
|
sx={{ maxHeight: '100%', ...sx }}
|
|
/>
|
|
<ProgressDialog
|
|
isOpen={!!status}
|
|
title="Job Processing"
|
|
status={status || ''}
|
|
statusType={statusType || 'info'}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export { JobsViewPage };
|