update DataGrid and components

Rodoro · Sep 29, 2024 · 1c44217 · 1c44217
1 parent 551fb87
commit 1c44217
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 47 deletions.
diff --git a/src/app/admin/(sections)/batches/page.tsx b/src/app/admin/(sections)/batches/page.tsx
@@ -2,16 +2,22 @@
 /* eslint-disable react/jsx-key */
 "use client"
 import React, { useEffect, useState } from 'react'
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import Box from '@mui/material/Box';
 import axios from 'axios';
 import { Batch, Game } from '@/types/admin.interface';
 import {
 
+  GridActionsCellItem,
   GridRowId,
 } from '@mui/x-data-grid';
-import Button2 from '@/components/interface/admin/Button2';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FileCopyIcon from '@mui/icons-material/FileCopy';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import SettingsIcon from '@mui/icons-material/Settings';
+import Button from '@/components/interface/Button';
 import { useRouter } from 'next/navigation';
 import { axiosWithAuthAdmin } from '@/api/intreceptors';
-import DataGrid from '@/containers/admin/DataGrid';
 
 const BatchesPage = () => {
   const [batches, setBatches] = useState<Batch[]>([]);
@@ -92,16 +98,86 @@ const BatchesPage = () => {
     }
   }
 
-
+  const columns: GridColDef[] = [
+    { field: 'id', headerName: 'ID', flex: 50 },
+    {
+      field: 'gameId',
+      headerName: 'Game',
+      flex: 50,
+      valueGetter: searchNameById,
+    },
+    {
+      field: 'title',
+      headerName: 'Name',
+      flex: 200,
+    },
+    {
+      field: 'sort',
+      headerName: 'Sort',
+      flex: 50,
+    },
+    {
+      field: 'actions',
+      type: 'actions',
+      resizable: false,
+      cellClassName: 'actions',
+      getActions: (params: any) => [
+        <GridActionsCellItem
+          icon={<DeleteIcon />}
+          label="Delete"
+          onClick={deleteBatche(params.id)}
+        />,
+        <GridActionsCellItem
+          icon={<FileCopyIcon />}
+          label="Duplicate"
+          onClick={duplicateBatche(params.id)}
+          showInMenu
+        />,
+        <GridActionsCellItem
+          icon={<VisibilityIcon />}
+          label="View"
+          onClick={viewBatche(params.id)}
+          showInMenu
+        />,
+        <GridActionsCellItem
+          icon={<SettingsIcon />}
+          label="Edit"
+          onClick={editBatche(params.id)}
+        />,
+      ],
+    },
+  ];
 
   return (
-    <div style={{ height: batches.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8 ">
+    <Box style={{ height: batches.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
+      <Button className="px-2 mb-6" onClick={() => router.push("/admin/batches/create")}>Create Batche</Button>
       <DataGrid
-        data={data}
-        columns={columns} 
+        rows={batches}
+        columns={columns}
+        rowHeight={60}
+        checkboxSelection
+        initialState={{
+          pagination: { paginationModel: { pageSize: 10 } },
+        }}
+        pageSizeOptions={[5, 10, 25]}
+        loading={loading}
+        sx={{
+          color: "#fff",
+          borderWidth: '0px',
+          '--DataGrid-rowBorderColor': "#272B35",
+          '--DataGrid-containerBackground': "#272B35",
+          '& .MuiButtonBase-root.MuiIconButton-root': { color: '#fff' },
+          '& .MuiDataGrid-footerContainer': { background: '#272B35' },
+          '& .MuiTablePagination-root': { color: '#fff' },
+          '& .MuiCheckbox-root': { color: '#fff' },
+          '& .MuiDataGrid-cell:focus': { outlineColor: '#fff' },
+          '& .MuiDataGrid-columnHeader:focus': { outline: '#fff' },
+          '& .MuiDataGrid-columnHeader:focus-within': { outline: '#fff' },
+          '& .MuiDataGrid-overlay': { background: '#191D3E' },
+        }}
       />
-    </div>
+    </Box>
   )
 }
 
-export default BatchesPage
+export default BatchesPage
diff --git a/src/components/interface/admin/ChooseRows.tsx b/src/components/interface/admin/ChooseRows.tsx
@@ -26,23 +26,23 @@ const ChooseRows = React.forwardRef<HTMLButtonElement, ChooseRowsProps>((props,
                 <button
                     ref={ref}
                     onClick={toggleDropdown}
-                    className="flex items-center w-[46px] h-[30px] rounded-md px-[7px] py-[8px] bg-[#22276E99] text-sm text-[#AABCF9] hover:bg-[#22276E] hover:text-[#D0DBFF] active:bg-[#7E50FF] active:text-[##FFFFFF] active:shadow-[4px_4px_34px_0_rgba(139,50,252,0.2)]"
+                    className="flex items-center w-[46px] h-[30px] rounded-md px-[7px] py-[8px] bg-[#22276E99] text-sm text-[#AABCF9] hover:bg-[#22276E] hover:text-[#D0DBFF] active:bg-[#7E50FF] active:text-[#FFFFFF] active:shadow-[4px_4px_34px_0_rgba(139,50,252,0.2)] transition-colors duration-300"
                 >
                     {selectedValue}
-                    {isOpen ? <IoIosArrowUp className="ml-1" /> : <IoIosArrowDown className="ml-1" />}
+                    {isOpen ? <IoIosArrowUp className="ml-1 transition-transform duration-200" /> : <IoIosArrowDown className="ml-1 transition-transform duration-200" />}
                 </button>
             </div>
 
             {isOpen && (
-                <div className="absolute right-0 z-10 mt-2 w-[47px] rounded-md shadow-lg bg-[#22276E99] ring-1 ring-black ring-opacity-5">
+                <div className="absolute right-0 z-10 mt-2 w-[47px] rounded-md shadow-lg bg-[#22276E99] ring-1 ring-black ring-opacity-5 transition-opacity duration-200 ease-in-out">
                     <div className="py-1" role="menu" aria-orientation="vertical">
-                        <a href="#" onClick={() => handleSelect(5)} className="block text-white hover:bg-[#22276E] px-[19px]" role="menuitem">
+                        <a href="#" onClick={() => handleSelect(5)} className="block text-white hover:bg-[#22276E] px-[19px] transition-colors duration-200" role="menuitem">
                             5
                         </a>
-                        <a href="#" onClick={() => handleSelect(10)} className="block text-white hover:bg-[#22276E]  px-[15px]" role="menuitem">
+                        <a href="#" onClick={() => handleSelect(10)} className="block text-white hover:bg-[#22276E] px-[15px] transition-colors duration-200" role="menuitem">
                             10
                         </a>
-                        <a href="#" onClick={() => handleSelect(20)} className="block text-white hover:bg-[#22276E]  px-[15px]" role="menuitem">
+                        <a href="#" onClick={() => handleSelect(20)} className="block text-white hover:bg-[#22276E] px-[15px] transition-colors duration-200" role="menuitem">
                             20
                         </a>
                     </div>
@@ -52,6 +52,7 @@ const ChooseRows = React.forwardRef<HTMLButtonElement, ChooseRowsProps>((props,
     );
 });
 
+
 ChooseRows.displayName = 'ChooseRows '
 
 export default ChooseRows 
diff --git a/src/components/interface/admin/Select.tsx b/src/components/interface/admin/Select.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { IoIosCheckmark } from "react-icons/io";
 
 const Select = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
@@ -13,10 +13,10 @@ const Select = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTML
                         onChange={onChange}
                     />
                     <div
-                        className={`relative w-6 h-6 border-2 rounded-md border-[#AABCF9] transition duration-200 ease-in-out hover:bg-[#22276E] ${checked ? 'bg-[#7E50FF] border-[#7E50FF] shadow-[4px_4px_34px_0_rgba(139,50,252,0.2)]' : 'border-[#AABCF9]'}`}
+                        className={`relative w-6 h-6 border-2 rounded-md border-[#AABCF9] transition-colors duration-300 ease-in-out hover:bg-[#22276E] ${checked ? 'bg-[#7E50FF] border-[#7E50FF] shadow-[4px_4px_34px_0_rgba(139,50,252,0.2)] transform scale-105' : 'border-[#AABCF9]'}`}
                     >
                         {checked && (
-                            <IoIosCheckmark className="absolute w-5 h-5 text-white top-0 left-0" />
+                            <IoIosCheckmark className="absolute w-5 h-5 text-white top-0 left-0 transition-transform duration-300 ease-in-out" />
                         )}
                     </div>
                 </label>

diff --git a/src/containers/admin/DataGrid.tsx b/src/containers/admin/DataGrid.tsx
@@ -5,6 +5,7 @@ import { IoIosArrowForward } from "react-icons/io";
 import { RxCross2 } from "react-icons/rx";
 import { IoCheckmarkSharp } from "react-icons/io5";
 import ChooseRows from '@/components/interface/admin/ChooseRows';
+import Select from '@/components/interface/admin/Select';
 
 
 type DataRow = { 
@@ -79,39 +80,66 @@ const DataGrid = <T extends DataRow>({ data, columns }: DataGridProps<T>) => {
         }
     };
 
+    const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const checked = event.target.checked;
+        const newSelectedRows = checked ? new Set(displayedData.map(row => row.id)) : new Set();
+        setSelectedRows(newSelectedRows);
+    };
 
     const displayedData = sortedData.slice((currentPage - 1) * rowsPerPage, currentPage * rowsPerPage);
 
     return (
         <div className="space-y-2">
         <div className="overflow-x-auto">
         <div className='grid' style={{
-                gridTemplateColumns: `repeat(${columns.length}, 1fr)`,
-                gridTemplateRows: `repeat(${displayedData.length + 1}, 1fr)`, // +1 для заголовков
-            }}>
-                {/* Заголовки */}
-                {columns.map(({ key, label }, colIndex) => (
-                    <div
-                        key={key.toString()}
-                        className={`h-[60px] bg-[#7E50FF33] flex items-center mb-[10px] ${colIndex === 0 ? 'rounded-l-[15px]' : ''} ${colIndex === columns.length - 1 ? 'rounded-r-[15px]' : ''}`}
-                    >
-                        {label}
-                    </div>
-                ))}
+            gridTemplateColumns: `repeat(${columns.length + 1}, 1fr)`,
+            gridTemplateRows: `repeat(${displayedData.length + 1}, 1fr)`,
+        }}>
+            {/* Заголовки */}
+            <div className={`h-[60px] flex items-center pl-[12px] mb-[10px] rounded-l-[15px] bg-[#7E50FF33]`}>
+                <Select onChange={handleSelectAll} />
+            </div>
 
-                {displayedData.map((row) => (
-                    columns.map(({ key }, colIndex) => (
+            {columns.map(({ key, label }, colIndex) => (
+                <div
+                    key={key.toString()}
+                    className={`h-[60px] flex items-center mb-[10px] bg-[#7E50FF33] ${colIndex === columns.length - 1 ? 'rounded-r-[15px]' : ''}`}
+                >
+                    {label}
+                </div>
+            ))}
+
+            {displayedData.map((row, rowIndex) => (
+                <React.Fragment key={row.id}>
+                    <div className={`h-[60px] flex items-center mb-[10px] pl-[12px] ${rowIndex === displayedData.length - 1 ? 'rounded-bl-[15px]' : ''} rounded-l-[15px] ${selectedRows.has(row.id) ? 'bg-[#7E50FF33]' : ''}`}>
+                        <Select
+                            checked={selectedRows.has(row.id)}
+                            onChange={() => handleSelectRow(row.id)}
+                        />
+                    </div>
+                    {columns.map(({ key }, colIndex) => (
                         <div
                             key={`${row.id}-${colIndex}`}
-                            className={`h-[60px] bg-[#7E50FF33] flex items-center  mb-[10px] ${colIndex === 0 ? 'rounded-l-[15px]' : ''} ${colIndex === columns.length - 1 ? 'rounded-r-[15px]' : ''}`}
+                            className={`h-[60px] flex items-center mb-[10px] ${colIndex === columns.length - 1 ? 'rounded-r-[15px]' : ''} ${selectedRows.has(row.id) ? 'bg-[#7E50FF33]' : ''}`}
                         >
-                            {row[key]}
+                            {typeof row[key] === 'boolean' ? (
+                                row[key] === true ?
+                                    <div className='w-[30px] h-[30px] text-[#7FFF52] flex justify-center items-center rounded-lg bg-[#1E2E35] border border-[#7FFF52A6]'>
+                                        <IoCheckmarkSharp />
+                                    </div> :
+                                    <div className='w-[30px] h-[30px] text-[#FF8585] flex justify-center items-center rounded-lg bg-[#2B1B36] border border-[#FF8585A6]'>
+                                        <RxCross2 />
+                                    </div>
+                            ) : (
+                                row[key]
+                            )}
                         </div>
-                    ))
-                ))}
-            </div>
-            </div>
-            <div className='h-[1px] w-[100%] bg-[#aabcf977]'></div>
+                    ))}
+                </React.Fragment>
+            ))}
+        </div>
+        </div>
+        <div className='h-[1px] w-[100%] bg-[#aabcf977]'></div>
             <div className="flex justify-between items-center h-[32px] my-[20px]">
                 <div className="text-[#AABCF9] ml-[40px] py-[3px]">
                     {data.length} rows selected

diff --git a/src/containers/admin/Navbar.tsx b/src/containers/admin/Navbar.tsx
@@ -50,7 +50,7 @@ const Navbar: React.FC<NavbarProps> = ({ isVisible, onClose, className }) => {
         >
             <div className='flex justify-between items-center mb-[40px] max-md:hidden'>
                 <Link href="/">
-                    <Image
+                    <img
                         src='/img/interface/nav/logo+text.png'
                         alt="Логотип"
                         width={180}

diff --git a/src/middleware.ts b/src/middleware.ts
@@ -3,15 +3,15 @@ import { EnumTokens } from "./services/auth/auth.services";
 
 export async function middleware(request: NextRequest, response: NextResponse) {
 
-    // const accessToken = request.cookies.get(EnumTokens.ACCESS_TOKEN)
-    // if (!accessToken && configUser.some(route => request.url.includes(route))) {
-    //     return NextResponse.redirect(new URL('/404', request.url))
-    // }
+    const accessToken = request.cookies.get(EnumTokens.ACCESS_TOKEN)
+    if (!accessToken && configUser.some(route => request.url.includes(route))) {
+    return NextResponse.redirect(new URL('/404', request.url))
+    }
 
-    // const accessTokenAdmin = request.cookies.get(EnumTokens.ACCESS_TOKEN_ADMIN)
-    // if (!accessTokenAdmin && configAdmin.some(route => request.url.includes(route))) {
-    //     return NextResponse.redirect(new URL('/404', request.url))
-    // }
+    const accessTokenAdmin = request.cookies.get(EnumTokens.ACCESS_TOKEN_ADMIN)
+    if (!accessTokenAdmin && configAdmin.some(route => request.url.includes(route))) {
+        return NextResponse.redirect(new URL('/404', request.url))
+    }
 }
 
 export const configUser = ['/profile']