Bug Fixing overall

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

@@ -5,8 +5,31 @@
       <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-1 col-offset-9">
-        <p-button label="Refine" (click)="search()"></p-button>
+      <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>
@@ -19,7 +42,7 @@
         <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){
+              @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"> -->
@@ -60,9 +83,12 @@
 
       }
     </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>

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

@@ -6,12 +6,13 @@ import onChange from 'on-change';
 import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
 import { DropdownModule } from 'primeng/dropdown';
+import { InputGroupModule } from 'primeng/inputgroup';
 import { InputTextModule } from 'primeng/inputtext';
 import { PaginatorModule } from 'primeng/paginator';
 import { StyleClassModule } from 'primeng/styleclass';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import { CommercialPropertyListing } from '../../../../../../bizmatch-server/src/models/db.model';
-import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
+import { ListingCriteria } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
@@ -21,7 +22,7 @@ import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler }
 @Component({
   selector: 'app-commercial-property-listings',
   standalone: true,
-  imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
+  imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule, InputGroupModule],
   templateUrl: './commercial-property-listings.component.html',
   styleUrl: './commercial-property-listings.component.scss',
 })
@@ -31,15 +32,14 @@ export class CommercialPropertyListingsComponent {
   filteredListings: Array<CommercialPropertyListing>;
   criteria: ListingCriteria;
   realEstateChecked: boolean;
-
+  first: number = 0;
+  rows: number = 12;
   maxPrice: string;
   minPrice: string;
   type: string;
   states = [];
   statesSet = new Set();
   state: string;
-  first: number = 0;
-  rows: number = 12;
   totalRecords: number = 0;
   ts = new Date().getTime();
 
@@ -52,12 +52,12 @@ export class CommercialPropertyListingsComponent {
     private imageService: ImageService,
   ) {
     this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
+    this.criteria.type = undefined;
     this.router.getCurrentNavigation();
     this.activatedRoute.snapshot;
     this.activatedRoute.params.subscribe(params => {
       if (this.activatedRoute.snapshot.fragment === '') {
         this.criteria = onChange(createGenericObject<ListingCriteria>(), getSessionStorageHandler);
-        this.first = 0;
       }
       this.init();
     });
@@ -68,7 +68,11 @@ export class CommercialPropertyListingsComponent {
     this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
     this.search();
   }
-
+  refine() {
+    this.criteria.start = 0;
+    this.criteria.page = 0;
+    this.search();
+  }
   async search() {
     const listingReponse = await this.listingsService.getListings(this.criteria, 'commercialProperty');
     this.listings = listingReponse.data;
@@ -83,7 +87,7 @@ export class CommercialPropertyListingsComponent {
     this.criteria.pageCount = event.pageCount;
     this.search();
   }
-  imageErrorHandler(listing: ListingType) {
-    // listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
+  reset() {
+    this.criteria.title = null;
   }
 }