Skip to content

Commit 62211d0

Browse files
huypham048huypham048
committed
finished creating layout for 3 tabs
Co-authored-by: Sal Saluga [email protected] Co-authored-by: Ken Bains [email protected] Co-authored-by: Bianca Picasso [email protected]
1 parent d81e577 commit 62211d0

File tree

6 files changed

+188
-32
lines changed

6 files changed

+188
-32
lines changed

‎app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import * as React from 'react';
2+
import { styled } from '@mui/material/styles';
3+
import Table from '@mui/material/Table';
4+
import TableBody from '@mui/material/TableBody';
5+
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
6+
import TableContainer from '@mui/material/TableContainer';
7+
import TableHead from '@mui/material/TableHead';
8+
import TableRow from '@mui/material/TableRow';
9+
import Paper from '@mui/material/Paper';
10+
11+
const StyledTableCell = styled(TableCell)(({ theme }) => ({
12+
[`&.${tableCellClasses.head}`]: {
13+
backgroundColor: theme.palette.common.black,
14+
color: theme.palette.common.white
15+
},
16+
[`&.${tableCellClasses.body}`]: {
17+
fontSize: 14
18+
}
19+
}));
20+
21+
const StyledTableRow = styled(TableRow)(({ theme }) => ({
22+
'&:nth-of-type(odd)': {
23+
backgroundColor: theme.palette.action.hover
24+
},
25+
// hide last border
26+
'&:last-child td, &:last-child th': {
27+
border: 0
28+
}
29+
}));
30+
31+
function createData(
32+
name: string,
33+
calories: number,
34+
fat: number,
35+
carbs: number,
36+
protein: number
37+
) {
38+
return { name, calories, fat, carbs, protein };
39+
}
40+
41+
const rows = [
42+
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
43+
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
44+
createData('Eclair', 262, 16.0, 24, 6.0),
45+
createData('Cupcake', 305, 3.7, 67, 4.3),
46+
createData('Gingerbread', 356, 16.0, 49, 3.9)
47+
];
48+
49+
export default function ContextTable() {
50+
return (
51+
<TableContainer component={Paper}>
52+
<Table sx={{ width: '100%' }} aria-label="customized table">
53+
<TableHead>
54+
<TableRow>
55+
<StyledTableCell>Component</StyledTableCell>
56+
<StyledTableCell align="right">Context</StyledTableCell>
57+
</TableRow>
58+
</TableHead>
59+
<TableBody>
60+
{rows.map(row => (
61+
<StyledTableRow key={row.name}>
62+
<StyledTableCell component="th" scope="row">
63+
{row.name}
64+
</StyledTableCell>
65+
<StyledTableCell align="right">{row.component}</StyledTableCell>
66+
<StyledTableCell align="right">{row.fat}</StyledTableCell>
67+
<StyledTableCell align="right">{row.carbs}</StyledTableCell>
68+
<StyledTableCell align="right">{row.protein}</StyledTableCell>
69+
</StyledTableRow>
70+
))}
71+
</TableBody>
72+
</Table>
73+
</TableContainer>
74+
);
75+
}

‎app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import * as React from 'react';
2+
import { styled } from '@mui/material/styles';
3+
import Table from '@mui/material/Table';
4+
import TableBody from '@mui/material/TableBody';
5+
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
6+
import TableContainer from '@mui/material/TableContainer';
7+
import TableHead from '@mui/material/TableHead';
8+
import TableRow from '@mui/material/TableRow';
9+
import Paper from '@mui/material/Paper';
10+
11+
const StyledTableCell = styled(TableCell)(({ theme }) => ({
12+
[`&.${tableCellClasses.head}`]: {
13+
backgroundColor: theme.palette.common.black,
14+
color: theme.palette.common.white
15+
},
16+
[`&.${tableCellClasses.body}`]: {
17+
fontSize: 14
18+
}
19+
}));
20+
21+
const StyledTableRow = styled(TableRow)(({ theme }) => ({
22+
'&:nth-of-type(odd)': {
23+
backgroundColor: theme.palette.action.hover
24+
},
25+
// hide last border
26+
'&:last-child td, &:last-child th': {
27+
border: 0
28+
}
29+
}));
30+
31+
function createData(
32+
name: string,
33+
calories: number,
34+
fat: number,
35+
carbs: number,
36+
protein: number
37+
) {
38+
return { name, calories, fat, carbs, protein };
39+
}
40+
41+
const rows = [
42+
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
43+
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
44+
createData('Eclair', 262, 16.0, 24, 6.0),
45+
createData('Cupcake', 305, 3.7, 67, 4.3),
46+
createData('Gingerbread', 356, 16.0, 49, 3.9)
47+
];
48+
49+
export default function ContextTable() {
50+
return (
51+
<TableContainer component={Paper}>
52+
<Table sx={{ width: '100%' }} aria-label="customized table">
53+
<TableHead>
54+
<TableRow>
55+
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
56+
<StyledTableCell align="right">Calories</StyledTableCell>
57+
</TableRow>
58+
</TableHead>
59+
<TableBody>
60+
{rows.map(row => (
61+
<StyledTableRow key={row.name}>
62+
<StyledTableCell component="th" scope="row">
63+
{row.name}
64+
</StyledTableCell>
65+
<StyledTableCell align="right">{row.calories}</StyledTableCell>
66+
</StyledTableRow>
67+
))}
68+
</TableBody>
69+
</Table>
70+
</TableContainer>
71+
);
72+
}

