7
7
FileOutlined ,
8
8
UserOutlined ,
9
9
DeleteOutlined ,
10
- ExclamationCircleOutlined
10
+ ExclamationCircleOutlined ,
11
+ EditOutlined
11
12
} from '@ant-design/icons' ;
12
13
import { orderBy } from "lodash" ;
13
14
import { Ellipsis } from 'react-spinners-css' ;
@@ -165,6 +166,165 @@ const CreateT = (props) => {
165
166
) ;
166
167
} ;
167
168
169
+ const EditT = ( props ) => {
170
+ const [ isHint , setIsHint ] = useState ( false )
171
+ const [ isNonZero , setNonZero ] = useState ( false )
172
+ const [ correctValue , setCorrectValue ] = useState ( true )
173
+ const [ form ] = Form . useForm ( ) ;
174
+
175
+
176
+
177
+ if ( typeof form . getFieldValue ( "author" ) === "undefined" ) {
178
+ let initialData = JSON . parse ( JSON . stringify ( props . initialData ) )
179
+ initialData . challenge = [ "" , [ props . initialData . challenge , props . initialData . challengeID ] ]
180
+ if ( initialData . type === "hint" ) setIsHint ( true )
181
+ if ( initialData . points !== 0 ) setNonZero ( true )
182
+ form . setFieldsValue ( initialData )
183
+ }
184
+
185
+
186
+ return (
187
+ < Form
188
+ form = { form }
189
+ onFinish = { async ( values ) => {
190
+ // must use correctValue state value instead
191
+ await fetch ( window . ipAddress + "/v1/submissions/edit" , {
192
+ method : 'post' ,
193
+ headers : { 'Content-Type' : 'application/json' , "Authorization" : window . IRSCTFToken } ,
194
+ body : JSON . stringify ( {
195
+ "id" : props . initialData . _id ,
196
+ "author" : values . author ,
197
+ "challenge" : values . challenge [ 1 ] [ 0 ] ,
198
+ "challengeID" : values . challenge [ 1 ] [ 1 ] ,
199
+ "type" : values . type ,
200
+ "points" : values . points ,
201
+ "correct" : correctValue ,
202
+ "submission" : values . submission ,
203
+ "hint_id" : values . hint_id
204
+ } )
205
+ } ) . then ( ( results ) => {
206
+ return results . json ( ) ; //return data in JSON (since its JSON data)
207
+ } ) . then ( ( data ) => {
208
+ if ( data . success === true ) {
209
+ message . success ( { content : "Edited transaction successfully!" } )
210
+ setNonZero ( false )
211
+ setCorrectValue ( false )
212
+ setIsHint ( false )
213
+ props . setState ( { editTModal : false } )
214
+ props . refresh ( )
215
+ form . resetFields ( )
216
+ }
217
+ else {
218
+ message . error ( { content : "Oops. Unknown error" } )
219
+ }
220
+
221
+
222
+ } ) . catch ( ( error ) => {
223
+ console . log ( error )
224
+ message . error ( { content : "Oops. There was an issue connecting with the server" } ) ;
225
+ } )
226
+ } }
227
+ >
228
+ < h4 > Select an Account</ h4 >
229
+ < Form . Item
230
+ name = "author"
231
+ rules = { [ { required : true , message : 'Please enter an author' } ] }
232
+ >
233
+ < Input allowClear prefix = { < UserOutlined /> } placeholder = "Account which this transaction will belong to" />
234
+ </ Form . Item >
235
+
236
+ < h4 > Select a Challenge</ h4 >
237
+ < Form . Item
238
+ name = "challenge"
239
+ rules = { [ { required : true , message : 'Please select a challenge' } ] }
240
+ >
241
+ < Cascader
242
+ options = { props . challengeList }
243
+ allowClear
244
+ showSearch
245
+ placeholder = "Select an existing challenge which this transaction will belong to" />
246
+ </ Form . Item >
247
+
248
+ < h4 > Select a Type</ h4 >
249
+ < Form . Item
250
+ name = "type"
251
+ rules = { [ { required : true , message : 'Please select the type of transaction' } ] }
252
+ initialValue = "submission"
253
+ >
254
+ < Select onSelect = { ( type ) => { type === "hint" ? setIsHint ( true ) : setIsHint ( false ) } } >
255
+ < Option value = "submission" > Submission</ Option >
256
+ < Option value = "hint" > Hint</ Option >
257
+ < Option value = "blocked_submission" > Blocked Submission</ Option >
258
+ </ Select >
259
+
260
+ </ Form . Item >
261
+
262
+ < h4 > Input Amount of Points</ h4 >
263
+ < Form . Item
264
+ name = "points"
265
+ rules = { [ { required : true , message : 'Please input the amount of points' } ] }
266
+ initialValue = { 0 }
267
+ >
268
+ < InputNumber onChange = { ( value ) => {
269
+ if ( value !== 0 ) {
270
+ setNonZero ( true )
271
+ setCorrectValue ( true )
272
+ }
273
+ else setNonZero ( false )
274
+ } } min = { - 100000 } max = { 100000 } > </ InputNumber >
275
+
276
+ </ Form . Item >
277
+
278
+ { ! isHint ?
279
+ < div >
280
+
281
+
282
+ < h4 > Choose whether this is a "Correct" submission</ h4 >
283
+ < Form . Item
284
+ name = "correct"
285
+ rules = { [ { required : true , message : 'Please select whether it is correct' } ] }
286
+ initialValue = { true }
287
+ valuePropName = { correctValue }
288
+ >
289
+ < Select value = { correctValue } onSelect = { ( value ) => setCorrectValue ( value ) } disabled = { isNonZero } >
290
+ < Option value = { true } > Correct</ Option >
291
+ < Option value = { false } > Wrong</ Option >
292
+ </ Select >
293
+
294
+ </ Form . Item >
295
+
296
+ < h4 > Enter a Submission</ h4 >
297
+ < Form . Item
298
+ name = "submission"
299
+ rules = { [ { required : true , message : 'Please enter a submission' } ] }
300
+ >
301
+ < Input allowClear placeholder = "The user's flag input" />
302
+ </ Form . Item >
303
+ </ div >
304
+ :
305
+ < div >
306
+ < h4 > Enter a hint ID (hint number of the challenge from < code > 1-n</ code > )</ h4 >
307
+ < Form . Item
308
+ name = "hint_id"
309
+ rules = { [ { required : true , message : 'Please enter a hint ID' } ] }
310
+ initialValue = { 1 }
311
+ >
312
+ < InputNumber min = { - 100000 } max = { 100000 } > </ InputNumber >
313
+
314
+ </ Form . Item >
315
+ </ div > }
316
+
317
+
318
+ < Form . Item >
319
+ < div style = { { display : "flex" , justifyContent : "space-between" } } >
320
+ < Button style = { { marginRight : "1.5vw" } } onClick = { ( ) => { props . setState ( { editTModal : false } ) } } > Cancel</ Button >
321
+ < Button type = "primary" htmlType = "submit" className = "login-form-button" style = { { marginBottom : "1.5vh" } } > Edit Transaction</ Button >
322
+ </ div >
323
+ </ Form . Item >
324
+ </ Form >
325
+ ) ;
326
+ } ;
327
+
168
328
class AdminSubmissions extends React . Component {
169
329
constructor ( props ) {
170
330
super ( props ) ;
@@ -175,7 +335,9 @@ class AdminSubmissions extends React.Component {
175
335
createTModal : false ,
176
336
challengeList : [ ] ,
177
337
selectedTableKeys : [ ] ,
178
- disableEditButtons : true
338
+ disableEditButtons : true ,
339
+ editTModal : false ,
340
+ initialData : { }
179
341
}
180
342
}
181
343
@@ -324,6 +486,17 @@ class AdminSubmissions extends React.Component {
324
486
< CreateT refresh = { this . refresh . bind ( this ) } challengeList = { this . state . challengeList } setState = { this . setState . bind ( this ) } > </ CreateT >
325
487
</ Modal >
326
488
489
+ < Modal
490
+ title = "Edit Transaction"
491
+ visible = { this . state . editTModal }
492
+ footer = { null }
493
+ destroyOnClose
494
+ onCancel = { ( ) => { this . setState ( { editTModal : false } ) } }
495
+ >
496
+
497
+ < EditT initialData = { this . state . initialData } refresh = { this . refresh . bind ( this ) } challengeList = { this . state . challengeList } setState = { this . setState . bind ( this ) } > </ EditT >
498
+ </ Modal >
499
+
327
500
< div style = { { display : "flex" , justifyContent : "space-between" , alignItems : "center" } } >
328
501
< div style = { { display : "flex" , alignItems : "center" , height : "2ch" } } >
329
502
< Button type = "primary" style = { { marginBottom : "2vh" , marginRight : "1ch" } } icon = { < FileOutlined /> } onClick = { ( ) => { this . setState ( { createTModal : true } ) } } > Create New Transaction</ Button >
@@ -419,6 +592,13 @@ class AdminSubmissions extends React.Component {
419
592
< Column title = "Points Awarded" dataIndex = "points" key = "points" sorter = { ( a , b ) => a . points - b . points } />
420
593
< Column title = "Flag Submitted" dataIndex = "submission" key = "submission" />
421
594
< Column title = "Correct" dataIndex = "correct" key = "correct" filters = { [ { text : "True" , value : "True" } , { text : "False" , value : "False" } ] } onFilter = { ( value , record ) => { return value === record . correct } } />
595
+ < Column
596
+ title = ""
597
+ key = "edit"
598
+ render = { ( text , record ) => (
599
+ < Button icon = { < EditOutlined /> } onClick = { ( ) => { this . setState ( { editTModal : true , initialData : record } ) } } > Edit</ Button >
600
+ ) }
601
+ />
422
602
</ Table >
423
603
</ Layout >
424
604
) ;
0 commit comments