Skip to content

Commit a029e7c

Browse files
adirochsadirochs
committed
Merge branch 'feat/merge-pagination-bar'
2 parents 18e420c + 50200cd commit a029e7c

15 files changed

Lines changed: 170 additions & 362 deletions

‎frontend/src/app/app.component.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,14 @@
4545
>
4646
<i class="fas fa-cog mr-1"></i> Settings
4747
</a>
48-
<a
49-
class="list-group-item list-group-item-action bg-light"
50-
title="History"
51-
[routerLink]="['/history']"
52-
>
53-
<i class="fas fa-history mr-1"></i> History bookmarks:
54-
</a>
5548
<div *ngIf="(latestVisitedBookmarks$ | async) as latestVisitedBookmarks" class="mt-1" (mouseout)="resetHoveringLastVisited()">
49+
<a
50+
class="list-group-item list-group-item-action bg-light"
51+
title="Ctrl+H for quick access"
52+
[routerLink]="['/history']"
53+
>
54+
<i class="fas fa-history mr-1"></i> History bookmarks
55+
</a>
5656
<ng-container *ngFor="let bookmark of latestVisitedBookmarks; let i = index" class="mt-1">
5757
<span class="mt-1 mr-2 on-top">
5858
<a
@@ -76,7 +76,7 @@
7676
</div>
7777

7878
<ng-container *ngIf="(latestSearches$ | async) as latestSearches">
79-
<span class="list-group-item list-group-item-action bg-light"><i class="fa fa-search mr-1"></i> Latest searches:</span>
79+
<span class="list-group-item list-group-item-action bg-light"><i class="fa fa-search mr-1"></i> Latest searches</span>
8080
<div class="mt-1" (mouseout)="resetHoveringLastSearches()">
8181
<ng-container *ngFor="let mySearch of latestSearches; let i = index" class="mt-1">
8282
<span class="mt-1 mr-2 on-top">

‎frontend/src/app/public/bookmarks/homepage.component.html‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
<div class="alert alert-info mt-2">
1010
<button type="button" class="btn btn-primary btn-sm mr-2" (click)="login('feed')"><i
1111
class="fas fa-unlock"></i> Login / Register
12-
</button> to <strong>Codever</strong>
12+
</button>
13+
to <strong>Codever</strong>
1314
to see posts from your favorite topics in your feed
1415
</div>
1516
</div>
@@ -99,18 +100,13 @@
99100
to access this functionality.
100101
</div>
101102
<ng-template #isLoggedInLastVisited>
102-
<div *ngIf="(history$ | async)?.length === 0 && currentPageHistory === 1; else historyQuickAccess"
103+
<div *ngIf="(history$ | async)?.length === 0 && currentPageHistory === 1"
103104
class="tabs-headline-message mt-2 alert alert-info">
104105
<p>
105106
In <strong>History</strong> you have a list of your last visited, created or updated bookmarks. Quick access
106107
with <strong>Ctrl + H</strong>
107108
</p>
108109
</div>
109-
<ng-template #historyQuickAccess>
110-
<div class="mt-2 lead alert alert-info">
111-
<strong>Ctrl + H</strong> hot key for quick access
112-
</div>
113-
</ng-template>
114110
<app-async-bookmark-list
115111
[bookmarks$]="history$"
116112
[userData$]="userData$"
@@ -137,17 +133,12 @@
137133
to access this functionality.
138134
</div>
139135
<ng-template #isLoggedInToPin>
140-
<div *ngIf="(pinned$ | async)?.length === 0 && currentPagePinned === 1; else pinnedQuickAccess"
136+
<div *ngIf="(pinned$ | async)?.length === 0 && currentPagePinned === 1"
141137
class="tabs-headline-message mt-2 alert alert-info">
142138
Got some bookmarks you will use a lot today? Just pin it <i
143139
class="fas fa-thumbtack"></i>
144140
and it will appear in the <strong>Pinned</strong> list. Quick access with <strong>Ctrl + P</strong>
145141
</div>
146-
<ng-template #pinnedQuickAccess>
147-
<div class="mt-2 lead alert alert-info">
148-
<strong>Ctrl + P</strong> hot key for quick access
149-
</div>
150-
</ng-template>
151142
<app-async-bookmark-list
152143
[bookmarks$]="pinned$"
153144
[userData$]="userData$"

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

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div *ngIf="(bookmarks$ | async) as bookmarks" class="mt-3">
22
<div *ngIf="showFilterBox" class="form-group has-search float-right filter-box">
33
<span class="fas fa-filter form-control-feedback"></span>
4-
<input type="search" [(ngModel)]="filterText" class="form-control" placeholder="Filter...">
4+
<input autofocus type="search" [(ngModel)]="filterText" class="form-control" placeholder="Filter...">
55
</div>
66
<div class="clear"></div>
77
<div class="mt-3" *ngFor="let bookmark of bookmarks | bookmarkFilter: filterText">
@@ -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.scss‎

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,4 @@
11

