fill public profile page with content

src/app/chat/data-access/chat-http.service.ts

@@ -3,9 +3,9 @@ import { inject, Injectable } from '@angular/core';
 import { catchError, map, Observable, of, switchMap } from 'rxjs';
 import { EnvironmentService } from '@shared/data-access/environment.service';
 import {
- APIResponse,
  asError,
  asSuccess,
+ OldAPIResponse,
 } from '@shared/util/http/response.types';
 import {
  ChatDto,
@@ -43,7 +43,7 @@ export class ChatHttpService {
  createMessage$(
  chatId: string,
  message: CreateMessageRequest
- ): Observable<APIResponse<void>> {
+ ): Observable<OldAPIResponse<void>> {
  return this.http
  .post<void>(
  `${this.chatApiUrl}/${chatId}/messages`,
@@ -107,7 +107,7 @@ export class ChatHttpService {
  );
  }
 
- getChatsAndDancers$(): Observable<APIResponse<ChatsAndDancers>> {
+ getChatsAndDancers$(): Observable<OldAPIResponse<ChatsAndDancers>> {
  return this.http.get<ChatList>(this.chatApiUrl, this.defaultOptions).pipe(
  map((chatList) => {
  const dancerIds = this.getAllDancerIds(chatList.chats);

src/app/home/data-access/contact.service.ts

@@ -8,9 +8,9 @@ import {
 } from '@angular/common/http';
 import { EnvironmentService } from '@shared/data-access/environment.service';
 import {
- APIResponse,
  asError,
  asSuccess,
+ OldAPIResponse,
 } from '@shared/util/http/response.types';
 import { EventLogService } from '@shared/data-access/log/event-log.service';
 
@@ -28,7 +28,10 @@ export class ContactService {
  private eventLogService: EventLogService
  ) {}
 
- sendMessage(message: string, sender: string): Observable<APIResponse<void>> {
+ sendMessage(
+ message: string,
+ sender: string
+ ): Observable<OldAPIResponse<void>> {
  const apiUrlContact = `${this.environment.getApiUrl()}/contacts`;
  const payload = {
  sender,

src/app/home/feature/contact/contact.component.ts

@@ -10,7 +10,7 @@ import { AuthenticationService } from '@shared/data-access/auth/authentication.s
 import { EventLogService } from '@shared/data-access/log/event-log.service';
 import { ContactService } from '../../data-access/contact.service';
 import { tap } from 'rxjs';
-import { APIResponse } from '@shared/util/http/response.types';
+import { OldAPIResponse } from '@shared/util/http/response.types';
 import { ErrorMessagePipe } from '@shared/util/http/error-message.pipe';
 import { MatButtonModule } from '@angular/material/button';
 import { RecaptchaModule } from 'ng-recaptcha';
@@ -40,7 +40,7 @@ import { DataTestDirective } from '@shared/util/data-test.directive';
 })
 export class ContactComponent implements OnInit {
  contactForm!: FormGroup;
- contactResponse?: APIResponse<void>;
+ contactResponse?: OldAPIResponse<void>;
 
  // TODO: refactor, we should solve this in a reactive way (e.g. subscribe in the template)
  isCaptchaSolved = false;

src/app/profile/data-access/image-upload.service.ts

@@ -3,9 +3,9 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { catchError, map, Observable, of } from 'rxjs';
 import { EnvironmentService } from '@shared/data-access/environment.service';
 import {
- APIResponse,
  asError,
  asSuccess,
+ OldAPIResponse,
 } from '@shared/util/http/response.types';
 import { UploadedImageDao } from './types/profile.types';
 
@@ -36,7 +36,7 @@ export class ImageUploadService {
 
  uploadImage$(
  croppedImage: string
- ): Observable<APIResponse<UploadedImageDao>> {
+ ): Observable<OldAPIResponse<UploadedImageDao>> {
  const blobFromDataUrl = this.dataURItoBlob(croppedImage);
  const formData: FormData = new FormData();
  formData.append('file', blobFromDataUrl);

src/app/profile/data-access/profile.service.ts

@@ -1,12 +1,42 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
+import { EnvironmentService } from '@shared/data-access/environment.service';
+import { HttpClient } from '@angular/common/http';
+import { PublicProfile } from './types/public-profile.types';
+import { Observable } from 'rxjs';
+import { toApiResponse } from '@shared/util/http/response.utils';
+import { ApiResponse } from '@shared/util/http/response.types';
+import { ImageService } from '@shared/data-access/image.service';
 
 @Injectable({
  providedIn: 'root',
 })
 export class ProfileService {
- constructor() {}
+ private readonly http = inject(HttpClient);
+ private readonly imageService = inject(ImageService);
+ private readonly profileApiUrl = `${inject(
+ EnvironmentService
+ ).getApiUrl()}/profile`;
 
  // public getOwnProfile(): void {}
  //
- // public getProfile(dancerId: string): void {}
+
+ public getPublicProfile(
+ dancerId: string
+ ): Observable<ApiResponse<PublicProfile>> {
+ return toApiResponse(
+ this.http.get<PublicProfile>(`${this.profileApiUrl}/${dancerId}`)
+ );
+ }
+
+ getProfileImageSrc(imgHash: string | undefined, width = 150): string {
+ if (imgHash) {
+ return this.imageService.getDancerImageSrcOrDefault(imgHash, width);
+ } else {
+ return this.imageService.getDancerImageSrcOrDefault(null, width);
+ }
+ }
+
+ getDefaultProfileImage(): string {
+ return this.imageService.getDefaultDancerImage();
+ }
 }

src/app/profile/data-access/types/public-profile.types.ts

@@ -0,0 +1,15 @@
+import { Dance, Gender } from './profile.types';
+
+export type PublicProfile = {
+ id: string;
+ size: number;
+ gender: Gender;
+ dancerName: string;
+ age: number;
+ ableTo: Dance[];
+ wantsTo: Dance[];
+ city: string;
+ country: string;
+ profileImageHash: string;
+ aboutMe: string;
+};

src/app/profile/feature/edit-profile/edit-profile.component.ts

@@ -4,7 +4,7 @@ import {
  NonNullableFormBuilder,
  ReactiveFormsModule,
 } from '@angular/forms';
-import { APIError, APIResponse } from '@shared/util/http/response.types';
+import { APIError, OldAPIResponse } from '@shared/util/http/response.types';
 import { ProfileOldService } from '@shared/data-access/profile/profile-old.service';
 import {
  Profile,
@@ -56,7 +56,7 @@ export class EditProfileComponent {
  });
  croppedImage?: string | null;
  imageChangedEvent: any = '';
- uploadResponse?: APIResponse<UploadedImageDao>;
+ uploadResponse?: OldAPIResponse<UploadedImageDao>;
  error?: APIError;
 
  constructor(

src/app/profile/feature/initial-setup/init-profile-image/init-profile-image.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { ImageUploadService } from '../../../data-access/image-upload.service';
 import { ImageCroppedEvent, ImageCropperModule } from 'ngx-image-cropper';
 import { ProfileOldService } from '@shared/data-access/profile/profile-old.service';
-import { APIResponse } from '@shared/util/http/response.types';
+import { OldAPIResponse } from '@shared/util/http/response.types';
 import { UploadedImageDao } from '../../../data-access/types/profile.types';
 import { Router } from '@angular/router';
 import { NgIf } from '@angular/common';
@@ -18,7 +18,7 @@ import { MatButtonModule } from '@angular/material/button';
 export class InitProfileImageComponent {
  croppedImage?: string | null | undefined;
  imageChangedEvent: any = '';
- uploadResponse?: APIResponse<UploadedImageDao>;
+ uploadResponse?: OldAPIResponse<UploadedImageDao>;
 
  constructor(
  private imageUploadService: ImageUploadService,

src/app/profile/feature/initial-setup/init-user-name/init-user-name.component.ts

@@ -9,8 +9,8 @@ import { ProfileHttpService } from '@shared/data-access/profile/profile-http.ser
 import { ProfileOldService } from '@shared/data-access/profile/profile-old.service';
 import {
  APIError,
- APIResponse,
  asError,
+ OldAPIResponse,
  ResponseError,
 } from '@shared/util/http/response.types';
 import { of, switchMap } from 'rxjs';
@@ -60,7 +60,7 @@ export class InitUserNameComponent {
  this.profileHttpService
  .checkNameAvailability$(username)
  .pipe(
- switchMap((response: APIResponse<NameAvailability>) => {
+ switchMap((response: OldAPIResponse<NameAvailability>) => {
  if (!response.isSuccess) {
  return of(response as ResponseError);
  }
@@ -70,7 +70,7 @@ export class InitUserNameComponent {
  return this.profileService.setDancerName(username);
  })
  )
- .subscribe((response: APIResponse<void>) => {
+ .subscribe((response: OldAPIResponse<void>) => {
  if (response.isSuccess) {
  this.router.navigate(['profile/initial-setup/personal-info']);
  } else {

src/app/profile/feature/public-profile.component.ts

@@ -1,19 +1,135 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ProfileService } from '../data-access/profile.service';
+import { AgePipe } from '@shared/util/age.pipe';
+import { DisplayDanceLevelPipe } from '../util/pipes/display-dance-level.pipe';
+import { DisplayDanceRolePipe } from '../util/pipes/display-dance-role.pipe';
+import { DisplayGenderPipe } from '../util/pipes/display-gender.pipe';
+import { ProfileDataEntryComponent } from '../ui/profile-data-entry.component';
 
 @Component({
  selector: 'app-public-profile',
  standalone: true,
- imports: [CommonModule],
+ imports: [
+ CommonModule,
+ AgePipe,
+ DisplayDanceLevelPipe,
+ DisplayDanceRolePipe,
+ DisplayGenderPipe,
+ ProfileDataEntryComponent,
+ ],
  template: `
- <p>
- public-profile works and the id is
- {{ activeRoute.snapshot.params['participantId'] }}
- </p>
+ <!-- TODO: loading and error view -->
+ <ng-container *ngIf="profileResponse$ | async as profileResponse">
+ <div
+ *ngIf="
+ profileResponse.fetchStatus === 'success' &&
+ profileResponse.payload as profile
+ "
+ class="my-12 mx-auto flex max-w-[1200px] flex-col gap-10 px-4 md:flex-row md:px-10 lg:px-10"
+ >
+ <div class="mx-auto lg:px-16">
+ <!-- TODO: use pipe-->
+ <img
+ class="relative h-[250px] w-[250px] max-w-none rounded-full"
+ alt="Profile Image"
+ [src]="
+ profileService.getProfileImageSrc(profile.profileImageHash, 250)
+ "
+ (error)="handleMissingImage($event)"
+ />
+ </div>
+ <div class="grow">
+ <h1 class="page-header">
+ <span class="text-gray-500">Profil von</span>
+ {{ profile.dancerName }}
+ </h1>
+
+ <button
+ class="mb-4 flex items-center gap-2 rounded border border-red-800 fill-red-800 px-3 py-1 text-red-800 transition-colors hover:bg-red-50"
+ (click)="openChat(profile.id)"
+ >
+ <div class="grow-0">
+ <svg class="h-6 w-6">
+ <use href="assets/icons/bootstrap-icons.svg#chat-dots" />
+ </svg>
+ </div>
+ <div class="grow-0">Nachricht schreiben</div>
+ </button>
+
+ <app-profile-data-entry
+ *ngIf="profile.aboutMe"
+ icon="info-square"
+ label="Über mich"
+ class="block border-t"
+ [value]="profile.aboutMe"
+ ></app-profile-data-entry>
+
+ <app-profile-data-entry
+ *ngIf="profile.city"
+ icon="buildings"
+ label="Wohnort"
+ [value]="profile.city"
+ ></app-profile-data-entry>
+
+ <app-profile-data-entry
+ *ngIf="profile.age"
+ icon="calendar3"
+ label="Alter"
+ [value]="profile.age.toString()"
+ ></app-profile-data-entry>
+
+ <app-profile-data-entry
+ *ngIf="profile.size"
+ icon="arrows-vertical"
+ label="Körpergröße"
+ [value]="profile.size + ' cm'"
+ ></app-profile-data-entry>
+
+ <app-profile-data-entry
+ *ngIf="profile.gender"
+ icon="gender-ambiguous"
+ label="Geschlecht"
+ [value]="profile.gender | displayGender"
+ ></app-profile-data-entry>
+
+ <app-profile-data-entry
+ *ngFor="let danceExperience of profile.ableTo"
+ icon="music-note-beamed"
+ label="Tanzerfahrung"
+ [value]="
+ danceExperience.dance +
+ ' (' +
+ (danceExperience.level | displayDanceLevel) +
+ ', ' +
+ (danceExperience.leading | displayDanceRole) +
+ ')'
+ "
+ ></app-profile-data-entry>
+ </div>
+ </div>
+ </ng-container>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PublicProfileComponent {
- public readonly activeRoute = inject(ActivatedRoute);
+ private readonly activeRoute = inject(ActivatedRoute);
+ public readonly profileService = inject(ProfileService);
+ private readonly router = inject(Router);
+
+ public readonly profileResponse$ = this.profileService.getPublicProfile(
+ this.activeRoute.snapshot.params['participantId']
+ );
+
+ handleMissingImage($event: ErrorEvent): void {
+ ($event.target as HTMLImageElement).src =
+ this.profileService.getDefaultProfileImage();
+ }
+
+ openChat(dancerId: string): void {
+ this.router.navigate(['chat'], {
+ queryParams: { participantId: dancerId },
+ });
+ }
 }

src/app/profile/profile.routes.ts

@@ -19,6 +19,7 @@ import { PublicProfileComponent } from './feature/public-profile.component';
 export const PROFILE_ROUTES: Routes = [
  {
  path: 'view/:participantId',
+ // add guard: only open if not the own profile...
  pathMatch: 'full',
  component: PublicProfileComponent,
  },

src/app/recommendation/data-access/recommendation-http.service.ts

@@ -3,9 +3,9 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { EnvironmentService } from '@shared/data-access/environment.service';
 import { RecommendationsDto } from './types/recommendations.dto';
 import {
- APIResponse,
  asError,
  asSuccess,
+ OldAPIResponse,
 } from '@shared/util/http/response.types';
 import { catchError, map, Observable, of } from 'rxjs';
 
@@ -28,7 +28,7 @@ export class RecommendationHttpService {
  this.recommendationsApiUrl = `${this.environment.getApiUrl()}/recommendations`;
  }
 
- getRecommendations$(): Observable<APIResponse<RecommendationsDto>> {
+ getRecommendations$(): Observable<OldAPIResponse<RecommendationsDto>> {
  return this.http
  .get<RecommendationsDto>(this.recommendationsApiUrl, this.defaultOptions)
  .pipe(