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

Favorites #19, Social Media Start #53

Browse Source
This commit is contained in:
Andreas Knuth
2024-08-29 17:13:24 +02:00
parent ede8b66d83
commit 630c31cfc9
19 changed files with 346 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
View File

@@ -2,7 +2,7 @@
<div class="bg-white rounded-lg shadow-lg 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"
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>
@@ -23,78 +23,64 @@
}
</div>
</div>
@if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
<div class="py-4 print:hidden">
@if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
<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-solid fa-floppy-disk"></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-solid fa-floppy-disk"></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"></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">
<i class="fa-solid fa-envelope"></i>
<span class="ml-2">Email</span>
</button>
</div>
<share-button button="facebook" showText="true"></share-button>
<share-button button="x" showText="true"></share-button>
<share-button button="linkedin" showText="true"></share-button>
</div>
<!-- @if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
<button
[routerLink]="['/editBusinessListing', listing.id]"
class="w-full sm:w-auto px-4 py-2 mt-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"
>
Edit
</button>
}
} -->
</div>
<!-- Right column -->
<div class="w-full lg:w-1/2 mt-6 lg:mt-0">
<div class="w-full lg:w-1/2 mt-6 lg:mt-0 print:hidden">
<h3 class="text-lg font-semibold mb-4">Contact the Author of this Listing</h3>
<p class="text-sm mb-4">Please include your contact info below</p>
<form class="space-y-4">
<!-- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<div class="w-full sm:w-1/2">
<label for="name" class="block text-sm font-medium text-gray-700">Your Name</label>
<input type="text" id="name" name="name" [(ngModel)]="mailinfo.sender.name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
</div>
<div class="w-full sm:w-1/2">
<label for="email" class="block text-sm font-medium text-gray-700">Your Email</label>
<input
type="email"
id="email"
name="email"
[(ngModel)]="mailinfo.sender.email"
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
</div> -->
<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="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<div class="w-full sm:w-1/2">
<label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
<input
type="tel"
id="phone"
name="phone"
[(ngModel)]="mailinfo.sender.phoneNumber"
placeholder="(123) 456-7890"
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
<div class="w-full sm:w-1/2">
<label for="country" class="block text-sm font-medium text-gray-700">Country/State</label>
<input
type="text"
id="country"
name="country"
[(ngModel)]="mailinfo.sender.state"
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
</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" kind="tel"></app-validated-input>
<app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input>
</div>
<!-- <div>
<label for="comments" class="block text-sm font-medium text-gray-700">Questions/Comments</label>
<textarea
id="comments"
name="comments"
rows="4"
[(ngModel)]="mailinfo.sender.comments"
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
></textarea>
</div> -->
<div>
<app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
</div>
@@ -116,123 +102,3 @@
}
</div>
</div>
<!-- <div class="surface-ground h-full">
<div class="px-6 py-5">
<div class="surface-card p-4 shadow-2 border-round">
<div class="flex justify-content-between align-items-center align-content-center">
<div class="font-medium text-3xl text-900 mb-3">{{ listing?.title }}</div>
@if(historyService.canGoBack){
<p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="historyService.goBack()"></p-button>
}
</div>
@if(listing){
<div class="grid">
<div class="col-12 md:col-6">
<ul class="list-none p-0 m-0 border-top-1 border-300">
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-3 font-medium flex">Description</div>
<div class="text-900 w-full md:w-9 line-height-3 flex flex-column" [innerHTML]="description"></div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-3 font-medium">Category</div>
<div class="text-900 w-full md:w-9">
<p-chip [label]="selectOptions.getBusiness(listing.type)"></p-chip>
</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-3 font-medium">Located in</div>
<div class="text-900 w-full md:w-9">{{ listing.city }}, {{ selectOptions.getState(listing.state) }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-3 font-medium">Asking Price</div>
<div class="text-900 w-full md:w-9">{{ listing.price | currency }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-3 font-medium">Sales revenue</div>
<div class="text-900 w-full md:w-9">{{ listing.salesRevenue | currency }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-3 font-medium">Cash flow</div>
<div class="text-900 w-full md:w-9">{{ listing.cashFlow | currency }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-3 font-medium">Type of Real Estate</div>
<div class="text-900 w-full md:w-9">
@if (listing.realEstateIncluded){
<p-chip label="Real Estate Included"></p-chip>
} @if (listing.leasedLocation){
<p-chip label="Leased Location"></p-chip>
} @if (listing.franchiseResale){
<p-chip label="Franchise Re-Sale"></p-chip>
}
</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-3 font-medium">Employees</div>
<div class="text-900 w-full md:w-9">{{ listing.employees }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-3 font-medium">Established since</div>
<div class="text-900 w-full md:w-9">{{ listing.established }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-3 font-medium">Support & Training</div>
<div class="text-900 w-full md:w-9">{{ listing.supportAndTraining }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-3 font-medium">Reason for Sale</div>
<div class="text-900 w-full md:w-9">{{ listing.reasonForSale }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-3 font-medium">Broker licensing</div>
<div class="text-900 w-full md:w-9">{{ listing.brokerLicencing }}</div>
</li>
</ul>
@if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/editBusinessListing', listing.id]"></button>
}
</div>
<div class="col-12 md:col-6">
<div class="surface-card p-4 border-round p-fluid">
<div class="font-medium text-xl text-primary text-900 mb-3">Contact the Author of this Listing</div>
<div class="font-italic text-sm text-900 mb-5">Please include your contact info below</div>
<div class="grid formgrid p-fluid">
<div class="field mb-4 col-12 md:col-6">
<label for="name" class="font-medium text-900">Your Name</label>
<input id="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name" />
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="email" class="font-medium text-900">Your Email</label>
<input id="email" type="text" pInputText [(ngModel)]="mailinfo.sender.email" />
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="phoneNumber" class="font-medium text-900">Phone Number</label>
<p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="mailinfo.sender.phoneNumber"></p-inputMask>
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="state" class="font-medium text-900">Country/State</label>
<input id="state" type="text" pInputText [(ngModel)]="mailinfo.sender.state" />
</div>
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
<div class="field mb-4 col-12">
<label for="notes" class="font-medium text-900">Questions/Comments</label>
<textarea id="notes" pInputTextarea [autoResize]="true" [rows]="5" [(ngModel)]="mailinfo.sender.comments"></textarea>
</div>
@if(listingUser){
<div class="surface-border mb-4 col-12 flex align-items-center">
Listing by &nbsp;<a routerLink="/details-user/{{ listingUser.id }}" class="mr-2 font-semibold">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
@if(listingUser.hasCompanyLogo){
<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>
<button pButton pRipple label="Submit" icon="pi pi-file" class="w-auto" (click)="mail()"></button>
</div>
</div>
</div>
}
</div>
</div>
</div> -->