2-
.title-content-separator {
3-
margin: 0 0 0.5rem 0;
4-
}
5-
6-
.header-wrapper {
7-
display: flex;
8-
justify-content: space-between;
9-
10-
.clock-wrapper {
11-
font-size: 1.4rem;
12-
margin-left: 1rem;
13-
cursor: pointer;
14-
}
15-
16-
.pinned {
17-
color: red;
18-
}
19-
}
20-
21-
.share-action {
22-
cursor: pointer;
23-
margin-top: 0.3rem;
24-
}
25-
26-
.external-link-hint {
27-
font-size: 0.6rem;
28-
margin-left: 0.2rem;
29-
}
30-
31-
.youtube-icon {
32-
color:red;
33-
margin-right: 0.5rem;
34-
cursor: pointer;
35-
}
36-
37-
.stackoverflow-icon {
38-
margin-right: 0.5rem;
39-
}
40-
41-
.isDisabled {
42-
cursor: not-allowed;
43-
opacity: 0.6;
44-
pointer-events: none;
45-
}
46-
472
.filter-box {
483
width: 30%;
494
margin-bottom: -0.5rem;

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

Lines changed: 12 additions & 38 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';
@@ -15,7 +25,7 @@ import { TagFollowingBaseComponent } from '../tag-following-base-component/tag-f
1525
templateUrl: './async-bookmark-list.component.html',
1626
styleUrls: ['./async-bookmark-list.component.scss']
1727
})
18-
export class AsyncBookmarkListComponent extends TagFollowingBaseComponent implements OnInit, OnChanges {
28+
export class AsyncBookmarkListComponent extends TagFollowingBaseComponent implements OnInit {
1929

2030
verifyForWatchedTag: Observable<string>; // used to avoid looking in watchedTags for other tags in the html template
2131

@@ -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,40 +66,9 @@ 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 {
7073
}
71-
72-
ngOnChanges(changes: SimpleChanges): void {
73-
const page = this.route.snapshot.queryParamMap.get('page');
74-
if (page) {
75-
this.currentPage = parseInt(page, 0);
76-
} else {
77-
this.currentPage = 1;
78-
}
79-
}
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-
}
10074
}

‎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.scss‎

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,3 @@
1-
2-
.title-content-separator {
3-
margin: 0 0 0.5rem 0;
4-
}
5-
6-
.header-wrapper {
7-
display: flex;
8-
justify-content: space-between;
9-
10-
.clock-wrapper {
11-
font-size: 1.4rem;
12-
margin-left: 1rem;
13-
cursor: pointer;
14-
}
15-
16-
.pinned {
17-
color: red;
18-
}
19-
}
20-
21-
.share-action {
22-
cursor: pointer;
23-
margin-top: 0.3rem;
24-
}
25-
26-
.external-link-hint {
27-
font-size: 0.6rem;
28-
margin-left: 0.2rem;
29-
}
30-
31-
.youtube-icon {
32-
color:red;
33-
margin-right: 0.5rem;
34-
cursor: pointer;
35-
}
36-
37-
.stackoverflow-icon {
38-
margin-right: 0.5rem;
39-
}
40-
41-
.isDisabled {
42-
cursor: not-allowed;
43-
opacity: 0.6;
44-
pointer-events: none;
45-
}
46-
471
.filter-box {
482
width: 30%;
493
margin-bottom: -0.5rem;

0 commit comments

Comments
 (0)