First version AI Search

bizmatch/src/app/components/header/header.component.ts

@@ -1,20 +1,23 @@
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { Router, RouterModule } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { faUserGear } from '@fortawesome/free-solid-svg-icons';
 import { Collapse, Dropdown, initFlowbite } from 'flowbite';
 import { KeycloakService } from 'keycloak-angular';
-import { Observable } from 'rxjs';
+import { Observable, Subject, takeUntil } from 'rxjs';
 import { User } from '../../../../../bizmatch-server/src/models/db.model';
 import { emailToDirName, KeycloakUser } from '../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../environments/environment';
 import { SharedService } from '../../services/shared.service';
 import { UserService } from '../../services/user.service';
 import { map2User } from '../../utils/utils';
+import { DropdownComponent } from '../dropdown/dropdown.component';
 @Component({
   selector: 'header',
   standalone: true,
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterModule, DropdownComponent, FormsModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
@@ -27,23 +30,50 @@ export class HeaderComponent {
   faUserGear = faUserGear;
   profileUrl: string;
   env = environment;
-  constructor(public keycloakService: KeycloakService, private router: Router, private userService: UserService, private sharedService: SharedService) {}
+  private filterDropdown: Dropdown | null = null;
+  isMobile: boolean = false;
+  private destroy$ = new Subject<void>();
+  prompt: string;
+  constructor(public keycloakService: KeycloakService, private router: Router, private userService: UserService, private sharedService: SharedService, private breakpointObserver: BreakpointObserver) {}
 
   async ngOnInit() {
     const token = await this.keycloakService.getToken();
     this.keycloakUser = map2User(token);
-    this.user = await this.userService.getByMail(this.keycloakUser.email);
-    this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
-    setTimeout(() => {
-      initFlowbite();
+    if (this.keycloakUser) {
+      this.user = await this.userService.getByMail(this.keycloakUser?.email);
+      this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
+    }
+
+    // setTimeout(() => {
+    //   initFlowbite();
+    // });
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        initFlowbite();
+      }
     });
+    this.breakpointObserver
+      .observe([Breakpoints.Handset])
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(result => {
+        this.isMobile = result.matches;
+        const targetEl = document.getElementById('filterDropdown');
+        const triggerEl = this.isMobile ? document.getElementById('filterDropdownMobileButton') : document.getElementById('filterDropdownButton');
+        if (targetEl && triggerEl) {
+          this.filterDropdown = new Dropdown(targetEl, triggerEl);
+        }
+      });
     this.sharedService.currentProfilePhoto.subscribe(photoUrl => {
       if (photoUrl) {
         this.profileUrl = photoUrl;
       }
     });
   }
-
+  toggleFilterDropdown() {
+    if (this.filterDropdown) {
+      this.filterDropdown.toggle();
+    }
+  }
   ngAfterViewInit() {}
 
   navigateWithState(dest: string, state: any) {
@@ -82,4 +112,9 @@ export class HeaderComponent {
     this.closeDropdown();
     this.closeMobileMenu();
   }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }