feat: SEO improvements and image optimization
- 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
@@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user