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

images based on http-server, filter dropdowns

Browse Source
This commit is contained in:
Andreas Knuth
2024-05-10 17:19:36 +02:00
parent d508415de4
commit 5230ef1230
21 changed files with 224 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
View File

@@ -3,10 +3,18 @@
<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>
<p-dropdown [filter]="true" filterBy="name" [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Location" [style]="{ width: '100%' }">
<ng-template let-state pTemplate="item">
<div class="flex align-items-center gap-2">
<div>{{ state.name }} ({{ state.count }})</div>
</div>
</ng-template>
</p-dropdown>
</div>
<div class="col-2">
<p-dropdown
[filter]="true"
filterBy="name"
[options]="selectOptions.typesOfCommercialProperty"
[(ngModel)]="criteria.type"
optionLabel="name"
@@ -43,9 +51,8 @@
<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" />
<img src="pictures/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%">

6
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts
View File

@@ -55,7 +55,7 @@ export class CommercialPropertyListingsComponent {
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
this.criteria.type = undefined;
this.route.data.subscribe(async () => {
if (!this.router.getCurrentNavigation().extras.state) {
if (this.router.getCurrentNavigation().extras.state) {
resetCriteria(this.criteria);
}
this.init();
@@ -63,8 +63,8 @@ export class CommercialPropertyListingsComponent {
}
async ngOnInit() {}
async init() {
const statesResult = await this.listingsService.getAllStates('business');
this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
const statesResult = await this.listingsService.getAllStates('commercialProperty');
this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count }));
this.search();
}
refine() {