86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
import { useState } from "react";
|
||
import NewInput from "../NewInput";
|
||
import NewButton from "../NewButton";
|
||
import useModalStore from "../../stores/useModalStore";
|
||
import { IServer } from "../../types/IServer";
|
||
import { useQueryClient } from "@tanstack/react-query";
|
||
import { useMutation } from "@tanstack/react-query";
|
||
import api from "../../utils/api";
|
||
|
||
function EditTable({ table }: { table: IServer }) {
|
||
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-4xl 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-4xl 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 символов'
|
||
/>
|
||
<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 символов'
|
||
/>
|
||
<p className='caption-s text-[#BDBDBD] font-medium w-full tracking-[-0.02em]'>
|
||
Придумайте описание до 20 символов, например «Расположен в офисе»
|
||
</p>
|
||
</div>
|
||
<div className='flex flex-col gap-[0.556vw]'>
|
||
<NewButton
|
||
variant='cta'
|
||
disabled={
|
||
tableName.length < 1 ||
|
||
tableName.length > 16 ||
|
||
tableDescription.length > 20
|
||
}
|
||
className='flex justify-center'
|
||
onClick={() => updateTable()}
|
||
>
|
||
<p>Сохранить изменения</p>
|
||
</NewButton>
|
||
<NewButton
|
||
variant='primary'
|
||
className='flex justify-center'
|
||
onClick={() => setModal(null)}
|
||
>
|
||
<p>Отменить</p>
|
||
</NewButton>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default EditTable;
|