1
1
import React , { useState } from "react" ;
2
2
import axios from "axios" ;
3
+ import { useEffect } from "react" ;
3
4
import { saveAs } from "file-saver" ;
4
5
import { FaDownload } from "react-icons/fa6" ;
5
6
import "../styles/OrcaDashboardComponent.css" ;
@@ -19,7 +20,7 @@ const OrcaDashboardComponent = () => {
19
20
const isSectionsEmpty = sections . length === 0 ;
20
21
const [ sameCriteria , setSameCriteria ] = useState ( false ) ;
21
22
const [ previewContent , setPreviewContent ] = useState ( "" ) ;
22
- const [ showPreviewModal , setShowPreviewModal ] = useState ( false ) ;
23
+ const [ showPreviewModal , setShowPreviewModal ] = useState ( false ) ;
23
24
const [ selectedFileName , setSelectedFileName ] = useState ( "No file chosen" ) ;
24
25
25
26
const onFileSelected = ( event ) => {
@@ -143,10 +144,11 @@ const OrcaDashboardComponent = () => {
143
144
downloadDocument ( blob ) ;
144
145
} )
145
146
. catch ( ( error ) => {
146
- if ( error . response ) {
147
+ if ( error . response ) {
147
148
if ( error . response . status === 404 ) {
148
149
alert ( "There is no data for the provided search term" ) ;
149
- } else { alert ( `Error ${ error . response . status } : ${ error . response . statusText } ` ) ;
150
+ } else {
151
+ alert ( `Error ${ error . response . status } : ${ error . response . statusText } ` ) ;
150
152
}
151
153
}
152
154
} ) ;
@@ -201,14 +203,29 @@ const OrcaDashboardComponent = () => {
201
203
} ;
202
204
203
205
const handleNumSectionsBlur = ( e ) => {
204
- const parsedSections = e . target . value
205
- . split ( "," )
206
- . map ( ( val ) => val . trim ( ) )
207
- . filter ( ( val ) => val !== "" ) ;
206
+ const input = e . target . value ;
207
+ let parsedSections = new Set ( ) ;
208
+
209
+ input . split ( "," ) . forEach ( ( part ) => {
210
+ part = part . trim ( ) ;
211
+ if ( part . includes ( "-" ) ) {
212
+ const [ start , end ] = part . split ( "-" ) . map ( ( num ) => parseInt ( num . trim ( ) , 10 ) ) ;
213
+ if ( ! isNaN ( start ) && ! isNaN ( end ) && start <= end ) {
214
+ for ( let i = start ; i <= end ; i ++ ) {
215
+ parsedSections . add ( i ) ;
216
+ }
217
+ }
218
+ } else {
219
+ const num = parseInt ( part , 10 ) ;
220
+ if ( ! isNaN ( num ) ) {
221
+ parsedSections . add ( num ) ;
222
+ }
223
+ }
224
+ } ) ;
208
225
209
- setSections ( parsedSections ) ;
226
+ setSections ( Array . from ( parsedSections ) . sort ( ( a , b ) => a - b ) ) ;
210
227
} ;
211
-
228
+
212
229
const removeTag = ( index , setterFunc ) => {
213
230
setterFunc ( ( prevTerms ) => {
214
231
const updatedTerms = [ ...prevTerms ] ;
@@ -257,14 +274,26 @@ const OrcaDashboardComponent = () => {
257
274
} ) ;
258
275
} ;
259
276
277
+ useEffect ( ( ) => {
278
+ const handleKeyDown = ( event ) => {
279
+ if ( event . key === "Escape" ) {
280
+ setShowPreviewModal ( false ) ;
281
+ }
282
+ } ;
283
+
284
+ document . addEventListener ( "keydown" , handleKeyDown ) ;
285
+ return ( ) => document . removeEventListener ( "keydown" , handleKeyDown ) ;
286
+ } , [ ] ) ;
287
+
260
288
return (
261
289
< div className = "container py-5 d-flex justify-content-center" >
262
290
< div className = "text-center" >
263
291
< h2 className = "mb-4" > Extract data from ORCA files to Word documents</ h2 >
264
292
< div className = "mb-3 text-start" >
265
- < label htmlFor = "fileUpload" className = "mb-2" > Upload your ORCA data file:</ label >
293
+ < label htmlFor = "fileUpload" className = "mb-2" >
294
+ Upload your ORCA data file:
295
+ </ label >
266
296
< div className = "input-group" >
267
-
268
297
< input
269
298
className = "form-control"
270
299
type = "file"
@@ -294,7 +323,9 @@ const OrcaDashboardComponent = () => {
294
323
</ div >
295
324
296
325
< div className = "mb-3 text-start" >
297
- < label htmlFor = "searchTermInput" className = "mb-2" > Enter the terms you wish to search for (txt only):</ label >
326
+ < label htmlFor = "searchTermInput" className = "mb-2" >
327
+ Enter the terms you wish to search for (txt only):
328
+ </ label >
298
329
< div >
299
330
< input
300
331
type = "text"
@@ -331,12 +362,16 @@ const OrcaDashboardComponent = () => {
331
362
</ div >
332
363
333
364
< div className = "mb-3 text-start" >
334
- < label htmlFor = "specifyLinesSelect" className = "mb-2" > Enter how you want the lines specified:</ label >
365
+ < label htmlFor = "specifyLinesSelect" className = "mb-2" >
366
+ Enter how you want the lines specified:
367
+ </ label >
335
368
{ renderSpecifyLine ( ) }
336
369
</ div >
337
370
338
371
< div className = "mb-3 text-start" >
339
- < label htmlFor = "numSectionsInput" className = "mb-2" > Number of sections?</ label >
372
+ < label htmlFor = "numSectionsInput" className = "mb-2" >
373
+ Number of sections?
374
+ </ label >
340
375
< input
341
376
type = "text"
342
377
className = "form-control"
@@ -428,10 +463,7 @@ const OrcaDashboardComponent = () => {
428
463
! selectedFile ||
429
464
isUploadedFilesEmpty
430
465
} >
431
- < FaDownload
432
- size = "1.2em"
433
- title = "Download Output"
434
- />
466
+ < FaDownload size = "1.2em" title = "Download Output" />
435
467
</ button >
436
468
< button className = "btn btn-secondary" onClick = { ( ) => setShowPreviewModal ( false ) } >
437
469
Close
@@ -453,10 +485,7 @@ const OrcaDashboardComponent = () => {
453
485
! selectedFile ||
454
486
isUploadedFilesEmpty
455
487
} >
456
- < FaDownload
457
- size = "1.2em"
458
- title = "Download Output"
459
- />
488
+ < FaDownload size = "1.2em" title = "Download Output" />
460
489
</ button >
461
490
</ div >
462
491
</ div >
0 commit comments