aknuth
/
bizmatch-project
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 5 Releases Wiki Activity

location eingebaut, back buttons angeglichen, paging & criteria korrigiert

This commit is contained in:
Andreas Knuth 2024-08-08 17:25:00 +02:00
parent 7df5d32cc4
commit 69b0a83b1e
21 changed files with 196 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
bizmatch-server/src/models/main.model.ts
View File

@ -64,7 +64,7 @@ export interface ListCriteria {
searchType: 'exact' | 'radius'; searchType: 'exact' | 'radius';
// radius: '5' | '20' | '50' | '100' | '200' | '300' | '400' | '500'; // radius: '5' | '20' | '50' | '100' | '200' | '300' | '400' | '500';
radius: number; radius: number;
criteriaType: 'business' | 'commercialProperty' | 'broker'; criteriaType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
} }
export interface BusinessListingCriteria extends ListCriteria { export interface BusinessListingCriteria extends ListCriteria {
minPrice: number; minPrice: number;
@ -82,20 +82,20 @@ export interface BusinessListingCriteria extends ListCriteria {
franchiseResale: boolean; franchiseResale: boolean;
title: string; title: string;
brokerName: string; brokerName: string;
criteriaType: 'business'; criteriaType: 'businessListings';
} }
export interface CommercialPropertyListingCriteria extends ListCriteria { export interface CommercialPropertyListingCriteria extends ListCriteria {
minPrice: number; minPrice: number;
maxPrice: number; maxPrice: number;
title: string; title: string;
criteriaType: 'commercialProperty'; criteriaType: 'commercialPropertyListings';
} }
export interface UserListingCriteria extends ListCriteria { export interface UserListingCriteria extends ListCriteria {
firstname: string; firstname: string;
lastname: string; lastname: string;
companyName: string; companyName: string;
counties: string[]; counties: string[];
criteriaType: 'broker'; criteriaType: 'brokerListings';
} }
export interface KeycloakUser { export interface KeycloakUser {

7
bizmatch-server/src/user/user.service.ts
View File

@ -72,7 +72,8 @@ export class UserService {
// Paginierung // Paginierung
query.limit(length).offset(start); query.limit(length).offset(start);
const results = await query; const data = await query;
const results = data.map(r => convertDrizzleUserToUser(r));
const totalCount = await this.getUserListingsCount(criteria); const totalCount = await this.getUserListingsCount(criteria);
return { return {
@ -117,7 +118,7 @@ export class UserService {
const user = users[0]; const user = users[0];
user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email)); user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email)); user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
return user; return convertDrizzleUserToUser(user);
} }
async saveUser(user: User): Promise<User> { async saveUser(user: User): Promise<User> {
try { try {
@ -131,7 +132,7 @@ export class UserService {
const drizzleUser = convertUserToDrizzleUser(validatedUser); const drizzleUser = convertUserToDrizzleUser(validatedUser);
if (user.id) { if (user.id) {
const [updateUser] = await this.conn.update(schema.users).set(drizzleUser).where(eq(schema.users.id, user.id)).returning(); const [updateUser] = await this.conn.update(schema.users).set(drizzleUser).where(eq(schema.users.id, user.id)).returning();
return updateUser as User; return convertDrizzleUserToUser(updateUser) as User;
} else { } else {
const [newUser] = await this.conn.insert(schema.users).values(drizzleUser).returning(); const [newUser] = await this.conn.insert(schema.users).values(drizzleUser).returning();
return convertDrizzleUserToUser(newUser) as User; return convertDrizzleUserToUser(newUser) as User;

71
bizmatch-server/src/utils.ts
View File

@ -67,69 +67,22 @@ export function convertDrizzleCommercialToCommercial(drizzleCommercialPropertyLi
return unflattenObject(o); return unflattenObject(o);
} }
export function convertUserToDrizzleUser(user: Partial<User>): DrizzleUser { export function convertUserToDrizzleUser(user: Partial<User>): DrizzleUser {
const { companyLocation, ...restUser } = user; return flattenObject(user);
// Ensure all required fields are present
if (!user.email || !user.firstname || !user.lastname) {
throw new Error('Missing required fields: email, firstname, or lastname');
}
return {
id: user.id,
email: user.email,
firstname: user.firstname,
lastname: user.lastname,
phoneNumber: user.phoneNumber || null,
description: user.description || null,
companyName: user.companyName || null,
companyOverview: user.companyOverview || null,
companyWebsite: user.companyWebsite || null,
city: companyLocation?.city || null,
state: companyLocation?.state || null,
offeredServices: user.offeredServices || null,
areasServed: user.areasServed || [],
hasProfile: user.hasProfile || false,
hasCompanyLogo: user.hasCompanyLogo || false,
licensedIn: user.licensedIn || [],
gender: user.gender || null,
customerType: user.customerType || null,
customerSubType: user.customerSubType || null,
created: user.created || new Date(),
updated: user.updated || new Date(),
latitude: companyLocation?.latitude || 0,
longitude: companyLocation?.longitude || 0,
};
} }
export function convertDrizzleUserToUser(drizzleUser: Partial<DrizzleUser>): User { export function convertDrizzleUserToUser(drizzleUser: Partial<DrizzleUser>): User {
const user = { const o = {
id: drizzleUser.id, companyLocation_city: drizzleUser.city,
firstname: drizzleUser.firstname, companyLocation_state: drizzleUser.state,
lastname: drizzleUser.lastname, companyLocation_latitude: drizzleUser.latitude,
email: drizzleUser.email, companyLocation_longitude: drizzleUser.longitude,
phoneNumber: drizzleUser.phoneNumber ?? null, ...drizzleUser,
description: drizzleUser.description ?? null,
companyName: drizzleUser.companyName ?? null,
companyOverview: drizzleUser.companyOverview ?? null,
companyWebsite: drizzleUser.companyWebsite ?? null,
companyLocation: {
city: drizzleUser.city,
state: drizzleUser.state,
latitude: drizzleUser.latitude, // Latitude wird zugewiesen, auch wenn es nicht direkt benötigt wird
longitude: drizzleUser.longitude, // Longitude wird zugewiesen, auch wenn es nicht direkt benötigt wird
},
offeredServices: drizzleUser.offeredServices ?? null,
areasServed: drizzleUser.areasServed ?? null,
hasProfile: drizzleUser.hasProfile ?? null,
hasCompanyLogo: drizzleUser.hasCompanyLogo ?? null,
licensedIn: drizzleUser.licensedIn ?? null,
gender: drizzleUser.gender ?? null,
customerType: drizzleUser.customerType,
customerSubType: drizzleUser.customerSubType ?? null,
created: drizzleUser.created ?? null,
updated: drizzleUser.updated ?? null,
}; };
return user; delete o.city;
delete o.state;
delete o.latitude;
delete o.longitude;
return unflattenObject(o);
} }
function flattenObject(obj: any, res: any = {}): any { function flattenObject(obj: any, res: any = {}): any {
for (const key in obj) { for (const key in obj) {

144
bizmatch/src/app/components/header/header.component.html
View File

@ -206,7 +206,7 @@
[ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/businessListings') }" [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/businessListings') }"
class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
aria-current="page" aria-current="page"
(click)="closeMenus()" (click)="closeMenusAndSetCriteria('businessListings')"
>Businesses</a >Businesses</a
> >
</li> </li>
@ -216,7 +216,7 @@
routerLink="/commercialPropertyListings" routerLink="/commercialPropertyListings"
[ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/commercialPropertyListings') }" [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/commercialPropertyListings') }"
class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
(click)="closeMenus()" (click)="closeMenusAndSetCriteria('commercialPropertyListings')"
>Properties</a >Properties</a
> >
</li> </li>
@ -226,7 +226,7 @@
routerLink="/brokerListings" routerLink="/brokerListings"
[ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/brokerListings') }" [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/brokerListings') }"
class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
(click)="closeMenus()" (click)="closeMenusAndSetCriteria('brokerListings')"
>Professionals</a >Professionals</a
> >
</li> </li>
@ -247,141 +247,3 @@
</div> </div>
} }
</nav> </nav>
<!-- ############################### -->
<!-- Filter Dropdown -->
<!-- ############################### -->
<!-- <app-dropdown [triggerEl]="triggerButton" [triggerType]="'click'">
<div id="filterDropdown" class="z-[50] w-80 p-3 bg-slate-200 rounded-lg shadow-lg dark:bg-gray-700">
<div class="mb-4">
<label for="price-range" class="block text-sm font-medium text-gray-900 dark:text-white">Price Range</label>
<div class="flex items-center space-x-4">
<input
type="number"
id="price-from"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="From"
value="300"
/>
<input
type="number"
id="price-to"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="To"
value="3500"
/>
</div>
</div>
<div class="mb-4">
<label for="sales-range" class="block text-sm font-medium text-gray-900 dark:text-white">Sales Revenue</label>
<div class="flex items-center space-x-4">
<input
type="number"
id="sales-from"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="From"
value="1"
/>
<input
type="number"
id="sales-to"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="To"
value="100"
/>
</div>
</div>
<div class="mb-4">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Category</label>
<div class="flex flex-wrap gap-2">
<button
class="px-3 py-1 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
>
Gaming
</button>
<button
class="px-3 py-1 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
>
Electronics
</button>
<button
class="px-3 py-1 text-sm font-medium text-white bg-blue-700 border border-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
Phone
</button>
<button
class="px-3 py-1 text-sm font-medium text-white bg-blue-700 border border-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
TV/Monitor
</button>
<button
class="px-3 py-1 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
>
Laptop
</button>
<button
class="px-3 py-1 text-sm font-medium text-white bg-blue-700 border border-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
Watch
</button>
</div>
</div>
<div class="mb-4">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">State</label>
<ul class="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
<li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600">
<div class="flex items-center ps-3">
<input
id="state-all"
type="radio"
value="all"
name="state"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
checked
/>
<label for="state-all" class="w-full py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">All</label>
</div>
</li>
<li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600">
<div class="flex items-center ps-3">
<input
id="state-new"
type="radio"
value="new"
name="state"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label for="state-new" class="w-full py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">New</label>
</div>
</li>
<li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600">
<div class="flex items-center ps-3">
<input
id="state-refurbished"
type="radio"
value="refurbished"
name="state"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label for="state-refurbished" class="w-full py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Refurbished</label>
</div>
</li>
</ul>
</div>
<div class="flex justify-between">
<button
type="button"
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 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
Show 32 Results
</button>
<button
type="button"
class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
Reset
</button>
</div>
</div>
</app-dropdown> -->

80
bizmatch/src/app/components/header/header.component.ts
View File

@ -6,7 +6,6 @@ import { NavigationEnd, Router, RouterModule } from '@angular/router';
import { faUserGear } from '@fortawesome/free-solid-svg-icons'; import { faUserGear } from '@fortawesome/free-solid-svg-icons';
import { Collapse, Dropdown, initFlowbite } from 'flowbite'; import { Collapse, Dropdown, initFlowbite } from 'flowbite';
import { KeycloakService } from 'keycloak-angular'; import { KeycloakService } from 'keycloak-angular';
import onChange from 'on-change';
import { filter, Observable, Subject, Subscription } from 'rxjs'; import { filter, Observable, Subject, Subscription } from 'rxjs';
import { User } from '../../../../../bizmatch-server/src/models/db.model'; import { User } from '../../../../../bizmatch-server/src/models/db.model';
import { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model'; import { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
@ -15,7 +14,7 @@ import { CriteriaChangeService } from '../../services/criteria-change.service';
import { SearchService } from '../../services/search.service'; import { SearchService } from '../../services/search.service';
import { SharedService } from '../../services/shared.service'; import { SharedService } from '../../services/shared.service';
import { UserService } from '../../services/user.service'; import { UserService } from '../../services/user.service';
import { compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaStateObject, map2User } from '../../utils/utils'; import { compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaProxy, map2User } from '../../utils/utils';
import { DropdownComponent } from '../dropdown/dropdown.component'; import { DropdownComponent } from '../dropdown/dropdown.component';
import { ModalService } from '../search-modal/modal.service'; import { ModalService } from '../search-modal/modal.service';
@Component({ @Component({
@ -80,43 +79,43 @@ export class HeaderComponent {
private checkCurrentRoute(url: string): void { private checkCurrentRoute(url: string): void {
this.baseRoute = url.split('/')[1]; // Nimmt den ersten Teil der Route nach dem ersten '/' this.baseRoute = url.split('/')[1]; // Nimmt den ersten Teil der Route nach dem ersten '/'
const specialRoutes = [, '', '']; const specialRoutes = [, '', ''];
if ('businessListings' === this.baseRoute) { this.criteria = getCriteriaProxy(this.baseRoute, this);
//this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandlerWrapper('business')); this.searchService.search(this.criteria);
//this.criteria = onChange(getCriteriaStateObject('business'), this.getSessionStorageHandler);
this.criteria = this.createEnhancedProxy(getCriteriaStateObject('business'));
} else if ('commercialPropertyListings' === this.baseRoute) {
// this.criteria = onChange(getCriteriaStateObject('commercialProperty'), getSessionStorageHandlerWrapper('commercialProperty'));
this.criteria = this.createEnhancedProxy(getCriteriaStateObject('commercialProperty'));
} else if ('brokerListings' === this.baseRoute) {
// this.criteria = onChange(getCriteriaStateObject('broker'), getSessionStorageHandlerWrapper('broker'));
this.criteria = this.createEnhancedProxy(getCriteriaStateObject('broker'));
} else {
this.criteria = undefined;
}
} }
private createEnhancedProxy(obj: any) { // getCriteriaProxy(path:string):BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria{
const component = this; // if ('businessListings' === path) {
// return this.createEnhancedProxy(getCriteriaStateObject('business'));
// } else if ('commercialPropertyListings' === path) {
// return this.createEnhancedProxy(getCriteriaStateObject('commercialProperty'));
// } else if ('brokerListings' === path) {
// return this.createEnhancedProxy(getCriteriaStateObject('broker'));
// } else {
// return undefined;
// }
// }
// private createEnhancedProxy(obj: any) {
// const component = this;
const sessionStorageHandler = function (path, value, previous, applyData) { // const sessionStorageHandler = function (path, value, previous, applyData) {
let criteriaType = ''; // let criteriaType = '';
if ('/businessListings' === window.location.pathname) { // if ('/businessListings' === window.location.pathname) {
criteriaType = 'business'; // criteriaType = 'business';
} else if ('/commercialPropertyListings' === window.location.pathname) { // } else if ('/commercialPropertyListings' === window.location.pathname) {
criteriaType = 'commercialProperty'; // criteriaType = 'commercialProperty';
} else if ('/brokerListings' === window.location.pathname) { // } else if ('/brokerListings' === window.location.pathname) {
criteriaType = 'broker'; // criteriaType = 'broker';
} // }
sessionStorage.setItem(`${criteriaType}_criteria`, JSON.stringify(this)); // sessionStorage.setItem(`${criteriaType}_criteria`, JSON.stringify(this));
}; // };
return onChange(obj, function (path, value, previous, applyData) { // return onChange(obj, function (path, value, previous, applyData) {
// Call the original sessionStorageHandler // // Call the original sessionStorageHandler
sessionStorageHandler.call(this, path, value, previous, applyData); // sessionStorageHandler.call(this, path, value, previous, applyData);
// Notify about the criteria change using the component's context // // Notify about the criteria change using the component's context
component.criteriaChangeService.notifyCriteriaChange(); // component.criteriaChangeService.notifyCriteriaChange();
}); // });
} // }
ngAfterViewInit() {} ngAfterViewInit() {}
@ -161,9 +160,12 @@ export class HeaderComponent {
collapse.collapse(); collapse.collapse();
} }
} }
closeMenus() { closeMenusAndSetCriteria(path: string) {
this.closeDropdown(); this.closeDropdown();
this.closeMobileMenu(); this.closeMobileMenu();
const criteria = getCriteriaProxy(path, this);
criteria.page = 1;
criteria.start = 0;
} }
ngOnDestroy() { ngOnDestroy() {
@ -171,11 +173,11 @@ export class HeaderComponent {
this.destroy$.complete(); this.destroy$.complete();
} }
getNumberOfFiltersSet() { getNumberOfFiltersSet() {
if (this.criteria?.criteriaType === 'broker') { 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']);
} else if (this.criteria?.criteriaType === 'business') { } 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']);
} else if (this.criteria?.criteriaType === 'commercialProperty') { } 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']);
} else { } else {
return 0; return 0;

6
bizmatch/src/app/components/search-modal/search-modal.component.html
View File

@ -15,7 +15,7 @@
<button class="text-blue-600 font-medium border-b-2 border-blue-600 pb-2">Classic Search</button> <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>
</div> </div>
@if(criteria.criteriaType==='business'){ @if(criteria.criteriaType==='businessListings'){
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
@ -233,7 +233,7 @@
</div> </div>
</div> </div>
</div> </div>
} @if(criteria.criteriaType==='commercialProperty'){ } @if(criteria.criteriaType==='commercialPropertyListings'){
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
@ -341,7 +341,7 @@
</div> </div>
</div> </div>
</div> </div>
} @if(criteria.criteriaType==='broker'){ } @if(criteria.criteriaType==='brokerListings'){
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4"> <div class="space-y-4">
<div> <div>

7
bizmatch/src/app/components/search-modal/search-modal.component.ts
View File

@ -46,6 +46,7 @@ export class SearchModalComponent {
this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => { this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
if (val) { if (val) {
this.criteria.page = 1; this.criteria.page = 1;
this.criteria.start = 0;
} }
}); });
this.loadCities(); this.loadCities();
@ -137,9 +138,9 @@ export class SearchModalComponent {
setTotalNumberOfResults() { setTotalNumberOfResults() {
if (this.criteria) { if (this.criteria) {
console.log(`Getting total number of results for ${this.criteria.criteriaType}`); console.log(`Getting total number of results for ${this.criteria.criteriaType}`);
if (this.criteria.criteriaType === 'business' || this.criteria.criteriaType === 'commercialProperty') { if (this.criteria.criteriaType === 'businessListings' || this.criteria.criteriaType === 'commercialPropertyListings') {
this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria, this.criteria.criteriaType); this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria, this.criteria.criteriaType === 'businessListings' ? 'business' : 'commercialProperty');
} else if (this.criteria.criteriaType === 'broker') { } else if (this.criteria.criteriaType === 'brokerListings') {
this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria); this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria);
} else { } else {
this.numberOfResults$ = of(); this.numberOfResults$ = of();

7
bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts
View File

@ -2,10 +2,9 @@ import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { KeycloakService } from 'keycloak-angular'; import { KeycloakService } from 'keycloak-angular';
import onChange from 'on-change';
import { lastValueFrom } from 'rxjs'; import { lastValueFrom } from 'rxjs';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model'; import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { BusinessListingCriteria, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model'; import { KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment'; import { environment } from '../../../../environments/environment';
import { MessageService } from '../../../components/message/message.service'; import { MessageService } from '../../../components/message/message.service';
import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component'; import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
@ -17,7 +16,7 @@ import { MailService } from '../../../services/mail.service';
import { SelectOptionsService } from '../../../services/select-options.service'; import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service'; import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module'; import { SharedModule } from '../../../shared/shared/shared.module';
import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../../../utils/utils'; import { map2User } from '../../../utils/utils';
@Component({ @Component({
selector: 'app-details-business-listing', selector: 'app-details-business-listing',
standalone: true, standalone: true,
@ -47,7 +46,6 @@ export class DetailsBusinessListingComponent {
]; ];
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined; private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
listing: BusinessListing; listing: BusinessListing;
criteria: BusinessListingCriteria;
mailinfo: MailInfo; mailinfo: MailInfo;
environment = environment; environment = environment;
keycloakUser: KeycloakUser; keycloakUser: KeycloakUser;
@ -76,7 +74,6 @@ export class DetailsBusinessListingComponent {
} }
}); });
this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl }; this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl };
this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandler.bind('business'));
} }
async ngOnInit() { async ngOnInit() {

7
bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
View File

@ -101,8 +101,11 @@
<div class="bg-white shadow-md rounded-lg overflow-hidden"> <div class="bg-white shadow-md rounded-lg overflow-hidden">
<div class="p-6 relative"> <div class="p-6 relative">
<h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1> <h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1>
<button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700" (click)="historyService.goBack()"> <button
<fa-icon [icon]="faTimes" size="2x"></fa-icon> (click)="historyService.goBack()"
class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
>
<i class="fas fa-times"></i>
</button> </button>
<div class="lg:hidden"> <div class="lg:hidden">
@if (listing && listing.imageOrder && listing.imageOrder.length > 0) { @if (listing && listing.imageOrder && listing.imageOrder.length > 0) {

11
bizmatch/src/app/pages/details/details-user/details-user.component.html
View File

@ -138,7 +138,7 @@
@if(user){ @if(user){
<div class="bg-white shadow-md rounded-lg overflow-hidden"> <div class="bg-white shadow-md rounded-lg overflow-hidden">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between p-4 border-b"> <div class="flex items-center justify-between p-4 border-b relative">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<!-- <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" /> --> <!-- <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" /> -->
@if(user.hasProfile){ @if(user.hasProfile){
@ -167,7 +167,12 @@
} }
<!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> --> <!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
</div> </div>
<button class="text-red-500 text-2xl" (click)="historyService.goBack()">&times;</button> <button
(click)="historyService.goBack()"
class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
>
<i class="fas fa-times"></i>
</button>
</div> </div>
<!-- Description --> <!-- Description -->
@ -194,7 +199,7 @@
</div> </div>
<div class="flex flex-col sm:flex-row sm:items-center"> <div class="flex flex-col sm:flex-row sm:items-center">
<span class="font-semibold w-40 p-2">Company Location</span> <span class="font-semibold w-40 p-2">Company Location</span>
<span class="p-2 flex-grow">{{ user.companyLocation }}</span> <span class="p-2 flex-grow">{{ user.companyLocation.city }} - {{ user.companyLocation.state }}</span>
</div> </div>
</div> </div>

63
bizmatch/src/app/pages/home/home.component.ts
View File

@ -5,7 +5,6 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select'; import { NgSelectModule } from '@ng-select/ng-select';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { KeycloakService } from 'keycloak-angular'; import { KeycloakService } from 'keycloak-angular';
import onChange from 'on-change';
import { catchError, concat, debounceTime, distinctUntilChanged, Observable, of, Subject, Subscription, switchMap, tap } from 'rxjs'; import { catchError, concat, debounceTime, distinctUntilChanged, Observable, of, Subject, Subscription, switchMap, tap } from 'rxjs';
import { BusinessListingCriteria, CityAndStateResult, CommercialPropertyListingCriteria, GeoResult, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model'; import { BusinessListingCriteria, CityAndStateResult, CommercialPropertyListingCriteria, GeoResult, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { ModalService } from '../../components/search-modal/modal.service'; import { ModalService } from '../../components/search-modal/modal.service';
@ -15,7 +14,7 @@ import { ListingsService } from '../../services/listings.service';
import { SearchService } from '../../services/search.service'; import { SearchService } from '../../services/search.service';
import { SelectOptionsService } from '../../services/select-options.service'; import { SelectOptionsService } from '../../services/select-options.service';
import { UserService } from '../../services/user.service'; import { UserService } from '../../services/user.service';
import { compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaStateObject, map2User } from '../../utils/utils'; import { compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, createEnhancedProxy, getCriteriaStateObject, map2User } from '../../utils/utils';
@UntilDestroy() @UntilDestroy()
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
@ -55,10 +54,10 @@ export class HomeComponent {
) {} ) {}
async ngOnInit() { async ngOnInit() {
const token = await this.keycloakService.getToken(); const token = await this.keycloakService.getToken();
sessionStorage.removeItem('business_criteria'); sessionStorage.removeItem('businessListings');
sessionStorage.removeItem('commercialProperty_criteria'); sessionStorage.removeItem('commercialPropertyListings');
sessionStorage.removeItem('broker_criteria'); sessionStorage.removeItem('brokerListings');
this.criteria = this.createEnhancedProxy(getCriteriaStateObject('business')); this.criteria = createEnhancedProxy(getCriteriaStateObject('businessListings'), this);
this.user = map2User(token); this.user = map2User(token);
this.loadCities(); this.loadCities();
this.setupCriteriaChangeListener(); this.setupCriteriaChangeListener();
@ -66,31 +65,31 @@ export class HomeComponent {
async changeTab(tabname: 'business' | 'commercialProperty' | 'broker') { async changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {
this.activeTabAction = tabname; this.activeTabAction = tabname;
if ('business' === tabname) { if ('business' === tabname) {
this.criteria = this.createEnhancedProxy(getCriteriaStateObject('business')); this.criteria = createEnhancedProxy(getCriteriaStateObject('businessListings'), this);
} else if ('commercialProperty' === tabname) { } else if ('commercialProperty' === tabname) {
this.criteria = this.createEnhancedProxy(getCriteriaStateObject('commercialProperty')); this.criteria = createEnhancedProxy(getCriteriaStateObject('commercialPropertyListings'), this);
} else if ('broker' === tabname) { } else if ('broker' === tabname) {
this.criteria = this.createEnhancedProxy(getCriteriaStateObject('broker')); this.criteria = createEnhancedProxy(getCriteriaStateObject('brokerListings'), this);
} else { } else {
this.criteria = undefined; this.criteria = undefined;
} }
} }
private createEnhancedProxy(obj: any) { // private createEnhancedProxy(obj: any) {
const component = this; // const component = this;
const sessionStorageHandler = function (path, value, previous, applyData) { // const sessionStorageHandler = function (path, value, previous, applyData) {
let criteriaType = this.criteriaType; // let criteriaType = this.criteriaType;
sessionStorage.setItem(`${criteriaType}_criteria`, JSON.stringify(this)); // sessionStorage.setItem(`${criteriaType}_criteria`, JSON.stringify(this));
}; // };
return onChange(obj, function (path, value, previous, applyData) { // return onChange(obj, function (path, value, previous, applyData) {
// Call the original sessionStorageHandler // // Call the original sessionStorageHandler
sessionStorageHandler.call(this, path, value, previous, applyData); // sessionStorageHandler.call(this, path, value, previous, applyData);
// Notify about the criteria change using the component's context // // Notify about the criteria change using the component's context
component.criteriaChangeService.notifyCriteriaChange(); // component.criteriaChangeService.notifyCriteriaChange();
}); // });
} // }
search() { search() {
this.router.navigate([`${this.activeTabAction}Listings`]); this.router.navigate([`${this.activeTabAction}Listings`]);
} }
@ -169,18 +168,18 @@ export class HomeComponent {
} }
} }
getTypes() { getTypes() {
if (this.criteria.criteriaType === 'business') { if (this.criteria.criteriaType === 'businessListings') {
return this.selectOptions.typesOfBusiness; return this.selectOptions.typesOfBusiness;
} else if (this.criteria.criteriaType === 'commercialProperty') { } else if (this.criteria.criteriaType === 'commercialPropertyListings') {
return this.selectOptions.typesOfCommercialProperty; return this.selectOptions.typesOfCommercialProperty;
} else { } else {
return this.selectOptions.customerSubTypes; return this.selectOptions.customerSubTypes;
} }
} }
getPlaceholderLabel() { getPlaceholderLabel() {
if (this.criteria.criteriaType === 'business') { if (this.criteria.criteriaType === 'businessListings') {
return 'Business Type'; return 'Business Type';
} else if (this.criteria.criteriaType === 'commercialProperty') { } else if (this.criteria.criteriaType === 'commercialPropertyListings') {
return 'Property Type'; return 'Property Type';
} else { } else {
return 'Professional Type'; return 'Professional Type';
@ -189,9 +188,9 @@ export class HomeComponent {
setTotalNumberOfResults() { setTotalNumberOfResults() {
if (this.criteria) { if (this.criteria) {
console.log(`Getting total number of results for ${this.criteria.criteriaType}`); console.log(`Getting total number of results for ${this.criteria.criteriaType}`);
if (this.criteria.criteriaType === 'business' || this.criteria.criteriaType === 'commercialProperty') { if (this.criteria.criteriaType === 'businessListings' || this.criteria.criteriaType === 'commercialPropertyListings') {
this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria, this.criteria.criteriaType); this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria, this.criteria.criteriaType === 'businessListings' ? 'business' : 'commercialProperty');
} else if (this.criteria.criteriaType === 'broker') { } else if (this.criteria.criteriaType === 'brokerListings') {
this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria); this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria);
} else { } else {
this.numberOfResults$ = of(); this.numberOfResults$ = of();
@ -199,11 +198,11 @@ export class HomeComponent {
} }
} }
getNumberOfFiltersSet() { getNumberOfFiltersSet() {
if (this.criteria?.criteriaType === 'broker') { 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']);
} else if (this.criteria?.criteriaType === 'business') { } 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']);
} else if (this.criteria?.criteriaType === 'commercialProperty') { } 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']);
} else { } else {
return 0; return 0;

5
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
View File

@ -53,10 +53,10 @@ export class BrokerListingsComponent {
private route: ActivatedRoute, private route: ActivatedRoute,
private searchService: SearchService, private searchService: SearchService,
) { ) {
this.criteria = getCriteriaStateObject('broker'); this.criteria = getCriteriaStateObject('brokerListings');
this.init(); this.init();
this.searchService.currentCriteria.subscribe(criteria => { this.searchService.currentCriteria.subscribe(criteria => {
if (criteria && criteria.criteriaType === 'broker') { if (criteria && criteria.criteriaType === 'brokerListings') {
this.criteria = criteria as UserListingCriteria; this.criteria = criteria as UserListingCriteria;
this.search(); this.search();
} }
@ -74,6 +74,7 @@ export class BrokerListingsComponent {
this.users = usersReponse.results; this.users = usersReponse.results;
this.totalRecords = usersReponse.totalCount; this.totalRecords = usersReponse.totalCount;
this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1; this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1;
this.page = this.criteria.page ? this.criteria.page : 1;
this.cdRef.markForCheck(); this.cdRef.markForCheck();
this.cdRef.detectChanges(); this.cdRef.detectChanges();
} }

6
bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts
View File

@ -49,10 +49,10 @@ export class BusinessListingsComponent {
private route: ActivatedRoute, private route: ActivatedRoute,
private searchService: SearchService, private searchService: SearchService,
) { ) {
this.criteria = getCriteriaStateObject('business'); this.criteria = getCriteriaStateObject('businessListings');
this.init(); this.init();
this.searchService.currentCriteria.subscribe(criteria => { this.searchService.currentCriteria.subscribe(criteria => {
if (criteria && criteria.criteriaType === 'business') { if (criteria && criteria.criteriaType === 'businessListings') {
this.criteria = criteria as BusinessListingCriteria; this.criteria = criteria as BusinessListingCriteria;
this.search(); this.search();
} }
@ -66,11 +66,11 @@ export class BusinessListingsComponent {
} }
async search() { async search() {
//this.listings = await this.listingsService.getListingsByPrompt(this.criteria);
const listingReponse = await this.listingsService.getListings(this.criteria, 'business'); const listingReponse = await this.listingsService.getListings(this.criteria, 'business');
this.listings = listingReponse.results; this.listings = listingReponse.results;
this.totalRecords = listingReponse.totalCount; this.totalRecords = listingReponse.totalCount;
this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1; this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1;
this.page = this.criteria.page ? this.criteria.page : 1;
this.cdRef.markForCheck(); this.cdRef.markForCheck();
this.cdRef.detectChanges(); this.cdRef.detectChanges();
} }

10
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts
View File

@ -48,10 +48,10 @@ export class CommercialPropertyListingsComponent {
private route: ActivatedRoute, private route: ActivatedRoute,
private searchService: SearchService, private searchService: SearchService,
) { ) {
this.criteria = getCriteriaStateObject('commercialProperty'); this.criteria = getCriteriaStateObject('commercialPropertyListings');
this.init(); this.init();
this.searchService.currentCriteria.subscribe(criteria => { this.searchService.currentCriteria.subscribe(criteria => {
if (criteria && criteria.criteriaType === 'commercialProperty') { if (criteria && criteria.criteriaType === 'commercialPropertyListings') {
this.criteria = criteria as CommercialPropertyListingCriteria; this.criteria = criteria as CommercialPropertyListingCriteria;
this.search(); this.search();
} }
@ -63,16 +63,12 @@ export class CommercialPropertyListingsComponent {
this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count })); this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count }));
this.search(); this.search();
} }
refine() {
this.criteria.start = 0;
this.criteria.page = 0;
this.search();
}
async search() { async search() {
const listingReponse = await this.listingsService.getListings(this.criteria, 'commercialProperty'); const listingReponse = await this.listingsService.getListings(this.criteria, 'commercialProperty');
this.listings = (<ResponseCommercialPropertyListingArray>listingReponse).results; this.listings = (<ResponseCommercialPropertyListingArray>listingReponse).results;
this.totalRecords = (<ResponseCommercialPropertyListingArray>listingReponse).totalCount; this.totalRecords = (<ResponseCommercialPropertyListingArray>listingReponse).totalCount;
this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1; this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1;
this.page = this.criteria.page ? this.criteria.page : 1;
this.cdRef.markForCheck(); this.cdRef.markForCheck();
this.cdRef.detectChanges(); this.cdRef.detectChanges();
} }

7
bizmatch/src/app/pages/subscription/account/account.component.html
View File

@ -71,13 +71,14 @@
<option *ngFor="let type of customerTypes" [value]="type">{{ type | titlecase }}</option> <option *ngFor="let type of customerTypes" [value]="type">{{ type | titlecase }}</option>
</select> </select>
</div> --> </div> -->
@if (!isAdmin()){ @if (isAdmin() && !id){
<app-validated-select label="Customer Type" name="customerType" [(ngModel)]="user.customerType" [options]="customerTypeOptions"></app-validated-select>
}@else{
<div> <div>
<label for="customerType" class="block text-sm font-medium text-gray-700">User Type</label> <label for="customerType" class="block text-sm font-medium text-gray-700">User Type</label>
<span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span> <span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span>
</div> </div>
}@else{
<app-validated-select label="Customer Type" name="customerType" [(ngModel)]="user.customerType" [options]="customerTypeOptions"></app-validated-select>
} @if (isProfessional){ } @if (isProfessional){
<!-- <div> <!-- <div>
<label for="customerSubType" class="block text-sm font-medium text-gray-700">Professional Type</label> <label for="customerSubType" class="block text-sm font-medium text-gray-700">Professional Type</label>

2
bizmatch/src/app/pages/subscription/account/account.component.ts
View File

@ -56,7 +56,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
styleUrl: './account.component.scss', styleUrl: './account.component.scss',
}) })
export class AccountComponent { export class AccountComponent {
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined; id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user: User; user: User;
subscriptions: Array<Subscription>; subscriptions: Array<Subscription>;
userSubscriptions: Array<Subscription> = []; userSubscriptions: Array<Subscription> = [];

14
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
View File

@ -52,8 +52,10 @@
</div> </div>
</div> --> </div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select> <!-- <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
<app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> <app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> -->
<app-validated-city label="Location" name="location" [(ngModel)]="listing.location"></app-validated-city>
<app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
</div> </div>
<!-- <div class="flex mb-4 space-x-4"> <!-- <div class="flex mb-4 space-x-4">
@ -83,8 +85,8 @@
</div> </div>
</div> --> </div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
<app-validated-price label="Sales Revenue" name="salesRevenue" [(ngModel)]="listing.salesRevenue"></app-validated-price> <app-validated-price label="Sales Revenue" name="salesRevenue" [(ngModel)]="listing.salesRevenue"></app-validated-price>
<app-validated-price label="Cash Flow" name="cashFlow" [(ngModel)]="listing.cashFlow"></app-validated-price>
</div> </div>
<!-- <div class="mb-4"> <!-- <div class="mb-4">
@ -99,9 +101,9 @@
currencyMask currencyMask
/> />
</div> --> </div> -->
<div> <!-- <div>
<app-validated-price label="Cash Flow" name="cashFlow" [(ngModel)]="listing.cashFlow"></app-validated-price>
</div> </div> -->
<!-- <div class="flex mb-4 space-x-4"> <!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2"> <div class="w-1/2">

2
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts
View File

@ -17,6 +17,7 @@ import { AutoCompleteCompleteEvent, ImageProperty, createDefaultBusinessListing,
import { environment } from '../../../../environments/environment'; import { environment } from '../../../../environments/environment';
import { MessageService } from '../../../components/message/message.service'; import { MessageService } from '../../../components/message/message.service';
import { ValidatedCityComponent } from '../../../components/validated-city/validated-city.component';
import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component'; import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component'; import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component'; import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component';
@ -45,6 +46,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
ValidatedNgSelectComponent, ValidatedNgSelectComponent,
ValidatedPriceComponent, ValidatedPriceComponent,
ValidatedTextareaComponent, ValidatedTextareaComponent,
ValidatedCityComponent,
], ],
providers: [], providers: [],
templateUrl: './edit-business-listing.component.html', templateUrl: './edit-business-listing.component.html',

12
bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
View File

@ -35,8 +35,9 @@
<label for="type" class="block text-sm font-bold text-gray-700 mb-1">Property Category</label> <label for="type" class="block text-sm font-bold text-gray-700 mb-1">Property Category</label>
<ng-select [items]="typesOfCommercialProperty" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select> <ng-select [items]="typesOfCommercialProperty" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
</div> --> </div> -->
<div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select> <app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select>
<app-validated-city label="Location" name="location" [(ngModel)]="listing.location"></app-validated-city>
</div> </div>
<!-- <div class="flex mb-4 space-x-4"> <!-- <div class="flex mb-4 space-x-4">
@ -49,10 +50,11 @@
<input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" /> <input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
</div> </div>
</div> --> </div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> -->
<app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select> <!-- <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
<app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> <app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> -->
</div>
<!-- </div> -->
<!-- <div class="flex mb-4 space-x-4"> <!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2"> <div class="w-1/2">

2
bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.ts
View File

@ -21,6 +21,7 @@ import { ConfirmationComponent } from '../../../components/confirmation/confirma
import { ConfirmationService } from '../../../components/confirmation/confirmation.service'; import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
import { DragDropMixedComponent } from '../../../components/drag-drop-mixed/drag-drop-mixed.component'; import { DragDropMixedComponent } from '../../../components/drag-drop-mixed/drag-drop-mixed.component';
import { MessageService } from '../../../components/message/message.service'; import { MessageService } from '../../../components/message/message.service';
import { ValidatedCityComponent } from '../../../components/validated-city/validated-city.component';
import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component'; import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component'; import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component'; import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component';
@ -50,6 +51,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
ValidatedQuillComponent, ValidatedQuillComponent,
ValidatedNgSelectComponent, ValidatedNgSelectComponent,
ValidatedPriceComponent, ValidatedPriceComponent,
ValidatedCityComponent,
], ],
providers: [], providers: [],
templateUrl: './edit-commercial-property-listing.component.html', templateUrl: './edit-commercial-property-listing.component.html',

53
bizmatch/src/app/utils/utils.ts
View File

@ -97,7 +97,7 @@ export function createEmptyBusinessListingCriteria(): BusinessListingCriteria {
city: '', city: '',
types: [], types: [],
prompt: '', prompt: '',
criteriaType: 'business', criteriaType: 'businessListings',
minPrice: null, minPrice: null,
maxPrice: null, maxPrice: null,
minRevenue: null, minRevenue: null,
@ -127,7 +127,7 @@ export function createEmptyCommercialPropertyListingCriteria(): CommercialProper
city: '', city: '',
types: [], types: [],
prompt: '', prompt: '',
criteriaType: 'commercialProperty', criteriaType: 'commercialPropertyListings',
minPrice: null, minPrice: null,
maxPrice: null, maxPrice: null,
title: '', title: '',
@ -144,7 +144,7 @@ export function createEmptyUserListingCriteria(): UserListingCriteria {
city: '', city: '',
types: [], types: [],
prompt: '', prompt: '',
criteriaType: 'broker', criteriaType: 'brokerListings',
firstname: '', firstname: '',
lastname: '', lastname: '',
companyName: '', companyName: '',
@ -184,16 +184,16 @@ export const getSessionStorageHandlerWrapper = param => {
}; };
}; };
export function getCriteriaStateObject(criteriaType: 'business' | 'commercialProperty' | 'broker') { export function getCriteriaStateObject(criteriaType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings') {
let initialState; let initialState;
if (criteriaType === 'business') { if (criteriaType === 'businessListings') {
initialState = createEmptyBusinessListingCriteria(); initialState = createEmptyBusinessListingCriteria();
} else if (criteriaType === 'commercialProperty') { } else if (criteriaType === 'commercialPropertyListings') {
initialState = createEmptyCommercialPropertyListingCriteria(); initialState = createEmptyCommercialPropertyListingCriteria();
} else { } else {
initialState = createEmptyUserListingCriteria(); initialState = createEmptyUserListingCriteria();
} }
const storedState = sessionStorage.getItem(`${criteriaType}_criteria`); const storedState = sessionStorage.getItem(`${criteriaType}`);
return storedState ? JSON.parse(storedState) : initialState; return storedState ? JSON.parse(storedState) : initialState;
} }
@ -242,6 +242,7 @@ export function getDialogWidth(dimensions): string {
} }
import { initFlowbite } from 'flowbite'; import { initFlowbite } from 'flowbite';
import onChange from 'on-change';
import { Subject, concatMap, delay, of } from 'rxjs'; import { Subject, concatMap, delay, of } from 'rxjs';
const flowbiteQueue = new Subject<() => void>(); const flowbiteQueue = new Subject<() => void>();
@ -370,3 +371,41 @@ function arraysEqual(arr1: any[] | null | undefined, arr2: any[] | null | undefi
} }
return true; return true;
} }
// -----------------------------
// Criteria Proxy
// -----------------------------
export function getCriteriaProxy(path: string, component: any): BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria {
if ('businessListings' === path) {
return createEnhancedProxy(getCriteriaStateObject('businessListings'), component);
} else if ('commercialPropertyListings' === path) {
return createEnhancedProxy(getCriteriaStateObject('commercialPropertyListings'), component);
} else if ('brokerListings' === path) {
return createEnhancedProxy(getCriteriaStateObject('brokerListings'), component);
} else {
return undefined;
}
}
export function createEnhancedProxy(obj: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria, component: any) {
// const component = this;
const sessionStorageHandler = function (path, value, previous, applyData) {
// let criteriaType = '';
// if ('/businessListings' === window.location.pathname) {
// criteriaType = 'business';
// } else if ('/commercialPropertyListings' === window.location.pathname) {
// criteriaType = 'commercialProperty';
// } else if ('/brokerListings' === window.location.pathname) {
// criteriaType = 'broker';
// }
sessionStorage.setItem(`${obj.criteriaType}`, JSON.stringify(this));
};
return onChange(obj, function (path, value, previous, applyData) {
// Call the original sessionStorageHandler
sessionStorageHandler.call(this, path, value, previous, applyData);
// Notify about the criteria change using the component's context
component.criteriaChangeService.notifyCriteriaChange();
});
}