updata adaptiv and pages

Rodoro · Oct 4, 2024 · 74fceff · 74fceff
1 parent 0c0894d
commit 74fceff
Show file tree

Hide file tree

Showing 13 changed files with 245 additions and 144 deletions.
diff --git a/src/app/admin/(sections)/batches/page.tsx b/src/app/admin/(sections)/batches/page.tsx
@@ -7,6 +7,11 @@ import { Batch, Game } from '@/types/admin.interface';
 import Button2 from '@/components/interface/admin/Button2';
 import { useRouter } from 'next/navigation';
 import { axiosWithAuthAdmin } from '@/api/intreceptors';
+import Delete from '@/components/interface/admin/Delete';
+import Setting from '@/components/interface/admin/Settings';
+import Button from '@/components/interface/Button'
+import { authService } from '@/services/auth/auth.services';
+import { FaDoorOpen } from "react-icons/fa6";
 
 const BatchesPage = () => {
   const [batches, setBatches] = useState<Batch[]>([]);
@@ -30,38 +35,45 @@ const BatchesPage = () => {
         setGames(res2.data)
         setLoading(false);
       }
-    };
+    };                                     
     fetchData();
   }, [])
 
+  const deleteBatche = React.useCallback(
+    (id: number) => async () => {
+      await axiosWithAuthAdmin.get('/admin/batches/delete/' + id).then(() => {
+        setTimeout(() => {
+          setBatches((prevRows) => prevRows.filter((row) => row.id !== id));
+        });
+      });
+    },
+    [],
+  );    
 
   const duplicateBatche = React.useCallback(
     (index: number) => async () => {
-      // Получаем информацию по заданному индексу
+
       const res = await axiosWithAuthAdmin.get('/admin/batches/get/' + index);
       const data: Batch = res.data;
 
-      // Извлекаем нужные поля, чтобы создать новый Batch
       const { gameId, title, languages, sort, game } = data;
 
-      // Создаем новый объект, основываясь на текущих данных
-      const filteredLanguages = languages.map(({ id, ...language }) => language); // Убираем id языков
+      const filteredLanguages = languages.map(({ id, ...language }) => language); 
       const result: Batch = {
-        id: 0, // Устанавливаем временный id, который будет заменен сервером
+        id: 0, 
         title,
         gameId,
         languages: filteredLanguages,
-        game, // Передаем объект игры
-        sort, // Сохраняем сортировку
+        game, 
+        sort, 
       };
 
-      // Отправляем новый объект на сервер для создания
       const res2 = await axiosWithAuthAdmin.post('/admin/batches/create', result);
 
-      // Обновляем локальное состояние с новым объектом Batch и новым id
+
       setBatches((prevRows) => [
         ...prevRows,
-        { ...result, id: res2.data.id }, // Используем новый id, возвращаемый сервером
+        { ...result, id: res2.data.id }, 
       ]);
     },
     [],
@@ -92,17 +104,22 @@ const BatchesPage = () => {
     { key: "id" as keyof Game, label: "ID" },
     { key: "name" as keyof Game, label: "Game" },
     {
-      key: "sort" as unknown as keyof Game, 
-      label: "Sort",
-      render: () => 1, 
+      key: "sort" as keyof Batch, 
+      label: "Sort"
     },
   ];
 
   return (
-    <div style={{ height: games.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-32 lg:ml-[270px] md:mt-8 mb-8">
-      <Button2 className="px-2 mb-6" onClick={() => router.push("/admin/batches/create")}>+ Создать игру</Button2>
+    <div style={{ height: games.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-60 lg:ml-[270px] max-md:ml-[0px] md:mt-8 mb-8 ">
+      <div className = "md:flex md:justify-between max-md:w-full">
+        <Button2 className="px-2 mb-6 max-md:w-full" onClick={() => router.push("/admin/batches/create")}>+ Create Batch</Button2>
+        <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
+          <p className='mr-[10px]'>Exit</p>
+          <FaDoorOpen className=''/>
+        </Button>
+      </div>
       <DataGrid
-        data={games} // Using games array as the data source
+        data={games} 
         columns={columns}
       />
     </div>

diff --git a/src/app/admin/(sections)/games/page.tsx b/src/app/admin/(sections)/games/page.tsx
@@ -3,32 +3,35 @@
 "use client"
 import React, { useEffect, useState } from 'react'
 import DataGrid from '@/containers/admin/DataGrid';
-import { Game } from '@/types/admin.interface';
+import { Game, Batch } from '@/types/admin.interface';
 import {
     GridRowId,
 } from '@mui/x-data-grid';
 import { useRouter } from 'next/navigation';
 import { axiosWithAuthAdmin } from '@/api/intreceptors';
-
+import Button from '@/components/interface/Button'
+import { authService } from '@/services/auth/auth.services';
+import { FaDoorOpen } from "react-icons/fa6";
 
 const GamesPage = () => {
     const [games, setGames] = useState<Game[]>([]);
+    const [batches, setBatches] = useState<Batch[]>([]);
     const [loading, setLoading] = useState(true);
     const router = useRouter();
 
     useEffect(() => {
+        console.log(2)
         const fetchData = async () => {
-            try {
-                const res = await axiosWithAuthAdmin.get('/admin/games/get-all');
-                setGames(res.data);
-            } catch (error) {
-                console.error("Error fetching games:", error);
-            } finally {
-                setLoading(false);
+            if (loading) {
+            const res2 = await axiosWithAuthAdmin.get('/admin/games/get-all')
+            setGames(res2.data)
+            console.log(res2.data)
+            setLoading(false);
             }
         };
         fetchData();
-    }, []);
+        }, [])
+
 
     const editGame = React.useCallback(
         (id: GridRowId) => () => {
@@ -37,19 +40,35 @@ const GamesPage = () => {
         [],
     );
 
+    const modifiedGames = games.map(game => ({
+        ...game,
+        iconUrl: game.iconUrl ? "yes" : "no"
+    }))
+
     const columns = [
         { key: "id" as keyof Game, label: "ID" },
-        { key: "name" as keyof Game, label: "Game" },
+        { key: "name" as keyof Game, label: "Name" },
         { key: "steamGameID" as keyof Game, label: "Steam Game ID" },
-        { key: "iconUrl" as keyof Game, label: "Icon URL" },
-    ];
+        { key: "isMain" as keyof Game, label: "Is Main" },
+        {
+            key: "iconUrl" as keyof Game,
+            label: "Icon",
+            renderCell: (params: any) => (params.value ? "да" : "нет"),
+        },
+    ]
 
     return (
         <div style={{ height: loading ? 400 : games.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
-                <DataGrid
-                    data={games} 
-                    columns={columns}
-                />
+            <div className = "flex justify-end">
+                <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
+                    <p className='mr-[10px]'>Exit</p>
+                    <FaDoorOpen className=''/>
+                </Button>
+            </div>
+            <DataGrid
+                data={modifiedGames} 
+                columns={columns}
+            />
         </div>
     )
 }

diff --git a/src/app/admin/(sections)/items/page.tsx b/src/app/admin/(sections)/items/page.tsx
@@ -5,7 +5,9 @@ import DataGrid from '@/containers/admin/DataGrid';
 import { Item } from '@/types/admin.interface';
 import { useRouter } from 'next/navigation';
 import { axiosWithAuthAdmin } from '@/api/intreceptors';
-
+import Button from '@/components/interface/Button'
+import { authService } from '@/services/auth/auth.services';
+import { FaDoorOpen } from "react-icons/fa6";
 
 const ItemsPage = () => {
     const [items, setItems] = useState<Item[]>([]);
@@ -16,6 +18,7 @@ const ItemsPage = () => {
         const fetchData = async () => {
             try {
                 const res = await axiosWithAuthAdmin.get('/admin/items/get-all');
+                console.log("Fetched items:", res.data); // Выводим данные
                 setItems(res.data);
             } catch (error) {
                 console.error("Ошибка при получении предметов:", error);
@@ -34,24 +37,30 @@ const ItemsPage = () => {
         { key: "id" as keyof Item, label: "ID" },
         { key: "game" as keyof Item, label: "Game" },
         { key: "title" as keyof Item, label: "Title" },
-        { key: "imageUrl" as keyof Item, label: "Image URL" },
-        { key: "gameId" as keyof Item, label: "Game ID" },
-        { key: "gameTitleRu" as keyof Item, label: "Game Title (RU)" },
-        { key: "gameTitleEn" as keyof Item, label: "Game Title (EN)" },
-        { key: "price" as keyof Item, label: "Price" },
-        { key: "rarity" as keyof Item, label: "Rarity" },
-        { key: "quality" as keyof Item, label: "Quality" },
         {
-            key: "action" as keyof Item,
-            label: "Action",
-            renderCell: (params: any) => (
-                <button onClick={viewItem(params.row.id)}>View</button>
+            key: "imageUrl" as keyof Item,
+            label: "Image",
+            render: (record: Item) => (
+                <img
+                    src={record.imageUrl.replace(/ /g, '%20')} // Заменяем пробелы на %20
+                    alt={record.title}
+                    style={{ width: 50, height: 50 }}
+                    onError={(e) => { e.currentTarget.src = 'fallback-image-url'; }} // Замените на URL изображения по умолчанию
+                />
             ),
         },
+        { key: "price" as keyof Item, label: "Price" },
+        { key: "rarity" as keyof Item, label: "Rarity" },
     ];
 
     return (
         <div style={{ height: loading ? 400 : items.length === 0 ? 400 : 'auto', width: '100%' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
+            <div className = "flex justify-end">
+                <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
+                    <p className='mr-[10px]'>Exit</p>
+                    <FaDoorOpen className=''/>
+                </Button>
+            </div>
             <DataGrid
                 data={items}
                 columns={columns}

diff --git a/src/app/admin/(sections)/loot-cases/page.tsx b/src/app/admin/(sections)/loot-cases/page.tsx
@@ -82,21 +82,22 @@ const LootsPage = () => {
 const columns = [
     { key: "id" as keyof LootCases, label: "ID" },
     { key: "game" as keyof LootCases, label: "Game", render: (record: LootCases) => record.game.title }, 
-    { key: "locales" as keyof LootCases, label: "Locales", render: (record: LootCases) => record.locales.join(", ") }, 
     { key: "title" as keyof LootCases, label: "Title" },
     { key: "price" as keyof LootCases, label: "Price", render: (record: LootCases) => `$${record.price.toFixed(2)}` },
     { key: "netPrice" as keyof LootCases, label: "Net Price", render: (record: LootCases) => `$${record.netPrice.toFixed(2)}` }, 
-    { key: "isVisible" as keyof LootCases, label: "Visible", render: (record: LootCases) => (record.isVisible ? "Yes" : "No") },
-    { key: "image" as keyof LootCases, label: "Image", render: (record: LootCases) => <img src={record.image} alt={record.title} style={{ width: 50, height: 50 }} /> }, 
-    { key: "imageHover" as keyof LootCases, label: "Image Hover", render: (record: LootCases) => <img src={record.imageHover} alt={record.title} style={{ width: 50, height: 50 }} /> }, 
+    { key: "isVisible" as keyof LootCases, label: "Is Visible"}, 
 ];
     return (
         <div style={{ height: loading ? 400 : loots.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
-            <div className="flex flex-row justify-between m-6 mt-20 md:mt-8 align-middle">
-                <Button2 className="px-2 mb-6 w-[177px] h-[56px]" onClick={() => router.push("/admin/loot-cases/create")}>+ Создать лут-кейсы</Button2>
-            </div>
+        <div className = "flex justify-between">
+            <Button2 className="px-2 mb-6" onClick={() => router.push("/admin/batches/create")}>+ Create Loot case</Button2>
+            <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
+                <p className='mr-[10px]'>Exit</p>
+                <FaDoorOpen className=''/>
+            </Button>
+        </div>
             <DataGrid
-                data={loots}
+                data={loots}  
                 columns={columns}
             />
         </div>

diff --git a/src/app/admin/(sections)/staff/page.tsx b/src/app/admin/(sections)/staff/page.tsx
@@ -4,7 +4,9 @@ import React, { useEffect, useState } from 'react'
 import DataGrid from '@/containers/admin/DataGrid';
 import { Staff } from '@/types/admin.interface';
 import { axiosWithAuthAdmin } from '@/api/intreceptors';
-
+import Button from '@/components/interface/Button'
+import { authService } from '@/services/auth/auth.services';
+import { FaDoorOpen } from "react-icons/fa6";
 
 
 const StafsPage = () => {
@@ -33,14 +35,16 @@ const StafsPage = () => {
         { key: 'email' as keyof Staff, label: 'Email' },
         { key: 'createdAt' as keyof Staff, label: 'Дата создания' },
         { key: 'updatedAt' as keyof Staff, label: 'Дата обновления' },
-        {
-            key: 'action' as keyof Staff, 
-            label: 'Действия'
-        } as const, 
     ];
 
     return (
         <div style={{ height: loading ? 400 : stafs.length === 0 ? 400 : 'auto' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
+            <div className = "flex justify-end">
+                <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
+                    <p className='mr-[10px]'>Exit</p>
+                    <FaDoorOpen className=''/>
+                </Button>
+            </div>
             <DataGrid
                 data={stafs}
                 columns={columns}

diff --git a/src/app/admin/(sections)/users/page.tsx b/src/app/admin/(sections)/users/page.tsx
@@ -30,19 +30,21 @@ const UsersPage = () => {
 
     const columns = [
         { key: 'id' as keyof User, label: 'ID' },
+        { key: 'username' as keyof User, label: 'Name' },
         { key: 'uUid' as keyof User, label: 'UUID' },
-        { key: 'username' as keyof User, label: 'Имя пользователя' },
         { key: 'steamId' as keyof User, label: 'Steam ID' },
-        { key: 'steamCreated' as keyof User, label: 'Создан на Steam' },
-        { key: 'link' as keyof User, label: 'Ссылка' },
-        {
-            key: 'action' as keyof User,
-            label: 'Действия',
-        },
+        { key: 'steamCreated' as keyof User, label: 'Steam Created' },
+        { key: 'link' as keyof User, label: 'Link' },
     ];
 
     return (
         <div style={{ height: users.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
+            <div className = "flex justify-end">
+                <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
+                    <p className='mr-[10px]'>Exit</p>
+                    <FaDoorOpen className=''/>
+                </Button>
+            </div>
             <DataGrid
                 data={users}
                 columns={columns}

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
@@ -42,10 +42,12 @@ export default function DashboardLayout({
 
     return (
         <section>
-            <div className='w-[511px] h-[511px] rounded-full bg-[#821FFF] absolute z-[-1] top-[585px] left-[1181px] blur-[130px] opacity-25'></div>
-            <div className='w-[511px] h-[511px] rounded-full bg-[#C51FFF] absolute z-[-1] top-[-114px] left-[-76px] blur-[130px] opacity-25'></div>
+            <div className='fixed inset-0 pointer-events-none'>
+                <div className='w-[511px] h-[511px] rounded-full bg-[#821FFF] absolute z-[-1] top-[585px] left-[1181px] blur-[130px] opacity-25'></div>
+                <div className='w-[511px] h-[511px] rounded-full bg-[#C51FFF] absolute z-[-1] top-[-114px] left-[-76px] blur-[130px] opacity-25'></div>
+            </div>
             <div>
-                <Navbar isVisible={isNavVisible} onClose={toggleNavbar} />
+                <Navbar isVisible={isNavVisible} onClose={toggleNavbar} className = 'max-lg:w-[240px]'/>
                 <div>
                     <div className="flex flex-row md:justify-end mt-[40px]">
                         <div className='flex justify-between w-full'>
@@ -58,10 +60,6 @@ export default function DashboardLayout({
                                 </button>
                             </div>
                         </div>
-                        <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
-                            <p className='mr-[10px]'>Exit</p>
-                            <FaDoorOpen className=''/>
-                        </Button>
                     </div>
                     {children}
                 </div>

diff --git a/src/components/interface/admin/AddRow.tsx b/src/components/interface/admin/AddRow.tsx
diff --git a/src/components/interface/admin/Button2.tsx b/src/components/interface/admin/Button2.tsx
@@ -12,7 +12,7 @@ const Button2 = React.forwardRef<HTMLButtonElement, ButtonProps>(
                     border:'2px solid transparent',
                     background: 'linear-gradient(#11162E, #11162E) padding-box, linear-gradient(to right, #1F79FF, #1FA1FF, #6A12FA, #B8A6FF ) border-box',
                 }}
-                className={`max-w-[177px] min-h-[56px] py-[12px] px-[9px] rounded-2xl bg-[#11162E4D]  text-[#F9FAFB] hover:bg-[#11162E] hover:shadow-[4px_4px_34px_0_rgba(139,50,252,0.2)] ${className}`}
+                className={`transition-all duration-300 ease-in-out max-w-full min-h-[56px] py-[12px] px-[9px] rounded-2xl bg-[#11162E4D]  text-[#F9FAFB] hover:bg-[#11162E] hover:shadow-[4px_4px_34px_0_rgba(139,50,252,0.2)] ${className}`}
                 {...props}
             >
                 {children}