115 lines
7.4 KiB
HTML
115 lines
7.4 KiB
HTML
<div id="sky-line" class="hidden-lg-down">
|
|
</div>
|
|
<div class="search">
|
|
<div class="wrapper">
|
|
<div class="grid p-4 align-items-center">
|
|
@if (listingCategory==='business'){
|
|
<div class="col-2">
|
|
<p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name"
|
|
optionValue="value" [showClear]="true" placeholder="Categorie of Business"
|
|
[style]="{ width: '100%'}"></p-dropdown>
|
|
</div>
|
|
<div class="col-2">
|
|
<p-dropdown [options]="states" [(ngModel)]="state" optionLabel="criteria.location" optionLabel="name" optionValue="value"
|
|
[showClear]="true" placeholder="State" [style]="{ width: '100%'}"></p-dropdown>
|
|
</div>
|
|
<div class="col-2">
|
|
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name"
|
|
optionValue="value" [showClear]="true" placeholder="Min Price"
|
|
[style]="{ width: '100%'}"></p-dropdown>
|
|
</div>
|
|
<div class="col-2">
|
|
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name"
|
|
optionValue="value" [showClear]="true" placeholder="Max Price"
|
|
[style]="{ width: '100%'}"></p-dropdown>
|
|
</div>
|
|
<div class="col-3">
|
|
<!-- <p-toggleButton [(ngModel)]="checked1" onLabel="Sustainable" offLabel="Unsustainable" onIcon="pi pi-check" offIcon="pi pi-times" styleClass="mb-3 lg:mt-0 mr-4 flex-shrink-0 w-12rem"></p-toggleButton> -->
|
|
<p-toggleButton [(ngModel)]="criteria.realEstateChecked" onLabel="Real Estate not included"
|
|
offLabel="Real Estate included"></p-toggleButton>
|
|
</div>
|
|
}
|
|
@if (listingCategory==='commercialProperty'){
|
|
<div class="col-2">
|
|
<p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value"
|
|
[showClear]="true" placeholder="Location" [style]="{ width: '100%'}"></p-dropdown>
|
|
</div>
|
|
}
|
|
<!-- @if (listingCategory==='professionals_brokers'){ -->
|
|
<!-- <div class="col-2">
|
|
<p-dropdown [options]="selectOptions.categories" [(ngModel)]="criteria.category" optionLabel="name"
|
|
optionValue="value" [showClear]="true" placeholder="Category"
|
|
[style]="{ width: '100%'}"></p-dropdown>
|
|
</div>
|
|
<div class="col-2">
|
|
<p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value"
|
|
[showClear]="true" placeholder="Location" [style]="{ width: '100%'}"></p-dropdown>
|
|
</div> -->
|
|
<!-- } -->
|
|
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}" class="col-1">
|
|
<p-button label="Refine" (click)="search()"></p-button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="surface-200 h-full">
|
|
<div class="wrapper">
|
|
<div class="grid">
|
|
@for (listing of filteredListings; track listing.id) {
|
|
<div class="col-12 lg:col-3 p-3">
|
|
<div class="shadow-2 border-round surface-card mb-3 h-full flex-column justify-content-between flex">
|
|
<div class="p-4 h-full flex flex-column">
|
|
@if (listing.listingsCategory==='business'){
|
|
<div class="flex align-items-center">
|
|
<span [class]="selectOptions.getBgColorType(listing.type)"
|
|
class="inline-flex border-circle align-items-center justify-content-center mr-3"
|
|
style="width:38px;height:38px">
|
|
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
|
|
</span>
|
|
<span class="text-900 font-medium text-2xl">{{selectOptions.getBusiness(listing.type)}}</span>
|
|
</div>
|
|
}
|
|
@if (listing.listingsCategory==='commercialProperty'){
|
|
<!-- <div class="flex align-items-center">
|
|
<span
|
|
class="inline-flex border-circle align-items-center justify-content-center bg-green-100 mr-3"
|
|
style="width:38px;height:38px">
|
|
<i class="pi pi-globe text-xl text-green-600"></i>
|
|
</span>
|
|
<span class="text-900 font-medium text-2xl">Investment</span>
|
|
</div> -->
|
|
}
|
|
<div class="text-900 my-3 text-xl font-medium">{{listing.title}}</div>
|
|
@if (listing.listingsCategory==='business'){
|
|
<p class="mt-0 mb-1 text-700 line-height-3">Asking price: {{listing.price | currency}}</p>
|
|
<p class="mt-0 mb-1 text-700 line-height-3">Sales revenue: {{listing.salesRevenue | currency}}</p>
|
|
<p class="mt-0 mb-1 text-700 line-height-3">Net profit: {{listing.cashFlow | currency}}</p>
|
|
<p class="mt-0 mb-1 text-700 line-height-3">Location: {{selectOptions.getState(listing.state)}}</p>
|
|
<p class="mt-0 mb-1 text-700 line-height-3">Established: {{listing.established}}</p>
|
|
}
|
|
@if (listing.listingsCategory==='commercialProperty'){
|
|
<!-- <p class="mt-0 mb-1 text-700 line-height-3">Location: {{selectOptions.getState(listing.state)}}</p>
|
|
<p class="mt-0 mb-1 text-700 line-height-3">EMail: {{listing.email}}</p>
|
|
<p class="mt-0 mb-1 text-700 line-height-3">Website: {{listing.website}}</p>
|
|
<p class="mt-0 mb-1 text-700 line-height-3">Phone Number: {{listing.phoneNumber}}</p> -->
|
|
}
|
|
<div class="mt-auto ml-auto">
|
|
<img *ngIf="!listing.hideImage" src="{{environment.apiBaseUrl}}/profile_{{listing.userId}}" (error)="imageErrorHandler(listing)" class="rounded-image"/>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-3 surface-100 text-right">
|
|
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full Listing"
|
|
class="p-button-rounded p-button-success" [routerLink]="['/details',listing.id]"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="mb-2 surface-200 flex align-items-center justify-content-center">
|
|
<div class="mx-1 text-color">Total number of Listings: {{totalRecords}}</div>
|
|
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]" ></p-paginator>
|
|
</div>
|
|
|
|
</div>
|
|
</div> |