Skip to content

Commit bbbd84b

Browse files
longshuicylongshuicy
authored
778 page to display each metadata definition (#801)
* new page of metadata definition entry * initial page for metadata definition page * basic metadata defintion page
1 parent 453d849 commit bbbd84b

File tree

3 files changed

+172
-16
lines changed

3 files changed

+172
-16
lines changed

‎frontend/src/components/metadata/MetadataDefinitionEntry.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React, { useEffect, useState } from "react";
2+
import { Box, Button, Grid, Link } from "@mui/material";
3+
import Layout from "../Layout";
4+
import { useDispatch, useSelector } from "react-redux";
5+
import Typography from "@mui/material/Typography";
6+
import { useParams } from "react-router-dom";
7+
import { MainBreadcrumbs } from "../navigation/BreadCrumb";
8+
import { ErrorModal } from "../errors/ErrorModal";
9+
import ReactJson from "react-json-view";
10+
import { fetchMetadataDefinition as fetchMetadataDefinitionAction } from "../../actions/metadata";
11+
import { RootState } from "../../types/data";
12+
import DeleteMetadataDefinitionModal from "./DeleteMetadataDefinitionModal";
13+
import DeleteIcon from "@mui/icons-material/Delete";
14+
15+
export function MetadataDefinitionEntry() {
16+
// path parameter
17+
const { metadataDefinitionId } = useParams<{
18+
metadataDefinitionId?: string;
19+
}>();
20+
21+
// Redux connect equivalent
22+
const dispatch = useDispatch();
23+
const fetchMetadataDefinition = (metadataDefinitionId: string | undefined) =>
24+
dispatch(fetchMetadataDefinitionAction(metadataDefinitionId));
25+
const metadataDefinition = useSelector(
26+
(state: RootState) => state.metadata.metadataDefinition
27+
);
28+
29+
const [
30+
deleteMetadataDefinitionConfirmOpen,
31+
setDeleteMetadataDefinitionConfirmOpen,
32+
] = useState(false);
33+
34+
// component did mount
35+
useEffect(() => {
36+
fetchMetadataDefinition(metadataDefinitionId);
37+
}, []);
38+
39+
// Error msg dialog
40+
const [errorOpen, setErrorOpen] = useState(false);
41+
42+
// for breadcrumb
43+
const paths = [
44+
{
45+
name: "Metadata Definitions",
46+
url: "/metadata-definitions",
47+
},
48+
{
49+
name: metadataDefinition.name,
50+
url: `/metadata-definitions/${metadataDefinition.id}`,
51+
},
52+
];
53+
54+
return (
55+
<Layout>
56+
{/*Error Message dialogue*/}
57+
<ErrorModal errorOpen={errorOpen} setErrorOpen={setErrorOpen} />
58+
{/*breadcrumb*/}
59+
<Grid container>
60+
<Grid item xs={10} sx={{ display: "flex", alignItems: "center" }}>
61+
<MainBreadcrumbs paths={paths} />
62+
</Grid>
63+
</Grid>
64+
<DeleteMetadataDefinitionModal
65+
deleteMetadataDefinitionConfirmOpen={
66+
deleteMetadataDefinitionConfirmOpen
67+
}
68+
setDeleteMetadataDefinitionConfirmOpen={
69+
setDeleteMetadataDefinitionConfirmOpen
70+
}
71+
metdataDefinitionId={metadataDefinition.id}
72+
/>
73+
{/*Header & menus*/}
74+
<Grid container>
75+
<Grid
76+
item
77+
xs={12}
78+
sm={12}
79+
md={8}
80+
lg={9}
81+
sx={{
82+
display: "flex",
83+
justifyContent: "flex-start",
84+
alignItems: "baseline",
85+
}}
86+
>
87+
<Box sx={{ display: "flex", flexDirection: "column" }}>
88+
<Box
89+
sx={{
90+
display: "flex",
91+
flexDirection: "flex-start",
92+
alignItems: "baseline",
93+
}}
94+
>
95+
<Typography variant="h3" paragraph>
96+
{metadataDefinition.name !== undefined
97+
? metadataDefinition.name
98+
: "Not found"}
99+
</Typography>
100+
</Box>
101+
<Typography variant="body1" paragraph>
102+
{metadataDefinition.description !== undefined
103+
? metadataDefinition.description
104+
: ""}
105+
</Typography>
106+
<Typography variant="body1" paragraph>
107+
<strong>Creator: </strong>
108+
{metadataDefinition.creator !== undefined &&
109+
metadataDefinition.creator.email !== undefined ? (
110+
<Link href={`mailto:${metadataDefinition.creator.email}`}>
111+
{metadataDefinition.creator.email}
112+
</Link>
113+
) : (
114+
<></>
115+
)}
116+
</Typography>
117+
</Box>
118+
</Grid>
119+
120+
{/*Buttons*/}
121+
<Grid
122+
item
123+
xs={12}
124+
sm={12}
125+
md={4}
126+
lg={3}
127+
sx={{
128+
display: "flex",
129+
justifyContent: "flex-end",
130+
alignItems: "baseline",
131+
flexDirection: "row",
132+
}}
133+
>
134+
<Button
135+
variant="contained"
136+
aria-label="delete"
137+
onClick={() => {
138+
setDeleteMetadataDefinitionConfirmOpen(true);
139+
}}
140+
endIcon={<DeleteIcon />}
141+
sx={{ float: "right" }}
142+
>
143+
Delete
144+
</Button>
145+
</Grid>
146+
</Grid>
147+
<ReactJson
148+
src={metadataDefinition}
149+
theme="summerfruit:inverted"
150+
displayObjectSize={false}
151+
displayDataTypes={false}
152+
name={false}
153+
/>
154+
</Layout>
155+
);
156+
}

‎frontend/src/components/metadata/MetadataDefinitions.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { ErrorModal } from "../errors/ErrorModal";
3232
import { CreateMetadataDefinition } from "./CreateMetadataDefinition";
3333
import DeleteIcon from "@mui/icons-material/Delete";
3434
import DeleteMetadataDefinitionModal from "./DeleteMetadataDefinitionModal";
35+
import { Link } from "react-router-dom";
3536

3637
export function MetadataDefinitions() {
3738
// Redux connect equivalent
@@ -240,14 +241,12 @@ export function MetadataDefinitions() {
240241
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
241242
>
242243
<TableCell scope="row" key={`${mdd.id}-name`}>
243-
{/*TODO write individual metadata definition page*/}
244-
{/*<Button*/}
245-
{/* component={Link}*/}
246-
{/* to={`/metadata-definitions/${mdd.id}`}*/}
247-
{/*>*/}
248-
{/* {mdd.name}*/}
249-
{/*</Button>*/}
250-
{mdd.name}
244+
<Button
245+
component={Link}
246+
to={`/metadata-definitions/${mdd.id}`}
247+
>
248+
{mdd.name}
249+
</Button>
251250
</TableCell>
252251
<TableCell
253252
scope="row"

‎frontend/src/routes.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { ApiKeys } from "./components/ApiKeys/ApiKey";
3131
import { Profile } from "./components/users/Profile";
3232
import config from "./app.config";
3333
import { MetadataDefinitions } from "./components/metadata/MetadataDefinitions";
34+
import { MetadataDefinitionEntry } from "./components/metadata/MetadataDefinitionEntry";
3435

3536
// https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5
3637
const PrivateRoute = (props): JSX.Element => {
@@ -129,14 +130,14 @@ export const AppRoutes = (): JSX.Element => {
129130
</PrivateRoute>
130131
}
131132
/>
132-
{/*<Route*/}
133-
{/* path="/metadata-definitions/:metadataDefinitionId"*/}
134-
{/* element={*/}
135-
{/* <PrivateRoute>*/}
136-
{/* <MetadataDefinitionPage />*/}
137-
{/* </PrivateRoute>*/}
138-
{/* }*/}
139-
{/*/>*/}
133+
<Route
134+
path="/metadata-definitions/:metadataDefinitionId"
135+
element={
136+
<PrivateRoute>
137+
<MetadataDefinitionEntry />
138+
</PrivateRoute>
139+
}
140+
/>
140141
<Route
141142
path="/create-dataset/"
142143
element={

0 commit comments

Comments
 (0)