aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

feat: SEO improvements and image optimization

Browse Source 
- Enhanced SEO service with meta tags and structured data
- Updated sitemap service and robots.txt
- Optimized listing components for better SEO
- Compressed images (saved ~31MB total)
- Added .gitattributes to enforce LF line endings

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Timo Knuth
2026-02-03 19:48:30 +01:00
parent 0bbfc3f4fb
commit bf735ed60f
22 changed files with 4001 additions and 3923 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
View File

@@ -1,159 +1,162 @@
<div class="flex flex-col md:flex-row">
<!-- Filter Panel for Desktop -->
<div class="hidden md:block w-full md:w-1/4 h-full bg-white shadow-lg p-6 overflow-y-auto z-10">
<app-search-modal-broker [isModal]="false"></app-search-modal-broker>
</div>
<!-- Main Content -->
<div class="w-full p-4">
<div class="container mx-auto">
<!-- Breadcrumbs -->
<div class="mb-4">
<app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
</div>
<!-- SEO-optimized heading -->
<div class="mb-6">
<h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2">Professional Business Brokers & Advisors</h1>
<p class="text-lg text-neutral-600">Connect with licensed business brokers, CPAs, attorneys, and other
professionals across the United States.</p>
</div>
<!-- Mobile Filter Button -->
<div class="md:hidden mb-4">
<button (click)="openFilterModal()"
class="w-full bg-primary-600 text-white py-3 px-4 rounded-lg flex items-center justify-center">
<i class="fas fa-filter mr-2"></i>
Filter Results
</button>
</div>
@if(users?.length>0){
<h2 class="text-2xl font-semibold text-neutral-800 mb-4">Professional Listings</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Professional Cards -->
@for (user of users; track user) {
<div
class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6 flex flex-col justify-between hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] group relative">
<!-- Quick Actions Overlay -->
<div
class="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-20">
@if(currentUser) {
<button type="button" class="bg-white rounded-full p-2 shadow-lg transition-colors"
[class.bg-red-50]="isFavorite(user)"
[title]="isFavorite(user) ? 'Remove from favorites' : 'Save to favorites'"
(click)="toggleFavorite($event, user)">
<i
[class]="isFavorite(user) ? 'fas fa-heart text-red-500' : 'far fa-heart text-red-500 hover:scale-110 transition-transform'"></i>
</button>
}
<button type="button" class="bg-white rounded-full p-2 shadow-lg hover:bg-blue-50 transition-colors"
title="Share professional" (click)="shareProfessional($event, user)">
<i class="fas fa-share-alt text-blue-500 hover:scale-110 transition-transform"></i>
</button>
</div>
<div class="flex items-start space-x-4">
@if(user.hasProfile){
<img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}"
[alt]="altText.generateBrokerProfileAlt(user)" class="rounded-md w-20 h-26 object-cover" width="80"
height="104" />
} @else {
<img src="/assets/images/person_placeholder.jpg" alt="Default business broker placeholder profile photo"
class="rounded-md w-20 h-26 object-cover" width="80" height="104" />
}
<div class="flex-1">
<p class="text-sm text-neutral-800 mb-2">{{ user.description }}</p>
<h3 class="text-lg font-semibold">
{{ user.firstname }} {{ user.lastname }}<span
class="bg-neutral-200 text-neutral-700 text-xs font-semibold px-2 py-1 rounded ml-4">{{
user.location?.name }} - {{ user.location?.state }}</span>
</h3>
<div class="flex items-center space-x-2 mt-2">
<app-customer-sub-type [customerSubType]="user.customerSubType"></app-customer-sub-type>
<p class="text-sm text-neutral-600">{{ user.companyName }}</p>
</div>
<div class="flex items-center justify-between my-2"></div>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
@if(user.hasCompanyLogo){
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}"
[alt]="altText.generateCompanyLogoAlt(user.companyName, user.firstname + ' ' + user.lastname)"
class="w-8 h-10 object-contain" width="32" height="40" />
} @else {
<img src="/assets/images/placeholder.png" alt="Default company logo placeholder"
class="w-8 h-10 object-contain" width="32" height="40" />
}
<button
class="bg-success-500 hover:bg-success-600 text-white font-medium py-2 px-4 rounded-full flex items-center"
[routerLink]="['/details-user', user.id]">
View Full profile
<i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
}
</div>
} @else if (users?.length===0){
<!-- Empty State -->
<div class="w-full flex items-center flex-wrap justify-center gap-10 py-12">
<div class="grid gap-4 w-60">
<svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="154" height="161" viewBox="0 0 154 161"
fill="none">
<path
d="M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z"
fill="#EEF2FF" />
<path
d="M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z"
fill="white" stroke="#E5E7EB" />
<ellipse cx="80.0618" cy="81" rx="28.0342" ry="28.0342" fill="#EEF2FF" />
<path
d="M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z"
stroke="#E5E7EB" />
<path
d="M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z"
stroke="#E5E7EB" />
<path
d="M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z"
fill="#A5B4FC" stroke="#818CF8" />
<path
d="M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z"
fill="#4F46E5" />
<path
d="M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z"
fill="#4F46E5" />
<path
d="M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z"
fill="#4F46E5" />
<rect x="38.3522" y="21.5128" width="41.0256" height="2.73504" rx="1.36752" fill="#4F46E5" />
<rect x="38.3522" y="133.65" width="54.7009" height="5.47009" rx="2.73504" fill="#A5B4FC" />
<rect x="38.3522" y="29.7179" width="13.6752" height="2.73504" rx="1.36752" fill="#4F46E5" />
<circle cx="56.13" cy="31.0854" r="1.36752" fill="#4F46E5" />
<circle cx="61.6001" cy="31.0854" r="1.36752" fill="#4F46E5" />
<circle cx="67.0702" cy="31.0854" r="1.36752" fill="#4F46E5" />
</svg>
<div>
<h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There're no professionals here
</h2>
<p class="text-center text-black text-base font-normal leading-relaxed pb-4">Try changing your filters to
<br />see professionals
</p>
<div class="flex gap-3">
<button (click)="clearAllFilters()"
class="w-full px-3 py-2 rounded-full border border-neutral-300 text-neutral-900 text-xs font-semibold leading-4">Clear
Filter</button>
</div>
</div>
</div>
</div>
}
<!-- Pagination -->
@if(pageCount>1){
<div class="mt-8">
<app-paginator [page]="page" [pageCount]="pageCount" (pageChange)="onPageChange($event)"></app-paginator>
</div>
}
</div>
</div>
<div class="flex flex-col md:flex-row">
<!-- Filter Panel for Desktop -->
<div class="hidden md:block w-full md:w-1/4 h-full bg-white shadow-lg p-6 overflow-y-auto z-10">
<app-search-modal-broker [isModal]="false"></app-search-modal-broker>
</div>
<!-- Main Content -->
<div class="w-full p-4">
<div class="container mx-auto">
<!-- Breadcrumbs -->
<div class="mb-4">
<app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
</div>
<!-- SEO-optimized heading -->
<div class="mb-6">
<h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2">Professional Business Brokers & Advisors</h1>
<p class="text-lg text-neutral-600">Connect with licensed business brokers, CPAs, attorneys, and other
professionals across the United States.</p>
<div class="mt-4 text-base text-neutral-700 max-w-4xl">
<p>BizMatch connects business buyers and sellers with experienced professionals. Find qualified business brokers to help with your business sale or acquisition. Our platform features verified professionals including business brokers, M&A advisors, CPAs, and attorneys specializing in business transactions across the United States. Whether you're looking to buy or sell a business, our network of professionals can guide you through the process.</p>
</div>
</div>
<!-- Mobile Filter Button -->
<div class="md:hidden mb-4">
<button (click)="openFilterModal()"
class="w-full bg-primary-600 text-white py-3 px-4 rounded-lg flex items-center justify-center">
<i class="fas fa-filter mr-2"></i>
Filter Results
</button>
</div>
@if(users?.length>0){
<h2 class="text-2xl font-semibold text-neutral-800 mb-4">Professional Listings</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Professional Cards -->
@for (user of users; track user) {
<div
class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6 flex flex-col justify-between hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] group relative">
<!-- Quick Actions Overlay -->
<div
class="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-20">
@if(currentUser) {
<button type="button" class="bg-white rounded-full p-2 shadow-lg transition-colors"
[class.bg-red-50]="isFavorite(user)"
[title]="isFavorite(user) ? 'Remove from favorites' : 'Save to favorites'"
(click)="toggleFavorite($event, user)">
<i
[class]="isFavorite(user) ? 'fas fa-heart text-red-500' : 'far fa-heart text-red-500 hover:scale-110 transition-transform'"></i>
</button>
}
<button type="button" class="bg-white rounded-full p-2 shadow-lg hover:bg-blue-50 transition-colors"
title="Share professional" (click)="shareProfessional($event, user)">
<i class="fas fa-share-alt text-blue-500 hover:scale-110 transition-transform"></i>
</button>
</div>
<div class="flex items-start space-x-4">
@if(user.hasProfile){
<img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}"
[alt]="altText.generateBrokerProfileAlt(user)" class="rounded-md w-20 h-26 object-cover" width="80"
height="104" />
} @else {
<img src="/assets/images/person_placeholder.jpg" alt="Default business broker placeholder profile photo"
class="rounded-md w-20 h-26 object-cover" width="80" height="104" />
}
<div class="flex-1">
<p class="text-sm text-neutral-800 mb-2">{{ user.description }}</p>
<h3 class="text-lg font-semibold">
{{ user.firstname }} {{ user.lastname }}<span
class="bg-neutral-200 text-neutral-700 text-xs font-semibold px-2 py-1 rounded ml-4">{{
user.location?.name }} - {{ user.location?.state }}</span>
</h3>
<div class="flex items-center space-x-2 mt-2">
<app-customer-sub-type [customerSubType]="user.customerSubType"></app-customer-sub-type>
<p class="text-sm text-neutral-600">{{ user.companyName }}</p>
</div>
<div class="flex items-center justify-between my-2"></div>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
@if(user.hasCompanyLogo){
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}"
[alt]="altText.generateCompanyLogoAlt(user.companyName, user.firstname + ' ' + user.lastname)"
class="w-8 h-10 object-contain" width="32" height="40" />
} @else {
<img src="/assets/images/placeholder.png" alt="Default company logo placeholder"
class="w-8 h-10 object-contain" width="32" height="40" />
}
<button
class="bg-success-500 hover:bg-success-600 text-white font-medium py-2 px-4 rounded-full flex items-center"
[routerLink]="['/details-user', user.id]">
View Full profile
<i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
}
</div>
} @else if (users?.length===0){
<!-- Empty State -->
<div class="w-full flex items-center flex-wrap justify-center gap-10 py-12">
<div class="grid gap-4 w-60">
<svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="154" height="161" viewBox="0 0 154 161"
fill="none">
<path
d="M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z"
fill="#EEF2FF" />
<path
d="M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z"
fill="white" stroke="#E5E7EB" />
<ellipse cx="80.0618" cy="81" rx="28.0342" ry="28.0342" fill="#EEF2FF" />
<path
d="M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z"
stroke="#E5E7EB" />
<path
d="M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z"
stroke="#E5E7EB" />
<path
d="M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z"
fill="#A5B4FC" stroke="#818CF8" />
<path
d="M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z"
fill="#4F46E5" />
<path
d="M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z"
fill="#4F46E5" />
<path
d="M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z"
fill="#4F46E5" />
<rect x="38.3522" y="21.5128" width="41.0256" height="2.73504" rx="1.36752" fill="#4F46E5" />
<rect x="38.3522" y="133.65" width="54.7009" height="5.47009" rx="2.73504" fill="#A5B4FC" />
<rect x="38.3522" y="29.7179" width="13.6752" height="2.73504" rx="1.36752" fill="#4F46E5" />
<circle cx="56.13" cy="31.0854" r="1.36752" fill="#4F46E5" />
<circle cx="61.6001" cy="31.0854" r="1.36752" fill="#4F46E5" />
<circle cx="67.0702" cy="31.0854" r="1.36752" fill="#4F46E5" />
</svg>
<div>
<h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There're no professionals here
</h2>
<p class="text-center text-black text-base font-normal leading-relaxed pb-4">Try changing your filters to
<br />see professionals
</p>
<div class="flex gap-3">
<button (click)="clearAllFilters()"
class="w-full px-3 py-2 rounded-full border border-neutral-300 text-neutral-900 text-xs font-semibold leading-4">Clear
Filter</button>
</div>
</div>
</div>
</div>
}
<!-- Pagination -->
@if(pageCount>1){
<div class="mt-8">
<app-paginator [page]="page" [pageCount]="pageCount" (pageChange)="onPageChange($event)"></app-paginator>
</div>
}
</div>
</div>
</div>

