Ticket Fixing: #111, #110, #108 (SortBy)

bizmatch/src/app/components/footer/footer.component.html

@@ -11,6 +11,7 @@
     <div class="flex flex-col lg:flex-row items-center order-3 lg:order-2">
       <a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" data-drawer-target="terms-of-use" data-drawer-show="terms-of-use" aria-controls="terms-of-use">Terms of use</a>
       <a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" data-drawer-target="privacy" data-drawer-show="privacy" aria-controls="privacy">Privacy statement</a>
+      <a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" routerLink="/pricingOverview">Pricing</a>
     </div>
 
     <div class="flex flex-col lg:flex-row items-center order-2 lg:order-3">

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

@@ -3,18 +3,44 @@
     <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
       <img src="assets/images/header-logo.png" class="h-8" alt="Flowbite Logo" />
     </a>
-    <div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
+    <div class="flex items-center md:order-2 space-x-3 rtl:space-x-reverse">
       <!-- Filter button -->
-      @if(isListingUrl()){
+      @if(isFilterUrl()){
       <button
         type="button"
         #triggerButton
         (click)="openModal()"
         id="filterDropdownButton"
-        class="max-sm:hidden px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 md:me-2"
+        class="max-sm:hidden px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         <i class="fas fa-filter mr-2"></i>Filter ({{ getNumberOfFiltersSet() }})
       </button>
+      <!-- Sort button -->
+      <div class="relative">
+        <button
+          type="button"
+          id="sortDropdownButton"
+          class="max-sm:hidden px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+          (click)="toggleSortDropdown()"
+          [ngClass]="{ 'text-blue-500': selectOptions.getSortByOption(criteria.sortBy) !== 'Sort', 'text-gray-900': selectOptions.getSortByOption(criteria.sortBy) === 'Sort' }"
+        >
+          <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(criteria.sortBy) }}
+        </button>
+
+        <!-- Sort options dropdown -->
+        <div *ngIf="sortDropdownVisible" class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-600">
+          <ul class="py-1 text-sm text-gray-700 dark:text-gray-200">
+            @for(item of sortByOptions; track item){
+            <li (click)="sortBy(item.value)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">{{ item.selectName ? item.selectName : item.name }}</li>
+            }
+            <!-- <li (click)="sortBy('priceAsc')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Price Ascending</li>
+            <li (click)="sortBy('priceDesc')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Price Descending</li>
+            <li (click)="sortBy('creationDateFirst')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Creation Date First</li>
+            <li (click)="sortBy('creationDateLast')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Creation Date Last</li>
+            <li (click)="sortBy(null)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Default Sorting</li> -->
+          </ul>
+        </div>
+      </div>
       }
       <button
         type="button"
@@ -68,6 +94,35 @@
             <a routerLink="/logout" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Logout</a>
           </li>
         </ul>
+        <ul class="py-2 md:hidden">
+          <li>
+            <a
+              routerLink="/businessListings"
+              [ngClass]="{ 'text-blue-700': isActive('/businessListings'), 'text-gray-700': !isActive('/businessListings') }"
+              class="block px-4 py-2 text-sm font-semibold"
+              (click)="closeMenusAndSetCriteria('businessListings')"
+              >Businesses</a
+            >
+          </li>
+          <li>
+            <a
+              routerLink="/commercialPropertyListings"
+              [ngClass]="{ 'text-blue-700': isActive('/commercialPropertyListings'), 'text-gray-700': !isActive('/commercialPropertyListings') }"
+              class="block px-4 py-2 text-sm font-semibold"
+              (click)="closeMenusAndSetCriteria('commercialPropertyListings')"
+              >Properties</a
+            >
+          </li>
+          <li>
+            <a
+              routerLink="/brokerListings"
+              [ngClass]="{ 'text-blue-700': isActive('/brokerListings'), 'text-gray-700': !isActive('/brokerListings') }"
+              class="block px-4 py-2 text-sm font-semibold"
+              (click)="closeMenusAndSetCriteria('brokerListings')"
+              >Professionals</a
+            >
+          </li>
+        </ul>
       </div>
       } @else {
       <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-unknown">
@@ -79,9 +134,38 @@
             <a routerLink="/pricing" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Register</a>
           </li>
         </ul>
+        <ul class="py-2 md:hidden">
+          <li>
+            <a
+              routerLink="/businessListings"
+              [ngClass]="{ 'text-blue-700': isActive('/businessListings'), 'text-gray-700': !isActive('/businessListings') }"
+              class="block px-4 py-2 text-sm font-bold"
+              (click)="closeMenusAndSetCriteria('businessListings')"
+              >Businesses</a
+            >
+          </li>
+          <li>
+            <a
+              routerLink="/commercialPropertyListings"
+              [ngClass]="{ 'text-blue-700': isActive('/commercialPropertyListings'), 'text-gray-700': !isActive('/commercialPropertyListings') }"
+              class="block px-4 py-2 text-sm font-bold"
+              (click)="closeMenusAndSetCriteria('commercialPropertyListings')"
+              >Properties</a
+            >
+          </li>
+          <li>
+            <a
+              routerLink="/brokerListings"
+              [ngClass]="{ 'text-blue-700': isActive('/brokerListings'), 'text-gray-700': !isActive('/brokerListings') }"
+              class="block px-4 py-2 text-sm font-bold"
+              (click)="closeMenusAndSetCriteria('brokerListings')"
+              >Professionals</a
+            >
+          </li>
+        </ul>
       </div>
       }
