Skip to content

Commit 3e059ef

Browse files
huypham048huypham048
committed
added component table
Co-authored-by: Sal Saluga [email protected] Co-authored-by: Ken Bains [email protected]
1 parent 7a82780 commit 3e059ef

File tree

6 files changed

+296
-84
lines changed

6 files changed

+296
-84
lines changed

‎app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx

Lines changed: 93 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,110 @@
1-
import { Typography } from '@material-ui/core';
21
import React, { useContext, useState, Fragment, useEffect } from 'react';
3-
import ContextTable from './components/ContextTable';
2+
import DataTable from '../CreateTab/components/DataTable';
43
import { useStore } from 'react-redux';
5-
import StateContext from '../../../context/context';
64
import ContextDropDown from './components/ContextDropDown';
5+
import ComponentDropDown from './components/ComponentDropDrown';
6+
import Divider from '@mui/material/Divider';
7+
import Grid from '@mui/material/Grid';
8+
import ComponentTable from './components/ComponentTable';
9+
import { Button } from '@mui/material';
10+
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
711

812
const AssignContainer = () => {
9-
const [state, setState] = useState(null);
13+
const [state, setState] = useState([]);
14+
const defaultTableData = [{ key: 'Key', value: 'Value' }];
15+
const [tableState, setTableState] = React.useState(defaultTableData);
16+
const store = useStore();
17+
const [contextInput, setContextInput] = React.useState(null);
18+
const [componentInput, setComponentInput] = React.useState(null);
19+
const [componentTable, setComponentTable] = useState([]);
1020

1121
useEffect(() => {
1222
setState(store.getState().contextSlice);
1323
}, []);
1424

15-
// const [componentList, setComponentList] = useContext(StateContext);
16-
17-
const store = useStore();
18-
19-
console.log(componentList);
25+
const renderTable = targetContext => {
26+
if (!targetContext.values) {
27+
setTableState(defaultTableData);
28+
} else {
29+
setTableState(targetContext.values);
30+
}
31+
};
2032

21-
//create an onclick for assign
33+
const renderComponentTable = targetContext => {
34+
console.log('current component is', targetContext);
35+
if (!targetContext.values) {
36+
const listOfContexts = [];
37+
if (!Array.isArray(state)) {
38+
state.allContext.forEach(context => {
39+
console.log('each context is', context);
40+
if (context.components.includes(targetContext))
41+
listOfContexts.push(context.name);
42+
});
43+
}
44+
// setComponentTable(defaultTableData);
45+
setComponentTable(listOfContexts);
46+
} else {
47+
setComponentTable(targetContext.values);
48+
}
49+
};
2250

2351
return (
2452
<Fragment>
25-
<ContextDropDown contextList={state} />
26-
<ContextTable />
53+
<Grid container display="flex" justifyContent="space-evenly">
54+
<Grid item>
55+
<Grid
56+
container
57+
spacing={2}
58+
display="flex"
59+
direction="column"
60+
justifyContent="center"
61+
alignItems="center"
62+
>
63+
<Grid item>
64+
<ContextDropDown
65+
contextStore={state}
66+
renderTable={renderTable}
67+
contextInput={contextInput}
68+
setContextInput={setContextInput}
69+
/>
70+
</Grid>
71+
72+
<Grid item>
73+
<DataTable target={tableState} />
74+
</Grid>
75+
</Grid>
76+
</Grid>
77+
<Divider orientation="vertical" variant="middle" flexItem>
78+
<Button>
79+
<DoubleArrowIcon fontSize="large" color="primary" />
80+
</Button>
81+
</Divider>
82+
<Grid item>
83+
<Grid item>
84+
<Grid
85+
container
86+
spacing={2}
87+
display="flex"
88+
direction="column"
89+
justifyContent="center"
90+
alignItems="center"
91+
>
92+
<Grid item>
93+
<ComponentDropDown
94+
contextStore={state}
95+
renderComponentTable={renderComponentTable}
96+
componentInput={componentInput}
97+
setComponentInput={setComponentInput}
98+
/>
99+
</Grid>
100+
101+
<Grid item>
102+
<ComponentTable target={componentTable} />
103+
</Grid>
104+
</Grid>
105+
</Grid>
106+
</Grid>
107+
</Grid>
27108
</Fragment>
28109
);
29110
};

