Skip to content

Commit bfdc765

Browse files
4drianMatei4drianMatei
committed
initial commit of pagination bar
1 parent 18e420c commit bfdc765

10 files changed

+185
-169
lines changed

‎frontend/src/app/shared/async-bookmark-list/async-bookmark-list.component.html

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,31 +15,12 @@
1515
</app-bookmark-list-element>
1616
</div>
1717

18-
<nav *ngIf="showPagination && bookmarks" aria-label="Pagination navigation bar">
19-
<div *ngIf="currentPage !== 1 && bookmarks.length === 0; else showPaginationBar"
20-
class="tabs-headline-message alert alert-info"
21-
style="margin-top: 2rem; font-size: 1.2rem">
22-
No bookmarks left for the selected criteria - go back to
23-
<button type="button" class="btn btn-primary btn-sm" (click)="navigate(currentPage-1)">Previous</button>
24-
pages.
25-
</div>
26-
<ng-template #showPaginationBar>
27-
<ul class="pagination justify-content-center" style="cursor: pointer;">
28-
<li class="page-item">
29-
<span class="page-link shadow-sm" (click)="navigate(currentPage - 1)"
30-
[ngClass]="{'isDisabled': currentPage === 1}">Previous</span>
31-
</li>
32-
<li *ngFor="let page of Arr.from(Arr(currentPage).keys()); let i = index;" class="page-item"
33-
[ngClass]="{'active': currentPage === page + 1}">
34-
<span class="page-link shadow-sm" (click)="navigate(page + 1)">{{page + 1}}</span>
35-
</li>
36-
<li class="page-item">
37-
<span class="page-link shadow-sm" (click)="navigate(currentPage + 1)"
38-
[ngClass]="{'isDisabled': bookmarks.length < paginationSize}">Next</span>
39-
</li>
40-
</ul>
41-
</ng-template>
42-
</nav>
18+
<app-page-navigation-bar
19+
[showPagination]="showPagination"
20+
[results]="bookmarks"
21+
[currentPage]="currentPage"
22+
[callerPagination]="callerPagination"
23+
></app-page-navigation-bar>
4324
</div>
4425

4526

‎frontend/src/app/shared/async-bookmark-list/async-bookmark-list.component.ts

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1-
import { Component, EventEmitter, Injector, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
1+
import {
2+
AfterViewInit,
3+
Component,
4+
EventEmitter,
5+
Injector,
6+
Input,
7+
OnChanges,
8+
OnInit,
9+
Output,
10+
SimpleChanges
11+
} from '@angular/core';
212
import { Observable } from 'rxjs';
313
import { Bookmark } from '../../core/model/bookmark';
414
import { ActivatedRoute, Router } from '@angular/router';
@@ -40,14 +50,9 @@ export class AsyncBookmarkListComponent extends TagFollowingBaseComponent implem
4050
@Output()
4151
bookmarkDeleted = new EventEmitter<boolean>();
4252

43-
private router: Router;
4453
readonly route: ActivatedRoute;
45-
private paginationNotificationService: PaginationNotificationService;
46-
47-
environment = environment;
4854

4955
currentPage: number;
50-
paginationSize = environment.PAGINATION_PAGE_SIZE;
5156

5257
Arr = Array; // Array type captured in a variable
5358

@@ -61,9 +66,7 @@ export class AsyncBookmarkListComponent extends TagFollowingBaseComponent implem
6166
public loginDialog: MatDialog,
6267
) {
6368
super(loginDialog, userDataWatchedTagsStore);
64-
this.router = <Router>this.injector.get(Router);
6569
this.route = <ActivatedRoute>this.injector.get(ActivatedRoute);
66-
this.paginationNotificationService = <PaginationNotificationService>this.injector.get(PaginationNotificationService);
6770
}
6871

6972
ngOnInit(): void {
@@ -77,24 +80,4 @@ export class AsyncBookmarkListComponent extends TagFollowingBaseComponent implem
7780
this.currentPage = 1;
7881
}
7982
}
80-
81-
navigate(page: number) {
82-
const paginationAction: PaginationAction = {
83-
caller: this.callerPagination,
84-
page: page
85-
}
86-
this.currentPage = page;
87-
this.syncPageQueryParam();
88-
this.paginationNotificationService.clickPageNavigation(paginationAction);
89-
}
90-
91-
syncPageQueryParam() {
92-
this.router.navigate(['.'],
93-
{
94-
relativeTo: this.route,
95-
queryParams: {page: this.currentPage},
96-
queryParamsHandling: 'merge'
97-
}
98-
);
99-
}
10083
}

