Separate delete modal i18n and use delete modal in labels manager

src/Turnierplan.App/Client/e2e/consts/turnierplan.ts

@@ -4,10 +4,12 @@ export const turnierplan = {
     organizationNameField: 'create-organization-page-organization-name-field'
   },
   deleteWidget: {
-    confirmDeleteButton: 'delete-widget-confirm-delete-button',
     deleteButton: 'delete-widget-delete-button',
     confirmationField: 'delete-widget-confirmation-field'
   },
+  deleteModal: {
+    confirmDeleteButton: 'delete-modal-confirm-delete-button'
+  },
   header: {
     logoLink: 'header-logo-link'
   },

src/Turnierplan.App/Client/e2e/pages/view-organization-page.ts

@@ -15,6 +15,6 @@ export class ViewOrganizationPage {
     await this.page.getByTestId(turnierplan.pageFrame.navigationTab(turnierplan.viewOrganizationPage.settingsPageId)).click();
     await this.page.getByTestId(turnierplan.deleteWidget.confirmationField).fill(confirmText);
     await this.page.getByTestId(turnierplan.deleteWidget.deleteButton).click();
-    await this.page.getByTestId(turnierplan.deleteWidget.confirmDeleteButton).click();
+    await this.page.getByTestId(turnierplan.deleteModal.confirmDeleteButton).click();
   }
 }

src/Turnierplan.App/Client/src/app/i18n/de.ts

