Bug Fixing overall

2024-05-06 20:13:09 +02:00
parent bb5a408cdc
commit 6b61c19bd7
52 changed files with 1926 additions and 1048 deletions
--- a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
+++ b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
@@ -5,8 +5,14 @@
      <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-inputGroup>
+          <input id="name" type="text" pInputText [(ngModel)]="criteria.name" placeholder="Name" />
+          <button type="button" pButton icon="pi pi-times" class="p-button-danger" (click)="reset()"></button>
+        </p-inputGroup>
+      </div>
+      <div class="col-1 col-offset-7">
+        <p-button label="Refine" (click)="refine()"></p-button>
      </div>
    </div>
  </div>
@@ -14,13 +20,13 @@
 <div class="surface-200 h-full">
  <div class="wrapper">
    <div class="grid">
-      @for (user of users; track user.id) {
-      <div class="col-12 lg:col-6 xl:col-4 p-4 flex flex-column flex-grow-1">
+      @for (user of users; track user) {
+      <div class="col-12 lg:col-6 xl:col-4 p-4 flex flex-column">
        <div class="surface-card shadow-2 p-2 flex flex-column flex-grow-1 justify-content-between" style="border-radius: 10px">
          <div class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full">
            <span>
              @if(user.hasProfile){
-              <img src="{{ environment.apiBaseUrl }}/profile/{{ user.id }}.avif?_ts={{ ts }}" class="w-5rem" />
+              <img src="profile/{{ user.id }}.avif" class="w-5rem" />
              } @else {
              <img src="assets/images/person_placeholder.jpg" class="w-5rem" />
              }
@@ -33,7 +39,7 @@
          </div>
          <div class="px-4 py-3 text-right flex justify-content-between align-items-center">
            @if(user.hasCompanyLogo){
-            <img src="{{ environment.apiBaseUrl }}/logo/{{ user.id }}.avif" class="rounded-image" />
+            <img src="logo/{{ user.id }}.avif" class="rounded-image" />
            } @else {
            <img src="assets/images/placeholder.png" class="rounded-image" />
            }
--- a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
+++ b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
@@ -6,6 +6,7 @@ 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';
@@ -22,7 +23,7 @@ import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler }
@Component({
  selector: 'app-broker-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: './broker-listings.component.html',
  styleUrl: './broker-listings.component.scss',
 })
@@ -33,7 +34,6 @@ export class BrokerListingsComponent {
  filteredListings: Array<ListingType>;
  criteria: ListingCriteria;
  realEstateChecked: boolean;
-  // category: string;
  maxPrice: string;
  minPrice: string;
  type: string;
@@ -56,12 +56,12 @@ export class BrokerListingsComponent {
    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();
    });
@@ -73,16 +73,15 @@ export class BrokerListingsComponent {
  async init() {
    this.search();
  }
+  refine() {
+    this.criteria.start = 0;
+    this.criteria.page = 0;
+    this.search();
+  }
  async search() {
    const usersReponse = await this.userService.search(this.criteria);
    this.users = usersReponse.data;
    this.totalRecords = usersReponse.total;
-    const profiles = await this.imageService.getProfileImagesForUsers(this.users.map(u => u.id));
-    const logos = await this.imageService.getCompanyLogosForUsers(this.users.map(u => u.id));
-    this.users.forEach(u => {
-      u.hasProfile = profiles[u.id];
-      u.hasCompanyLogo = logos[u.id];
-    });
    this.cdRef.markForCheck();
    this.cdRef.detectChanges();
  }
@@ -93,7 +92,7 @@ export class BrokerListingsComponent {
    this.criteria.pageCount = event.pageCount;
    this.search();
  }
-  imageErrorHandler(listing: ListingType) {
-    // listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
+  reset() {
+    this.criteria.name = '';
  }
 }
--- a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
+++ b/bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
@@ -2,6 +2,9 @@
 <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="criteria.location" optionLabel="name" optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '100%' }"></p-dropdown>
+      </div>
      <div class="col-2">
        <p-dropdown
          [options]="selectOptions.typesOfBusiness"
@@ -13,21 +16,24 @@
          [style]="{ width: '100%' }"
        ></p-dropdown>
      </div>
-      <div class="col-2">
-        <p-dropdown [options]="states" [(ngModel)]="criteria.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">
+      <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" pTooltip="Real Estate excluded/included" tooltipPosition="top">
        <!-- <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>
+        <p-toggleButton [(ngModel)]="criteria.realEstateChecked" onLabel="RE incl." offLabel="RE excl."></p-toggleButton>
      </div>
      <div class="col-1">
-        <p-button label="Refine" (click)="search()"></p-button>
+        <p-button label="Refine" (click)="refine()"></p-button>
      </div>
    </div>
  </div>
@@ -52,7 +58,7 @@
            <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>
            <div class="mt-auto ml-auto">
-              <img src="{{ environment.apiBaseUrl }}/logo/{{ listing.userId }}" (error)="imageErrorHandler(listing)" class="rounded-image" />
+              <img src="{{ environment.apiBaseUrl }}/logo/{{ listing.userId }}.avif" (error)="imageErrorHandler(listing)" class="rounded-image" />
            </div>
          </div>
          <div class="px-4 py-3 surface-100 text-left">
--- a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.scss
+++ b/bizmatch/src/app/pages/listings/business-listings/business-listings.component.scss
@@ -1,23 +1,26 @@
 #sky-line {
-    background-image: url(../../../../assets/images/bw-sky.jpg);
-    height: 204px;
-    background-position: bottom;
-    background-size: cover;
-    margin-bottom: -1px;
+  background-image: url(../../../../assets/images/bw-sky.jpg);
+  height: 204px;
+  background-position: bottom;
+  background-size: cover;
+  margin-bottom: -1px;
 }
