45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { useState } from "react";
|
||
import {InputColor} from "@/components/Input/InputColor";
|
||
import {Input} from "@/components/Input/Input";
|
||
import Button from "@/components/Button/Button";
|
||
import {add, update} from "@/api/carColors";
|
||
import {useModalContext} from "@/components/Modal/ModalContext";
|
||
import {useCarColorContext} from "@/api/context/CarColor";
|
||
|
||
export default function CarColor({ initialData }: any) {
|
||
const { setContentModal } = useModalContext();
|
||
const { fetchData } = useCarColorContext();
|
||
|
||
const [formData, setFormData] = useState({
|
||
id: initialData?.id || null,
|
||
name: initialData?.name || "",
|
||
hexCode: initialData?.hexCode || "#000000",
|
||
});
|
||
|
||
const handleChange = (e: any) => {
|
||
const { name, value } = e.target;
|
||
setFormData({
|
||
...formData,
|
||
[name]: value
|
||
});
|
||
};
|
||
|
||
const handleSubmit = async () => {
|
||
if (formData.id === null) {
|
||
await add(formData);
|
||
} else {
|
||
await update(formData);
|
||
}
|
||
fetchData();
|
||
setContentModal(null);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Input value={formData.name} onChange={handleChange} name="name">Наименование</Input>
|
||
<InputColor onChange={handleChange} name="hexCode" />
|
||
<Button onClickAction={handleSubmit}>Сохранить</Button>
|
||
</>
|
||
);
|
||
}
|