First version AI Search

bizmatch/src/app/pages/home/home.component.html

@@ -77,7 +77,7 @@
             </ul>
           </div>
           <div class="flex items-center border border-gray-300 rounded-full p-2">
-            <input type="text" placeholder="AI Search" class="flex-grow px-4 py-2 outline-none rounded-full text-sm md:text-base" />
+            <input type="text" [(ngModel)]="prompt" placeholder="AI Search" class="flex-grow px-4 py-2 outline-none rounded-full text-sm md:text-base" />
             <button class="bg-blue-600 text-white p-2 rounded-full" (click)="search()">
               <svg class="h-5 w-5 md:h-6 md:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M10.5 18.5A7.5 7.5 0 1018 10.5 7.5 7.5 0 0010.5 18.5z"></path>

bizmatch/src/app/pages/home/home.component.ts

@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { initFlowbite } from 'flowbite';
 import { KeycloakService } from 'keycloak-angular';
 import onChange from 'on-change';
 import { KeycloakUser, ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
@@ -25,7 +24,7 @@ export class HomeComponent {
   states = [];
   isMenuOpen = false;
   user: KeycloakUser;
-
+  prompt: string;
   public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public keycloakService: KeycloakService, private listingsService: ListingsService) {
     this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
     resetCriteria(this.criteria);
@@ -33,9 +32,11 @@ export class HomeComponent {
   async ngOnInit() {
     const token = await this.keycloakService.getToken();
     this.user = map2User(token);
-    setTimeout(() => {
-      initFlowbite();
-    });
+    // this.router.events.subscribe(event => {
+    //   if (event instanceof NavigationEnd) {
+    //     initFlowbite();
+    //   }
+    // });
   }
   async changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {
     this.activeTabAction = tabname;
@@ -48,6 +49,7 @@ export class HomeComponent {
   }
   search() {
     const data = { keep: true };
+    this.criteria.prompt = this.prompt;
     this.router.navigate([`${this.activeTabAction}Listings`]);
   }
 

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

@@ -85,11 +85,12 @@
 </div> -->
 <!-- business-listing.component.html -->
 <!-- <div class="w-full bg-slate-100"> -->
+
 <div class="container mx-auto p-4">
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
     @for (listing of listings; track listing.id) {
     <div class="bg-white rounded-lg shadow-md overflow-hidden">
-      <div class="p-4 flex flex-col h-full relative">
+      <div class="p-4 flex flex-col h-full relative z-[0]">
         <div class="flex items-center mb-2">
           <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2"></i>
           <span [class]="selectOptions.getTextColorType(listing.type)" class="font-semibold">{{ selectOptions.getBusiness(listing.type) }}</span>
@@ -111,4 +112,17 @@
     }
   </div>
 </div>
+
+<!-- <div class="container mx-auto px-4 py-8">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    @for (listing of listings; track listing.id) {
+    <div class="bg-white rounded-lg shadow-md overflow-hidden">
+      <div class="p-4">
+        <h3 class="text-lg font-semibold mb-2">{{ listing.title }}</h3>
+      </div>
+    </div>
+    }
+  </div>
+</div> -->
+
 <!-- </div> -->

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

@@ -70,9 +70,10 @@ export class BusinessListingsComponent {
     this.search();
   }
   async search() {
-    const listingReponse = await this.listingsService.getListings(this.criteria, 'business');
-    this.listings = listingReponse.data;
-    this.totalRecords = listingReponse.total;
+    this.listings = await this.listingsService.getListingsByPrompt(this.criteria);
+    // const listingReponse = await this.listingsService.getListings(this.criteria, 'business');
+    // this.listings = listingReponse.data;
+    // this.totalRecords = listingReponse.total;
     // this.cdRef.markForCheck();
     // this.cdRef.detectChanges();
   }