Skip to content

Commit

Permalink
add name to templates list
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdbondi
sdbondi committed Jan 5, 2024
1 parent 17aa84b commit 1b25005
Showing 1 changed file with 70 additions and 66 deletions.
136 changes: 70 additions & 66 deletions applications/tari_validator_node_web_ui/src/routes/VN/Components/Templates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,32 @@
// WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
// USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

import { useEffect, useState } from 'react';
import { getTemplates } from '../../../utils/json_rpc';
import { shortenString } from './helpers';
import './Templates.css';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import { useEffect, useState } from "react";
import { getTemplates } from "../../../utils/json_rpc";
import { shortenString } from "./helpers";
import "./Templates.css";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import {
DataTableCell,
BoxHeading2,
} from '../../../Components/StyledComponents';
import { Link } from 'react-router-dom';
import CopyToClipboard from '../../../Components/CopyToClipboard';
import IconButton from '@mui/material/IconButton';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import HeadingMenu from '../../../Components/HeadingMenu';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import TablePagination from '@mui/material/TablePagination';
import SearchFilter from '../../../Components/SearchFilter';
import Typography from '@mui/material/Typography';
import Fade from '@mui/material/Fade';
import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
} from "../../../Components/StyledComponents";
import { Link } from "react-router-dom";
import CopyToClipboard from "../../../Components/CopyToClipboard";
import IconButton from "@mui/material/IconButton";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import HeadingMenu from "../../../Components/HeadingMenu";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import TablePagination from "@mui/material/TablePagination";
import SearchFilter from "../../../Components/SearchFilter";
import Typography from "@mui/material/Typography";
import Fade from "@mui/material/Fade";
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";

export interface ITemplate {
id: string;
Expand All @@ -62,7 +62,7 @@ type ColumnKey = keyof ITemplate;

function Templates() {
const [templates, setTemplates] = useState<ITemplate[]>([]);
const [lastSort, setLastSort] = useState({ column: '', order: -1 });
const [lastSort, setLastSort] = useState({ column: "", order: -1 });

useEffect(() => {
getTemplates(10).then((response) => {
Expand All @@ -86,18 +86,18 @@ function Templates() {
name,
url,
show,
})
)
}),
),
);
});
}, []);

const toHex = (str: Uint8Array) => {
return (
'0x' +
"0x" +
Array.prototype.map
.call(str, (x: number) => ('00' + x.toString(16)).slice(-2))
.join('')
.call(str, (x: number) => ("00" + x.toString(16)).slice(-2))
.join("")
);
};

Expand All @@ -109,8 +109,12 @@ function Templates() {
if (column) {
setTemplates(
[...templates].sort((r0: any, r1: any) =>
r0[column] > r1[column] ? order : r0[column] < r1[column] ? -order : 0
)
r0[column] > r1[column]
? order
: r0[column] < r1[column]
? -order
: 0,
),
);
setLastSort({ column, order });
}
Expand All @@ -128,7 +132,7 @@ function Templates() {
};