‎app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React, { Fragment, useState, useEffect, useContext } from 'react';
2+
import TextField from '@mui/material/TextField';
3+
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
4+
import Box from '@mui/material/Box';
5+
import StateContext from '../../../../context/context';
6+
7+
const filter = createFilterOptions();
8+
9+
const ComponentDropDown = ({
10+
contextStore,
11+
renderComponentTable,
12+
componentInput,
13+
setComponentInput
14+
}) => {
15+
const { allContext } = contextStore;
16+
const [componentList, dispatch] = useContext(StateContext);
17+
18+
console.log('list of components', componentList);
19+
const onChange = (event, newValue) => {
20+
if (typeof newValue === 'string') {
21+
setComponentInput({
22+
name: newValue
23+
});
24+
} else if (newValue && newValue.inputValue) {
25+
// Create a new contextInput from the user input
26+
//console.log(newValue,newValue.inputValue)
27+
setComponentInput({
28+
name: newValue.inputValue,
29+
values: []
30+
});
31+
renderComponentTable(newValue);
32+
} else {
33+
setComponentInput(newValue);
34+
renderComponentTable(newValue);
35+
}
36+
};
37+
38+
const filterOptions = (options, params) => {
39+
// setBtnDisabled(true);
40+
const filtered = filter(options, params);
41+
const { inputValue } = params;
42+
// Suggest the creation of a new contextInput
43+
const isExisting = options.some(option => inputValue === option.name);
44+
if (inputValue !== '' && !isExisting) {
45+
filtered.push({
46+
inputValue,
47+
name: `Add "${inputValue}"`
48+
});
49+
50+
// setBtnDisabled(false);
51+
}
52+
53+
return filtered;
54+
};
55+
56+
const getOptionLabel = option => {
57+
// Value selected with enter, right from the input
58+
if (typeof option === 'string') {
59+
return option;
60+
}
61+
// Add "xxx" option created dynamically
62+
if (option.inputValue) {
63+
return option.inputValue;
64+
}
65+
// Regular option
66+
return option.name;
67+
};
68+
69+
const renderOption = (props, option) => <li {...props}>{option.name}</li>;
70+
71+
return (
72+
<Fragment>
73+
<Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
74+
<Autocomplete
75+
id="autoCompleteContextField"
76+
value={componentInput}
77+
onChange={onChange}
78+
filterOptions={filterOptions}
79+
selectOnFocus
80+
clearOnBlur
81+
handleHomeEndKeys
82+
options={componentList.components || []}
83+
getOptionLabel={getOptionLabel}
84+
renderOption={renderOption}
85+
sx={{ width: 425 }}
86+
freeSolo
87+
renderInput={params => (
88+
<TextField {...params} label="Select Component" />
89+
)}
90+
/>
91+
</Box>
92+
</Fragment>
93+
);
94+
};
95+
96+
export default ComponentDropDown;

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

Lines changed: 9 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import * as React from 'react';
2-
import { styled } from '@mui/material/styles';
1+
import React from 'react';
32
import Table from '@mui/material/Table';
43
import TableBody from '@mui/material/TableBody';
5-
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
64
import TableContainer from '@mui/material/TableContainer';
75
import TableHead from '@mui/material/TableHead';
86
import TableRow from '@mui/material/TableRow';
97
import Paper from '@mui/material/Paper';
8+
import { styled } from '@mui/material/styles';
9+
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
1010

1111
const StyledTableCell = styled(TableCell)(({ theme }) => ({
1212
[`&.${tableCellClasses.head}`]: {
@@ -28,44 +28,21 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
2828
}
2929
}));
3030

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 ComponentTable() {
31+
export default function DataTable({ target }) {
5032
return (
5133
<TableContainer component={Paper}>
52-
<Table sx={{ width: '100%' }} aria-label="customized table">
34+
<Table sx={{ width: '510px' }} aria-label="customized table">
5335
<TableHead>
5436
<TableRow>
55-
<StyledTableCell>Component</StyledTableCell>
56-
<StyledTableCell align="right">Context</StyledTableCell>
37+
<StyledTableCell>Key</StyledTableCell>
5738
</TableRow>
5839
</TableHead>
5940
<TableBody>
60-
{rows.map(row => (
61-
<StyledTableRow key={row.name}>
41+
{target.map((data, index) => (
42+
<StyledTableRow key={index}>
6243
<StyledTableCell component="th" scope="row">
63-
{row.name}
44+
{data}
6445
</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>
6946
</StyledTableRow>
7047
))}
7148
</TableBody>

0 commit comments

Comments
 (0)