[NAE-2021] Outputs for navigation components

CHANGELOG.md

@@ -48,6 +48,7 @@ Full Changelog: [https://github.com/netgrif/components/commits/v6.4.0](https://g
 - [NAE-1958] Make component properties changeable
 - [NAE-1949] Allowed Types for Filefield
 - [NAE-2016] Global roles for menu items permissions
+- [NAE-2021] Outputs for navigation components
 
 
 ## [6.3.3](https://github.com/netgrif/components/releases/tag/v6.3.3) (2024-01-19)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netgrif/components-project",
-    "version": "6.4.0-rc.7",
+    "version": "6.4.0-rc.8",
     "description": "Netgrif Application Engine Frontend project. Project includes angular libraries as base for NAE applications.",
     "homepage": "https://components.netgrif.com",
     "license": "SEE LICENSE IN LICENSE",

projects/netgrif-components-core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netgrif/components-core",
-    "version": "6.4.0-rc.7",
+    "version": "6.4.0-rc.8",
     "description": "Netgrif Application engine frontend core Angular library",
     "homepage": "https://components.netgrif.com",
     "license": "SEE LICENSE IN LICENSE",

projects/netgrif-components-core/src/lib/navigation/breadcrumbs/abstract-breadcrumbs.component.ts

@@ -27,8 +27,10 @@ export abstract class AbstractBreadcrumbsComponent implements OnDestroy, AfterVi
     @Input() redirectOnClick: boolean = true;
     @Input() lengthOfPath: number = 30;
     @Input() partsAfterDots: number = 2;
+
     filterName: string;
     breadcrumbsParts: Array<string>;
+
     private static DOTS: string = '...';
     private static DELIMETER: string = '/';
     private static NODE_PATH: string = 'nodePath';

projects/netgrif-components-core/src/lib/navigation/model/navigation-menu-events.ts

@@ -0,0 +1,21 @@
+import {NavigationItem} from './navigation-configs';
+import {UriNodeResource} from './uri-resource';
+
+export interface MenuStateChangeEvent {
+    menu: 'left' | 'right';
+    isOpened: boolean;
+}
+
+export interface MenuItemClickEvent {
+    uriNode: UriNodeResource;
+    isHome: boolean;
+}
+
+export interface MenuItemLoadedEvent {
+    menu: 'left' | 'right';
+    items: Array<NavigationItem>;
+}
+
+export interface MenuResizeEvent {
+    width: number;
+}

projects/netgrif-components-core/src/lib/navigation/navigation-drawer/abstract-navigation-drawer.component.ts

@@ -7,13 +7,14 @@ import {LoggerService} from '../../logger/services/logger.service';
 import {BehaviorSubject, Subscription} from 'rxjs';
 import {ResizeEvent} from 'angular-resizable-element';
 import {UserPreferenceService} from '../../user/services/user-preference.service';
+import {MenuResizeEvent} from '../model/navigation-menu-events';
 
 const DRAWER_DEFAULT_MIN_WIDTH = 200;
 const DRAWER_MAX_WIDTH = 450;
 
 @Component({
     selector: 'ncc-abstract-navigation-drawer',
-    template: ''
+    template: '',
 })
 export abstract class AbstractNavigationDrawerComponent implements OnInit, AfterViewInit, OnDestroy {
 
@@ -25,6 +26,7 @@ export abstract class AbstractNavigationDrawerComponent implements OnInit, After
     @Input() public navigation: boolean;
 
     @Output() public openedChange: EventEmitter<boolean>;
+    @Output() public resized: EventEmitter<MenuResizeEvent>;
 
     @ViewChild('sidenav') protected _sideNav: MatSidenav;
 
@@ -38,13 +40,14 @@ export abstract class AbstractNavigationDrawerComponent implements OnInit, After
     protected _config = {
         mode: 'over',
         opened: true,
-        disableClose: false
+        disableClose: false,
     };
 
     constructor(protected breakpoint: BreakpointObserver,
                 protected _log: LoggerService,
                 protected userPreferenceService: UserPreferenceService) {
         this.openedChange = new EventEmitter<boolean>();
+        this.resized = new EventEmitter<MenuResizeEvent>();
         this._fixed = true;
         this.opened = true;
         this.quickPanelItems = ['language', 'settings', 'logout', 'impersonation'];
@@ -57,7 +60,7 @@ export abstract class AbstractNavigationDrawerComponent implements OnInit, After
 
     ngOnInit(): void {
         this.resolveLayout(this._fixed);
-        this.subBreakpoint = this.breakpoint.observe([Breakpoints.HandsetLandscape]).subscribe( result => {
+        this.subBreakpoint = this.breakpoint.observe([Breakpoints.HandsetLandscape]).subscribe(result => {
             this._log.info('BreakpointObserver matches width of window: ' + this.breakpoint.isMatched('(max-width: 959.99px)'));
             if (this.breakpoint.isMatched('(max-width: 959.99px)')) {
                 this.resolveLayout(false);
@@ -82,6 +85,7 @@ export abstract class AbstractNavigationDrawerComponent implements OnInit, After
     ngOnDestroy(): void {
         this.subBreakpoint.unsubscribe();
         this.openedChange.complete();
+        this.resized.complete();
     }
 
     get config() {
@@ -123,11 +127,11 @@ export abstract class AbstractNavigationDrawerComponent implements OnInit, After
         this._config = bool ? {
             mode: 'side',
             opened: true,
-            disableClose: true
+            disableClose: true,
         } : {
             mode: 'over',
             opened: false,
-            disableClose: false
+            disableClose: false,
         };
         if (bool && this._sideNav) {
             this._sideNav.open();
@@ -156,5 +160,6 @@ export abstract class AbstractNavigationDrawerComponent implements OnInit, After
         }
         this.userPreferenceService._drawerWidthChanged$.next(this.width);
         this.contentWidth.next(this.width);
+        this.resized.emit({width: this.width});
     }
 }

projects/netgrif-components-core/src/lib/navigation/public-api.ts

@@ -23,6 +23,7 @@ export * from './model/size-menu-injection-token'
 export * from './model/group-navigation-item-label';
 export * from './model/uri-resource';
 export * from './model/navigation-configs';
+export * from './model/navigation-menu-events';
 
 /* UTILITY METHODS */
 export * from './utility/navigation-item-task-utility-methods';

projects/netgrif-components-core/src/lib/navigation/quick-panel/components/logout-shortcut/abstract-logout-shortcut.component.ts

@@ -1,24 +1,27 @@
-import {Component} from '@angular/core';
+import {Component, EventEmitter, Output} from '@angular/core';
 import {UserService} from '../../../../user/services/user.service';
 import {LoggerService} from '../../../../logger/services/logger.service';
 import {ConfigurationService} from '../../../../configuration/configuration.service';
 import {Router} from '@angular/router';
 
 @Component({
     selector: 'ncc-abstract-logout-shortcut',
-    template: ''
+    template: '',
 })
 export abstract class AbstractLogoutShortcutComponent {
 
+    @Output() loggedOut = new EventEmitter<any>(true);
+
     constructor(protected _user: UserService,
                 protected _log: LoggerService,
                 protected _config: ConfigurationService,
                 protected _router: Router) {
     }
 
     logout(): void {
-        this._user.logout().subscribe(() => {
+        this._user.logout().subscribe(response => {
             this._log.debug('User is logged out');
+            this.loggedOut.emit(response);
             const redirectPath = this._config.getOnLogoutPath();
             if (redirectPath) {
                 this._log.info('Redirecting to ' + redirectPath);

projects/netgrif-components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netgrif/components",
-    "version": "6.4.0-rc.7",
+    "version": "6.4.0-rc.8",
     "description": "Netgrif Application Engine frontend Angular components",
     "homepage": "https://components.netgrif.com",
     "license": "SEE LICENSE IN LICENSE",
@@ -29,7 +29,7 @@
         "nae frontend"
     ],
     "peerDependencies": {
-        "@netgrif/components-core": "6.4.0-rc.7",
+        "@netgrif/components-core": "6.4.0-rc.8",
         "@angular-material-components/datetime-picker": "~7.0.1",
         "@angular-material-components/moment-adapter": "~7.0.0",
         "@angular/animations": "~13.3.1",