not-found page, #85, client logging

bizmatch/src/app/components/header/header.component.ts

@@ -14,7 +14,7 @@ import { CriteriaChangeService } from '../../services/criteria-change.service';
 import { SearchService } from '../../services/search.service';
 import { SharedService } from '../../services/shared.service';
 import { UserService } from '../../services/user.service';
-import { compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaProxy, map2User } from '../../utils/utils';
+import { assignProperties, compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaProxy, map2User } from '../../utils/utils';
 import { DropdownComponent } from '../dropdown/dropdown.component';
 import { ModalService } from '../search-modal/modal.service';
 @Component({
@@ -86,9 +86,11 @@ export class HeaderComponent {
   ngAfterViewInit() {}
 
   async openModal() {
-    const accepted = await this.modalService.showModal(this.criteria);
-    if (accepted) {
+    const modalResult = await this.modalService.showModal(this.criteria);
+    if (modalResult.accepted) {
       this.searchService.search(this.criteria);
+    } else {
+      this.criteria = assignProperties(this.criteria, modalResult.criteria);
     }
   }
   navigateWithState(dest: string, state: any) {

bizmatch/src/app/components/not-found/not-found.component.html

@@ -1 +1,35 @@
-<p>not-found works!</p>
+<!-- <section class="bg-white dark:bg-gray-900">
+  <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+    <div class="mx-auto max-w-screen-sm text-center">
+      <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500">404</h1>
+      <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Something's missing.</p>
+      <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">Sorry, we can't find that page.</p>
+      <a
+        routerLink="/home"
+        class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4"
+        >Back to Homepage</a
+      >
+    </div>
+  </div>
+</section> -->
+<section class="bg-white dark:bg-gray-900">
+  <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+    <div class="mx-auto max-w-screen-sm text-center">
+      <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-blue-700 dark:text-blue-500">404</h1>
+      <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Something's missing.</p>
+      <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">Sorry, we can't find that page</p>
+      <!-- <a
+        href="#"
+        class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4"
+        >Back to Homepage</a
+      > -->
+      <button
+        type="button"
+        [routerLink]="['/home']"
+        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+      >
+        Back to Homepage
+      </button>
+    </div>
+  </div>
+</section>

bizmatch/src/app/components/not-found/not-found.component.ts

@@ -1,8 +1,11 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-not-found',
   standalone: true,
-  template: '<h2>Page not found</h2>',
+  imports: [CommonModule, RouterModule],
+  templateUrl: './not-found.component.html',
 })
 export class NotFoundComponent {}

bizmatch/src/app/components/search-modal/modal.service.ts

@@ -1,7 +1,7 @@
 // 1. Shared Service (modal.service.ts)
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { BusinessListingCriteria, CommercialPropertyListingCriteria, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { BusinessListingCriteria, CommercialPropertyListingCriteria, ModalResult, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 
 @Injectable({
   providedIn: 'root',
@@ -9,26 +9,26 @@ import { BusinessListingCriteria, CommercialPropertyListingCriteria, UserListing
 export class ModalService {
   private modalVisibleSubject = new BehaviorSubject<boolean>(false);
   private messageSubject = new BehaviorSubject<BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria>(null);
-  private resolvePromise!: (value: boolean) => void;
+  private resolvePromise!: (value: ModalResult) => void;
 
   modalVisible$: Observable<boolean> = this.modalVisibleSubject.asObservable();
   message$: Observable<BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria> = this.messageSubject.asObservable();
 
-  showModal(message: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria): Promise<boolean> {
+  showModal(message: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria): Promise<ModalResult> {
     this.messageSubject.next(message);
     this.modalVisibleSubject.next(true);
-    return new Promise<boolean>(resolve => {
+    return new Promise<ModalResult>(resolve => {
       this.resolvePromise = resolve;
     });
   }
 
   accept(): void {
     this.modalVisibleSubject.next(false);
-    this.resolvePromise(true);
+    this.resolvePromise({ accepted: true });
   }
 
-  reject(): void {
+  reject(backupCriteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria): void {
     this.modalVisibleSubject.next(false);
-    this.resolvePromise(false);
+    this.resolvePromise({ accepted: false, criteria: backupCriteria });
   }
 }

bizmatch/src/app/components/search-modal/search-modal.component.html

@@ -9,7 +9,7 @@
         } @else {
         <h3 class="text-xl font-semibold text-gray-900">Professional Listing Search</h3>
         }
-        <button (click)="modalService.reject()" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
+        <button (click)="close()" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
           </svg>
@@ -20,6 +20,11 @@
         <div class="flex space-x-4 mb-4">
           <button class="text-blue-600 font-medium border-b-2 border-blue-600 pb-2">Classic Search</button>
           <button class="text-gray-500">AI Search <span class="bg-gray-200 text-xs font-semibold px-2 py-1 rounded">BETA</span></button>
+          <i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-blue-500" (click)="clearFilter()"></i>
+          <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 tooltip">
+            Clear all Filter
+            <div class="tooltip-arrow" data-popper-arrow></div>
+          </div>
         </div>
         @if(criteria.criteriaType==='businessListings'){
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -470,7 +475,7 @@
         </button>
         <button
           type="button"
-          (click)="modalService.reject()"
+          (click)="close()"
           class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10"
         >
           Cancel

bizmatch/src/app/components/search-modal/search-modal.component.ts

@@ -10,6 +10,7 @@ import { ListingsService } from '../../services/listings.service';
 import { SelectOptionsService } from '../../services/select-options.service';
 import { UserService } from '../../services/user.service';
 import { SharedModule } from '../../shared/shared/shared.module';
+import { resetBusinessListingCriteria, resetCommercialPropertyListingCriteria, resetUserListingCriteria } from '../../utils/utils';
 import { ValidatedCityComponent } from '../validated-city/validated-city.component';
 import { ModalService } from './modal.service';
 @UntilDestroy()
@@ -29,7 +30,9 @@ export class SearchModalComponent {
   countyInput$ = new Subject<string>();
   private criteriaChangeSubscription: Subscription;
   public criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
+  backupCriteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
   numberOfResults$: Observable<number>;
+  cancelDisable = false;
   constructor(
     public selectOptions: SelectOptionsService,
     public modalService: ModalService,
@@ -42,6 +45,7 @@ export class SearchModalComponent {
     this.setupCriteriaChangeListener();
     this.modalService.message$.pipe(untilDestroyed(this)).subscribe(msg => {
       this.criteria = msg;
+      this.backupCriteria = JSON.parse(JSON.stringify(msg));
       this.setTotalNumberOfResults();
     });
     this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
@@ -54,7 +58,9 @@ export class SearchModalComponent {
     this.loadCounties();
   }
 
-  ngOnChanges() {}
+  ngOnChanges() {
+    console.log('sdf');
+  }
   categoryClicked(checked: boolean, value: string) {
     if (checked) {
       this.criteria.types.push(value);
@@ -116,7 +122,10 @@ export class SearchModalComponent {
     }
   }
   private setupCriteriaChangeListener() {
-    this.criteriaChangeSubscription = this.criteriaChangeService.criteriaChange$.pipe(debounceTime(400)).subscribe(() => this.setTotalNumberOfResults());
+    this.criteriaChangeSubscription = this.criteriaChangeService.criteriaChange$.pipe(debounceTime(400)).subscribe(() => {
+      this.setTotalNumberOfResults();
+      this.cancelDisable = true;
+    });
   }
   trackByFn(item: GeoResult) {
     return item.id;
@@ -148,4 +157,16 @@ export class SearchModalComponent {
       }
     }
   }
+  clearFilter() {
+    if (this.criteria.criteriaType === 'businessListings') {
+      resetBusinessListingCriteria(this.criteria);
+    } else if (this.criteria.criteriaType === 'commercialPropertyListings') {
+      resetCommercialPropertyListingCriteria(this.criteria);
+    } else {
+      resetUserListingCriteria(this.criteria);
+    }
+  }
+  close() {
+    this.modalService.reject(this.backupCriteria);
+  }
 }