212 lines
9.2 KiB
HTML
212 lines
9.2 KiB
HTML
<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 -->
|
|
<div class="flex items-center justify-between p-4 border-b relative">
|
|
<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 ngSrc="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-20 h-20 rounded-full object-cover" width="80" height="80" priority alt="Profile picture of {{ user.firstname }} {{ user.lastname }}" />
|
|
} @else {
|
|
<img ngSrc="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" width="80" height="80" priority alt="Default profile picture" />
|
|
}
|
|
<div>
|
|
<h1 class="text-2xl font-bold flex items-center">
|
|
{{ user.firstname }} {{ user.lastname }}
|
|
<span class="text-yellow-400 ml-2">★</span>
|
|
</h1>
|
|
<p class="text-neutral-600">
|
|
Company
|
|
<span class="mx-1">-</span>
|
|
{{ user.companyName }}
|
|
<span class="mx-2">|</span>
|
|
For Sale
|
|
<span class="mx-1">-</span>
|
|
<!-- <i class="fas fa-building text-red-500"></i> -->
|
|
<span>{{ businessListings?.length + commercialPropListings?.length }}</span>
|
|
</p>
|
|
</div>
|
|
@if(user.hasCompanyLogo){
|
|
<img ngSrc="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-11 h-14" width="44" height="56" alt="Company logo of {{ user.companyName }}" />
|
|
}
|
|
<!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
|
|
</div>
|
|
<button
|
|
(click)="historyService.goBack()"
|
|
class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
|
|
>
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<p class="p-4 text-neutral-700">{{ user.description }}</p>
|
|
|
|
<!-- Like and Share Action Buttons -->
|
|
<div class="py-4 px-4 print:hidden">
|
|
@if(user && keycloakUser && (user?.email===keycloakUser?.email || (authService.isAdmin() | async))){
|
|
<div class="inline">
|
|
<button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
[routerLink]="['/account', user.id]">
|
|
<i class="fa-regular fa-pen-to-square"></i>
|
|
<span class="ml-2">Edit</span>
|
|
</button>
|
|
</div>
|
|
}
|
|
@if(keycloakUser && keycloakUser.email !== user.email){
|
|
<div class="inline">
|
|
<button class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
(click)="save()" [disabled]="isAlreadyFavorite()">
|
|
<i class="fa-regular fa-heart"></i>
|
|
@if(isAlreadyFavorite()){
|
|
<span class="ml-2">Saved ...</span>
|
|
}@else {
|
|
<span class="ml-2">Save</span>
|
|
}
|
|
</button>
|
|
</div>
|
|
}
|
|
<share-button button="print" showText="true" (click)="createEvent('print')"></share-button>
|
|
|
|
<div class="inline">
|
|
<button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
(click)="showShareByEMail()">
|
|
<i class="fa-solid fa-envelope"></i>
|
|
<span class="ml-2">Email</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="inline">
|
|
<button type="button"
|
|
class="share share-facebook text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
(click)="shareToFacebook()">
|
|
<i class="fab fa-facebook"></i>
|
|
<span class="ml-2">Facebook</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="inline">
|
|
<button type="button"
|
|
class="share share-twitter text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
(click)="shareToTwitter()">
|
|
<i class="fab fa-x-twitter"></i>
|
|
<span class="ml-2">X</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="inline">
|
|
<button type="button"
|
|
class="share share-linkedin text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
(click)="shareToLinkedIn()">
|
|
<i class="fab fa-linkedin"></i>
|
|
<span class="ml-2">LinkedIn</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Company Profile -->
|
|
<div class="p-4">
|
|
<h2 class="text-xl font-semibold mb-4">Company Profile</h2>
|
|
<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-neutral-100">
|
|
<span class="font-semibold w-40 p-2">Name</span>
|
|
<span class="p-2 flex-grow">{{ user.firstname }} {{ user.lastname }}</span>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row sm:items-center">
|
|
<span class="font-semibold w-40 p-2">EMail Address</span>
|
|
<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-neutral-100">
|
|
<span class="font-semibold w-40 p-2">Phone Number</span>
|
|
<span class="p-2 flex-grow">{{ formatPhoneNumber(user.phoneNumber) }}</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row sm:items-center">
|
|
<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-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>
|
|
}
|
|
</div>
|
|
@if(user.customerType==='professional'){
|
|
<!-- Services -->
|
|
<div class="mt-6">
|
|
<h3 class="font-semibold mb-2">Services we offer</h3>
|
|
<p class="text-neutral-700 mb-4" [innerHTML]="offeredServices"></p>
|
|
</div>
|
|
|
|
<!-- Areas Served -->
|
|
<div class="mt-6">
|
|
<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-primary-100 text-primary-800 px-2 py-1 rounded-full text-sm">{{ area.county }}{{ area.county ? '-' : '' }}{{ area.state }}</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Licensed In -->
|
|
<div class="mt-6">
|
|
<h3 class="font-semibold mb-2">Licensed In</h3>
|
|
@for (license of user.licensedIn; track license) {
|
|
<span class="bg-success-100 text-success-800 px-2 py-1 rounded-full text-sm">{{ license.registerNo }}-{{ license.state }}</span>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Business Listings -->
|
|
|
|
<div class="p-4">
|
|
@if(businessListings?.length>0){
|
|
<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]="['/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-neutral-700">{{ listing.title }}</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
<!-- Commercial Property Listings -->
|
|
@if(commercialPropListings?.length>0){
|
|
<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]="['/commercial-property', listing.slug || listing.id]">
|
|
<div class="flex items-center space-x-4">
|
|
@if (listing.imageOrder?.length>0){
|
|
<img ngSrc="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" class="w-12 h-12 object-cover rounded" width="48" height="48" alt="Property image for {{ listing.title }}" />
|
|
} @else {
|
|
<img ngSrc="assets/images/placeholder_properties.jpg" class="w-12 h-12 object-cover rounded" width="48" height="48" alt="Property placeholder image" />
|
|
}
|
|
<div>
|
|
<p class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</p>
|
|
<p class="text-neutral-700">{{ listing.title }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|