Criteria Objekt überarbeitet

bizmatch-server/src/jwt.strategy.ts

@@ -38,7 +38,7 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
       this.logger.error('Missing required claims');
       throw new UnauthorizedException();
     }
-    const result = { userId: payload.sub, username: payload.preferred_username, roles: payload.realm_access?.roles };
+    const result = { userId: payload.sub, firstname: payload.given_name, lastname: payload.family_name, username: payload.preferred_username, roles: payload.realm_access?.roles };
     this.logger.info(`JWT User: ${JSON.stringify(result)}`); // Debugging: JWT Payload anzeigen
     return result;
   }

bizmatch-server/src/models/main.model.ts

@@ -118,6 +118,8 @@ export interface KeycloakUser {
 export interface JwtUser {
   userId: string;
   username: string;
+  firstname: string;
+  lastname: string;
   roles: string[];
 }
 export interface Access {

bizmatch-server/src/user/user.controller.ts

@@ -1,9 +1,10 @@
-import { Body, Controller, Get, Inject, Param, Post, Query } from '@nestjs/common';
+import { Body, Controller, Get, Inject, Param, Post, Query, Request, UseGuards } from '@nestjs/common';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
 import { FileService } from '../file/file.service.js';
+import { OptionalJwtAuthGuard } from '../jwt-auth/optional-jwt-auth.guard.js';
 import { User } from '../models/db.model';
-import { Subscription } from '../models/main.model.js';
+import { JwtUser, Subscription } from '../models/main.model.js';
 import { UserService } from './user.service.js';
 
 @Controller('user')
@@ -13,14 +14,15 @@ export class UserController {
     private fileService: FileService,
     @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
   ) {}
-
+  @UseGuards(OptionalJwtAuthGuard)
   @Get()
-  findByMail(@Query('mail') mail: string): any {
+  findByMail(@Request() req, @Query('mail') mail: string): any {
     this.logger.info(`Searching for user with EMail: ${mail}`);
-    const user = this.userService.getUserByMail(mail);
+    const user = this.userService.getUserByMail(mail, req.user as JwtUser);
     this.logger.info(`Found user: ${JSON.stringify(user)}`);
     return user;
   }
+
   @Get(':id')
   findById(@Param('id') id: string): any {
     this.logger.info(`Searching for user with ID: ${id}`);

bizmatch-server/src/user/user.service.ts

@@ -7,7 +7,7 @@ import * as schema from '../drizzle/schema.js';
 import { PG_CONNECTION } from '../drizzle/schema.js';
 import { FileService } from '../file/file.service.js';
 import { User } from '../models/db.model.js';
-import { UserListingCriteria, emailToDirName } from '../models/main.model.js';
+import { JwtUser, UserListingCriteria, emailToDirName } from '../models/main.model.js';
 
 @Injectable()
 export class UserService {
@@ -18,30 +18,38 @@ export class UserService {
   ) {}
   private getConditions(criteria: UserListingCriteria): any[] {
     const conditions = [];
-    if (criteria.state) {
+    if (criteria.states?.length > 0) {
-      //conditions.push(sql`EXISTS (SELECT 1 FROM unnest(users."areasServed") AS area WHERE area LIKE  '%' || ${criteria.state}  || '%')`);
+      criteria.states.forEach(state => {
-      conditions.push(sql`${schema.users.areasServed} @> ${JSON.stringify([{ state: criteria.state }])}`);
+        conditions.push(sql`${schema.users.areasServed} @> ${JSON.stringify([{ state: state }])}`);
+      });
     }
     if (criteria.firstname || criteria.lastname) {
       conditions.push(or(ilike(schema.users.firstname, `%${criteria.lastname}%`), ilike(schema.users.lastname, `%${criteria.lastname}%`)));
     }
     return conditions;
   }
-  async getUserByMail(email: string) {
+  async getUserByMail(email: string, jwtuser?: JwtUser) {
     const users = (await this.conn
       .select()
       .from(schema.users)
       .where(sql`email = ${email}`)) as User[];
-    const user = users[0];
+    if (users.length === 0) {
-    user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
+      const user: User = { email, firstname: jwtuser.firstname, lastname: jwtuser.lastname, customerType: 'buyer' };
-    user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
+      this.saveUser(user);
-    return user;
+      return user;
+    } else {
+      const user = users[0];
+      user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
+      user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
+      return user;
+    }
   }
   async getUserById(id: string) {
     const users = (await this.conn
       .select()
       .from(schema.users)
       .where(sql`id = ${id}`)) as User[];
+
     const user = users[0];
     user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
     user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));

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

@@ -117,16 +117,17 @@
     </a>
     <div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
       <!-- Filter button -->
+      @if(isListingUrl()){
       <button
         type="button"
         #triggerButton
         (click)="openModal()"
         id="filterDropdownButton"
-        class="max-sm:hidden px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 md:me-2"
+        class="max-sm:hidden px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 md:me-2"
       >
         <i class="fas fa-filter mr-2"></i>Filter (1)
       </button>
-
+      }
       <button
         type="button"
         class="flex text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
@@ -233,16 +234,18 @@
     </div>
   </div>
   <!-- Mobile filter button -->
-  <!-- <div class="md:hidden flex justify-center pb-4">
+  @if(isListingUrl()){
+  <div class="md:hidden flex justify-center pb-4">
     <button
-      data-dropdown-toggle="filterDropdown"
+      (click)="openModal()"
       type="button"
       id="filterDropdownMobileButton"
-      class="w-full mx-4 px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+      class="w-full mx-4 px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
     >
       <i class="fas fa-filter mr-2"></i>Filter (1)
     </button>
-  </div> -->
+  </div>
+  }
 </nav>
 
 <!-- ############################### -->

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

@@ -6,13 +6,14 @@ 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, Subscription } from 'rxjs';
+import onChange from 'on-change';
+import { filter, 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 { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, UserListingCriteria } 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 { createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, map2User } from '../../utils/utils';
+import { createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaStateObject, getSessionStorageHandlerWrapper, map2User } from '../../utils/utils';
 import { DropdownComponent } from '../dropdown/dropdown.component';
 import { ModalService } from '../search-modal/modal.service';
 @Component({
@@ -36,6 +37,8 @@ export class HeaderComponent {
   private destroy$ = new Subject<void>();
   prompt: string;
   private subscription: Subscription;
+  criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
+  private routerSubscription: Subscription | undefined;
   constructor(
     public keycloakService: KeycloakService,
     private router: Router,
@@ -43,7 +46,9 @@ export class HeaderComponent {
     private sharedService: SharedService,
     private breakpointObserver: BreakpointObserver,
     private modalService: ModalService,
-  ) {}
+  ) {
+    //this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandlerWrapper(this.activeTabAction));
+  }
 
   async ngOnInit() {
     const token = await this.keycloakService.getToken();
@@ -53,39 +58,37 @@ export class HeaderComponent {
       this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
     }
 
-    // setTimeout(() => {
+    setTimeout(() => {
-    //   initFlowbite();
+      initFlowbite();
-    // });
+    }, 10);
-    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() {
+    this.checkCurrentRoute(this.router.url);
-  //   if (this.filterDropdown) {
+
-  //     this.filterDropdown.toggle();
+    this.routerSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: any) => {
-  //   }
+      this.checkCurrentRoute(event.urlAfterRedirects);
-  // }
+    });
+  }
+  private checkCurrentRoute(url: string): void {
+    const baseRoute = url.split('/')[1]; // Nimmt den ersten Teil der Route nach dem ersten '/'
+    const specialRoutes = [, '', ''];
+    if ('businessListings' === baseRoute) {
+      this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandlerWrapper('business'));
+    } else if ('commercialPropertyListings' === baseRoute) {
+      this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandlerWrapper('commercialProperty'));
+    } else if ('brokerListings' === baseRoute) {
+      this.criteria = onChange(getCriteriaStateObject('broker'), getSessionStorageHandlerWrapper('broker'));
+    } else {
+      this.criteria = undefined;
+    }
+  }
   ngAfterViewInit() {}
+
   openModal() {
     if (this.isActive('/businessListings')) {
       this.modalService.showModal(createEmptyBusinessListingCriteria());
@@ -109,6 +112,9 @@ export class HeaderComponent {
   isActive(route: string): boolean {
     return this.router.url === route;
   }
+  isListingUrl(): boolean {
+    return ['/businessListings', '/commercialPropertyListings', '/brokerListings'].includes(this.router.url);
+  }
   closeDropdown() {
     const dropdownButton = document.getElementById('user-menu-button');
     const dropdownMenu = this.user ? document.getElementById('user-login') : document.getElementById('user-unknown');

bizmatch/src/app/components/search-modal/search-modal.component.html

@@ -21,9 +21,10 @@
           <div class="space-y-4">
             <div>
               <label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
-              <select id="state" [(ngModel)]="criteria.state" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+              <!-- <select id="state" [(ngModel)]="criteria.state" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                 <option selected>Arkansas</option>
-              </select>
+              </select> -->
+              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="criteria.state" name="state"> </ng-select>
             </div>
             <div>
               <label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
@@ -200,9 +201,7 @@
           <div class="space-y-4">
             <div>
               <label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
-              <select id="state" [(ngModel)]="criteria.state" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="criteria.state" name="state"> </ng-select>
-                <option selected>Arkansas</option>
-              </select>
             </div>
             <div>
               <label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
@@ -271,9 +270,7 @@
           <div class="space-y-4">
             <div>
               <label for="states" class="block mb-2 text-sm font-medium text-gray-900">Locations served - States</label>
-              <select id="states" [(ngModel)]="criteria.states" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="criteria.states" name="states" [multiple]="true"> </ng-select>
-                <option selected>Arkansas</option>
-              </select>
             </div>
             <div>
               <label for="counties" class="block mb-2 text-sm font-medium text-gray-900">Locations served - Counties</label>

bizmatch/src/app/components/search-modal/search-modal.component.scss

@@ -0,0 +1,6 @@
+::ng-deep .ng-select.custom .ng-select-container {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  height: 46px;
+  border-radius: 0.5rem;
+}

bizmatch/src/app/components/search-modal/search-modal.component.ts

@@ -1,5 +1,6 @@
 import { AsyncPipe, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
+import { NgSelectModule } from '@ng-select/ng-select';
 import { BusinessListingCriteria, CommercialPropertyListingCriteria, KeyValue, KeyValueStyle, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { SelectOptionsService } from '../../services/select-options.service';
 import { SharedModule } from '../../shared/shared/shared.module';
@@ -8,8 +9,9 @@ import { ModalService } from './modal.service';
 @Component({
   selector: 'app-search-modal',
   standalone: true,
-  imports: [SharedModule, AsyncPipe, NgIf],
+  imports: [SharedModule, AsyncPipe, NgIf, NgSelectModule],
   templateUrl: './search-modal.component.html',
+  styleUrl: './search-modal.component.scss',
 })
 export class SearchModalComponent {
   constructor(public selectOptions: SelectOptionsService, public modalService: ModalService) {}

bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts

@@ -20,7 +20,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../.
   imports: [SharedModule],
   providers: [],
   templateUrl: './details-business-listing.component.html',
-  styleUrl: './details-business-listing.component.scss',
+  styleUrl: '../details.scss',
 })
 export class DetailsBusinessListingComponent {
   // listings: Array<BusinessListing>;
@@ -70,7 +70,7 @@ export class DetailsBusinessListingComponent {
       }
     });
     this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl };
-    this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandler);
+    this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandler.bind('business'));
   }
 
   async ngOnInit() {

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.scss

@@ -1,53 +0,0 @@
-::ng-deep p {
-  display: block;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-left: 0;
-  margin-right: 0;
-  font-size: 1rem; /* oder 1rem, abhängig vom Browser und den Standardeinstellungen */
-  line-height: 1.5;
-}
-::ng-deep h1 {
-  display: block;
-  font-size: 2em; /* etwa 32px */
-  margin-top: 0.67em;
-  margin-bottom: 0.67em;
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: bold;
-}
-::ng-deep h2 {
-  display: block;
-  font-size: 1.5em; /* etwa 24px */
-  margin-top: 0.83em;
-  margin-bottom: 0.83em;
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: bold;
-}
-::ng-deep h3 {
-  display: block;
-  font-size: 1.17em; /* etwa 18.72px */
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: bold;
-}
-::ng-deep ul {
-  display: block;
-  list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-left: 0;
-  margin-right: 0;
-  padding-left: 40px; /* Standard-Einrückung für Listen */
-}
-::ng-deep li {
-  display: list-item; /* Zeigt das Element als Listenelement an */
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-left: 0;
-}

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.ts

@@ -3,7 +3,6 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { KeycloakService } from 'keycloak-angular';
-import onChange from 'on-change';
 import { lastValueFrom } from 'rxjs';
 import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { CommercialPropertyListingCriteria, ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
@@ -15,7 +14,7 @@ import { MailService } from '../../../services/mail.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
-import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../../../utils/utils';
+import { map2User } from '../../../utils/utils';
 
 @Component({
   selector: 'app-details-commercial-property-listing',
@@ -23,7 +22,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../.
   imports: [SharedModule],
   providers: [],
   templateUrl: './details-commercial-property-listing.component.html',
-  styleUrl: './details-commercial-property-listing.component.scss',
+  styleUrl: '../details.scss',
 })
 export class DetailsCommercialPropertyListingComponent {
   responsiveOptions = [
@@ -73,7 +72,7 @@ export class DetailsCommercialPropertyListingComponent {
   ) {
     this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl };
 
-    this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandler);
+    // this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandler);
   }
 
   async ngOnInit() {

bizmatch/src/app/pages/details/details-user/details-user.component.scss

@@ -1,53 +0,0 @@
-::ng-deep p {
-  display: block;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-left: 0;
-  margin-right: 0;
-  font-size: 1rem; /* oder 1rem, abhängig vom Browser und den Standardeinstellungen */
-  line-height: 1.5;
-}
-::ng-deep h1 {
-  display: block;
-  font-size: 2em; /* etwa 32px */
-  margin-top: 0.67em;
-  margin-bottom: 0.67em;
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: bold;
-}
-::ng-deep h2 {
-  display: block;
-  font-size: 1.5em; /* etwa 24px */
-  margin-top: 0.83em;
-  margin-bottom: 0.83em;
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: bold;
-}
-::ng-deep h3 {
-  display: block;
-  font-size: 1.17em; /* etwa 18.72px */
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: bold;
-}
-::ng-deep ul {
-  display: block;
-  list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-left: 0;
-  margin-right: 0;
-  padding-left: 40px; /* Standard-Einrückung für Listen */
-}
-::ng-deep li {
-  display: list-item; /* Zeigt das Element als Listenelement an */
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-left: 0;
-}

bizmatch/src/app/pages/details/details-user/details-user.component.ts

@@ -19,7 +19,7 @@ import { formatPhoneNumber, map2User } from '../../../utils/utils';
   standalone: true,
   imports: [SharedModule],
   templateUrl: './details-user.component.html',
-  styleUrl: './details-user.component.scss',
+  styleUrl: '../details.scss',
 })
 export class DetailsUserComponent {
   private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;

bizmatch/src/app/pages/details/details.scss

@@ -1,4 +1,4 @@
-::ng-deep p {
+:host ::ng-deep p {
   display: block;
   margin-top: 1em;
   margin-bottom: 1em;
@@ -7,7 +7,7 @@
   font-size: 1rem; /* oder 1rem, abhängig vom Browser und den Standardeinstellungen */
   line-height: 1.5;
 }
-::ng-deep h1 {
+:host ::ng-deep h1 {
   display: block;
   font-size: 2em; /* etwa 32px */
   margin-top: 0.67em;
@@ -16,7 +16,7 @@
   margin-right: 0;
   font-weight: bold;
 }
-::ng-deep h2 {
+:host ::ng-deep h2 {
   display: block;
   font-size: 1.5em; /* etwa 24px */
   margin-top: 0.83em;
@@ -25,7 +25,7 @@
   margin-right: 0;
   font-weight: bold;
 }
-::ng-deep h3 {
+:host ::ng-deep h3 {
   display: block;
   font-size: 1.17em; /* etwa 18.72px */
   margin-top: 1em;
@@ -34,7 +34,7 @@
   margin-right: 0;
   font-weight: bold;
 }
-::ng-deep ul {
+:host ::ng-deep ul {
   display: block;
   list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
   margin-top: 1em;
@@ -43,7 +43,7 @@
   margin-right: 0;
   padding-left: 40px; /* Standard-Einrückung für Listen */
 }
-::ng-deep li {
+:host ::ng-deep li {
   display: list-item; /* Zeigt das Element als Listenelement an */
   margin-left: 0;
   margin-right: 0;

bizmatch/src/app/pages/home/home.component.ts

@@ -7,7 +7,7 @@ import onChange from 'on-change';
 import { BusinessListingCriteria, CommercialPropertyListingCriteria, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { ListingsService } from '../../services/listings.service';
 import { SelectOptionsService } from '../../services/select-options.service';
-import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../../utils/utils';
+import { getCriteriaStateObject, getSessionStorageHandlerWrapper, map2User } from '../../utils/utils';
 @Component({
   selector: 'app-home',
   standalone: true,
@@ -26,7 +26,7 @@ export class HomeComponent {
   user: KeycloakUser;
   prompt: string;
   public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public keycloakService: KeycloakService, private listingsService: ListingsService) {
-    this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandler);
+    this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandlerWrapper(this.activeTabAction));
   }
   async ngOnInit() {
     const token = await this.keycloakService.getToken();

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

@@ -10,7 +10,7 @@ import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
-import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
+import { getCriteriaStateObject, getSessionStorageHandlerWrapper } from '../../../utils/utils';
 
 @Component({
   selector: 'app-broker-listings',
@@ -49,7 +49,7 @@ export class BrokerListingsComponent {
     private imageService: ImageService,
     private route: ActivatedRoute,
   ) {
-    this.criteria = onChange(getCriteriaStateObject('user'), getSessionStorageHandler);
+    this.criteria = onChange(getCriteriaStateObject('broker'), getSessionStorageHandlerWrapper('broker'));
     this.route.data.subscribe(async () => {
       if (this.router.getCurrentNavigation().extras.state) {
       } else {

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

@@ -9,7 +9,7 @@ import { environment } from '../../../../environments/environment';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
-import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
+import { getCriteriaStateObject, getSessionStorageHandlerWrapper } from '../../../utils/utils';
 
 @Component({
   selector: 'app-business-listings',
@@ -45,7 +45,7 @@ export class BusinessListingsComponent {
     private imageService: ImageService,
     private route: ActivatedRoute,
   ) {
-    this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandler);
+    this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandlerWrapper('business'));
     this.route.data.subscribe(async () => {
       if (this.router.getCurrentNavigation().extras.state) {
       } else {
@@ -59,6 +59,7 @@ export class BusinessListingsComponent {
     //initFlowbite();
   }
   async init() {
+    this.reset();
     const statesResult = await this.listingsService.getAllStates('business');
     this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count }));
     this.search();

bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts

@@ -9,7 +9,7 @@ import { environment } from '../../../../environments/environment';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
-import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
+import { getCriteriaStateObject, getSessionStorageHandlerWrapper } from '../../../utils/utils';
 
 @Component({
   selector: 'app-commercial-property-listings',
@@ -44,7 +44,7 @@ export class CommercialPropertyListingsComponent {
     private imageService: ImageService,
     private route: ActivatedRoute,
   ) {
-    this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandler);
+    this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandlerWrapper('commercialProperty'));
     this.route.data.subscribe(async () => {
       if (this.router.getCurrentNavigation().extras.state) {
       } else {

bizmatch/src/app/pages/subscription/account/account.component.scss

@@ -37,6 +37,6 @@
 quill-editor {
   width: 100%;
 }
-::ng-deep .ng-select.ng-select-single .ng-select-container {
+:host ::ng-deep .ng-select.ng-select-single .ng-select-container {
   height: 42px;
 }

bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.scss

@@ -8,7 +8,7 @@
 //   margin: 0 auto;
 // }
 
-::ng-deep quill-editor {
+:host ::ng-deep quill-editor {
   .ql-container {
     min-height: 200px;
   }

bizmatch/src/app/utils/utils.ts

@@ -164,11 +164,20 @@ export function formatPhoneNumber(phone: string): string {
   }
   return phone;
 }
-export const getSessionStorageHandler = function (path, value, previous, applyData) {
+// export const getSessionStorageHandler = function (path, value, previous, applyData) {
-  sessionStorage.setItem('criteria', JSON.stringify(this));
+//   sessionStorage.setItem(applyData, JSON.stringify(this));
+// };
+export const getSessionStorageHandler = function (criteriaType, path, value, previous, applyData) {
+  sessionStorage.setItem(`${criteriaType}_criteria`, JSON.stringify(this));
+  console.log('Zusätzlicher Parameter:', criteriaType);
+};
+export const getSessionStorageHandlerWrapper = param => {
+  return function (path, value, previous, applyData) {
+    getSessionStorageHandler.call(this, param, path, value, previous, applyData);
+  };
 };
 
-export function getCriteriaStateObject(criteriaType: 'business' | 'commercialProperty' | 'user') {
+export function getCriteriaStateObject(criteriaType: 'business' | 'commercialProperty' | 'broker') {
   let initialState;
   if (criteriaType === 'business') {
     initialState = createEmptyBusinessListingCriteria();
@@ -177,7 +186,7 @@ export function getCriteriaStateObject(criteriaType: 'business' | 'commercialPro
   } else {
     initialState = createEmptyUserListingCriteria();
   }
-  const storedState = sessionStorage.getItem('criteria');
+  const storedState = sessionStorage.getItem(`${criteriaType}_criteria`);
   return storedState ? JSON.parse(storedState) : initialState;
 }