const handleChangeRowsPerPage = (
event: React.ChangeEvent<HTMLInputElement>
event: React.ChangeEvent<HTMLInputElement>,
) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
Expand All @@ -143,14 +147,14 @@ function Templates() {
setPage={setPage}
filterItems={[
{
title: 'Template Address',
value: 'id',
title: "Template Address",
value: "id",
filterFn: (value: string, row: ITemplate) =>
row.id.toLowerCase().includes(value.toLowerCase()),
},
{
title: 'Mined Height',
value: 'height',
title: "Mined Height",
value: "height",
filterFn: (value: string, row: ITemplate) =>
row.height.toString().includes(value),
},
Expand All @@ -162,18 +166,18 @@ function Templates() {
<Table>
<TableHead>
<TableRow>
<TableCell style={{ minWidth: '300px' }}>
<TableCell style={{ minWidth: "300px" }}>
<HeadingMenu
menuTitle="Address"
menuItems={[
{
title: 'Sort Ascending',
fn: () => sort('id', 1),
title: "Sort Ascending",
fn: () => sort("id", 1),
icon: <KeyboardArrowUpIcon />,
},
{
title: 'Sort Descending',
fn: () => sort('id', -1),
title: "Sort Descending",
fn: () => sort("id", -1),
icon: <KeyboardArrowDownIcon />,
},
]}
Expand All @@ -183,19 +187,20 @@ function Templates() {
sortFunction={sort}
/>
</TableCell>
<TableCell>Name</TableCell>
<TableCell>Download URL</TableCell>
<TableCell style={{ textAlign: 'center', width: '210px' }}>
<TableCell style={{ textAlign: "center", width: "210px" }}>
<HeadingMenu
menuTitle="Mined Height"
menuItems={[
{
title: 'Sort Ascending',
fn: () => sort('height', 1),
title: "Sort Ascending",
fn: () => sort("height", 1),
icon: <KeyboardArrowUpIcon />,
},
{
title: 'Sort Descending',
fn: () => sort('height', -1),
title: "Sort Descending",
fn: () => sort("height", -1),
icon: <KeyboardArrowDownIcon />,
},
]}
Expand All @@ -205,26 +210,27 @@ function Templates() {
sortFunction={sort}
/>
</TableCell>
<TableCell style={{ textAlign: 'center' }}>Status</TableCell>
<TableCell style={{ textAlign: 'center' }}>Functions</TableCell>
<TableCell style={{ textAlign: "center" }}>Status</TableCell>
<TableCell style={{ textAlign: "center" }}>Functions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{templates
.filter(({ show }) => show === true)
.filter(({ show }) => show)
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(({ address, binary_sha, height, url, id }) => (
.map(({ address, binary_sha, height, url, id, name }) => (
<TableRow key={id}>
<DataTableCell>
<Link
to={`/templates/${toHex(address)}`}
state={[address]}
style={{ textDecoration: 'none' }}
style={{ textDecoration: "none" }}
>
{shortenString(toHex(address))}
</Link>
<CopyToClipboard copy={toHex(address)} />
</DataTableCell>
<DataTableCell>{name}</DataTableCell>
<DataTableCell>
{url && (
<>
Expand All @@ -233,33 +239,33 @@ function Templates() {
target="_blank"
rel="noreferrer"
style={{
textDecoration: 'none',
display: 'inline-flex',
gap: '10px',
alignItems: 'center',
textDecoration: "none",
display: "inline-flex",
gap: "10px",
alignItems: "center",
}}
>
Download
<IconButton size="small">
<FileDownloadOutlinedIcon
color="primary"
style={{
width: '18px',
height: '18px',
width: "18px",
height: "18px",
}}
/>
</IconButton>
</a>
</>
)}
</DataTableCell>
<DataTableCell style={{ textAlign: 'center' }}>
<DataTableCell style={{ textAlign: "center" }}>
{height}
</DataTableCell>
<DataTableCell style={{ textAlign: 'center' }}>
<DataTableCell style={{ textAlign: "center" }}>
Active
</DataTableCell>
<DataTableCell style={{ textAlign: 'center' }}>
<DataTableCell style={{ textAlign: "center" }}>
<Link to={`/templates/${toHex(address)}`} state={[address]}>
<IconButton>
<KeyboardArrowRightIcon color="primary" />
Expand All @@ -268,13 +274,11 @@ function Templates() {
</DataTableCell>
</TableRow>
))}
{templates.filter(({ show }) => show === true).length === 0 && (
{templates.filter(({ show }) => show).length === 0 && (
<TableRow>
<TableCell colSpan={4} style={{ textAlign: 'center' }}>
<TableCell colSpan={4} style={{ textAlign: "center" }}>
<Fade
in={
templates.filter(({ show }) => show === true).length === 0
}
in={templates.filter(({ show }) => show).length === 0}
timeout={500}
>
<Typography variant="h5">No results found</Typography>
Expand All @@ -296,7 +300,7 @@ function Templates() {
<TablePagination
rowsPerPageOptions={[10, 25, 50]}
component="div"
count={templates.filter((template) => template.show === true).length}
count={templates.filter((template) => template.show).length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
Expand Down

0 comments on commit 1b25005

Please sign in to comment.