@@ -16,6 +16,15 @@ var SchedulingCheckList = React.createClass({
16
16
*
17
17
* This might or might not be loaded yet; clicking the heading will load the
18
18
* data from the server and expand it.
19
+ *
20
+ * There is supposedly a functionality in which clicking on a table row will cause it
21
+ * to be greyed out, however whether this actually happens depends on your
22
+ * scheduling_checks.css (clicking could possibly do nothing, or possibly
23
+ * do other things).
24
+ *
25
+ * Likewise, clicking on a table header will sort by that column. You can also
26
+ * add formatting in scheduling_checks.css so that the selected header will
27
+ * look different, e.g. be colored differently.
19
28
*/
20
29
var SchedulingCheck = React . createClass ( {
21
30
propTypes : {
@@ -28,8 +37,45 @@ var SchedulingCheck = React.createClass({
28
37
open : false ,
29
38
failed : false ,
30
39
timestamp : "never" ,
40
+ tableState : {
41
+ greyed : { } ,
42
+ sort : - 1 ,
43
+ reverse : false
44
+ } ,
31
45
} ;
32
46
} ,
47
+
48
+ sortColumn : function ( column ) {
49
+ if ( this . state . tableState . sort === column ) {
50
+ this . setState ( {
51
+ tableState : React . addons . update ( this . state . tableState ,
52
+ { reverse : { $set : ! this . state . tableState . reverse } } ) ,
53
+ } ) ;
54
+ } else {
55
+ this . setState ( {
56
+ tableState : React . addons . update ( this . state . tableState , { sort : { $set : column } , reverse : { $set : false } } ) ,
57
+ } ) ;
58
+ }
59
+ } ,
60
+
61
+ greyRow : function ( item ) {
62
+ newkey = { } ;
63
+ newkey [ item ] = ! this . state . tableState . greyed [ item ] ;
64
+ this . setState ( {
65
+ tableState : React . addons . update ( this . state . tableState , { greyed : { $merge : newkey } } ) ,
66
+ } ) ;
67
+ } ,
68
+
69
+ resetTable : function ( ) {
70
+ this . setState ( {
71
+ tableState : {
72
+ greyed : { } ,
73
+ sort : - 1 ,
74
+ reverse : false
75
+ } ,
76
+ } ) ;
77
+
78
+ } ,
33
79
34
80
handleClick : function ( ) {
35
81
if ( this . state . open ) {
@@ -80,18 +126,40 @@ var SchedulingCheck = React.createClass({
80
126
} else if ( ! this . state . data ) {
81
127
body = < div className = "placeholder" > loading...</ div > ;
82
128
} else {
129
+ var data = JSON . parse ( this . state . data ) ; // Might not work on old browsers
130
+ var table ;
131
+ if ( data . headings . length == 0 ) {
132
+ table = < SelectTable rows = { data . body } header = { false }
133
+ saveState = { this . state . tableState }
134
+ clickHeader = { this . sortColumn } clickRow = { this . greyRow }
135
+ /> ;
136
+ } else {
137
+ var columns = [ ] ;
138
+ for ( i = 0 ; i < data . headings . length ; i ++ ) {
139
+ if ( data . headings [ i ] ) {
140
+ columns [ i ] = { key : String ( i ) , label : data . headings [ i ] } ;
141
+ } else {
142
+ columns [ i ] = { key : String ( i ) , label : "--" } ;
143
+ }
144
+ }
145
+ table = < SelectTable rows = { data . body } columns = { columns }
146
+ header = { true } saveState = { this . state . tableState }
147
+ clickHeader = { this . sortColumn } clickRow = { this . greyRow }
148
+ /> ;
149
+ }
83
150
body = < div >
84
151
< div className = "placeholder" >
85
152
(loaded { this . state . timestamp } , click title to close)
86
153
</ div >
87
- < div className = "data" dangerouslySetInnerHTML = { { __html : this . state . data } } />
154
+ { table }
88
155
</ div > ;
89
156
}
90
157
91
158
return < div className = "scheduling-check" >
92
159
< div className = "scheduling-check-title" >
93
160
< span onClick = { this . handleClick } > { this . props . title } </ span >
94
161
< RefreshButton onClick = { this . loadData } />
162
+ < ResetButton onClick = { this . resetTable } />
95
163
</ div >
96
164
< div className = "scheduling-check-body" >
97
165
{ body }
@@ -114,3 +182,89 @@ var RefreshButton = React.createClass({
114
182
</ button > ;
115
183
} ,
116
184
} ) ;
185
+
186
+ /**
187
+ * Calls its onClick prop to reset table greying/sorting
188
+ */
189
+ var ResetButton = React . createClass ( {
190
+ propTypes : {
191
+ onClick : React . PropTypes . func . isRequired ,
192
+ } ,
193
+
194
+ render : function ( ) {
195
+ return < button onClick = { this . props . onClick } className = "reset-button" >
196
+ Reset
197
+ </ button > ;
198
+ } ,
199
+ } ) ;
200
+
201
+ // Modified from react-json-table example code.
202
+ var SelectTable = React . createClass ( {
203
+
204
+ propTypes : {
205
+ rows : React . PropTypes . array . isRequired ,
206
+ saveState : React . PropTypes . shape ( {
207
+ greyed : React . PropTypes . object . isRequired ,
208
+ sort : React . PropTypes . any . isRequired ,
209
+ reverse : React . PropTypes . bool . isRequired
210
+ } ) . isRequired ,
211
+ header : React . PropTypes . bool . isRequired ,
212
+ columns : React . PropTypes . array ,
213
+ clickHeader : React . PropTypes . func . isRequired ,
214
+ clickRow : React . PropTypes . func . isRequired
215
+ } ,
216
+
217
+ getInitialState : function ( ) {
218
+ return { } ;
219
+ } ,
220
+ render : function ( ) {
221
+ // clone the rows
222
+ items = this . props . rows . slice ( ) ;
223
+
224
+ items = _ . sortBy ( items , this . props . saveState . sort ) ;
225
+
226
+ if ( this . props . saveState . reverse ) items . reverse ( ) ;
227
+
228
+ return < JsonTable
229
+ rows = { items }
230
+ columns = { this . props . columns }
231
+ settings = { this . getSettings ( ) }
232
+ onClickHeader = { this . onClickHeader }
233
+ onClickRow = { this . onClickRow }
234
+ /> ;
235
+ } ,
236
+
237
+ getSettings : function ( ) {
238
+ var me = this ;
239
+ // We will add some classes to the selected rows and cells
240
+ return {
241
+ headerClass : function ( current , key ) {
242
+ if ( me . props . saveState . sort == key ) {
243
+ if ( me . props . saveState . reverse ) {
244
+ return current + ' headerSelected sortReversed' ;
245
+ } else {
246
+ return current + ' headerSelected' ;
247
+ }
248
+ } else {
249
+ return current ;
250
+ }
251
+ } ,
252
+ rowClass : function ( current , item ) {
253
+ if ( me . props . saveState . greyed [ item ] ) {
254
+ return current + ' rowGreyed' ;
255
+ } else {
256
+ return current ;
257
+ }
258
+ } ,
259
+ header : this . props . header
260
+ } ;
261
+ } ,
262
+
263
+ onClickHeader : function ( e , column ) {
264
+ this . props . clickHeader ( column ) ;
265
+ } ,
266
+
267
+ onClickRow : function ( e , item ) {
268
+ this . props . clickRow ( item ) ;
269
+ }
270
+ } ) ;
0 commit comments