Einbau klassische Filter als Overlay ...

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

@@ -1,4 +1,4 @@
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -6,14 +6,15 @@ 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, Subject, takeUntil } from 'rxjs';
+import { Observable, Subject, Subscription } 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 { createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, map2User } from '../../utils/utils';
 import { DropdownComponent } from '../dropdown/dropdown.component';
+import { ModalService } from '../search-modal/modal.service';
 @Component({
   selector: 'header',
   standalone: true,
@@ -34,7 +35,15 @@ export class HeaderComponent {
   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) {}
+  private subscription: Subscription;
+  constructor(
+    public keycloakService: KeycloakService,
+    private router: Router,
+    private userService: UserService,
+    private sharedService: SharedService,
+    private breakpointObserver: BreakpointObserver,
+    private modalService: ModalService,
+  ) {}
 
   async ngOnInit() {
     const token = await this.keycloakService.getToken();
@@ -52,30 +61,40 @@ export class HeaderComponent {
         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.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();
+
+  // toggleFilterDropdown() {
+  //   if (this.filterDropdown) {
+  //     this.filterDropdown.toggle();
+  //   }
+  // }
+  ngAfterViewInit() {}
+  openModal() {
+    if (this.isActive('/businessListings')) {
+      this.modalService.showModal(createEmptyBusinessListingCriteria());
+    } else if (this.isActive('/commercialPropertyListings')) {
+      this.modalService.showModal(createEmptyCommercialPropertyListingCriteria());
+    } else if (this.isActive('/brokerListings')) {
+      this.modalService.showModal(createEmptyUserListingCriteria());
     }
   }
-  ngAfterViewInit() {}
-
   navigateWithState(dest: string, state: any) {
     this.router.navigate([dest], { state: state });
   }