-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fill public profile page with content
- Loading branch information
1 parent
68d307d
commit a8215dd
Showing
21 changed files
with
318 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 }, | ||
}); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.