aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/src/components/forms/ProfileEditForm.tsx
diff options
context:
space:
mode:
authorJayZed <[email protected]>2024-07-08 17:33:43 -0400
committerJayZed <[email protected]>2024-07-08 17:33:43 -0400
commit4cc6806193127f9d6d3f2dab26969471d9bbf159 (patch)
treebfc90e4b55fa0f48f83e51c4e5947c1f7d7d7a2d /frontend/src/components/forms/ProfileEditForm.tsx
parentd875dc7733c901246881325ee3a84fe5d44b10b9 (diff)
parent5886c20c9c7929bf46836a99c2d9d4eb834638bd (diff)
downloadbazarr-4cc6806193127f9d6d3f2dab26969471d9bbf159.tar.gz
bazarr-4cc6806193127f9d6d3f2dab26969471d9bbf159.zip
Merge branch 'development' of https://github.com/morpheus65535/bazarr into development
Diffstat (limited to 'frontend/src/components/forms/ProfileEditForm.tsx')
-rw-r--r--frontend/src/components/forms/ProfileEditForm.tsx175
1 files changed, 92 insertions, 83 deletions
diff --git a/frontend/src/components/forms/ProfileEditForm.tsx b/frontend/src/components/forms/ProfileEditForm.tsx
index 874f5b8a6..75e2f9df7 100644
--- a/frontend/src/components/forms/ProfileEditForm.tsx
+++ b/frontend/src/components/forms/ProfileEditForm.tsx
@@ -1,10 +1,4 @@
-import { Action, Selector, SelectorOption, SimpleTable } from "@/components";
-import { useModals, withModal } from "@/modules/modals";
-import { useTableStyles } from "@/styles";
-import { useArrayAction, useSelectorOptions } from "@/utilities";
-import { LOG } from "@/utilities/console";
-import FormUtils from "@/utilities/form";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import React, { FunctionComponent, useCallback, useMemo } from "react";
import {
Accordion,
Button,
@@ -16,9 +10,16 @@ import {
TextInput,
} from "@mantine/core";
import { useForm } from "@mantine/form";
-import { FunctionComponent, useCallback, useMemo } from "react";
-import { Column } from "react-table";
-import ChipInput from "../inputs/ChipInput";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { ColumnDef } from "@tanstack/react-table";
+import { Action, Selector, SelectorOption } from "@/components";
+import ChipInput from "@/components/inputs/ChipInput";
+import SimpleTable from "@/components/tables/SimpleTable";
+import { useModals, withModal } from "@/modules/modals";
+import { useArrayAction, useSelectorOptions } from "@/utilities";
+import { LOG } from "@/utilities/console";
+import FormUtils from "@/utilities/form";
+import styles from "./ProfileEditForm.module.scss";
export const anyCutoff = 65535;
@@ -82,7 +83,12 @@ const ProfileEditForm: FunctionComponent<Props> = ({
const itemCutoffOptions = useSelectorOptions(
form.values.items,
- (v) => v.language,
+ (v) => {
+ const suffix =
+ v.hi === "True" ? ":hi" : v.forced === "True" ? ":forced" : "";
+
+ return v.language + suffix;
+ },
(v) => String(v.id),
);
@@ -140,78 +146,88 @@ const ProfileEditForm: FunctionComponent<Props> = ({
}
}, [form, languages]);
- const columns = useMemo<Column<Language.ProfileItem>[]>(
+ const LanguageCell = React.memo(
+ ({ item, index }: { item: Language.ProfileItem; index: number }) => {
+ const code = useMemo(
+ () =>
+ languageOptions.options.find((l) => l.value.code2 === item.language)
+ ?.value ?? null,
+ [item.language],
+ );
+
+ return (
+ <Selector
+ {...languageOptions}
+ className="table-select"
+ value={code}
+ onChange={(value) => {
+ if (value) {
+ item.language = value.code2;
+ action.mutate(index, { ...item, language: value.code2 });
+ }
+ }}
+ ></Selector>
+ );
+ },
+ );
+
+ const SubtitleTypeCell = React.memo(
+ ({ item, index }: { item: Language.ProfileItem; index: number }) => {
+ const selectValue = useMemo(() => {
+ if (item.forced === "True") {
+ return "forced";
+ } else if (item.hi === "True") {
+ return "hi";
+ } else {
+ return "normal";
+ }
+ }, [item.forced, item.hi]);
+
+ return (
+ <Select
+ value={selectValue}
+ data={subtitlesTypeOptions}
+ onChange={(value) => {
+ if (value) {
+ action.mutate(index, {
+ ...item,
+ hi: value === "hi" ? "True" : "False",
+ forced: value === "forced" ? "True" : "False",
+ });
+ }
+ }}
+ ></Select>
+ );
+ },
+ );
+
+ const columns = useMemo<ColumnDef<Language.ProfileItem>[]>(
() => [
{
- Header: "ID",
- accessor: "id",
+ header: "ID",
+ accessorKey: "id",
},
{
- Header: "Language",
- accessor: "language",
- Cell: ({ value: code, row: { original: item, index } }) => {
- const language = useMemo(
- () =>
- languageOptions.options.find((l) => l.value.code2 === code)
- ?.value ?? null,
- [code],
- );
-
- const { classes } = useTableStyles();
-
- return (
- <Selector
- {...languageOptions}
- className={classes.select}
- value={language}
- onChange={(value) => {
- if (value) {
- item.language = value.code2;
- action.mutate(index, { ...item, language: value.code2 });
- }
- }}
- ></Selector>
- );
+ header: "Language",
+ accessorKey: "language",
+ cell: ({ row: { original: item, index } }) => {
+ return <LanguageCell item={item} index={index} />;
},
},
{
- Header: "Subtitles Type",
- accessor: "forced",
- Cell: ({ row: { original: item, index }, value }) => {
- const selectValue = useMemo(() => {
- if (item.forced === "True") {
- return "forced";
- } else if (item.hi === "True") {
- return "hi";
- } else {
- return "normal";
- }
- }, [item.forced, item.hi]);
-
- return (
- <Select
- value={selectValue}
- data={subtitlesTypeOptions}
- onChange={(value) => {
- if (value) {
- action.mutate(index, {
- ...item,
- hi: value === "hi" ? "True" : "False",
- forced: value === "forced" ? "True" : "False",
- });
- }
- }}
- ></Select>
- );
+ header: "Subtitles Type",
+ accessorKey: "forced",
+ cell: ({ row: { original: item, index } }) => {
+ return <SubtitleTypeCell item={item} index={index} />;
},
},
{
- Header: "Exclude If Matching Audio",
- accessor: "audio_exclude",
- Cell: ({ row: { original: item, index }, value }) => {
+ header: "Exclude If Matching Audio",
+ accessorKey: "audio_exclude",
+ cell: ({ row: { original: item, index } }) => {
return (
<Checkbox
- checked={value === "True"}
+ checked={item.audio_exclude === "True"}
onChange={({ currentTarget: { checked } }) => {
action.mutate(index, {
...item,
@@ -225,20 +241,19 @@ const ProfileEditForm: FunctionComponent<Props> = ({
},
{
id: "action",
- accessor: "id",
- Cell: ({ row }) => {
+ cell: ({ row }) => {
return (
<Action
label="Remove"
icon={faTrash}
- color="red"
+ c="red"
onClick={() => action.remove(row.index)}
></Action>
);
},
},
],
- [action, languageOptions],
+ [action, LanguageCell, SubtitleTypeCell],
);
return (
@@ -255,13 +270,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
multiple
chevronPosition="right"
defaultValue={["Languages"]}
- styles={(theme) => ({
- content: {
- [theme.fn.smallerThan("md")]: {
- padding: 0,
- },
- },
- })}
+ className={styles.content}
>
<Accordion.Item value="Languages">
<Stack>
@@ -270,7 +279,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
columns={columns}
data={form.values.items}
></SimpleTable>
- <Button fullWidth color="light" onClick={addItem}>
+ <Button fullWidth onClick={addItem}>
Add Language
</Button>
<Selector