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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import { FunctionComponent, useMemo } from "react";
import { Link } from "react-router-dom";
import { Anchor, Container, Progress } from "@mantine/core";
import { useDocumentTitle } from "@mantine/hooks";
import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ColumnDef } from "@tanstack/react-table";
import { useSeriesModification, useSeriesPagination } from "@/apis/hooks";
import { Action } from "@/components";
import LanguageProfileName from "@/components/bazarr/LanguageProfile";
import { ItemEditModal } from "@/components/forms/ItemEditForm";
import { useModals } from "@/modules/modals";
import ItemView from "@/pages/views/ItemView";
const SeriesView: FunctionComponent = () => {
const mutation = useSeriesModification();
const query = useSeriesPagination();
const modals = useModals();
const columns = useMemo<ColumnDef<Item.Series>[]>(
() => [
{
id: "monitored",
cell: ({
row: {
original: { monitored },
},
}) => (
<FontAwesomeIcon
title={monitored ? "monitored" : "unmonitored"}
icon={monitored ? faBookmark : farBookmark}
></FontAwesomeIcon>
),
},
{
header: "Name",
accessorKey: "title",
cell: ({ row: { original } }) => {
const target = `/series/${original.sonarrSeriesId}`;
return (
<Anchor className="table-primary" component={Link} to={target}>
{original.title}
</Anchor>
);
},
},
{
header: "Languages Profile",
accessorKey: "profileId",
cell: ({ row: { original } }) => {
return (
<LanguageProfileName
index={original.profileId}
empty=""
></LanguageProfileName>
);
},
},
{
header: "Episodes",
accessorKey: "episodeFileCount",
cell: (row) => {
const { episodeFileCount, episodeMissingCount, profileId, title } =
row.row.original;
let progress = 0;
let label = "";
if (episodeFileCount === 0 || !profileId) {
progress = 0.0;
} else {
progress = (1.0 - episodeMissingCount / episodeFileCount) * 100.0;
label = `${
episodeFileCount - episodeMissingCount
}/${episodeFileCount}`;
}
return (
<Progress.Root key={title} size="xl">
<Progress.Section
value={progress}
color={episodeMissingCount === 0 ? "brand" : "yellow"}
>
<Progress.Label>{label}</Progress.Label>
</Progress.Section>
</Progress.Root>
);
},
},
{
id: "sonarrSeriesId",
cell: ({ row: { original } }) => {
return (
<Action
label="Edit Series"
tooltip={{ position: "left" }}
onClick={() =>
modals.openContextModal(
ItemEditModal,
{
mutation,
item: original,
},
{
title: original.title,
},
)
}
icon={faWrench}
></Action>
);
},
},
],
[mutation, modals],
);
useDocumentTitle("Series - Bazarr");
return (
<Container px={0} fluid>
<ItemView query={query} columns={columns}></ItemView>
</Container>
);
};
export default SeriesView;
|
