new Landing page, stripped app
This commit is contained in:
@@ -0,0 +1,96 @@
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden relative">
|
||||
<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 print:hidden"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
@if(listing){
|
||||
<div class="p-6 flex flex-col lg:flex-row">
|
||||
<!-- Left column -->
|
||||
<div class="w-full lg:w-1/2 pr-0 lg:pr-6">
|
||||
<h1 class="text-2xl font-bold mb-4">{{ listing.title }}</h1>
|
||||
<p class="mb-4" [innerHTML]="description"></p>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div *ngFor="let detail of listingDetails; let i = index" class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-gray-100': i % 2 === 0 }">
|
||||
<div class="w-full sm:w-1/3 font-semibold p-2">{{ detail.label }}</div>
|
||||
|
||||
<div class="w-full sm:w-2/3 p-2" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value }}</div>
|
||||
|
||||
<div class="w-full sm:w-2/3 p-2 flex space-x-2" [innerHTML]="detail.value" *ngIf="detail.isHtml && !detail.isListingBy"></div>
|
||||
|
||||
<div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy">
|
||||
<a routerLink="/details-user/{{ listingUser.id }}" class="text-blue-600 dark:text-blue-500 hover:underline">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
|
||||
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-4 print:hidden">
|
||||
@if(listing && listingUser && (listingUser?.email===user?.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]="['/editBusinessListing', listing.id]">
|
||||
<i class="fa-regular fa-pen-to-square"></i>
|
||||
<span class="ml-2">Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
} @if(user){
|
||||
<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]="listing.favoritesForUser.includes(user.email)">
|
||||
<i class="fa-regular fa-heart"></i>
|
||||
@if(listing.favoritesForUser.includes(user.email)){
|
||||
<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>
|
||||
<!-- <share-button button="email" showText="true"></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>
|
||||
|
||||
<share-button button="facebook" showText="true" (click)="createEvent('facebook')"></share-button>
|
||||
<share-button button="x" showText="true" (click)="createEvent('x')"></share-button>
|
||||
<share-button button="linkedin" showText="true" (click)="createEvent('linkedin')"></share-button>
|
||||
</div>
|
||||
<!-- Karte hinzufügen, wenn Straße vorhanden ist -->
|
||||
<!-- <div *ngIf="listing.location.street" class="mt-6">
|
||||
<h2 class="text-lg font-semibold mb-2">Location Map</h2>
|
||||
<div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- Right column -->
|
||||
<div class="w-full lg:w-1/2 mt-6 lg:mt-0 print:hidden">
|
||||
<!-- <h2 class="text-lg font-semibold my-4">Contact the Author of this Listing</h2> -->
|
||||
<div class="md:mt-8 mb-4 text-2xl font-bold mb-4">Contact the Author of this Listing</div>
|
||||
<p class="text-sm mb-4">Please include your contact info below</p>
|
||||
<form class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
|
||||
<app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email" kind="email"></app-validated-input>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber" mask="(000) 000-0000"></app-validated-input>
|
||||
<!-- <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input> -->
|
||||
<app-validated-ng-select label="State" name="state" [(ngModel)]="mailinfo.sender.state" [items]="selectOptions?.states"></app-validated-ng-select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
|
||||
</div>
|
||||
<button (click)="mail()" class="w-full sm:w-auto px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,212 @@
|
||||
import { ChangeDetectorRef, Component } from '@angular/core';
|
||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/router';
|
||||
import { ShareButton } from 'ngx-sharebuttons/button';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
|
||||
// Import für Leaflet
|
||||
// Benannte Importe für Leaflet
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
import dayjs from 'dayjs';
|
||||
import { BusinessListing, EventTypeEnum, ShareByEMail, User } from '../../../../../bizmatch-server/src/models/db.model';
|
||||
import { KeycloakUser, MailInfo } from '../../../../../bizmatch-server/src/models/main.model';
|
||||
import { environment } from '../../../environments/environment';
|
||||
import { EMailService } from '../../components/email/email.service';
|
||||
import { ValidatedInputComponent } from '../../components/validated-input/validated-input.component';
|
||||
import { ValidatedNgSelectComponent } from '../../components/validated-ng-select/validated-ng-select.component';
|
||||
import { ValidatedTextareaComponent } from '../../components/validated-textarea/validated-textarea.component';
|
||||
import { ValidationMessagesService } from '../../components/validation-messages.service';
|
||||
import { AuditService } from '../../services/audit.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { GeoService } from '../../services/geo.service';
|
||||
import { HistoryService } from '../../services/history.service';
|
||||
import { ListingsService } from '../../services/listings.service';
|
||||
import { MailService } from '../../services/mail.service';
|
||||
import { MessageService } from '../../services/message.service';
|
||||
import { SelectOptionsService } from '../../services/select-options.service';
|
||||
import { UserService } from '../../services/user.service';
|
||||
import { createMailInfo, map2User } from '../../utils/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'app-details-business-listing',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, RouterModule, FontAwesomeModule, ValidatedInputComponent, ValidatedTextareaComponent, ShareButton, ValidatedNgSelectComponent],
|
||||
providers: [],
|
||||
templateUrl: './details-business-listing.component.html',
|
||||
})
|
||||
export class DetailsBusinessListingComponent {
|
||||
// listings: Array<BusinessListing>;
|
||||
responsiveOptions = [
|
||||
{
|
||||
breakpoint: '1199px',
|
||||
numVisible: 1,
|
||||
numScroll: 1,
|
||||
},
|
||||
{
|
||||
breakpoint: '991px',
|
||||
numVisible: 2,
|
||||
numScroll: 1,
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
numVisible: 1,
|
||||
numScroll: 1,
|
||||
},
|
||||
];
|
||||
private id: string | undefined;
|
||||
listing: BusinessListing;
|
||||
mailinfo: MailInfo;
|
||||
environment = environment;
|
||||
keycloakUser: KeycloakUser;
|
||||
user: User;
|
||||
listingUser: User;
|
||||
description: SafeHtml;
|
||||
private history: string[] = [];
|
||||
ts = new Date().getTime();
|
||||
env = environment;
|
||||
|
||||
constructor(
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private listingsService: ListingsService,
|
||||
private router: Router,
|
||||
private userService: UserService,
|
||||
public selectOptions: SelectOptionsService,
|
||||
private mailService: MailService,
|
||||
private sanitizer: DomSanitizer,
|
||||
public historyService: HistoryService,
|
||||
private validationMessagesService: ValidationMessagesService,
|
||||
private messageService: MessageService,
|
||||
private auditService: AuditService,
|
||||
public emailService: EMailService,
|
||||
private geoService: GeoService,
|
||||
public authService: AuthService,
|
||||
private cdref: ChangeDetectorRef,
|
||||
) {
|
||||
this.router.events.subscribe(event => {
|
||||
if (event instanceof NavigationEnd) {
|
||||
this.history.push(event.urlAfterRedirects);
|
||||
}
|
||||
});
|
||||
this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl };
|
||||
this.id = this.activatedRoute.snapshot.params['id'] as string | undefined;
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
const token = await this.authService.getToken();
|
||||
this.keycloakUser = map2User(token);
|
||||
if (this.keycloakUser) {
|
||||
this.user = await this.userService.getByMail(this.keycloakUser.email);
|
||||
this.mailinfo = createMailInfo(this.user);
|
||||
}
|
||||
try {
|
||||
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id));
|
||||
this.auditService.createEvent(this.listing.id, 'view', this.user?.email);
|
||||
this.listingUser = await this.userService.getByMail(this.listing.email);
|
||||
this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
|
||||
} catch (error) {
|
||||
this.auditService.log({ severity: 'error', text: error.error.message });
|
||||
this.router.navigate(['notfound']);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
|
||||
}
|
||||
|
||||
async mail() {
|
||||
try {
|
||||
this.mailinfo.email = this.listingUser.email;
|
||||
this.mailinfo.listing = this.listing;
|
||||
await this.mailService.mail(this.mailinfo);
|
||||
this.validationMessagesService.clearMessages();
|
||||
this.auditService.createEvent(this.listing.id, 'contact', this.user?.email, this.mailinfo.sender);
|
||||
this.messageService.addMessage({ severity: 'success', text: 'Your message has been sent to the creator of the listing', duration: 3000 });
|
||||
this.mailinfo = createMailInfo(this.user);
|
||||
} catch (error) {
|
||||
this.messageService.addMessage({
|
||||
severity: 'danger',
|
||||
text: 'An error occurred while sending the request - Please check your inputs',
|
||||
duration: 5000,
|
||||
});
|
||||
if (error.error && Array.isArray(error.error?.message)) {
|
||||
this.validationMessagesService.updateMessages(error.error.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
get listingDetails() {
|
||||
let typeOfRealEstate = '';
|
||||
if (this.listing.realEstateIncluded) {
|
||||
typeOfRealEstate = 'Real Estate Included';
|
||||
} else if (this.listing.leasedLocation) {
|
||||
typeOfRealEstate = 'Leased Location';
|
||||
} else if (this.listing.franchiseResale) {
|
||||
typeOfRealEstate = 'Franchise Re-Sale';
|
||||
}
|
||||
const result = [
|
||||
{ label: 'Category', value: this.selectOptions.getBusiness(this.listing.type) },
|
||||
{ label: 'Located in', value: `${this.listing.location.name ? this.listing.location.name : this.listing.location.county}, ${this.selectOptions.getState(this.listing.location.state)}` },
|
||||
{ label: 'Asking Price', value: `${this.listing.price ? `$${this.listing.price.toLocaleString()}` : ''}` },
|
||||
{ label: 'Sales revenue', value: `${this.listing.salesRevenue ? `$${this.listing.salesRevenue.toLocaleString()}` : ''}` },
|
||||
{ label: 'Cash flow', value: `${this.listing.cashFlow ? `$${this.listing.cashFlow.toLocaleString()}` : ''}` },
|
||||
{ label: 'Type of Real Estate', value: typeOfRealEstate },
|
||||
{ label: 'Employees', value: this.listing.employees },
|
||||
{ label: 'Established since', value: this.listing.established },
|
||||
{ label: 'Support & Training', value: this.listing.supportAndTraining },
|
||||
{ label: 'Reason for Sale', value: this.listing.reasonForSale },
|
||||
{ label: 'Broker licensing', value: this.listing.brokerLicencing },
|
||||
{ label: 'Listed since', value: `${this.dateInserted()} - ${this.getDaysListed()} days` },
|
||||
{
|
||||
label: 'Listing by',
|
||||
value: null, // Wird nicht verwendet
|
||||
isHtml: true,
|
||||
isListingBy: true, // Flag für den speziellen Fall
|
||||
user: this.listingUser, // Übergebe das User-Objekt
|
||||
imagePath: this.listing.imageName,
|
||||
imageBaseUrl: this.env.imageBaseUrl,
|
||||
ts: this.ts,
|
||||
},
|
||||
];
|
||||
if (this.listing.draft) {
|
||||
result.push({ label: 'Draft', value: this.listing.draft ? 'Yes' : 'No' });
|
||||
}
|
||||
return result;
|
||||
}
|
||||
save() {
|
||||
this.listing.favoritesForUser.push(this.user.email);
|
||||
this.listingsService.save(this.listing);
|
||||
this.auditService.createEvent(this.listing.id, 'favorite', this.user?.email);
|
||||
}
|
||||
isAlreadyFavorite() {
|
||||
return this.listing.favoritesForUser.includes(this.user.email);
|
||||
}
|
||||
async showShareByEMail() {
|
||||
const result = await this.emailService.showShareByEMail({
|
||||
yourEmail: this.user ? this.user.email : null,
|
||||
yourName: this.user ? `${this.user.firstname} ${this.user.lastname}` : null,
|
||||
url: environment.mailinfoUrl,
|
||||
listingTitle: this.listing.title,
|
||||
id: this.listing.id,
|
||||
type: 'business',
|
||||
});
|
||||
if (result) {
|
||||
this.auditService.createEvent(this.listing.id, 'email', this.user?.email, <ShareByEMail>result);
|
||||
this.messageService.addMessage({
|
||||
severity: 'success',
|
||||
text: 'Your Email has beend sent',
|
||||
duration: 5000,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
createEvent(eventType: EventTypeEnum) {
|
||||
this.auditService.createEvent(this.listing.id, eventType, this.user?.email);
|
||||
}
|
||||
getDaysListed() {
|
||||
return dayjs().diff(this.listing.created, 'day');
|
||||
}
|
||||
dateInserted() {
|
||||
return dayjs(this.listing.created).format('DD/MM/YYYY');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user