‎frontend/src/app/shared/async-search-result-list/async-search-result-list.component.html

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
<div class="mt-3" *ngFor="let searchResult of searchResults | bookmarkFilter: filterText">
88

99
<app-bookmark-list-element *ngIf="isBookmark(searchResult) else showSnippet"
10-
[bookmark]="searchResult"
11-
[userData$]="userData$"
12-
[queryText]="queryText"
13-
[filterText]="filterText"
14-
[isSearchResultsPage]="isSearchResultsPage"
10+
[bookmark]="searchResult"
11+
[userData$]="userData$"
12+
[queryText]="queryText"
13+
[filterText]="filterText"
14+
[isSearchResultsPage]="isSearchResultsPage"
1515
>
1616
</app-bookmark-list-element>
17-
<ng-template #showSnippet>
17+
<ng-template #showSnippet>
1818
<app-snippet-details
1919
[snippet$]="of(searchResult)"
2020
[queryText]="queryText"
@@ -24,31 +24,13 @@
2424

2525
</div>
2626

27-
<nav *ngIf="showPagination && searchResults" aria-label="Pagination navigation bar">
28-
<div *ngIf="currentPage !== 1 && searchResults.length === 0; else showPaginationBar"
29-
class="tabs-headline-message alert alert-info"
30-
style="margin-top: 2rem; font-size: 1.2rem">
31-
No results left for the selected criteria - go back to
32-
<button type="button" class="btn btn-primary btn-sm" (click)="navigate(currentPage-1)">Previous</button>
33-
pages.
34-
</div>
35-
<ng-template #showPaginationBar>
36-
<ul class="pagination justify-content-center" style="cursor: pointer;">
37-
<li class="page-item">
38-
<span class="page-link shadow-sm" (click)="navigate(currentPage - 1)"
39-
[ngClass]="{'isDisabled': currentPage === 1}">Previous</span>
40-
</li>
41-
<li *ngFor="let page of Arr.from(Arr(currentPage).keys()); let i = index;" class="page-item"
42-
[ngClass]="{'active': currentPage === page + 1}">
43-
<span class="page-link shadow-sm" (click)="navigate(page + 1)">{{page + 1}}</span>
44-
</li>
45-
<li class="page-item">
46-
<span class="page-link shadow-sm" (click)="navigate(currentPage + 1)"
47-
[ngClass]="{'isDisabled': searchResults.length < paginationSize}">Next</span>
48-
</li>
49-
</ul>
50-
</ng-template>
51-
</nav>
27+
<app-page-navigation-bar
28+
[showPagination]="showPagination"
29+
[results]="searchResults"
30+
[currentPage]="currentPage"
31+
[callerPagination]="callerPagination"
32+
></app-page-navigation-bar>
33+
5234
</div>
5335

5436

‎frontend/src/app/shared/async-search-result-list/async-search-result-list.component.ts

Lines changed: 2 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import { Component, EventEmitter, Injector, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
22
import { Observable, of } from 'rxjs';
33
import { Bookmark } from '../../core/model/bookmark';
4-
import { ActivatedRoute, Router } from '@angular/router';
4+
import { ActivatedRoute } from '@angular/router';
55
import { UserData } from '../../core/model/user-data';
66
import { MatDialog } from '@angular/material/dialog';
7-
import { PaginationNotificationService } from '../../core/pagination-notification.service';
8-
import { environment } from '../../../environments/environment';
9-
import { PaginationAction } from '../../core/model/pagination-action';
107
import { UserDataWatchedTagsStore } from '../../core/user/userdata.watched-tags.store';
118
import { TagFollowingBaseComponent } from '../tag-following-base-component/tag-following-base.component';
129
import { Snippet } from '../../core/model/snippet';
@@ -41,16 +38,9 @@ export class AsyncSearchResultListComponent extends TagFollowingBaseComponent im
4138
@Output()
4239
bookmarkDeleted = new EventEmitter<boolean>();
4340

44-
private router: Router;
4541
readonly route: ActivatedRoute;
46-
private paginationNotificationService: PaginationNotificationService;
47-
48-
environment = environment;
4942

5043
currentPage: number;
51-
paginationSize = environment.PAGINATION_PAGE_SIZE;
52-
53-
Arr = Array; // Array type captured in a variable
5444

5545
@Input()
5646
showFilterBox = true;
@@ -62,9 +52,7 @@ export class AsyncSearchResultListComponent extends TagFollowingBaseComponent im
6252
public loginDialog: MatDialog,
6353
) {
6454
super(loginDialog, userDataWatchedTagsStore);
65-
this.router = <Router>this.injector.get(Router);
6655
this.route = <ActivatedRoute>this.injector.get(ActivatedRoute);
67-
this.paginationNotificationService = <PaginationNotificationService>this.injector.get(PaginationNotificationService);
6856
}
6957

