✔ Komentar

bifeldy · May 20, 2023 · 1b5ec08 · 1b5ec08
1 parent 98413e8
commit 1b5ec08
Show file tree

Hide file tree

Showing 18 changed files with 682 additions and 249 deletions.
diff --git a/src/api/controllers/comment.controller.ts b/src/api/controllers/comment.controller.ts
@@ -1,4 +1,4 @@
-import { Controller, Delete, Get, HttpCode, HttpException, HttpStatus, Post, Req, Res } from '@nestjs/common';
+import { Controller, Delete, Get, HttpCode, HttpException, HttpStatus, Patch, Post, Req, Res } from '@nestjs/common';
 import { ApiExcludeController } from '@nestjs/swagger';
 import { Request, Response } from 'express';
 import { Equal, ILike, IsNull } from 'typeorm';
@@ -95,7 +95,7 @@ export class CommentController {
       if ('path' in req.body && 'comment' in req.body) {
         const user: UserModel = res.locals['user'];
         const komen = this.komentarRepo.new();
-        komen.path = req.body.path;
+        komen.path = req.body.path.split('?')[0];
         komen.comment = req.body.comment;
         if ('parent' in req.body) {
           const comment =  await this.komentarRepo.findOneOrFail({
@@ -131,7 +131,7 @@ export class CommentController {
   @Get('/:id')
   @HttpCode(200)
   @FilterApiKeyAccess()
-  async getById(@Req() req: Request, @Res({ passthrough: true }) res: Response): Promise<any> {
+  async getReplyByParentId(@Req() req: Request, @Res({ passthrough: true }) res: Response): Promise<any> {
     try {
       const queryPage = parseInt(req.query['page'] as string);
       const queryRow = parseInt(req.query['row'] as string);
@@ -150,7 +150,7 @@ export class CommentController {
             id: 'DESC'
           })
         },
-        relations: ['parent_komentar_', 'user_'],
+        relations: ['user_'],
         skip: queryPage > 0 ? (queryPage * queryRow - queryRow) : 0,
         take: (queryRow > 0 && queryRow <= 500) ? queryRow : 10
       });
@@ -187,6 +187,51 @@ export class CommentController {
     }
   }
 
+  @Patch('/')
+  @HttpCode(202)
+  @FilterApiKeyAccess()
+  async getHighlight(@Req() req: Request, @Res({ passthrough: true }) res: Response): Promise<any> {
+    try {
+      if ('id' in req.body && 'path' in req.body) {
+        const komen = await this.komentarRepo.findOneOrFail({
+          where: [
+            {
+              id: Equal(req.body.id),
+              path: ILike(req.body.path.split('?')[0])
+            }
+          ],
+          relations: ['parent_komentar_', 'user_']
+        });
+        if ('user_' in komen && komen.user_) {
+          delete komen.user_.created_at;
+          delete komen.user_.updated_at;
+        }
+        (komen as any).reply_count = await this.komentarRepo.count({
+          where: [
+            {
+              parent_komentar_: {
+                id: Equal(komen.id)
+              }
+            }
+          ],
+          relations: ['parent_komentar_']
+        });
+        return {
+          info: `😅 200 - Komentar API :: Detail ${req.body.id} 🤣`,
+          result: komen
+        };
+      }
+    } catch (error) {
+      if (error instanceof HttpException) throw error;
+      throw new HttpException({
+        info: `🙄 400 - Komentar API :: Gagal Mendapatkan Komentar ${req.body.id} 😪`,
+        result: {
+          message: 'Data Tidak Lengkap!'
+        }
+      }, HttpStatus.BAD_REQUEST);
+    }
+  }
+
   @Delete('/:id')
   @HttpCode(202)
   @Roles(RoleModel.ADMIN, RoleModel.MODERATOR)

diff --git a/src/app/_pages/berkas/berkas-detail/berkas-detail.component.html b/src/app/_pages/berkas/berkas-detail/berkas-detail.component.html
@@ -198,7 +198,7 @@ <h2 class="pt-3 border-bottom-dotted">
               </div>
               <div class="col-12">
                 <div class="p-3">
-                  <app-discussion [rootCommentBox]="true"></app-discussion>
+                  <app-discussion></app-discussion>
                 </div>
               </div>
             </div>

diff --git a/src/app/_pages/home/home.component.html b/src/app/_pages/home/home.component.html
@@ -96,7 +96,7 @@ <h2 class="pt-3 border-bottom-dotted">
           <mat-selection-list [multiple]="false">
             <mat-list-option *ngFor="let k of komentarData | slice:0:5" class="h-100">
               <mat-icon mat-list-icon class="ps-3">add_comment</mat-icon>
-              <a class="text-truncate text-decoration-none" routerLink="{{ k.path }}">
+              <a class="text-truncate text-decoration-none" (click)="openComment(k)">
                 <span class="bg-bifeldy px-2 me-1 text-danger" style="position: absolute; right: 0;" matTooltip="{{ k.created_at | date:'d MMMM y, hh:mm:ss a z' }}">
                   {{ k.created_at | dateAgo }}
                 </span>

diff --git a/src/app/_pages/home/home.component.ts b/src/app/_pages/home/home.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { GlobalService } from '../../_shared/services/global.service';
 import { NewsService } from '../../_shared/services/news.service';
@@ -23,6 +24,7 @@ export class HomeComponent implements OnInit, OnDestroy {
   subsRssFeed = null;
 
   constructor(
+    private router: Router,
     private gs: GlobalService,
     private news: NewsService,
     private komen: KomentarService,
@@ -102,4 +104,12 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.wb.winboxOpenUri(this.gs.rssLink(link));
   }
 
+  openComment(k): void {
+    this.router.navigate([k.path], {
+      queryParams: {
+        comment: k.id
+      }
+    });
+  }
+
 }
diff --git a/src/app/_pages/news/news-detail/news-detail.component.html b/src/app/_pages/news/news-detail/news-detail.component.html
@@ -55,7 +55,7 @@ <h2 class="pt-3 border-bottom-dotted">
     </div>
     <div class="col-12">
       <div class="p-3">
-        <app-discussion [rootCommentBox]="true"></app-discussion>
+        <app-discussion></app-discussion>
       </div>
     </div>
   </div>

diff --git a/src/app/_pages/user/user-list/user-list.component.html b/src/app/_pages/user/user-list/user-list.component.html
@@ -20,7 +20,7 @@ <h2 class="pt-3 border-bottom-dotted">
           <mat-selection-list [multiple]="false">
             <mat-list-option *ngFor="let fk of feedKomentarData | slice:0:5" class="h-100">
               <mat-icon mat-list-icon class="ps-3">add_comment</mat-icon>
-              <a class="text-truncate text-decoration-none" routerLink="{{ fk.path }}">
+              <a class="text-truncate text-decoration-none" (click)="openComment(fk)">
                 <span class="bg-bifeldy px-2 me-1 text-danger" style="position: absolute; right: 0;">{{ fk.created_at | dateAgo }}</span>
                 <span class="text-warning">{{ fk.comment }}</span>
               </a>

diff --git a/src/app/_pages/user/user-list/user-list.component.ts b/src/app/_pages/user/user-list/user-list.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { Clipboard } from '@angular/cdk/clipboard';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { environment } from '../../../../environments/app/environment';
@@ -40,6 +41,7 @@ export class UserListComponent implements OnInit, OnDestroy {
   groupFansub = [];
 
   constructor(
+    private clipboard: Clipboard,
     private router: Router,
     private snackBar: MatSnackBar,
     private as: AuthService,
@@ -156,9 +158,9 @@ export class UserListComponent implements OnInit, OnDestroy {
   }
 
   copyApiKey(ak: any): void {
-    navigator?.clipboard?.writeText(ak.api_key).then(() => {
-      this.snackBar.open(`API Key :: ${ak.api_key} :: Telah Di Salin Pada Clipboard`, 'Ok');
-    });
+    if (this.clipboard.copy(ak.api_key)) {
+      this.snackBar.open(`API Key :: Telah Di Salin Pada Clipboard`, 'Ok');
+    }
   }
 
   generateNewApiKey(): void {
@@ -374,4 +376,12 @@ export class UserListComponent implements OnInit, OnDestroy {
     });
   }
 
+  openComment(k): void {
+    this.router.navigate([k.path], {
+      queryParams: {
+        comment: k.id
+      }
+    });
+  }
+
 }
diff --git a/src/app/_shared/components/discussion/comment/comment.component.css b/src/app/_shared/components/discussion/comment/comment.component.css
diff --git a/src/app/_shared/components/discussion/comment/comment.component.html b/src/app/_shared/components/discussion/comment/comment.component.html
@@ -0,0 +1,70 @@
+<div class="row" *ngIf="rootCommentBox && AS.currentUserSubject?.value">
+  <mat-form-field appearance="outline" class="col-12" [color]="'accent'">
+    <mat-label>Buat Komentar Baru</mat-label>
+    <input matInput placeholder="Buat Baru ..." [(ngModel)]="commentToSend" />
+    <mat-icon matSuffix>quickreply</mat-icon>
+  </mat-form-field>
+  <div class="col-12 text-end pe-0 mb-3">
+    <button mat-button color="accent" (click)="sendComment(null)">
+      Kirim
+      <mat-icon class="ms-1">send</mat-icon>
+    </button>
+  </div>
+</div>
+<div class="row" appDomChange>
+  <div class="d-flex my-1" *ngFor="let k of komentar">
+    <div class="flex-shrink-0">
+      <img width="40" height="40" src="{{ k.user_.image_url }}" style="object-fit: contain; object-position: center;" />
+    </div>
+    <div class="flex-grow-1 ms-3 row {{ recursionCount === 0 ? 'me-2' : ''}}">
+      <div class="col-8 p-0" (click)="showHideCommentBox(k)">
+        <p class="m-0">
+          <b class="text-warning" style="cursor: pointer;" (click)="openUserProfile(k); $event.stopPropagation()">
+            {{ k.user_.username }}
+          </b>
+          <small class="ms-3 text-bifeldy" matTooltip="{{ k.created_at | date:'d MMMM y, hh:mm:ss a z' }}">
+            {{ k.created_at | dateAgo }}
+          </small>
+        </p>
+        <p class="mb-1" style="line-height: normal;">{{ k.comment }}</p>
+      </div>
+      <div class="col p-0 text-end">
+        <button mat-icon-button color="accent" (click)="copyCommentLink(k)" matTooltip="Salin Tautan">
+          <mat-icon>link</mat-icon>
+        </button>
+      </div>
+      <mat-form-field appearance="outline" class="mt-2 col-12" [color]="'accent'" *ngIf="k.reply_mode && AS.currentUserSubject?.value && recursionCount === 0">
+        <mat-label>Balas / Tanggapi</mat-label>
+        <input matInput placeholder="Balas ..." [(ngModel)]="k.reply_to_send" />
+        <mat-icon matSuffix>quickreply</mat-icon>
+      </mat-form-field>
+      <div class="col-12 p-0">
+        <div class="row">
+          <div class="col-6">
+            <button mat-button class="ps-1 pe-2" color="accent" *ngIf="k.reply_count > 0" (click)="showHideComment(k)">
+              <mat-icon class="me-1" *ngIf="!k.show_reply">expand_more</mat-icon>
+              <mat-icon class="me-1" *ngIf="k.show_reply">expand_less</mat-icon>
+              {{ k.show_reply ? 'Sembunyikan' : 'Tampilkan' }} {{ k.reply_count }} balasan
+            </button>
+          </div>
+          <div class="col-6 text-end">
+            <button mat-button color="accent" *ngIf="k.reply_mode && AS.currentUserSubject?.value && recursionCount === 0" (click)="sendComment(k)">
+              Kirim
+              <mat-icon class="ms-1">send</mat-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+      <app-comment [parent]="k" [komentar]="k.reply" *ngIf="k.show_reply" [recursionCount]="recursionCount + 1"></app-comment>
+    </div>
+  </div>
+  <div class="col-12"*ngIf="(count >= 10 && !pageFinished) || (parent?.reply_count >= 10 && !parent?.reply_page_finised)">
+    <button mat-button color="accent" (click)="loadNextPage()">
+      <mat-icon class="me-1">subdirectory_arrow_right</mat-icon>
+      Load More ...
+    </button>
+  </div>
+</div>
+<div class="row" *ngIf="komentar && komentar.length <= 0">
+  <app-no-data class="col-12 p-3"></app-no-data>
+</div>