IoSL/service-aware-frontend
3
0
Fork 0
generated from Luis/nextjs-python-web-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: issue-23 - Custom Table Component #11

Closed
Ghost wants to merge 10 commits from issue-23 into main
pull from: issue-23
merge into: IoSL:main
Conversation 0 Commits 10 Files Changed 15 +353 -38
15 changed files with 353 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
pkgs/ui/src/app/access-point/page.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import {RecentActivity} from "@/components/dashboard/activity";
import {APServiceRepositoryDummyData, APServiceRepositoryTableConfig} from "@/mock/ap/serviceRepository";
import {APAttachmentsDummyData, APAttachmentsTableConfig} from "@/mock/ap/attachmentData";
export default function AccessPoint() {
return (
<div>
<RecentActivity title={"Attachments"} data={APAttachmentsDummyData}
configuration={APAttachmentsTableConfig}/><br/>
<RecentActivity title={"Service Repository"} data={APServiceRepositoryDummyData}
configuration={APServiceRepositoryTableConfig}/>
</div>
)
}

13
pkgs/ui/src/app/distributed-ledger-gateway/page.tsx Normal file
View File

@@ -0,0 +1,13 @@
"use client";
import {RecentActivity} from "@/components/dashboard/activity";
import {DLGResolutionDummyData, DLGResolutionTableConfig} from "@/mock/dlg/attachmentData";
export default function DLG() {
return (
<div>
<RecentActivity title={"DID Resolution"} data={DLGResolutionDummyData}
configuration={DLGResolutionTableConfig}/><br/>
</div>
)
}

9
pkgs/ui/src/app/layout.tsx
View File

