From a9f31d830740cfdcea33266248b2421815834899 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 24 Mar 2023 17:13:33 +0200 Subject: [PATCH] 1. Add notifications in user-mini in mobile --- login/userMini.component.ts | 113 ++++++++----- login/userMiniModule.module.ts | 3 +- .../notification-sidebar.component.less | 4 +- .../notifications-sidebar.component.ts | 155 +++++++++++------- sharedComponents/navigationBar.component.html | 4 +- sharedComponents/navigationBar.component.ts | 2 + .../full-page-slider.module.ts | 8 +- 7 files changed, 179 insertions(+), 110 deletions(-) diff --git a/login/userMini.component.ts b/login/userMini.component.ts index b1795bf6..c09472b7 100644 --- a/login/userMini.component.ts +++ b/login/userMini.component.ts @@ -1,10 +1,16 @@ -import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core'; +import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Session, User} from './utils/helper.class'; import {RouterHelper} from '../utils/routerHelper.class'; import {Subscriber} from "rxjs"; import {MenuItem} from "../sharedComponents/menu"; import {UserManagementService} from "../services/user-management.service"; +import { + NotificationConfiguration, + NotificationsSidebarComponent +} from "../notifications/notifications-sidebar/notifications-sidebar.component"; + +declare var UIkit; @Component({ selector: 'user-mini', @@ -41,42 +47,67 @@ import {UserManagementService} from "../services/user-management.service"; - - - - {{firstLetters ? firstLetters : 'AN'}} - - + + + + + {{firstLetters ? firstLetters : 'AN'}} + + + + + + -
-
- -
- @@ -95,7 +126,9 @@ export class UserMiniComponent implements OnInit, OnChanges { @Input() logInUrl; @Input() logOutUrl; @Input() cookieDomain; - @Output() closeCanvasEmitter: EventEmitter = new EventEmitter(); + @Input() notificationConfiguration: NotificationConfiguration; + @ViewChild('notificationsSidebar') notificationsSidebar: NotificationsSidebarComponent; + public showNotifications = false; private subscriptions = []; constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) { @@ -122,8 +155,8 @@ export class UserMiniComponent implements OnInit, OnChanges { }); } - closeCanvas() { - this.closeCanvasEmitter.emit(true); + closeCanvas(canvas) { + UIkit.offcanvas(canvas).hide(); } initUser() { @@ -166,4 +199,8 @@ export class UserMiniComponent implements OnInit, OnChanges { this.firstLetters += matches.join(''); } } + + toggleNotifications() { + this.showNotifications = !this.showNotifications; + } } diff --git a/login/userMiniModule.module.ts b/login/userMiniModule.module.ts index b48df909..80ff9cfd 100644 --- a/login/userMiniModule.module.ts +++ b/login/userMiniModule.module.ts @@ -7,10 +7,11 @@ import {UserMiniComponent} from "./userMini.component"; import {IconsModule} from "../utils/icons/icons.module"; import {IconsService} from "../utils/icons/icons.service"; import {login} from "../utils/icons/icons"; +import {NotificationsSidebarModule} from "../notifications/notifications-sidebar/notifications-sidebar.module"; @NgModule({ imports: [ - CommonModule, FormsModule, RouterModule, IconsModule + CommonModule, FormsModule, RouterModule, IconsModule, NotificationsSidebarModule ], declarations: [ UserMiniComponent diff --git a/notifications/notifications-sidebar/notification-sidebar.component.less b/notifications/notifications-sidebar/notification-sidebar.component.less index ca48bd96..93375d2b 100644 --- a/notifications/notifications-sidebar/notification-sidebar.component.less +++ b/notifications/notifications-sidebar/notification-sidebar.component.less @@ -5,7 +5,7 @@ } #notifications .notification-list { - padding: @global-medium-gutter 0 @global-medium-gutter @global-medium-gutter; + padding: 0 @global-medium-gutter; } #notifications .notification-list:not(:last-child) { @@ -29,6 +29,6 @@ } #notifications .notification { - padding: @global-medium-gutter @global-medium-gutter; + padding: 0 @global-medium-gutter @global-medium-gutter @global-medium-gutter; overflow: auto; } diff --git a/notifications/notifications-sidebar/notifications-sidebar.component.ts b/notifications/notifications-sidebar/notifications-sidebar.component.ts index 4b4edcdc..157a9db9 100644 --- a/notifications/notifications-sidebar/notifications-sidebar.component.ts +++ b/notifications/notifications-sidebar/notifications-sidebar.component.ts @@ -1,4 +1,14 @@ -import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from "@angular/core"; +import { + Component, + ElementRef, + EventEmitter, + Input, + OnDestroy, + OnInit, + Output, + ViewChild, + ViewEncapsulation +} from "@angular/core"; import {Notification} from "../notifications"; import {NotificationService} from "../notification.service"; import {Subscription} from "rxjs"; @@ -8,71 +18,92 @@ import {Option} from "../../sharedComponents/input/input.component"; declare var UIkit; +export class NotificationConfiguration { + availableGroups: Option[] = []; + entities: string[] = []; + service: string; +} + @Component({ selector: 'notification-sidebar', template: ` -
+
{{unreadCount}}
-
-
- - -
-

Notifications

-
- -
-
No notifications
-
    -
  • -
    - -
    -
    -
    -

    - {{notification.preview}} -

    -
    -
    - -
    -
    - {{getDate(notification.date)}} -
    -
    -
    • -
-
-
- -
-
- - + + +
+

+ + -

{{notification.title}}

+
Notifications
+ +
+
-
- -
- {{notification.name + ' ' + notification.surname}}
- +
No notifications
+
    +
  • +
    + +
    +
    +
    +

    + {{notification.preview}} +

    +
    +
    + +
    +
    + {{getDate(notification.date)}} +
    +
    +
    • +
+
+
+ +
+

+ + + +
{{notification.title}}
+

+
+ +
+ {{notification.name + ' ' + notification.surname}}
+ {{notification.date | date:'medium'}} ({{getDate(notification.date)}}) -
-
-
+
+
+ +
+
+ + +
+
+
+
`, styleUrls: ['notification-sidebar.component.less'], @@ -81,21 +112,21 @@ declare var UIkit; export class NotificationsSidebarComponent implements OnInit, OnDestroy { @Input() public user: User; + @Input() + public mobile: boolean = false; + @Input() + public configuration: NotificationConfiguration; + @Output() + public showNotificationsEmitter: EventEmitter = new EventEmitter(); public notifications: Notification[] = []; - @Input() - public availableGroups: Option[] = []; - @Input() - public entities: string[] = []; - @Input() - public service: string; public notification: Notification; private subscriptions: any[] = []; - + constructor(private notificationService: NotificationService) { } ngOnInit() { - this.subscriptions.push(this.notificationService.getNotifications(this.service).subscribe(notifications => { + this.subscriptions.push(this.notificationService.getNotifications(this.configuration.service).subscribe(notifications => { this.notifications = notifications; }, error => { this.notifications = []; @@ -141,8 +172,12 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy { this.notification = null; } + closeCanvas(canvas) { + UIkit.offcanvas(canvas).hide(); + } + readAll() { - this.notificationService.markAllAsRead(this.service).subscribe(() => { + this.notificationService.markAllAsRead(this.configuration.service).subscribe(() => { this.notifications.forEach(notification => { notification.read = true; }); diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html index 9e42254f..611a4716 100644 --- a/sharedComponents/navigationBar.component.html +++ b/sharedComponents/navigationBar.component.html @@ -12,8 +12,8 @@
-
diff --git a/sharedComponents/navigationBar.component.ts b/sharedComponents/navigationBar.component.ts index a24eb2d0..4f3cf8e4 100644 --- a/sharedComponents/navigationBar.component.ts +++ b/sharedComponents/navigationBar.component.ts @@ -8,6 +8,7 @@ import {Subscription} from 'rxjs'; import {HelpContentService} from '../services/help-content.service'; import {properties} from "../../../environments/environment"; import {LayoutService} from "../dashboard/sharedComponents/sidebar/layout.service"; +import {NotificationConfiguration} from "../notifications/notifications-sidebar/notifications-sidebar.component"; declare var UIkit; @@ -48,6 +49,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges { @Input() searchRoute: string = '/search/find'; @Input() searchPlaceHolder: string = 'Search for research results'; @Input() showLogo: boolean = true; + @Input() notificationConfiguration: NotificationConfiguration; replaceHeader: boolean = false; public activeHeader: Header; keyword: string = ''; diff --git a/utils/full-page-slider/full-page-slider.module.ts b/utils/full-page-slider/full-page-slider.module.ts index 5931bef7..1dd8a466 100644 --- a/utils/full-page-slider/full-page-slider.module.ts +++ b/utils/full-page-slider/full-page-slider.module.ts @@ -4,16 +4,10 @@ import {FullPageSliderComponent} from "./full-page-slider.component"; import {SlideComponent} from "./slide.component"; import {BottomModule} from '../../sharedComponents/bottom.module'; import {IconsModule} from '../icons/icons.module'; -import {IconsService} from '../icons/icons.service'; -import {arrow_down, arrow_up} from '../icons/icons'; @NgModule({ imports: [CommonModule, BottomModule, IconsModule], declarations: [FullPageSliderComponent, SlideComponent], exports: [FullPageSliderComponent, SlideComponent], }) -export class FullPageSliderModule { - constructor(private iconsService: IconsService) { - this.iconsService.registerIcons([arrow_up, arrow_down]); - } -} +export class FullPageSliderModule {}