From 7b8238189f99d54094bde366a526f93bed219053 Mon Sep 17 00:00:00 2001
From: clean-coder <jean-claude.brantschen@gmx.ch>
Date: Fri, 26 Jul 2024 08:49:31 +0200
Subject: [PATCH] #931: new component DeleteUserComponent

---
 .../delete-user/delete-user.component.html    | 14 +++++
 .../delete-user/delete-user.component.scss    |  9 ++++
 .../delete-user/delete-user.component.spec.ts |  3 ++
 .../delete-user/delete-user.component.ts      | 54 +++++++++++++++++++
 .../team-management/team-management.module.ts |  2 +
 5 files changed, 82 insertions(+)
 create mode 100644 frontend/src/app/team-management/delete-user/delete-user.component.html
 create mode 100644 frontend/src/app/team-management/delete-user/delete-user.component.scss
 create mode 100644 frontend/src/app/team-management/delete-user/delete-user.component.spec.ts
 create mode 100644 frontend/src/app/team-management/delete-user/delete-user.component.ts

diff --git a/frontend/src/app/team-management/delete-user/delete-user.component.html b/frontend/src/app/team-management/delete-user/delete-user.component.html
new file mode 100644
index 0000000000..8bebca1df1
--- /dev/null
+++ b/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>
diff --git a/frontend/src/app/team-management/delete-user/delete-user.component.scss b/frontend/src/app/team-management/delete-user/delete-user.component.scss
new file mode 100644
index 0000000000..83cc63aea2
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/frontend/src/app/team-management/delete-user/delete-user.component.spec.ts b/frontend/src/app/team-management/delete-user/delete-user.component.spec.ts
new file mode 100644
index 0000000000..7e47b7a521
--- /dev/null
+++ b/frontend/src/app/team-management/delete-user/delete-user.component.spec.ts
@@ -0,0 +1,3 @@
+describe('DeleteUserComponent', () => {
+  it('todo write tests', () => {});
+});
diff --git a/frontend/src/app/team-management/delete-user/delete-user.component.ts b/frontend/src/app/team-management/delete-user/delete-user.component.ts
new file mode 100644
index 0000000000..30f373e119
--- /dev/null
+++ b/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();
+    });
+  }
+}
diff --git a/frontend/src/app/team-management/team-management.module.ts b/frontend/src/app/team-management/team-management.module.ts
index 03a57af44e..594e96d669 100644
--- a/frontend/src/app/team-management/team-management.module.ts
+++ b/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,