no log: Group Series and Movies page to the same folder

1 files changed, 126 insertions, 0 deletions

diff --git a/frontend/src/DisplayItem/Series/index.tsx b/frontend/src/DisplayItem/Series/index.tsx
new file mode 100644
index 000000000..81f37c021
--- /dev/null
+++ b/frontend/src/DisplayItem/Series/index.tsx
@@ -0,0 +1,126 @@
+import { faWrench } from "@fortawesome/free-solid-svg-icons";
+import React, { FunctionComponent, useMemo } from "react";
+import { Badge, ProgressBar } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import { Column } from "react-table";
+import { seriesUpdateAll, seriesUpdateByRange } from "../../@redux/actions";
+import { useSerieEntities } from "../../@redux/hooks";
+import { useReduxAction } from "../../@redux/hooks/base";
+import { SeriesApi } from "../../apis";
+import { ActionBadge } from "../../components";
+import { BuildKey } from "../../utilites";
+import BaseItemView from "../generic/BaseItemView";
+
+interface Props {}
+
+const SeriesView: FunctionComponent<Props> = () => {
+  const series = useSerieEntities();
+  const loader = useReduxAction(seriesUpdateByRange);
+  const columns: Column<Item.Series>[] = useMemo<Column<Item.Series>[]>(
+    () => [
+      {
+        Header: "Name",
+        accessor: "title",
+        className: "text-nowrap",
+        Cell: ({ row, value, isSelecting: select }) => {
+          if (select) {
+            return value;
+          } else {
+            const target = `/series/${row.original.sonarrSeriesId}`;
+            return (
+              <Link to={target}>
+                <span>{value}</span>
+              </Link>
+            );
+          }
+        },
+      },
+      {
+        Header: "Audio",
+        accessor: "audio_language",
+        Cell: (row) => {
+          return row.value.map((v) => (
+            <Badge
+              variant="secondary"
+              className="mr-2"
+              key={BuildKey(v.code2, v.forced, v.hi)}
+            >
+              {v.name}
+            </Badge>
+          ));
+        },
+      },
+      {
+        Header: "Languages Profile",
+        accessor: "profileId",
+        Cell: ({ value, loose }) => {
+          if (loose) {
+            // Define in generic/BaseItemView/table.tsx
+            const profiles = loose[0] as Language.Profile[];
+            return profiles.find((v) => v.profileId === value)?.name ?? null;
+          } else {
+            return null;
+          }
+        },
+      },
+      {
+        Header: "Episodes",
+        accessor: "episodeFileCount",
+        selectHide: true,
+        Cell: (row) => {
+          const { episodeFileCount, episodeMissingCount, profileId } =
+            row.row.original;
+          let progress = 0;
+          let label = "";
+          if (episodeFileCount === 0 || !profileId) {
+            progress = 0.0;
+          } else {
+            progress = episodeFileCount - episodeMissingCount;
+            label = `${
+              episodeFileCount - episodeMissingCount
+            }/${episodeFileCount}`;
+          }
+
+          const color = episodeMissingCount === 0 ? "primary" : "warning";
+
+          return (
+            <ProgressBar
+              className="my-a"
+              variant={color}
+              min={0}
+              max={episodeFileCount}
+              now={progress}
+              label={label}
+            ></ProgressBar>
+          );
+        },
+      },
+      {
+        accessor: "sonarrSeriesId",
+        selectHide: true,
+        Cell: ({ row, externalUpdate }) => (
+          <ActionBadge
+            icon={faWrench}
+            onClick={() => {
+              externalUpdate && externalUpdate(row, "edit");
+            }}
+          ></ActionBadge>
+        ),
+      },
+    ],
+    []
+  );
+
+  return (
+    <BaseItemView
+      state={series}
+      name="Series"
+      updateAction={seriesUpdateAll}
+      loader={loader}
+      columns={columns}
+      modify={(form) => SeriesApi.modify(form)}
+    ></BaseItemView>
+  );
+};
+
+export default SeriesView;