feat: integrate SessionCard component and enhance EditTable modal for improved session management

src/components/DesktopCard.tsx

@@ -9,6 +9,7 @@ import CogIcon from "./icons/CogIcon";
 import ChevronLeftIcon from "./icons/ChevronLeftIcon";
 import PlusIcon from "./icons/PlusIcon";
 import EditTable from "./modals/EditTable";
+
 interface IDesktopCardProps {
   server: IServer;
 }
@@ -51,7 +52,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
           variant='secondary'
           size='medium'
           className='absolute top-[0.347vw] right-[0.347vw] cursor-pointer flex items-center justify-center'
-          onClick={() => setModal(<EditTable />)}
+          onClick={() => setModal(<EditTable table={server} />)}
         >
           <span className='text-[#7D7D7D] w-[0.972vw] h-[0.972vw]'>
             <CogIcon />

src/components/ModalContainer.tsx

@@ -3,8 +3,8 @@ import { useEffect, useRef } from "react";
 import useModalStore from "../stores/useModalStore";
 import { AnimatePresence, motion } from "motion/react";
 import CloseIcon from "./icons/CloseIcon";
-import Button from "./Button";
 import { clsx as cn } from "clsx";
+import NewButton from "./NewButton";
 
 function ModalContainer() {
   const { modal, setModal, position } = useModalStore();
@@ -45,7 +45,7 @@ function ModalContainer() {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          className="h-full"
+          className='h-full'
         >
           <div
             ref={popoverRef}
@@ -55,30 +55,30 @@ function ModalContainer() {
               position === "right" && "items-end"
             )}
           >
-            <div className="max-h-full">
-              <div ref={divRef} className="p-[0.972vw]">
+            <div className='max-h-full'>
+              <div ref={divRef} className='p-[0.972vw]'>
                 <div
                   ref={backdropRef}
-                  className="absolute inset-0 cursor-pointer"
+                  className='absolute inset-0 cursor-pointer'
                   onClick={() => setModal(null)}
                 />
                 <div
                   ref={containerRef}
-                  className="relative w-full"
+                  className='relative w-full'
                   // style={{
                   //   height: `calc(${backdropRef.current?.clientHeight}px - 0.972vw * 2)`,
                   // }}
                 >
                   {modal}
-                  <Button
-                    onlyIcon
-                    className="absolute top-[1.667vw] right-[1.667vw] p-[0.556vw] !rounded-full bg-[#F9F9F9]"
+                  <NewButton
+                    variant='secondary'
+                    className='absolute top-[1.389vw] right-[1.389vw] p-[0.556vw]'
                     onClick={() => setModal(null)}
                   >
-                    <span className="w-[1.389vw] h-[1.389vw] text-black">
+                    <span className='w-[0.972vw] h-[0.972vw] text-[#7D7D7D]'>
                       <CloseIcon />
                     </span>
-                  </Button>
+                  </NewButton>
                 </div>
               </div>
             </div>

src/components/SessionCard.tsx

@@ -0,0 +1,21 @@
+import { ISession } from "../types/ISession";
+
+function SessionCard({ session }: { session: ISession }) {
+  console.log(session);
+  return (
+    <div className='w-full h-[4.444vw] border-1 border-l-0 border-r-0 border-t-0 border-b-[#F6F6F6] flex py-[0.278vw] items-center gap-[0.556vw] cursor-pointer group'>
+      <div className='rounded-xl w-full h-full flex items-center gap-[0.556vw] group-hover:bg-[#F6F6F6] transition-colors duration-200'>
+        <div className='size-[2.5vw] bg-[#F6F6F6] rounded-full'></div>
+        <div className='flex flex-col w-full gap-[0.278vw]'>
+          <p className='button-m font-medium'>{session.owner.fullname}</p>
+          <p className='caption-s font-medium text-[#7D7D7D]'>
+            Клиент: {session.client.name}&nbsp;•&nbsp;
+            {session.app.name}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SessionCard;

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>
   );