From 5c19b92b5030433788565b2abbc93a951a0a1e56 Mon Sep 17 00:00:00 2001
From: Paula-Kli <Paula-Kli@users.noreply.github.com>
Date: Tue, 17 Oct 2023 11:51:09 +0200
Subject: [PATCH] feat: Add user profile page

---
 backend/capellacollab/projects/routes.py      | 34 ++++++++++++++++++
 frontend/src/app/app-routing.module.ts        |  6 ++++
 frontend/src/app/app.module.ts                |  2 ++
 .../app/general/header/header.component.html  | 10 +++++-
 .../project-user-settings.component.html      |  8 +++--
 .../app/projects/service/project.service.ts   |  9 +++++
 .../src/app/services/user/user.service.ts     |  4 +++
 .../users-profile/users-profile.component.css |  4 +++
 .../users-profile.component.html              | 25 +++++++++++++
 .../users-profile/users-profile.component.ts  | 36 +++++++++++++++++++
 10 files changed, 135 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/app/users/users-profile/users-profile.component.css
 create mode 100644 frontend/src/app/users/users-profile/users-profile.component.html
 create mode 100644 frontend/src/app/users/users-profile/users-profile.component.ts

diff --git a/backend/capellacollab/projects/routes.py b/backend/capellacollab/projects/routes.py
index 34f703d1ef..3663068420 100644
--- a/backend/capellacollab/projects/routes.py
+++ b/backend/capellacollab/projects/routes.py
@@ -68,6 +68,40 @@ def get_projects(
     return projects
 
 
+@router.get(
+    "/common/{user_id}", response_model=models.Project, tags=["Projects"]
+)
+def get_common_projects(
+    user_for_common_projects: users_models.DatabaseUser = fastapi.Depends(
+        users_injectables.get_existing_user
+    ),
+    user: users_models.DatabaseUser = fastapi.Depends(
+        users_injectables.get_own_user
+    ),
+    log: logging.LoggerAdapter = fastapi.Depends(
+        core_logging.get_request_logger
+    ),
+) -> list[models.DatabaseProject]:
+    current_users_projects = [
+        association.project
+        for association in user.projects
+        if not association.project.visibility == models.Visibility.INTERNAL
+    ]
+    projects_for_common = [
+        association.project
+        for association in user_for_common_projects.projects
+        if not association.project.visibility == models.Visibility.INTERNAL
+    ]
+
+    projects = [
+        project
+        for project in current_users_projects
+        if project in projects_for_common
+    ]
+    log.info("Fetching the following projects: %s", projects)
+    return projects
+
+
 @router.patch(
     "/{project_slug}",
     response_model=models.Project,
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 5dc705859d..fc3bbef665 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -14,6 +14,7 @@ import { EditProjectMetadataComponent } from 'src/app/projects/project-detail/ed
 import { SessionComponent } from 'src/app/sessions/session/session.component';
 import { PipelinesOverviewComponent } from 'src/app/settings/core/pipelines-overview/pipelines-overview.component';
 import { BasicAuthTokenComponent } from 'src/app/users/basic-auth-token/basic-auth-token.component';
+import { UsersProfileComponent } from 'src/app/users/users-profile/users-profile.component';
 import { EventsComponent } from './events/events.component';
 import { AuthComponent } from './general/auth/auth/auth.component';
 import { AuthGuardService } from './general/auth/auth-guard/auth-guard.service';
@@ -442,6 +443,11 @@ const routes: Routes = [
         data: { breadcrumb: 'Events' },
         component: EventsComponent,
       },
+      {
+        path: 'user',
+        data: { breadcrumb: (data: Data) => data?.user?.name || 'User' },
+        component: UsersProfileComponent,
+      },
       {
         path: 'tokens',
         data: { breadcrumb: 'Tokens' },
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 8715ca6a66..bb194e57ee 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -136,6 +136,7 @@ import { T4CRepoDeletionDialogComponent } from './settings/modelsources/t4c-sett
 import { T4CSettingsWrapperComponent } from './settings/modelsources/t4c-settings/t4c-settings-wrapper/t4c-settings-wrapper.component';
 import { T4CSettingsComponent } from './settings/modelsources/t4c-settings/t4c-settings.component';
 import { SettingsComponent } from './settings/settings.component';
+import { UsersProfileComponent } from './users/users-profile/users-profile.component';
 
 @NgModule({
   declarations: [
@@ -223,6 +224,7 @@ import { SettingsComponent } from './settings/settings.component';
     TriggerPipelineComponent,
     UserSessionsWrapperComponent,
     UserSettingsComponent,
+    UsersProfileComponent,
     VersionComponent,
     ViewLogsDialogComponent,
   ],
diff --git a/frontend/src/app/general/header/header.component.html b/frontend/src/app/general/header/header.component.html
index 9c18f0a11f..8aeca41840 100644
--- a/frontend/src/app/general/header/header.component.html
+++ b/frontend/src/app/general/header/header.component.html
@@ -48,6 +48,14 @@
           </a>
         </div>
         <mat-menu #profileMenu="matMenu">
+          <a
+            class="profileMenuButton"
+            mat-menu-item
+            routerLink="user"
+            [queryParams]="{ user_id: userService.user?.id }"
+          >
+            Profile <mat-icon>account_circle</mat-icon>
+          </a>
           <a
             *ngIf="userService.user?.role === 'administrator'"
             class="profileMenuButton"
@@ -84,7 +92,7 @@
           mat-raised-button
           [matMenuTriggerFor]="profileMenu"
         >
-          Profile <mat-icon>account_circle</mat-icon>
+          Menu <mat-icon>menu</mat-icon>
         </button>
       </div>
     </div>
diff --git a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
index 2e6fc39a5f..994c4ddd3b 100644
--- a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
+++ b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
@@ -50,7 +50,11 @@ <h2>Project members</h2>
             )
           "
         >
-          <div class="flex">
+          <a
+            class="flex"
+            [routerLink]="['/user']"
+            [queryParams]="{ user_id: user.user.id }"
+          >
             <div class="ml-0 mr-4 flex items-center">
               <mat-icon class="my-auto !h-8 !w-8 text-3xl" mat-list-icon
                 >account_circle</mat-icon
@@ -63,7 +67,7 @@ <h2>Project members</h2>
                 {{ projectUserService.PERMISSIONS[user.permission] }}
               </div>
             </div>
-          </div>
+          </a>
           <div class="ml-1 mr-0 flex items-center">
             <button
               mat-icon-button
diff --git a/frontend/src/app/projects/service/project.service.ts b/frontend/src/app/projects/service/project.service.ts
index 270b646dad..2ff974707c 100644
--- a/frontend/src/app/projects/service/project.service.ts
+++ b/frontend/src/app/projects/service/project.service.ts
@@ -35,6 +35,15 @@ export class ProjectService {
     });
   }
 
+  loadCommonProjects(user_id: number): void {
+    this.http
+      .get<Project[]>(`${this.BACKEND_URL_PREFIX}/common/${user_id}`)
+      .subscribe({
+        next: (projects) => this._projects.next(projects),
+        error: () => this._projects.next(undefined),
+      });
+  }
+
   loadProjectBySlug(slug: string): void {
     this.http.get<Project>(`${this.BACKEND_URL_PREFIX}/${slug}`).subscribe({
       next: (project) => this._project.next(project),
diff --git a/frontend/src/app/services/user/user.service.ts b/frontend/src/app/services/user/user.service.ts
index a743a1c969..87c70ce421 100644
--- a/frontend/src/app/services/user/user.service.ts
+++ b/frontend/src/app/services/user/user.service.ts
@@ -50,6 +50,10 @@ export class UserService {
     return this.http.get<User>(this.BACKEND_URL_PREFIX + user.id);
   }
 
+  getUserById(user_id: number): Observable<User> {
+    return this.http.get<User>(this.BACKEND_URL_PREFIX + user_id);
+  }
+
   getCurrentUser(): Observable<User> {
     return this.http.get<User>(this.BACKEND_URL_PREFIX + 'current');
   }
diff --git a/frontend/src/app/users/users-profile/users-profile.component.css b/frontend/src/app/users/users-profile/users-profile.component.css
new file mode 100644
index 0000000000..d49deaffd7
--- /dev/null
+++ b/frontend/src/app/users/users-profile/users-profile.component.css
@@ -0,0 +1,4 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
diff --git a/frontend/src/app/users/users-profile/users-profile.component.html b/frontend/src/app/users/users-profile/users-profile.component.html
new file mode 100644
index 0000000000..754a49a074
--- /dev/null
+++ b/frontend/src/app/users/users-profile/users-profile.component.html
@@ -0,0 +1,25 @@
+<!--
+ ~ SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ ~ SPDX-License-Identifier: Apache-2.0
+ -->
+
+<h2>Profile of {{ user?.name }}</h2>
+
+<div *ngIf="user?.id !== userService.user?.id">Common Projects</div>
+
+<ng-container
+  *ngIf="(projectService.projects$ | async)?.length; else elseBlock"
+>
+  <mat-card
+    *ngFor="let project of projectService.projects$ | async"
+    class="!ml-0 cursor-pointer"
+    [routerLink]="['/project', project.slug]"
+  >
+    <mat-card-content>
+      <b>{{ project.name }}</b
+      ><br />
+      {{ project.description }}
+    </mat-card-content>
+  </mat-card>
+</ng-container>
+<ng-template #elseBlock>You do not have any common projects.</ng-template>
diff --git a/frontend/src/app/users/users-profile/users-profile.component.ts b/frontend/src/app/users/users-profile/users-profile.component.ts
new file mode 100644
index 0000000000..fa8a9b76b2
--- /dev/null
+++ b/frontend/src/app/users/users-profile/users-profile.component.ts
@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ProjectService } from 'src/app/projects/service/project.service';
+import { User, UserService } from 'src/app/services/user/user.service';
+
+@Component({
+  selector: 'app-users-profile',
+  templateUrl: './users-profile.component.html',
+  styleUrls: ['./users-profile.component.css'],
+})
+export class UsersProfileComponent implements OnInit {
+  user: User | undefined;
+  user_id: number | undefined;
+  constructor(
+    public userService: UserService,
+    public projectService: ProjectService,
+    private route: ActivatedRoute,
+  ) {}
+
+  ngOnInit() {
+    this.route.queryParams.subscribe(
+      (params) => (this.user_id = params.user_id),
+    );
+    if (this.user_id) {
+      this.userService
+        .getUserById(this.user_id)
+        .subscribe((user) => (this.user = user));
+    }
+    this.projectService.loadCommonProjects(this.user_id!);
+  }
+}