@@ -28,6 +28,7 @@ import { useForm, useWatch } from "react-hook-form";
28
28
import { CippApiDialog } from "../../../components/CippComponents/CippApiDialog" ;
29
29
import { Grid } from "@mui/system" ;
30
30
import CippButtonCard from "../../../components/CippCards/CippButtonCard" ;
31
+ import { CippApiResults } from "../../../components/CippComponents/CippApiResults" ;
31
32
32
33
const CustomAddEditRowDialog = ( { formControl, open, onClose, onSubmit, defaultValues } ) => {
33
34
const fields = useWatch ( { control : formControl . control , name : "fields" } ) ;
@@ -322,155 +323,176 @@ const Page = () => {
322
323
< Grid item size = { 9 } >
323
324
{ selectedTable && (
324
325
< Box sx = { { width : "100%" } } >
325
- < CippButtonCard
326
- title = "Table Filters"
327
- cardSx = { { mb : 2 } }
328
- accordionExpanded = { accordionExpanded }
329
- component = "accordion"
330
- CardButton = {
331
- < Button
332
- variant = "contained"
333
- color = "primary"
334
- size = "small"
335
- onClick = { filterFormControl . handleSubmit ( ( data ) => {
336
- var properties = getSelectedProps ( data ) ;
337
- setTableFilterParams ( { ...data , Property : properties } ) ;
338
- handleRefresh ( ) ;
339
- setAccordionExpanded ( false ) ;
340
- } ) }
341
- >
342
- Apply Filters
343
- </ Button >
344
- }
345
- >
346
- < Stack spacing = { 1 } >
347
- < CippFormComponent
348
- type = "textField"
349
- name = "Filter"
350
- formControl = { filterFormControl }
351
- label = "OData Filter"
352
- />
353
- < CippFormComponent
354
- type = "autoComplete"
355
- name = "Property"
356
- formControl = { filterFormControl }
357
- label = "Property"
358
- options = { getTableFields ( ) . map ( ( field ) => ( {
359
- label : field ?. label ,
360
- value : field ?. name ,
361
- } ) ) }
362
- />
363
- < Stack direction = "row" spacing = { 1 } >
326
+ < Stack spacing = { 1 } >
327
+ < CippButtonCard
328
+ title = "Table Filters"
329
+ accordionExpanded = { accordionExpanded }
330
+ component = "accordion"
331
+ CardButton = {
332
+ < Button
333
+ variant = "contained"
334
+ color = "primary"
335
+ size = "small"
336
+ onClick = { filterFormControl . handleSubmit ( ( data ) => {
337
+ var properties = getSelectedProps ( data ) ;
338
+ setTableFilterParams ( { ...data , Property : properties } ) ;
339
+ handleRefresh ( ) ;
340
+ setAccordionExpanded ( false ) ;
341
+ } ) }
342
+ >
343
+ Apply Filters
344
+ </ Button >
345
+ }
346
+ >
347
+ < Stack spacing = { 1 } >
364
348
< CippFormComponent
365
- type = "number "
366
- name = "First "
349
+ type = "textField "
350
+ name = "Filter "
367
351
formControl = { filterFormControl }
368
- label = "First "
352
+ label = "OData Filter "
369
353
/>
370
354
< CippFormComponent
371
- type = "number "
372
- name = "Skip "
355
+ type = "autoComplete "
356
+ name = "Property "
373
357
formControl = { filterFormControl }
374
- label = "Skip"
358
+ label = "Property"
359
+ options = { getTableFields ( ) . map ( ( field ) => ( {
360
+ label : field ?. label ,
361
+ value : field ?. name ,
362
+ } ) ) }
375
363
/>
364
+ < Stack direction = "row" spacing = { 1 } >
365
+ < CippFormComponent
366
+ type = "number"
367
+ name = "First"
368
+ formControl = { filterFormControl }
369
+ label = "First"
370
+ />
371
+ < CippFormComponent
372
+ type = "number"
373
+ name = "Skip"
374
+ formControl = { filterFormControl }
375
+ label = "Skip"
376
+ />
377
+ </ Stack >
376
378
</ Stack >
377
- </ Stack >
378
- </ CippButtonCard >
379
- < CippDataTable
380
- title = { `${ selectedTable } ` }
381
- data = { tableData }
382
- refreshFunction = { handleRefresh }
383
- isFetching = { fetchTableData . isPending }
384
- cardButton = {
385
- < Stack direction = "row" spacing = { 1 } >
386
- < Button
387
- variant = "contained"
388
- color = "primary"
389
- size = "small"
390
- onClick = { ( ) => {
379
+ </ CippButtonCard >
380
+ < CippApiResults apiObject = { tableRowAction } />
381
+ < CippDataTable
382
+ title = { `${ selectedTable } ` }
383
+ data = { tableData }
384
+ refreshFunction = { handleRefresh }
385
+ isFetching = { fetchTableData . isPending }
386
+ cardButton = {
387
+ < Stack direction = "row" spacing = { 1 } >
388
+ < Button
389
+ variant = "contained"
390
+ color = "primary"
391
+ size = "small"
392
+ onClick = { ( ) => {
393
+ setDefaultAddEditValues ( {
394
+ fields : getTableFields ( ) . map ( ( field ) => ( {
395
+ name : field ?. name ,
396
+ value : "" ,
397
+ type : field ?. type ,
398
+ } ) ) ,
399
+ } ) ;
400
+ addEditRowDialog . handleOpen ( ) ;
401
+ } } // Open add/edit row dialog
402
+ startIcon = {
403
+ < SvgIcon fontSize = "small" >
404
+ < Add />
405
+ </ SvgIcon >
406
+ }
407
+ >
408
+ Add Row
409
+ </ Button >
410
+ < Button
411
+ variant = "contained"
412
+ color = "error"
413
+ size = "small"
414
+ onClick = { deleteTableDialog . handleOpen } // Open delete table dialog
415
+ startIcon = {
416
+ < SvgIcon fontSize = "small" >
417
+ < TrashIcon />
418
+ </ SvgIcon >
419
+ }
420
+ >
421
+ Delete Table
422
+ </ Button >
423
+ </ Stack >
424
+ }
425
+ actions = { [
426
+ {
427
+ label : "Edit" ,
428
+ type : "POST" ,
429
+ icon : (
430
+ < SvgIcon fontSize = "small" >
431
+ < PencilIcon />
432
+ </ SvgIcon >
433
+ ) ,
434
+ customFunction : ( row ) => {
391
435
setDefaultAddEditValues ( {
392
- fields : getTableFields ( ) . map ( ( field ) => ( {
393
- name : field ?. name ,
394
- value : "" ,
395
- type : field ?. type ,
396
- } ) ) ,
436
+ fields : Object . keys ( row )
437
+ . filter ( ( key ) => key !== "ETag" && key !== "Timestamp" )
438
+ . map ( ( key ) => {
439
+ const value = row [ key ] ;
440
+ let type = "textField" ;
441
+ if ( typeof value === "number" ) {
442
+ type = "number" ;
443
+ } else if ( typeof value === "boolean" ) {
444
+ type = "switch" ;
445
+ }
446
+ return { name : key , value : value , type : type } ;
447
+ } ) ,
397
448
} ) ;
398
449
addEditRowDialog . handleOpen ( ) ;
399
- } } // Open add/edit row dialog
400
- startIcon = {
401
- < SvgIcon fontSize = "small" >
402
- < Add />
403
- </ SvgIcon >
404
- }
405
- >
406
- Add Row
407
- </ Button >
408
- < Button
409
- variant = "contained"
410
- color = "error"
411
- size = "small"
412
- onClick = { deleteTableDialog . handleOpen } // Open delete table dialog
413
- startIcon = {
450
+ } ,
451
+ noConfirm : true ,
452
+ hideBulk : true ,
453
+ } ,
454
+ {
455
+ label : "Delete" ,
456
+ type : "POST" ,
457
+ icon : (
414
458
< SvgIcon fontSize = "small" >
415
459
< TrashIcon />
416
460
</ SvgIcon >
417
- }
418
- >
419
- Delete Table
420
- </ Button >
421
- </ Stack >
422
- }
423
- actions = { [
424
- {
425
- label : "Edit" ,
426
- type : "POST" ,
427
- icon : (
428
- < SvgIcon fontSize = "small" >
429
- < PencilIcon />
430
- </ SvgIcon >
431
- ) ,
432
- customFunction : ( row ) => {
433
- setDefaultAddEditValues ( {
434
- fields : Object . keys ( row )
435
- . filter ( ( key ) => key !== "ETag" && key !== "Timestamp" )
436
- . map ( ( key ) => {
437
- const value = row [ key ] ;
438
- let type = "textField" ;
439
- if ( typeof value === "number" ) {
440
- type = "number" ;
441
- } else if ( typeof value === "boolean" ) {
442
- type = "switch" ;
443
- }
444
- return { name : key , value : value , type : type } ;
445
- } ) ,
446
- } ) ;
447
- addEditRowDialog . handleOpen ( ) ;
448
- } ,
449
- noConfirm : true ,
450
- hideBulk : true ,
451
- } ,
452
- {
453
- label : "Delete" ,
454
- type : "POST" ,
455
- icon : (
456
- < SvgIcon fontSize = "small" >
457
- < TrashIcon />
458
- </ SvgIcon >
459
- ) ,
460
- url : apiUrl ,
461
- data : {
462
- FunctionName : "Remove-AzDataTableEntity" ,
463
- TableName : `!${ selectedTable } ` ,
464
- Parameters : {
465
- Entity : { RowKey : "RowKey" , PartitionKey : "PartitionKey" , ETag : "ETag" } ,
461
+ ) ,
462
+ url : apiUrl ,
463
+ customFunction : ( row ) => {
464
+ var entity = [ ] ;
465
+ if ( Array . isArray ( row ) ) {
466
+ entity = row . map ( ( r ) => ( {
467
+ RowKey : r . RowKey ,
468
+ PartitionKey : r . PartitionKey ,
469
+ ETag : r . ETag ,
470
+ } ) ) ;
471
+ } else {
472
+ entity = {
473
+ RowKey : row . RowKey ,
474
+ PartitionKey : row . PartitionKey ,
475
+ ETag : row . ETag ,
476
+ } ;
477
+ }
478
+ tableRowAction . mutate ( {
479
+ url : apiUrl ,
480
+ data : {
481
+ FunctionName : "Remove-AzDataTableEntity" ,
482
+ TableName : selectedTable ,
483
+ Parameters : {
484
+ Entity : entity ,
485
+ } ,
486
+ } ,
487
+ } ) ;
466
488
} ,
489
+ confirmText :
490
+ "Do you want to delete the selected row(s)? This action cannot be undone." ,
491
+ multiPost : true ,
467
492
} ,
468
- onSuccess : handleRefresh ,
469
- confirmText : "Do you want to delete this row?" ,
470
- multiPost : false ,
471
- } ,
472
- ] }
473
- />
493
+ ] }
494
+ />
495
+ </ Stack >
474
496
</ Box >
475
497
) }
476
498
</ Grid >
0 commit comments