‎app/src/components/ContextAPIManager/ContextAssigner.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { Typography } from '@material-ui/core';
22
import React from 'react';
3+
import ContextTable from './AssignerComponents/ContextTable';
34

45
const ContextAssigner = () => {
5-
return <Typography variant="h1">Context Assigner</Typography>;
6+
return <ContextTable />;
67
};
78

89
export default ContextAssigner;

‎app/src/components/ContextAPIManager/ContextManager.tsx

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,29 @@ import { makeStyles } from '@material-ui/styles';
66
const useStyles = makeStyles({
77
contextContainer: {
88
backgroundColor: 'white',
9-
display: 'grid',
10-
border: '1px solid red',
11-
gridTemplateColumns: '25% 75%',
9+
// display: 'grid',
10+
// gridTemplateColumns: '100%',
1211
height: '100%'
13-
},
12+
}
1413

15-
leftContext: {
16-
display: 'flex',
17-
flexDirection: 'column',
18-
border: '1px solid blue'
19-
},
14+
// leftContext: {
15+
// display: 'flex',
16+
// // flexDirection: 'column',
17+
// border: '1px solid blue'
18+
// }
2019

21-
childContext: {
22-
flex: '1',
23-
border: '1px solid blue'
24-
}
20+
// childContext: {
21+
// flex: '1',
22+
// border: '1px solid blue'
23+
// }
2524
});
2625
const ContextManager = (props): JSX.Element => {
2726
const classes = useStyles();
2827

2928
return (
3029
<React.Fragment>
3130
<div className={classes.contextContainer}>
32-
<div className={classes.leftContext}>
33-
<div className={classes.childContext}>
34-
<ContextTab />
35-
</div>
36-
</div>
37-
<div className="rightContext">
38-
<ContextTree />
39-
</div>
31+
<ContextTab />
4032
</div>
4133
</React.Fragment>
4234
);

‎app/src/components/ContextAPIManager/ContextTab.tsx

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,9 @@ import Tab from '@mui/material/Tab';
7373
import TabContext from '@mui/lab/TabContext';
7474
import TabList from '@mui/lab/TabList';
7575
import TabPanel from '@mui/lab/TabPanel';
76+
import ContextCreator from './ContextCreator';
77+
import ContextAssigner from './ContextAssigner';
78+
import ContextTree from './ContextTree';
7679

7780
export default function LabTabs() {
7881
const [value, setValue] = React.useState('1');
@@ -85,15 +88,27 @@ export default function LabTabs() {
8588
<Box sx={{ width: '100%', typography: 'body1' }}>
8689
<TabContext value={value}>
8790
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
88-
<TabList onChange={handleChange} aria-label="lab API tabs example">
89-
<Tab label="Item One" value="1" />
90-
<Tab label="Item Two" value="2" />
91-
<Tab label="Item Three" value="3" />
91+
<TabList
92+
onChange={handleChange}
93+
aria-label="lab API tabs example"
94+
centered={true}
95+
// indicatorColor={'warning'}
96+
// textColor={'secondary'}
97+
>
98+
<Tab label="Create/Edit" value="1" />
99+
<Tab label="Assign" value="2" />
100+
<Tab label="Display" value="3" />
92101
</TabList>
93102
</Box>
94-
<TabPanel value="1">Item One</TabPanel>
95-
<TabPanel value="2">Item Two</TabPanel>
96-
<TabPanel value="3">Item Three</TabPanel>
103+
<TabPanel value="1">
104+
<ContextCreator />
105+
</TabPanel>
106+
<TabPanel value="2">
107+
<ContextAssigner />
108+
</TabPanel>
109+
<TabPanel value="3">
110+
<ContextTree />
111+
</TabPanel>
97112
</TabContext>
98113
</Box>
99114
);

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@
117117
"@apollo/client": "^3.3.11",
118118
"@babel/cli": "^7.10.4",
119119
"@babel/register": "^7.10.4",
120+
"@mui/lab": "^5.0.0-alpha.83",
120121
"@types/js-cookie": "^2.2.6",
121122
"@types/node": "^14.0.20",
122123
"@types/prettier": "^1.19.0",
@@ -171,11 +172,11 @@
171172
"@babel/preset-env": "^7.16.0",
172173
"@babel/preset-react": "^7.16.0",
173174
"@babel/preset-typescript": "^7.16.0",
174-
"@emotion/react": "^11.7.1",
175-
"@emotion/styled": "^11.6.0",
175+
"@emotion/react": "^11.9.0",
176+
"@emotion/styled": "^11.8.1",
176177
"@material-ui/core": "^4.12.3",
177178
"@material-ui/icons": "^4.11.2",
178-
"@mui/material": "^5.2.8",
179+
"@mui/material": "^5.8.1",
179180
"@mui/styled-engine-sc": "^5.1.0",
180181
"@mui/x-data-grid": "^5.2.1",
181182
"@testing-library/jest-dom": "^5.11.5",

0 commit comments

Comments
 (0)