-.search{
-    background-color: #343F69;
+.search {
+  background-color: #343f69;
 }
 ::ng-deep p-paginator div {
-    background-color: var(--surface-200) !important;
-    // background-color: var(--surface-400) !important;
+  background-color: var(--surface-200) !important;
+  // background-color: var(--surface-400) !important;
 }
 .rounded-image {
-    border-radius: 6px;
-    // width: 100px;
-    max-width: 100px;
-    height: 45px;
-    border: 1px solid rgba(0,0,0,0.2);
-    padding: 1px 1px;
-    object-fit: contain;
-}
+  border-radius: 6px;
+  // width: 100px;
+  max-width: 100px;
+  height: 45px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 1px 1px;
+  object-fit: contain;
+}
+::ng-deep span.p-button-label {
+  font-weight: 500;
+}
--- a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts
+++ b/bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts
@@ -6,10 +6,12 @@ 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 { TooltipModule } from 'primeng/tooltip';
 import { BusinessListing } from '../../../../../../bizmatch-server/src/models/db.model';
 import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
@@ -21,7 +23,21 @@ import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler }
@Component({
  selector: 'app-business-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,
+    TooltipModule,
+  ],
  templateUrl: './business-listings.component.html',
  styleUrl: './business-listings.component.scss',
 })
@@ -36,10 +52,10 @@ export class BusinessListingsComponent {
  type: string;
  states = [];
  state: string;
-  first: number = 0;
-  rows: number = 12;
  totalRecords: number = 0;
  ts = new Date().getTime();
+  first: number = 0;
+  rows: number = 12;
  public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;

  constructor(
@@ -56,7 +72,6 @@ export class BusinessListingsComponent {
    this.activatedRoute.params.subscribe(params => {
      if (this.activatedRoute.snapshot.fragment === '') {
        this.criteria = onChange(createGenericObject<ListingCriteria>(), getSessionStorageHandler);
-        this.first = 0;
      }
      this.category = (<any>params).type;
      this.init();
@@ -68,6 +83,11 @@ export class BusinessListingsComponent {
    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, 'business');
    this.listings = listingReponse.data;
@@ -85,4 +105,7 @@ export class BusinessListingsComponent {
  imageErrorHandler(listing: ListingType) {
    // listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
  }
+  reset() {
+    this.criteria.title = null;
+  }
 }
--- a/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
+++ b/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>
--- a/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts
+++ b/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;
  }
 }