7058
ngOnInit(): void {
@@ -79,25 +67,6 @@ export class AsyncSearchResultListComponent extends TagFollowingBaseComponent im
7967
}
8068
}
8169

82-
navigate(page: number) {
83-
const paginationAction: PaginationAction = {
84-
caller: this.callerPagination,
85-
page: page
86-
}
87-
this.currentPage = page;
88-
this.syncPageQueryParam();
89-
this.paginationNotificationService.clickPageNavigation(paginationAction);
90-
}
91-
92-
syncPageQueryParam() {
93-
this.router.navigate(['.'],
94-
{
95-
relativeTo: this.route,
96-
queryParams: {page: this.currentPage},
97-
queryParamsHandling: 'merge'
98-
}
99-
);
100-
}
10170

10271
isBookmark(searchResult: Bookmark | Snippet) {
10372
return 'location' in searchResult;
@@ -108,6 +77,6 @@ export class AsyncSearchResultListComponent extends TagFollowingBaseComponent im
10877
}
10978

11079
of(searchResult: Snippet | Bookmark) {
111-
return of(searchResult);
80+
return of(searchResult);
11281
}
11382
}

‎frontend/src/app/shared/async-snippet-list/async-snippet-list.component.html

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,12 @@
77
></app-snippet-details>
88
</div>
99

10-
<nav *ngIf="showPagination && snippets" aria-label="Pagination navigation bar">
11-
<div *ngIf="currentPage !== 1 && snippets.length === 0; else showPaginationBar"
12-
class="tabs-headline-message alert alert-info"
13-
style="margin-top: 2rem; font-size: 1.2rem">
14-
No snippets left for the selected criteria - go back to
15-
<button type="button" class="btn btn-primary btn-sm" (click)="navigate(currentPage-1)">Previous</button>
16-
pages.
17-
</div>
18-
<ng-template #showPaginationBar>
19-
<ul class="pagination justify-content-center" style="cursor: pointer;">
20-
<li class="page-item">
21-
<span class="page-link shadow-sm" (click)="navigate(currentPage - 1)"
22-
[ngClass]="{'isDisabled': currentPage === 1}">Previous</span>
23-
</li>
24-
<li *ngFor="let page of Arr.from(Arr(currentPage).keys()); let i = index;" class="page-item"
25-
[ngClass]="{'active': currentPage === page + 1}">
26-
<span class="page-link shadow-sm" (click)="navigate(page + 1)">{{page + 1}}</span>
27-
</li>
28-
<li class="page-item">
29-
<span class="page-link shadow-sm" (click)="navigate(currentPage + 1)"
30-
[ngClass]="{'isDisabled': snippets.length < paginationSize}">Next</span>
31-
</li>
32-
</ul>
33-
</ng-template>
34-
</nav>
10+
<app-page-navigation-bar
11+
[showPagination]="showPagination"
12+
[results]="snippets"
13+
[currentPage]="currentPage"
14+
[callerPagination]="callerPagination"
15+
></app-page-navigation-bar>
3516

3617
</div>
3718

‎frontend/src/app/shared/async-snippet-list/async-snippet-list.component.ts

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
22
import { Snippet } from '../../core/model/snippet';
3-
import { ActivatedRoute, Router } from '@angular/router';
3+
import { ActivatedRoute } from '@angular/router';
44
import { Observable, of } from 'rxjs';
5-
import { PaginationAction } from '../../core/model/pagination-action';
6-
import { PaginationNotificationService } from '../../core/pagination-notification.service';
7-
import { environment } from '../../../environments/environment';
85
import { Bookmark } from '../../core/model/bookmark';
96

