Skip to content

Commit 6ba1ee5

Browse files
hakeemsalmanhakeemsalman
committed
Fix: Select All minor changes
1 parent 32ebf52 commit 6ba1ee5

File tree

1 file changed

+99
-95
lines changed

1 file changed

+99
-95
lines changed

‎client/src/components/ComponentList.js‎

Lines changed: 99 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React,{useState,useContext} from 'react';
2-
import { GlobalContext } from "../App";
3-
import { makeStyles } from '@material-ui/core/styles';
1+
import React, {useState, useContext} from 'react';
2+
import {GlobalContext} from "../App";
3+
import {makeStyles} from '@material-ui/core/styles';
44
import Card from '@material-ui/core/Card';
55
import CardHeader from '@material-ui/core/CardHeader';
66
import CardContent from '@material-ui/core/CardContent';
@@ -25,139 +25,143 @@ const useStyles = makeStyles({
2525
}
2626
});
2727

28-
export default function ComponentList({selectedMetadataType,isShowChildren}) {
28+
export default function ComponentList({selectedMetadataType, isShowChildren}) {
2929
const classes = useStyles();
30-
const { dispatch }= useContext(GlobalContext);
31-
const [filterKey,setFilterKey] = useState("");
30+
const {dispatch} = useContext(GlobalContext);
31+
const [filterKey, setFilterKey] = useState("");
3232

33-
const handleComponentClick = (component,evt)=>{
33+
const handleComponentClick = (component, evt) => {
3434
console.log("handleComponentClick invoked ComponentList.js");
35-
const isChecked=evt.target.checked;
36-
const compId=component.id;
37-
selectedMetadataType.children=selectedMetadataType.children.map(child=>{
38-
if(compId===child.id){
39-
child.isSelected=isChecked;//update the child state
35+
const isChecked = evt.target.checked;
36+
const compId = component.id;
37+
selectedMetadataType.children = selectedMetadataType.children.map(child => {
38+
if (compId === child.id) {
39+
child.isSelected = isChecked;//update the child state
4040
}
4141
return child;
4242
});
4343

44-
selectedMetadataType=updateMetadataType(selectedMetadataType);
45-
dispatch({type: "COMPONENT_CHECKBOX_STATE_CHANGE" , payload : selectedMetadataType});
46-
44+
selectedMetadataType = updateMetadataType(selectedMetadataType);
45+
dispatch({type: "COMPONENT_CHECKBOX_STATE_CHANGE", payload: selectedMetadataType});
46+
4747
};
4848

49-
const updateMetadataType = (selectedMetadataType)=>{
49+
const updateMetadataType = (selectedMetadataType) => {
5050
console.log("updateMetadataType invoked ComponentList.js");
5151

52-
const selectedChildrenArr=selectedMetadataType.children.filter(child=>child.isSelected);
53-
if(selectedChildrenArr.length===0){
52+
const selectedChildrenArr = selectedMetadataType.children.filter(child => child.isSelected);
53+
if (selectedChildrenArr.length === 0) {
5454
//None of the children is selected
55-
selectedMetadataType.isSelected=false;
56-
selectedMetadataType.isIndeterminate=false;
57-
}else if(selectedChildrenArr.length===selectedMetadataType.children.length){
55+
selectedMetadataType.isSelected = false;
56+
selectedMetadataType.isIndeterminate = false;
57+
} else if (selectedChildrenArr.length === selectedMetadataType.children.length) {
5858
//ALl the children are selected
59-
selectedMetadataType.isSelected=true;
60-
selectedMetadataType.isIndeterminate=false;
61-
}else{
59+
selectedMetadataType.isSelected = true;
60+
selectedMetadataType.isIndeterminate = false;
61+
} else {
6262
//Some the children are selected
63-
selectedMetadataType.isSelected=false;
64-
selectedMetadataType.isIndeterminate=true;
63+
selectedMetadataType.isSelected = false;
64+
selectedMetadataType.isIndeterminate = true;
6565
}
6666

6767
return selectedMetadataType;
6868

6969
};
7070

71-
const handleSelectAll = ()=>{
71+
const handleSelectAll = () => {
7272
const isIndeterminateFilter = false
73-
selectedMetadataType.children=selectedMetadataType.children.map(child=>{
74-
if(filterKey !== '' && child.text.toUpperCase().includes(filterKey.toUpperCase())){
75-
child.isSelected=true
73+
selectedMetadataType.children = selectedMetadataType.children.map(child => {
74+
if (filterKey === '') {
75+
child.isSelected = true;//update the child state
76+
return child;
77+
} else if (filterKey !== '' && child.text.toUpperCase().includes(filterKey.toUpperCase())) {
78+
child.isSelected = true
79+
return child;
80+
} else {
81+
child.isSelected = false;//update the child state
7682
return child;
7783
}
78-
child.isSelected=true;//update the child state
79-
return child;
8084
});
8185

8286
//ALl the children are selected
83-
selectedMetadataType=updateMetadataType(selectedMetadataType)
84-
dispatch({type: "COMPONENT_CHECKBOX_STATE_CHANGE" , payload : selectedMetadataType});
87+
selectedMetadataType = updateMetadataType(selectedMetadataType)
88+
dispatch({type: "COMPONENT_CHECKBOX_STATE_CHANGE", payload: selectedMetadataType});
8589
};
8690

87-
const handleClearAll = ()=>{
88-
selectedMetadataType.children=selectedMetadataType.children.map(child=>{
89-
child.isSelected=false;//update the child state
91+
const handleClearAll = () => {
92+
selectedMetadataType.children = selectedMetadataType.children.map(child => {
93+
child.isSelected = false;//update the child state
9094
return child;
9195
});
9296

9397
//None of the children are selected
94-
selectedMetadataType.isSelected=false;
95-
selectedMetadataType.isIndeterminate=false;
96-
dispatch({type: "COMPONENT_CHECKBOX_STATE_CHANGE" , payload : selectedMetadataType});
98+
selectedMetadataType.isSelected = false;
99+
selectedMetadataType.isIndeterminate = false;
100+
dispatch({type: "COMPONENT_CHECKBOX_STATE_CHANGE", payload: selectedMetadataType});
97101
};
98102

99-
const handleFilterKeyChange=(event)=>{
100-
let fKey=event.target.value;
101-
fKey=fKey?fKey:'';
103+
const handleFilterKeyChange = (event) => {
104+
let fKey = event.target.value;
105+
fKey = fKey ? fKey : '';
102106
setFilterKey(fKey);
103107
}
104108

105109
return (
106110
<Card className={classes.root} variant="outlined">
107-
<CardHeader
108-
titleTypographyProps={{variant:'h6' }}
109-
title={selectedMetadataType.text!==''?selectedMetadataType.text:'Available Components'}
110-
action={
111-
<React.Fragment>
112-
<Button onClick={handleSelectAll}>Select All</Button>
113-
<Button onClick={handleClearAll}>Clear All</Button>
114-
</React.Fragment>
115-
}
116-
111+
<CardHeader
112+
titleTypographyProps={{variant: 'h6'}}
113+
title={selectedMetadataType.text !== '' ? selectedMetadataType.text : 'Available Components'}
114+
action={
115+
<React.Fragment>
116+
<Button onClick={handleSelectAll}>Select All</Button>
117+
<Button onClick={handleClearAll}>Clear All</Button>
118+
</React.Fragment>
119+
}
120+
117121
/>
118122
<CardContent>
119-
<TextField
120-
id="input-with-icon-textfield"
121-
variant="outlined"
122-
placeholder={selectedMetadataType.text!==''?'Filter '+selectedMetadataType.text+'..':'Filter Components..'}
123-
value={filterKey}
124-
onChange={handleFilterKeyChange}
125-
size="small"
126-
InputProps={{
127-
startAdornment: (
128-
<InputAdornment position="start">
129-
<SearchIcon />
130-
</InputAdornment>
131-
),
132-
}}
133-
fullWidth
134-
/>
135-
{/*Added for #35*/}
136-
<Paper style={{maxHeight: 500, overflow: 'auto'}}>
137-
<FormGroup>
138-
{
139-
selectedMetadataType.children.map(child=>{
140-
141-
if(child.text.toUpperCase().includes(filterKey.toUpperCase())){
142-
143-
return (
144-
<FormControlLabel
145-
control={<Checkbox value={child.id} checked={child.isSelected}
146-
onClick={evt=>handleComponentClick(child,evt)}/>}
147-
label={child.text}/>
148-
)
149-
150-
}else{
151-
return <></>;
152-
}
153-
154-
})
155-
156-
}
157-
158-
</FormGroup>
159-
</Paper>
160-
{/*Added for #35*/}
123+
<TextField
124+
id="input-with-icon-textfield"
125+
variant="outlined"
126+
placeholder={selectedMetadataType.text !== '' ? 'Filter ' + selectedMetadataType.text + '..' : 'Filter Components..'}
127+
value={filterKey}
128+
onChange={handleFilterKeyChange}
129+
size="small"
130+
InputProps={{
131+
startAdornment: (
132+
<InputAdornment position="start">
133+
<SearchIcon />
134+
</InputAdornment>
135+
),
136+
}}
137+
fullWidth
138+
/>
139+
{/*Added for #35*/}
140+
<Paper style={{maxHeight: 500, overflow: 'auto'}}>
141+
<FormGroup>
142+
{
143+
selectedMetadataType.children.map(child => {
144+
145+
if (child.text.toUpperCase().includes(filterKey.toUpperCase())) {
146+
147+
return (
148+
<FormControlLabel
149+
control={<Checkbox value={child.id} checked={child.isSelected}
150+
onClick={evt => handleComponentClick(child, evt)} />}
151+
label={child.text} />
152+
)
153+
154+
} else {
155+
return <></>;
156+
}
157+
158+
})
159+
160+
}
161+
162+
</FormGroup>
163+
</Paper>
164+
{/*Added for #35*/}
161165
</CardContent>
162166
</Card>
163167
);

0 commit comments

Comments
 (0)