95 lines
4.7 KiB
HTML
95 lines
4.7 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">
|
|
<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 class="col-2">
|
|
<p-dropdown
|
|
[options]="selectOptions.typesOfCommercialProperty"
|
|
[(ngModel)]="criteria.type"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
[showClear]="true"
|
|
placeholder="Categorie of Property"
|
|
[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-2">
|
|
<p-inputGroup>
|
|
<input id="name" type="text" pInputText [(ngModel)]="criteria.title" placeholder="Title" />
|
|
<button type="button" pButton icon="pi pi-times" class="p-button-secondary" (click)="reset()"></button>
|
|
</p-inputGroup>
|
|
</div>
|
|
<div class="col-1 col-offset-1">
|
|
<p-button label="Refine" (click)="refine()"></p-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="surface-200 h-full">
|
|
<div class="wrapper">
|
|
<div class="grid">
|
|
@for (listing of listings; track listing.id) {
|
|
<div class="col-12 xl:col-4 flex">
|
|
<div class="surface-card p-2 flex flex-column flex-grow-1 justify-content-between" style="border-radius: 10px">
|
|
<article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
|
|
<div class="relative">
|
|
@if (listing.imageOrder?.length>0){
|
|
<img src="property/{{ listing.imagePath }}/{{ listing.imageOrder[0] }}" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem" />
|
|
} @else {
|
|
<!-- <img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{listing.imageOrder[0].name}}" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem"> -->
|
|
<img src="assets/images/placeholder_properties.jpg" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem" />
|
|
}
|
|
<p class="absolute px-2 py-1 border-round-lg text-sm font-normal text-white mt-0 mb-0" style="background-color: rgba(255, 255, 255, 0.3); backdrop-filter: invert(30%); top: 3%; left: 3%">
|
|
{{ selectOptions.getState(listing.state) }}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-column w-full gap-3">
|
|
<div class="flex w-full justify-content-between align-items-center flex-wrap gap-3">
|
|
<p class="font-semibold text-lg mt-0 mb-0">{{ listing.title }}</p>
|
|
<!-- <p-rating [ngModel]="val1" readonly="true" stars="5" [cancel]="false" ngClass="flex-shrink-0"></p-rating> -->
|
|
</div>
|
|
<p class="font-normal text-lg text-600 mt-0 mb-0">{{ listing.city }}</p>
|
|
<div class="flex flex-wrap justify-content-between xl:h-2rem mt-auto">
|
|
<p class="text-base flex align-items-center text-900 mt-0 mb-1">
|
|
<i class="pi pi-list mr-2"></i>
|
|
<span class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</span>
|
|
</p>
|
|
</div>
|
|
<p class="font-semibold text-3xl text-900 mt-0 mb-2">{{ listing.price | currency }}</p>
|
|
</div>
|
|
</article>
|
|
<div class="px-4 py-3 text-left">
|
|
<button
|
|
pButton
|
|
pRipple
|
|
icon="pi pi-arrow-right"
|
|
iconPos="right"
|
|
label="View Full Listing"
|
|
class="p-button-rounded p-button-success"
|
|
[routerLink]="['/details-commercial-property-listing', listing.id]"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
</div>
|
|
|
|
<div class="mb-2 surface-200 flex align-items-center justify-content-center">
|
|
<!-- @if(listings && listings.length>12){ -->
|
|
<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>
|