images based on http-server, filter dropdowns

bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html

@@ -3,7 +3,23 @@
   <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]="selectOptions.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 }}</div>
+            </div>
+          </ng-template>
+        </p-dropdown>
       </div>
       <div class="col-2">
         <p-inputGroup>
@@ -26,7 +42,7 @@
           <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="profile/{{ user.id }}.avif" class="w-5rem" />
+              <img src="pictures/profile/{{ user.id }}.avif" class="w-5rem" />
               } @else {
               <img src="assets/images/person_placeholder.jpg" class="w-5rem" />
               }
@@ -39,7 +55,7 @@
           </div>
           <div class="px-4 py-3 text-right flex justify-content-between align-items-center">
             @if(user.hasCompanyLogo){
-            <img src="logo/{{ user.id }}.avif" class="rounded-image" />
+            <img src="pictures/logo/{{ user.id }}.avif" class="rounded-image" />
             } @else {
             <img src="assets/images/placeholder.png" class="rounded-image" />
             }

bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { ChangeDetectorRef, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
@@ -23,7 +23,21 @@ import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from
 @Component({
   selector: 'app-broker-listings',
   standalone: true,
-  imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule, InputGroupModule],
+  imports: [
+    CommonModule,
+    StyleClassModule,
+    ButtonModule,
+    CheckboxModule,
+    InputTextModule,
+    DropdownModule,
+    FormsModule,
+    StyleClassModule,
+    ToggleButtonModule,
+    RouterModule,
+    PaginatorModule,
+    InputGroupModule,
+    NgOptimizedImage,
+  ],
   templateUrl: './broker-listings.component.html',
   styleUrl: './broker-listings.component.scss',
 })
@@ -59,7 +73,7 @@ export class BrokerListingsComponent {
     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();
@@ -67,7 +81,7 @@ export class BrokerListingsComponent {
   }
   async ngOnInit() {
     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 }));
+    this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count }));
   }
   async init() {
     this.search();