images based on http-server, filter dropdowns

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

@@ -3,10 +3,29 @@
   <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>
+        <p-dropdown
+          [filter]="true"
+          filterBy="name"
+          [options]="states"
+          [(ngModel)]="criteria.state"
+          optionLabel="criteria.location"
+          optionLabel="name"
+          optionValue="value"
+          [showClear]="true"
+          placeholder="State"
+          [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.typesOfBusiness"
           [(ngModel)]="criteria.type"
           optionLabel="name"
@@ -58,7 +77,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 }}.avif" (error)="imageErrorHandler(listing)" class="rounded-image" />
+              <img src="pictures/logo/{{ listing.userId }}.avif" (error)="imageErrorHandler(listing)" class="rounded-image" />
             </div>
           </div>
           <div class="px-4 py-3 surface-100 text-left">

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

@@ -70,7 +70,7 @@ export class BusinessListingsComponent {
     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();
@@ -79,7 +79,7 @@ export class BusinessListingsComponent {
   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 }));
+    this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count }));
     this.search();
   }
   refine() {