Merge branch 'main' of http://192.168.1.163:3000/inmake/graff-mate-client

src/components/modals/EditTable.tsx

@@ -1,21 +1,82 @@
 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() {
-  const [name, setName] = useState("");
+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'>Редатирование стола</h3>
+      <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]'>
-        <NewInput
-          placeholder='Название стола*'
-          className='w-full h-[3.889vw]'
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          isError={name.length > 20}
-          errorMessage='Что-то пошло не так'
-        />
+      <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>
   );