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

SEO/AEO, Farb schema, breadcrumbs

Browse Source
This commit is contained in:
Timo Knuth
2025-11-29 23:41:54 +01:00
parent 4fa24c8f3d
commit d2953fd0d9
87 changed files with 5672 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
bizmatch/src/app/pages/details/details-user/details-user.component.html
View File

@@ -1,4 +1,9 @@
<div class="container mx-auto p-4">
<!-- Breadcrumbs -->
<div class="mb-4">
<app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
</div>
@if(user){
<div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
<!-- Header -->
@@ -6,16 +11,16 @@
<div class="flex items-center space-x-4">
<!-- <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" /> -->
@if(user.hasProfile){
<img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-20 h-20 rounded-full object-cover" />
<img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-20 h-20 rounded-full object-cover" width="80" height="80" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" />
<img src="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" width="80" height="80" />
}
<div>
<h1 class="text-2xl font-bold flex items-center">
{{ user.firstname }} {{ user.lastname }}
<span class="text-yellow-400 ml-2">&#9733;</span>
</h1>
<p class="text-gray-600">
<p class="text-neutral-600">
Company
<span class="mx-1">-</span>
{{ user.companyName }}
@@ -27,7 +32,7 @@
</p>
</div>
@if(user.hasCompanyLogo){
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-11 h-14" />
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-11 h-14" width="44" height="56" />
}
<!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
</div>
@@ -40,16 +45,16 @@
</div>
<!-- Description -->
<p class="p-4 text-gray-700">{{ user.description }}</p>
<p class="p-4 text-neutral-700">{{ user.description }}</p>
<!-- Company Profile -->
<div class="p-4">
<h2 class="text-xl font-semibold mb-4">Company Profile</h2>
<p class="text-gray-700 mb-4" [innerHTML]="companyOverview"></p>
<p class="text-neutral-700 mb-4" [innerHTML]="companyOverview"></p>
<!-- Profile Details -->
<div class="space-y-2">
<div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
<div class="flex flex-col sm:flex-row sm:items-center bg-neutral-100">
<span class="font-semibold w-40 p-2">Name</span>
<span class="p-2 flex-grow">{{ user.firstname }} {{ user.lastname }}</span>
</div>
@@ -58,7 +63,7 @@
<span class="p-2 flex-grow">{{ user.email }}</span>
</div>
@if(user.customerType==='professional'){
<div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
<div class="flex flex-col sm:flex-row sm:items-center bg-neutral-100">
<span class="font-semibold w-40 p-2">Phone Number</span>
<span class="p-2 flex-grow">{{ formatPhoneNumber(user.phoneNumber) }}</span>
</div>
@@ -67,7 +72,7 @@
<span class="font-semibold w-40 p-2">Company Location</span>
<span class="p-2 flex-grow">{{ user.location?.name }} - {{ user.location?.state }}</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
<div class="flex flex-col sm:flex-row sm:items-center bg-neutral-100">
<span class="font-semibold w-40 p-2">Professional Type</span>
<span class="p-2 flex-grow">{{ selectOptions.getCustomerSubType(user.customerSubType) }}</span>
</div>
@@ -77,7 +82,7 @@
<!-- Services -->
<div class="mt-6">
<h3 class="font-semibold mb-2">Services we offer</h3>
<p class="text-gray-700 mb-4" [innerHTML]="offeredServices"></p>
<p class="text-neutral-700 mb-4" [innerHTML]="offeredServices"></p>
</div>
<!-- Areas Served -->
@@ -85,7 +90,7 @@
<h3 class="font-semibold mb-2">Areas (Counties) we serve</h3>
<div class="flex flex-wrap gap-2">
@for (area of user.areasServed; track area) {
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">{{ area.county }}{{ area.county ? '-' : '' }}{{ area.state }}</span>
<span class="bg-primary-100 text-primary-800 px-2 py-1 rounded-full text-sm">{{ area.county }}{{ area.county ? '-' : '' }}{{ area.state }}</span>
}
</div>
</div>
@@ -94,7 +99,7 @@
<div class="mt-6">
<h3 class="font-semibold mb-2">Licensed In</h3>
@for (license of user.licensedIn; track license) {
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">{{ license.registerNo }}-{{ license.state }}</span>
<span class="bg-success-100 text-success-800 px-2 py-1 rounded-full text-sm">{{ license.registerNo }}-{{ license.state }}</span>
}
</div>
}
@@ -107,12 +112,12 @@
<h2 class="text-xl font-semibold mb-4">My Business Listings For Sale</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@for (listing of businessListings; track listing) {
<div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/details-business-listing', listing.id]">
<div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/business', listing.slug || listing.id]">
<div class="flex items-center mb-2">
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2"></i>
<span class="font-medium">{{ selectOptions.getBusiness(listing.type) }}</span>
</div>
<p class="text-gray-700">{{ listing.title }}</p>
<p class="text-neutral-700">{{ listing.title }}</p>
</div>
}
</div>
@@ -122,7 +127,7 @@
<h2 class="text-xl font-semibold mb-4">My Commercial Property Listings For Sale</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@for (listing of commercialPropListings; track listing) {
<div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/details-commercial-property-listing', listing.id]">
<div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/commercial-property', listing.slug || listing.id]">
<div class="flex items-center space-x-4">
@if (listing.imageOrder?.length>0){
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" class="w-12 h-12 object-cover rounded" />
@@ -131,14 +136,14 @@
}
<div>
<p class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</p>
<p class="text-gray-700">{{ listing.title }}</p>
<p class="text-neutral-700">{{ listing.title }}</p>
</div>
</div>
</div>
}
</div>
} @if( user?.email===keycloakUser?.email || (authService.isAdmin() | async)){
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" [routerLink]="['/account', user.id]">Edit</button>
<button class="mt-4 bg-primary-500 text-white px-4 py-2 rounded hover:bg-primary-600" [routerLink]="['/account', user.id]">Edit</button>
}
</div>
</div>

8
bizmatch/src/app/pages/details/details-user/details-user.component.ts
View File

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { KeycloakUser, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
import { AuthService } from '../../../services/auth.service';
import { HistoryService } from '../../../services/history.service';
import { ImageService } from '../../../services/image.service';
@@ -17,13 +18,18 @@ import { formatPhoneNumber, map2User } from '../../../utils/utils';
@Component({
selector: 'app-details-user',
standalone: true,
imports: [SharedModule],
imports: [SharedModule, BreadcrumbsComponent],
templateUrl: './details-user.component.html',
styleUrl: '../details.scss',
})
export class DetailsUserComponent {
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user: User;
breadcrumbs: BreadcrumbItem[] = [
{ label: 'Home', url: '/home', icon: 'fas fa-home' },
{ label: 'Professionals', url: '/brokerListings' },
{ label: 'Profile' }
];
user$: Observable<KeycloakUser>;
keycloakUser: KeycloakUser;
environment = environment;