85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import React, { FC } from "react";
|
|
import { Stack, TextInput } from "@mantine/core";
|
|
import { useForm } from "@mantine/form";
|
|
import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/components/Footer";
|
|
import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
|
|
import StatusSelect from "@/components/selects/StatusSelect/StatusSelect";
|
|
import FormFlexRow from "@/components/ui/FormFlexRow/FormFlexRow";
|
|
import { BoardSchema, DealSchema, StatusSchema } from "@/lib/client";
|
|
import { utcDateTimeToLocalString } from "@/utils/datetime";
|
|
|
|
type Props = {
|
|
value: DealSchema;
|
|
onChange: (deal: DealSchema) => void;
|
|
onDelete: (deal: DealSchema) => void;
|
|
};
|
|
|
|
export type DealForm = Omit<DealSchema, "board" | "status"> & {
|
|
board?: BoardSchema | undefined;
|
|
status?: StatusSchema | undefined;
|
|
};
|
|
|
|
const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
|
|
const form = useForm<DealForm>({
|
|
initialValues: value,
|
|
validate: {
|
|
name: value => !value && "Введите название",
|
|
board: value => !value && "Выберите доску",
|
|
status: value => !value && "Выберите статус",
|
|
},
|
|
});
|
|
|
|
const onSubmit = (values: DealForm) => {
|
|
form.resetDirty();
|
|
onChange({
|
|
...values,
|
|
board: values.board!,
|
|
status: values.status!,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={form.onSubmit(onSubmit)}>
|
|
<Stack p={"md"}>
|
|
<FormFlexRow>
|
|
<TextInput
|
|
label={"Название"}
|
|
{...form.getInputProps("name")}
|
|
flex={1}
|
|
/>
|
|
<TextInput
|
|
label={"Дата создания"}
|
|
value={utcDateTimeToLocalString(value.createdAt)}
|
|
readOnly
|
|
flex={1}
|
|
/>
|
|
</FormFlexRow>
|
|
<FormFlexRow>
|
|
<BoardSelect
|
|
label={"Доска"}
|
|
{...form.getInputProps("board")}
|
|
onChange={board => {
|
|
form.setFieldValue("board", board ?? undefined);
|
|
form.setFieldValue("status", undefined);
|
|
}}
|
|
projectId={value.board.projectId}
|
|
flex={1}
|
|
/>
|
|
<StatusSelect
|
|
label={"Статус"}
|
|
{...form.getInputProps("status")}
|
|
boardId={form.values.board?.id}
|
|
flex={1}
|
|
/>
|
|
</FormFlexRow>
|
|
<Footer
|
|
form={form}
|
|
onDelete={() => onDelete(value)}
|
|
/>
|
|
</Stack>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default GeneralTab;
|