Skip to content

S
sweepstake
Commit 5b56d4d1 by Arjun Jhukal
Options

updated the logic for displaying page in admin side along side its delete… 

updated the logic for displaying page in admin side along side its delete functionality and also handled the click away close modal for user profile
parent 2fbdea64
Showing with 221 additions and 74 deletions
src/app/(dashboard)/(admin)/pages/page.tsx
import PageHeader from '@/components/molecules/PageHeader'
import GeneralPageLiting from '@/components/pages/dashboard/adminDashboard/pages'
import React from 'react'
export default function AllPages() {
return (
<>
<PageHeader title='All Pages' cta={{ label: "Add New Page", url: "/pages/add-page" }} />
<GeneralPageLiting />
</>
)
}
src/app/globals.css
......@@ -323,4 +323,8 @@
width: 100%;
height: 100%;
object-fit: cover;
}
table td {
max-width: 380px;
}
\ No newline at end of file
src/components/organism/Header/Profile.tsx
......@@ -3,15 +3,16 @@ import { Transitions } from '@/components/molecules/Transition';
import { useAppDispatch, useAppSelector } from '@/hooks/hook';
import { PATH } from '@/routes/PATH';
import { clearTokens } from '@/slice/authSlice';
import { Box, Button, ButtonBase, ClickAwayListener, Fade, List, ListItem, ListItemText, Paper, Popper, Stack, Typography } from '@mui/material'
import { ArrowDown2 } from '@wandersonalwes/iconsax-react';
import { Box, Button, ButtonBase, ClickAwayListener, Fade, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Paper, Popper, Stack, Typography } from '@mui/material'
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import React, { useRef, useState } from 'react'
import UserProfileMenu from './UserProfileMenu';
const avataur1 = '/assets/images/avatar-6.png';
import { ArrowDown2, ArrowUp2, Coin, Logout, MoneySend, Profile, Wallet2 } from "@wandersonalwes/iconsax-react";
export default function Profile() {
export default function ProfileBlock() {
const anchorRef = useRef<any>(null);
const [open, setOpen] = useState(false);
const handleToggle = () => {
......@@ -27,6 +28,39 @@ export default function Profile() {
setOpen(false);
};
const id = open ? 'profile-dropdown' : ""
const menuItems = [
{
label: "Profile",
href: "/account/profile/account",
icon: <Profile size="20" />,
},
{
label: "Game Credentials",
href: "/credentials",
icon: <Wallet2 size="20" />,
},
{
label: "Deposit History",
href: "/account/deposit-history",
icon: <Coin size="20" />,
},
{
label: "Withdraw History",
href: "/account/withdrawl-history",
icon: <MoneySend size="20" />,
},
{
label: "Logout",
href: "#",
icon: <Logout size="20" />,
onClick: (e: React.MouseEvent) => {
e.preventDefault();
dispatch(clearTokens());
router.replace("/login");
},
},
];
return (
<Box >
<Button
......@@ -103,7 +137,21 @@ export default function Profile() {
</ListItem>
</List>
) : (
<UserProfileMenu />
<List>
{menuItems.map((item, idx) => (
<ListItem key={idx} disablePadding>
<ListItemButton
component={item.href ? Link : "button"}
href={item.href || undefined}
onClick={item.onClick}
className={`flex items-center py-3 px-4 hover:bg-[#FBF4FB]`}
>
<ListItemIcon className="min-w-[30px] mr-1">{item.icon}</ListItemIcon>
<ListItemText primary={item.label} />
</ListItemButton>
</ListItem>
))}
</List>
)
}
......
src/components/organism/Header/UserProfileMenu.tsx deleted 100644 → 0
import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useAppDispatch } from "@/hooks/hook";
import { clearTokens } from "@/slice/authSlice";
import { ArrowDown2, ArrowUp2, Coin, Logout, MoneySend, Profile, Wallet2 } from "@wandersonalwes/iconsax-react";
const UserProfileMenu = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const menuItems = [
{
label: "Profile",
href: "/account/profile/account",
icon: <Profile size="20" />,
},
{
label: "Game Credentials",
href: "/credentials",
icon: <Wallet2 size="20" />,
},
{
label: "Deposit History",
href: "/account/deposit-history",
icon: <Coin size="20" />,
},
{
label: "Withdraw History",
href: "/account/withdrawl-history",
icon: <MoneySend size="20" />,
},
{
label: "Logout",
href: "#",
icon: <Logout size="20" />,
onClick: (e: React.MouseEvent) => {
e.preventDefault();
dispatch(clearTokens());
router.replace("/login");
},
},
];
return (
<List>
{menuItems.map((item, idx) => (
<ListItem key={idx} disablePadding>
<ListItemButton
component={item.href ? Link : "button"}
href={item.href || undefined}
onClick={item.onClick}
className={`flex items-center py-3 px-4 hover:bg-[#FBF4FB]`}
>
<ListItemIcon className="min-w-[30px] mr-1">{item.icon}</ListItemIcon>
<ListItemText primary={item.label} />
</ListItemButton>
</ListItem>
))}
</List>
);
};
export default UserProfileMenu;
src/components/organism/Sidebar/UserSidebar/index.tsx
......@@ -120,7 +120,7 @@ export default function UserMenu({ open }: { open: boolean }) {
<ReceiptEdit size={18} />
</ListItemIcon>
<ListItemText
primary="Accessibility"
primary="AML Policy"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
......
src/components/organism/Table/index.tsx
......@@ -16,7 +16,7 @@ export default function CustomTable<TData>({ table, loading = false,
const rowCount = table.getRowModel().rows.length;
const columnCount = table.getAllLeafColumns().length;
const user = useAppSelector((state) => state.auth.user)
if (user?.role && user?.role.toUpperCase() === "USER") {
if (user?.role && user?.role.toUpperCase() !== "USER") {
return (
<table className="min-w-full border-collapse border border-gray-200 text-left">
......
src/components/pages/dashboard/adminDashboard/pages/index.tsx
"use client";
import ActionGroup from '@/components/molecules/Action';
import TableHeader from '@/components/molecules/TableHeader';
import CustomTable from '@/components/organism/Table';
import { useAppDispatch } from '@/hooks/hook';
import { PATH } from '@/routes/PATH';
import { useDeletePageByIdMutation, useGetAllPageQuery } from '@/services/pageApi';
import { showToast, ToastVariant } from '@/slice/toastSlice';
import { PageRequestProps } from '@/types/page';
import { Checkbox, Pagination } from '@mui/material';
import { ColumnDef, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
import React, { useMemo, useState } from 'react'
export default function GeneralPageLiting() {
const dispatch = useAppDispatch();
const [search, setSearch] = useState("");
const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const { data, isLoading: loadingPages } = useGetAllPageQuery({
page,
per_page: pageSize,
search: search || ""
});
const [deletePage, { isLoading: deleting }] = useDeletePageByIdMutation();
const filteredData = useMemo(() => data?.data?.data || [], [data]);
const columns = useMemo<ColumnDef<PageRequestProps>[]>(() => [
{
id: 'select',
header: ({ table }) => (
<Checkbox
indeterminate={
table.getIsSomePageRowsSelected() &&
!table.getIsAllPageRowsSelected()
}
checked={table.getIsAllPageRowsSelected()}
onChange={table.getToggleAllPageRowsSelectedHandler()}
/>
),
cell: ({ row }) => (
<Checkbox
checked={row.getIsSelected()}
onChange={row.getToggleSelectedHandler()}
/>
),
size: 50
},
{
accessorKey: 'id',
header: '#ID',
cell: ({ row }) => row.original.id
},
{
accessorKey: "name",
header: "Title",
cell: ({ row }) => (
<strong className="text-primary block text-[12px] leading-[120%] font-[500] capitalize">
{row.original.name}
</strong>
),
},
{
accessorKey: 'description',
header: 'Description',
cell: ({ row }) => (
<span className="text-[12px] font-[500] max-w-[380px]">{row.original.description}</span>
)
},
{
accessorKey: 'registeredDate',
header: 'Registered Date',
// cell:
},
{
id: 'action',
header: 'Action',
cell: ({ row }) => (
<ActionGroup
// onView={`${PATH.ADMIN.PAGES.ROOT}/${row.original.id}`}
onEdit={`${PATH.ADMIN.PAGES.EDIT_PAGE.ROOT}/${row.original.id}`}
onDelete={async () => {
const response = await deletePage({ id: row.original.id || "" }).unwrap();
dispatch(
showToast({
message: response.message,
variant: ToastVariant.SUCCESS
})
)
}}
/>
),
},
], []);
const table = useReactTable({
data: filteredData || [],
columns,
state: { sorting },
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
})
return (
<section className="genral__page__lisiting">
<div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
<TableHeader
search={search}
setSearch={setSearch}
onDownloadCSV={() => { }}
/>
<CustomTable
table={table}
loading={loadingPages}
/>
<div className="flex justify-between items-center mt-4 px-8 py-6">
<div>
<span>Row per page:</span>
<select
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
className="ml-2 border border-gray-300 rounded p-1"
>
{[5, 10, 15, 20].map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>
</div>
<Pagination count={data?.data?.pagination.total_pages || 1}
page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
</div>
</div>
</section>
)
}
src/routes/PATH.ts
......@@ -42,6 +42,9 @@ export const PATH = {
ROOT: "/pages",
ADD_PAGE: {
ROOT: "/pages/add-page"
},
EDIT_PAGE: {
ROOT: "/pages/edit-page"
}
},
NOTIFICATIONS: {
......@@ -78,7 +81,7 @@ export const PATH = {
ROOT: "/general/sweepstake-policy"
},
ACCESSIBILITY: {
ROOT: "/general/accessibility"
ROOT: "/general/aml-policy"
},
TERMS_AND_CONDITIONS: {
ROOT: "/general/terms-and-conditions"
......
src/services/pageApi.ts
import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQuery } from "./baseQuery";
import { GlobalResponse, QueryParams } from "@/types/config";
import { PageListResponse, PageResponseProps } from "@/types/page";
export const pageApi = createApi({
reducerPath: "pageApi",
......@@ -14,7 +15,7 @@ export const pageApi = createApi({
body: body
})
}),
getAllPage: builder.mutation<GlobalResponse, QueryParams>({
getAllPage: builder.query<PageListResponse, QueryParams>({
query: (body) => ({
url: "/api/admin/page/list",
method: "GET",
......@@ -38,7 +39,7 @@ export const pageApi = createApi({
export const {
useCreatePageMutation,
useGetAllPageMutation,
useGetAllPageQuery,
useUpdatePageByIdMutation,
useDeletePageByIdMutation
} = pageApi;
\ No newline at end of file
src/types/page.ts
import { Pagination } from "./game";
export interface PageRequestProps {
id?: string;
name: string;
......@@ -15,6 +17,15 @@ export interface PageResponseProps {
message: string;
}
export interface PageListResponse {
success: boolean,
data: {
data: PageRequestProps[];
pagination: Pagination;
};
message: string;
}
export const pageInitialData = {
name: "",
slug: "",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment