new Landing page, stripped app
This commit is contained in:
@@ -0,0 +1,394 @@
|
||||
<div
|
||||
*ngIf="modalService.modalVisible$ | async"
|
||||
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center"
|
||||
>
|
||||
<div class="relative w-full max-w-4xl max-h-full">
|
||||
<div class="relative bg-white rounded-lg shadow">
|
||||
<div class="flex items-start justify-between p-4 border-b rounded-t">
|
||||
@if(criteria.criteriaType==='businessListings'){
|
||||
<h3 class="text-xl font-semibold text-gray-900">
|
||||
Business Listing Search
|
||||
</h3>
|
||||
} @else if (criteria.criteriaType==='commercialPropertyListings'){
|
||||
<h3 class="text-xl font-semibold text-gray-900">
|
||||
Property Listing Search
|
||||
</h3>
|
||||
} @else {
|
||||
<h3 class="text-xl font-semibold text-gray-900">
|
||||
Professional Listing Search
|
||||
</h3>
|
||||
}
|
||||
<button
|
||||
(click)="close()"
|
||||
type="button"
|
||||
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 14 14"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Close Modal</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="flex space-x-4 mb-4">
|
||||
<button
|
||||
class="text-blue-600 font-medium border-b-2 border-blue-600 pb-2"
|
||||
>
|
||||
Classic Search
|
||||
</button>
|
||||
<i
|
||||
data-tooltip-target="tooltip-light"
|
||||
class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-blue-500"
|
||||
(click)="clearFilter()"
|
||||
></i>
|
||||
<div
|
||||
id="tooltip-light"
|
||||
role="tooltip"
|
||||
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 tooltip"
|
||||
>
|
||||
Clear all Filter
|
||||
<div class="tooltip-arrow" data-popper-arrow></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
for="state"
|
||||
class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Location - State</label
|
||||
>
|
||||
<ng-select
|
||||
class="custom"
|
||||
[items]="selectOptions?.states"
|
||||
bindLabel="name"
|
||||
bindValue="value"
|
||||
[ngModel]="criteria.state"
|
||||
(ngModelChange)="setState($event)"
|
||||
name="state"
|
||||
>
|
||||
</ng-select>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<app-validated-city
|
||||
label="Location - City"
|
||||
name="city"
|
||||
[ngModel]="criteria.city"
|
||||
(ngModelChange)="setCity($event)"
|
||||
labelClasses="text-gray-900 font-medium"
|
||||
[state]="criteria.state"
|
||||
></app-validated-city>
|
||||
</div> -->
|
||||
<!-- New section for city search type -->
|
||||
<div *ngIf="criteria.city">
|
||||
<label class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Search Type</label
|
||||
>
|
||||
<div class="flex items-center space-x-4">
|
||||
<label class="inline-flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
class="form-radio"
|
||||
name="searchType"
|
||||
[(ngModel)]="criteria.searchType"
|
||||
value="exact"
|
||||
/>
|
||||
<span class="ml-2">Exact City</span>
|
||||
</label>
|
||||
<label class="inline-flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
class="form-radio"
|
||||
name="searchType"
|
||||
[(ngModel)]="criteria.searchType"
|
||||
value="radius"
|
||||
/>
|
||||
<span class="ml-2">Radius Search</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- New section for radius selection -->
|
||||
<div
|
||||
*ngIf="criteria.city && criteria.searchType === 'radius'"
|
||||
class="space-y-2"
|
||||
>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Select Radius (in miles)</label
|
||||
>
|
||||
<div class="flex flex-wrap">
|
||||
@for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track
|
||||
radius) {
|
||||
<button
|
||||
type="button"
|
||||
class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
|
||||
[ngClass]="
|
||||
criteria.radius === radius
|
||||
? 'text-white bg-gray-500'
|
||||
: 'text-gray-900 bg-white'
|
||||
"
|
||||
(click)="criteria.radius = radius"
|
||||
>
|
||||
{{ radius }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="price"
|
||||
class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Price</label
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<app-validated-price
|
||||
name="price-from"
|
||||
[(ngModel)]="criteria.minPrice"
|
||||
placeholder="From"
|
||||
inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"
|
||||
></app-validated-price>
|
||||
<span>-</span>
|
||||
<app-validated-price
|
||||
name="price-to"
|
||||
[(ngModel)]="criteria.maxPrice"
|
||||
placeholder="To"
|
||||
inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"
|
||||
></app-validated-price>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="salesRevenue"
|
||||
class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Sales Revenue</label
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<app-validated-price
|
||||
name="salesRevenue-from"
|
||||
[(ngModel)]="criteria.minRevenue"
|
||||
placeholder="From"
|
||||
inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"
|
||||
></app-validated-price>
|
||||
<span>-</span>
|
||||
|
||||
<app-validated-price
|
||||
name="salesRevenue-to"
|
||||
[(ngModel)]="criteria.maxRevenue"
|
||||
placeholder="To"
|
||||
inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"
|
||||
></app-validated-price>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="cashflow"
|
||||
class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Cashflow</label
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<app-validated-price
|
||||
name="cashflow-from"
|
||||
[(ngModel)]="criteria.minCashFlow"
|
||||
placeholder="From"
|
||||
inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"
|
||||
></app-validated-price>
|
||||
<span>-</span>
|
||||
<app-validated-price
|
||||
name="cashflow-to"
|
||||
[(ngModel)]="criteria.maxCashFlow"
|
||||
placeholder="To"
|
||||
inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"
|
||||
></app-validated-price>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="title"
|
||||
class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Title / Description (Free Search)</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
[(ngModel)]="criteria.title"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
|
||||
placeholder="e.g. Restaurant"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Category</label
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
@for(tob of selectOptions.typesOfBusiness; track tob){
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="automotive"
|
||||
[ngModel]="isTypeOfBusinessClicked(tob)"
|
||||
(ngModelChange)="categoryClicked($event, tob.value)"
|
||||
value="{{ tob.value }}"
|
||||
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
|
||||
/>
|
||||
<label
|
||||
for="automotive"
|
||||
class="ml-2 text-sm font-medium text-gray-900"
|
||||
>{{ tob.name }}</label
|
||||
>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Type of Property</label
|
||||
>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
[(ngModel)]="criteria.realEstateChecked"
|
||||
(ngModelChange)="
|
||||
onCheckboxChange('realEstateChecked', $event)
|
||||
"
|
||||
type="checkbox"
|
||||
name="realEstateChecked"
|
||||
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
|
||||
/>
|
||||
<label
|
||||
for="realEstateChecked"
|
||||
class="ml-2 text-sm font-medium text-gray-900"
|
||||
>Real Estate</label
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
[(ngModel)]="criteria.leasedLocation"
|
||||
(ngModelChange)="onCheckboxChange('leasedLocation', $event)"
|
||||
type="checkbox"
|
||||
name="leasedLocation"
|
||||
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
|
||||
/>
|
||||
<label
|
||||
for="leasedLocation"
|
||||
class="ml-2 text-sm font-medium text-gray-900"
|
||||
>Leased Location</label
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
[(ngModel)]="criteria.franchiseResale"
|
||||
(ngModelChange)="
|
||||
onCheckboxChange('franchiseResale', $event)
|
||||
"
|
||||
type="checkbox"
|
||||
name="franchiseResale"
|
||||
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
|
||||
/>
|
||||
<label
|
||||
for="franchiseResale"
|
||||
class="ml-2 text-sm font-medium text-gray-900"
|
||||
>Franchise</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="numberEmployees"
|
||||
class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Number of Employees</label
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
type="number"
|
||||
id="numberEmployees-from"
|
||||
[(ngModel)]="criteria.minNumberEmployees"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
|
||||
placeholder="From"
|
||||
/>
|
||||
<span>-</span>
|
||||
<input
|
||||
type="number"
|
||||
id="numberEmployees-to"
|
||||
[(ngModel)]="criteria.maxNumberEmployees"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
|
||||
placeholder="To"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="establishedSince"
|
||||
class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Established Since</label
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
type="number"
|
||||
id="establishedSince-From"
|
||||
[(ngModel)]="criteria.establishedSince"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
|
||||
placeholder="YYYY"
|
||||
/>
|
||||
<span>-</span>
|
||||
<input
|
||||
type="number"
|
||||
id="establishedSince-To"
|
||||
[(ngModel)]="criteria.establishedUntil"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
|
||||
placeholder="YYYY"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="brokername"
|
||||
class="block mb-2 text-sm font-medium text-gray-900"
|
||||
>Broker Name / Company Name</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="brokername"
|
||||
[(ngModel)]="criteria.brokerName"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
|
||||
placeholder="e.g. Brokers Invest"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
(click)="modalService.accept()"
|
||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
|
||||
>
|
||||
Search ({{ numberOfResults$ | async }})
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
(click)="close()"
|
||||
class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user