-      <button
+      <!-- <button
         data-collapse-toggle="navbar-user"
         type="button"
         class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
@@ -92,7 +176,7 @@
         <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
         </svg>
-      </button>
+      </button> -->
     </div>
     <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
       <ul
@@ -133,7 +217,7 @@
     </div>
   </div>
   <!-- Mobile filter button -->
-  @if(isListingUrl()){
+  @if(isFilterUrl()){
   <div class="md:hidden flex justify-center pb-4">
     <button
       (click)="openModal()"
@@ -143,6 +227,16 @@
     >
       <i class="fas fa-filter mr-2"></i>Filter ({{ getNumberOfFiltersSet() }})
     </button>
+    <!-- Sorting -->
+    <button
+      (click)="toggleSortDropdown()"
+      type="button"
+      id="sortDropdownMobileButton"
+      class="mx-4 w-1/2 px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+      [ngClass]="{ 'text-blue-500': selectOptions.getSortByOption(criteria.sortBy) !== 'Sort', 'text-gray-900': selectOptions.getSortByOption(criteria.sortBy) === 'Sort' }"
+    >
+      <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(criteria.sortBy) }}
+    </button>
   </div>
   }
 </nav>

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

@@ -1,6 +1,6 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { faUserGear } from '@fortawesome/free-solid-svg-icons';
@@ -8,11 +8,12 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Collapse, Dropdown, initFlowbite } from 'flowbite';
 import { KeycloakService } from 'keycloak-angular';
 import { filter, Observable, Subject, Subscription } from 'rxjs';
