Fix: accidentally retained confirm button for management lists

2025-07-28 18:24:38 -05:00 · 2024-02-21 15:27:15 -08:00
parent 8039ce3c2b
commit ebc9ce17b5
4 changed files with 104 additions and 79 deletions
--- a/src-ui/src/app/components/manage/management-list/management-list.component.html
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.html
@@ -88,39 +88,33 @@
                <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>
-                  <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>
-              </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>
+                      <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 (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>
-    }
+
+          @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>
+          }
--- a/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts
@@ -13,7 +13,6 @@ import {
  NgbModalModule,
  NgbModalRef,
  NgbPaginationModule,
-  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { Tag } from 'src/app/data/tag'
@@ -38,7 +37,6 @@ 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'
 import { BulkEditObjectOperation } from 'src/app/services/rest/abstract-name-filter-service'

 const tags: Tag[] = [
@@ -78,7 +76,6 @@ describe('ManagementListComponent', () => {
        SafeHtmlPipe,
        ConfirmDialogComponent,
        PermissionsDialogComponent,
-        ConfirmButtonComponent,
      ],
      providers: [
        {
@@ -100,7 +97,6 @@ describe('ManagementListComponent', () => {
        NgbModalModule,
        RouterTestingModule.withRoutes(routes),
        NgxBootstrapIconsModule.pick(allIcons),
-        NgbPopoverModule,
      ],
    }).compileComponents()

@@ -197,23 +193,27 @@ 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.query(
-      By.directive(ConfirmButtonComponent)
-    )
+    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[8]
+    deleteButton.triggerEventHandler('click')
+
+    expect(modal).not.toBeUndefined()
+    const editDialog = modal.componentInstance as ConfirmDialogComponent

    // fail first
    deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting')))
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    editDialog.confirmClicked.emit()
    expect(toastErrorSpy).toHaveBeenCalled()
    expect(reloadSpy).not.toHaveBeenCalled()

    // succeed
    deleteSpy.mockReturnValueOnce(of(true))
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    editDialog.confirmClicked.emit()
    expect(reloadSpy).toHaveBeenCalled()
  })

--- a/src-ui/src/app/components/manage/management-list/management-list.component.ts
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.ts
@@ -15,7 +15,10 @@ import {
  MATCH_NONE,
 } from 'src/app/data/matching-model'
 import { ObjectWithId } from 'src/app/data/object-with-id'
-import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
+import {
+  ObjectWithPermissions,
+  PermissionsObject,
+} from 'src/app/data/object-with-permissions'
 import {
  SortableDirective,
  SortEvent,
@@ -194,21 +197,34 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
    ])
  }

-  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
-          )
-        },
-      })
+  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
+            )
+          },
+        })
+    })
  }

  get nameFilter() {