sanchezvem/BeReadyFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added segments to separe friends and global

Browse Source
This commit is contained in:
sanchezvem
2026-05-14 14:07:37 +01:00
parent eee7958bce
commit 42116be9a6
2 changed files with 83 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/post/post.component.html
+75 -29
View File
@@ -1,32 +1,78 @@
@for (post of localPosts(); track post.id) {
<ion-item lines="full">
<div class="mt-2">
<div class="flex items-center gap-2 p-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs bg-teal-100 text-teal-700 max-w-xs">
{{ post.username.substring(0, 2) }}
</div>
<span class="text-lg font-mono ml-2">{{ post.username }}</span>
</div>
<ion-segment>
<ion-segment-button value="first" content-id="global">
<ion-label>Général</ion-label>
</ion-segment-button>
<ion-segment-button value="second" content-id="friends">
<ion-label>Amis</ion-label>
</ion-segment-button>
</ion-segment>
<ion-segment-view>
<ion-segment-content id="global">
@for (post of localPosts(); track post.id) {
<ion-item lines="full">
<div class="mt-2">
<div class="flex items-center gap-2 p-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs bg-teal-100 text-teal-700 max-w-xs">
{{ post.username.substring(0, 2) }}
</div>
<span class="text-lg font-mono ml-2">{{ post.username }}</span>
</div>
<div class="aspect-square overflow-hidden p-1">
<img [src]="'data:image/jpeg;base64,' + post.proof"
alt=""
class="w-full h-full object-cover"/>
</div>
<div class="aspect-square overflow-hidden p-1">
<img [src]="'data:image/jpeg;base64,' + post.proof"
alt=""
class="w-full h-full object-cover"/>
</div>
<div class="px-3 py-3">
<div class="flex items-center gap-2 mb-1">
<button class="flex items-center p-0 bg-transparent border-none cursor-pointer" (click)="likePost(post.id)">
@if (post.isLiked) {
<ion-icon name="heart" class="text-red-700 text-2xl"></ion-icon>
} @else {
<ion-icon name="heart-outline" class="text-gray-500 text-2xl"></ion-icon>
}
</button>
<span class="text-xs text-gray-400">{{ post.likes }} Likes</span>
<div class="px-3 py-3">
<div class="flex items-center gap-2 mb-1">
<button class="flex items-center p-0 bg-transparent border-none cursor-pointer" (click)="likePost(post.id)">
@if (post.isLiked) {
<ion-icon name="heart" class="text-red-700 text-2xl"></ion-icon>
} @else {
<ion-icon name="heart-outline" class="text-gray-500 text-2xl"></ion-icon>
}
</button>
<span class="text-xs text-gray-400">{{ post.likes }} Likes</span>
</div>
<p class="text-sm text-gray-500 leading-snug italic">{{ post.libelle }}</p>
</div>
</div>
<p class="text-sm text-gray-500 leading-snug italic">{{ post.libelle }}</p>
</div>
</div>
</ion-item>
}
</ion-item>
}
</ion-segment-content>
<ion-segment-content id="friends">
@for (post of postsFriends(); track post.id) {
<ion-item lines="full">
<div class="mt-2">
<div class="flex items-center gap-2 p-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs bg-teal-100 text-teal-700 max-w-xs">
{{ post.username.substring(0, 2) }}
</div>
<span class="text-lg font-mono ml-2">{{ post.username }}</span>
</div>
<div class="aspect-square overflow-hidden p-1">
<img [src]="'data:image/jpeg;base64,' + post.proof"
alt=""
class="w-full h-full object-cover"/>
</div>
<div class="px-3 py-3">
<div class="flex items-center gap-2 mb-1">
<button class="flex items-center p-0 bg-transparent border-none cursor-pointer" (click)="likePost(post.id)">
@if (post.isLiked) {
<ion-icon name="heart" class="text-red-700 text-2xl"></ion-icon>
} @else {
<ion-icon name="heart-outline" class="text-gray-500 text-2xl"></ion-icon>
}
</button>
<span class="text-xs text-gray-400">{{ post.likes }} Likes</span>
</div>
<p class="text-sm text-gray-500 leading-snug italic">{{ post.libelle }}</p>
</div>
</div>
</ion-item>
}
</ion-segment-content>
</ion-segment-view>
src/app/components/post/post.component.ts
+8 -8
View File
@@ -55,21 +55,22 @@ export class PostComponent implements OnInit {
}
async likePost(postId: number) {
this.localPosts.update(x => x.map(x => x.id != postId ? x :{
this.localPosts.update(x => x.map(x => x.id != postId ? x : {
...x,
likes: x.isLiked ? x.likes - 1 : x.likes + 1,
isLiked: !x.isLiked
}));
const loading = await this.loadCtrl.create({
message: 'Chargement...',
spinner: 'lines-sharp-small'
});
await loading.present();
try {
await firstValueFrom(this.postsService.patchLikeEndpoint(postId));
this.postsFriends.set(this.localPosts());
} catch {
this.localPosts.update(x => x.map(x => x.id != postId ? x : {
...x,
likes: x.isLiked ? x.likes + 1 : x.likes - 1,
isLiked: !x.isLiked
}));
const toast = await this.toastCtrl.create({
message: 'Impossible d\'aimer ce contenu',
duration: 2000,
@@ -77,6 +78,5 @@ export class PostComponent implements OnInit {
});
await toast.present();
}
await loading.dismiss();
}
}