93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
import { useState } from "react";
|
||
import NewInput from "../NewInput";
|
||
import Button from "../Button";
|
||
import useModalStore from "../../stores/useModalStore";
|
||
import { Server } from "../../types/Server";
|
||
import { useQueryClient } from "@tanstack/react-query";
|
||
import { useMutation } from "@tanstack/react-query";
|
||
import api from "../../utils/api";
|
||
|
||
function EditTable({ table }: { table: Server }) {
|
||
const [tableName, setTableName] = useState(table.name);
|
||
const [tableDescription, setTableDescription] = useState(table.location);
|
||
const { setModal } = useModalStore();
|
||
const queryClient = useQueryClient();
|
||
|
||
const { mutate: updateTable } = useMutation({
|
||
mutationFn: () => {
|
||
return api.put(`servers/${table.id}`, {
|
||
json: {
|
||
name: tableName,
|
||
location: tableDescription,
|
||
},
|
||
});
|
||
},
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ["servers"] });
|
||
setModal(null);
|
||
},
|
||
});
|
||
|
||
return (
|
||
<div className="bg-[#F0F0F0] rounded-[2.222vw] w-[25vw] flex flex-col justify-center items-center">
|
||
<h3 className="title-s font-medium py-[1.806vw]">Редактирование стола</h3>
|
||
<div className="bg-[url(/images/Table.png)] bg-no-repeat bg-contain bg-center w-full h-[6.944vw]"></div>
|
||
<div className="bg-[#FFFFFF] w-full rounded-[2.222vw] p-[1.389vw] flex flex-col gap-[0.833vw]">
|
||
<div className="space-y-[0.556vw]">
|
||
<NewInput
|
||
placeholder="Название стола*"
|
||
value={tableName}
|
||
onChange={(e) => setTableName(e.target.value)}
|
||
isError={tableName.length > 16}
|
||
errorMessage="Не больше 16 символов"
|
||
/>
|
||
{tableName.length <= 16 && (
|
||
<p className="caption-s text-[#BDBDBD] font-medium w-full tracking-[-0.02em]">
|
||
Придумайте название до 16 символов, например «Тузик»
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="space-y-[0.556vw]">
|
||
<NewInput
|
||
placeholder="Описание"
|
||
value={tableDescription}
|
||
onChange={(e) => setTableDescription(e.target.value)}
|
||
isError={tableDescription.length > 20}
|
||
errorMessage="Не больше 20 символов"
|
||
/>
|
||
{tableDescription.length <= 20 && (
|
||
<p className="caption-s text-[#BDBDBD] font-medium w-full tracking-[-0.02em]">
|
||
Придумайте описание до 20 символов, например «Расположен в офисе»
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-col gap-[0.556vw]">
|
||
<Button
|
||
variant="cta"
|
||
size="large"
|
||
disabled={
|
||
tableName.length < 1 ||
|
||
tableName.length > 16 ||
|
||
tableDescription.length > 20
|
||
}
|
||
className="flex justify-center"
|
||
onClick={() => updateTable()}
|
||
>
|
||
<p>Сохранить изменения</p>
|
||
</Button>
|
||
<Button
|
||
variant="primary"
|
||
size="large"
|
||
className="flex justify-center"
|
||
onClick={() => setModal(null)}
|
||
>
|
||
<p>Отменить</p>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default EditTable;
|