feat: mvp

yuforium · Jun 26, 2024 · 1dff125 · 1dff125
1 parent dbca41c
commit 1dff125
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 5 deletions.
diff --git a/projects/test-app/src/app/components/content/note/note.component.html b/projects/test-app/src/app/components/content/note/note.component.html
@@ -44,9 +44,9 @@ <h4 class="text-sm grow md:grow-0 flex items-center">
   <div>
     <div class="mt-2">
       <h3 class="text-lg" *ngIf="post.name">{{ post.name }}</h3>
-      <div [innerHTML]="post.content"></div>
+      <div class="cursor-pointer" (click)="this.handleContentClick($event, 'content')" [innerHTML]="post.content"></div>
       <div class="mt-4 text-md">
-        <span class="mr-4">0 Replies</span >
+        <span class="mr-4">{{ post.replies.totalItems | i18nPlural : totalRepliesMap }}</span >
         <button class="btn btn-sm mr-4" (click)="isPosting = true">Reply</button>
         <a class="btn btn-sm mr-4">Edit</a>
         <a class="btn btn-sm mr-4">Delete</a>

diff --git a/projects/test-app/src/app/components/content/note/note.component.ts b/projects/test-app/src/app/components/content/note/note.component.ts
@@ -19,8 +19,14 @@ export class NoteComponent {
   @Input() public displayAuthor: boolean = true;
   @Input() public excludeAuthors?: string | string[];
   @Output() public onReply = new EventEmitter<{reply: NoteCreateDto, result$: Subject<boolean>}>();
+  @Output() public onContentClick = new EventEmitter<{event: MouseEvent, content: string, post: ObjectDto}>();
 
   public isPosting = false;
+  public readonly totalRepliesMap = {
+    '=0': "No replies",
+    '=1': "1 reply",
+    other: "# replies"
+  }
 
   constructor(
     protected appService: AppService,
@@ -104,4 +110,8 @@ export class NoteComponent {
       }
     });
   }
+
+  public handleContentClick(event: MouseEvent, content: string) {
+    this.onContentClick.emit({event, content, post: this.post});
+  }
 }
diff --git a/projects/test-app/src/app/forum/forum-index/forum-index.component.html b/projects/test-app/src/app/forum/forum-index/forum-index.component.html
@@ -36,6 +36,6 @@
 
 <div>
   <div *ngFor="let post of posts$ | async" class="mb-3">
-    <app-note [post]="post" [excludeAuthors]="(forum$ | async)?.id" (onReply)="this.onReply($event)"></app-note>
+    <app-note [post]="post" [excludeAuthors]="(forum$ | async)?.id" (onReply)="this.onReply($event)" (onContentClick)="onContentClick($event)"></app-note>
   </div>
 </div>
diff --git a/projects/test-app/src/app/forum/forum-index/forum-index.component.ts b/projects/test-app/src/app/forum/forum-index/forum-index.component.ts
@@ -107,4 +107,7 @@ export class ForumIndexComponent {
         }
       });
   }
+
+  onContentClick(event: any) {
+  }
 }
diff --git a/projects/test-app/src/app/modules/user/user.component.html b/projects/test-app/src/app/modules/user/user.component.html
@@ -2,7 +2,7 @@
   <main role="main">
     <app-actor-header [actor]="user$"></app-actor-header>
 
-    <div class="sticky top-20 bg-base-100 bg-opacity-70 mb-2 p-2 rounded">
+    <div class="sticky top-20 bg-base-100 bg-opacity-95 mb-2 p-2 rounded-lg">
       <div class="flex">
         <div class="flex flex-grow items-center">
           @if (isLoadingError) {
@@ -64,7 +64,7 @@
       </div>
     }
     @else {
-      @for (post of posts$ | async; track $index) {
+      @for (post of posts$ | async; track post.id) {
         <app-note [post]="post" [displayAuthor]="false" [excludeAuthors]="(user$ | async)?.id" (onReply)="this.onReply($event)"></app-note>
       }
     }

diff --git a/projects/test-app/src/app/modules/user/user.component.ts b/projects/test-app/src/app/modules/user/user.component.ts
@@ -87,6 +87,7 @@ export class UserComponent implements OnInit, OnDestroy {
         const totalPages = this.totalItems % this.limit === 0 ? this.totalItems / this.limit : Math.floor(this.totalItems / this.limit) + 1;
         this.pagination = this.appService.generatePagination(totalPages || 1, this.currentPage + 1);
         this.isLoadingError = false;
+
         return response.items;
       }),
       shareReplay(),