2022-05-31 15:49:04 +00:00
|
|
|
import { useDeleteBackups, useRestoreBackups } from "@/apis/hooks";
|
|
|
|
import { Action, PageTable } from "@/components";
|
|
|
|
import { useModals } from "@/modules/modals";
|
|
|
|
import { useTableStyles } from "@/styles";
|
2022-08-22 03:14:06 +00:00
|
|
|
import { Environment } from "@/utilities";
|
2024-03-13 03:03:08 +00:00
|
|
|
import { faHistory, faTrash } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
import { Anchor, Text } from "@mantine/core";
|
2022-05-31 15:49:04 +00:00
|
|
|
import { FunctionComponent, useMemo } from "react";
|
2022-02-23 03:55:07 +00:00
|
|
|
import { Column } from "react-table";
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
backups: readonly System.Backups[];
|
|
|
|
}
|
|
|
|
|
|
|
|
const Table: FunctionComponent<Props> = ({ backups }) => {
|
|
|
|
const columns: Column<System.Backups>[] = useMemo<Column<System.Backups>[]>(
|
|
|
|
() => [
|
|
|
|
{
|
|
|
|
Header: "Name",
|
|
|
|
accessor: "filename",
|
2022-05-31 15:49:04 +00:00
|
|
|
Cell: ({ value }) => {
|
2022-08-22 03:14:06 +00:00
|
|
|
return (
|
|
|
|
<Anchor
|
|
|
|
href={`${Environment.baseUrl}/system/backup/download/${value}`}
|
|
|
|
>
|
|
|
|
{value}
|
|
|
|
</Anchor>
|
|
|
|
);
|
2022-05-31 15:49:04 +00:00
|
|
|
},
|
2022-02-23 03:55:07 +00:00
|
|
|
},
|
2022-02-28 01:19:56 +00:00
|
|
|
{
|
|
|
|
Header: "Size",
|
|
|
|
accessor: "size",
|
2022-05-31 15:49:04 +00:00
|
|
|
Cell: ({ value }) => {
|
|
|
|
const { classes } = useTableStyles();
|
|
|
|
return <Text className={classes.noWrap}>{value}</Text>;
|
|
|
|
},
|
2022-02-28 01:19:56 +00:00
|
|
|
},
|
2022-02-23 03:55:07 +00:00
|
|
|
{
|
|
|
|
Header: "Time",
|
|
|
|
accessor: "date",
|
2022-05-31 15:49:04 +00:00
|
|
|
Cell: ({ value }) => {
|
|
|
|
const { classes } = useTableStyles();
|
|
|
|
return <Text className={classes.noWrap}>{value}</Text>;
|
|
|
|
},
|
2022-02-23 03:55:07 +00:00
|
|
|
},
|
|
|
|
{
|
2024-03-13 03:03:08 +00:00
|
|
|
id: "restore",
|
|
|
|
Header: "Restore",
|
2022-05-31 15:49:04 +00:00
|
|
|
accessor: "filename",
|
|
|
|
Cell: ({ value }) => {
|
|
|
|
const modals = useModals();
|
|
|
|
const restore = useRestoreBackups();
|
2024-03-13 03:03:08 +00:00
|
|
|
return (
|
|
|
|
<Action
|
|
|
|
label="Restore"
|
|
|
|
onClick={() =>
|
|
|
|
modals.openConfirmModal({
|
|
|
|
title: "Restore Backup",
|
|
|
|
children: (
|
|
|
|
<Text size="sm">
|
|
|
|
Are you sure you want to restore the backup ({value})?
|
|
|
|
Bazarr will automatically restart and reload the UI during
|
|
|
|
the restore process.
|
|
|
|
</Text>
|
|
|
|
),
|
|
|
|
labels: { confirm: "Restore", cancel: "Cancel" },
|
|
|
|
confirmProps: { color: "red" },
|
|
|
|
onConfirm: () => restore.mutate(value),
|
|
|
|
})
|
|
|
|
}
|
|
|
|
icon={faHistory}
|
|
|
|
></Action>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "delet4",
|
|
|
|
Header: "Delete",
|
|
|
|
accessor: "filename",
|
|
|
|
Cell: ({ value }) => {
|
|
|
|
const modals = useModals();
|
2022-05-31 15:49:04 +00:00
|
|
|
const remove = useDeleteBackups();
|
2022-02-23 03:55:07 +00:00
|
|
|
return (
|
2024-03-13 03:03:08 +00:00
|
|
|
<Action
|
|
|
|
label="Delete"
|
|
|
|
color="red"
|
|
|
|
onClick={() =>
|
|
|
|
modals.openConfirmModal({
|
|
|
|
title: "Delete Backup",
|
|
|
|
children: (
|
|
|
|
<Text size="sm">
|
|
|
|
Are you sure you want to delete the backup ({value})?
|
|
|
|
</Text>
|
|
|
|
),
|
|
|
|
labels: { confirm: "Delete", cancel: "Cancel" },
|
|
|
|
confirmProps: { color: "red" },
|
|
|
|
onConfirm: () => remove.mutate(value),
|
|
|
|
})
|
|
|
|
}
|
|
|
|
icon={faTrash}
|
|
|
|
></Action>
|
2022-02-23 03:55:07 +00:00
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
2024-03-03 17:15:23 +00:00
|
|
|
[],
|
2022-02-23 03:55:07 +00:00
|
|
|
);
|
|
|
|
|
2022-05-31 15:49:04 +00:00
|
|
|
return <PageTable columns={columns} data={backups}></PageTable>;
|
2022-02-23 03:55:07 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default Table;
|