@@ -1116,9 +1116,10 @@ export const de = {
         Description: 'Beschreibung',
         NoLabels: 'Es sind aktuell keine Labels vorhanden.',
         LabelsInfo: 'Labels können verwendet werden, um angemeldete Mannschaften zu kategorisieren und zu filtern.',
-        DeleteWarning: {
+        Delete: {
           Title: 'Label löschen',
-          Text: 'Wenn Sie ein Label löschen, wird dieses Label von allen Mannschaften entfernt, bei denen dieses Label aktuell zugewiesen ist. Dies kann nicht rückgängig gemacht werden!'
+          AdditionalModalText:
+            'Wenn Sie ein Label löschen, wird dieses Label von allen Mannschaften entfernt, bei denen dieses Label aktuell zugewiesen ist. Dies kann nicht rückgängig gemacht werden!'
         }
       },
       SaveToViewApplications: 'Speichern Sie die offenen Änderungen, um die Anmeldungen zu sehen und neue Anmeldungen hinzuzufügen.',
@@ -1306,9 +1307,11 @@ export const de = {
     DeleteWidget: {
       EnterToConfirm:
         'Zur Bestätigung geben Sie bitte &quot;<span class="text-decoration-underline">{{text}}</span>&quot; in folgendes Textfeld ein:',
-      ConfirmModalText: 'Bestätigen Sie den Löschvorgang. Dies kann <span class="fw-bold">nicht</span> rückgängig gemacht werden!',
-      Delete: 'Löschen',
-      DeleteConfirm: 'Löschen bestätigen'
+      Delete: 'Löschen'
+    },
+    DeleteModal: {
+      InfoText: 'Bestätigen Sie den Löschvorgang. Dies kann <span class="fw-bold">nicht</span> rückgängig gemacht werden!',
+      Confirm: 'Löschen bestätigen'
     },
     VisibilitySelector: {
       Private: 'Privat',

src/Turnierplan.App/Client/src/app/portal/components/delete-modal/delete-modal.component.html

@@ -2,7 +2,7 @@
   <div class="modal-title" [translate]="translationKey + '.Title'"></div>
 </div>
 <div class="modal-body d-flex flex-column">
-  <div [innerHTML]="'Portal.DeleteWidget.ConfirmModalText' | translate"></div>
+  <div [innerHTML]="'Portal.DeleteModal.InfoText' | translate"></div>
 
   <!-- Compare translated text with the translation key. If they are equal, no additional modal text is defined. -->
   @let additionalModalTextKey = translationKey + '.AdditionalModalText';
@@ -18,9 +18,9 @@
 <div class="modal-footer">
   <tp-action-button [type]="'outline-dark'" [title]="'Portal.General.Cancel'" (buttonClick)="modal.dismiss()" />
   <tp-action-button
-    [tpE2E]="'delete-widget-confirm-delete-button'"
+    [tpE2E]="'delete-modal-confirm-delete-button'"
     [type]="'danger'"
     [icon]="'trash'"
-    [title]="'Portal.DeleteWidget.DeleteConfirm'"
+    [title]="'Portal.DeleteModal.Confirm'"
     (buttonClick)="modal.close(true)" />
 </div>

src/Turnierplan.App/Client/src/app/portal/components/labels-manager/labels-manager.component.html

@@ -59,11 +59,11 @@
         </td>
         @if (writeAllowed) {
           <td class="align-middle">
-            <tp-action-button
-              [type]="'outline-danger'"
-              [icon]="'trash'"
-              [mode]="'IconOnly'"
-              (buttonClick)="deleteLabel(deleteConfirmModal, label.id)" />
+            <tp-delete-button
+              [modalConfirmation]="true"
+              [translationKey]="'Portal.ViewPlanningRealm.Labels.Delete'"
+              [targetObjectName]="label.name"
+              (confirmed)="deleteLabel(label.id)" />
           </td>
         }
       </tr>
@@ -95,20 +95,3 @@
     }
   </div>
 </ng-template>
-
-<ng-template #deleteConfirmModal>
-  <div class="modal-header">
-    <div class="modal-title" [translate]="'Portal.ViewPlanningRealm.Labels.DeleteWarning.Title'"></div>
-  </div>
-  <div class="modal-body">
-    <div [translate]="'Portal.ViewPlanningRealm.Labels.DeleteWarning.Text'"></div>
-  </div>
-  <div class="modal-footer">
-    <tp-action-button [type]="'outline-dark'" [title]="'Portal.General.Cancel'" (buttonClick)="confirmDeleteModal?.dismiss()" />
-    <tp-action-button
-      [type]="'danger'"
-      [icon]="'trash'"
-      [title]="'Portal.DeleteWidget.DeleteConfirm'"
-      (buttonClick)="confirmDeleteClicked()" />
-  </div>
-</ng-template>

src/Turnierplan.App/Client/src/app/portal/components/labels-manager/labels-manager.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { PlanningRealmDto } from '../../../api/models/planning-realm-dto';
 import { UpdatePlanningRealmFunc, ViewPlanningRealmComponent } from '../../pages/view-planning-realm/view-planning-realm.component';
 import { ApplicationsFilter } from '../../models/applications-filter';
@@ -10,7 +10,8 @@ import { LabelComponent } from '../label/label.component';
 import { RenameButtonComponent } from '../rename-button/rename-button.component';
 import { ActionButtonComponent } from '../action-button/action-button.component';
 import { IsActionAllowedDirective } from '../../directives/is-action-allowed.directive';
-import { NgbModal, NgbModalRef, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { DeleteButtonComponent } from '../delete-button/delete-button.component';
 
 @Component({
   selector: 'tp-labels-manager',
@@ -21,7 +22,8 @@ import { NgbModal, NgbModalRef, NgbPopoverModule } from '@ng-bootstrap/ng-bootst
     RenameButtonComponent,
     ActionButtonComponent,
     IsActionAllowedDirective,
-    NgbPopoverModule
+    NgbPopoverModule,
+    DeleteButtonComponent
   ],
   templateUrl: './labels-manager.component.html'
 })
@@ -38,13 +40,7 @@ export class LabelsManagerComponent {
   protected readonly Actions = Actions;
   protected readonly availableColors = ViewPlanningRealmComponent.DefaultLabelColorCodes;
 
-  protected confirmDeleteModal?: NgbModalRef;
-  protected currentDeletingLabelId?: number;
-
-  constructor(
-    protected readonly authorizationService: AuthorizationService,
-    private readonly modalService: NgbModal
-  ) {}
+  constructor(protected readonly authorizationService: AuthorizationService) {}
 
   protected setLabelName(id: number, name: string): void {
     this.updatePlanningRealm((planningRealm) => {
@@ -89,22 +85,9 @@ export class LabelsManagerComponent {
     });
   }
 
-  protected deleteLabel(template: TemplateRef<unknown>, id: number): void {
-    this.currentDeletingLabelId = id;
-    this.confirmDeleteModal = this.modalService.open(template, {
-      size: 'md',
-      fullscreen: 'md',
-      centered: true
-    });
-  }
-
-  protected confirmDeleteClicked(): void {
-    if (!this.currentDeletingLabelId) {
-      return;
-    }
-
+  protected deleteLabel(id: number): void {
     this.updatePlanningRealm((planningRealm) => {
-      const index = planningRealm.labels.findIndex((x) => x.id === this.currentDeletingLabelId);
+      const index = planningRealm.labels.findIndex((x) => x.id === id);
 
       if (index === -1) {
         return false;
@@ -114,9 +97,6 @@ export class LabelsManagerComponent {
 
       return true;
     });
-
-    this.confirmDeleteModal?.close();
-    this.currentDeletingLabelId = undefined;
   }
 
   protected searchApplicationsClicked(id: number): void {