487
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
View File

@@ -1,243 +1,244 @@
import { CommonModule, NgOptimizedImage } from '@angular/common';
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, KeycloakUser } 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 { AuthService } from '../../../services/auth.service';
import { assignProperties, resetUserListingCriteria, map2User } from '../../../utils/utils';
@UntilDestroy()
@Component({
selector: 'app-broker-listings',
standalone: true,
imports: [CommonModule, FormsModule, RouterModule, PaginatorComponent, CustomerSubTypeComponent, BreadcrumbsComponent, SearchModalBrokerComponent],
templateUrl: './broker-listings.component.html',
styleUrls: ['./broker-listings.component.scss', '../../pages.scss'],
})
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>;
filteredListings: Array<ListingType>;
criteria: UserListingCriteria;
realEstateChecked: boolean;
maxPrice: string;
minPrice: string;
type: string;
statesSet = new Set();
state: string;
first: number = 0;
rows: number = 12;
totalRecords: number = 0;
ts = new Date().getTime();
env = environment;
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
emailToDirName = emailToDirName;
page = 1;
pageCount = 1;
sortBy: SortByOptions = null; // Neu: Separate Property
currentUser: KeycloakUser | null = null; // Current logged-in user
constructor(
public altText: AltTextService,
public selectOptions: SelectOptionsService,
private listingsService: ListingsService,
private userService: UserService,
private activatedRoute: ActivatedRoute,
private router: Router,
private cdRef: ChangeDetectorRef,
private imageService: ImageService,
private route: ActivatedRoute,
private searchService: SearchService,
private modalService: ModalService,
private criteriaChangeService: CriteriaChangeService,
private filterStateService: FilterStateService,
private authService: AuthService,
) {
this.loadSortBy();
}
private loadSortBy() {
const storedSortBy = sessionStorage.getItem('professionalsSortBy');
this.sortBy = storedSortBy && storedSortBy !== 'null' ? (storedSortBy as SortByOptions) : null;
}
async ngOnInit(): Promise<void> {
// Get current logged-in user
const token = await this.authService.getToken();
this.currentUser = map2User(token);
// 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);
this.users = usersReponse.results;
this.totalRecords = usersReponse.totalCount;
this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1;
this.page = this.criteria.page ? this.criteria.page : 1;
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
onPageChange(page: any) {
this.criteria.start = (page - 1) * LISTINGS_PER_PAGE;
this.criteria.length = LISTINGS_PER_PAGE;
this.criteria.page = page;
this.search();
}
reset() { }
// New methods for filter actions
clearAllFilters() {
// Reset criteria to default values
resetUserListingCriteria(this.criteria);
// Reset pagination
this.criteria.page = 1;
this.criteria.start = 0;
this.criteriaChangeService.notifyCriteriaChange();
// Search with cleared filters
this.searchService.search('brokerListings');
}
async openFilterModal() {
// Open the search modal with current criteria
const modalResult = await this.modalService.showModal(this.criteria);
if (modalResult.accepted) {
this.searchService.search('brokerListings');
} else {
this.criteria = assignProperties(this.criteria, modalResult.criteria);
}
}
/**
* Check if professional/user is already in current user's favorites
*/
isFavorite(professional: User): boolean {
if (!this.currentUser?.email || !professional.favoritesForUser) return false;
return professional.favoritesForUser.includes(this.currentUser.email);
}
/**
* Toggle favorite status for a professional
*/
async toggleFavorite(event: Event, professional: User): Promise<void> {
event.stopPropagation();
event.preventDefault();
if (!this.currentUser?.email) {
// User not logged in - redirect to login
this.router.navigate(['/login']);
return;
}
try {
console.log('Toggling favorite for:', professional.email, 'Current user:', this.currentUser.email);
console.log('Before update, favorites:', professional.favoritesForUser);
if (this.isFavorite(professional)) {
// Remove from favorites
await this.listingsService.removeFavorite(professional.id, 'user');
professional.favoritesForUser = professional.favoritesForUser.filter(
email => email !== this.currentUser!.email
);
} else {
// Add to favorites
await this.listingsService.addToFavorites(professional.id, 'user');
if (!professional.favoritesForUser) {
professional.favoritesForUser = [];
}
// Use spread to create new array reference
professional.favoritesForUser = [...professional.favoritesForUser, this.currentUser.email];
}
console.log('After update, favorites:', professional.favoritesForUser);
this.cdRef.markForCheck();
this.cdRef.detectChanges();
} catch (error) {
console.error('Error toggling favorite:', error);
}
}
/**
* Share professional profile
*/
async shareProfessional(event: Event, user: User): Promise<void> {
event.stopPropagation();
event.preventDefault();
const url = `${window.location.origin}/details-user/${user.id}`;
const title = `${user.firstname} ${user.lastname} - ${user.companyName}`;
// Try native share API first (works on mobile and some desktop browsers)
if (navigator.share) {
try {
await navigator.share({
title: title,
text: `Check out this professional: ${title}`,
url: url,
});
} catch (err) {
// User cancelled or share failed - fall back to clipboard
this.copyToClipboard(url);
}
} else {
// Fallback: open Facebook share dialog
const encodedUrl = encodeURIComponent(url);
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`, '_blank', 'width=600,height=400');
}
}
/**
* Copy URL to clipboard and show feedback
*/
private copyToClipboard(url: string): void {
navigator.clipboard.writeText(url).then(() => {
console.log('Link copied to clipboard!');
}).catch(err => {
console.error('Failed to copy link:', err);
});
}
}
import { CommonModule, NgOptimizedImage } from '@angular/common';
import { ChangeDetectionStrategy, 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, KeycloakUser } 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 { AuthService } from '../../../services/auth.service';
import { assignProperties, resetUserListingCriteria, map2User } from '../../../utils/utils';
@UntilDestroy()
@Component({
selector: 'app-broker-listings',
standalone: true,
imports: [CommonModule, FormsModule, RouterModule, PaginatorComponent, CustomerSubTypeComponent, BreadcrumbsComponent, SearchModalBrokerComponent],
templateUrl: './broker-listings.component.html',
styleUrls: ['./broker-listings.component.scss', '../../pages.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
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>;
filteredListings: Array<ListingType>;
criteria: UserListingCriteria;
realEstateChecked: boolean;
maxPrice: string;
minPrice: string;
type: string;
statesSet = new Set();
state: string;
first: number = 0;
rows: number = 12;
totalRecords: number = 0;
ts = new Date().getTime();
env = environment;
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
emailToDirName = emailToDirName;
page = 1;
pageCount = 1;
sortBy: SortByOptions = null; // Neu: Separate Property
currentUser: KeycloakUser | null = null; // Current logged-in user
constructor(
public altText: AltTextService,
public selectOptions: SelectOptionsService,
private listingsService: ListingsService,
private userService: UserService,
private activatedRoute: ActivatedRoute,
private router: Router,
private cdRef: ChangeDetectorRef,
private imageService: ImageService,
private route: ActivatedRoute,
private searchService: SearchService,
private modalService: ModalService,
private criteriaChangeService: CriteriaChangeService,
private filterStateService: FilterStateService,
private authService: AuthService,
) {
this.loadSortBy();
}
private loadSortBy() {
const storedSortBy = sessionStorage.getItem('professionalsSortBy');
this.sortBy = storedSortBy && storedSortBy !== 'null' ? (storedSortBy as SortByOptions) : null;
}
async ngOnInit(): Promise<void> {
// Get current logged-in user
const token = await this.authService.getToken();
this.currentUser = map2User(token);
// 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);
this.users = usersReponse.results;
this.totalRecords = usersReponse.totalCount;
this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1;
this.page = this.criteria.page ? this.criteria.page : 1;
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
onPageChange(page: any) {
this.criteria.start = (page - 1) * LISTINGS_PER_PAGE;
this.criteria.length = LISTINGS_PER_PAGE;
this.criteria.page = page;
this.search();
}
reset() { }
// New methods for filter actions
clearAllFilters() {
// Reset criteria to default values
resetUserListingCriteria(this.criteria);
// Reset pagination
this.criteria.page = 1;
this.criteria.start = 0;
this.criteriaChangeService.notifyCriteriaChange();
// Search with cleared filters
this.searchService.search('brokerListings');
}
async openFilterModal() {
// Open the search modal with current criteria
const modalResult = await this.modalService.showModal(this.criteria);
if (modalResult.accepted) {
this.searchService.search('brokerListings');
} else {
this.criteria = assignProperties(this.criteria, modalResult.criteria);
}
}
/**
* Check if professional/user is already in current user's favorites
*/
isFavorite(professional: User): boolean {
if (!this.currentUser?.email || !professional.favoritesForUser) return false;
return professional.favoritesForUser.includes(this.currentUser.email);
}
/**
* Toggle favorite status for a professional
*/
async toggleFavorite(event: Event, professional: User): Promise<void> {
event.stopPropagation();
event.preventDefault();
if (!this.currentUser?.email) {
// User not logged in - redirect to login
this.router.navigate(['/login']);
return;
}
try {
console.log('Toggling favorite for:', professional.email, 'Current user:', this.currentUser.email);
console.log('Before update, favorites:', professional.favoritesForUser);
if (this.isFavorite(professional)) {
// Remove from favorites
await this.listingsService.removeFavorite(professional.id, 'user');
professional.favoritesForUser = professional.favoritesForUser.filter(
email => email !== this.currentUser!.email
);
} else {
// Add to favorites
await this.listingsService.addToFavorites(professional.id, 'user');
if (!professional.favoritesForUser) {
professional.favoritesForUser = [];
}
// Use spread to create new array reference
professional.favoritesForUser = [...professional.favoritesForUser, this.currentUser.email];
}
console.log('After update, favorites:', professional.favoritesForUser);
this.cdRef.markForCheck();
this.cdRef.detectChanges();
} catch (error) {
console.error('Error toggling favorite:', error);
}
}
/**
* Share professional profile
*/
async shareProfessional(event: Event, user: User): Promise<void> {
event.stopPropagation();
event.preventDefault();
const url = `${window.location.origin}/details-user/${user.id}`;
const title = `${user.firstname} ${user.lastname} - ${user.companyName}`;
// Try native share API first (works on mobile and some desktop browsers)
if (navigator.share) {
try {
await navigator.share({
title: title,
text: `Check out this professional: ${title}`,
url: url,
});
} catch (err) {
// User cancelled or share failed - fall back to clipboard
this.copyToClipboard(url);
}
} else {
// Fallback: open Facebook share dialog
const encodedUrl = encodeURIComponent(url);
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`, '_blank', 'width=600,height=400');
}
}
/**
* Copy URL to clipboard and show feedback
*/
private copyToClipboard(url: string): void {
navigator.clipboard.writeText(url).then(() => {
console.log('Link copied to clipboard!');
}).catch(err => {
console.error('Failed to copy link:', err);
});
}
}