Add deletion modal for some chosen delete buttons

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

@@ -230,9 +230,13 @@ export const de = {
           Title: 'Bild umbenennen',
           EnterNewName: 'Geben Sie den neuen Namen für das Bild ein:'
         },
-        DeleteToast: {
-          Title: 'Bild wurde gelöscht',
-          Message: 'Das Bild wurde gelöscht.'
+        Delete: {
+          Title: 'Bild löschen',
+          AdditionalModalText: 'Nach dem Löschen wird das Bild bei allen bisher verknüpften Turnieren nicht mehr sichtbar sein!',
+          SuccessToast: {
+            Title: 'Bild wurde gelöscht',
+            Message: 'Das Bild wurde gelöscht.'
+          }
         }
       },
       ApiKeys: {
@@ -423,7 +427,11 @@ export const de = {
         DeleteOverwrite: {
           Header: 'Zurücksetzen',
           Tooltip:
-            'Wenn zuvorige Änderungen gelöscht werden, wird an der jeweiligen Stelle wieder die Standard-Platzierung anzeigt, welche im Turnier berechnet werden.'
+            'Wenn zuvorige Änderungen gelöscht werden, wird an der jeweiligen Stelle wieder die Standard-Platzierung anzeigt, welche im Turnier berechnet werden.',
+          Title: 'Platzierung zurücksetzen',
+          ObjectDisplayName: 'Zuweisung für {{value}}. Platz',
+          AdditionalModalText:
+            'Nach dem Löschen wird an der jeweiligen Stelle wieder die Standard-Platzierung anzeigt, welche im Turnier berechnet werden.'
         }
       },
       Documents: {
@@ -432,7 +440,6 @@ export const de = {
         Generations: 'Abrufe',
         Configure: 'Einstellungen',
         Download: 'Herunterladen',
-        Delete: 'Löschen',
         Create: 'Neues Dokument',
         Copy: 'Dokument kopieren',
         NoDocuments: 'Es sind aktuell keine Dokumente vorhanden.',
@@ -446,9 +453,13 @@ export const de = {
           Title: 'Dokument umbenennen',
           EnterNewName: 'Geben Sie den neuen Namen für das Dokument ein:'
         },
-        DeleteToast: {
-          Title: 'Dokument wurde gelöscht',
-          Message: 'Das Dokument wurde gelöscht.'
+        Delete: {
+          Header: 'Löschen',
+          Title: 'Dokument löschen',
+          SuccessToast: {
+            Title: 'Dokument wurde gelöscht',
+            Message: 'Das Dokument wurde gelöscht.'
+          }
         },
         ConfigureModal: {
           Title: 'Dokument bearbeiten',
@@ -1166,6 +1177,10 @@ export const de = {
         NoLabels: 'keine Labels',
         NoLinkedTournament: 'kein Turnier verknüpft',
         CannotDeleteTeamWhileLinked: 'Die Mannschaft kann nicht gelöscht werden, solange sie an einem Turnier teilnimmt.',
+        DeleteTeam: {
+          Title: 'Mannschaft aus Anmeldung löschen',
+          AdditionalModalText: 'Die anderen Mannschaften in dieser Anmeldung sind hiervon nicht betroffen.'
+        },
         RenameTeam: {
           Title: 'Mannschaft umbenennen',
           EnterNewName:

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

@@ -1,11 +1,12 @@
 <div
-  [ngbPopover]="disabled ? undefined : popoverContent"
+  [ngbPopover]="disabled || modalConfirmation ? undefined : popoverContent"
   [autoClose]="'outside'"
   #popover="ngbPopover"
   container="body"
   popoverClass="tp-popover-slim"
   [tabindex]="popover.isOpen() ? 0 : -1"
-  (keydown.enter)="popover.isOpen() && confirmed.emit()"
+  (keydown.enter)="popover.isOpen() && deleteClicked()"
+  (click)="showDeleteModalIfEnabled()"
   [ngClass]="{
     'tp-cursor-pointer': reducedFootprint,
     'btn btn-sm btn-outline-danger': !reducedFootprint,
@@ -23,7 +24,7 @@
     @if (!disabled) {
       <i
         class="tp-cursor-pointer bi bi-trash text-danger fs-5"
-        (click)="confirmed.emit()"
+        (click)="deleteClicked()"
         [title]="'Portal.DeleteButton.ConfirmTooltip' | translate"></i>
     }
     <span

src/Turnierplan.App/Client/src/app/portal/components/delete-button/delete-button.component.ts

@@ -1,7 +1,8 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { NgbModal, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import { NgClass } from '@angular/common';
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
+import { showDeleteModal } from '../delete-modal/delete-modal.component';
 
 @Component({
   selector: 'tp-delete-button',
@@ -18,6 +19,43 @@ export class DeleteButtonComponent {
   @Input()
   public disabled: boolean = false;
 
+  @Input()
+  public modalConfirmation: boolean = false;
+
+  @Input()
+  public translationKey?: string;
+
+  @Input()
+  public targetObjectName?: string;
+
   @Output()
   public confirmed = new EventEmitter<void>();
+
+  private readonly modalService = inject(NgbModal);
+
+  protected deleteClicked(): void {
+    if (this.modalConfirmation) {
+      return;
+    }
+
+    this.confirmed.emit();
+  }
+
+  protected showDeleteModalIfEnabled(): void {
+    if (!this.modalConfirmation) {
+      return;
+    }
+
+    if (!this.translationKey || !this.targetObjectName) {
+      throw new Error('The translation key and target object name must be specified if modal confirmation is enabled.');
+    }
+
+    showDeleteModal(this.modalService, this.translationKey, this.targetObjectName).subscribe({
+      next: (result): void => {
+        if (result) {
+          this.confirmed.emit();
+        }
+      }
+    });
+  }
 }

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

@@ -0,0 +1,26 @@
+<div class="modal-header">
+  <div class="modal-title" [translate]="translationKey + '.Title'"></div>
+</div>
+<div class="modal-body d-flex flex-column">
+  <div [innerHTML]="'Portal.DeleteWidget.ConfirmModalText' | translate"></div>
+
+  <!-- Compare translated text with the translation key. If they are equal, no additional modal text is defined. -->
+  @let additionalModalTextKey = translationKey + '.AdditionalModalText';
+  @let additionalModalText = additionalModalTextKey | translate;
+  @if (additionalModalText !== additionalModalTextKey) {
+    <div class="mt-3">{{ additionalModalText }}</div>
+  }
+  <div class="mt-3 d-flex flex-row gap-2 text-danger">
+    <i class="bi bi-trash"></i>
+    <span class="fw-bold">{{ targetObjectName }}</span>
+  </div>
+</div>
+<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'"
+    [type]="'danger'"
+    [icon]="'trash'"
+    [title]="'Portal.DeleteWidget.DeleteConfirm'"
+    (buttonClick)="modal.close(true)" />
+</div>

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

@@ -0,0 +1,34 @@
+import { Component, inject } from '@angular/core';
+import { ActionButtonComponent } from '../action-button/action-button.component';
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core';
+import { E2eDirective } from '../../../core/directives/e2e.directive';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { map, Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+export const showDeleteModal = (ngbModal: NgbModal, translationKey: string, targetObjectName: string): Observable<boolean> => {
+  const ref = ngbModal.open(DeleteModalComponent, {
+    size: 'md',
+    fullscreen: 'md',
+    centered: true
+  });
+
+  ref.componentInstance.translationKey = translationKey;
+  ref.componentInstance.targetObjectName = targetObjectName;
+
+  return ref.closed.pipe(
+    map((x) => x as boolean),
+    filter((x) => x)
+  );
+};
+
+@Component({
+  imports: [ActionButtonComponent, TranslatePipe, TranslateDirective, E2eDirective],
+  templateUrl: './delete-modal.component.html'
+})
+export class DeleteModalComponent {
+  public translationKey: string = '';
+  public targetObjectName: string = '';
+
+  protected readonly modal = inject(NgbActiveModal);
+}

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

@@ -25,29 +25,7 @@
         [icon]="'trash'"
         [disabled]="!allowDeletion"
         [title]="'Portal.DeleteWidget.Delete'"
-        (buttonClick)="deleteClicked(confirmModal)" />
+        (buttonClick)="deleteClicked()" />
     </div>
   </div>
 }
-
-<ng-template #confirmModal>
-  <div class="modal-header">
-    <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 class="mt-3 d-flex flex-row gap-2 text-danger">
-      <i class="bi bi-trash"></i>
-      <span class="fw-bold">{{ confirmationText }}</span>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <tp-action-button [type]="'outline-dark'" [title]="'Portal.General.Cancel'" (buttonClick)="openModal?.dismiss()" />
-    <tp-action-button
-      [tpE2E]="'delete-widget-confirm-delete-button'"
-      [type]="'danger'"
-      [icon]="'trash'"
-      [title]="'Portal.DeleteWidget.DeleteConfirm'"
-      (buttonClick)="confirmDeleteClicked()" />
-  </div>
-</ng-template>

src/Turnierplan.App/Client/src/app/portal/components/delete-widget/delete-widget.component.ts

@@ -4,7 +4,8 @@ import { NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ActionButtonComponent } from '../action-button/action-button.component';
 import { E2eDirective } from '../../../core/directives/e2e.directive';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { showDeleteModal } from '../delete-modal/delete-modal.component';
 
 @Component({
   selector: 'tp-delete-widget',
@@ -20,6 +21,7 @@ export class DeleteWidgetComponent {
 
   @Input()
   public set targetObjectName(value: string) {
+    this._targetObjectName = value;
     this.confirmationText = value.replaceAll(/[^A-Za-z0-9.\-_|ÄÖÜäöüß ]+/g, '').trim();
   }
 
@@ -29,26 +31,24 @@ export class DeleteWidgetComponent {
   protected confirmationText?: string;
   protected confirmationTextInput: string = '';
   protected allowDeletion = false;
-  protected openModal?: NgbModalRef;
+
+  private _targetObjectName: string = '';
 
   constructor(private readonly modalService: NgbModal) {}
 
   protected checkConfirmationText(): void {
     this.allowDeletion = this.confirmationText !== undefined && this.confirmationText === this.confirmationTextInput.trim();
   }
 
-  protected deleteClicked(template: TemplateRef<unknown>): void {
+  protected deleteClicked(): void {
     if (this.allowDeletion) {
-      this.openModal = this.modalService.open(template, {
-        size: 'md',
-        fullscreen: 'md',
-        centered: true
+      showDeleteModal(this.modalService, this.translationKey, this._targetObjectName).subscribe({
+        next: (result): void => {
+          if (result) {
+            this.deleteClick.emit();
+          }
+        }
       });
     }
   }
-
-  protected confirmDeleteClicked(): void {
-    this.openModal?.dismiss();
-    this.deleteClick.emit();
-  }
 }

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

@@ -20,7 +20,7 @@
         </th>
         @if (writeAllowed) {
           <th>
-            <span class="d-none d-md-block" translate="Portal.ViewTournament.Documents.Delete"></span>
+            <span class="d-none d-md-block" translate="Portal.ViewTournament.Documents.Delete.Header"></span>
           </th>
         }
       </tr>
@@ -93,7 +93,11 @@
           </td>
           @if (writeAllowed) {
             <td class="align-middle">
-              <tp-delete-button (confirmed)="deleteDocument(doc.id)" />
+              <tp-delete-button
+                [modalConfirmation]="true"
+                [translationKey]="'Portal.ViewTournament.Documents.Delete'"
+                [targetObjectName]="doc.name"
+                (confirmed)="deleteDocument(doc.id)" />
             </td>
           }
         </tr>

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

@@ -58,7 +58,11 @@
           </td>
           <td class="align-middle">
             @if (writeAllowed) {
-              <tp-delete-button (confirmed)="deleteImage(image.id)" />
+              <tp-delete-button
+                [modalConfirmation]="true"
+                [translationKey]="'Portal.ViewOrganization.Images.Delete'"
+                [targetObjectName]="image.name"
+                (confirmed)="deleteImage(image.id)" />
             }
           </td>
         </tr>

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

@@ -87,8 +87,8 @@ export class ImageManagerComponent {
 
         this.notificationService.showNotification(
           'info',
-          'Portal.ViewOrganization.Images.DeleteToast.Title',
-          'Portal.ViewOrganization.Images.DeleteToast.Message'
+          'Portal.ViewOrganization.Images.Delete.SuccessToast.Title',
+          'Portal.ViewOrganization.Images.Delete.SuccessToast.Message'
         );
       },
       error: (error) => {

src/Turnierplan.App/Client/src/app/portal/components/manage-applications/manage-applications.component.html

@@ -245,7 +245,12 @@
                                 [margin]="false"
                                 [tooltipText]="'Portal.ViewPlanningRealm.Applications.CannotDeleteTeamWhileLinked'" />
                             } @else {
-                              <tp-delete-button [reducedFootprint]="true" (confirmed)="deleteTeam(application.id, team.id)" />
+                              <tp-delete-button
+                                [reducedFootprint]="true"
+                                [modalConfirmation]="true"
+                                [translationKey]="'Portal.ViewPlanningRealm.Applications.DeleteTeam'"
+                                [targetObjectName]="team.name"
+                                (confirmed)="deleteTeam(application.id, team.id)" />
                             }
                           </td>
                         </tr>

src/Turnierplan.App/Client/src/app/portal/components/ranking/ranking.component.html

@@ -48,7 +48,14 @@
               @if (ranking.rankingOverwriteId !== undefined) {
                 <div class="d-flex flex-row">
                   <!-- d-flex to avoid layout issues -->
-                  <tp-delete-button [reducedFootprint]="true" (confirmed)="removeRankingOverwrite.emit(ranking.rankingOverwriteId)" />
+                  <tp-delete-button
+                    [reducedFootprint]="true"
+                    [modalConfirmation]="true"
+                    [translationKey]="'Portal.ViewTournament.Ranking.DeleteOverwrite'"
+                    [targetObjectName]="
+                      'Portal.ViewTournament.Ranking.DeleteOverwrite.ObjectDisplayName' | translate: { value: ranking.position }
+                    "
+                    (confirmed)="removeRankingOverwrite.emit(ranking.rankingOverwriteId)" />
                 </div>
               }
             </td>

src/Turnierplan.App/Client/src/app/portal/pages/view-tournament/view-tournament.component.ts

@@ -450,8 +450,8 @@ export class ViewTournamentComponent implements OnInit, OnDestroy {
         next: () => {
           this.notificationService.showNotification(
             'info',
-            'Portal.ViewTournament.Documents.DeleteToast.Title',
-            'Portal.ViewTournament.Documents.DeleteToast.Message'
+            'Portal.ViewTournament.Documents.Delete.SuccessToast.Title',
+            'Portal.ViewTournament.Documents.Delete.SuccessToast.Message'
           );
         },
         error: (error) => {