@@ -47,9 +47,9 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<title>Clan.lol</title> <title>Service-Aware Networks</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Clan.lol - build your own network" /> <meta name="description" content="Service-Aware Networks" />
<link rel="icon" href="favicon.ico" sizes="any" /> <link rel="icon" href="favicon.ico" sizes="any" />
</head> </head>
<StyledEngineProvider injectFirst> <StyledEngineProvider injectFirst>
@@ -72,8 +72,7 @@ export default function RootLayout({
onClose={() => setShowSidebar(false)} onClose={() => setShowSidebar(false)}
/> />
<div <div
className={tw`${ className={tw`${!showSidebarDerived && translate
!showSidebarDerived && translate
} flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`} } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
> >
<div className="static top-0 mb-2 py-2"> <div className="static top-0 mb-2 py-2">
@@ -89,7 +88,7 @@ export default function RootLayout({
<div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden"> <div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
<Image <Image
src="/favicon.png" src="/favicon.png"
alt="Clan Logo" alt="TUB Logo"
width={58} width={58}
height={58} height={58}
priority priority

2
pkgs/ui/src/app/page.tsx
View File

@@ -10,7 +10,7 @@ export default function Dashboard() {
<div className="grid h-full place-items-center"> <div className="grid h-full place-items-center">
<div className="mt-8 w-full max-w-xl"> <div className="mt-8 w-full max-w-xl">
<LoadingOverlay <LoadingOverlay
title="Clan Experience" title="Service-Aware Networks"
subtitle="Loading" subtitle="Loading"
variant="circle" variant="circle"
/> />

7
pkgs/ui/src/app/theme/themes.ts
View File

@@ -4,7 +4,8 @@ import {
createTheme, createTheme,
} from "@mui/material/styles"; } from "@mui/material/styles";
import colors from "@clan/colors/colors.json"; // import colors from "@clan/colors/colors.json";
import colors from "../../../../theme/src/colors.json";
const { palette, common } = colors.ref; const { palette, common } = colors.ref;
const commonOptions: Partial<ThemeOptions> = { const commonOptions: Partial<ThemeOptions> = {
@@ -46,8 +47,8 @@ export const darkTheme = createTheme({
mode: "dark", mode: "dark",
...commonPalette, ...commonPalette,
background: { background: {
default: palette.neutral2.value, default: palette.neutral20.value,
paper: palette.neutral5.value, paper: palette.neutral50.value,
}, },
common: { common: {
black: common.black.value, black: common.black.value,

22
pkgs/ui/src/components/dashboard/activity/index.tsx
View File

@@ -1,11 +1,25 @@
import {DashboardCard} from "@/components/card"; import {DashboardCard} from "@/components/card";
import {NoDataOverlay} from "@/components/noDataOverlay"; import {NoDataOverlay} from "@/components/noDataOverlay";
import {ReactNode} from "react";
import CustomTable from "@/components/table";
import {ICustomTable} from "@/types";
export const RecentActivity = () => { interface DashboardCardProps {
title: ReactNode;
data: ReactNode;
configuration: ICustomTable;
}
export const RecentActivity = (props: DashboardCardProps) => {
const {title, data, configuration} = props;
return ( return (
<DashboardCard title="Recent Activity"> <DashboardCard title={title}>
<div className="flex w-full justify-center align-middle"> {/*<div className="flex w-full justify-center align-middle">*/}
<NoDataOverlay label="No Activity yet" /> {/* <NoDataOverlay label="No Activity yet"/>*/}
{/*</div>*/}
<div>
<CustomTable data={data} configuration={configuration}/>
</div> </div>
</DashboardCard> </DashboardCard>
); );

57
pkgs/ui/src/components/sidebar/index.tsx
View File

@@ -8,13 +8,17 @@ import {
ListItemText, ListItemText,
} from "@mui/material"; } from "@mui/material";
import Image from "next/image"; import Image from "next/image";
import { ReactNode } from "react"; import React, { ReactNode } from "react";
import { tw } from "@/utils/tailwind"; import { tw } from "@/utils/tailwind";
import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
import Link from "next/link"; import Link from "next/link";
import WysiwygIcon from "@mui/icons-material/Wysiwyg";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import HomeIcon from '@mui/icons-material/Home';
import HubIcon from '@mui/icons-material/Hub';
import PersonIcon from '@mui/icons-material/Person';
import RouterIcon from '@mui/icons-material/Router';
import StorageIcon from '@mui/icons-material/Storage';
type MenuEntry = { type MenuEntry = {
icon: ReactNode; icon: ReactNode;
@@ -27,17 +31,41 @@ type MenuEntry = {
const menuEntries: MenuEntry[] = [ const menuEntries: MenuEntry[] = [
{ {
icon: <AssignmentIndIcon />, icon: <HomeIcon />,
label: "Freelance", label: "Home",
to: "/", to: "/",
disabled: false, disabled: false,
}, },
{ {
icon: <WysiwygIcon />, icon: <HubIcon />,
label: "Blog", label: "Entities",
to: "/blog", to: "/entities",
disabled: true, disabled: true,
}, },
{
icon: <PersonIcon />,
label: "C1",
to: "/client-1",
disabled: false,
},
{
icon: <PersonIcon />,
label: "C2",
to: "/client-2",
disabled: false,
},
{
icon: <RouterIcon />,
label: "AP",
to: "/access-point",
disabled: false,
},
{
icon: <StorageIcon />,
label: "DLG",
to: "/distributed-ledger-gateway",
disabled: false,
}
]; ];
const hideSidebar = tw`-translate-x-14 lg:-translate-x-64`; const hideSidebar = tw`-translate-x-14 lg:-translate-x-64`;
@@ -50,17 +78,22 @@ interface SidebarProps {
export function Sidebar(props: SidebarProps) { export function Sidebar(props: SidebarProps) {
const { show, onClose } = props; const { show, onClose } = props;
const [activeMenuItem, setActiveMenuItem] = React.useState('/');
const handleMenuItemClick = (path: string) => {
setActiveMenuItem(path);
};
return ( return (
<aside <aside
className={tw`${ className={tw`${show ? showSidebar : hideSidebar
show ? showSidebar : hideSidebar
} z-9999 static left-0 top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`} } z-9999 static left-0 top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`}
> >
<div className="flex items-center justify-between gap-2 overflow-hidden px-0 py-5 lg:p-6"> <div className="flex items-center justify-between gap-2 overflow-hidden px-0 py-5 lg:p-6">
<div className="mt-8 hidden w-full text-center font-semibold text-white lg:block"> <div className="mt-8 hidden w-full text-center font-semibold text-white lg:block">
<Image <Image
src="/logo.png" src="/logo.png"
alt="Clan Logo" alt="TUB Logo"
width={75} width={75}
height={75} height={75}
priority priority
@@ -90,6 +123,8 @@ export function Sidebar(props: SidebarProps) {
LinkComponent={Link} LinkComponent={Link}
href={menuEntry.to} href={menuEntry.to}
disabled={menuEntry.disabled} disabled={menuEntry.disabled}
selected={activeMenuItem === menuEntry.to}
onClick={() => handleMenuItemClick(menuEntry.to)}
> >
<ListItemIcon <ListItemIcon
color="inherit" color="inherit"

66
pkgs/ui/src/components/table/index.tsx Normal file
View File

@@ -0,0 +1,66 @@
import React from "react";
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import { NoDataOverlay } from "@/components/noDataOverlay";
import { StyledTableCell, StyledTableRow } from "./style";
import { CustomTableConfiguration, ICustomTable } from "@/types";
const CustomTable = ({ configuration, data }: ICustomTable) => {
// display empty icon in case there is no data
if (!data || data.length === 0)
return <NoDataOverlay label="No Activity yet" />
const renderTableCell = (value: any, cellKey: string, render?: (param: any) => void | undefined) => {
let renderedValue = value;
// cover use case if the data is an array
if (Array.isArray(value)) renderedValue = value.join(', ')
// cover use case if we want to render a component
if (render) renderedValue = render(value);
return (
<StyledTableCell key={cellKey} align="left">
{renderedValue}
</StyledTableCell>
);
}
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
{configuration.map((header: CustomTableConfiguration) => (
<StyledTableCell key={header.key}>
{header.label}
</StyledTableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{data.map((data: any, rowIndex: number) => (
<StyledTableRow key={rowIndex}>
{configuration.map((column: CustomTableConfiguration) => {
const cellValue: any = data[column.key];
const cellKey = column.key;
const renderComponent = column?.render;
return renderTableCell(cellValue, cellKey, renderComponent);
})}
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
}
export default CustomTable;

23
pkgs/ui/src/components/table/style.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { styled } from '@mui/material/styles';
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
export const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 14,
},
}));
export const StyledTableRow = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
// hide last border
'&:last-child td, &:last-child th': {
border: 0,
},
}));

44
pkgs/ui/src/mock/ap/attachmentData.tsx Normal file
View File

@@ -0,0 +1,44 @@
export const APAttachmentsDummyData = [
{
"entity_name": "C1",
"entity_DID": "did:sov:test:1234",
"network": "Carlo’s Home Network",
"ip_address": "127.0.0.1",
}, {
"entity_name": "C2",
"entity_DID": "did:sov:test:4567",
"network": "Steve’s Home Network",
"ip_address": "127.0.0.1",
}, {
"entity_name": "C1-TEST",
"entity_DID": "did:sov:test:0001",
"network": "Test Network A",
"ip_address": "127.0.0.1",
}, {
"entity_name": "C2-TEST",
"entity_DID": "did:sov:test:0002",
"network": "Test Network B",
"ip_address": "127.0.0.1",
},
]
export const APAttachmentsTableConfig = [
{
key: "entity_name",
label: "Entity name"
},
{
key: "entity_DID",
label: "Entity DID"
},
{
key: "network",
label: "Network"
},
{
key: "ip_address",
label: "IP address"
}
]

44
pkgs/ui/src/mock/ap/serviceRepository.tsx Normal file
View File

@@ -0,0 +1,44 @@
export const APServiceRepositoryDummyData = [
{
"service_name": "Carlo's Printing",
"service_type": "3D Printing",
"end_point": "URL",
"producer": "C1",
"producer_DID": "did:sov:test:1234",
"network": "Carlo's Home Network",
}, {
"service_name": "Jeff's Printing",
"service_type": "3D Printing",
"end_point": "URL",
"producer": "C2",
"producer_DID": "did:sov:test:5678",
"network": "Jeff's Home Network",
},
]
export const APServiceRepositoryTableConfig = [
{
key: "service_name",
label: "Service name"
},
{
key: "service_type",
label: "Service type"
},
{
key: "end_point",
label: "End point"
},
{
key: "producer",
label: "Producer"
},
{
key: "producer_DID",
label: "Producer DID"
},
{
key: "network",
label: "Network"
},
]

34
pkgs/ui/src/mock/dlg/attachmentData.tsx Normal file
View File

@@ -0,0 +1,34 @@
export const DLGResolutionDummyData = [
{
"requester_name": "C1",
"requester_DID": "did:sov:test:1234",
"DID_resolved": "did:sov:test:1234",
"timestamp": "2023.11.01 17:05:45",
},
{
"requester_name": "C2",
"requester_DID": "did:sov:test:5678",
"DID_resolved": "did:sov:test:5678",
"timestamp": "2023.12.01 15:05:50",
},
]
export const DLGResolutionTableConfig = [
{
key: "requester_name",
label: "Requester name"
},
{
key: "requester_DID",
label: "Requester DID"
},
{
key: "DID_resolved",
label: "DID resolved"
},
{
key: "timestamp",
label: "Timestamp"
}
]

10
pkgs/ui/src/types/index.ts Normal file
View File

@@ -0,0 +1,10 @@
export interface CustomTableConfiguration {
key: string;
label: string;
render?: (param: any) => void;
}
export interface ICustomTable {
configuration: CustomTableConfiguration[],
data: any
}

1
pkgs/ui/tailwind.config.js
View File

@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
import colors from "@clan/colors/colors.json"; import colors from "@clan/colors/colors.json";
// import colors from "../theme/src/colors.json";
const { const {
ref: { palette, common }, ref: { palette, common },

25
pkgs/ui/tsconfig.json
View File

@@ -1,7 +1,11 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"lib": ["dom", "dom.iterable", "esnext"], "lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true, "strict": true,
@@ -21,10 +25,21 @@
} }
], ],
"paths": { "paths": {
"@/*": ["./src/*"], "@/*": [
"@API/*": ["./src/api/*"] "./src/*"
],
"@API/*": [
"./src/api/*"
]
} }
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "include": [
"exclude": ["node_modules"] "next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
]
} }