Skip to content

Commit 34a6031

Browse files
huypham048huypham048
authored
Merge pull request #3 from oslabs-beta/assignTab
finished mvp
2 parents 0cc13ea + 6eeaa01 commit 34a6031

23 files changed

+824
-202
lines changed

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

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import React, { useContext, useState, Fragment, useEffect } from 'react';
2+
import DataTable from '../CreateTab/components/DataTable';
3+
import { useStore, useDispatch } from 'react-redux';
4+
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';
11+
import * as actions from '../../../redux/actions/actions';
12+
13+
const AssignContainer = () => {
14+
const store = useStore();
15+
const dispatch = useDispatch();
16+
17+
const [state, setState] = useState([]);
18+
const defaultTableData = [{ key: 'Key', value: 'Value' }];
19+
const [tableState, setTableState] = React.useState(defaultTableData);
20+
const [contextInput, setContextInput] = React.useState(null);
21+
const [componentInput, setComponentInput] = React.useState(null);
22+
const [componentTable, setComponentTable] = useState([]);
23+
24+
useEffect(() => {
25+
setState(store.getState().contextSlice);
26+
}, []);
27+
28+
const renderTable = targetContext => {
29+
if (!targetContext.values) {
30+
setTableState(defaultTableData);
31+
} else {
32+
setTableState(targetContext.values);
33+
}
34+
};
35+
//checks if state is no longer an array, thus an object and will eventually render out the fetched
36+
const renderComponentTable = targetComponent => {
37+
//target Component is main
38+
39+
const listOfContexts = [];
40+
if (!Array.isArray(state)) {
41+
state.allContext.forEach(context => {
42+
if (context.components.includes(targetComponent.name)) {
43+
listOfContexts.push(context.name);
44+
}
45+
});
46+
setComponentTable(listOfContexts);
47+
}
48+
};
49+
50+
const handleAssignment = () => {
51+
dispatch(
52+
actions.addComponentToContext({
53+
context: contextInput,
54+
component: componentInput
55+
})
56+
);
57+
58+
setState(store.getState().contextSlice);
59+
renderComponentTable(componentInput);
60+
};
61+
62+
return (
63+
<Fragment>
64+
<Grid container display="flex" justifyContent="space-evenly">
65+
<Grid item>
66+
<Grid
67+
container
68+
spacing={2}
69+
display="flex"
70+
direction="column"
71+
justifyContent="center"
72+
alignItems="center"
73+
>
74+
<Grid item>
75+
<ContextDropDown
76+
contextStore={state}
77+
renderTable={renderTable}
78+
contextInput={contextInput}
79+
setContextInput={setContextInput}
80+
/>
81+
</Grid>
82+
83+
<Grid item>
84+
<DataTable target={tableState} />
85+
</Grid>
86+
</Grid>
87+
</Grid>
88+
<Divider orientation="vertical" variant="middle" flexItem>
89+
<Button onClick={handleAssignment}>
90+
<DoubleArrowIcon fontSize="large" color="primary" />
91+
</Button>
92+
</Divider>
93+
<Grid item>
94+
<Grid item>
95+
<Grid
96+
container
97+
spacing={2}
98+
display="flex"
99+
direction="column"
100+
justifyContent="center"
101+
alignItems="center"
102+
>
103+
<Grid item>
104+
<ComponentDropDown
105+
contextStore={state}
106+
renderComponentTable={renderComponentTable}
107+
componentInput={componentInput}
108+
setComponentInput={setComponentInput}
109+
/>
110+
</Grid>
111+
112+
<Grid item>
113+
<ComponentTable target={componentTable} />
114+
</Grid>
115+
</Grid>
116+
</Grid>
117+
</Grid>
118+
</Grid>
119+
</Fragment>
120+
);
121+
};
122+
123+
export default AssignContainer;

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

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

‎app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx renamed to ‎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 ContextTable() {
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>Contexts Consumed</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>

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

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

0 commit comments

Comments
 (0)