fix: Show sender names in comments, fix pagination

Wandering-Cursor · Jun 4, 2024 · 24487ce · 24487ce
1 parent c80ab47
commit 24487ce
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 35 deletions.
diff --git a/src/app/pages/tickets/list/list.component.html b/src/app/pages/tickets/list/list.component.html
@@ -94,13 +94,14 @@ <h5 class="mt-2">Sorry! No Result Found</h5>
             <div class="row align-items-center mt-4 pt-3" id="pagination-element">
                 <div class="col-sm">
                     <div class="text-muted text-center text-sm-start">
-                        Showing <span class="fw-semibold">{{tickets?.length}}</span> of <span
-                            class="fw-semibold">{{alltickets?.length}}</span> Results
+                        Showing <span class="fw-semibold">{{tasks.length}}</span> of <span
+                            class="fw-semibold">{{tasksMeta.total}}</span> Results
                     </div>
                 </div><!--end col-->
                 <div class="col-sm-auto mt-3 mt-sm-0">
                     <pagination class="pagination-wrap hstack justify-content-center gap-2"
-                        [totalItems]="alltickets?.legnth" [itemsPerPage]="10" (pageChanged)="pageChanged($event)">
+                        [totalItems]="tasksMeta.total" [itemsPerPage]="itemsPerPage"
+                        (pageChanged)="pageChanged($event)">
                     </pagination>
                 </div>
             </div>

diff --git a/src/app/pages/tickets/list/list.component.ts b/src/app/pages/tickets/list/list.component.ts
@@ -79,8 +79,6 @@ export class ListComponent {
   myGroup!: FormGroup;
   itemsPerPage = 10;
 
-
-
   constructor(private formBuilder: FormBuilder, public store: Store, public datepipe: DatePipe, public apiService: restApiService, private router: Router) {
   }
 
@@ -144,6 +142,17 @@ export class ListComponent {
       this.updateSupportTickets(response.tasks_count_by_status);
       this.fetchTickets(1, this.itemsPerPage);
     });
+
+  }
+
+  fetchTickets(page: number, page_size: number) {
+    this.apiService.getProjectTasks(this.project.project_id, { page: page, page_size: page_size }).subscribe(
+      (response: any) => {
+        this.originalTasks = response.content;
+        this.tasks = response.content;
+        this.tasksMeta = response.meta;
+      }
+    );
   }
 
   updateSupportTickets(tasksCountByStatus: any): void {
@@ -169,16 +178,6 @@ export class ListComponent {
     });
   }
 
-  fetchTickets(page: number, page_size: number) {
-    this.apiService.getProjectTasks(this.project.project_id, { page: page, page_size: page_size }).subscribe(
-      (response: any) => {
-        this.originalTasks = response.content;
-        this.tasks = response.content;
-        this.tasksMeta = response.meta;
-      }
-    );
-  }
-
   viewTaskDetails(taskId: string) {
     this.router.navigate(['/overview', taskId]);
   }

diff --git a/src/app/pages/tickets/overview/overview.component.html b/src/app/pages/tickets/overview/overview.component.html
@@ -46,30 +46,33 @@ <h6 class="fw-semibold text-uppercase mb-2">Опис задачі</h6>
                 <quill-editor [readOnly]="true" [modules]="{toolbar: false}" [(ngModel)]="task.description"
                     style="border: none;"></quill-editor>
 
-                    <h6 class="fw-semibold text-uppercase mb-4">Коментарі</h6>
-                    <ngx-simplebar style="height: 300px;" class="px-3 mx-n3">
-                        <div *ngFor="let comment of comments" class="d-flex mb-4">
-                            <div class="flex-shrink-0">
-                                <!-- Avatar or other identifier -->
-                            </div>
-                            <div class="flex-grow-1 ms-3">
-                                <h6>{{ comment.sender_name }} <small class="text-muted">{{ comment.created_at | date:'short' }}</small></h6>
-                                <p class="text-muted">{{ comment.text }}</p>
-                                <div *ngIf="comment.fileInfo">
-                                    <div class="card">
-                                        <div class="card-body">
-                                            <h5 class="card-title">{{ comment.fileInfo.file_name }}</h5>
-                                            <p class="card-text">Розмір: {{ comment.fileInfo.file_size }} байтів</p>
-                                            <button class="btn btn-primary" (click)="downloadFile(comment.fileInfo.file_id)">Завантажити</button>
-                                        </div>
+                <h6 class="fw-semibold text-uppercase mb-4">Коментарі</h6>
+                <ngx-simplebar style="height: 300px;" class="px-3 mx-n3">
+                    <div *ngFor="let comment of comments" class="d-flex mb-4">
+                        <div class="flex-shrink-0">
+                            <!-- Avatar or other identifier -->
+                        </div>
+                        <div class="flex-grow-1 ms-3">
+                            <h6>{{ comment.account_details.first_name }} {{ comment.account_details.last_name }} <small
+                                    class="text-muted">{{ comment.created_at |
+                                    date:'short' }}</small></h6>
+                            <p class="text-muted">{{ comment.text }}</p>
+                            <div *ngIf="comment.fileInfo">
+                                <div class="card">
+                                    <div class="card-body">
+                                        <h5 class="card-title">{{ comment.fileInfo.file_name }}</h5>
+                                        <p class="card-text">Розмір: {{ comment.fileInfo.file_size }} байтів</p>
+                                        <button class="btn btn-primary"
+                                            (click)="downloadFile(comment.fileInfo.file_id)">Завантажити</button>
                                     </div>
                                 </div>
-                                <a href="javascript:void(0);" class="link-success fs-base" (click)="toggleEdit(comment)">
-                                    <i class="ri-edit-2-line" *ngIf="!comment.isEditing"></i>
-                                </a>
                             </div>
+                            <a href="javascript:void(0);" class="link-success fs-base" (click)="toggleEdit(comment)">
+                                <i class="ri-edit-2-line" *ngIf="!comment.isEditing"></i>
+                            </a>
                         </div>
-                    </ngx-simplebar>
+                    </div>
+                </ngx-simplebar>
 
                 <form (ngSubmit)="postComment(task.task_id, commentText)" #commentForm="ngForm" class="mt-3">
                     <div class="row g-3">