diff --git a/src/components/DesktopCard.tsx b/src/components/DesktopCard.tsx index d307815..fe90a49 100644 --- a/src/components/DesktopCard.tsx +++ b/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()} + onClick={() => setModal()} > diff --git a/src/components/ModalContainer.tsx b/src/components/ModalContainer.tsx index aba4c89..f812998 100644 --- a/src/components/ModalContainer.tsx +++ b/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' >
-
-
+
+
setModal(null)} />
{modal} - +
diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx new file mode 100644 index 0000000..707c99c --- /dev/null +++ b/src/components/SessionCard.tsx @@ -0,0 +1,21 @@ +import { ISession } from "../types/ISession"; + +function SessionCard({ session }: { session: ISession }) { + console.log(session); + return ( +
+
+
+
+

{session.owner.fullname}

+

+ Клиент: {session.client.name} •  + {session.app.name} +

+
+
+
+ ); +} + +export default SessionCard; diff --git a/src/components/modals/EditTable.tsx b/src/components/modals/EditTable.tsx index 4f4f9d5..1df8ba0 100644 --- a/src/components/modals/EditTable.tsx +++ b/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 (
-

Редатирование стола

+

Редатирование стола

-
- setName(e.target.value)} - isError={name.length > 20} - errorMessage='Что-то пошло не так' - /> +
+
+ setTableName(e.target.value)} + isError={tableName.length > 16} + errorMessage='Не больше 16 символов' + /> +

+ Придумайте название до 16 символов, например «Тузик» +

+
+
+ setTableDescription(e.target.value)} + isError={tableDescription.length > 20} + errorMessage='Не больше 20 символов' + /> +

+ Придумайте описание до 20 символов, например «Расположен в офисе» +

+
+
+ 16 || + tableDescription.length > 20 + } + className='flex justify-center' + onClick={() => updateTable()} + > +

Сохранить изменения

+ + setModal(null)} + > +

Отменить

+ +
); diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx index 838c4ba..f05a68c 100644 --- a/src/pages/DashboardPage.tsx +++ b/src/pages/DashboardPage.tsx @@ -4,6 +4,8 @@ import api from "../utils/api"; import { IServer } from "../types/IServer"; import DesktopCard from "../components/DesktopCard"; import Badge from "../components/Badge"; +import { ISession } from "../types/ISession"; +import SessionCard from "../components/SessionCard"; function DashboardPage() { const { data: me } = useQuery({ @@ -18,6 +20,13 @@ function DashboardPage() { refetchInterval: 1000, }); + const { data: sessions } = useQuery({ + queryKey: ["sessions", { limit: 5 }], + queryFn: () => + api.get("sessions", { searchParams: { limit: 5 } }).json(), + enabled: !!me, + }); + // async function logout() { // return await api.get("auth/logout").json(); // } @@ -32,19 +41,8 @@ function DashboardPage() { // } return ( -
-
-
- {/*
-
- logo -
- -
*/} +
+

Интерактивные столы

@@ -57,6 +55,18 @@ function DashboardPage() {
+
+
+

Последние сеансы

+
+ {sessions + ?.filter((session) => session.status === "ended") + .map((session) => ( + + ))} +
+
+
); } diff --git a/src/types/IOwner.ts b/src/types/IOwner.ts new file mode 100644 index 0000000..a8e4222 --- /dev/null +++ b/src/types/IOwner.ts @@ -0,0 +1,3 @@ +export interface IOwner { + fullname: string; +} diff --git a/src/types/ISession.ts b/src/types/ISession.ts index bc64406..15bda42 100644 --- a/src/types/ISession.ts +++ b/src/types/ISession.ts @@ -1,4 +1,5 @@ import { IApp } from "./IApp"; +import { IOwner } from "./IOwner"; import { IServer } from "./IServer"; import { IUser } from "./IUser"; @@ -11,5 +12,6 @@ export interface ISession { status: "starting" | "started" | "restarted" | "ending" | "ended"; server: IServer; client: IUser; - app: IApp + app: IApp; + owner: IOwner; } diff --git a/src/types/IUser.ts b/src/types/IUser.ts index ad0b0c4..1a641e3 100644 --- a/src/types/IUser.ts +++ b/src/types/IUser.ts @@ -3,7 +3,7 @@ import { ICompany } from "./ICompany"; export interface IUser { id: string; email: string; - fullname: string; + name: string; companyId: string; company?: ICompany; }