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

format on save, resolve compile errors, functionality 1. stage

This commit is contained in:
Andreas Knuth 2024-04-23 17:32:21 +02:00
parent 7f0f21b598
commit 9e03620be7
32 changed files with 1506 additions and 1389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bizmatch-server/src/file/file.service.ts
View File

@ -53,7 +53,7 @@ export class FileService {
// await fs.outputFile(`./pictures/logo/${userId}`, file.buffer); // await fs.outputFile(`./pictures/logo/${userId}`, file.buffer);
} }
hasCompanyLogo(userId: string){ hasCompanyLogo(userId: string){
return fs.existsSync(`./pictures/logo/${userId}.avif`) return fs.existsSync(`./pictures/logo/${userId}.avif`)?true:false
} }
async getPropertyImages(listingId: string): Promise<ImageProperty[]> { async getPropertyImages(listingId: string): Promise<ImageProperty[]> {

8
bizmatch-server/src/listings/commercial-property-listings.controller.ts
View File

@ -21,10 +21,10 @@ export class CommercialPropertyListingsController {
// findByUserId(@Param('userid') userid:string): any { // findByUserId(@Param('userid') userid:string): any {
// return this.listingsService.findByUserId(userid,commercials); // return this.listingsService.findByUserId(userid,commercials);
// } // }
// @Post('search') @Post('search')
// find(@Body() criteria: ListingCriteria): any { find(@Body() criteria: ListingCriteria): any {
// return this.listingsService.findByState(criteria.state,commercials); return this.listingsService.findListingsByCriteria(criteria,commercials);
// } }
@Post() @Post()
create(@Body() listing: any){ create(@Body() listing: any){

14
bizmatch-server/src/listings/listings.service.ts
View File

@ -23,25 +23,25 @@ export class ListingsService {
constructor(@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger, constructor(@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
@Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,) { @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,) {
} }
private getConditions(criteria: ListingCriteria): any[] { private getConditions(criteria: ListingCriteria,table: typeof businesses | typeof commercials): any[] {
const conditions = []; const conditions = [];
if (criteria.type) { if (criteria.type) {
conditions.push(eq(businesses.type, criteria.type)); conditions.push(eq(table.type, criteria.type));
} }
if (criteria.state) { if (criteria.state) {
conditions.push(eq(businesses.state, criteria.state)); conditions.push(eq(table.state, criteria.state));
} }
if (criteria.minPrice) { if (criteria.minPrice) {
conditions.push(gte(businesses.price, criteria.minPrice)); conditions.push(gte(table.price, criteria.minPrice));
} }
if (criteria.maxPrice) { if (criteria.maxPrice) {
conditions.push(lte(businesses.price, criteria.maxPrice)); conditions.push(lte(table.price, criteria.maxPrice));
} }
if (criteria.realEstateChecked) { if (criteria.realEstateChecked) {
conditions.push(eq(businesses.realEstateIncluded, true)); conditions.push(eq(businesses.realEstateIncluded, true));
} }
if (criteria.title) { if (criteria.title) {
conditions.push(ilike(businesses.title, `%${criteria.title}%`)); conditions.push(ilike(table.title, `%${criteria.title}%`));
} }
return conditions; return conditions;
} }
@ -54,7 +54,7 @@ export class ListingsService {
return await this.findListings(table, criteria, start, length) return await this.findListings(table, criteria, start, length)
} }
private async findListings(table: typeof businesses | typeof commercials, criteria: ListingCriteria, start = 0, length = 12): Promise<any> { private async findListings(table: typeof businesses | typeof commercials, criteria: ListingCriteria, start = 0, length = 12): Promise<any> {
const conditions = this.getConditions(criteria) const conditions = this.getConditions(criteria,table)
const [data, total] = await Promise.all([ const [data, total] = await Promise.all([
this.conn.select().from(table).where(and(...conditions)).offset(start).limit(length), this.conn.select().from(table).where(and(...conditions)).offset(start).limit(length),
this.conn.select({ count: sql`count(*)` }).from(table).where(and(...conditions)).then((result) => Number(result[0].count)), this.conn.select({ count: sql`count(*)` }).from(table).where(and(...conditions)).then((result) => Number(result[0].count)),

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

@ -56,7 +56,6 @@ export interface ListingCriteria {
maxPrice:number, maxPrice:number,
realEstateChecked:boolean, realEstateChecked:boolean,
title:string, title:string,
listingsCategory:'business' | 'commercialProperty',
category:'professional|broker' category:'professional|broker'
} }

10
bizmatch-server/src/user/user.controller.ts
View File

@ -1,4 +1,4 @@
import { Body, Controller, Get, Inject, Param, Post, Put } from '@nestjs/common'; import { Body, Controller, Get, Inject, Param, Post, Put, Query, Req } from '@nestjs/common';
import { UserService } from './user.service.js'; import { UserService } from './user.service.js';
import { WINSTON_MODULE_PROVIDER } from 'nest-winston'; import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
import { Logger } from 'winston'; import { Logger } from 'winston';
@ -9,6 +9,13 @@ export class UserController {
constructor(private userService: UserService, @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {} constructor(private userService: UserService, @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {}
@Get()
findByMail(@Query('mail') mail: string): any {
this.logger.info(`Searching for user with EMail: ${mail}`);
const user = this.userService.getUserByMail(mail);
this.logger.info(`Found user: ${JSON.stringify(user)}`);
return user;
}
@Get(':id') @Get(':id')
findById(@Param('id') id: string): any { findById(@Param('id') id: string): any {
this.logger.info(`Searching for user with ID: ${id}`); this.logger.info(`Searching for user with ID: ${id}`);
@ -16,7 +23,6 @@ export class UserController {
this.logger.info(`Found user: ${JSON.stringify(user)}`); this.logger.info(`Found user: ${JSON.stringify(user)}`);
return user; return user;
} }
@Post() @Post()
save(@Body() user: any): Promise<User> { save(@Body() user: any): Promise<User> {
this.logger.info(`Saving user: ${JSON.stringify(user)}`); this.logger.info(`Saving user: ${JSON.stringify(user)}`);

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

@ -20,10 +20,17 @@ export class UserService {
private getConditions(criteria: ListingCriteria): any[] { private getConditions(criteria: ListingCriteria): any[] {
const conditions = []; const conditions = [];
if (criteria.state) { if (criteria.state) {
conditions.push(); conditions.push(sql`EXISTS (SELECT 1 FROM unnest(users."areasServed") AS area WHERE area LIKE '%' || ${criteria.state} || '%')`);
} }
return conditions; return conditions;
} }
async getUserByMail( id:string){
const users = await this.conn.select().from(schema.users).where(sql`email = ${id}`) as User[]
const user = users[0]
user.hasCompanyLogo=this.fileService.hasCompanyLogo(id);
user.hasProfile=this.fileService.hasProfile(id);
return user;
}
async getUserById( id:string){ async getUserById( id:string){
const users = await this.conn.select().from(schema.users).where(sql`id = ${id}`) as User[] const users = await this.conn.select().from(schema.users).where(sql`id = ${id}`) as User[]
const user = users[0] const user = users[0]
@ -41,8 +48,11 @@ export class UserService {
} }
} }
async findUser(criteria:ListingCriteria){ async findUser(criteria:ListingCriteria){
const users = await this.conn.execute(sql`SELECT * FROM users WHERE EXISTS (SELECT 1 FROM unnest(users."areasServed") AS area WHERE area LIKE '%' || ${criteria.state} || '%')`) const start = criteria.start ? criteria.start : 0;
return users.rows const length = criteria.length ? criteria.length : 12;
const conditions = this.getConditions(criteria)
const users = await this.conn.select().from(schema.users).where(and(...conditions)).offset(start).limit(length)
return users
} }
} }

18
bizmatch/.prettierrc.json Normal file
View File

@ -0,0 +1,18 @@
{
"arrowParens": "avoid",
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 220,
"proseWrap": "always",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false,
"vueIndentScriptAndStyle": false
}

28
bizmatch/.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,28 @@
{
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"explorer.confirmDelete": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit"
},
"prettier.printWidth": 240,
"git.autofetch": false,
"git.autorefresh": true
}

189
bizmatch/src/app/app.routes.ts
View File

@ -1,108 +1,101 @@
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import { ListingsComponent } from './pages/listings/listings.component';
import { HomeComponent } from './pages/home/home.component';
import { DetailsListingComponent } from './pages/details/details-listing/details-listing.component';
import { AccountComponent } from './pages/subscription/account/account.component';
import { EditListingComponent } from './pages/subscription/edit-listing/edit-listing.component';
import { MyListingComponent } from './pages/subscription/my-listing/my-listing.component';
import { FavoritesComponent } from './pages/subscription/favorites/favorites.component';
import { EmailUsComponent } from './pages/subscription/email-us/email-us.component';
import { authGuard } from './guards/auth.guard';
import { PricingComponent } from './pages/pricing/pricing.component';
import { LogoutComponent } from './components/logout/logout.component'; import { LogoutComponent } from './components/logout/logout.component';
import { authGuard } from './guards/auth.guard';
import { DetailsBusinessListingComponent } from './pages/details/details-business-listing/details-business-listing.component';
import { DetailsCommercialPropertyListingComponent } from './pages/details/details-commercial-property-listing/details-commercial-property-listing.component';
import { DetailsUserComponent } from './pages/details/details-user/details-user.component'; import { DetailsUserComponent } from './pages/details/details-user/details-user.component';
import { HomeComponent } from './pages/home/home.component';
import { BrokerListingsComponent } from './pages/listings/broker-listings/broker-listings.component';
import { BusinessListingsComponent } from './pages/listings/business-listings/business-listings.component'; import { BusinessListingsComponent } from './pages/listings/business-listings/business-listings.component';
import { CommercialPropertyListingsComponent } from './pages/listings/commercial-property-listings/commercial-property-listings.component'; import { CommercialPropertyListingsComponent } from './pages/listings/commercial-property-listings/commercial-property-listings.component';
import { BrokerListingsComponent } from './pages/listings/broker-listings/broker-listings.component'; import { PricingComponent } from './pages/pricing/pricing.component';
import { AccountComponent } from './pages/subscription/account/account.component';
import { EditBusinessListingComponent } from './pages/subscription/edit-business-listing/edit-business-listing.component'; import { EditBusinessListingComponent } from './pages/subscription/edit-business-listing/edit-business-listing.component';
import { EditCommercialPropertyListingComponent } from './pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component'; import { EditCommercialPropertyListingComponent } from './pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component';
import { EmailUsComponent } from './pages/subscription/email-us/email-us.component';
import { FavoritesComponent } from './pages/subscription/favorites/favorites.component';
import { MyListingComponent } from './pages/subscription/my-listing/my-listing.component';
export const routes: Routes = [ export const routes: Routes = [
// { {
// path: 'listings/:type', path: 'businessListings',
// component: ListingsComponent, component: BusinessListingsComponent,
// }, runGuardsAndResolvers: 'always',
// Umleitung von /listing zu /listing/business },
{ {
path: 'businessListings', path: 'commercialPropertyListings',
component: BusinessListingsComponent, component: CommercialPropertyListingsComponent,
runGuardsAndResolvers:'always' runGuardsAndResolvers: 'always',
}, },
{ {
path: 'commercialPropertyListings', path: 'brokerListings',
component: CommercialPropertyListingsComponent, component: BrokerListingsComponent,
runGuardsAndResolvers:'always' runGuardsAndResolvers: 'always',
}, },
{ {
path: 'brokerListings', path: 'home',
component: BrokerListingsComponent, component: HomeComponent,
runGuardsAndResolvers:'always' },
}, {
{ path: 'details-business-listing/:id',
path: 'home', component: DetailsBusinessListingComponent,
component: HomeComponent, },
}, {
{ path: 'details-commercial-property-listing/:id',
path: 'details-listing/:type/:id', component: DetailsCommercialPropertyListingComponent,
component: DetailsListingComponent, },
}, {
{ path: 'details-user/:id',
path: 'details-listing/:type/:id', component: DetailsUserComponent,
component: DetailsListingComponent, },
}, {
{ path: 'account',
path: 'details-user/:id', component: AccountComponent,
component: DetailsUserComponent, canActivate: [authGuard],
}, },
{ {
path: 'account/:id', path: 'editBusinessListing/:id',
component: AccountComponent, component: EditBusinessListingComponent,
canActivate: [authGuard], canActivate: [authGuard],
}, },
{ {
path: 'editBusinessListing/:id', path: 'createBusinessListing',
component: EditBusinessListingComponent, component: EditBusinessListingComponent,
canActivate: [authGuard], canActivate: [authGuard],
}, },
{ {
path: 'createBusinessListing', path: 'editCommercialPropertyListing/:id',
component: EditBusinessListingComponent, component: EditCommercialPropertyListingComponent,
canActivate: [authGuard], canActivate: [authGuard],
}, },
{ {
path: 'editCommercialPropertyListing/:id', path: 'createCommercialPropertyListing',
component: EditCommercialPropertyListingComponent, component: EditCommercialPropertyListingComponent,
canActivate: [authGuard], canActivate: [authGuard],
}, },
{ {
path: 'createCommercialPropertyListing', path: 'myListings',
component: EditCommercialPropertyListingComponent, component: MyListingComponent,
canActivate: [authGuard], canActivate: [authGuard],
}, },
{ {
path: 'myListings', path: 'myFavorites',
component: MyListingComponent, component: FavoritesComponent,
canActivate: [authGuard], canActivate: [authGuard],
}, },
{ {
path: 'myFavorites', path: 'emailUs',
component: FavoritesComponent, component: EmailUsComponent,
canActivate: [authGuard], canActivate: [authGuard],
}, },
{ {
path: 'emailUs', path: 'logout',
component: EmailUsComponent, component: LogoutComponent,
canActivate: [authGuard], canActivate: [authGuard],
}, },
{ {
path: 'logout', path: 'pricing',
component: LogoutComponent, component: PricingComponent,
canActivate: [authGuard], },
}, { path: '**', redirectTo: 'home' },
{
path: 'pricing',
component: PricingComponent
},
{ path: '**', redirectTo: 'home' },
]; ];

48
bizmatch/src/app/components/footer/footer.component.html
View File

@ -1,26 +1,26 @@
<div class="surface-0 px-4 py-4 md:px-6 lg:px-8"> <div class="surface-0 px-4 py-4 md:px-6 lg:px-8">
<div class="surface-0"> <div class="surface-0">
<div class="grid"> <div class="grid">
<div class="col-12 md:col-3 md:mb-0 mb-3"> <div class="col-12 md:col-3 md:mb-0 mb-3">
<img src="assets/images/header-logo.png" alt="footer sections" height="30" class="mr-3"> <img src="assets/images/header-logo.png" alt="footer sections" height="30" class="mr-3" />
<div class="text-500">© 2024 Bizmatch All rights reserved.</div> <div class="text-500">© 2024 Bizmatch All rights reserved.</div>
</div> </div>
<div class="col-12 md:col-3"> <div class="col-12 md:col-3">
<div class="text-black mb-4 flex flex-wrap" style="max-width: 290px">BizMatch, Inc., 1001 Blucher Street, Corpus Christi, Texas 78401</div> <div class="text-black mb-4 flex flex-wrap" style="max-width: 290px">BizMatch, Inc., 1001 Blucher Street, Corpus Christi, Texas 78401</div>
<div class="text-black mb-3"><i class="text-white pi pi-phone surface-800 border-round p-1 mr-2"></i>1-800-840-6025</div> <div class="text-black mb-3"><i class="text-white pi pi-phone surface-800 border-round p-1 mr-2"></i>1-800-840-6025</div>
<div class="text-black mb-3"><i class="text-white pi pi-inbox surface-800 border-round p-1 mr-2"></i>bizmatch&#64;biz-match.com</div> <div class="text-black mb-3"><i class="text-white pi pi-inbox surface-800 border-round p-1 mr-2"></i>bizmatch&#64;biz-match.com</div>
</div> </div>
<div class="col-12 md:col-3 text-500"> <div class="col-12 md:col-3 text-500">
<div class="text-black font-bold line-height-3 mb-3">Legal</div> <div class="text-black font-bold line-height-3 mb-3">Legal</div>
<a class="line-height-3 block cursor-pointer mb-2">Terms of use</a> <a class="line-height-3 block cursor-pointer mb-2">Terms of use</a>
<a class="line-height-3 block cursor-pointer mb-2">Privacy statement</a> <a class="line-height-3 block cursor-pointer mb-2">Privacy statement</a>
</div> </div>
<div class="col-12 md:col-3 text-500"> <div class="col-12 md:col-3 text-500">
<div class="text-black font-bold line-height-3 mb-3">Actions</div> <div class="text-black font-bold line-height-3 mb-3">Actions</div>
<a *ngIf="!userService.isLoggedIn()" (click)="login()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Login</a> <a *ngIf="!userService.isLoggedIn()" (click)="login()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Login</a>
<a *ngIf="userService.isLoggedIn()" [routerLink]="['/account',userService.getUser()?.id]" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Account</a> <a *ngIf="userService.isLoggedIn()" [routerLink]="['/account']" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Account</a>
<a *ngIf="userService.isLoggedIn()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline" (click)="userService.logout()">Log Out</a> <a *ngIf="userService.isLoggedIn()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline" (click)="userService.logout()">Log Out</a>
</div> </div>
</div>
</div> </div>
</div> </div>
</div>

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

@ -1,118 +1,115 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { faUserGear } from '@fortawesome/free-solid-svg-icons';
import { MenuItem } from 'primeng/api'; import { MenuItem } from 'primeng/api';
import { ButtonModule } from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import { MenubarModule } from 'primeng/menubar'; import { MenubarModule } from 'primeng/menubar';
import { OverlayPanelModule } from 'primeng/overlaypanel'; import { OverlayPanelModule } from 'primeng/overlaypanel';
import { environment } from '../../../environments/environment';
import { UserService } from '../../services/user.service';
import { TabMenuModule } from 'primeng/tabmenu'; import { TabMenuModule } from 'primeng/tabmenu';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { faUserGear } from '@fortawesome/free-solid-svg-icons'; import { User } from '../../../../../bizmatch-server/src/models/db.model';
import { Router } from '@angular/router'; import { environment } from '../../../environments/environment';
import {User} from '../../../../../bizmatch-server/src/models/db.model' import { UserService } from '../../services/user.service';
@Component({ @Component({
selector: 'header', selector: 'header',
standalone: true, standalone: true,
imports: [CommonModule, MenubarModule, ButtonModule, OverlayPanelModule, TabMenuModule ], imports: [CommonModule, MenubarModule, ButtonModule, OverlayPanelModule, TabMenuModule],
templateUrl: './header.component.html', templateUrl: './header.component.html',
styleUrl: './header.component.scss' styleUrl: './header.component.scss',
}) })
export class HeaderComponent { export class HeaderComponent {
public buildVersion = environment.buildVersion; public buildVersion = environment.buildVersion;
user$:Observable<User> user$: Observable<User>;
user:User; user: User;
public tabItems: MenuItem[]; public tabItems: MenuItem[];
public menuItems: MenuItem[]; public menuItems: MenuItem[];
activeItem activeItem;
faUserGear=faUserGear faUserGear = faUserGear;
constructor(public userService: UserService,private router: Router) { constructor(public userService: UserService, private router: Router) {}
}
ngOnInit(){ ngOnInit() {
this.user$=this.userService.getUserObservable(); this.user$ = this.userService.getUserObservable();
this.user$.subscribe(u=>{ this.user$.subscribe(u => {
this.user=u; this.user = u;
this.menuItems = [ this.menuItems = [
{ {
label: 'User Actions', label: 'User Actions',
icon: 'fas fa-cog', icon: 'fas fa-cog',
items: [ items: [
{ {
label: 'Account', label: 'Account',
icon: 'pi pi-user', icon: 'pi pi-user',
routerLink: `/account/${this.user.id}`, routerLink: `/account`,
visible: this.isUserLogedIn() visible: this.isUserLogedIn(),
}, },
{ {
label: 'Create Listing', label: 'Create Listing',
icon: 'pi pi-plus-circle', icon: 'pi pi-plus-circle',
routerLink: "/createListing", routerLink: '/createListing',
visible: this.isUserLogedIn() visible: this.isUserLogedIn(),
}, },
{ {
label: 'My Listings', label: 'My Listings',
icon: 'pi pi-list', icon: 'pi pi-list',
routerLink:"/myListings", routerLink: '/myListings',
visible: this.isUserLogedIn() visible: this.isUserLogedIn(),
}, },
{ {
label: 'My Favorites', label: 'My Favorites',
icon: 'pi pi-star', icon: 'pi pi-star',
routerLink:"/myFavorites", routerLink: '/myFavorites',
visible: this.isUserLogedIn() visible: this.isUserLogedIn(),
}, },
{ {
label: 'EMail Us', label: 'EMail Us',
icon: 'fa-regular fa-envelope', icon: 'fa-regular fa-envelope',
routerLink:"/emailUs", routerLink: '/emailUs',
visible: this.isUserLogedIn() visible: this.isUserLogedIn(),
}, },
{ {
label: 'Logout', label: 'Logout',
icon: 'fa-solid fa-right-from-bracket', icon: 'fa-solid fa-right-from-bracket',
routerLink:"/logout", routerLink: '/logout',
visible: this.isUserLogedIn() visible: this.isUserLogedIn(),
}, },
{ {
label: 'Login', label: 'Login',
icon: 'fa-solid fa-right-from-bracket', icon: 'fa-solid fa-right-from-bracket',
//routerLink:"/account", command: () => this.login(),
command: () => this.login(), visible: !this.isUserLogedIn(),
visible: !this.isUserLogedIn() },
}, ],
] },
} ];
] });
}); this.tabItems = [
this.tabItems = [ {
{ label: 'Businesses for Sale',
label: 'Businesses for Sale', routerLink: '/businessListings',
routerLink: '/listings/business', fragment: '',
fragment:'' },
}, {
{ label: 'Professionals/Brokers Directory',
label: 'Professionals/Brokers Directory', routerLink: '/brokerListings',
routerLink: '/listings/professionals_brokers', fragment: '',
fragment:'' },
}, {
{ label: 'Commercial Property',
label: 'Commercial Property', routerLink: '/commercialPropertyListings',
routerLink: '/listings/commercialProperty', fragment: '',
fragment:'' },
} ];
];
this.activeItem=this.tabItems[0]; this.activeItem = this.tabItems[0];
} }
navigateWithState(dest: string, state: any) { navigateWithState(dest: string, state: any) {
this.router.navigate([dest], { state: state }); this.router.navigate([dest], { state: state });
} }
isUserLogedIn(){ isUserLogedIn() {
return this.userService?.isLoggedIn(); return this.userService?.isLoggedIn();
} }
login(){ login() {
this.userService.login(window.location.href); this.userService.login(window.location.href);
} }
} }

100
bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html Normal file
View File

@ -0,0 +1,100 @@
<div class="surface-ground h-full">
<div class="px-6 py-5">
<div class="surface-card p-4 shadow-2 border-round">
<div class="flex justify-content-between align-items-center align-content-center">
<div class="font-medium text-3xl text-900 mb-3">{{ listing?.title }}</div>
<!-- <button pButton pRipple type="button" label="Go back to listings" icon="pi pi-user-plus" class="mr-3 p-button-rounded"></button> -->
<p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
</div>
<!-- <div class="text-500 mb-5">Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</div> -->
<div class="grid">
<div class="col-12 md:col-6">
<ul class="list-none p-0 m-0 border-top-1 border-300">
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Description</div>
<div class="text-900 w-full md:w-10 line-height-3" [innerHTML]="description"></div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Category</div>
<div class="text-900 w-full md:w-10">
<p-chip [label]="selectOptions.getBusiness(listing.type)"></p-chip>
</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Located in</div>
<div class="text-900 w-full md:w-10">{{ selectOptions.getState(listing.state) }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Asking Price</div>
<div class="text-900 w-full md:w-10">{{ listing.price | currency }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Real Estate Included</div>
<div class="text-900 w-full md:w-10">{{ listing.realEstateIncluded ? 'Yes' : 'No' }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Sales revenue</div>
<div class="text-900 w-full md:w-10">{{ listing.salesRevenue | currency }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Cash flow</div>
<div class="text-900 w-full md:w-10">{{ listing.cashFlow | currency }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Employees</div>
<div class="text-900 w-full md:w-10">{{ listing.employees }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Broker licensing</div>
<div class="text-900 w-full md:w-10">{{ listing.brokerLicencing }}</div>
</li>
</ul>
<p-galleria [value]="propertyImages" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
<ng-template pTemplate="item" let-item>
<img src="{{ environment.apiBaseUrl }}/property/{{ listing.id }}/{{ item.name }}" style="width: 100%" />
</ng-template>
<!-- <ng-template pTemplate="thumbnail" let-item>
<div class="grid grid-nogutter justify-content-center">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{item.name}}" />
</div>
</ng-template> -->
</p-galleria>
@if(listing && user && (user.id===listing?.userId || isAdmin())){
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/editListing', listing.id]"></button>
}
</div>
<div class="col-12 md:col-6">
<div class="surface-card p-4 border-round p-fluid">
<div class="font-medium text-xl text-primary text-900 mb-3">Contact The Author of This Listing</div>
<div class="font-italic text-sm text-900 mb-5">Please Include your contact info below:</div>
<div class="grid formgrid p-fluid">
<div class="field mb-4 col-12 md:col-6">
<label for="name" class="font-medium text-900">Your Name</label>
<input id="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name" />
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="email" class="font-medium text-900">Your Email</label>
<input id="email" type="text" pInputText [(ngModel)]="mailinfo.sender.email" />
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="phoneNumber" class="font-medium text-900">Phone Number</label>
<input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" />
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="state" class="font-medium text-900">Country/State</label>
<input id="state" type="text" pInputText [(ngModel)]="mailinfo.sender.state" />
</div>
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
<div class="field mb-4 col-12">
<label for="notes" class="font-medium text-900">Questions/Comments</label>
<textarea id="notes" pInputTextarea [autoResize]="true" [rows]="5" [(ngModel)]="mailinfo.sender.comments"></textarea>
</div>
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
</div>
<button pButton pRipple label="Submit" icon="pi pi-file" class="w-auto" (click)="mail()"></button>
</div>
</div>
</div>
</div>
</div>
</div>

0
bizmatch/src/app/pages/details/details-listing/details-listing.component.scss → bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.scss
View File

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

@ -1,89 +1,80 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
import { StyleClassModule } from 'primeng/styleclass';
import { SelectOptionsService } from '../../../services/select-options.service';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { TagModule } from 'primeng/tag';
import data from '../../../../assets/data/listings.json';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { lastValueFrom } from 'rxjs';
import { ListingsService } from '../../../services/listings.service';
import { UserService } from '../../../services/user.service';
import onChange from 'on-change';
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
import { MailService } from '../../../services/mail.service';
import { MessageService } from 'primeng/api';
import { SharedModule } from '../../../shared/shared/shared.module';
import { GalleriaModule } from 'primeng/galleria';
import { environment } from '../../../../environments/environment';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ImageProperty, ListingCriteria, ListingType, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model'; import { ActivatedRoute, Router } from '@angular/router';
import { User } from '../../../../../../bizmatch-server/src/models/db.model'; import onChange from 'on-change';
import { MessageService } from 'primeng/api';
import { GalleriaModule } from 'primeng/galleria';
import { lastValueFrom } from 'rxjs';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ImageProperty, ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ListingsService } from '../../../services/listings.service';
import { MailService } from '../../../services/mail.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
@Component({ @Component({
selector: 'app-details-listing', selector: 'app-details-business-listing',
standalone: true, standalone: true,
imports: [SharedModule, GalleriaModule], imports: [SharedModule, GalleriaModule],
providers: [MessageService], providers: [MessageService],
templateUrl: './details-listing.component.html', templateUrl: './details-business-listing.component.html',
styleUrl: './details-listing.component.scss' styleUrl: './details-business-listing.component.scss',
}) })
export class DetailsListingComponent { export class DetailsBusinessListingComponent {
// listings: Array<BusinessListing>; // listings: Array<BusinessListing>;
responsiveOptions = [ responsiveOptions = [
{ {
breakpoint: '1199px', breakpoint: '1199px',
numVisible: 1, numVisible: 1,
numScroll: 1 numScroll: 1,
}, },
{ {
breakpoint: '991px', breakpoint: '991px',
numVisible: 2, numVisible: 2,
numScroll: 1 numScroll: 1,
}, },
{ {
breakpoint: '767px', breakpoint: '767px',
numVisible: 1, numVisible: 1,
numScroll: 1 numScroll: 1,
} },
]; ];
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined; private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
private type: 'business'|'commercialProperty' | undefined = this.activatedRoute.snapshot.params['type'] as 'business'|'commercialProperty' | undefined; private type: 'business' | 'commercialProperty' | undefined = this.activatedRoute.snapshot.params['type'] as 'business' | 'commercialProperty' | undefined;
listing: ListingType; listing: BusinessListing;
criteria: ListingCriteria criteria: ListingCriteria;
mailinfo: MailInfo; mailinfo: MailInfo;
propertyImages: ImageProperty[] = [] propertyImages: ImageProperty[] = [];
environment = environment; environment = environment;
user:User user: User;
description:SafeHtml; description: SafeHtml;
constructor(private activatedRoute: ActivatedRoute, constructor(
private activatedRoute: ActivatedRoute,
private listingsService: ListingsService, private listingsService: ListingsService,
private router: Router, private router: Router,
private userService: UserService, private userService: UserService,
public selectOptions: SelectOptionsService, public selectOptions: SelectOptionsService,
private mailService: MailService, private mailService: MailService,
private messageService: MessageService, private messageService: MessageService,
private sanitizer: DomSanitizer) { private sanitizer: DomSanitizer,
) {
this.userService.getUserObservable().subscribe(user => { this.userService.getUserObservable().subscribe(user => {
this.user = user this.user = user;
}); });
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler); this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
this.mailinfo = { sender: {}, userId: '' } this.mailinfo = { sender: {}, userId: '' };
} }
async ngOnInit() { async ngOnInit() {
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, this.type)); this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, this.type));
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id) this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
this.description=this.sanitizer.bypassSecurityTrustHtml(this.listing.description); this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
} }
back() { back() {
this.router.navigate(['listings', this.criteria.listingsCategory]) this.router.navigate(['businessListings']);
} }
isAdmin() { isAdmin() {
return this.userService.hasAdminRole(); return this.userService.hasAdminRole();

90
bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html Normal file
View File

@ -0,0 +1,90 @@
<div class="surface-ground h-full">
<div class="px-6 py-5">
<div class="surface-card p-4 shadow-2 border-round">
<div class="flex justify-content-between align-items-center align-content-center">
<div class="font-medium text-3xl text-900 mb-3">{{ listing?.title }}</div>
<!-- <button pButton pRipple type="button" label="Go back to listings" icon="pi pi-user-plus" class="mr-3 p-button-rounded"></button> -->
<p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
</div>
<!-- <div class="text-500 mb-5">Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</div> -->
<div class="grid">
<div class="col-12 md:col-6">
<ul class="list-none p-0 m-0 border-top-1 border-300">
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Description</div>
<div class="text-900 w-full md:w-10 line-height-3" [innerHTML]="description"></div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Property Category</div>
<div class="text-900 w-full md:w-10">{{ selectOptions.getCommercialProperty(listing.type) }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Located in</div>
<div class="text-900 w-full md:w-10">{{ selectOptions.getState(listing.state) }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">City</div>
<div class="text-900 w-full md:w-10">{{ listing.city }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Zip Code</div>
<div class="text-900 w-full md:w-10">{{ listing.zipCode }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">County</div>
<div class="text-900 w-full md:w-10">{{ listing.county }}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Asking Price:</div>
<div class="text-900 w-full md:w-10">{{ listing.price | currency }}</div>
</li>
</ul>
<p-galleria [value]="propertyImages" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
<ng-template pTemplate="item" let-item>
<img src="{{ environment.apiBaseUrl }}/property/{{ listing.id }}/{{ item.name }}" style="width: 100%" />
</ng-template>
<!-- <ng-template pTemplate="thumbnail" let-item>
<div class="grid grid-nogutter justify-content-center">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{item.name}}" />
</div>
</ng-template> -->
</p-galleria>
@if(listing && user && (user.id===listing?.userId || isAdmin())){
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/editListing', listing.id]"></button>
}
</div>
<div class="col-12 md:col-6">
<div class="surface-card p-4 border-round p-fluid">
<div class="font-medium text-xl text-primary text-900 mb-3">Contact The Author of This Listing</div>
<div class="font-italic text-sm text-900 mb-5">Please Include your contact info below:</div>
<div class="grid formgrid p-fluid">
<div class="field mb-4 col-12 md:col-6">
<label for="name" class="font-medium text-900">Your Name</label>
<input id="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name" />
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="email" class="font-medium text-900">Your Email</label>
<input id="email" type="text" pInputText [(ngModel)]="mailinfo.sender.email" />
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="phoneNumber" class="font-medium text-900">Phone Number</label>
<input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" />
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="state" class="font-medium text-900">Country/State</label>
<input id="state" type="text" pInputText [(ngModel)]="mailinfo.sender.state" />
</div>
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
<div class="field mb-4 col-12">
<label for="notes" class="font-medium text-900">Questions/Comments</label>
<textarea id="notes" pInputTextarea [autoResize]="true" [rows]="5" [(ngModel)]="mailinfo.sender.comments"></textarea>
</div>
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
</div>
<button pButton pRipple label="Submit" icon="pi pi-file" class="w-auto" (click)="mail()"></button>
</div>
</div>
</div>
</div>
</div>
</div>

0
bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.scss Normal file
View File

87
bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.ts Normal file
View File

@ -0,0 +1,87 @@
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import onChange from 'on-change';
import { MessageService } from 'primeng/api';
import { GalleriaModule } from 'primeng/galleria';
import { lastValueFrom } from 'rxjs';
import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ImageProperty, ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ListingsService } from '../../../services/listings.service';
import { MailService } from '../../../services/mail.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
@Component({
selector: 'app-details-commercial-property-listing',
standalone: true,
imports: [SharedModule, GalleriaModule],
providers: [MessageService],
templateUrl: './details-commercial-property-listing.component.html',
styleUrl: './details-commercial-property-listing.component.scss',
})
export class DetailsCommercialPropertyListingComponent {
// listings: Array<BusinessListing>;
responsiveOptions = [
{
breakpoint: '1199px',
numVisible: 1,
numScroll: 1,
},
{
breakpoint: '991px',
numVisible: 2,
numScroll: 1,
},
{
breakpoint: '767px',
numVisible: 1,
numScroll: 1,
},
];
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
private type: 'business' | 'commercialProperty' | undefined = this.activatedRoute.snapshot.params['type'] as 'business' | 'commercialProperty' | undefined;
listing: CommercialPropertyListing;
criteria: ListingCriteria;
mailinfo: MailInfo;
propertyImages: ImageProperty[] = [];
environment = environment;
user: User;
description: SafeHtml;
constructor(
private activatedRoute: ActivatedRoute,
private listingsService: ListingsService,
private router: Router,
private userService: UserService,
public selectOptions: SelectOptionsService,
private mailService: MailService,
private messageService: MessageService,
private sanitizer: DomSanitizer,
) {
this.userService.getUserObservable().subscribe(user => {
this.user = user;
});
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
this.mailinfo = { sender: {}, userId: '' };
}
async ngOnInit() {
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, this.type));
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
}
back() {
this.router.navigate(['commercialPropertyListings']);
}
isAdmin() {
return this.userService.hasAdminRole();
}
async mail() {
this.mailinfo.userId = this.listing.userId;
await this.mailService.mail(this.mailinfo);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your message has been sent to the creator of the listing', life: 3000 });
}
}

141
bizmatch/src/app/pages/details/details-listing/details-listing.component.html
View File

@ -1,141 +0,0 @@
<div class="surface-ground h-full">
<div class="px-6 py-5">
<div class="surface-card p-4 shadow-2 border-round">
<div class="flex justify-content-between align-items-center align-content-center">
<div class="font-medium text-3xl text-900 mb-3">{{listing?.title}}</div>
<!-- <button pButton pRipple type="button" label="Go back to listings" icon="pi pi-user-plus" class="mr-3 p-button-rounded"></button> -->
<p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
</div>
<!-- <div class="text-500 mb-5">Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</div> -->
<div class="grid">
<div class="col-12 md:col-6">
<ul class="list-none p-0 m-0 border-top-1 border-300">
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Description</div>
<div class="text-900 w-full md:w-10 line-height-3" [innerHTML]="description"></div>
</li>
@if (listing && (listing.listingsCategory==='business')){
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Category</div>
<div class="text-900 w-full md:w-10">
<p-chip [label]="selectOptions.getBusiness(listing.type)"></p-chip>
</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Located in</div>
<div class="text-900 w-full md:w-10">{{selectOptions.getState(listing.state)}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Asking Price</div>
<div class="text-900 w-full md:w-10">{{listing.price | currency}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Real Estate Included</div>
<div class="text-900 w-full md:w-10">{{listing.realEstateIncluded?'Yes':'No'}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Sales revenue</div>
<div class="text-900 w-full md:w-10">{{listing.salesRevenue | currency}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Cash flow</div>
<div class="text-900 w-full md:w-10">{{listing.cashFlow | currency}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Employees</div>
<div class="text-900 w-full md:w-10">{{listing.employees}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Broker licensing</div>
<div class="text-900 w-full md:w-10">{{listing.brokerLicencing}}</div>
</li>
}
@if (listing && (listing.listingsCategory==='commercialProperty')){
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Property Category</div>
<div class="text-900 w-full md:w-10">{{selectOptions.getCommercialProperty(listing.type)}}
</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Located in</div>
<div class="text-900 w-full md:w-10">{{selectOptions.getState(listing.state)}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">City</div>
<div class="text-900 w-full md:w-10">{{listing.city}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Zip Code</div>
<div class="text-900 w-full md:w-10">{{listing.zipCode}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">County</div>
<div class="text-900 w-full md:w-10">{{listing.county}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Asking Price:</div>
<div class="text-900 w-full md:w-10">{{listing.price | currency}}</div>
</li>
}
</ul>
<p-galleria [value]="propertyImages" [showIndicators]="true" [showThumbnails]="false"
[responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5">
<ng-template pTemplate="item" let-item>
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{item.name}}"
style="width: 100%;" />
</ng-template>
<!-- <ng-template pTemplate="thumbnail" let-item>
<div class="grid grid-nogutter justify-content-center">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{item.name}}" />
</div>
</ng-template> -->
</p-galleria>
@if(listing && user && (user.id===listing?.userId || isAdmin())){
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto"
[routerLink]="['/editListing',listing.id]"></button>
}
</div>
<div class="col-12 md:col-6">
<div class="surface-card p-4 border-round p-fluid">
<div class="font-medium text-xl text-primary text-900 mb-3">Contact The Author of This Listing
</div>
<div class="font-italic text-sm text-900 mb-5">Please Include your contact info below:</div>
<div class="grid formgrid p-fluid">
<div class="field mb-4 col-12 md:col-6">
<label for="name" class="font-medium text-900">Your Name</label>
<input id="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name">
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="email" class="font-medium text-900">Your Email</label>
<input id="email" type="text" pInputText [(ngModel)]="mailinfo.sender.email">
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="phoneNumber" class="font-medium text-900">Phone Number</label>
<input id="phoneNumber" type="text" pInputText
[(ngModel)]="mailinfo.sender.phoneNumber">
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="state" class="font-medium text-900">Country/State</label>
<input id="state" type="text" pInputText [(ngModel)]="mailinfo.sender.state">
</div>
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
<div class="field mb-4 col-12">
<label for="notes" class="font-medium text-900">Questions/Comments</label>
<textarea id="notes" pInputTextarea [autoResize]="true" [rows]="5"
[(ngModel)]="mailinfo.sender.comments"></textarea>
</div>
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
</div>
<button pButton pRipple label="Submit" icon="pi pi-file" class="w-auto"
(click)="mail()"></button>
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -1,132 +1,121 @@
<div class="surface-ground h-full"> <div class="surface-ground h-full">
<div class="px-6 py-5"> <div class="px-6 py-5">
<div class="surface-card p-4 shadow-2 border-round"> <div class="surface-card p-4 shadow-2 border-round">
<!-- <div class="flex justify-content-between align-items-center align-content-center"> <!-- <div class="flex justify-content-between align-items-center align-content-center">
<div class="font-medium text-3xl text-900 mb-3">{{listing?.title}}</div> <div class="font-medium text-3xl text-900 mb-3">{{listing?.title}}</div>
<p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button> <p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
</div> --> </div> -->
<div class="surface-section px-6 pt-5"> <div class="surface-section px-6 pt-5">
<div class="flex align-items-start flex-column lg:flex-row lg:justify-content-between"> <div class="flex align-items-start flex-column lg:flex-row lg:justify-content-between">
<div class="flex align-items-start flex-column md:flex-row"> <div class="flex align-items-start flex-column md:flex-row">
@if(user.hasProfile){ @if(user.hasProfile){
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif" class="mr-5 mb-3 lg:mb-0" <img src="{{ environment.apiBaseUrl }}/profile/{{ user.id }}.avif" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
style="width:90px" /> } @else {
} @else { <img src="assets/images/person_placeholder.jpg" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
<img src="assets/images/person_placeholder.jpg" class="mr-5 mb-3 lg:mb-0" style="width:90px" /> }
} <div>
<div> <span class="text-900 font-medium text-3xl">{{ user.firstname }} {{ user.lastname }}</span>
<span class="text-900 font-medium text-3xl">{{user.firstname}} {{user.lastname}}</span> <i class="pi pi-star text-2xl ml-4 text-yellow-500"></i>
<i class="pi pi-star text-2xl ml-4 text-yellow-500"></i> <div class="flex align-items-center flex-wrap text-sm">
<div class="flex align-items-center flex-wrap text-sm"> <div class="mr-5 mt-3">
<div class="mr-5 mt-3"> <span class="font-medium text-500">Company</span>
<span class="font-medium text-500">Company</span> <div class="text-700 mt-2">{{ user.companyName }}</div>
<div class="text-700 mt-2">{{user.companyName}}</div>
</div>
<div class="mr-5 mt-3">
<span class="font-medium text-500">For Sale</span>
<div class="text-700 mt-2">12</div>
</div>
<div class="mr-5 mt-3">
<span class="font-medium text-500">Sold</span>
<div class="text-700 mt-2">8</div>
</div>
<div class="flex align-items-center mt-3">
<!-- <span class="font-medium text-500">Logo</span> -->
<div >
@if(user.hasCompanyLogo){
<img src="{{environment.apiBaseUrl}}/logo/{{user.id}}.avif"
class="mr-5 lg:mb-0" style="height:60px;max-width:100px" />
}
<!-- <img *ngIf="!user.hasCompanyLogo" src="assets/images/placeholder.png"
class="mr-5 lg:mb-0" style="height:60px;max-width:100px" /> -->
</div>
<!-- <div class="text-700 mt-2">130</div> -->
</div>
</div>
</div>
</div>
</div> </div>
<p class="mt-2 text-700 line-height-3 text-l font-semibold">{{user.description}}</p> <div class="mr-5 mt-3">
<span class="font-medium text-500">For Sale</span>
<div class="text-700 mt-2">12</div>
</div>
<div class="mr-5 mt-3">
<span class="font-medium text-500">Sold</span>
<div class="text-700 mt-2">8</div>
</div>
<div class="flex align-items-center mt-3">
<!-- <span class="font-medium text-500">Logo</span> -->
<div>
@if(user.hasCompanyLogo){
<img src="{{ environment.apiBaseUrl }}/logo/{{ user.id }}.avif" class="mr-5 lg:mb-0" style="height: 60px; max-width: 100px" />
}
<!-- <img *ngIf="!user.hasCompanyLogo" src="assets/images/placeholder.png"
class="mr-5 lg:mb-0" style="height:60px;max-width:100px" /> -->
</div>
<!-- <div class="text-700 mt-2">130</div> -->
</div>
</div>
</div> </div>
<div class="px-6 py-5"> </div>
<div class="surface-card p-4 shadow-2 border-round"> </div>
<div class="font-medium text-3xl text-900 mb-3">Company Profile</div> <p class="mt-2 text-700 line-height-3 text-l font-semibold">{{ user.description }}</p>
<div class="text-500 mb-5" [innerHTML]="companyOverview"></div> </div>
<ul class="list-none p-0 m-0 border-top-1 border-300"> <div class="px-6 py-5">
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground"> <div class="surface-card p-4 shadow-2 border-round">
<div class="text-500 w-full md:w-2 font-medium">Name</div> <div class="font-medium text-3xl text-900 mb-3">Company Profile</div>
<div class="text-900 w-full md:w-10">{{user.firstname}} {{user.lastname}}</div> <div class="text-500 mb-5" [innerHTML]="companyOverview"></div>
</li> <ul class="list-none p-0 m-0 border-top-1 border-300">
<li class="flex align-items-center py-3 px-2 flex-wrap"> <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Phone Number</div> <div class="text-500 w-full md:w-2 font-medium">Name</div>
<div class="text-900 w-full md:w-10 line-height-3">{{user.phoneNumber}}</div> <div class="text-900 w-full md:w-10">{{ user.firstname }} {{ user.lastname }}</div>
</li> </li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground"> <li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">EMail Address</div> <div class="text-500 w-full md:w-2 font-medium">Phone Number</div>
<div class="text-900 w-full md:w-10 line-height-3">{{user.email}}</div> <div class="text-900 w-full md:w-10 line-height-3">{{ user.phoneNumber }}</div>
</li> </li>
<li class="flex align-items-center py-3 px-2 flex-wrap"> <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Company Location</div> <div class="text-500 w-full md:w-2 font-medium">EMail Address</div>
<div class="text-900 w-full md:w-10 line-height-3">{{user.companyLocation}}</div> <div class="text-900 w-full md:w-10 line-height-3">{{ user.email }}</div>
</li> </li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground"> <li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Services we offer</div> <div class="text-500 w-full md:w-2 font-medium">Company Location</div>
<div class="text-900 w-full md:w-10" [innerHTML]="offeredServices"></div> <div class="text-900 w-full md:w-10 line-height-3">{{ user.companyLocation }}</div>
</li> </li>
<li class="flex align-items-center py-3 px-2 flex-wrap "> <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Areas we serve</div> <div class="text-500 w-full md:w-2 font-medium">Services we offer</div>
<div class="text-900 w-full md:w-10"> <div class="text-900 w-full md:w-10" [innerHTML]="offeredServices"></div>
@for (area of user.areasServed; track area) { </li>
<p-tag styleClass="mr-2" [value]="area" [rounded]="true"></p-tag> <li class="flex align-items-center py-3 px-2 flex-wrap">
} <div class="text-500 w-full md:w-2 font-medium">Areas we serve</div>
<!-- <p-tag styleClass="mr-2" severity="success" value="Javascript" [rounded]="true"></p-tag> <div class="text-900 w-full md:w-10">
@for (area of user.areasServed; track area) {
<p-tag styleClass="mr-2" [value]="area" [rounded]="true"></p-tag>
}
<!-- <p-tag styleClass="mr-2" severity="success" value="Javascript" [rounded]="true"></p-tag>
<p-tag styleClass="mr-2" severity="danger" value="Python" [rounded]="true"></p-tag> <p-tag styleClass="mr-2" severity="danger" value="Python" [rounded]="true"></p-tag>
<p-tag severity="warning" value="SQL" [rounded]="true"></p-tag> --> <p-tag severity="warning" value="SQL" [rounded]="true"></p-tag> -->
</div> </div>
</li> </li>
<li class="flex align-items-center py-3 px-2 flex-wrap <li class="flex align-items-center py-3 px-2 flex-wrap">
"> <div class="text-500 w-full md:w-2 font-medium">Licensed In</div>
<div class="text-500 w-full md:w-2 font-medium">Licensed In</div> <div class="text-900 w-full md:w-10">
<div class="text-900 w-full md:w-10"> @for (license of userLicensedIn; track license) {
@for (license of userLicensedIn; track license) { <div>{{ license.name }} : {{ license.value }}</div>
<div>{{license.name}} : {{license.value}}</div> }
} </div>
</div> </li>
</li> <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground"> <div class="text-500 w-full md:w-2 font-medium">My Listings For Sale</div>
<div class="text-500 w-full md:w-2 font-medium">My Listings For Sale</div> <div class="text-900 w-full md:w-10">
<div class="text-900 w-full md:w-10"> <div class="grid mt-0 mr-0">
<div class="grid mt-0 mr-0"> @for (listing of userListings; track listing) {
@for (listing of userListings; track listing) { <div class="col-12 md:col-6 cursor-pointer" [routerLink]="['/details-listing/business', listing.id]">
<div class="col-12 md:col-6 cursor-pointer" [routerLink]="['/details-listing/business',listing.id]"> <div class="p-3 border-1 surface-border border-round surface-card">
<div class="p-3 border-1 surface-border border-round surface-card"> <div class="text-900 mb-2">
<div class="text-900 mb-2"> <span [class]="selectOptions.getBgColorType(listing.type)" class="inline-flex border-circle align-items-center justify-content-center mr-3" style="width: 38px; height: 38px">
<span [class]="selectOptions.getBgColorType(listing.type)" <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
class="inline-flex border-circle align-items-center justify-content-center mr-3" </span>
style="width:38px;height:38px"> <span class="font-medium">{{ selectOptions.getBusiness(listing.type) }}</span>
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" </div>
class="pi text-xl"></i> <div class="text-700">{{ listing.title }}</div>
</span> </div>
<span </div>
class="font-medium">{{selectOptions.getBusiness(listing.type)}}</span> }
</div>
<div class="text-700">{{listing.title}}</div>
</div>
</div>
}
</div>
</div>
</li>
</ul>
</div> </div>
</div> </div>
@if( user?.id===(user$| async)?.id || isAdmin()){ </li>
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" </ul>
[routerLink]="['/account',user.id]"></button>
}
</div> </div>
</div>
@if( user?.id===(user$| async)?.id || isAdmin()){
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/account']"></button>
}
</div> </div>
</div> </div>
</div>

51
bizmatch/src/app/pages/details/details-user/details-user.component.ts
View File

@ -1,18 +1,18 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { SharedModule } from '../../../shared/shared/shared.module';
import { GalleriaModule } from 'primeng/galleria';
import { MessageService } from 'primeng/api'; import { MessageService } from 'primeng/api';
import { GalleriaModule } from 'primeng/galleria';
import { SharedModule } from '../../../shared/shared/shared.module';
import { environment } from '../../../../environments/environment';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from '../../../services/user.service';
import { Observable } from 'rxjs';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ImageService } from '../../../services/image.service'; import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model'; import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { KeyValue, ListingCriteria } from '../../../../../../bizmatch-server/src/models/main.model'; import { KeyValue, ListingCriteria } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
@Component({ @Component({
selector: 'app-details-user', selector: 'app-details-user',
@ -20,38 +20,41 @@ import { KeyValue, ListingCriteria } from '../../../../../../bizmatch-server/src
imports: [SharedModule, GalleriaModule], imports: [SharedModule, GalleriaModule],
providers: [MessageService], providers: [MessageService],
templateUrl: './details-user.component.html', templateUrl: './details-user.component.html',
styleUrl: './details-user.component.scss' styleUrl: './details-user.component.scss',
}) })
export class DetailsUserComponent { export class DetailsUserComponent {
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined; private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user: User; user: User;
user$:Observable<User> user$: Observable<User>;
environment = environment; environment = environment;
criteria:ListingCriteria; criteria: ListingCriteria;
userListings:BusinessListing[] userListings: BusinessListing[];
companyOverview:SafeHtml; companyOverview: SafeHtml;
offeredServices:SafeHtml; offeredServices: SafeHtml;
userLicensedIn :KeyValue[] userLicensedIn: KeyValue[];
constructor(private activatedRoute: ActivatedRoute, constructor(
private activatedRoute: ActivatedRoute,
private router: Router, private router: Router,
private userService: UserService, private userService: UserService,
private listingsService:ListingsService, private listingsService: ListingsService,
private messageService: MessageService, private messageService: MessageService,
public selectOptions: SelectOptionsService, public selectOptions: SelectOptionsService,
private sanitizer: DomSanitizer, private sanitizer: DomSanitizer,
private imageService:ImageService) { private imageService: ImageService,
} ) {}
async ngOnInit() { async ngOnInit() {
this.user = await this.userService.getById(this.id); this.user = await this.userService.getById(this.id);
this.userLicensedIn = this.user.licensedIn.map(l=>{return {name:l.split('|')[0],value:l.split('|')[1]}}) this.userLicensedIn = this.user.licensedIn.map(l => {
return { name: l.split('|')[0], value: l.split('|')[1] };
});
this.userListings = await this.listingsService.getListingByUserId(this.id); this.userListings = await this.listingsService.getListingByUserId(this.id);
this.user$ = this.userService.getUserObservable(); this.user$ = this.userService.getUserObservable();
this.companyOverview=this.sanitizer.bypassSecurityTrustHtml(this.user.companyOverview); this.companyOverview = this.sanitizer.bypassSecurityTrustHtml(this.user.companyOverview);
this.offeredServices=this.sanitizer.bypassSecurityTrustHtml(this.user.offeredServices); this.offeredServices = this.sanitizer.bypassSecurityTrustHtml(this.user.offeredServices);
} }
back() { back() {
this.router.navigate(['listings', this.criteria.listingsCategory]) this.router.navigate(['brokerListings']);
} }
isAdmin() { isAdmin() {
return this.userService.hasAdminRole(); return this.userService.hasAdminRole();

137
bizmatch/src/app/pages/home/home.component.html
View File

@ -1,75 +1,68 @@
<div class="container"> <div class="container">
<div class="wrapper"> <div class="wrapper">
<div class="py-3 px-6 flex align-items-center justify-content-between relative"> <div class="py-3 px-6 flex align-items-center justify-content-between relative">
<a routerLink="/home"><img src="../../../assets/images/header-logo.png" alt="Image" height="50" ></a> <a routerLink="/home"><img src="../../../assets/images/header-logo.png" alt="Image" height="50" /></a>
<div <div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 top-100 px-6 lg:px-0 shadow-2 lg:shadow-none z-2">
class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 top-100 px-6 lg:px-0 shadow-2 lg:shadow-none z-2"> <section></section>
<section></section> <div class="flex justify-content-between lg:block border-top-1 lg:border-top-none border-gray-800 py-3 lg:py-0 mt-3 lg:mt-0">
<div @if(userService.isLoggedIn()){
class="flex justify-content-between lg:block border-top-1 lg:border-top-none border-gray-800 py-3 lg:py-0 mt-3 lg:mt-0"> <p-button label="Account" class="ml-3 font-bold" [outlined]="true" severity="secondary" [routerLink]="['/account']"></p-button>
@if(userService.isLoggedIn()){ } @else {
<p-button label="Account" class="ml-3 font-bold" [outlined]="true" severity="secondary" [routerLink]="['/account',(user$|async)?.id]"></p-button> <p-button label="Log In" class="ml-3 font-bold" [outlined]="true" severity="secondary" (click)="login()"></p-button>
} @else { }
<p-button label="Log In" class="ml-3 font-bold" [outlined]="true" severity="secondary" (click)="login()"></p-button>
}
</div>
</div>
</div>
<div class="px-4 py-8 md:px-6 lg:px-8">
<div class="flex flex-wrap">
<div class="w-12 lg:w-6 p-4">
<h1 class="text-6xl font-bold text-blue-900 mt-0 mb-3">Find businesses for sale</h1>
<p class="text-3xl text-blue-600 mt-0 mb-5">Arcu cursus euismod quis viverra nibh cras. Amet justo
donec
enim diam vulputate ut.</p>
<ul class="list-none p-0 m-0">
<li class="mb-3 flex align-items-center"><i
class="pi pi-compass text-yellow-500 text-xl mr-2"></i><span
class="text-blue-600 line-height-3">Senectus et netus et malesuada fames.</span></li>
<li class="mb-3 flex align-items-center"><i
class="pi pi-map text-yellow-500 text-xl mr-2"></i><span
class="text-blue-600 line-height-3">Orci a scelerisque purus semper eget.</span></li>
<li class="mb-3 flex align-items-center"><i
class="pi pi-calendar text-yellow-500 text-xl mr-2"></i><span
class="text-blue-600 line-height-3">Aenean sed adipiscing diam donec adipiscing
tristique.</span></li>
</ul>
</div>
<div class="w-12 lg:w-6 text-center lg:text-right flex">
<div class="mt-5">
<ul class="flex flex-column align-items-left gap-3 px-2 py-3 list-none surface-border">
<li><button pButton pRipple icon="pi pi-user" (click)="activeTabAction = 'business'"
label="Businesses"
[ngClass]="{'p-button-text text-700': activeTabAction !== 'business'}"></button></li>
<li><button pButton pRipple icon="pi pi-globe" (click)="activeTabAction = 'professionals_brokers'"
label="Professionals/Brokers Directory"
[ngClass]="{'p-button-text text-700': activeTabAction != 'professionals_brokers'}"></button></li>
<li><button pButton pRipple icon="pi pi-shield" (click)="activeTabAction = 'commercialProperty'"
label="Commercial Property"
[ngClass]="{'p-button-text text-700': activeTabAction != 'commercialProperty'}"></button>
</li>
</ul>
</div>
<div class="mt-5">
<div class="flex flex-column align-items-right gap-3 px-2 py-3 my-3 surface-border">
<p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Category"
[style]="{ width: '200px'}"></p-dropdown>
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name" optionValue="value"
[showClear]="true" placeholder="Min Price" [style]="{ width: '200px'}"></p-dropdown>
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name" optionValue="value"
[showClear]="true" placeholder="Max Price" [style]="{ width: '200px'}"></p-dropdown>
<button pButton pRipple label="Find" class="ml-3 font-bold"
[style]="{ width: '170px'}" (click)="search()"></button>
</div>
</div>
</div>
<div class="w-12 flex justify-content-center">
<button type="button" pButton pRipple label="Create Your Listing"
class="block mt-7 mb-7 lg:mb-0 p-button-rounded p-button-success p-button-lg font-medium" [routerLink]="userService.isLoggedIn()?'/createListing':'/pricing'"></button>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div> <div class="px-4 py-8 md:px-6 lg:px-8">
<div class="flex flex-wrap">
<div class="w-12 lg:w-6 p-4">
<h1 class="text-6xl font-bold text-blue-900 mt-0 mb-3">Find businesses for sale</h1>
<p class="text-3xl text-blue-600 mt-0 mb-5">Arcu cursus euismod quis viverra nibh cras. Amet justo donec enim diam vulputate ut.</p>
<ul class="list-none p-0 m-0">
<li class="mb-3 flex align-items-center"><i class="pi pi-compass text-yellow-500 text-xl mr-2"></i><span class="text-blue-600 line-height-3">Senectus et netus et malesuada fames.</span></li>
<li class="mb-3 flex align-items-center"><i class="pi pi-map text-yellow-500 text-xl mr-2"></i><span class="text-blue-600 line-height-3">Orci a scelerisque purus semper eget.</span></li>
<li class="mb-3 flex align-items-center"><i class="pi pi-calendar text-yellow-500 text-xl mr-2"></i><span class="text-blue-600 line-height-3">Aenean sed adipiscing diam donec adipiscing tristique.</span></li>
</ul>
</div>
<div class="w-12 lg:w-6 text-center lg:text-right flex">
<div class="mt-5">
<ul class="flex flex-column align-items-left gap-3 px-2 py-3 list-none surface-border">
<li><button pButton pRipple icon="pi pi-user" (click)="activeTabAction = 'business'" label="Businesses" [ngClass]="{ 'p-button-text text-700': activeTabAction !== 'business' }"></button></li>
<li>
<button pButton pRipple icon="pi pi-globe" (click)="activeTabAction = 'broker'" label="Professionals/Brokers Directory" [ngClass]="{ 'p-button-text text-700': activeTabAction != 'broker' }"></button>
</li>
<li>
<button
pButton
pRipple
icon="pi pi-shield"
(click)="activeTabAction = 'commercialProperty'"
label="Commercial Property"
[ngClass]="{ 'p-button-text text-700': activeTabAction != 'commercialProperty' }"
></button>
</li>
</ul>
</div>
<div class="mt-5">
<div class="flex flex-column align-items-right gap-3 px-2 py-3 my-3 surface-border">
<p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Category" [style]="{ width: '200px' }"></p-dropdown>
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Min Price" [style]="{ width: '200px' }"></p-dropdown>
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Max Price" [style]="{ width: '200px' }"></p-dropdown>
<button pButton pRipple label="Find" class="ml-3 font-bold" [style]="{ width: '170px' }" (click)="search()"></button>
</div>
</div>
</div>
<div class="w-12 flex justify-content-center">
<button
type="button"
pButton
pRipple
label="Create Your Listing"
class="block mt-7 mb-7 lg:mb-0 p-button-rounded p-button-success p-button-lg font-medium"
[routerLink]="userService.isLoggedIn() ? '/createListing' : '/pricing'"
></button>
</div>
</div>
</div>
</div>
</div>

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

@ -1,47 +1,45 @@
import { Component } from '@angular/core';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router'; import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { StyleClassModule } from 'primeng/styleclass'; import onChange from 'on-change';
import { ButtonModule } from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox'; import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { InputTextModule } from 'primeng/inputtext'; import { InputTextModule } from 'primeng/inputtext';
import { StyleClassModule } from 'primeng/styleclass';
import { Observable } from 'rxjs';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
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 onChange from 'on-change';
import { getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils'; import { getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils';
import { Observable } from 'rxjs';
import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
standalone: true, standalone: true,
imports: [CommonModule, StyleClassModule,ButtonModule, CheckboxModule,InputTextModule,DropdownModule,FormsModule, RouterModule], imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, RouterModule],
templateUrl: './home.component.html', templateUrl: './home.component.html',
styleUrl: './home.component.scss' styleUrl: './home.component.scss',
}) })
export class HomeComponent { export class HomeComponent {
activeTabAction = 'business'; activeTabAction = 'business';
type:string; type: string;
maxPrice:string; maxPrice: string;
minPrice:string; minPrice: string;
criteria:ListingCriteria criteria: ListingCriteria;
user$:Observable<User> user$: Observable<User>;
public constructor(private router: Router,private activatedRoute: ActivatedRoute, public selectOptions:SelectOptionsService, public userService:UserService) { public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public userService: UserService) {
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler); this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
} }
ngOnInit(){ ngOnInit() {
this.user$=this.userService.getUserObservable(); this.user$ = this.userService.getUserObservable();
} }
search(){ search() {
this.router.navigate([`listings/${this.activeTabAction}`]) this.router.navigate([`${this.activeTabAction}Listings`]);
} }
login() {
login(){ this.userService.login(window.location.href);
this.userService.login(window.location.href); }
} }
}

91
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
View File

@ -1,59 +1,48 @@
<div id="sky-line" class="hidden-lg-down"> <div id="sky-line" class="hidden-lg-down"></div>
</div>
<div class="search"> <div class="search">
<div class="wrapper"> <div class="wrapper">
<div class="grid p-4 align-items-center"> <div class="grid p-4 align-items-center">
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}" <div class="col-1 col-offset-7">
class="col-1"> <p-button label="Refine" (click)="search()"></p-button>
<p-button label="Refine" (click)="search()"></p-button> </div>
</div>
</div>
</div> </div>
</div>
</div> </div>
<div class="surface-200 h-full"> <div class="surface-200 h-full">
<div class="wrapper"> <div class="wrapper">
<div class="grid"> <div class="grid">
@for (user of users; track user.id) {
@for (user of users; track user.id) { <div class="col-12 lg:col-6 xl:col-4 p-4 flex flex-column flex-grow-1">
<div class="col-12 lg:col-6 xl:col-4 p-4 flex flex-column flex-grow-1"> <div class="surface-card shadow-2 p-2 flex flex-column flex-grow-1 justify-content-between" style="border-radius: 10px">
<div class="surface-card shadow-2 p-2 flex flex-column flex-grow-1 justify-content-between" <div class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full">
style="border-radius: 10px"> <span>
<div @if(user.hasProfile){
class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full"> <img src="{{ environment.apiBaseUrl }}/profile/{{ user.id }}.avif?_ts={{ ts }}" class="w-5rem" />
<span> } @else {
@if(user.hasProfile){ <img src="assets/images/person_placeholder.jpg" class="w-5rem" />
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif?_ts={{ts}}" class="w-5rem" /> }
} @else { </span>
<img src="assets/images/person_placeholder.jpg" class="w-5rem" /> <div class="flex flex-column align-items-center md:align-items-stretch ml-4 mt-4 md:mt-0">
} <p class="mt-0 mb-3 line-height-3 text-center md:text-left">{{ user.description }}</p>
</span> <span class="text-900 font-medium mb-1 mt-auto">{{ user.firstname }} {{ user.lastname }}</span>
<div class="flex flex-column align-items-center md:align-items-stretch ml-4 mt-4 md:mt-0"> <div class="text-600 text-sm">{{ user.companyName }}</div>
<p class="mt-0 mb-3 line-height-3 text-center md:text-left">{{user.description}}</p>
<span class="text-900 font-medium mb-1 mt-auto">{{user.firstname}} {{user.lastname}}</span>
<div class="text-600 text-sm">{{user.companyName}}</div>
</div>
</div>
<div class="px-4 py-3 text-right flex justify-content-between align-items-center">
@if(user.hasCompanyLogo){
<img src="{{environment.apiBaseUrl}}/logo/{{user.id}}.avif" class="rounded-image" />
} @else {
<img src="assets/images/placeholder.png" class="rounded-image" />
}
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full profile"
class="p-button-rounded p-button-success" [routerLink]="['/details-user',user.id]"></button>
</div>
</div>
</div> </div>
</div>
<div class="px-4 py-3 text-right flex justify-content-between align-items-center">
@if(user.hasCompanyLogo){
<img src="{{ environment.apiBaseUrl }}/logo/{{ user.id }}.avif" class="rounded-image" />
} @else {
<img src="assets/images/placeholder.png" class="rounded-image" />
} }
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full profile" class="p-button-rounded p-button-success" [routerLink]="['/details-user', user.id]"></button>
</div>
</div> </div>
<div class="mb-2 surface-200 flex align-items-center justify-content-center"> </div>
<div class="mx-1 text-color">Total number of Listings: {{totalRecords}}</div> }
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows"
[totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
</div>
</div> </div>
</div> <div class="mb-2 surface-200 flex align-items-center justify-content-center">
<div class="mx-1 text-color">Total number of Listings: {{ totalRecords }}</div>
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
</div>
</div>
</div>

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

@ -1,113 +1,107 @@
import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component } from '@angular/core'; import { ChangeDetectorRef, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import onChange from 'on-change';
import { ButtonModule } from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox'; import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
import { StyleClassModule } from 'primeng/styleclass';
import { DropdownModule } from 'primeng/dropdown'; import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext';
import { CommonModule } from '@angular/common';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Observable, lastValueFrom } from 'rxjs';
import { PaginatorModule } from 'primeng/paginator'; import { PaginatorModule } from 'primeng/paginator';
import onChange from 'on-change'; import { StyleClassModule } from 'primeng/styleclass';
import { InitEditableRow } from 'primeng/table'; import { ToggleButtonModule } from 'primeng/togglebutton';
import { SelectOptionsService } from '../../../services/select-options.service'; import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingsService } from '../../../services/listings.service';
import { UserService } from '../../../services/user.service';
import { ImageService } from '../../../services/image.service';
import { createGenericObject, getCriteriaStateObject, getListingType, getSessionStorageHandler } from '../../../utils/utils';
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model'; import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment'; import { environment } from '../../../../environments/environment';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model'; import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
@Component({ @Component({
selector: 'app-broker-listings', selector: 'app-broker-listings',
standalone: true, standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule], imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
templateUrl: './broker-listings.component.html', templateUrl: './broker-listings.component.html',
styleUrl: './broker-listings.component.scss' styleUrl: './broker-listings.component.scss',
}) })
export class BrokerListingsComponent { export class BrokerListingsComponent {
environment=environment; environment = environment;
listings: Array<BusinessListing>; listings: Array<BusinessListing>;
users: Array<User> users: Array<User>;
filteredListings: Array<ListingType>; filteredListings: Array<ListingType>;
criteria:ListingCriteria; criteria: ListingCriteria;
realEstateChecked: boolean; realEstateChecked: boolean;
// category: string; // category: string;
maxPrice: string; maxPrice: string;
minPrice: string; minPrice: string;
type:string; type: string;
states = []; states = [];
statesSet = new Set(); statesSet = new Set();
state:string; state: string;
first: number = 0; first: number = 0;
rows: number = 12; rows: number = 12;
totalRecords:number = 0; totalRecords: number = 0;
ts = new Date().getTime() ts = new Date().getTime();
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined; public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
constructor(public selectOptions: SelectOptionsService, constructor(
private listingsService:ListingsService, public selectOptions: SelectOptionsService,
private userService:UserService, private listingsService: ListingsService,
private activatedRoute: ActivatedRoute, private userService: UserService,
private router:Router, private activatedRoute: ActivatedRoute,
private cdRef:ChangeDetectorRef, private router: Router,
private imageService:ImageService) { private cdRef: ChangeDetectorRef,
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler); private imageService: ImageService,
this.router.getCurrentNavigation() ) {
this.activatedRoute.snapshot this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
this.router.getCurrentNavigation();
this.activatedRoute.snapshot;
this.activatedRoute.params.subscribe(params => { this.activatedRoute.params.subscribe(params => {
if (this.activatedRoute.snapshot.fragment===''){ if (this.activatedRoute.snapshot.fragment === '') {
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler) this.criteria = onChange(createGenericObject<ListingCriteria>(), getSessionStorageHandler);
this.first=0; this.first = 0;
} }
this.init() this.init();
}) });
} }
async ngOnInit(){ async ngOnInit() {}
async init() {
this.listings = [];
this.filteredListings = [];
this.users = await this.userService.search(this.criteria);
const profiles = await this.imageService.getProfileImagesForUsers(this.users.map(u => u.id));
const logos = await this.imageService.getCompanyLogosForUsers(this.users.map(u => u.id));
this.users.forEach(u => {
u.hasProfile = profiles[u.id];
u.hasCompanyLogo = logos[u.id];
});
this.cdRef.markForCheck();
this.cdRef.detectChanges();
} }
async init(){ setStates() {
this.statesSet = new Set();
this.listings=[] this.listings.forEach(l => {
this.filteredListings=[]; if (l.state) {
this.users=await this.userService.search(this.criteria); this.statesSet.add(l.state);
const profiles = await this.imageService.getProfileImagesForUsers(this.users.map(u=>u.id));
const logos = await this.imageService.getCompanyLogosForUsers(this.users.map(u=>u.id));
this.users.forEach(u=>{
u.hasProfile=profiles[u.id]
u.hasCompanyLogo=logos[u.id]
})
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
setStates(){
this.statesSet=new Set();
this.listings.forEach(l=>{
if (l.state){
this.statesSet.add(l.state)
} }
}) });
this.states = [...this.statesSet].map((ls) =>({name:this.selectOptions.getState(ls as string),value:ls})) this.states = [...this.statesSet].map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
} }
async search() { async search() {
this.listings= await this.listingsService.getListings(this.criteria,'professionals_brokers'); this.listings = await this.listingsService.getListings(this.criteria, 'professionals_brokers');
this.setStates(); this.setStates();
this.totalRecords=this.listings.length this.totalRecords = this.listings.length;
this.filteredListings =[...this.listings].splice(this.first,this.rows); this.filteredListings = [...this.listings].splice(this.first, this.rows);
this.cdRef.markForCheck(); this.cdRef.markForCheck();
this.cdRef.detectChanges(); this.cdRef.detectChanges();
} }
onPageChange(event: any) { onPageChange(event: any) {
this.criteria.start = event.first;
this.criteria.start=event.first; this.criteria.length = event.rows;
this.criteria.length=event.rows; this.criteria.page = event.page;
this.criteria.page=event.page; this.criteria.pageCount = event.pageCount;
this.criteria.pageCount=event.pageCount;
} }
imageErrorHandler(listing: ListingType) { imageErrorHandler(listing: ListingType) {
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann // listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann

143
bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
View File

@ -1,87 +1,70 @@
<div id="sky-line" class="hidden-lg-down"> <div id="sky-line" class="hidden-lg-down"></div>
</div>
<div class="search"> <div class="search">
<div class="wrapper"> <div class="wrapper">
<div class="grid p-4 align-items-center"> <div class="grid p-4 align-items-center">
@if (category==='business'){ <div class="col-2">
<div class="col-2"> <p-dropdown
<p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name" [options]="selectOptions.typesOfBusiness"
optionValue="value" [showClear]="true" placeholder="Categorie of Business" [(ngModel)]="criteria.type"
[style]="{ width: '100%'}"></p-dropdown> optionLabel="name"
</div> optionValue="value"
<div class="col-2"> [showClear]="true"
<p-dropdown [options]="states" [(ngModel)]="state" optionLabel="criteria.location" optionLabel="name" placeholder="Categorie of Business"
optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '100%'}"></p-dropdown> [style]="{ width: '100%' }"
</div> ></p-dropdown>
<div class="col-2"> </div>
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name" <div class="col-2">
optionValue="value" [showClear]="true" placeholder="Min Price" <p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="criteria.location" optionLabel="name" optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '100%' }"></p-dropdown>
[style]="{ width: '100%'}"></p-dropdown> </div>
</div> <div class="col-2">
<div class="col-2"> <p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Min Price" [style]="{ width: '100%' }"></p-dropdown>
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name" </div>
optionValue="value" [showClear]="true" placeholder="Max Price" <div class="col-2">
[style]="{ width: '100%'}"></p-dropdown> <p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Max Price" [style]="{ width: '100%' }"></p-dropdown>
</div> </div>
<div class="col-3"> <div class="col-3">
<!-- <p-toggleButton [(ngModel)]="checked1" onLabel="Sustainable" offLabel="Unsustainable" onIcon="pi pi-check" offIcon="pi pi-times" styleClass="mb-3 lg:mt-0 mr-4 flex-shrink-0 w-12rem"></p-toggleButton> --> <!-- <p-toggleButton [(ngModel)]="checked1" onLabel="Sustainable" offLabel="Unsustainable" onIcon="pi pi-check" offIcon="pi pi-times" styleClass="mb-3 lg:mt-0 mr-4 flex-shrink-0 w-12rem"></p-toggleButton> -->
<p-toggleButton [(ngModel)]="criteria.realEstateChecked" onLabel="Real Estate not included" <p-toggleButton [(ngModel)]="criteria.realEstateChecked" onLabel="Real Estate not included" offLabel="Real Estate included"></p-toggleButton>
offLabel="Real Estate included"></p-toggleButton> </div>
</div> <div class="col-1">
} <p-button label="Refine" (click)="search()"></p-button>
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}" </div>
class="col-1">
<p-button label="Refine" (click)="search()"></p-button>
</div>
</div>
</div> </div>
</div>
</div> </div>
<div class="surface-200 h-full"> <div class="surface-200 h-full">
<div class="wrapper"> <div class="wrapper">
<div class="grid"> <div class="grid">
@for (listing of listings; track listing.id) { @for (listing of listings; track listing.id) {
<div *ngIf="listing.listingsCategory==='business'" class="col-12 lg:col-3 p-3"> <div *ngIf="listing.listingsCategory === 'business'" class="col-12 lg:col-3 p-3">
<div class="shadow-2 border-round surface-card mb-3 h-full flex-column justify-content-between flex"> <div class="shadow-2 border-round surface-card mb-3 h-full flex-column justify-content-between flex">
<div class="p-4 h-full flex flex-column"> <div class="p-4 h-full flex flex-column">
<div class="flex align-items-center"> <div class="flex align-items-center">
<span [class]="selectOptions.getBgColorType(listing.type)" <span [class]="selectOptions.getBgColorType(listing.type)" class="inline-flex border-circle align-items-center justify-content-center mr-3" style="width: 38px; height: 38px">
class="inline-flex border-circle align-items-center justify-content-center mr-3" <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
style="width:38px;height:38px"> </span>
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i> <span class="text-900 font-medium text-2xl">{{ selectOptions.getBusiness(listing.type) }}</span>
</span>
<span
class="text-900 font-medium text-2xl">{{selectOptions.getBusiness(listing.type)}}</span>
</div>
<div class="text-900 my-3 text-xl font-medium">{{listing.title}}</div>
<p class="mt-0 mb-1 text-700 line-height-3">Asking price: {{listing.price | currency}}</p>
<p class="mt-0 mb-1 text-700 line-height-3">Sales revenue: {{listing.salesRevenue | currency}}
</p>
<p class="mt-0 mb-1 text-700 line-height-3">Net profit: {{listing.cashFlow | currency}}</p>
<p class="mt-0 mb-1 text-700 line-height-3">Location: {{selectOptions.getState(listing.state)}}
</p>
<p class="mt-0 mb-1 text-700 line-height-3">Established: {{listing.established}}</p>
<div class="mt-auto ml-auto">
<img src="{{environment.apiBaseUrl}}/logo/{{listing.userId}}"
(error)="imageErrorHandler(listing)" class="rounded-image" />
</div>
</div>
<div class="px-4 py-3 surface-100 text-left">
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full Listing"
class="p-button-rounded p-button-success"
[routerLink]="['/details-listing/business',listing.id]"></button>
</div>
</div>
</div> </div>
} <div class="text-900 my-3 text-xl font-medium">{{ listing.title }}</div>
<p class="mt-0 mb-1 text-700 line-height-3">Asking price: {{ listing.price | currency }}</p>
<p class="mt-0 mb-1 text-700 line-height-3">Sales revenue: {{ listing.salesRevenue | currency }}</p>
<p class="mt-0 mb-1 text-700 line-height-3">Net profit: {{ listing.cashFlow | currency }}</p>
<p class="mt-0 mb-1 text-700 line-height-3">Location: {{ selectOptions.getState(listing.state) }}</p>
<p class="mt-0 mb-1 text-700 line-height-3">Established: {{ listing.established }}</p>
<div class="mt-auto ml-auto">
<img src="{{ environment.apiBaseUrl }}/logo/{{ listing.userId }}" (error)="imageErrorHandler(listing)" class="rounded-image" />
</div>
</div>
<div class="px-4 py-3 surface-100 text-left">
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full Listing" class="p-button-rounded p-button-success" [routerLink]="['/details-business-listing', listing.id]"></button>
</div>
</div> </div>
<div class="mb-2 surface-200 flex align-items-center justify-content-center"> </div>
<div class="mx-1 text-color">Total number of Listings: {{totalRecords}}</div> }
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows"
[totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
</div>
</div> </div>
</div> <div class="mb-2 surface-200 flex align-items-center justify-content-center">
<div class="mx-1 text-color">Total number of Listings: {{ totalRecords }}</div>
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
</div>
</div>
</div>

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

@ -1,112 +1,105 @@
import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component } from '@angular/core'; import { ChangeDetectorRef, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import onChange from 'on-change';
import { ButtonModule } from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox'; import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
import { StyleClassModule } from 'primeng/styleclass';
import { DropdownModule } from 'primeng/dropdown'; import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext';
import { CommonModule } from '@angular/common';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Observable, lastValueFrom } from 'rxjs';
import { PaginatorModule } from 'primeng/paginator'; import { PaginatorModule } from 'primeng/paginator';
import onChange from 'on-change'; import { StyleClassModule } from 'primeng/styleclass';
import { InitEditableRow } from 'primeng/table'; import { ToggleButtonModule } from 'primeng/togglebutton';
import { SelectOptionsService } from '../../../services/select-options.service'; import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingsService } from '../../../services/listings.service';
import { UserService } from '../../../services/user.service';
import { ImageService } from '../../../services/image.service';
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model'; import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment'; import { environment } from '../../../../environments/environment';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model'; import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
@Component({ @Component({
selector: 'app-business-listings', selector: 'app-business-listings',
standalone: true, standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule], imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
templateUrl: './business-listings.component.html', templateUrl: './business-listings.component.html',
styleUrl: './business-listings.component.scss' styleUrl: './business-listings.component.scss',
}) })
export class BusinessListingsComponent { export class BusinessListingsComponent {
environment=environment; environment = environment;
listings: Array<BusinessListing>; listings: Array<BusinessListing>;
users: Array<User> users: Array<User>;
filteredListings: Array<BusinessListing>; filteredListings: Array<BusinessListing>;
criteria:ListingCriteria; criteria: ListingCriteria;
realEstateChecked: boolean; realEstateChecked: boolean;
// category: string;
maxPrice: string; maxPrice: string;
minPrice: string; minPrice: string;
type:string; type: string;
states = []; states = [];
statesSet = new Set(); statesSet = new Set();
state:string; state: string;
first: number = 0; first: number = 0;
rows: number = 12; rows: number = 12;
totalRecords:number = 0; totalRecords: number = 0;
ts = new Date().getTime() ts = new Date().getTime();
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined; public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
constructor(public selectOptions: SelectOptionsService, constructor(
private listingsService:ListingsService, public selectOptions: SelectOptionsService,
private userService:UserService, private listingsService: ListingsService,
private activatedRoute: ActivatedRoute, private userService: UserService,
private router:Router, private activatedRoute: ActivatedRoute,
private cdRef:ChangeDetectorRef, private router: Router,
private imageService:ImageService) { private cdRef: ChangeDetectorRef,
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler); private imageService: ImageService,
this.router.getCurrentNavigation() ) {
this.activatedRoute.snapshot this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
this.router.getCurrentNavigation();
this.activatedRoute.snapshot;
this.activatedRoute.params.subscribe(params => { this.activatedRoute.params.subscribe(params => {
if (this.activatedRoute.snapshot.fragment===''){ if (this.activatedRoute.snapshot.fragment === '') {
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler) this.criteria = onChange(createGenericObject<ListingCriteria>(), getSessionStorageHandler);
this.first=0; this.first = 0;
} }
this.category = (<any>params).type; this.category = (<any>params).type;
this.init() this.init();
}) });
} }
async ngOnInit(){ async ngOnInit() {}
} async init() {
async init(){ this.users = [];
this.users=[] this.listings = await this.listingsService.getListings(this.criteria, 'business');
this.listings=await this.listingsService.getListings(this.criteria,'business');
this.setStates();
//this.filteredListings=[...this.listings];
this.totalRecords=this.listings.length
//this.filteredListings=[...this.listings].splice(this.first,this.rows);
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
setStates(){
this.statesSet=new Set();
this.listings.forEach(l=>{
if (l.state){
this.statesSet.add(l.state)
}
})
this.states = [...this.statesSet].map((ls) =>({name:this.selectOptions.getState(ls as string),value:ls}))
}
async search() {
this.listings= await this.listingsService.getListings(this.criteria,'business');
this.setStates(); this.setStates();
this.totalRecords=this.listings.length //this.filteredListings=[...this.listings];
this.filteredListings =[...this.listings].splice(this.first,this.rows); this.totalRecords = this.listings.length;
//this.filteredListings=[...this.listings].splice(this.first,this.rows);
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
setStates() {
this.statesSet = new Set();
this.listings.forEach(l => {
if (l.state) {
this.statesSet.add(l.state);
}
});
this.states = [...this.statesSet].map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
}
async search() {
this.listings = await this.listingsService.getListings(this.criteria, 'business');
this.setStates();
this.totalRecords = this.listings.length;
this.filteredListings = [...this.listings].splice(this.first, this.rows);
this.cdRef.markForCheck(); this.cdRef.markForCheck();
this.cdRef.detectChanges(); this.cdRef.detectChanges();
} }
onPageChange(event: any) { onPageChange(event: any) {
this.criteria.start = event.first;
this.criteria.start=event.first; this.criteria.length = event.rows;
this.criteria.length=event.rows; this.criteria.page = event.page;
this.criteria.page=event.page; this.criteria.pageCount = event.pageCount;
this.criteria.pageCount=event.pageCount;
} }
imageErrorHandler(listing: ListingType) { imageErrorHandler(listing: ListingType) {
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann // listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann

125
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
View File

@ -1,73 +1,68 @@
<div id="sky-line" class="hidden-lg-down"> <div id="sky-line" class="hidden-lg-down"></div>
</div>
<div class="search"> <div class="search">
<div class="wrapper"> <div class="wrapper">
<div class="grid p-4 align-items-center"> <div class="grid p-4 align-items-center">
<div class="col-2"> <div class="col-2">
<p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" <p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Location" [style]="{ width: '100%' }"></p-dropdown>
[showClear]="true" placeholder="Location" [style]="{ width: '100%'}"></p-dropdown> </div>
</div> <div class="col-1 col-offset-9">
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}" <p-button label="Refine" (click)="search()"></p-button>
class="col-1"> </div>
<p-button label="Refine" (click)="search()"></p-button>
</div>
</div>
</div> </div>
</div>
</div> </div>
<div class="surface-200 h-full"> <div class="surface-200 h-full">
<div class="wrapper"> <div class="wrapper">
<div class="grid"> <div class="grid">
@for (listing of listings; track listing.id) {
@for (listing of filteredListings; track listing.id) { <div class="col-12 xl:col-4 flex">
<div class="col-12 xl:col-4 flex"> <div class="surface-card p-2 flex flex-column flex-grow-1 justify-content-between" style="border-radius: 10px">
<div class="surface-card p-2 flex flex-column flex-grow-1 justify-content-between" <article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
style="border-radius: 10px"> <div class="relative">
<article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card"> @if (listing.imageOrder.length>0){
<div class="relative"> <img src="{{ environment.apiBaseUrl }}/property/{{ listing.id }}/{{ listing.imageOrder[0] }}" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem" />
@if (listing.imageOrder.length>0){ } @else {
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{listing.imageOrder[0]}}" <!-- <img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{listing.imageOrder[0].name}}" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem"> -->
alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem"> <img src="assets/images/placeholder_properties.jpg" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem" />
} @else { }
<!-- <img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{listing.imageOrder[0].name}}" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem"> --> <p class="absolute px-2 py-1 border-round-lg text-sm font-normal text-white mt-0 mb-0" style="background-color: rgba(255, 255, 255, 0.3); backdrop-filter: invert(30%); top: 3%; left: 3%">
<img src="assets/images/placeholder_properties.jpg" alt="Image" {{ selectOptions.getState(listing.state) }}
class="border-round w-full h-full md:w-12rem md:h-9rem" /> </p>
}
<p class="absolute px-2 py-1 border-round-lg text-sm font-normal text-white mt-0 mb-0"
style="background-color: rgba(255, 255, 255, 0.3); backdrop-filter: invert(30%);; top: 3%; left: 3%;">
{{selectOptions.getState(listing.state)}}</p>
</div>
<div class="flex flex-column w-full gap-3">
<div class="flex w-full justify-content-between align-items-center flex-wrap gap-3">
<p class="font-semibold text-lg mt-0 mb-0">{{listing.title}}</p>
<!-- <p-rating [ngModel]="val1" readonly="true" stars="5" [cancel]="false" ngClass="flex-shrink-0"></p-rating> -->
</div>
<p class="font-normal text-lg text-600 mt-0 mb-0">{{listing.city}}</p>
<div class="flex flex-wrap justify-content-between xl:h-2rem mt-auto">
<p class="text-base flex align-items-center text-900 mt-0 mb-1">
<i class="pi pi-list mr-2"></i>
<span
class="font-medium">{{selectOptions.getCommercialProperty(listing.type)}}</span>
</p>
</div>
<p class="font-semibold text-3xl text-900 mt-0 mb-2">{{listing.price | currency}}</p>
</div>
</article>
<div class="px-4 py-3 text-left ">
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full Listing"
class="p-button-rounded p-button-success"
[routerLink]="['/details-listing/commercialProperty',listing.id]"></button>
</div>
</div>
</div> </div>
<div class="flex flex-column w-full gap-3">
} <div class="flex w-full justify-content-between align-items-center flex-wrap gap-3">
</div> <p class="font-semibold text-lg mt-0 mb-0">{{ listing.title }}</p>
<div class="mb-2 surface-200 flex align-items-center justify-content-center"> <!-- <p-rating [ngModel]="val1" readonly="true" stars="5" [cancel]="false" ngClass="flex-shrink-0"></p-rating> -->
<div class="mx-1 text-color">Total number of Listings: {{totalRecords}}</div> </div>
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" <p class="font-normal text-lg text-600 mt-0 mb-0">{{ listing.city }}</p>
[totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator> <div class="flex flex-wrap justify-content-between xl:h-2rem mt-auto">
<p class="text-base flex align-items-center text-900 mt-0 mb-1">
<i class="pi pi-list mr-2"></i>
<span class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</span>
</p>
</div>
<p class="font-semibold text-3xl text-900 mt-0 mb-2">{{ listing.price | currency }}</p>
</div>
</article>
<div class="px-4 py-3 text-left">
<button
pButton
pRipple
icon="pi pi-arrow-right"
iconPos="right"
label="View Full Listing"
class="p-button-rounded p-button-success"
[routerLink]="['/details-commercial-property-listing', listing.id]"
></button>
</div>
</div> </div>
</div>
}
</div> </div>
</div> <div class="mb-2 surface-200 flex align-items-center justify-content-center">
<div class="mx-1 text-color">Total number of Listings: {{ totalRecords }}</div>
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
</div>
</div>
</div>

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

@ -1,100 +1,96 @@
import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component } from '@angular/core'; import { ChangeDetectorRef, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import onChange from 'on-change';
import { ButtonModule } from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox'; import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
import { StyleClassModule } from 'primeng/styleclass';
import { DropdownModule } from 'primeng/dropdown'; import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext';
import { CommonModule } from '@angular/common';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Observable, lastValueFrom } from 'rxjs';
import { PaginatorModule } from 'primeng/paginator'; import { PaginatorModule } from 'primeng/paginator';
import onChange from 'on-change'; import { StyleClassModule } from 'primeng/styleclass';
import { InitEditableRow } from 'primeng/table'; import { ToggleButtonModule } from 'primeng/togglebutton';
import { SelectOptionsService } from '../../../services/select-options.service'; import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingsService } from '../../../services/listings.service';
import { UserService } from '../../../services/user.service';
import { ImageService } from '../../../services/image.service';
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model'; import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment'; import { environment } from '../../../../environments/environment';
import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model'; import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
@Component({ @Component({
selector: 'app-commercial-property-listings', selector: 'app-commercial-property-listings',
standalone: true, standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule], imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
templateUrl: './commercial-property-listings.component.html', templateUrl: './commercial-property-listings.component.html',
styleUrl: './commercial-property-listings.component.scss' styleUrl: './commercial-property-listings.component.scss',
}) })
export class CommercialPropertyListingsComponent { export class CommercialPropertyListingsComponent {
environment=environment; environment = environment;
listings: Array<CommercialPropertyListing>; listings: Array<CommercialPropertyListing>;
users: Array<User> users: Array<User>;
filteredListings: Array<CommercialPropertyListing>; filteredListings: Array<CommercialPropertyListing>;
criteria:ListingCriteria; criteria: ListingCriteria;
realEstateChecked: boolean; realEstateChecked: boolean;
maxPrice: string; maxPrice: string;
minPrice: string; minPrice: string;
type:string; type: string;
states = []; states = [];
statesSet = new Set(); statesSet = new Set();
state:string; state: string;
first: number = 0; first: number = 0;
rows: number = 12; rows: number = 12;
totalRecords:number = 0; totalRecords: number = 0;
ts = new Date().getTime() ts = new Date().getTime();
constructor(public selectOptions: SelectOptionsService, constructor(
private listingsService:ListingsService, public selectOptions: SelectOptionsService,
private userService:UserService, private listingsService: ListingsService,
private activatedRoute: ActivatedRoute, private userService: UserService,
private router:Router, private activatedRoute: ActivatedRoute,
private cdRef:ChangeDetectorRef, private router: Router,
private imageService:ImageService) { private cdRef: ChangeDetectorRef,
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler); private imageService: ImageService,
this.router.getCurrentNavigation() ) {
this.activatedRoute.snapshot this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
this.router.getCurrentNavigation();
this.activatedRoute.snapshot;
this.activatedRoute.params.subscribe(params => { this.activatedRoute.params.subscribe(params => {
if (this.activatedRoute.snapshot.fragment===''){ if (this.activatedRoute.snapshot.fragment === '') {
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler) this.criteria = onChange(createGenericObject<ListingCriteria>(), getSessionStorageHandler);
this.first=0; this.first = 0;
} }
this.init() this.init();
}) });
} }
async ngOnInit(){ async ngOnInit() {}
} async init() {
async init(){ this.users = [];
this.users=[] this.listings = await this.listingsService.getListings(this.criteria, 'commercialProperty');
this.listings=await this.listingsService.getListings(this.criteria,'commercialProperty');
this.setStates();
//this.filteredListings=[...this.listings];
this.totalRecords=this.listings.length
//this.filteredListings=[...this.listings].splice(this.first,this.rows);
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
setStates(){
this.statesSet=new Set();
this.listings.forEach(l=>{
if (l.state){
this.statesSet.add(l.state)
}
})
this.states = [...this.statesSet].map((ls) =>({name:this.selectOptions.getState(ls as string),value:ls}))
}
async search() {
this.listings= await this.listingsService.getListings(this.criteria,'commercialProperty');
this.setStates(); this.setStates();
this.totalRecords=this.listings.length //this.filteredListings=[...this.listings];
this.filteredListings =[...this.listings].splice(this.first,this.rows); this.totalRecords = this.listings.length;
//this.filteredListings=[...this.listings].splice(this.first,this.rows);
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
setStates() {
this.statesSet = new Set();
this.listings.forEach(l => {
if (l.state) {
this.statesSet.add(l.state);
}
});
this.states = [...this.statesSet].map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
}
async search() {
this.listings = await this.listingsService.getListings(this.criteria, 'commercialProperty');
this.setStates();
this.totalRecords = this.listings.length;
this.filteredListings = [...this.listings].splice(this.first, this.rows);
this.cdRef.markForCheck(); this.cdRef.markForCheck();
this.cdRef.detectChanges(); this.cdRef.detectChanges();
} }
@ -102,10 +98,10 @@ export class CommercialPropertyListingsComponent {
//this.first = event.first; //this.first = event.first;
//this.rows = event.rows; //this.rows = event.rows;
//this.filteredListings=[...this.listings].splice(this.first,this.rows); //this.filteredListings=[...this.listings].splice(this.first,this.rows);
this.criteria.start=event.first; this.criteria.start = event.first;
this.criteria.length=event.rows; this.criteria.length = event.rows;
this.criteria.page=event.page; this.criteria.page = event.page;
this.criteria.pageCount=event.pageCount; this.criteria.pageCount = event.pageCount;
} }
imageErrorHandler(listing: ListingType) { imageErrorHandler(listing: ListingType) {
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann // listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann

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

@ -1,194 +1,203 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8"> <div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="p-fluid flex flex-column lg:flex-row"> <div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account> <menu-account></menu-account>
<p-toast></p-toast> <p-toast></p-toast>
<div class="surface-card p-5 shadow-2 border-round flex-auto"> <div class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">Account Details</div> <div class="text-900 font-semibold text-lg mt-3">Account Details</div>
<p-divider></p-divider> <p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row"> <div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid"> <div class="flex-auto p-fluid">
<!-- <div class="mb-4"> @if (user){
<label for="email" class="block font-medium text-900 mb-2">Username</label> <div class="mb-4">
<input id="email" type="text" [disabled]="true" pInputText [(ngModel)]="user.username"> <label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label>
<p class="font-italic text-sm line-height-1">Usernames cannot be changed.</p> <input id="state" type="text" [disabled]="true" pInputText [(ngModel)]="user.email" />
</div> --> <p class="font-italic text-sm line-height-1">You can only modify your email by contacting us at emailchange&#64;bizmatch.net</p>
<div class="mb-4"> </div>
<label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label> <div class="grid">
<input id="state" type="text" [disabled]="true" pInputText [(ngModel)]="user.email"> <div class="mb-4 col-12 md:col-6">
<p class="font-italic text-sm line-height-1">You can only modify your email by contacting us at <label for="firstname" class="block font-medium text-900 mb-2">First Name</label>
emailchange&#64;bizmatch.net</p> <input id="firstname" type="text" pInputText [(ngModel)]="user.firstname" />
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="firstname" class="block font-medium text-900 mb-2">First Name</label>
<input id="firstname" type="text" pInputText [(ngModel)]="user.firstname">
</div>
<div class="mb-4 col-12 md:col-6">
<label for="lastname" class="block font-medium text-900 mb-2">Last Name</label>
<input id="lastname" type="text" pInputText [(ngModel)]="user.lastname">
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="firstname" class="block font-medium text-900 mb-2">Company Name</label>
<input id="firstname" type="text" pInputText [(ngModel)]="user.companyName">
</div>
<div class="mb-4 col-12 md:col-6">
<label for="lastname" class="block font-medium text-900 mb-2">Describe yourself</label>
<input id="lastname" type="text" pInputText [(ngModel)]="user.description">
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-4">
<label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone Number</label>
<input id="phoneNumber" type="text" pInputText [(ngModel)]="user.phoneNumber">
</div>
<div class="mb-4 col-12 md:col-4">
<label for="companyWebsite" class="block font-medium text-900 mb-2">Company Website</label>
<input id="companyWebsite" type="text" pInputText [(ngModel)]="user.companyWebsite">
</div>
<div class="mb-4 col-12 md:col-4">
<label for="companyLocation" class="block font-medium text-900 mb-2">Company
Location</label>
<p-autoComplete [(ngModel)]="user.companyLocation" [suggestions]="suggestions"
(completeMethod)="search($event)"></p-autoComplete>
</div>
</div>
<div class="mb-4">
<label for="companyOverview" class="block font-medium text-900 mb-2">Company Overview</label>
<p-editor [(ngModel)]="user.companyOverview" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
<div class="mb-4">
<label for="companyOverview" class="block font-medium text-900 mb-2">Services We offer</label>
<p-editor [(ngModel)]="user.offeredServices" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
<div class="mb-4">
<label for="areasServed" class="block font-medium text-900 mb-2">Areas We Serve</label>
<textarea id="areasServed" type="text" pInputTextarea rows="5" [autoResize]="true"
[(ngModel)]="user.areasServed"></textarea>
</div>
<div>
<label for="companyOverview" class="block font-medium text-900 mb-2">Licensed In</label>
@for (licensedIn of userLicensedIn; track licensedIn.value){
<div class="grid">
<div class="flex col-12 md:col-6">
<p-dropdown id="states" [options]="selectOptions?.states" [(ngModel)]="licensedIn.name"
optionLabel="name" optionValue="value" [showClear]="true" placeholder="State"
[ngStyle]="{ width: '100%'}"></p-dropdown>
</div>
<div class="flex col-12 md:col-6">
<input id="companyWebsite" type="text" pInputText [(ngModel)]="licensedIn.value"
placeholder="Licence Number">
</div>
</div>
}
</div>
<div class="field mb-5 col-12 md:col-6 flex align-items-center">
<p-button class="mr-1" icon="pi pi-plus" severity="success" (click)="addLicence()"></p-button>
<p-button icon="pi pi-minus" severity="danger" (click)="removeLicence()"
[disabled]="user.licensedIn?.length<2"></p-button>
<span class="text-xs">&nbsp;(Add more licenses or remove existing ones.)</span>
<!-- <button pButton pRipple label="Add Licence" class="w-auto" (click)="addLicence()"></button> -->
</div>
<div>
<button pButton pRipple label="Update Profile" class="w-auto"
(click)="updateProfile(user)"></button>
</div>
</div>
<div>
<div class="flex flex-column align-items-center flex-or mb-8">
<span class="font-medium text-900 mb-2">Company Logo</span>
<span class="font-medium text-xs mb-2">(is shown in every offer)</span>
@if(user.hasCompanyLogo){
<img src="{{companyLogoUrl}}" class="rounded-profile" />
} @else {
<img src="assets/images/placeholder.png" class="rounded-profile" />
}
<p-fileUpload #companyUpload mode="basic" chooseLabel="Upload" name="file" [customUpload]="true"
accept="image/*" [maxFileSize]="maxFileSize" (onSelect)="select($event,'company')"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
</div>
<p-divider></p-divider>
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Your Profile Picture</span>
@if(user.hasProfile){
<img src="{{profileUrl}}" class="rounded-profile" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="rounded-profile" />
}
<p-fileUpload #profileUpload mode="basic" chooseLabel="Upload" name="file" [customUpload]="true"
accept="image/*" [maxFileSize]="maxFileSize" (onSelect)="select($event,'profile')"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
</div>
</div>
</div> </div>
<div class="text-900 font-semibold text-lg mt-3">Membership Level</div> <div class="mb-4 col-12 md:col-6">
<p-divider></p-divider> <label for="lastname" class="block font-medium text-900 mb-2">Last Name</label>
<p-table [value]="userSubscriptions" [tableStyle]="{ 'min-width': '50rem' }" dataKey="id"> <input id="lastname" type="text" pInputText [(ngModel)]="user.lastname" />
<ng-template pTemplate="header"> </div>
<tr> </div>
<th style="width: 5rem"></th> <div class="grid">
<th>ID</th> <div class="mb-4 col-12 md:col-6">
<th>Level</th> <label for="firstname" class="block font-medium text-900 mb-2">Company Name</label>
<th>Start Date</th> <input id="firstname" type="text" pInputText [(ngModel)]="user.companyName" />
<th>Date Modified</th> </div>
<th>End Date</th> <div class="mb-4 col-12 md:col-6">
<th>Status</th> <label for="lastname" class="block font-medium text-900 mb-2">Describe yourself</label>
</tr> <input id="lastname" type="text" pInputText [(ngModel)]="user.description" />
</ng-template> </div>
<ng-template pTemplate="body" let-subscription let-expanded="expanded"> </div>
<tr> <div class="grid">
<td> <div class="mb-4 col-12 md:col-4">
<button type="button" pButton pRipple [pRowToggler]="subscription" <label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone Number</label>
class="p-button-text p-button-rounded p-button-plain" <input id="phoneNumber" type="text" pInputText [(ngModel)]="user.phoneNumber" />
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button> </div>
</td> <div class="mb-4 col-12 md:col-4">
<td>{{ subscription.id }}</td> <label for="companyWebsite" class="block font-medium text-900 mb-2">Company Website</label>
<td>{{ subscription.level }}</td> <input id="companyWebsite" type="text" pInputText [(ngModel)]="user.companyWebsite" />
<td>{{ subscription.start | date }}</td> </div>
<td>{{ subscription.modified | date }}</td> <div class="mb-4 col-12 md:col-4">
<td>{{ subscription.end | date }}</td> <label for="companyLocation" class="block font-medium text-900 mb-2">Company Location</label>
<td>{{ subscription.status }}</td> <p-autoComplete [(ngModel)]="user.companyLocation" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
</tr> </div>
</ng-template> </div>
<ng-template pTemplate="rowexpansion" let-subscription> <div class="mb-4">
<tr> <label for="companyOverview" class="block font-medium text-900 mb-2">Company Overview</label>
<td colspan="7"> <p-editor [(ngModel)]="user.companyOverview" [style]="{ height: '320px' }" [modules]="editorModules">
<div class="p-3"> <ng-template pTemplate="header"></ng-template>
<p-table [value]="subscription.invoices" dataKey="id"> </p-editor>
<ng-template pTemplate="header"> </div>
<tr> <div class="mb-4">
<th style="width: 5rem"></th> <label for="companyOverview" class="block font-medium text-900 mb-2">Services We offer</label>
<th>ID</th> <p-editor [(ngModel)]="user.offeredServices" [style]="{ height: '320px' }" [modules]="editorModules">
<th>Date</th> <ng-template pTemplate="header"></ng-template>
<th>Price</th> </p-editor>
</tr> </div>
</ng-template>
<ng-template pTemplate="body" let-invoice> <div class="mb-4">
<tr> <label for="areasServed" class="block font-medium text-900 mb-2">Areas We Serve</label>
<td> <textarea id="areasServed" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="user.areasServed"></textarea>
<button pButton pRipple icon="pi pi-print" class="p-button-rounded p-button-success mr-2" </div>
(click)="printInvoice(invoice)"></button> <div>
</td> <label for="companyOverview" class="block font-medium text-900 mb-2">Licensed In</label>
<td>{{ invoice.id }}</td> @for (licensedIn of userLicensedIn; track licensedIn.value){
<td>{{ invoice.date | date}}</td> <div class="grid">
<td>{{ invoice.price | currency}}</td> <div class="flex col-12 md:col-6">
<td></td> <p-dropdown
<td></td> id="states"
</tr> [options]="selectOptions?.states"
</ng-template> [(ngModel)]="licensedIn.name"
</p-table> optionLabel="name"
optionValue="value"
[showClear]="true"
placeholder="State"
[ngStyle]="{ width: '100%' }"
></p-dropdown>
</div>
<div class="flex col-12 md:col-6">
<input id="companyWebsite" type="text" pInputText [(ngModel)]="licensedIn.value" placeholder="Licence Number" />
</div>
</div>
}
</div>
<div class="field mb-5 col-12 md:col-6 flex align-items-center">
<p-button class="mr-1" icon="pi pi-plus" severity="success" (click)="addLicence()"></p-button>
<p-button icon="pi pi-minus" severity="danger" (click)="removeLicence()" [disabled]="user.licensedIn?.length < 2"></p-button>
<span class="text-xs">&nbsp;(Add more licenses or remove existing ones.)</span>
<!-- <button pButton pRipple label="Add Licence" class="w-auto" (click)="addLicence()"></button> -->
</div>
}
<div>
<button pButton pRipple label="Update Profile" class="w-auto" (click)="updateProfile(user)"></button>
</div>
</div> </div>
</td> <div>
</tr> <div class="flex flex-column align-items-center flex-or mb-8">
<span class="font-medium text-900 mb-2">Company Logo</span>
<span class="font-medium text-xs mb-2">(is shown in every offer)</span>
@if(user?.hasCompanyLogo){
<img src="{{ companyLogoUrl }}" class="rounded-profile" />
} @else {
<img src="assets/images/placeholder.png" class="rounded-profile" />
}
<p-fileUpload
#companyUpload
mode="basic"
chooseLabel="Upload"
name="file"
[customUpload]="true"
accept="image/*"
[maxFileSize]="maxFileSize"
(onSelect)="select($event, 'company')"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
></p-fileUpload>
</div>
<p-divider></p-divider>
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Your Profile Picture</span>
@if(user.hasProfile){
<img src="{{ profileUrl }}" class="rounded-profile" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="rounded-profile" />
}
<p-fileUpload
#profileUpload
mode="basic"
chooseLabel="Upload"
name="file"
[customUpload]="true"
accept="image/*"
[maxFileSize]="maxFileSize"
(onSelect)="select($event, 'profile')"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
></p-fileUpload>
</div>
</div>
</div>
<div class="text-900 font-semibold text-lg mt-3">Membership Level</div>
<p-divider></p-divider>
<p-table [value]="userSubscriptions" [tableStyle]="{ 'min-width': '50rem' }" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th style="width: 5rem"></th>
<th>ID</th>
<th>Level</th>
<th>Start Date</th>
<th>Date Modified</th>
<th>End Date</th>
<th>Status</th>
</tr>
</ng-template> </ng-template>
</p-table> <ng-template pTemplate="body" let-subscription let-expanded="expanded">
<tr>
<td>
<button type="button" pButton pRipple [pRowToggler]="subscription" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td>{{ subscription.id }}</td>
<td>{{ subscription.level }}</td>
<td>{{ subscription.start | date }}</td>
<td>{{ subscription.modified | date }}</td>
<td>{{ subscription.end | date }}</td>
<td>{{ subscription.status }}</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-subscription>
<tr>
<td colspan="7">
<div class="p-3">
<p-table [value]="subscription.invoices" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th style="width: 5rem"></th>
<th>ID</th>
<th>Date</th>
<th>Price</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-invoice>
<tr>
<td>
<button pButton pRipple icon="pi pi-print" class="p-button-rounded p-button-success mr-2" (click)="printInvoice(invoice)"></button>
</td>
<td>{{ invoice.id }}</td>
<td>{{ invoice.date | date }}</td>
<td>{{ invoice.price | currency }}</td>
<td></td>
<td></td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,49 +1,33 @@
import { HttpEventType } from '@angular/common/http';
import { ChangeDetectorRef, Component, ViewChild } from '@angular/core'; import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
import { StyleClassModule } from 'primeng/styleclass';
import { SelectOptionsService } from '../../../services/select-options.service';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { TagModule } from 'primeng/tag';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea'; import { AngularCropperjsModule } from 'angular-cropperjs';
import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
import { HttpClient, HttpEventType } from '@angular/common/http';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { SubscriptionsService } from '../../../services/subscriptions.service';
import { lastValueFrom } from 'rxjs';
import { MessageService } from 'primeng/api'; import { MessageService } from 'primeng/api';
import { environment } from '../../../../environments/environment';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { GeoService } from '../../../services/geo.service';
import { ChangeDetectionStrategy } from '@angular/compiler';
import { EditorModule } from 'primeng/editor';
import { LoadingService } from '../../../services/loading.service';
import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
import { ImageService } from '../../../services/image.service';
import { DialogModule } from 'primeng/dialog'; import { DialogModule } from 'primeng/dialog';
import { SelectButtonModule } from 'primeng/selectbutton';
import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog'; import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
import { ImageCropperComponent, stateOptions } from '../../../components/image-cropper/image-cropper.component'; import { EditorModule } from 'primeng/editor';
import Quill from 'quill' import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { TOOLBAR_OPTIONS } from '../../utils/defaults'; import { SelectButtonModule } from 'primeng/selectbutton';
import { lastValueFrom } from 'rxjs';
import { User } from '../../../../../../bizmatch-server/src/models/db.model'; import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, Invoice, KeyValue, Subscription } from '../../../../../../bizmatch-server/src/models/main.model'; import { AutoCompleteCompleteEvent, Invoice, KeyValue, Subscription } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ImageCropperComponent, stateOptions } from '../../../components/image-cropper/image-cropper.component';
import { GeoService } from '../../../services/geo.service';
import { ImageService } from '../../../services/image.service';
import { LoadingService } from '../../../services/loading.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { SubscriptionsService } from '../../../services/subscriptions.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({ @Component({
selector: 'app-account', selector: 'app-account',
standalone: true, standalone: true,
imports: [SharedModule, FileUploadModule, EditorModule, AngularCropperjsModule, DialogModule, SelectButtonModule, DynamicDialogModule], imports: [SharedModule, FileUploadModule, EditorModule, AngularCropperjsModule, DialogModule, SelectButtonModule, DynamicDialogModule],
providers: [MessageService, DialogService], providers: [MessageService, DialogService],
templateUrl: './account.component.html', templateUrl: './account.component.html',
styleUrl: './account.component.scss' styleUrl: './account.component.scss',
}) })
export class AccountComponent { export class AccountComponent {
@ViewChild('companyUpload') public companyUpload: FileUpload; @ViewChild('companyUpload') public companyUpload: FileUpload;
@ -55,12 +39,13 @@ export class AccountComponent {
maxFileSize = 1000000; maxFileSize = 1000000;
companyLogoUrl: string; companyLogoUrl: string;
profileUrl: string; profileUrl: string;
type: 'company' | 'profile' type: 'company' | 'profile';
dialogRef: DynamicDialogRef | undefined; dialogRef: DynamicDialogRef | undefined;
environment = environment environment = environment;
editorModules = TOOLBAR_OPTIONS editorModules = TOOLBAR_OPTIONS;
userLicensedIn :KeyValue[] userLicensedIn: KeyValue[];
constructor(public userService: UserService, constructor(
public userService: UserService,
private subscriptionService: SubscriptionsService, private subscriptionService: SubscriptionsService,
private messageService: MessageService, private messageService: MessageService,
private geoService: GeoService, private geoService: GeoService,
@ -69,42 +54,43 @@ export class AccountComponent {
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private loadingService: LoadingService, private loadingService: LoadingService,
private imageUploadService: ImageService, private imageUploadService: ImageService,
public dialogService: DialogService) {} public dialogService: DialogService,
) {}
async ngOnInit() { async ngOnInit() {
this.user = await this.userService.getById(this.id); const email = this.userService.getUser().email;
this.userLicensedIn = this.user.licensedIn.map(l=>{return {name:l.split('|')[0],value:l.split('|')[1]}}) this.user = await this.userService.getByMail(email);
this.userLicensedIn = this.user.licensedIn.map(l => {
return { name: l.split('|')[0], value: l.split('|')[1] };
});
this.userSubscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions()); this.userSubscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions());
if (!this.user.licensedIn || this.user.licensedIn?.length === 0) { if (!this.user.licensedIn || this.user.licensedIn?.length === 0) {
this.user.licensedIn = [''] this.user.licensedIn = [''];
} }
this.user = await this.userService.getById(this.user.id); this.profileUrl = this.user.hasProfile ? `${environment.apiBaseUrl}/profile/${this.user.id}.avif` : `/assets/images/placeholder.png`;
this.profileUrl = this.user.hasProfile ? `${environment.apiBaseUrl}/profile/${this.user.id}.avif` : `/assets/images/placeholder.png` this.companyLogoUrl = this.user.hasCompanyLogo ? `${environment.apiBaseUrl}/logo/${this.user.id}.avif` : `/assets/images/placeholder.png`;
this.companyLogoUrl = this.user.hasCompanyLogo ? `${environment.apiBaseUrl}/logo/${this.user.id}.avif` : `/assets/images/placeholder.png`
} }
printInvoice(invoice: Invoice) { } printInvoice(invoice: Invoice) {}
async updateProfile(user: User) { async updateProfile(user: User) {
await this.userService.save(this.user); await this.userService.save(this.user);
} }
onUploadCompanyLogo(event: any) { onUploadCompanyLogo(event: any) {
const uniqueSuffix = '?_ts=' + new Date().getTime(); const uniqueSuffix = '?_ts=' + new Date().getTime();
this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`; this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}${uniqueSuffix}`; //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
} }
onUploadProfilePicture(event: any) { onUploadProfilePicture(event: any) {
const uniqueSuffix = '?_ts=' + new Date().getTime(); const uniqueSuffix = '?_ts=' + new Date().getTime();
this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`; this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}${uniqueSuffix}`; //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
} }
setImageToFallback(event: Event) { setImageToFallback(event: Event) {
(event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild (event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
} }
suggestions: string[] | undefined; suggestions: string[] | undefined;
async search(event: AutoCompleteCompleteEvent) { async search(event: AutoCompleteCompleteEvent) {
const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query)) const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query));
this.suggestions = result.map(r => `${r.city} - ${r.state_code}`).slice(0, 5); this.suggestions = result.map(r => `${r.city} - ${r.state_code}`).slice(0, 5);
} }
addLicence() { addLicence() {
@ -116,14 +102,14 @@ export class AccountComponent {
select(event: any, type: 'company' | 'profile') { select(event: any, type: 'company' | 'profile') {
const imageUrl = URL.createObjectURL(event.files[0]); const imageUrl = URL.createObjectURL(event.files[0]);
this.type = type this.type = type;
const config = { aspectRatio: type === 'company' ? stateOptions[0].value : stateOptions[2].value } const config = { aspectRatio: type === 'company' ? stateOptions[0].value : stateOptions[2].value };
this.dialogRef = this.dialogService.open(ImageCropperComponent, { this.dialogRef = this.dialogService.open(ImageCropperComponent, {
data: { data: {
imageUrl: imageUrl, imageUrl: imageUrl,
fileUpload: type === 'company' ? this.companyUpload : this.profileUpload, fileUpload: type === 'company' ? this.companyUpload : this.profileUpload,
config: config, config: config,
ratioVariable: type === 'company' ? true : false ratioVariable: type === 'company' ? true : false,
}, },
header: 'Edit Image', header: 'Edit Image',
width: '50vw', width: '50vw',
@ -133,27 +119,30 @@ export class AccountComponent {
closable: false, closable: false,
breakpoints: { breakpoints: {
'960px': '75vw', '960px': '75vw',
'640px': '90vw' '640px': '90vw',
}, },
}); });
this.dialogRef.onClose.subscribe(cropper => { this.dialogRef.onClose.subscribe(cropper => {
if (cropper){ if (cropper) {
this.loadingService.startLoading('uploadImage'); this.loadingService.startLoading('uploadImage');
cropper.getCroppedCanvas().toBlob(async (blob) => { cropper.getCroppedCanvas().toBlob(async blob => {
this.imageUploadService.uploadImage(blob, type==='company'?'uploadCompanyLogo':'uploadProfile',this.user.id).subscribe(async(event) => { this.imageUploadService.uploadImage(blob, type === 'company' ? 'uploadCompanyLogo' : 'uploadProfile', this.user.id).subscribe(
if (event.type === HttpEventType.Response) { async event => {
this.loadingService.stopLoading('uploadImage'); if (event.type === HttpEventType.Response) {
if (this.type==='company'){ this.loadingService.stopLoading('uploadImage');
this.user.hasCompanyLogo=true;// if (this.type === 'company') {
this.companyLogoUrl=`${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}` this.user.hasCompanyLogo = true; //
} else { this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`;
this.user.hasProfile=true; } else {
this.profileUrl=`${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}` this.user.hasProfile = true;
this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`;
}
} }
} },
}, error => console.error('Fehler beim Upload:', error)); error => console.error('Fehler beim Upload:', error),
}) );
});
} }
}) });
} }
} }

84
bizmatch/src/app/services/user.service.ts
View File

@ -1,16 +1,15 @@
import { Injectable, Signal, WritableSignal, computed, effect, signal } from '@angular/core'; import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core'; import { Injectable, Signal, computed, effect, signal } from '@angular/core';
import { jwtDecode } from 'jwt-decode'; import { jwtDecode } from 'jwt-decode';
import { Observable, distinctUntilChanged, filter, from, lastValueFrom, map } from 'rxjs'; import { Observable, distinctUntilChanged, filter, from, lastValueFrom, map } from 'rxjs';
import { CommonModule } from '@angular/common'; import urlcat from 'urlcat';
import { KeycloakService } from './keycloak.service';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { User } from '../../../../bizmatch-server/src/models/db.model'; import { User } from '../../../../bizmatch-server/src/models/db.model';
import { JwtToken, ListingCriteria } from '../../../../bizmatch-server/src/models/main.model'; import { JwtToken, ListingCriteria } from '../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../environments/environment';
import { KeycloakService } from './keycloak.service';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class UserService { export class UserService {
private apiBaseUrl = environment.apiBaseUrl; private apiBaseUrl = environment.apiBaseUrl;
@ -18,9 +17,9 @@ export class UserService {
// Keycloak services // Keycloak services
// ----------------------------- // -----------------------------
private user$ = new Observable<User>(); private user$ = new Observable<User>();
private user:User private user: User;
public $isLoggedIn : Signal<boolean>; public $isLoggedIn: Signal<boolean>;
constructor(public keycloak:KeycloakService,private http: HttpClient){ constructor(public keycloak: KeycloakService, private http: HttpClient) {
this.user$ = from(this.keycloak.getToken()).pipe( this.user$ = from(this.keycloak.getToken()).pipe(
filter(t => !!t), filter(t => !!t),
distinctUntilChanged(), distinctUntilChanged(),
@ -30,18 +29,18 @@ export class UserService {
// this.analyticsService.identify(u); // this.analyticsService.identify(u);
// }), // }),
); );
this.$isLoggedIn = signal(false) this.$isLoggedIn = signal(false);
this.$isLoggedIn = computed(() => { this.$isLoggedIn = computed(() => {
return keycloak.isLoggedIn() return keycloak.isLoggedIn();
}) });
effect(async () => { effect(async () => {
if (this.$isLoggedIn()){ if (this.$isLoggedIn()) {
this.updateTokenDetails() this.updateTokenDetails();
} else { } else {
this.user=null; this.user = null;
} }
}) });
} }
private async refreshToken(): Promise<void> { private async refreshToken(): Promise<void> {
@ -57,54 +56,57 @@ export class UserService {
this.user = this.map2User(token); this.user = this.map2User(token);
} }
private map2User(jwt: string): User {
private map2User(jwt:string):User{
const token = jwtDecode<JwtToken>(jwt); const token = jwtDecode<JwtToken>(jwt);
return { return {
id:token.user_id, id: token.user_id,
firstname:token.given_name, firstname: token.given_name,
lastname:token.family_name, lastname: token.family_name,
email:token.email email: token.email,
} };
} }
isLoggedIn():boolean{ isLoggedIn(): boolean {
return this.$isLoggedIn(); return this.$isLoggedIn();
} }
getUser():User{ getUser(): User {
return this.user; return this.user;
} }
getUserObservable():Observable<User>{ getUserObservable(): Observable<User> {
return this.user$; return this.user$;
} }
logout(){ logout() {
this.keycloak.logout(window.location.origin + '/home'); this.keycloak.logout(window.location.origin + '/home');
} }
async login(url:string){ async login(url: string) {
await this.keycloak.login({ await this.keycloak.login({
redirectUri: url redirectUri: url,
}); });
} }
getUserRoles(){ getUserRoles() {
return this.keycloak.getUserRoles(true); return this.keycloak.getUserRoles(true);
} }
hasAdminRole(){ hasAdminRole() {
return this.keycloak.getUserRoles(true).includes('ADMIN'); return this.keycloak.getUserRoles(true).includes('ADMIN');
} }
register(url:string){ register(url: string) {
this.keycloak.register({redirectUri:url}); this.keycloak.register({ redirectUri: url });
} }
// ----------------------------- // -----------------------------
// Redis services // DB services
// ----------------------------- // -----------------------------
async save(user:User):Promise<User>{ async save(user: User): Promise<User> {
return await lastValueFrom(this.http.post<User>(`${this.apiBaseUrl}/bizmatch/user`,user)); return await lastValueFrom(this.http.post<User>(`${this.apiBaseUrl}/bizmatch/user`, user));
} }
async getById(id:string):Promise<User>{ async getById(id: string): Promise<User> {
return await lastValueFrom(this.http.get<User>(`${this.apiBaseUrl}/bizmatch/user/${id}`)); return await lastValueFrom(this.http.get<User>(`${this.apiBaseUrl}/bizmatch/user/${id}`));
} }
async search(criteria?:ListingCriteria){ async getByMail(mail: string): Promise<User> {
return await lastValueFrom(this.http.post<User[]>(`${this.apiBaseUrl}/bizmatch/user/search`,criteria)); const url = urlcat(`${this.apiBaseUrl}/bizmatch/user`, { mail });
return await lastValueFrom(this.http.get<User>(url));
}
async search(criteria?: ListingCriteria) {
return await lastValueFrom(this.http.post<User[]>(`${this.apiBaseUrl}/bizmatch/user/search`, criteria));
} }
} }

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

@ -37,6 +37,12 @@ export function createGenericObject<T>(): T {
return storedState ? JSON.parse(storedState) : initialState; return storedState ? JSON.parse(storedState) : initialState;
} }
export function getListingType(listing:BusinessListing|CommercialPropertyListing){ export function getListingType(listing:BusinessListing|CommercialPropertyListing):'business'|'commercialProperty'{
return listing.type<100?'business':'commercialProperty'; return listing?.type<100?'business':'commercialProperty';
}
export function isBusinessListing(listing: BusinessListing | CommercialPropertyListing): listing is BusinessListing {
return listing?.type < 100;
}
export function isCommercialPropertyListing(listing: BusinessListing | CommercialPropertyListing): listing is CommercialPropertyListing {
return listing?.type >= 100;
} }