416 lines
26 KiB
HTML
416 lines
26 KiB
HTML
<div
|
||
*ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'businessListings'"
|
||
class="fixed inset-0 bg-neutral-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50"
|
||
>
|
||
<div class="relative w-full max-h-full">
|
||
<div class="relative bg-white rounded-lg shadow">
|
||
<div class="flex items-start justify-between p-4 border-b rounded-t bg-primary-600">
|
||
<h3 class="text-xl font-semibold text-white p-2 rounded">Business Listing Search</h3>
|
||
<button (click)="closeAndSearch()" type="button" class="text-white bg-transparent hover:bg-neutral-200 hover:text-neutral-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-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
|
||
<i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-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-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
|
||
Clear all Filter
|
||
<div class="tooltip-arrow" data-popper-arrow></div>
|
||
</div>
|
||
</div>
|
||
<!-- Display active filters as tags -->
|
||
<div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
|
||
<span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.establishedMin" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
</div>
|
||
<div class="grid grid-cols-1 gap-6">
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label for="state" class="block mb-2 text-sm font-medium text-neutral-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-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
|
||
</div>
|
||
<div *ngIf="criteria.city">
|
||
<label class="block mb-2 text-sm font-medium text-neutral-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" (ngModelChange)="updateCriteria({ searchType: $event })" 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" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
|
||
<span class="ml-2">Radius Search</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
|
||
<label class="block mb-2 text-sm font-medium text-neutral-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-neutral-200 hover:bg-neutral-500 hover:text-white"
|
||
[ngClass]="criteria.radius === radius ? 'text-white bg-neutral-500' : 'text-neutral-900 bg-white'"
|
||
(click)="setRadius(radius)"
|
||
>
|
||
{{ radius }}
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
|
||
<div class="flex items-center space-x-2">
|
||
<app-validated-price name="price-from" [ngModel]="criteria.minPrice" (ngModelChange)="updateCriteria({ minPrice: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
|
||
</app-validated-price>
|
||
<span>-</span>
|
||
<app-validated-price name="price-to" [ngModel]="criteria.maxPrice" (ngModelChange)="updateCriteria({ maxPrice: $event })" placeholder="To" inputClasses="bg-neutral-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-neutral-900">Sales Revenue</label>
|
||
<div class="flex items-center space-x-2">
|
||
<app-validated-price name="salesRevenue-from" [ngModel]="criteria.minRevenue" (ngModelChange)="updateCriteria({ minRevenue: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
|
||
</app-validated-price>
|
||
<span>-</span>
|
||
<app-validated-price name="salesRevenue-to" [ngModel]="criteria.maxRevenue" (ngModelChange)="updateCriteria({ maxRevenue: $event })" placeholder="To" inputClasses="bg-neutral-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-neutral-900">Cashflow</label>
|
||
<div class="flex items-center space-x-2">
|
||
<app-validated-price name="cashflow-from" [ngModel]="criteria.minCashFlow" (ngModelChange)="updateCriteria({ minCashFlow: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
|
||
</app-validated-price>
|
||
<span>-</span>
|
||
<app-validated-price name="cashflow-to" [ngModel]="criteria.maxCashFlow" (ngModelChange)="updateCriteria({ maxCashFlow: $event })" placeholder="To" inputClasses="bg-neutral-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-neutral-900">Title / Description (Free Search)</label>
|
||
<input
|
||
type="text"
|
||
id="title"
|
||
[ngModel]="criteria.title"
|
||
(ngModelChange)="updateCriteria({ title: $event })"
|
||
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
|
||
placeholder="e.g. Restaurant"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
|
||
<ng-select
|
||
class="custom"
|
||
[items]="selectOptions.typesOfBusiness"
|
||
bindLabel="name"
|
||
bindValue="value"
|
||
[ngModel]="criteria.types"
|
||
(ngModelChange)="onCategoryChange($event)"
|
||
[multiple]="true"
|
||
[closeOnSelect]="true"
|
||
placeholder="Select categories"
|
||
></ng-select>
|
||
</div>
|
||
<div>
|
||
<label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
|
||
<ng-select
|
||
class="custom"
|
||
[items]="propertyTypeOptions"
|
||
bindLabel="name"
|
||
bindValue="value"
|
||
[ngModel]="selectedPropertyType"
|
||
(ngModelChange)="onPropertyTypeChange($event)"
|
||
placeholder="Select property type"
|
||
></ng-select>
|
||
</div>
|
||
<div>
|
||
<label for="numberEmployees" class="block mb-2 text-sm font-medium text-neutral-900">Number of Employees</label>
|
||
<div class="flex items-center space-x-2">
|
||
<input
|
||
type="number"
|
||
id="numberEmployees-from"
|
||
[ngModel]="criteria.minNumberEmployees"
|
||
(ngModelChange)="updateCriteria({ minNumberEmployees: $event })"
|
||
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
|
||
placeholder="From"
|
||
/>
|
||
<span>-</span>
|
||
<input
|
||
type="number"
|
||
id="numberEmployees-to"
|
||
[ngModel]="criteria.maxNumberEmployees"
|
||
(ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
|
||
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
|
||
placeholder="To"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label for="establishedMin" class="block mb-2 text-sm font-medium text-neutral-900">Minimum years established</label>
|
||
<div class="flex items-center space-x-2">
|
||
<input
|
||
type="number"
|
||
id="establishedMin"
|
||
[ngModel]="criteria.establishedMin"
|
||
(ngModelChange)="updateCriteria({ establishedMin: $event })"
|
||
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
|
||
placeholder="YY"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
|
||
<input
|
||
type="text"
|
||
id="brokername"
|
||
[ngModel]="criteria.brokerName"
|
||
(ngModelChange)="updateCriteria({ brokerName: $event })"
|
||
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
|
||
placeholder="e.g. Brokers Invest"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ################################################################################## -->
|
||
<!-- ################################################################################## -->
|
||
<!-- ################################################################################## -->
|
||
<div *ngIf="!isModal" class="space-y-6">
|
||
<div class="flex space-x-4 mb-4">
|
||
<h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
|
||
<i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-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-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
|
||
Clear all Filter
|
||
<div class="tooltip-arrow" data-popper-arrow></div>
|
||
</div>
|
||
</div>
|
||
<!-- Display active filters as tags -->
|
||
<div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
|
||
<span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.establishedMin" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Years established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
<span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
|
||
Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
|
||
</span>
|
||
</div>
|
||
@if(criteria.criteriaType==='businessListings') {
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label for="state" class="block mb-2 text-sm font-medium text-neutral-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-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
|
||
</div>
|
||
<div *ngIf="criteria.city">
|
||
<label class="block mb-2 text-sm font-medium text-neutral-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" (ngModelChange)="updateCriteria({ searchType: $event })" 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" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
|
||
<span class="ml-2">Radius Search</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
|
||
<label class="block mb-2 text-sm font-medium text-neutral-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-neutral-200 hover:bg-neutral-500 hover:text-white"
|
||
[ngClass]="criteria.radius === radius ? 'text-white bg-neutral-500' : 'text-neutral-900 bg-white'"
|
||
(click)="setRadius(radius)"
|
||
>
|
||
{{ radius }}
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
|
||
<div class="flex items-center space-x-2">
|
||
<app-validated-price name="price-from" [ngModel]="criteria.minPrice" (ngModelChange)="updateCriteria({ minPrice: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5"> </app-validated-price>
|
||
<span>-</span>
|
||
<app-validated-price name="price-to" [ngModel]="criteria.maxPrice" (ngModelChange)="updateCriteria({ maxPrice: $event })" placeholder="To" inputClasses="bg-neutral-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-neutral-900">Sales Revenue</label>
|
||
<div class="flex items-center space-x-2">
|
||
<app-validated-price name="salesRevenue-from" [ngModel]="criteria.minRevenue" (ngModelChange)="updateCriteria({ minRevenue: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
|
||
</app-validated-price>
|
||
<span>-</span>
|
||
<app-validated-price name="salesRevenue-to" [ngModel]="criteria.maxRevenue" (ngModelChange)="updateCriteria({ maxRevenue: $event })" placeholder="To" inputClasses="bg-neutral-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-neutral-900">Cashflow</label>
|
||
<div class="flex items-center space-x-2">
|
||
<app-validated-price name="cashflow-from" [ngModel]="criteria.minCashFlow" (ngModelChange)="updateCriteria({ minCashFlow: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
|
||
</app-validated-price>
|
||
<span>-</span>
|
||
<app-validated-price name="cashflow-to" [ngModel]="criteria.maxCashFlow" (ngModelChange)="updateCriteria({ maxCashFlow: $event })" placeholder="To" inputClasses="bg-neutral-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-neutral-900">Title / Description (Free Search)</label>
|
||
<input
|
||
type="text"
|
||
id="title"
|
||
[ngModel]="criteria.title"
|
||
(ngModelChange)="updateCriteria({ title: $event })"
|
||
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
|
||
placeholder="e.g. Restaurant"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
|
||
<ng-select
|
||
class="custom"
|
||
[items]="selectOptions.typesOfBusiness"
|
||
bindLabel="name"
|
||
bindValue="value"
|
||
[ngModel]="criteria.types"
|
||
(ngModelChange)="onCategoryChange($event)"
|
||
[multiple]="true"
|
||
[closeOnSelect]="true"
|
||
placeholder="Select categories"
|
||
></ng-select>
|
||
</div>
|
||
<div>
|
||
<label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
|
||
<ng-select
|
||
class="custom"
|
||
[items]="propertyTypeOptions"
|
||
bindLabel="name"
|
||
bindValue="value"
|
||
[ngModel]="selectedPropertyType"
|
||
(ngModelChange)="onPropertyTypeChange($event)"
|
||
placeholder="Select property type"
|
||
></ng-select>
|
||
</div>
|
||
<div>
|
||
<label for="numberEmployees" class="block mb-2 text-sm font-medium text-neutral-900">Number of Employees</label>
|
||
<div class="flex items-center space-x-2">
|
||
<input
|
||
type="number"
|
||
id="numberEmployees-from"
|
||
[ngModel]="criteria.minNumberEmployees"
|
||
(ngModelChange)="updateCriteria({ minNumberEmployees: $event })"
|
||
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
|
||
placeholder="From"
|
||
/>
|
||
<span>-</span>
|
||
<input
|
||
type="number"
|
||
id="numberEmployees-to"
|
||
[ngModel]="criteria.maxNumberEmployees"
|
||
(ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
|
||
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
|
||
placeholder="To"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label for="establishedMin" class="block mb-2 text-sm font-medium text-neutral-900">Minimum years established</label>
|
||
<div class="flex items-center space-x-2">
|
||
<input
|
||
type="number"
|
||
id="establishedMin"
|
||
[ngModel]="criteria.establishedMin"
|
||
(ngModelChange)="updateCriteria({ establishedMin: $event })"
|
||
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
|
||
placeholder="YY"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
|
||
<input
|
||
type="text"
|
||
id="brokername"
|
||
[ngModel]="criteria.brokerName"
|
||
(ngModelChange)="updateCriteria({ brokerName: $event })"
|
||
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
|
||
placeholder="e.g. Brokers Invest"
|
||
/>
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|