112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
import { faAdd } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import React, { useCallback, useMemo, useState } from "react";
|
|
import { CustomField } from "../../modules/manager/customfields/services/customFieldsService";
|
|
import { Paginated } from "../../services/Paginated";
|
|
import { GeneralIdRef } from "../../utils/GeneralIdRef";
|
|
import CustomFieldPicker from "../pickers/CustomFieldPicker";
|
|
import Column from "./columns";
|
|
import Table from "./Table";
|
|
import Button, { ButtonType } from "./Button";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Namespaces } from "../../i18n/i18n";
|
|
|
|
export type CustomFieldEditorAdd = (newField: CustomField) => void;
|
|
export type CustomFieldEditorDelete = (keyValue: any) => void;
|
|
|
|
interface CustomFieldsEditorProps {
|
|
name: string;
|
|
label: string;
|
|
error?: string;
|
|
value: CustomField[];
|
|
exclude: CustomField[];
|
|
onAdd?: CustomFieldEditorAdd;
|
|
onDelete?: CustomFieldEditorDelete;
|
|
}
|
|
|
|
const CustomFieldsEditor: React.FC<CustomFieldsEditorProps> = ({
|
|
value,
|
|
exclude,
|
|
label,
|
|
onAdd,
|
|
onDelete,
|
|
}) => {
|
|
const { t } = useTranslation<typeof Namespaces.Common>();
|
|
const [id, setId] = useState<GeneralIdRef | undefined>(undefined);
|
|
const [displayName, setDisplayName] = useState<string | undefined>(undefined);
|
|
|
|
const columns: Column<CustomField>[] = useMemo(
|
|
() => [{ key: "name", label: t("Name"), order: "asc" }],
|
|
[],
|
|
);
|
|
|
|
const paginated: Paginated<CustomField> = useMemo(
|
|
() => ({
|
|
count: 0,
|
|
page: 1,
|
|
pageSize: 10,
|
|
totalPages: 0,
|
|
data: value,
|
|
}),
|
|
[value],
|
|
);
|
|
|
|
const handleAdd = useCallback(() => {
|
|
if (!onAdd || !id) return;
|
|
|
|
const newField: CustomField = {
|
|
id: id.id ?? BigInt(-1),
|
|
name: String(displayName),
|
|
fieldType: "",
|
|
defaultValue: "",
|
|
minEntries: 1,
|
|
guid: id.guid,
|
|
};
|
|
|
|
onAdd(newField);
|
|
|
|
setId(undefined);
|
|
setDisplayName(undefined);
|
|
}, [onAdd, id, displayName]);
|
|
|
|
const handleChange = useCallback(
|
|
(name: string, value: GeneralIdRef, displayValue: string) => {
|
|
setId(value);
|
|
setDisplayName(displayValue);
|
|
},
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
{label}
|
|
<Table
|
|
data={paginated}
|
|
keyName="id"
|
|
columns={columns}
|
|
onDelete={onDelete}
|
|
/>
|
|
|
|
<div>
|
|
<CustomFieldPicker
|
|
name="customField"
|
|
label="Add"
|
|
exclude={exclude}
|
|
value={undefined}
|
|
onChange={handleChange}
|
|
/>
|
|
|
|
<Button
|
|
buttonType={ButtonType.primary}
|
|
onClick={handleAdd}
|
|
disabled={id === undefined}
|
|
>
|
|
<FontAwesomeIcon icon={faAdd} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CustomFieldsEditor;
|