From 4f57198d56947c49914004077fbccd623e6611e2 Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Fri, 18 Oct 2024 20:11:34 +0530 Subject: [PATCH] update table --- dev-dist/sw.js | 2 +- src/Constants/Paginations.js | 2 + src/Contexts/GlobalStateProvider.jsx | 55 +++++ src/components/ChartsTabs.jsx | 7 +- src/components/DataTable/NormalTable.jsx | 196 ++++++++++++++++ src/components/Pagination.jsx | 124 ++-------- src/pages/SubnetId.jsx | 136 ++++------- src/pages/SubnetIdold.jsx | 225 +++++++++++++++++++ src/pages/Transaction/TransactionDetails.jsx | 2 + src/pages/Transaction/TransactionTable.jsx | 73 ++++++ 10 files changed, 616 insertions(+), 206 deletions(-) create mode 100644 src/Constants/Paginations.js create mode 100644 src/components/DataTable/NormalTable.jsx create mode 100644 src/pages/SubnetIdold.jsx create mode 100644 src/pages/Transaction/TransactionTable.jsx diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 4bbe3b6..d76fd73 100644 --- a/dev-dist/sw.js +++ b/dev-dist/sw.js @@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict'; "revision": "3ca0b8505b4bec776b69afdba2768812" }, { "url": "index.html", - "revision": "0.ak3sjq5l2po" + "revision": "0.4ngos72cbag" }], {}); workbox.cleanupOutdatedCaches(); workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), { diff --git a/src/Constants/Paginations.js b/src/Constants/Paginations.js new file mode 100644 index 0000000..b01cbd8 --- /dev/null +++ b/src/Constants/Paginations.js @@ -0,0 +1,2 @@ +export const TABLE_PAGINATION = { page: 1, size:20 } +export const IMAGE_URI = import.meta.env.VITE_API_IMAGE_URL \ No newline at end of file diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index cad4e6e..24cbad9 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -285,6 +285,59 @@ const GlobalStateProvider = ({ children }) => { }, ]); + const [subnetId, setSubnetId] = useState([ + { + id: 1, + subnetId: "A1B2C3D4E5F6G", + transactionCount: "10", + }, + { + id: 2, + subnetId: "A1B2C3D4E5F6G", + transactionCount: "10", + }, + { + id: 3, + subnetId: "A1B2C3D4E5F6G", + transactionCount: "10", + }, + { + id: 4, + subnetId: "A1B2C3D4E5F6G", + transactionCount: "10", + }, + { + id: 5, + subnetId: "A1B2C3D4E5F6G", + transactionCount: "10", + }, + { + id: 6, + subnetId: "A1B2C3D4E5F6G", + transactionCount: "10", + }, + { + id: 7, + subnetId: "A1B2C3D4E5F6G", + transactionCount: "10", + }, + { + id: 8, + subnetId: "A1B2C3D4E5F6G", + transactionCount: "10", + }, + { + id: 9, + subnetId: "A1B2C3D4E5F6G", + transactionCount: "10", + }, + { + id: 10, + subnetId: "A1B2C3D4E5F6G", + transactionCount: "10", + }, + ]); + return ( { setOverview, subnet, setSubnet, + subnetId, + setSubnetId, }} > {children} diff --git a/src/components/ChartsTabs.jsx b/src/components/ChartsTabs.jsx index 663cb47..d924899 100644 --- a/src/components/ChartsTabs.jsx +++ b/src/components/ChartsTabs.jsx @@ -26,9 +26,9 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) { { + const columnWidth = + data && data[0] + ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%` + : "auto"; + + const { colorMode} = useColorMode(); + + // Toggle checkbox selection for individual rows + // const handleCheckboxChange = (value) => { + // setSelectedRadio((prev) => { + // if (prev.includes(value)) { + // // Remove if already selected + // return prev.filter((id) => id !== value); + // } else { + // // Add to selected + // return [...prev, value]; + // } + // }); + // }; + + // Handle "Check All" checkbox + const handleCheckAllChange = () => { + if (selectedRadio.length === data.length) { + setSelectedRadio([]); // Deselect all if already selected + } else { + const allIds = data.map((item) => item.id); + setSelectedRadio(allIds); // Select all + } + }; + + + + const handleCheckboxChange = (value) => { + if (radio) { + setSelectedRadio([value]); + } else { + setSelectedRadio((prev) => { + if (prev.includes(value)) { + return prev.filter((id) => id !== value); + } else { + return [...prev, value]; + } + }); + } + }; + + return ( + + + + + {showRadioButton &&( + + )} + {tableHeadRow.map((heading, index) => ( + + ))} + + + + {isLoading + ? Array.from({ length: TABLE_PAGINATION?.size }).map( + (_, index) => ( + + {tableHeadRow.map((_, i) => ( + + ))} + + ) + ) + : data?.map((item, index) => ( + + {showRadioButton && ( + + )} + {tableHeadRow.map((heading, i) => ( + + ))} + + ))} + +
+ {radio? "Select":} + + {isLoading ? : heading} +
+ +
+ {radio ? radioChange(item.id, item)} + />: handleCheckboxChange(item.id)} + />} + + {item[heading]} +
+ + ); +}; + +export default NormalTable; diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx index 354ca95..5fb43cc 100644 --- a/src/components/Pagination.jsx +++ b/src/components/Pagination.jsx @@ -9,6 +9,8 @@ import { useColorMode, } from "@chakra-ui/react"; import { FaArrowLeftLong, FaArrowRightLong } from "react-icons/fa6"; +import { TbChevronLeftPipe, TbChevronRightPipe } from "react-icons/tb"; +import { FiChevronLeft, FiChevronRight } from "react-icons/fi"; // import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'; const Pagination = ({ @@ -48,64 +50,8 @@ const Pagination = ({ return ( - {/* Tanami v0.1 */} - - {/* */} - {/* */} - {/* - {isLoading ? "0" : displayRange?.start} - {" "} - {isLoading ? "00" : displayRange?.end} of {" "} - {isLoading ? "00" : totalItems} - */} - {/* 1 2 3 4.... - */} - {/* */} - Rows per page: + Rows per page : { - - - - - - - - - - - - - {tableData.map((row, index) => ( - - - - - - ))} - -
Sr. noSubnet IdTransaction count
{index + 1}. - navigate(`/subnet-id-overview/${row["Subnet Id"]}`) - }>{row["Subnet Id"]} - {row["Transaction count"]}
- - - - + + + + ); }; diff --git a/src/pages/SubnetIdold.jsx b/src/pages/SubnetIdold.jsx new file mode 100644 index 0000000..444f565 --- /dev/null +++ b/src/pages/SubnetIdold.jsx @@ -0,0 +1,225 @@ +import { + Box, + Button, + Container, + Grid, + GridItem, + Heading, + HStack, + Icon, + Input, + InputGroup, + Link, + Select, + Table, + TableCaption, + TableContainer, + Tbody, + Td, + Text, + Th, + Thead, + Tr, + useColorMode, + useToast, + VStack, +} from "@chakra-ui/react"; +import React, { useContext, useEffect } from "react"; +import GlobalStateContext from "../Contexts/GlobalStateContext"; +import Pagination from "../components/Pagination"; +import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md"; +import ToastBox from "../components/ToastBox"; +import bannerImage from "../assets/images/bannerImg.png"; +import { useNavigate, useParams } from "react-router-dom"; + +const SubnetId = () => { + const { colorMode } = useColorMode(); + const params = useParams(); + const navigate = useNavigate(); + + const toast = useToast(); + useEffect(() => { + window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change + }, []); + + const tableData = [ + { + "Subnet Id": "A1B2C3D4E5F6G", + "Transaction count": 10, + }, + { + "Subnet Id": "A1B2C3D4E5F6G", + "Transaction count": 10, + }, + { + "Subnet Id": "A1B2C3D4E5F6G", + "Transaction count": 10, + }, + { + "Subnet Id": "A1B2C3D4E5F6G", + "Transaction count": 10, + }, + { + "Subnet Id": "A1B2C3D4E5F6G", + "Transaction count": 10, + }, + { + "Subnet Id": "A1B2C3D4E5F6G", + "Transaction count": 10, + }, + { + "Subnet Id": "A1B2C3D4E5F6G", + "Transaction count": 10, + }, + { + "Subnet Id": "A1B2C3D4E5F6G", + "Transaction count": 10, + }, + { + "Subnet Id": "A1B2C3D4E5F6G", + "Transaction count": 10, + }, + { + "Subnet Id": "A1B2C3D4E5F6G", + "Transaction count": 10, + }, + ]; + + return ( + + + + Subnet Overview {params?.id} + + + View total number of records + + + + + + + + setSearchTerm(e.target.value)} + _hover={{ + borderColor: "#7f8c8d", + }} + _placeholder={{ color: "#737C82" }} + _focusVisible={{ + borderColor: colorMode === "light" ? "#230A79" : "#7f8c8d", + }} + /> + + + + + + + + + + + + + + + + + + {tableData.map((row, index) => ( + + + + + + ))} + +
Sr. noSubnet IdTransaction count
{index + 1}. + navigate(`/subnet-id-overview/${row["Subnet Id"]}`) + }>{row["Subnet Id"]} + {row["Transaction count"]}
+ + + + + + ); +}; + +export default SubnetId; diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx index 887ac57..9cf8a93 100644 --- a/src/pages/Transaction/TransactionDetails.jsx +++ b/src/pages/Transaction/TransactionDetails.jsx @@ -15,6 +15,7 @@ import RelatedTransactions from "../../components/RelatedTransactions/RelatedTra import bannerImage from "../../assets/images/bannerImg.png"; import ToastBox from "../../components/ToastBox"; import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import TransactionTable from "./TransactionTable"; const TransactionDetails = () => { const navigate = useNavigate(); @@ -392,6 +393,7 @@ const TransactionDetails = () => { + diff --git a/src/pages/Transaction/TransactionTable.jsx b/src/pages/Transaction/TransactionTable.jsx new file mode 100644 index 0000000..37819ce --- /dev/null +++ b/src/pages/Transaction/TransactionTable.jsx @@ -0,0 +1,73 @@ +import { + Badge, + Box, + Button, + Container, + Heading, + HStack, + Icon, + Image, + Input, + InputGroup, + Select, + Text, + useColorMode, + VStack, + } from "@chakra-ui/react"; + import React, { useContext, useEffect, useState } from "react"; + import { useNavigate, useParams } from "react-router-dom"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import NormalTable from "../../components/DataTable/NormalTable"; + + const TransactionTable = () => { + const { subnetId } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + const { colorMode } = useColorMode(); + const navigate = useNavigate(); + + useEffect(() => { + setIsLoading(true); + const timer = setTimeout(() => { + setIsLoading(false); + }, 500); + return () => clearTimeout(timer); + }, []); + + // ===============================[ Table Header ] + const tableHeadRow = [ + "Sr. no", + "Subnet ID", + "Transaction count", + ]; + + // const extractedArray = reportsHistory.map((item)=>({ })) + const extractedArray = subnetId.map((item, index) => ({ + "Sr. no": ( + + {index + 1} + + ), + "Subnet ID": ( + + navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}> + {item?.subnetId} + + ), + "Transaction count": item?.transactionCount, + })); + return ( + + + + ); + }; + + export default TransactionTable; + \ No newline at end of file