Skip to content

Commit 1a7db7f

Browse files
YujithIsuraYujithIsura
authored
Merge pull request #300 from YujithIsura/master
Change select electorates section to addupt for rpp and ind
2 parents 1e515ea + eab09fb commit 1a7db7f

File tree

12 files changed

+852
-29
lines changed

12 files changed

+852
-29
lines changed

‎client/src/components/CheckboxTableElectionReview/CheckboxTable.jsx

+15-10
Original file line numberDiff line numberDiff line change
@@ -47,19 +47,24 @@ class CheckboxTableGrid extends React.Component {
4747
};
4848
}
4949

50-
getMuiTheme = () => createMuiTheme({
50+
getMuiTheme = () => createMuiTheme({
5151
overrides: {
52-
MUIDataTable: {
53-
root: {
54-
backgroundColor: "green"
52+
MUIDataTable: {
53+
paper: {
54+
'& table tr td:nth-child(2)': {
55+
position: "sticky",
56+
zIndex: 101,
57+
left: 0,
58+
background: "white",
5559
},
56-
paper: {
57-
boxShadow: "none"
60+
'& table tr:nth-child(1) th:nth-child(1)': {
61+
zIndex: 102,
5862
}
59-
},
60-
}
63+
}
64+
}
65+
}
6166
})
62-
67+
6368
componentWillReceiveProps(props) {
6469
const { rows, cols, CallElectionData,rowData } = props;
6570

@@ -295,7 +300,7 @@ class CheckboxTableGrid extends React.Component {
295300
return (
296301
<MuiThemeProvider theme={this.getMuiTheme()}>
297302
<MUIDataTable
298-
title={this.props.title}
303+
title={"Electoral Units ( Registered Political Parties )"}
299304
data={outputData}
300305
columns={columns}
301306
options={options}

‎client/src/components/CheckboxTableElectionReviewIg/CheckboxTable.jsx

+327
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
import React from 'react';
2+
import { withStyles,createMuiTheme, MuiThemeProvider} from '@material-ui/core/styles';
3+
import MUIDataTable from "mui-datatables";
4+
import Checkbox from '@material-ui/core/Checkbox';
5+
import _ from 'underscore/underscore';
6+
import { setCallElectionData, handleChangeElectionData } from '../../modules/election/state/ElectionAction';
7+
import { connect } from 'react-redux';
8+
9+
const styles = theme => ({
10+
root: {
11+
width: '100%',
12+
marginTop: theme.spacing.unit * 3,
13+
overflowX: 'auto',
14+
boxShadow: 'none',
15+
background: "red"
16+
},
17+
table: {
18+
minWidth: 700,
19+
},
20+
row: {
21+
'&:nth-of-type(odd)': {
22+
backgroundColor: theme.palette.background.default,
23+
},
24+
},
25+
});
26+
class CheckboxTableGrid extends React.Component {
27+
28+
constructor(props) {
29+
super(props);
30+
const { CallElectionData } = this.props;
31+
this.state = {
32+
open: true,
33+
checkboxGrid: [],
34+
rowHeaders: [],
35+
columnHeaders: [],
36+
rowData: [],
37+
data: [],
38+
nominationStart: CallElectionData.nominationStart,
39+
nominationEnd: CallElectionData.nominationEnd,
40+
objectionStart: CallElectionData.objectionStart,
41+
objectionEnd: CallElectionData.objectionEnd,
42+
depositAmount: CallElectionData.depositAmount,
43+
WeightagePrefarence: CallElectionData.WeightagePrefarence,
44+
WeightageVote: CallElectionData.WeightageVote,
45+
electionName: CallElectionData.electionName,
46+
electionModule: CallElectionData.electionModule,
47+
};
48+
}
49+
50+
getMuiTheme = () => createMuiTheme({
51+
overrides: {
52+
MUIDataTable: {
53+
paper: {
54+
'& table tr td:nth-child(2)': {
55+
position: "sticky",
56+
zIndex: 101,
57+
left: 0,
58+
background: "white",
59+
},
60+
'& table tr:nth-child(1) th:nth-child(1)': {
61+
zIndex: 102,
62+
}
63+
}
64+
}
65+
}
66+
})
67+
68+
componentWillReceiveProps(props) {
69+
const { rows, cols, CallElectionData,rowData } = props;
70+
71+
let rowHeaders = [''];
72+
this.props.rows.map((value) => {
73+
rowHeaders.push(value.name);
74+
});
75+
let columnHeaders = [''];
76+
this.props.cols.map((value) => {
77+
columnHeaders.push(value.name);
78+
});
79+
80+
let checkboxGrid = [];
81+
rowHeaders.map(() => {
82+
let row = [];
83+
columnHeaders.map((index) => {
84+
row.push(false);
85+
});
86+
checkboxGrid.push(row);
87+
});
88+
89+
var rawCount = 0;
90+
for (let i = 0; i < rows.length; i++) {
91+
let row = [];
92+
var colCount = 0;
93+
rawCount++;
94+
for (let j = 0; j < cols.length; j++) {
95+
for (let h = 0; h < rowData.length; h++) {
96+
if (cols[j].id === rowData[h].division_id && rows[i].id === rowData[h].team_id) {
97+
98+
let allow_party = {
99+
'division_id': rowData[h].division_id,
100+
'team_id': rowData[h].team_id,
101+
'id': (i + 1) + '-' + (j + 1)
102+
}
103+
this.state.rowData.push(allow_party);
104+
105+
}
106+
}
107+
}
108+
}
109+
this.setState({ rowData: this.state.rowData });
110+
111+
this.setState({ rowHeaders, columnHeaders, checkboxGrid });
112+
var rawCount = 0;
113+
var prevCol = cols[0].id;
114+
var colCount = 0;
115+
var selectedIndex = '';
116+
for (let i = 0; i < rows.length; i++) {
117+
let row = [];
118+
for (let j = 0; j < cols.length; j++) {
119+
rowData.map((value) => {
120+
if (cols[j].id === value.division_id && rows[i].id === value.team_id) {
121+
if (prevCol === cols[j].id) {
122+
colCount++;
123+
prevCol = cols[j].id;
124+
selectedIndex = j;
125+
} else {
126+
if (j !== cols.length - 1) {
127+
prevCol = cols[j + 1].id;
128+
}
129+
}
130+
rawCount++;
131+
checkboxGrid[i + 1][j + 1] = true;
132+
}
133+
});
134+
}
135+
}
136+
this.findIndex(checkboxGrid);
137+
138+
}
139+
140+
findIndex(checkboxGrid) {
141+
for (let j = 0; j < checkboxGrid.length; j++) {
142+
if (checkboxGrid[0][j]) {
143+
}
144+
}
145+
}
146+
// this will handle the change of checkbox and update the state.checkboxGrid variable, which is the source to the grid.
147+
handleChange = (row, col ) => (event, value) => {
148+
const { handleChangeElectionData } = this.props;
149+
const newElectionModule = { ...this.props.CallElectionData };
150+
let checkboxGrid = Array.from(this.state.checkboxGrid);
151+
let params = {
152+
event: event,
153+
row: row,
154+
col: col,
155+
value: value
156+
}
157+
if ((col == 0) & (row != 0)) {
158+
this.setValue('rows', params)
159+
} else if ((col != 0) && (row == 0)) {
160+
this.setValue('columns', params)
161+
} else if ((col == 0) && (row == 0)) {
162+
this.setValue('all', params);
163+
} else {
164+
this.setValue('single', params)
165+
}
166+
checkboxGrid[row][col] = event.target.checked;
167+
newElectionModule.rowData = this.state.rowData;
168+
handleChangeElectionData(newElectionModule);
169+
this.setState({ checkboxGrid });
170+
};
171+
172+
setRows = (params) => {
173+
const { electionData } = this.props;
174+
let checkboxGrid = Array.from(this.state.checkboxGrid);
175+
for (let i = 0; i < this.props.cols.length; i++) {
176+
checkboxGrid[params.row][i + 1] = params.event.target.checked;
177+
if (params.value) {
178+
let allow_party = {
179+
'division_id': this.props.cols[i].id,
180+
'team_id': this.props.rows[params.row - 1].id,
181+
'election_id': electionData.election_id,
182+
'id': params.row + '-' + (i + 1)
183+
}
184+
this.state.rowData.push(allow_party);
185+
} else {
186+
this.removeValue(params.row + '-' + (i + 1))
187+
}
188+
}
189+
}
190+
191+
setColumns = (params) => {
192+
const { electionData } = this.props;
193+
let checkboxGrid = Array.from(this.state.checkboxGrid);
194+
for (let i = 0; i < this.props.rows.length; i++) {
195+
checkboxGrid[i + 1][params.col] = params.event.target.checked;
196+
if (params.value) {
197+
let allow_party = {
198+
'division_id': this.props.cols[params.col - 1].id,
199+
'team_id': this.props.rows[i].id,
200+
'election_id': electionData.election_id,
201+
'id': (i + 1) + '-' + params.col
202+
}
203+
this.state.rowData.push(allow_party);
204+
} else {
205+
this.removeValue((i + 1) + '-' + params.col)
206+
}
207+
}
208+
}
209+
210+
setValue = (value, params) => {
211+
let rowNew = [''];
212+
this.props.rows.map((value) => {
213+
rowNew.push({ name: value.name, id: value.id });
214+
});
215+
let colNew = [''];
216+
this.props.cols.map((value) => {
217+
colNew.push({ name: value.name, id: value.id });
218+
});
219+
const { electionData } = this.props;
220+
let checkboxGrid = Array.from(this.state.checkboxGrid);
221+
switch (value) {
222+
case 'rows':
223+
this.setRows(params);
224+
break;
225+
case 'columns':
226+
this.setColumns(params);
227+
break;
228+
case 'all':
229+
for (let i = 0; i < this.props.rows.length + 1; i++) {
230+
checkboxGrid[i][0] = params.event.target.checked;
231+
for (let j = 1; j < this.props.cols.length + 1; j++) {
232+
checkboxGrid[0][j] = params.event.target.checked;
233+
let param = {
234+
col: j,
235+
row: i,
236+
event: params.event,
237+
value: params.value
238+
}
239+
this.setColumns(param)
240+
}
241+
}
242+
break;
243+
default:
244+
if (params.value) {
245+
let allow_party = {
246+
'division_id': colNew[params.col].id,
247+
'team_id': rowNew[params.row].id,
248+
'election_id': electionData.election_id,
249+
'id': (params.row) + '-' + (params.col)
250+
}
251+
this.state.rowData.push(allow_party);
252+
} else {
253+
this.removeValue((params.row) + '-' + (params.col))
254+
}
255+
}
256+
257+
this.state.rowData = _.uniq(this.state.rowData, function (data) {
258+
return data.id
259+
})
260+
}
261+
262+
removeValue = (id) => {
263+
this.state.rowData = _.without(this.state.rowData, _.findWhere(this.state.rowData, {
264+
id: id
265+
}));
266+
}
267+
268+
render() {
269+
const { data } = this.props;
270+
// this is written here so that `checked={this.state.checkboxGrid[i][j-1]}` could work.
271+
// on this way updated checkbox data is always taken from state and setup properly
272+
let rowData = [];
273+
for (let i = 0; i < this.state.rowHeaders.length; i++) {
274+
let colData = [];
275+
for (let j = 0; j < this.state.columnHeaders.length+1; j++) {
276+
if (j == 0) {
277+
if(i!==0 && j!==1){
278+
colData.push(this.state.rowHeaders[i]);
279+
}
280+
} else {
281+
if(i!==0 && j!==1){
282+
colData.push(<Checkbox color="primary" checked={this.state.checkboxGrid[i][j - 1]} onChange={this.handleChange(i, j - 1, data)}></Checkbox>);
283+
}
284+
}
285+
}
286+
rowData.push(colData);
287+
}
288+
// set row data headers
289+
const outputData = rowData.map(Object.values);
290+
// const outputData = rowData.map(Object.values);
291+
// set column data
292+
const columns = this.state.columnHeaders;
293+
// set option list
294+
const options = {
295+
filterType: "dropdown",
296+
responsive: "scroll",
297+
selectableRows: false,
298+
};
299+
300+
return (
301+
<MuiThemeProvider theme={this.getMuiTheme()}>
302+
<MUIDataTable
303+
title={"Electoral Units ( Independent Groups )"}
304+
data={outputData}
305+
columns={columns}
306+
options={options}
307+
/>
308+
</MuiThemeProvider>
309+
);
310+
}
311+
}
312+
313+
const mapStateToProps = ({ Election }) => {
314+
const { setCallElectionData } = Election;
315+
const CallElectionData = Election.CallElectionData;
316+
const cols = Election.columnHeaders;
317+
// const rowData = Election.electionElectorates;
318+
const electionData = Election.electionData;
319+
return { setCallElectionData, CallElectionData, electionData, cols }
320+
};
321+
322+
const mapActionsToProps = {
323+
setCallElectionData,
324+
handleChangeElectionData
325+
};
326+
327+
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(CheckboxTableGrid));

0 commit comments

Comments
 (0)