mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Migrate tasks edit page to react
This commit is contained in:
parent
e80b890bd2
commit
524d1b6574
20 changed files with 501 additions and 330 deletions
67
src/apps/dashboard/features/tasks/components/Task.tsx
Normal file
67
src/apps/dashboard/features/tasks/components/Task.tsx
Normal file
|
@ -0,0 +1,67 @@
|
|||
import React, { FunctionComponent, useCallback } from 'react';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import AccessTimeIcon from '@mui/icons-material/AccessTime';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemAvatar from '@mui/material/ListItemAvatar';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Dashboard from 'utils/dashboard';
|
||||
import { TaskProps } from '../types/taskProps';
|
||||
import TaskProgress from './TaskProgress';
|
||||
import TaskLastRan from './TaskLastRan';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import PlayArrow from '@mui/icons-material/PlayArrow';
|
||||
import Stop from '@mui/icons-material/Stop';
|
||||
import { useStartTask } from '../api/useStartTask';
|
||||
import { useStopTask } from '../api/useStopTask';
|
||||
|
||||
const Task: FunctionComponent<TaskProps> = ({ task }: TaskProps) => {
|
||||
const startTask = useStartTask();
|
||||
const stopTask = useStopTask();
|
||||
|
||||
const navigateTaskEdit = useCallback(() => {
|
||||
Dashboard.navigate(`/dashboard/tasks/edit?id=${task.Id}`)
|
||||
.catch(err => {
|
||||
console.error('[Task] failed to navigate to task edit page', err);
|
||||
});
|
||||
}, [task]);
|
||||
|
||||
const handleStartTask = useCallback(() => {
|
||||
if (task.Id) {
|
||||
startTask.mutate({ taskId: task.Id });
|
||||
}
|
||||
}, [task, startTask]);
|
||||
|
||||
const handleStopTask = useCallback(() => {
|
||||
if (task.Id) {
|
||||
stopTask.mutate({ taskId: task.Id });
|
||||
}
|
||||
}, [task, stopTask]);
|
||||
|
||||
return (
|
||||
<ListItem
|
||||
disablePadding
|
||||
secondaryAction={
|
||||
<IconButton onClick={task.State == 'Running' ? handleStopTask : handleStartTask}>
|
||||
{task.State == 'Running' ? <Stop /> : <PlayArrow />}
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<ListItemButton onClick={navigateTaskEdit}>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: 'primary.main' }}>
|
||||
<AccessTimeIcon sx={{ color: '#fff' }} />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={<Typography variant='h3'>{task.Name}</Typography>}
|
||||
secondary={task.State == 'Running' ? <TaskProgress task={task} /> : <TaskLastRan task={task} />}
|
||||
disableTypography
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
);
|
||||
};
|
||||
|
||||
export default Task;
|
Loading…
Add table
Add a link
Reference in a new issue