-import { User } from '../../../../../bizmatch-server/src/models/db.model';
-import { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { SortByOptions, User } from '../../../../../bizmatch-server/src/models/db.model';
+import { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, KeyValueAsSortBy, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../environments/environment';
 import { CriteriaChangeService } from '../../services/criteria-change.service';
 import { SearchService } from '../../services/search.service';
+import { SelectOptionsService } from '../../services/select-options.service';
 import { SharedService } from '../../services/shared.service';
 import { UserService } from '../../services/user.service';
 import { assignProperties, compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaProxy, map2User } from '../../utils/utils';
@@ -43,6 +44,8 @@ export class HeaderComponent {
   criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
   private routerSubscription: Subscription | undefined;
   baseRoute: string;
+  sortDropdownVisible: boolean;
+  sortByOptions: KeyValueAsSortBy[] = [];
   constructor(
     public keycloakService: KeycloakService,
     private router: Router,
@@ -52,8 +55,15 @@ export class HeaderComponent {
     private modalService: ModalService,
     private searchService: SearchService,
     private criteriaChangeService: CriteriaChangeService,
+    public selectOptions: SelectOptionsService,
   ) {}
-
+  @HostListener('document:click', ['$event'])
+  handleGlobalClick(event: Event) {
+    const target = event.target as HTMLElement;
+    if (target.id !== 'sortDropdownButton' && target.id !== 'sortDropdownMobileButton') {
+      this.sortDropdownVisible = false;
+    }
+  }
   async ngOnInit() {
     const token = await this.keycloakService.getToken();
     this.keycloakUser = map2User(token);
@@ -73,9 +83,11 @@ export class HeaderComponent {
     });
 
     this.checkCurrentRoute(this.router.url);
+    this.setupSortByOptions();
 
     this.routerSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: any) => {
       this.checkCurrentRoute(event.urlAfterRedirects);
+      this.setupSortByOptions();
     });
 
     this.userService.currentUser.pipe(untilDestroyed(this)).subscribe(u => {
@@ -90,7 +102,19 @@ export class HeaderComponent {
     this.criteria = getCriteriaProxy(this.baseRoute, this);
     this.searchService.search(this.criteria);
   }
-
+  setupSortByOptions() {
+    this.sortByOptions = [];
+    if (this.isProfessionalListing()) {
+      this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => s.type === 'professional')];
+    }
+    if (this.isBusinessListing()) {
+      this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => s.type === 'business' || s.type === 'listing')];
+    }
+    if (this.isCommercialPropertyListing()) {
+      this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => s.type === 'commercial' || s.type === 'listing')];
+    }
+    this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => !s.type)];
+  }
   ngAfterViewInit() {}
 
   async openModal() {
@@ -113,9 +137,21 @@ export class HeaderComponent {
   isActive(route: string): boolean {
     return this.router.url === route;
   }
-  isListingUrl(): boolean {
+  isFilterUrl(): boolean {
     return ['/businessListings', '/commercialPropertyListings', '/brokerListings'].includes(this.router.url);
   }
+  isBusinessListing(): boolean {
+    return ['/businessListings'].includes(this.router.url);
+  }
+  isCommercialPropertyListing(): boolean {
+    return ['/commercialPropertyListings'].includes(this.router.url);
+  }
+  isProfessionalListing(): boolean {
+    return ['/brokerListings'].includes(this.router.url);
+  }
+  // isSortingUrl(): boolean {
+  //   return ['/businessListings', '/commercialPropertyListings'].includes(this.router.url);
+  // }
   closeDropdown() {
     const dropdownButton = document.getElementById('user-menu-button');
     const dropdownMenu = this.user ? document.getElementById('user-login') : document.getElementById('user-unknown');
@@ -148,11 +184,11 @@ export class HeaderComponent {
   }
   getNumberOfFiltersSet() {
     if (this.criteria?.criteriaType === 'brokerListings') {
-      return compareObjects(createEmptyUserListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
+      return compareObjects(createEmptyUserListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius', 'sortBy']);
     } else if (this.criteria?.criteriaType === 'businessListings') {
-      return compareObjects(createEmptyBusinessListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
+      return compareObjects(createEmptyBusinessListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius', 'sortBy']);
     } else if (this.criteria?.criteriaType === 'commercialPropertyListings') {
-      return compareObjects(createEmptyCommercialPropertyListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
+      return compareObjects(createEmptyCommercialPropertyListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius', 'sortBy']);
     } else {
       return 0;
     }
@@ -160,4 +196,12 @@ export class HeaderComponent {
   isAdmin() {
     return this.keycloakService.getUserRoles(true).includes('ADMIN');
   }
+  sortBy(sortBy: SortByOptions) {
+    this.criteria.sortBy = sortBy;
+    this.sortDropdownVisible = false;
+    this.searchService.search(this.criteria);
+  }
+  toggleSortDropdown() {
+    this.sortDropdownVisible = !this.sortDropdownVisible;
+  }
 }

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

@@ -19,7 +19,7 @@
       <div class="p-6 space-y-6">
         <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>
+          <!-- <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

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

@@ -59,9 +59,7 @@ export class SearchModalComponent {
     this.loadCounties();
   }
 
-  ngOnChanges() {
-    console.log('sdf');
-  }
+  ngOnChanges() {}
   categoryClicked(checked: boolean, value: string) {
     if (checked) {
       this.criteria.types.push(value);