Use confirm button for management list delete

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -85,33 +85,39 @@
                 <div class="btn-group d-none d-sm-block">
                   <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
                     <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container>
-                    </button>
-                    <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
-                      <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
-                      </button>
-                      <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
-                        <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                }
-              </tbody>
-            </table>
-          </div>
-
-          @if (!isLoading) {
-            <div class="d-flex mb-2">
-              @if (collectionSize > 0) {
-                <div>
-                  <ng-container i18n>{collectionSize, plural, =1 {One {{typeName}}} other {{{collectionSize || 0}} total {{typeNamePlural}}}}</ng-container>
-                  @if (selectedObjects.size > 0) {
-                    &nbsp;({{selectedObjects.size}} selected)
-                  }
+                  </button>
+                  <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
+                    <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                  </button>
+                  <pngx-confirm-button
+                    label="Delete"
+                    i18n-label
+                    (confirm)="deleteObject(object)"
+                    *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }"
+                    [disabled]="!userCanDelete(object)"
+                    buttonClasses=" btn-sm btn-outline-danger"
+                    iconName="trash">
+                  </pngx-confirm-button>
                 </div>
-              }
-              @if (collectionSize > 20) {
-                <ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" [maxSize]="5" (pageChange)="reloadData()" size="sm" aria-label="Pagination"></ngb-pagination>
-              }
-            </div>
+              </td>
+            </tr>
           }
+        </tbody>
+      </table>
+    </div>
+
+    @if (!isLoading) {
+      <div class="d-flex mb-2">
+        @if (collectionSize > 0) {
+          <div>
+            <ng-container i18n>{collectionSize, plural, =1 {One {{typeName}}} other {{{collectionSize || 0}} total {{typeNamePlural}}}}</ng-container>
+            @if (selectedObjects.size > 0) {
+              &nbsp;({{selectedObjects.size}} selected)
+            }
+          </div>
+        }
+        @if (collectionSize > 20) {
+          <ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" [maxSize]="5" (pageChange)="reloadData()" size="sm" aria-label="Pagination"></ngb-pagination>
+        }
+      </div>
+    }

src-ui/src/app/components/manage/management-list/management-list.component.spec.ts

@@ -13,6 +13,7 @@ import {
   NgbModalModule,
   NgbModalRef,
   NgbPaginationModule,
+  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { Tag } from 'src/app/data/tag'
@@ -37,6 +38,7 @@ import { MATCH_NONE } from 'src/app/data/matching-model'
 import { MATCH_LITERAL } from 'src/app/data/matching-model'
 import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
 
 const tags: Tag[] = [
   {
@@ -75,6 +77,7 @@ describe('ManagementListComponent', () => {
         SafeHtmlPipe,
         ConfirmDialogComponent,
         PermissionsDialogComponent,
+        ConfirmButtonComponent,
       ],
       providers: [
         {
@@ -96,6 +99,7 @@ describe('ManagementListComponent', () => {
         NgbModalModule,
         RouterTestingModule.withRoutes(routes),
         NgxBootstrapIconsModule.pick(allIcons),
+        NgbPopoverModule,
       ],
     }).compileComponents()
 
@@ -192,27 +196,23 @@ describe('ManagementListComponent', () => {
   })
 
   it('should support delete, show notification on error / success', () => {
-    let modal: NgbModalRef
-    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const deleteSpy = jest.spyOn(tagService, 'delete')
     const reloadSpy = jest.spyOn(component, 'reloadData')
 
-    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[7]
-    deleteButton.triggerEventHandler('click')
-
-    expect(modal).not.toBeUndefined()
-    const editDialog = modal.componentInstance as ConfirmDialogComponent
+    const deleteButton = fixture.debugElement.query(
+      By.directive(ConfirmButtonComponent)
+    )
 
     // fail first
     deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting')))
-    editDialog.confirmClicked.emit()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
     expect(toastErrorSpy).toHaveBeenCalled()
     expect(reloadSpy).not.toHaveBeenCalled()
 
     // succeed
     deleteSpy.mockReturnValueOnce(of(true))
-    editDialog.confirmClicked.emit()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
     expect(reloadSpy).toHaveBeenCalled()
   })
 

src-ui/src/app/components/manage/management-list/management-list.component.ts

@@ -15,10 +15,7 @@ import {
   MATCH_NONE,
 } from 'src/app/data/matching-model'
 import { ObjectWithId } from 'src/app/data/object-with-id'
-import {
-  ObjectWithPermissions,
-  PermissionsObject,
-} from 'src/app/data/object-with-permissions'
+import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
 import {
   SortableDirective,
   SortEvent,
@@ -194,34 +191,21 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
     ])
   }
 
-  openDeleteDialog(object: T) {
-    var activeModal = this.modalService.open(ConfirmDialogComponent, {
-      backdrop: 'static',
-    })
-    activeModal.componentInstance.title = $localize`Confirm delete`
-    activeModal.componentInstance.messageBold = this.getDeleteMessage(object)
-    activeModal.componentInstance.message = $localize`Associated documents will not be deleted.`
-    activeModal.componentInstance.btnClass = 'btn-danger'
-    activeModal.componentInstance.btnCaption = $localize`Delete`
-    activeModal.componentInstance.confirmClicked.subscribe(() => {
-      activeModal.componentInstance.buttonsEnabled = false
-      this.service
-        .delete(object)
-        .pipe(takeUntil(this.unsubscribeNotifier))
-        .subscribe({
-          next: () => {
-            activeModal.close()
-            this.reloadData()
-          },
-          error: (error) => {
-            activeModal.componentInstance.buttonsEnabled = true
-            this.toastService.showError(
-              $localize`Error while deleting element`,
-              error
-            )
-          },
-        })
-    })
+  deleteObject(object: T) {
+    this.service
+      .delete(object)
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: () => {
+          this.reloadData()
+        },
+        error: (error) => {
+          this.toastService.showError(
+            $localize`Error while deleting element`,
+            error
+          )
+        },
+      })
   }
 
   get nameFilter() {