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

fix linting
All checks were successful
checks-impure / test (pull_request) Successful in 24s
Details
checks / test (pull_request) Successful in 2m48s
Details

Browse Source
This commit is contained in:
Arslan, Erdem
2023-11-25 01:43:31 +01:00
parent 2e82186e6d
commit e14b540687
3 changed files with 93 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
import { NoDataOverlay } from "@/components/noDataOverlay";
import SummaryDetails from "@/components/summary_card";
import CustomTable from "@/components/table";
import {HomeDummyData, HomeTableConfig} from "@/mock/home";
import { HomeDummyData, HomeTableConfig } from "@/mock/home";
export default function Home() {
return (

101
pkgs/ui/src/components/table/index.tsx
View File

@@ -6,64 +6,65 @@ 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 {ICustomTable, CustomTableConfiguration} from "@/types";
import {Checkbox} from "@mui/material";
import { NoDataOverlay } from "@/components/noDataOverlay";
import { StyledTableCell, StyledTableRow } from "./style";
import { ICustomTable, CustomTableConfiguration } from "@/types";
import { Checkbox } from "@mui/material";
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 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;
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 the data is an array
if (Array.isArray(value)) renderedValue = value.join(", ");
// cover use case if the data is an boolean
if (typeof value === "boolean") renderedValue = <Checkbox disabled checked={value}/>;
// cover use case if the data is an boolean
if (typeof value === "boolean")
renderedValue = <Checkbox disabled checked={value} />;
// cover use case if we want to render a component
if (render) renderedValue = render(value);
return (
<StyledTableCell key={cellKey} align="left">
{renderedValue}
</StyledTableCell>
);
};
// cover use case if we want to render a component
if (render) renderedValue = render(value);
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>
<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;

80
pkgs/ui/src/mock/home/index.ts
View File

@@ -1,47 +1,47 @@
// HOME - Table Data
export const HomeDummyData = [
{
entity_name: "C1",
entity_DID: "did:sov:test:1234",
network: "Carlo's Home Network",
ip_address: "127.0.0.1",
roles: "service repository, service consumer, DLG",
visible: true
},
{
entity_name: "C2",
entity_DID: "did:sov:test:4567",
network: "Steve's Home Network",
ip_address: "127.0.0.1",
roles: "service repository, service consumer, DLG",
visible: false
}
{
entity_name: "C1",
entity_DID: "did:sov:test:1234",
network: "Carlo's Home Network",
ip_address: "127.0.0.1",
roles: "service repository, service consumer, DLG",
visible: true,
},
{
entity_name: "C2",
entity_DID: "did:sov:test:4567",
network: "Steve's Home Network",
ip_address: "127.0.0.1",
roles: "service repository, service consumer, DLG",
visible: false,
},
];
export const HomeTableConfig = [
{
key: "entity_name",
label: "Entity name",
},
{
key: "entity_DID",
label: "Entity DID",
},
{
key: "network",
label: "Network",
},
{
key: "ip_address",
label: "IP address",
},
{
key: "roles",
label: "Roles",
},
{
key: "visible",
label: "Visible",
},
{
key: "entity_name",
label: "Entity name",
},
{
key: "entity_DID",
label: "Entity DID",
},
{
key: "network",
label: "Network",
},
{
key: "ip_address",
label: "IP address",
},
{
key: "roles",
label: "Roles",
},
{
key: "visible",
label: "Visible",
},
];