1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
import { useDeleteBackups, useRestoreBackups } from "@/apis/hooks";
import { Action, PageTable } from "@/components";
import { useModals } from "@/modules/modals";
import { useTableStyles } from "@/styles";
import { Environment } from "@/utilities";
import { faHistory, faTrash } from "@fortawesome/free-solid-svg-icons";
import { Anchor, Text } from "@mantine/core";
import { FunctionComponent, useMemo } from "react";
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",
Cell: ({ value }) => {
return (
<Anchor
href={`${Environment.baseUrl}/system/backup/download/${value}`}
>
{value}
</Anchor>
);
},
},
{
Header: "Size",
accessor: "size",
Cell: ({ value }) => {
const { classes } = useTableStyles();
return <Text className={classes.noWrap}>{value}</Text>;
},
},
{
Header: "Time",
accessor: "date",
Cell: ({ value }) => {
const { classes } = useTableStyles();
return <Text className={classes.noWrap}>{value}</Text>;
},
},
{
id: "restore",
Header: "Restore",
accessor: "filename",
Cell: ({ value }) => {
const modals = useModals();
const restore = useRestoreBackups();
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();
const remove = useDeleteBackups();
return (
<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>
);
},
},
],
[],
);
return <PageTable columns={columns} data={backups}></PageTable>;
};
export default Table;
|
