aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-07-15 11:15:50 +0200
committerRigel Kent <par@rigelk.eu>2020-07-29 18:15:53 +0200
commit654a188f80fc1f089aa14837084664c908fe27d2 (patch)
tree63855915278c1a3aeb1509c09a7a2f5ee6977893 /client/src/app
parent292c17b894e430d61f9197fb6fa245f5f9c6fa7c (diff)
downloadPeerTube-654a188f80fc1f089aa14837084664c908fe27d2.tar.gz
PeerTube-654a188f80fc1f089aa14837084664c908fe27d2.tar.zst
PeerTube-654a188f80fc1f089aa14837084664c908fe27d2.zip
allow sorting notifications
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html10
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss6
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts4
-rw-r--r--client/src/app/shared/shared-main/users/user-notification.service.ts14
-rw-r--r--client/src/app/shared/shared-main/users/user-notifications.component.ts28
5 files changed, 52 insertions, 10 deletions
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index 8e4480ca6..0727f90e8 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -5,7 +5,15 @@
5 Notification preferences 5 Notification preferences
6 </a> 6 </a>
7 7
8 <button class="btn" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()"> 8 <div class="peertube-select-container peertube-select-button ml-2">
9 <select [(ngModel)]="notificationSortType" (ngModelChange)="onNotificationSortTypeChanged()" class="form-control">
10 <option value="undefined" disabled>Sort by</option>
11 <option value="created" i18n>Newest first</option>
12 <option value="unread-created" i18n>Unread first</option>
13 </select>
14 </div>
15
16 <button class="btn ml-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
9 <ng-container *ngIf="hasUnreadNotifications()"> 17 <ng-container *ngIf="hasUnreadNotifications()">
10 <my-global-icon iconName="inbox-full" aria-hidden="true"></my-global-icon> 18 <my-global-icon iconName="inbox-full" aria-hidden="true"></my-global-icon>
11 19
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index 73f7c7b24..d586eeb0d 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -3,7 +3,6 @@
3 3
4.header { 4.header {
5 display: flex; 5 display: flex;
6 justify-content: space-between;
7 font-size: 15px; 6 font-size: 15px;
8 margin-bottom: 20px; 7 margin-bottom: 20px;
9 8
@@ -18,8 +17,13 @@
18 @include grey-button; 17 @include grey-button;
19 @include button-with-icon(20px, 3px, -1px); 18 @include button-with-icon(20px, 3px, -1px);
20 } 19 }
20
21 .peertube-select-container {
22 @include peertube-select-container(auto);
23 }
21} 24}
22 25
26
23my-user-notifications { 27my-user-notifications {
24 font-size: 15px; 28 font-size: 15px;
25} 29}
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
index 0c1427d96..03b91e050 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
@@ -8,6 +8,8 @@ import { UserNotificationsComponent } from '@app/shared/shared-main'
8export class MyAccountNotificationsComponent { 8export class MyAccountNotificationsComponent {
9 @ViewChild('userNotification', { static: true }) userNotification: UserNotificationsComponent 9 @ViewChild('userNotification', { static: true }) userNotification: UserNotificationsComponent
10 10
11 notificationSortType = 'created'
12
11 markAllAsRead () { 13 markAllAsRead () {
12 this.userNotification.markAllAsRead() 14 this.userNotification.markAllAsRead()
13 } 15 }
@@ -15,4 +17,6 @@ export class MyAccountNotificationsComponent {
15 hasUnreadNotifications () { 17 hasUnreadNotifications () {
16 return this.userNotification.notifications.filter(n => n.read === false).length !== 0 18 return this.userNotification.notifications.filter(n => n.read === false).length !== 0
17 } 19 }
20
21 onNotificationSortTypeChanged () {}
18} 22}
diff --git a/client/src/app/shared/shared-main/users/user-notification.service.ts b/client/src/app/shared/shared-main/users/user-notification.service.ts
index 8dd9472fe..ecc66ecdb 100644
--- a/client/src/app/shared/shared-main/users/user-notification.service.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.service.ts
@@ -5,6 +5,7 @@ import { ComponentPaginationLight, RestExtractor, RestService, User, UserNotific
5import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '@shared/models' 5import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '@shared/models'
6import { environment } from '../../../../environments/environment' 6import { environment } from '../../../../environments/environment'
7import { UserNotification } from './user-notification.model' 7import { UserNotification } from './user-notification.model'
8import { SortMeta } from 'primeng/api'
8 9
9@Injectable() 10@Injectable()
10export class UserNotificationService { 11export class UserNotificationService {
@@ -18,9 +19,16 @@ export class UserNotificationService {
18 private userNotificationSocket: UserNotificationSocket 19 private userNotificationSocket: UserNotificationSocket
19 ) {} 20 ) {}
20 21
21 listMyNotifications (pagination: ComponentPaginationLight, unread?: boolean, ignoreLoadingBar = false) { 22 listMyNotifications (parameters: {
23 pagination: ComponentPaginationLight
24 ignoreLoadingBar?: boolean
25 unread?: boolean,
26 sort?: SortMeta
27 }) {
28 const { pagination, ignoreLoadingBar, unread, sort } = parameters
29
22 let params = new HttpParams() 30 let params = new HttpParams()
23 params = this.restService.addRestGetParams(params, this.restService.componentPaginationToRestPagination(pagination)) 31 params = this.restService.addRestGetParams(params, this.restService.componentPaginationToRestPagination(pagination), sort)
24 32
25 if (unread) params = params.append('unread', `${unread}`) 33 if (unread) params = params.append('unread', `${unread}`)
26 34
@@ -35,7 +43,7 @@ export class UserNotificationService {
35 } 43 }
36 44
37 countUnreadNotifications () { 45 countUnreadNotifications () {
38 return this.listMyNotifications({ currentPage: 1, itemsPerPage: 0 }, true) 46 return this.listMyNotifications({ pagination: { currentPage: 1, itemsPerPage: 0 }, ignoreLoadingBar: true, unread: true })
39 .pipe(map(n => n.total)) 47 .pipe(map(n => n.total))
40 } 48 }
41 49
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.ts b/client/src/app/shared/shared-main/users/user-notifications.component.ts
index 6abd8b7d8..48be80e3f 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.ts
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.ts
@@ -19,6 +19,7 @@ export class UserNotificationsComponent implements OnInit {
19 @Output() notificationsLoaded = new EventEmitter() 19 @Output() notificationsLoaded = new EventEmitter()
20 20
21 notifications: UserNotification[] = [] 21 notifications: UserNotification[] = []
22 sortField = 'createdAt'
22 23
23 // So we can access it in the template 24 // So we can access it in the template
24 UserNotificationType = UserNotificationType 25 UserNotificationType = UserNotificationType
@@ -39,18 +40,25 @@ export class UserNotificationsComponent implements OnInit {
39 totalItems: null 40 totalItems: null
40 } 41 }
41 42
42 this.loadMoreNotifications() 43 this.loadNotifications()
43 44
44 if (this.markAllAsReadSubject) { 45 if (this.markAllAsReadSubject) {
45 this.markAllAsReadSubject.subscribe(() => this.markAllAsRead()) 46 this.markAllAsReadSubject.subscribe(() => this.markAllAsRead())
46 } 47 }
47 } 48 }
48 49
49 loadMoreNotifications () { 50 loadNotifications (reset?: boolean) {
50 this.userNotificationService.listMyNotifications(this.componentPagination, undefined, this.ignoreLoadingBar) 51 this.userNotificationService.listMyNotifications({
52 pagination: this.componentPagination,
53 ignoreLoadingBar: this.ignoreLoadingBar,
54 sort: {
55 field: this.sortField,
56 order: this.sortField === 'createdAt' ? -1 : 1
57 }
58 })
51 .subscribe( 59 .subscribe(
52 result => { 60 result => {
53 this.notifications = this.notifications.concat(result.data) 61 this.notifications = reset ? result.data : this.notifications.concat(result.data)
54 this.componentPagination.totalItems = result.total 62 this.componentPagination.totalItems = result.total
55 63
56 this.notificationsLoaded.emit() 64 this.notificationsLoaded.emit()
@@ -68,7 +76,7 @@ export class UserNotificationsComponent implements OnInit {
68 this.componentPagination.currentPage++ 76 this.componentPagination.currentPage++
69 77
70 if (hasMoreItems(this.componentPagination)) { 78 if (hasMoreItems(this.componentPagination)) {
71 this.loadMoreNotifications() 79 this.loadNotifications()
72 } 80 }
73 } 81 }
74 82
@@ -97,4 +105,14 @@ export class UserNotificationsComponent implements OnInit {
97 err => this.notifier.error(err.message) 105 err => this.notifier.error(err.message)
98 ) 106 )
99 } 107 }
108
109 changeSortColumn (column: string) {
110 this.componentPagination = {
111 currentPage: 1,
112 itemsPerPage: this.itemsPerPage,
113 totalItems: null
114 }
115 this.sortField = column
116 this.loadNotifications(true)
117 }
100} 118}