SEO/AEO, Farb schema, breadcrumbs

bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts

@@ -1,30 +1,40 @@
 import { CommonModule, NgOptimizedImage } from '@angular/common';
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { Subject, takeUntil } from 'rxjs';
 import { BusinessListing, SortByOptions, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { LISTINGS_PER_PAGE, ListingType, UserListingCriteria, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
+import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
 import { CustomerSubTypeComponent } from '../../../components/customer-sub-type/customer-sub-type.component';
 import { PaginatorComponent } from '../../../components/paginator/paginator.component';
+import { SearchModalBrokerComponent } from '../../../components/search-modal/search-modal-broker.component';
 import { ModalService } from '../../../components/search-modal/modal.service';
+import { AltTextService } from '../../../services/alt-text.service';
 import { CriteriaChangeService } from '../../../services/criteria-change.service';
+import { FilterStateService } from '../../../services/filter-state.service';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
 import { SearchService } from '../../../services/search.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
-import { assignProperties, getCriteriaProxy, resetUserListingCriteria } from '../../../utils/utils';
+import { assignProperties, resetUserListingCriteria } from '../../../utils/utils';
 @UntilDestroy()
 @Component({
   selector: 'app-broker-listings',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterModule, NgOptimizedImage, PaginatorComponent, CustomerSubTypeComponent],
+  imports: [CommonModule, FormsModule, RouterModule, NgOptimizedImage, PaginatorComponent, CustomerSubTypeComponent, BreadcrumbsComponent, SearchModalBrokerComponent],
   templateUrl: './broker-listings.component.html',
   styleUrls: ['./broker-listings.component.scss', '../../pages.scss'],
 })
-export class BrokerListingsComponent {
+export class BrokerListingsComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+  breadcrumbs: BreadcrumbItem[] = [
+    { label: 'Home', url: '/home', icon: 'fas fa-home' },
+    { label: 'Professionals', url: '/brokerListings' }
+  ];
   environment = environment;
   listings: Array<BusinessListing>;
   users: Array<User>;
@@ -47,6 +57,7 @@ export class BrokerListingsComponent {
   pageCount = 1;
   sortBy: SortByOptions = null; // Neu: Separate Property
   constructor(
+    public altText: AltTextService,
     public selectOptions: SelectOptionsService,
     private listingsService: ListingsService,
     private userService: UserService,
@@ -58,23 +69,38 @@ export class BrokerListingsComponent {
     private searchService: SearchService,
     private modalService: ModalService,
     private criteriaChangeService: CriteriaChangeService,
+    private filterStateService: FilterStateService,
   ) {
-    this.criteria = getCriteriaProxy('brokerListings', this) as UserListingCriteria;
-    this.init();
     this.loadSortBy();
-    // this.searchService.currentCriteria.pipe(untilDestroyed(this)).subscribe(({ criteria }) => {
-    //   if (criteria.criteriaType === 'brokerListings') {
-    //     this.search();
-    //   }
-    // });
   }
   private loadSortBy() {
     const storedSortBy = sessionStorage.getItem('professionalsSortBy');
     this.sortBy = storedSortBy && storedSortBy !== 'null' ? (storedSortBy as SortByOptions) : null;
   }
-  async ngOnInit() {}
-  async init() {
-    this.search();
+  ngOnInit(): void {
+    // Subscribe to FilterStateService for criteria changes
+    this.filterStateService
+      .getState$('brokerListings')
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(state => {
+        this.criteria = state.criteria as UserListingCriteria;
+        this.sortBy = state.sortBy;
+        this.search();
+      });
+
+    // Subscribe to SearchService for search triggers
+    this.searchService.searchTrigger$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(type => {
+        if (type === 'brokerListings') {
+          this.search();
+        }
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
   async search() {
     const usersReponse = await this.userService.search(this.criteria);