Skip to content
This repository was archived by the owner on Aug 29, 2022. It is now read-only.

Commit 8150682

Browse files
Nishant ShukeNishant Shuke
Nishant Shuke
authored and
Nishant Shuke
committed
Conversation Pagination Changes UI & API
1 parent 58eac7c commit 8150682

File tree

4 files changed

+83
-25
lines changed

4 files changed

+83
-25
lines changed

‎ui-trainer/src/app/common/services/apis.service.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,11 +143,16 @@ export class ApiService {
143143
);
144144
}
145145

146-
forceConversationsCacheReload() {
146+
forceConversationsCacheReload(type: string) {
147+
if (type === 'reset') {
147148
// Calling next will complete the current cache instance
148149
this.reloadConversations$.next();
149150
// Setting the cache to null will create a new cache the
150151
this.conversationsCache$ = null;
152+
} else if (type === 'finish') {
153+
// Calling next will complete the current cache instance
154+
this.reloadConversations$.next();
155+
}
151156
}
152157
// Conversations API End
153158

‎ui-trainer/src/app/conversations/conversations.component.html‎

Lines changed: 43 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22
<div class="row">
33
<div class="col-md-12">
44
<mat-form-field>
5-
<input
6-
matInput
7-
(keyup)="applyConversationsFilter($event.target.value)"
8-
[(ngModel)]="filterConversationText"
9-
placeholder="Filter Conversations"
10-
/>
5+
<input matInput (keyup)="applyConversationsFilter($event.target.value)" [(ngModel)]="filterConversationText"
6+
placeholder="Filter Conversations" />
117
</mat-form-field>
128
</div>
139
</div>
@@ -37,27 +33,57 @@
3733
</ng-container>
3834

3935
<ng-container matColumnDef="icon">
40-
<th mat-header-cell *matHeaderCellDef>Conversation Details</th>
36+
<th mat-header-cell *matHeaderCellDef>Details</th>
4137
<td mat-cell *matCellDef="let conversation">
42-
<button mat-icon-button class="text-center project-icons" (click)="openConversationChat(conversation.sender_id)">
43-
<mat-icon>details</mat-icon>
38+
<button mat-icon-button class="text-center project-icons"
39+
(click)="openConversationChat(conversation.sender_id)">
40+
<img src="../../assets/images/conversation.svg" />
4441
</button>
4542
</td>
4643
</ng-container>
4744

4845
<tr mat-header-row *matHeaderRowDef="conversationsDisplayedColumns"></tr>
49-
<tr
50-
mat-row
51-
*matRowDef="let row; columns: conversationsDisplayedColumns"
52-
></tr>
46+
<tr mat-row *matRowDef="let row; columns: conversationsDisplayedColumns"></tr>
5347
</table>
5448

55-
<mat-paginator
56-
[pageSizeOptions]="[10, 15, 20]"
49+
<!-- <mat-paginator
50+
[pageSizeOptions]="[5, 10, 15]"
5751
showFirstLastButtons
5852
(page)="getConversationsPaginatorData($event)"
59-
></mat-paginator>
53+
></mat-paginator> -->
6054
</div>
6155
</div>
6256
</div>
63-
</div>
57+
<div class="row">
58+
<div class="col-md-9"></div>
59+
<div class="col-md-1 text-right">
60+
<mat-form-field>
61+
<mat-label>Items Per Page</mat-label>
62+
<mat-select [value]="pageSize" (selectionChange)="updatePageSize($event)">
63+
<mat-option [value]="10">10</mat-option>
64+
<mat-option [value]="15">15</mat-option>
65+
<mat-option [value]="20">20</mat-option>
66+
</mat-select>
67+
</mat-form-field>
68+
</div>
69+
<div class="col-md-1 text-right">
70+
<nav aria-label="Page navigation example">
71+
<ul class="pagination">
72+
<li class="page-item">
73+
<a class="page-link" (click)="updatePageIndex('-')" aria-label="Previous">
74+
<span aria-hidden="true">&laquo;</span>
75+
<span class="sr-only">Previous</span>
76+
</a>
77+
</li>
78+
<li class="page-item"><a class="page-link">{{pageIndex}}</a></li>
79+
<li class="page-item">
80+
<a class="page-link" (click)="updatePageIndex('+')" aria-label="Next">
81+
<span aria-hidden="true">&raquo;</span>
82+
<span class="sr-only">Next</span>
83+
</a>
84+
</li>
85+
</ul>
86+
</nav>
87+
</div>
88+
</div>
89+
</div>

‎ui-trainer/src/app/conversations/conversations.component.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
height: auto;
77
}
88
.conversations-table-container {
9-
height: 80vh;
9+
height: 72vh;
1010
padding: 0.5%;
1111
overflow-y: auto;
1212
}
@@ -45,21 +45,24 @@ table {
4545
.project-icons {
4646
color: #1C90D1;
4747
}
48+
.page-item {
49+
cursor: pointer;
50+
}
4851
@media screen and (min-width: 1367px) and (max-width: 1620px) {
4952
.conversations-table-container {
50-
height: 82vh;
53+
height: 74vh;
5154
overflow-y: auto;
5255
}
5356
}
5457
@media screen and (min-width: 1621px) and (max-width: 1729px) {
5558
.conversations-table-container {
56-
height: 84vh;
59+
height: 76vh;
5760
overflow-y: auto;
5861
}
5962
}
6063
@media screen and (min-width: 1730px) {
6164
.conversations-table-container {
62-
height: 86vh;
65+
height: 78vh;
6366
overflow-y: auto;
6467
}
6568
}

‎ui-trainer/src/app/conversations/conversations.component.ts‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export class ConversationsComponent implements OnInit, OnDestroy {
2424
conversations_json: Array<object>;
2525
conversations_json_backup: Array<object>;
2626
filterConversationText = '';
27+
pageIndex = 0
28+
pageSize = 0;
2729

2830
@ViewChild(MatPaginator) paginator: MatPaginator;
2931

@@ -36,16 +38,20 @@ export class ConversationsComponent implements OnInit, OnDestroy {
3638
}
3739
getConvoPaginationData() {
3840
if (+localStorage.getItem('conversations_pageIndex') !== 0 && +localStorage.getItem('conversations_pageSize') !== 0) {
39-
this.paginator.pageIndex = +localStorage.getItem('conversations_pageIndex');
40-
this.paginator.pageSize = +localStorage.getItem('conversations_pageSize');
41+
this.pageIndex = +localStorage.getItem('conversations_pageIndex');
42+
this.pageSize = +localStorage.getItem('conversations_pageSize');
4143
} else {
44+
this.pageIndex = 1;
45+
this.pageSize = 10;
4246
localStorage.setItem('conversations_pageIndex', '1');
4347
localStorage.setItem('conversations_pageSize', '10');
4448
}
4549
}
4650
getConversations() {
51+
console.log(+localStorage.getItem('conversations_pageIndex'), +localStorage.getItem('conversations_pageSize'));
4752
this.apiService.requestConversations(+localStorage.getItem('conversations_pageIndex'), +localStorage.getItem('conversations_pageSize')).subscribe(conversations => {
4853
if (conversations) {
54+
console.log(conversations);
4955
this.conversations_json = conversations.sort(function (a, b) {
5056
var x = a['latest_event_time']; var y = b['latest_event_time'];
5157
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
@@ -93,9 +99,27 @@ export class ConversationsComponent implements OnInit, OnDestroy {
9399
return new Date(time_stamp * 1000).toLocaleString();
94100
}
95101

102+
updatePageSize(event: any) {
103+
localStorage.setItem('conversations_pageSize', event.value);
104+
this.apiService.forceConversationsCacheReload('reset');
105+
this.getConversations();
106+
}
107+
108+
updatePageIndex(type: string) {
109+
if (type === '+') {
110+
this.pageIndex += 1;
111+
localStorage.setItem('conversations_pageIndex', '' + this.pageIndex);
112+
} else if (type === '-' && this.pageIndex > 1) {
113+
this.pageIndex -= 1;
114+
localStorage.setItem('conversations_pageIndex', '' + this.pageIndex);
115+
}
116+
this.apiService.forceConversationsCacheReload('reset');
117+
this.getConversations();
118+
}
119+
96120
ngOnDestroy(): void {
97121
sessionStorage.removeItem('currentPage');
98-
this.apiService.forceConversationsCacheReload();
122+
this.apiService.forceConversationsCacheReload('finish');
99123
}
100124

101125
}

0 commit comments

Comments
 (0)