Skip to content

Commit 88919e8

Browse files
tlukasiewicz89tlukasiewicz89
committed
added table 3
1 parent 645b65c commit 88919e8

File tree

4 files changed

+195
-15
lines changed

4 files changed

+195
-15
lines changed

‎app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import {
2626
import StateContext from "../../../../context/context";
2727
import TableStateProps from "./TableStateProps";
2828
import TableParentProps from "./TableParentProps";
29+
import Table3 from "./Table3";
30+
2931

3032
const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
3133
const [state, dispatch] = useContext(StateContext);
@@ -227,18 +229,22 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
227229
</FormControl>
228230
</div>
229231
<br></br>
230-
<div>
232+
<div style={{display: 'flex', overflowX: 'scroll', width: '1000px'}}>
231233
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
232234
Current Component State: {state.components[state.canvasFocus.componentId - 1].name}
233235
</h4>
234236
<TableStateProps rows1={rows1} setRows1={setRows1} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
235237

236238

237-
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
238-
Props from Parent: {parentName ? parentName : 'No Parents'}
239-
</h4>
240-
241-
<TableParentProps parentComponent ={parentComponent} parentProps={parentProps} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
239+
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
240+
Available Props from Parent: {parentName ? parentName : 'No Parents'}
241+
</h4>
242+
243+
<TableParentProps parentComponent ={parentComponent} parentProps={parentProps} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
244+
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
245+
Passed in Props from Parent: {parentName ? parentName : 'No Parents'}
246+
</h4>
247+
<Table3 canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
242248

243249

244250

‎app/src/components/StateManagement/CreateTab/components/Table3.tsx

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import React, { useState, useContext, useEffect } from 'react';
2+
import {
3+
DataGrid,
4+
GridEditRowsModel,
5+
} from '@mui/x-data-grid';
6+
import Button from '@material-ui/core/Button';
7+
import ClearIcon from '@material-ui/icons/Clear';
8+
import StateContext from "../../../../context/context";
9+
import { makeStyles } from '@material-ui/core/styles';
10+
import { StatePropsPanelProps } from '../../../../interfaces/Interfaces';
11+
import AddIcon from '@mui/icons-material/Add';
12+
13+
const Table3 = props => {
14+
// console.log('props from table state props', props)
15+
const [state, dispatch] = useContext(StateContext);
16+
const classes = useStyles();
17+
const [editRowsModel] = useState<GridEditRowsModel>({});
18+
const [gridColumns, setGridColumns] = useState([]);
19+
const currentId = state.canvasFocus.componentId;
20+
const currentComponent = state.components[currentId - 1];
21+
console.log({currentComponent});
22+
const passedInProps = currentComponent.name !== 'App' ? currentComponent.passedInProps : '';
23+
const columnTabs = [
24+
{
25+
field: 'id',
26+
headerName: 'ID',
27+
width: 70,
28+
editable: false
29+
},
30+
{
31+
field: 'key',
32+
headerName: 'Key',
33+
width: 90,
34+
editable: true
35+
},
36+
{
37+
field: 'value',
38+
headerName: 'Value',
39+
width: 90,
40+
editable: true
41+
},
42+
{
43+
field: 'type',
44+
headerName: 'Type',
45+
width: 90,
46+
editable: false
47+
},
48+
{
49+
field: 'delete',
50+
headerName: '+',
51+
width: 70,
52+
editable: false,
53+
renderCell: function renderCell(params: any) {
54+
return (
55+
<Button
56+
style={{ width: `${3}px`, color: 'black'}}
57+
onClick={() => {
58+
console.log('params inside button', params)
59+
deleteParentProps(params.row, params.id);
60+
}}
61+
>
62+
<AddIcon style={{ width: `${15}px` }} />
63+
</Button>
64+
65+
);
66+
}
67+
}
68+
];
69+
const deleteParentProps = (parentComponentProps, rowId) => {
70+
// get the current focused component
71+
// remove the state that the button is clicked
72+
// send a dispatch to rerender the table
73+
// const currentId = state.canvasFocus.componentId;
74+
// const currentComponent = state.components[currentId - 1];
75+
console.log("inside of addParentProps");
76+
console.log({rowId});
77+
console.log('params.row', {parentComponentProps}) //this isn't working-- returning undefined instead of correct component
78+
// console.log('parentProps', parentProps) //this isn't working-- returning undefined instead of correct component
79+
// const filtered = parentComponent?.stateProps?.filter(
80+
// element => element.id === selectedId - 1
81+
// );
82+
// console.log({filtered});
83+
dispatch({
84+
type: 'DELETE PARENTPROPS',
85+
payload: { passedInProps: parentComponentProps, rowId: rowId }
86+
});
87+
};
88+
89+
90+
91+
useEffect(() => {
92+
setGridColumns(columnTabs);
93+
}, [props.isThemeLight]);
94+
95+
const { selectHandler }: StatePropsPanelProps = props;
96+
// the delete button needs to be updated to remove
97+
// the states from the current focused component
98+
99+
useEffect(() => {
100+
if (props.canDeleteState) {
101+
setGridColumns(columnTabs);
102+
} else {
103+
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
104+
}
105+
106+
}, [state.canvasFocus.componentId]);
107+
// rows to show are either from current component or from a given provider
108+
// legacy pd convert parent props into a row array
109+
// if (!props.providerId) {
110+
// const currentId = state.canvasFocus.componentId;
111+
// const currentComponent = state.components[currentId - 1];
112+
// rows = currentComponent.stateProps.slice();
113+
// } else {
114+
// const providerComponent = state.components[props.providerId - 1];
115+
// // changed to get whole object
116+
// if (props.displayObject){
117+
// const displayObject = props.displayObject;
118+
// // format for DataGrid
119+
// let id=1;
120+
// for (const key in displayObject) {
121+
// // if key is a number make it a string with brackets aroung number
122+
// const newKey = isNaN(key) ? key : '[' + key + ']';
123+
// const type = Array.isArray(displayObject[key]) ? 'array' : typeof (displayObject[key]);
124+
// rows.push({ id: id++, key: newKey, value: displayObject[key], type: type});
125+
// }
126+
// } else {
127+
// rows = providerComponent.stateProps.slice();
128+
// }
129+
// }
130+
131+
132+
return (
133+
<div className={'state-prop-grid'}>
134+
<DataGrid
135+
rows={passedInProps}
136+
columns={gridColumns}
137+
pageSize={5}
138+
editRowsModel={editRowsModel}
139+
onRowClick={deleteParentProps}
140+
className={props.isThemeLight ? classes.themeLight : classes.themeDark}
141+
checkboxSelection
142+
/>
143+
</div>
144+
);
145+
};
146+
147+
const useStyles = makeStyles({
148+
themeLight: {
149+
color: 'rgba(0,0,0,0.54)',
150+
'& .MuiTablePagination-root': {
151+
color: 'rbga(0,0,0,0.54)'
152+
}
153+
},
154+
themeDark: {
155+
color: 'white',
156+
'& .MuiTablePagination-root': {
157+
color: 'white'
158+
},
159+
'& .MuiIconButton-root': {
160+
color: 'white'
161+
},
162+
'& .MuiSvgIcon-root': {
163+
color: 'white'
164+
},
165+
'& .MuiDataGrid-window': {
166+
backgroundColor: 'rgba(0,0,0,0.54)'
167+
}
168+
}
169+
});
170+
171+
export default Table3;

‎app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const TableParentProps = props => {
1616
const classes = useStyles();
1717
const [editRowsModel] = useState<GridEditRowsModel>({});
1818
const [gridColumns, setGridColumns] = useState([]);
19+
const [checked, setChecked] = useState(false);
1920
const parentProps = props.parentProps;
2021
const parentComponent = props.parentComponent;
2122
const columnTabs = [
@@ -59,6 +60,7 @@ const TableParentProps = props => {
5960
>
6061
<AddIcon style={{ width: `${15}px` }} />
6162
</Button>
63+
6264
);
6365
}
6466
}
@@ -128,15 +130,16 @@ const TableParentProps = props => {
128130

129131

130132
return (
131-
<div className={'state-prop-grid'} style={{display: 'flex', gap: "20px"}}>
133+
<div className={'state-prop-grid'}>
132134
{(rows.length &&
133135
<DataGrid
134136
rows={rows}
135137
columns={gridColumns}
136138
pageSize={5}
137139
editRowsModel={editRowsModel}
138-
onRowClick={selectHandler}
140+
onRowClick={addParentProps}
139141
className={props.isThemeLight ? classes.themeLight : classes.themeDark}
142+
checkboxSelection
140143
/>
141144
)}
142145
</div>

‎app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ const TableStateProps = props => {
104104
let rows = [];
105105

106106

107-
const passedInProps = currentComponent.passedInProps?.slice();
108-
console.log({passedInProps});
107+
// const passedInProps = currentComponent.passedInProps?.slice();
108+
// console.log({passedInProps});
109109

110-
passedInProps?.forEach(propObj => {
111-
rows.push(propObj)
112-
})
110+
// passedInProps?.forEach(propObj => {
111+
// rows.push(propObj)
112+
// })
113113

114114
console.log("rows before pushing stateProps", rows);
115115

@@ -154,9 +154,9 @@ const TableStateProps = props => {
154154

155155

156156
return (
157-
<div className={'state-prop-grid'} style={{display: 'flex', gap: "20px"}}>
157+
<div className={'state-prop-grid'}>
158158
<DataGrid
159-
rows={rows1}
159+
rows={rows}
160160
columns={gridColumns}
161161
pageSize={5}
162162
editRowsModel={editRowsModel}

0 commit comments

Comments
 (0)