#931: new component DeleteUserComponent

frontend/src/app/team-management/delete-user/delete-user.component.html

@@ -0,0 +1,14 @@
+<ng-container>
+  <button
+    (click)="deleteUser()"
+    [attr.data-testId]="'delete-user'"
+    class="mdc-button px-0 pe-2"
+    color="primary"
+    mat-button
+  >
+    <span class="d-flex align-items-center fw-bold add-text">
+      <img alt="Delete user button" class="add-cross-button" src="/assets/icons/delete-icon.svg" />
+      Member l&ouml;schen
+    </span>
+  </button>
+</ng-container>

frontend/src/app/team-management/delete-user/delete-user.component.scss

@@ -0,0 +1,9 @@
+.new-team {
+  display: flex;
+
+  > mat-form-field {
+    flex: 0 0 calc(35% + 1rem);
+    padding-right: 1rem;
+    box-sizing: border-box;
+  }
+}

frontend/src/app/team-management/delete-user/delete-user.component.spec.ts

@@ -0,0 +1,3 @@
+describe('DeleteUserComponent', () => {
+  it('todo write tests', () => {});
+});

frontend/src/app/team-management/delete-user/delete-user.component.ts

@@ -0,0 +1,54 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { UserService } from '../../services/user.service';
+import { User } from '../../shared/types/model/User';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-delete-user',
+  templateUrl: './delete-user.component.html',
+  styleUrl: './delete-user.component.scss',
+})
+export class DeleteUserComponent implements OnInit {
+  @Input({ required: true }) user!: User;
+
+  private isUserMemberOfTeams: boolean = false;
+  private isUserOwnerOfKeyResults: boolean = false;
+
+  constructor(
+    private readonly userService: UserService,
+    private readonly location: Location,
+  ) {}
+
+  ngOnInit() {
+    this.memberOfTeams(this.user.id);
+    this.ownerOfKeyResults(this.user.id);
+  }
+
+  memberOfTeams(userId: number) {
+    this.isUserMemberOfTeams = this.user.userTeamList != null && this.user.userTeamList.length > 0;
+    console.log('### member_of_teams', userId, this.isUserMemberOfTeams);
+  }
+
+  ownerOfKeyResults(userId: number) {
+    this.isUserMemberOfTeams = this.user.userTeamList.length > 0;
+    this.userService.isUserOwnerOfKeyResults(this.user).subscribe((booleanAsObject) => {
+      this.isUserOwnerOfKeyResults = !!booleanAsObject;
+      console.log('### key_result', userId, !!booleanAsObject);
+    });
+  }
+
+  deleteUser() {
+    if (this.isUserMemberOfTeams) {
+      alert('user is member of team');
+      return;
+    }
+    if (this.isUserOwnerOfKeyResults) {
+      alert('user is owner of key results');
+      return;
+    }
+
+    this.userService.deleteUser(this.user).subscribe((v) => {
+      this.location.back();
+    });
+  }
+}

frontend/src/app/team-management/team-management.module.ts

@@ -27,6 +27,7 @@ import { TeamRoleDropdownComponent } from './team-role-dropdown/team-role-dropdo
 import { MatSelectModule } from '@angular/material/select';
 import { TranslateModule } from '@ngx-translate/core';
 import { AddUserTeamComponent } from './add-user-team/add-user-team.component';
+import { DeleteUserComponent } from './delete-user/delete-user.component';
 import { A11yModule } from '@angular/cdk/a11y';
 import { TeamManagementMobileFilterComponent } from './team-management-mobile-filter/team-management-mobile-filter.component';
 import { MemberListTableComponent } from './member-list/member-list-table/member-list-table.component';
@@ -55,6 +56,7 @@ import { InviteUserDialogComponent } from './invite-user-dialog/invite-user-dial
     MemberDetailComponent,
     TeamRoleDropdownComponent,
     AddUserTeamComponent,
+    DeleteUserComponent,
     TeamManagementMobileFilterComponent,
     MemberListTableComponent,
     MemberListMobileComponent,