feat: allow to add top navigation to iframe

farscrl · Jun 3, 2024 · 85f2f69 · 85f2f69
1 parent 5647972
commit 85f2f69
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 0 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -61,6 +61,9 @@ export class AppComponent implements OnInit {
                     if (params['showAddButton'] === 'true') {
                         this.iframeService.enableAddButton();
                     }
+                    if (params['showTopNavigation'] === 'true') {
+                        this.iframeService.enableTopNavigation();
+                    }
                 }
 
                 if (params['view'] === 'cards') {

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -124,3 +124,20 @@
     </ng-template>
 
 </div>
+
+<div class="hdr top-navigation" *ngIf="isInIframe && isTopNavigationVisible">
+    <div class="short-menu">
+        <ul>
+            <li>
+                <a [routerLink]="'/'" [class.active]="isLinkActive('/')">
+                    {{ 'COMPONENTS.HEADER.SUB_MENU.EVENTS' | translate }}
+                </a>
+            </li>
+            <li>
+                <a [routerLink]="'/notices'" [class.active]="isLinkActive('/notices')">
+                    {{ 'COMPONENTS.HEADER.SUB_MENU.NOTICE_BOARD' | translate }}
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
@@ -11,6 +11,12 @@
     height: 68px;
     border-bottom: 1px solid #BBBFC2;
 
+    &.top-navigation {
+        flex-direction: column;
+        margin-bottom: 1px;
+        height: 75px;
+    }
+
     a {
         color: black;
         text-decoration: none;

diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
@@ -13,8 +13,10 @@ import { Router } from '@angular/router';
 export class HeaderComponent implements OnInit, OnDestroy {
     public isMenuOpen = false;
     public isInIframe = false;
+    public isTopNavigationVisible = false;
 
     private isIframeSubscription?: Subscription;
+    private isShowTopNavigationSubscription?: Subscription;
 
     constructor(
         private offcanvasService: NgbOffcanvas,
@@ -28,12 +30,18 @@ export class HeaderComponent implements OnInit, OnDestroy {
         this.isIframeSubscription = this.iframeService.getIsIframeObservable().subscribe((value) => {
             this.isInIframe = value;
         });
+        this.isShowTopNavigationSubscription = this.iframeService.getShowTopNavigationObservable().subscribe((value) => {
+            this.isTopNavigationVisible = value;
+        });
     }
 
     ngOnDestroy() {
         if (this.isIframeSubscription) {
             this.isIframeSubscription.unsubscribe();
         }
+        if (this.isShowTopNavigationSubscription) {
+            this.isShowTopNavigationSubscription.unsubscribe();
+        }
     }
 
     toggleMenu(content: TemplateRef<any>): void {

diff --git a/src/app/services/iframe.service.ts b/src/app/services/iframe.service.ts
@@ -10,6 +10,7 @@ export class IframeService {
     private showSearch = new BehaviorSubject<boolean>(true);
     private showViewSelection = new BehaviorSubject<boolean>(true);
     private showAddButton = new BehaviorSubject<boolean>(false);
+    private showTopNavigation = new BehaviorSubject<boolean>(false);
 
     constructor() {
     }
@@ -61,4 +62,16 @@ export class IframeService {
     isShowAddButtonValue(): boolean {
         return this.showAddButton.value;
     }
+
+    enableTopNavigation() {
+        this.showTopNavigation.next(true);
+    }
+
+    getShowTopNavigationObservable(): Observable<boolean> {
+        return this.showTopNavigation.asObservable();
+    }
+
+    isShowTopNavigationValue(): boolean {
+        return this.showTopNavigation.value;
+    }
 }
diff --git a/src/app/shared/data/event.ts b/src/app/shared/data/event.ts
@@ -115,6 +115,7 @@ export class EventFilterUrlParams {
     searchTerm?: string;
     iframe?: boolean;
     showAddButton?: boolean;
+    showTopNavigation?: boolean;
     showSearch?: boolean;
     showViewSelection?: boolean;
     view?: string;

diff --git a/src/app/shared/utils/url.util.ts b/src/app/shared/utils/url.util.ts
@@ -40,6 +40,10 @@ export class UrlUtil {
             url.showAddButton = true;
         }
 
+        if (this.iframeService.isShowTopNavigationValue()) {
+            url.showTopNavigation = true;
+        }
+
         if (!this.iframeService.isShowSearchValue()) {
             url.showSearch = false;
         }