inmake/graff-mate-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
c00b3r
2025-06-03 18:33:18 +05:00
parent e38f4a7fc7
commit a7f2b0c32d
8 changed files with 137 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DesktopCard.tsx
+2 -1
View File
@@ -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
+11 -11
View File
@@ -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
+21
View File
@@ -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
+73 -12
View File
@@ -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>
);
src/pages/DashboardPage.tsx
+23 -13
View File
@@ -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<ISession[]>(),
enabled: !!me,
});
// async function logout() {
// return await api.get("auth/logout").json();
// }
@@ -32,19 +41,8 @@ function DashboardPage() {
// }
return (
<div className='flex gap-[0.833vw] min-h-dvh'>
<div className='w-[3.333vw] flex flex-col justify-between'></div>
<div className='bg-white w-full flex justify-between'>
{/* <div className="w-[13.889vw] space-y-[1.667vw]">
<div className="px-[1.111vw] py-[0.556vw]">
<img
src="/logo-mate.svg"
alt="logo"
className="w-[4.569vw] h-[1.944vw]"
/>
</div>
<Sidebar />
</div> */}
<div className='flex flex-col gap-[5vw] min-h-dvh'>
<div className='w-full flex justify-between'>
<div className='w-[42.5vw] flex flex-col gap-[1.667vw]'>
<div className='flex items-center gap-[0.833vw]'>
<h1 className='title-l font-[500] '>Интерактивные столы</h1>
@@ -57,6 +55,18 @@ function DashboardPage() {
</div>
</div>
</div>
<div className='w-full'>
<div className='flex flex-col gap-[1.667vw]'>
<h1 className='title-l font-[500] '>Последние сеансы</h1>
<div className='flex flex-col gap-[0.278vw]'>
{sessions
?.filter((session) => session.status === "ended")
.map((session) => (
<SessionCard key={session.id} session={session} />
))}
</div>
</div>
</div>
</div>
);
}
src/types/IOwner.ts
+3
View File
@@ -0,0 +1,3 @@
export interface IOwner {
fullname: string;
}
src/types/ISession.ts
+3 -1
View File
@@ -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;
}
src/types/IUser.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { ICompany } from "./ICompany";
export interface IUser {
id: string;
email: string;
fullname: string;
name: string;
companyId: string;
company?: ICompany;
}