Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-04 13:23:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-775] Jobs clearing improvement (#1278)

Browse source 
Update index.tsx
This commit is contained in:
ameer2468 2023-08-30 18:44:18 +03:00 committed by GitHub
parent 87725d4b71
commit 46c4230a7c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
interface/app/$libraryId/Layout/Sidebar/JobManager/index.tsx
View file

@ -1,13 +1,15 @@
import { useQueryClient } from '@tanstack/react-query';
import { Trash, X } from 'phosphor-react';
import { Check, Trash, X } from 'phosphor-react';
import { useJobProgress, useLibraryMutation, useLibraryQuery } from '@sd/client';
import { Button, PopoverClose, Tooltip } from '@sd/ui';
import { Button, PopoverClose, Tooltip, toast } from '@sd/ui';
import { showAlertDialog } from '~/components/AlertDialog';
import IsRunningJob from './IsRunningJob';
import JobGroup from './JobGroup';
import { useState } from 'react';
export function JobManager() {
const queryClient = useQueryClient();
const [toggleConfirmation, setToggleConfirmation] = useState(false);
const jobGroups = useLibraryQuery(['jobs.reports']);
@ -15,53 +17,60 @@ export function JobManager() {
const clearAllJobs = useLibraryMutation(['jobs.clearAll'], {
onError: () => {
showAlertDialog({
toast.error({
title: 'Error',
value: 'There was an error clearing all jobs. Please try again.'
description: 'Failed to clear all jobs.'
});
},
onSuccess: () => {
queryClient.invalidateQueries(['jobs.reports ']);
setToggleConfirmation(t => !t)
toast.success({
title: 'Success',
description: 'All jobs have been cleared.'
});
}
});
const clearAllJobsHandler = () => {
showAlertDialog({
title: 'Clear Jobs',
value: 'Are you sure you want to clear all jobs? This cannot be undone.',
label: 'Clear',
onSubmit: () => clearAllJobs.mutate(null)
});
clearAllJobs.mutate(null)
};
return (
<div className="h-full overflow-hidden pb-10">
<PopoverClose asChild>
<div className="z-20 flex h-9 w-full items-center rounded-t-md border-b border-app-line/50 bg-app-button/30 px-2">
<div className="h-full pb-10 overflow-hidden">
<div className="z-20 flex items-center w-full px-2 border-b h-9 rounded-t-md border-app-line/50 bg-app-button/30">
<span className=" ml-1.5 font-medium">Recent Jobs</span>
<div className="grow" />
{toggleConfirmation ? <div className="w-fit h-[85%] bg-app/40 rounded-md flex gap-2 items-center justify-center px-2 border border-app-line">
<p className='text-[10px]'>Are you sure?</p>
<PopoverClose asChild>
<Check onClick={clearAllJobsHandler} className='w-3 h-3 transition-opacity duration-300 hover:opacity-70' color='white'/>
</PopoverClose>
<X className="w-3 h-3 transition-opacity hover:opacity-70" onClick={() => setToggleConfirmation(t => !t)} />
</div> :
<Button
className="opacity-70"
onClick={() => clearAllJobsHandler()}
onClick={() => setToggleConfirmation(t => !t)}
size="icon"
>
<Tooltip label="Clear out finished jobs">
<Trash className="h-4 w-4" />
<Trash className="w-4 h-4" />
</Tooltip>
</Button>
}
<PopoverClose asChild>
<Button className="opacity-70" size="icon">
<Tooltip label="Close">
<X className="h-4 w-4" />
<X className="w-4 h-4" />
</Tooltip>
</Button>
</PopoverClose>
</div>
</PopoverClose>
<div className="custom-scroll job-manager-scroll h-full overflow-x-hidden">
<div className="h-full overflow-x-hidden custom-scroll job-manager-scroll">
<div className="h-full border-r border-app-line/50">
{jobGroups.data &&
(jobGroups.data.length === 0 ? (
<div className="flex h-32 items-center justify-center text-sidebar-inkDull">
<div className="flex items-center justify-center h-32 text-sidebar-inkDull">
No jobs.
</div>
) : (