107
@Component({
@@ -27,11 +24,8 @@ export class AsyncSnippetListComponent implements OnInit, OnChanges {
2724
showPagination = true;
2825

2926
currentPage = 1;
30-
paginationSize = environment.PAGINATION_PAGE_SIZE;
3127

32-
Arr = Array; // Array type captured in a variable
33-
34-
constructor(private router: Router, private paginationNotificationService: PaginationNotificationService, private route: ActivatedRoute) {
28+
constructor(private route: ActivatedRoute) {
3529
}
3630

3731
ngOnInit() {
@@ -51,23 +45,4 @@ export class AsyncSnippetListComponent implements OnInit, OnChanges {
5145
return of(searchResult);
5246
}
5347

54-
navigate(page: number) {
55-
const paginationAction: PaginationAction = {
56-
caller: this.callerPagination,
57-
page: page
58-
}
59-
this.currentPage = page;
60-
this.syncPageQueryParam();
61-
this.paginationNotificationService.clickPageNavigation(paginationAction);
62-
}
63-
64-
syncPageQueryParam() {
65-
this.router.navigate(['.'],
66-
{
67-
relativeTo: this.route,
68-
queryParams: {page: this.currentPage},
69-
queryParamsHandling: 'merge'
70-
}
71-
);
72-
}
7348
}

‎frontend/src/app/shared/page-navigation-bar/page-navigation-bar.component.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<nav *ngIf="showPagination && showPaginationDelayExpired && results " aria-label="Pagination navigation bar">
2+
<div *ngIf="currentPage !== 1 && results.length === 0; else showPaginationBar"
3+
class="tabs-headline-message alert alert-info"
4+
style="margin-top: 2rem; font-size: 1.2rem">
5+
No entries left for the selected criteria - go back to
6+
<button type="button" class="btn btn-primary btn-sm" (click)="navigate(currentPage-1)">Previous</button>
7+
pages.
8+
</div>
9+
<ng-template #showPaginationBar>
10+
<!-- show pagination navigation if enough results -->
11+
<ul *ngIf="!(currentPage===1 && results.length < environment.PAGINATION_PAGE_SIZE )"
12+
class="pagination justify-content-center" style="cursor: pointer;">
13+
<li class="page-item">
14+
<span class="page-link shadow-sm" (click)="navigate(currentPage - 1)"
15+
[ngClass]="{'isDisabled': currentPage === 1}">Previous</span>
16+
</li>
17+
<li *ngFor="let page of Arr.from(Arr(currentPage).keys()); let i = index;" class="page-item"
18+
[ngClass]="{'active': currentPage === page + 1}">
19+
<span class="page-link shadow-sm" (click)="navigate(page + 1)">{{page + 1}}</span>
20+
</li>
21+
<li class="page-item">
22+
<span class="page-link shadow-sm" (click)="navigate(currentPage + 1)"
23+
[ngClass]="{'isDisabled': results.length < environment.PAGINATION_PAGE_SIZE}">Next</span>
24+
</li>
25+
</ul>
26+
</ng-template>
27+
</nav>

‎frontend/src/app/shared/page-navigation-bar/page-navigation-bar.component.scss

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.add-new-bookmark {
2+
margin-top: 0.3rem;
3+
}
4+
5+
.navbar-brand {
6+
line-height:12px;
7+
padding-top:10px;
8+
9+
font-size: 25px;
10+
}
11+
12+
.navbar-brand small {
13+
font-size:11px;
14+
}
15+
16+
.app-brand {
17+
display: flex;
18+
padding-right: 15px;
19+
align-items: center;
20+
21+
.app-brand-text {
22+
margin-left: 0.5rem;
23+
}
24+
}
25+
.logo-text {
26+
font-size: smaller;
27+
margin-bottom: 10px;
28+
}
29+
30+
.logo-image {
31+
margin-top: -10px;
32+
margin-bottom: -5px;
33+
}
34+
35+
.large-displays {
36+
display: none;
37+
}
38+
39+
@media (min-width: 1400px) {
40+
.large-displays {
41+
display: block ;
42+
}
43+
}
44+
45+

0 commit comments

Comments
 (0)