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

Umbau auf postgres 2. step

Browse Source
This commit is contained in:
Andreas Knuth
2024-04-22 22:26:44 +02:00
parent c90d6b72b7
commit 7f0f21b598
77 changed files with 3325 additions and 3066 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
bizmatch/src/app/app.component.ts
View File

@@ -13,7 +13,7 @@ import { KeycloakEventType } from './models/keycloak-event';
import { createGenericObject } from './utils/utils';
import onChange from 'on-change';
import { UserService } from './services/user.service';
import {ListingCriteria, User} from '../../../common-models/src/main.model'
import {ListingCriteria} from '../../../bizmatch-server/src/models/main.model'
@Component({
selector: 'app-root',
standalone: true,
@@ -24,7 +24,6 @@ import {ListingCriteria, User} from '../../../common-models/src/main.model'
export class AppComponent {
title = 'bizmatch';
actualRoute ='';
user:User;
listingCriteria:ListingCriteria = onChange(createGenericObject<ListingCriteria>(),(path, value, previousValue, applyData)=>{
sessionStorage.setItem('criteria',JSON.stringify(value));
});
@@ -41,7 +40,6 @@ export class AppComponent {
});
}
ngOnInit(){
this.user = this.userService.getUser();
}

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

@@ -11,18 +11,32 @@ import { authGuard } from './guards/auth.guard';
import { PricingComponent } from './pages/pricing/pricing.component';
import { LogoutComponent } from './components/logout/logout.component';
import { DetailsUserComponent } from './pages/details/details-user/details-user.component';
import { BusinessListingsComponent } from './pages/listings/business-listings/business-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 { 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';
export const routes: Routes = [
{
path: 'listings/:type',
component: ListingsComponent,
},
// {
// path: 'listings/:type',
// component: ListingsComponent,
// },
// Umleitung von /listing zu /listing/business
{
path: 'listings',
pathMatch: 'full',
redirectTo: 'listings/business',
path: 'businessListings',
component: BusinessListingsComponent,
runGuardsAndResolvers:'always'
},
{
path: 'commercialPropertyListings',
component: CommercialPropertyListingsComponent,
runGuardsAndResolvers:'always'
},
{
path: 'brokerListings',
component: BrokerListingsComponent,
runGuardsAndResolvers:'always'
},
{
@@ -47,15 +61,25 @@ export const routes: Routes = [
canActivate: [authGuard],
},
{
path: 'editListing/:id',
component: EditListingComponent,
path: 'editBusinessListing/:id',
component: EditBusinessListingComponent,
canActivate: [authGuard],
},
{
path: 'createListing',
component: EditListingComponent,
path: 'createBusinessListing',
component: EditBusinessListingComponent,
canActivate: [authGuard],
},
{
path: 'editCommercialPropertyListing/:id',
component: EditCommercialPropertyListingComponent,
canActivate: [authGuard],
},
{
path: 'createCommercialPropertyListing',
component: EditCommercialPropertyListingComponent,
canActivate: [authGuard],
},
{
path: 'myListings',
component: MyListingComponent,

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

@@ -10,8 +10,7 @@ import { TabMenuModule } from 'primeng/tabmenu';
import { Observable } from 'rxjs';
import { faUserGear } from '@fortawesome/free-solid-svg-icons';
import { Router } from '@angular/router';
import { User } from '../../../../../common-models/src/main.model';
import {User} from '../../../../../bizmatch-server/src/models/db.model'
@Component({
selector: 'header',
standalone: true,

3
bizmatch/src/app/components/image-cropper/image-cropper.component.ts
View File

@@ -6,9 +6,10 @@ import { HttpEventType } from '@angular/common/http';
import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { environment } from '../../../environments/environment';
import { KeyValueRatio, User } from '../../../../../common-models/src/main.model';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
import { SharedModule } from '../../shared/shared/shared.module';
import { SelectButtonModule } from 'primeng/selectbutton';
import { KeyValueRatio } from '../../../../../bizmatch-server/src/models/main.model';
export const stateOptions:KeyValueRatio[]=[
{label:'16/9',value:16/9},
{label:'1/1',value:1},

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

@@ -18,13 +18,14 @@ 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 { ImageProperty, ListingCriteria, ListingType, MailInfo, User } from '../../../../../../common-models/src/main.model';
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 { ImageProperty, ListingCriteria, ListingType, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
@Component({
selector: 'app-details-listing',
standalone: true,

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

@@ -90,7 +90,7 @@
">
<div class="text-500 w-full md:w-2 font-medium">Licensed In</div>
<div class="text-900 w-full md:w-10">
@for (license of user.licensedIn; track license) {
@for (license of userLicensedIn; track license) {
<div>{{license.name}} : {{license.value}}</div>
}
</div>

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
import { SharedModule } from '../../../shared/shared/shared.module';
import { GalleriaModule } from 'primeng/galleria';
import { MessageService } from 'primeng/api';
import { BusinessListing, ListingCriteria, ListingType, User } from '../../../../../../common-models/src/main.model';
import { environment } from '../../../../environments/environment';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from '../../../services/user.service';
@@ -11,6 +11,8 @@ import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ImageService } from '../../../services/image.service';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { KeyValue, ListingCriteria } from '../../../../../../bizmatch-server/src/models/main.model';
@Component({
selector: 'app-details-user',
@@ -29,6 +31,7 @@ export class DetailsUserComponent {
userListings:BusinessListing[]
companyOverview:SafeHtml;
offeredServices:SafeHtml;
userLicensedIn :KeyValue[]
constructor(private activatedRoute: ActivatedRoute,
private router: Router,
private userService: UserService,
@@ -41,7 +44,7 @@ export class DetailsUserComponent {
async ngOnInit() {
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.userListings = await this.listingsService.getListingByUserId(this.id);
this.user$ = this.userService.getUserObservable();
this.companyOverview=this.sanitizer.bypassSecurityTrustHtml(this.user.companyOverview);

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

@@ -12,8 +12,9 @@ import { SelectOptionsService } from '../../services/select-options.service';
import { UserService } from '../../services/user.service';
import onChange from 'on-change';
import { getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils';
import { ListingCriteria, User } from '../../../../../common-models/src/main.model';
import { Observable } from 'rxjs';
import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
@Component({
selector: 'app-home',
standalone: true,

59
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html Normal file
View File

@@ -0,0 +1,59 @@
<div id="sky-line" class="hidden-lg-down">
</div>
<div class="search">
<div class="wrapper">
<div class="grid p-4 align-items-center">
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}"
class="col-1">
<p-button label="Refine" (click)="search()"></p-button>
</div>
</div>
</div>
</div>
<div class="surface-200 h-full">
<div class="wrapper">
<div class="grid">
@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="surface-card shadow-2 p-2 flex flex-column flex-grow-1 justify-content-between"
style="border-radius: 10px">
<div
class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full">
<span>
@if(user.hasProfile){
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif?_ts={{ts}}" class="w-5rem" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="w-5rem" />
}
</span>
<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 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 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>

23
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.scss Normal file
View File

@@ -0,0 +1,23 @@
#sky-line {
background-image: url(../../../../assets/images/bw-sky.jpg);
height: 204px;
background-position: bottom;
background-size: cover;
margin-bottom: -1px;
}
.search{
background-color: #343F69;
}
::ng-deep p-paginator div {
background-color: var(--surface-200) !important;
// background-color: var(--surface-400) !important;
}
.rounded-image {
border-radius: 6px;
// width: 100px;
max-width: 100px;
height: 45px;
border: 1px solid rgba(0,0,0,0.2);
padding: 1px 1px;
object-fit: contain;
}

115
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts Normal file
View File

@@ -0,0 +1,115 @@
import { ChangeDetectorRef, 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 { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
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 onChange from 'on-change';
import { InitEditableRow } from 'primeng/table';
import { SelectOptionsService } from '../../../services/select-options.service';
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 { environment } from '../../../../environments/environment';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
@Component({
selector: 'app-broker-listings',
standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
templateUrl: './broker-listings.component.html',
styleUrl: './broker-listings.component.scss'
})
export class BrokerListingsComponent {
environment=environment;
listings: Array<BusinessListing>;
users: Array<User>
filteredListings: Array<ListingType>;
criteria:ListingCriteria;
realEstateChecked: boolean;
// category: string;
maxPrice: string;
minPrice: string;
type:string;
states = [];
statesSet = new Set();
state:string;
first: number = 0;
rows: number = 12;
totalRecords:number = 0;
ts = new Date().getTime()
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
constructor(public selectOptions: SelectOptionsService,
private listingsService:ListingsService,
private userService:UserService,
private activatedRoute: ActivatedRoute,
private router:Router,
private cdRef:ChangeDetectorRef,
private imageService:ImageService) {
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
this.router.getCurrentNavigation()
this.activatedRoute.snapshot
this.activatedRoute.params.subscribe(params => {
if (this.activatedRoute.snapshot.fragment===''){
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
this.first=0;
}
this.init()
})
}
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();
}
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,'professionals_brokers');
this.setStates();
this.totalRecords=this.listings.length
this.filteredListings =[...this.listings].splice(this.first,this.rows);
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
onPageChange(event: any) {
this.criteria.start=event.first;
this.criteria.length=event.rows;
this.criteria.page=event.page;
this.criteria.pageCount=event.pageCount;
}
imageErrorHandler(listing: ListingType) {
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
}
}

87
bizmatch/src/app/pages/listings/business-listings/business-listings.component.html Normal file
View File

@@ -0,0 +1,87 @@
<div id="sky-line" class="hidden-lg-down">
</div>
<div class="search">
<div class="wrapper">
<div class="grid p-4 align-items-center">
@if (category==='business'){
<div class="col-2">
<p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Categorie of Business"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="col-2">
<p-dropdown [options]="states" [(ngModel)]="state" optionLabel="criteria.location" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '100%'}"></p-dropdown>
</div>
<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>
</div>
<div class="col-2">
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Max Price"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<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)]="criteria.realEstateChecked" onLabel="Real Estate not included"
offLabel="Real Estate included"></p-toggleButton>
</div>
}
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}"
class="col-1">
<p-button label="Refine" (click)="search()"></p-button>
</div>
</div>
</div>
</div>
<div class="surface-200 h-full">
<div class="wrapper">
<div class="grid">
@for (listing of listings; track listing.id) {
<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="p-4 h-full flex flex-column">
<div class="flex align-items-center">
<span [class]="selectOptions.getBgColorType(listing.type)"
class="inline-flex border-circle align-items-center justify-content-center mr-3"
style="width:38px;height:38px">
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
</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="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>

23
bizmatch/src/app/pages/listings/business-listings/business-listings.component.scss Normal file
View File

@@ -0,0 +1,23 @@
#sky-line {
background-image: url(../../../../assets/images/bw-sky.jpg);
height: 204px;
background-position: bottom;
background-size: cover;
margin-bottom: -1px;
}
.search{
background-color: #343F69;
}
::ng-deep p-paginator div {
background-color: var(--surface-200) !important;
// background-color: var(--surface-400) !important;
}
.rounded-image {
border-radius: 6px;
// width: 100px;
max-width: 100px;
height: 45px;
border: 1px solid rgba(0,0,0,0.2);
padding: 1px 1px;
object-fit: contain;
}

114
bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts Normal file
View File

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

73
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html Normal file
View File

@@ -0,0 +1,73 @@
<div id="sky-line" class="hidden-lg-down">
</div>
<div class="search">
<div class="wrapper">
<div class="grid p-4 align-items-center">
<div class="col-2">
<p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value"
[showClear]="true" placeholder="Location" [style]="{ width: '100%'}"></p-dropdown>
</div>
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}"
class="col-1">
<p-button label="Refine" (click)="search()"></p-button>
</div>
</div>
</div>
</div>
<div class="surface-200 h-full">
<div class="wrapper">
<div class="grid">
@for (listing of filteredListings; track listing.id) {
<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">
<article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
<div class="relative">
@if (listing.imageOrder.length>0){
<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">
} @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"> -->
<img src="assets/images/placeholder_properties.jpg" 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%;">
{{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="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>

23
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.scss Normal file
View File

@@ -0,0 +1,23 @@
#sky-line {
background-image: url(../../../../assets/images/bw-sky.jpg);
height: 204px;
background-position: bottom;
background-size: cover;
margin-bottom: -1px;
}
.search{
background-color: #343F69;
}
::ng-deep p-paginator div {
background-color: var(--surface-200) !important;
// background-color: var(--surface-400) !important;
}
.rounded-image {
border-radius: 6px;
// width: 100px;
max-width: 100px;
height: 45px;
border: 1px solid rgba(0,0,0,0.2);
padding: 1px 1px;
object-fit: contain;
}

113
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts Normal file
View File

@@ -0,0 +1,113 @@
import { ChangeDetectorRef, 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 { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
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 onChange from 'on-change';
import { InitEditableRow } from 'primeng/table';
import { SelectOptionsService } from '../../../services/select-options.service';
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 { environment } from '../../../../environments/environment';
import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
@Component({
selector: 'app-commercial-property-listings',
standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
templateUrl: './commercial-property-listings.component.html',
styleUrl: './commercial-property-listings.component.scss'
})
export class CommercialPropertyListingsComponent {
environment=environment;
listings: Array<CommercialPropertyListing>;
users: Array<User>
filteredListings: Array<CommercialPropertyListing>;
criteria:ListingCriteria;
realEstateChecked: boolean;
maxPrice: string;
minPrice: string;
type:string;
states = [];
statesSet = new Set();
state:string;
first: number = 0;
rows: number = 12;
totalRecords:number = 0;
ts = new Date().getTime()
constructor(public selectOptions: SelectOptionsService,
private listingsService:ListingsService,
private userService:UserService,
private activatedRoute: ActivatedRoute,
private router:Router,
private cdRef:ChangeDetectorRef,
private imageService:ImageService) {
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
this.router.getCurrentNavigation()
this.activatedRoute.snapshot
this.activatedRoute.params.subscribe(params => {
if (this.activatedRoute.snapshot.fragment===''){
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
this.first=0;
}
this.init()
})
}
async ngOnInit(){
}
async init(){
this.users=[]
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.totalRecords=this.listings.length
this.filteredListings =[...this.listings].splice(this.first,this.rows);
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
onPageChange(event: any) {
//this.first = event.first;
//this.rows = event.rows;
//this.filteredListings=[...this.listings].splice(this.first,this.rows);
this.criteria.start=event.first;
this.criteria.length=event.rows;
this.criteria.page=event.page;
this.criteria.pageCount=event.pageCount;
}
imageErrorHandler(listing: ListingType) {
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
}
}

162
bizmatch/src/app/pages/listings/listings.component.html
View File

@@ -1,162 +0,0 @@
<div id="sky-line" class="hidden-lg-down">
</div>
<div class="search">
<div class="wrapper">
<div class="grid p-4 align-items-center">
@if (category==='business'){
<div class="col-2">
<p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Categorie of Business"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="col-2">
<p-dropdown [options]="states" [(ngModel)]="state" optionLabel="criteria.location" optionLabel="name" optionValue="value"
[showClear]="true" placeholder="State" [style]="{ width: '100%'}"></p-dropdown>
</div>
<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>
</div>
<div class="col-2">
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Max Price"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<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)]="criteria.realEstateChecked" onLabel="Real Estate not included"
offLabel="Real Estate included"></p-toggleButton>
</div>
}
@if (category==='commercialProperty'){
<div class="col-2">
<p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value"
[showClear]="true" placeholder="Location" [style]="{ width: '100%'}"></p-dropdown>
</div>
}
<!-- @if (listingCategory==='professionals_brokers'){ -->
<!-- <div class="col-2">
<p-dropdown [options]="selectOptions.categories" [(ngModel)]="criteria.category" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Category"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="col-2">
<p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value"
[showClear]="true" placeholder="Location" [style]="{ width: '100%'}"></p-dropdown>
</div> -->
<!-- } -->
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}" class="col-1">
<p-button label="Refine" (click)="search()"></p-button>
</div>
</div>
</div>
</div>
<div class="surface-200 h-full">
<div class="wrapper">
<div class="grid">
@for (listing of listings; track listing.id) {
<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="p-4 h-full flex flex-column">
<div class="flex align-items-center">
<span [class]="selectOptions.getBgColorType(listing.type)"
class="inline-flex border-circle align-items-center justify-content-center mr-3"
style="width:38px;height:38px">
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
</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 *ngIf="!listing.hideImage" 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>
}
@for (listing of filteredListings; track listing.id) {
<div *ngIf="listing.listingsCategory==='commercialProperty'" 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">
<article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
<div class="relative">
@if (listing.imageOrder.length>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">
} @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"> -->
<img src="assets/images/placeholder_properties.jpg" 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%;">{{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>
}
@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="surface-card shadow-2 p-2 flex flex-column flex-grow-1 justify-content-between" style="border-radius: 10px">
<div class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full" >
<span>
@if(user.hasProfile){
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif?_ts={{ts}}" class="w-5rem" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="w-5rem" />
}
</span>
<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 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 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>

184
bizmatch/src/app/pages/listings/listings.component.ts
View File

@@ -16,9 +16,11 @@ import onChange from 'on-change';
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils';
import { InitEditableRow } from 'primeng/table';
import { environment } from '../../../environments/environment';
import { ListingCriteria, ListingType, User } from '../../../../../common-models/src/main.model';
import { UserService } from '../../services/user.service';
import { ImageService } from '../../services/image.service';
import { ListingCriteria, ListingType } from '../../../../../bizmatch-server/src/models/main.model';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
@Component({
selector: 'app-listings',
standalone: true,
@@ -27,102 +29,96 @@ import { ImageService } from '../../services/image.service';
styleUrls: ['./listings.component.scss', '../pages.scss']
})
export class ListingsComponent {
environment=environment;
listings: Array<ListingType>;
users: Array<User>
filteredListings: Array<ListingType>;
criteria:ListingCriteria;
realEstateChecked: boolean;
// category: string;
maxPrice: string;
minPrice: string;
type:string;
states = [];
statesSet = new Set();
state:string;
first: number = 0;
rows: number = 12;
totalRecords:number = 0;
ts = new Date().getTime()
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
// environment=environment;
// listings: Array<ListingType>;
// users: Array<User>
// filteredListings: Array<ListingType>;
// criteria:ListingCriteria;
// realEstateChecked: boolean;
// maxPrice: string;
// minPrice: string;
// type:string;
// states = [];
// statesSet = new Set();
// state:string;
// first: number = 0;
// rows: number = 12;
// totalRecords:number = 0;
// ts = new Date().getTime()
// public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
constructor(public selectOptions: SelectOptionsService,
private listingsService:ListingsService,
private userService:UserService,
private activatedRoute: ActivatedRoute,
private router:Router,
private cdRef:ChangeDetectorRef,
private imageService:ImageService) {
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
this.router.getCurrentNavigation()
this.activatedRoute.snapshot
this.activatedRoute.params.subscribe(params => {
if (this.activatedRoute.snapshot.fragment===''){
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
this.first=0;
}
this.category = (<any>params).type;
this.criteria.listingsCategory=this.category;
this.init()
})
// constructor(public selectOptions: SelectOptionsService,
// private listingsService:ListingsService,
// private userService:UserService,
// private activatedRoute: ActivatedRoute,
// private router:Router,
// private cdRef:ChangeDetectorRef,
// private imageService:ImageService) {
// this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
// this.router.getCurrentNavigation()
// this.activatedRoute.snapshot
// this.activatedRoute.params.subscribe(params => {
// if (this.activatedRoute.snapshot.fragment===''){
// this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
// this.first=0;
// }
// this.category = (<any>params).type;
// this.criteria.listingsCategory=this.category;
// this.init()
// })
}
async ngOnInit(){
}
async init(){
if (this.category==='business' || this.category==='commercialProperty'){
this.users=[]
this.listings=await this.listingsService.getListings(this.criteria);
// }
// async ngOnInit(){
// }
// async init(){
// if (this.category==='business' || this.category==='commercialProperty'){
// this.users=[]
// this.listings=await this.listingsService.getListings(this.criteria);
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();
} else {
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();
}
// this.setStates();
// this.totalRecords=this.listings.length
// this.cdRef.markForCheck();
// this.cdRef.detectChanges();
// } else {
// 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();
// }
}
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);
this.setStates();
this.totalRecords=this.listings.length
this.filteredListings =[...this.listings].splice(this.first,this.rows);
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
onPageChange(event: any) {
//this.first = event.first;
//this.rows = event.rows;
//this.filteredListings=[...this.listings].splice(this.first,this.rows);
this.criteria.start=event.first;
this.criteria.length=event.rows;
this.criteria.page=event.page;
this.criteria.pageCount=event.pageCount;
}
imageErrorHandler(listing: ListingType) {
listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
}
// }
// 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);
// this.setStates();
// this.totalRecords=this.listings.length
// this.filteredListings =[...this.listings].splice(this.first,this.rows);
// this.cdRef.markForCheck();
// this.cdRef.detectChanges();
// }
// onPageChange(event: any) {
// this.criteria.start=event.first;
// this.criteria.length=event.rows;
// this.criteria.page=event.page;
// this.criteria.pageCount=event.pageCount;
// }
// imageErrorHandler(listing: ListingType) {
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
// }
}

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

@@ -74,7 +74,7 @@
</div>
<div>
<label for="companyOverview" class="block font-medium text-900 mb-2">Licensed In</label>
@for (licensedIn of user.licensedIn; track licensedIn.value){
@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"
@@ -192,21 +192,3 @@
</div>
</div>
</div>
<!-- <p-dialog header="Edit Image" [visible]="imageUrl" [modal]="true" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
<angular-cropper #cropper [imageUrl]="imageUrl" [cropperOptions]="config"></angular-cropper>
<ng-template pTemplate="footer" let-config="config">
<div class="flex justify-content-between">
@if(type==='company'){
<div>
<p-selectButton [options]="stateOptions" [ngModel]="value" (ngModelChange)="changeAspectRation($event)" optionLabel="label" optionValue="value"></p-selectButton>
</div>
} @else {
<div></div>
}
<div>
<p-button icon="pi" (click)="cancelUpload()" label="Cancel" [outlined]="true"></p-button>
<p-button icon="pi pi-check" (click)="sendImage()" label="Finish" pAutoFocus [autofocus]="true"></p-button>
</div>
</div>
</ng-template>
</p-dialog> -->

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

@@ -23,7 +23,6 @@ import { lastValueFrom } from 'rxjs';
import { MessageService } from 'primeng/api';
import { environment } from '../../../../environments/environment';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { AutoCompleteCompleteEvent, Invoice, KeyValue, KeyValueRatio, Subscription, User } from '../../../../../../common-models/src/main.model';
import { GeoService } from '../../../services/geo.service';
import { ChangeDetectionStrategy } from '@angular/compiler';
import { EditorModule } from 'primeng/editor';
@@ -36,6 +35,8 @@ import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dy
import { ImageCropperComponent, stateOptions } from '../../../components/image-cropper/image-cropper.component';
import Quill from 'quill'
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, Invoice, KeyValue, Subscription } from '../../../../../../bizmatch-server/src/models/main.model';
@Component({
selector: 'app-account',
standalone: true,
@@ -58,6 +59,7 @@ export class AccountComponent {
dialogRef: DynamicDialogRef | undefined;
environment = environment
editorModules = TOOLBAR_OPTIONS
userLicensedIn :KeyValue[]
constructor(public userService: UserService,
private subscriptionService: SubscriptionsService,
private messageService: MessageService,
@@ -70,9 +72,10 @@ export class AccountComponent {
public dialogService: DialogService) {}
async ngOnInit() {
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.userSubscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions());
if (!this.user.licensedIn || this.user.licensedIn?.length === 0) {
this.user.licensedIn = [{ name: '', value: '' }]
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`
@@ -105,10 +108,10 @@ export class AccountComponent {
this.suggestions = result.map(r => `${r.city} - ${r.state_code}`).slice(0, 5);
}
addLicence() {
this.user.licensedIn.push({ name: '', value: '' });
this.userLicensedIn.push({ name: '', value: '' });
}
removeLicence() {
this.user.licensedIn.splice(this.user.licensedIn.length - 2, 1);
this.userLicensedIn.splice(this.user.licensedIn.length - 2, 1);
}
select(event: any, type: 'company' | 'profile') {
@@ -141,7 +144,7 @@ export class AccountComponent {
if (event.type === HttpEventType.Response) {
this.loadingService.stopLoading('uploadImage');
if (this.type==='company'){
this.user.hasCompanyLogo=true;
this.user.hasCompanyLogo=true;//
this.companyLogoUrl=`${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`
} else {
this.user.hasProfile=true;

155
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html Normal file
View File

@@ -0,0 +1,155 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
<div *ngIf="listing" class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">{{mode==='create'?'New':'Edit'}} Listing</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
<div class="mb-4">
<label for="listingCategory" class="block font-medium text-900 mb-2">Listing category</label>
<p-dropdown id="listingCategory" [options]="selectOptions?.listingCategories"
[(ngModel)]="listingsCategory" optionLabel="name" optionValue="value"
placeholder="Listing category" [disabled]="mode==='edit'"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="mb-4">
<label for="email" class="block font-medium text-900 mb-2">Title of Listing</label>
<input id="email" type="text" pInputText [(ngModel)]="listing.title">
</div>
<div>
<div class="mb-4">
<label for="description" class="block font-medium text-900 mb-2">Description</label>
<!-- <textarea id="description" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.description"></textarea> -->
<p-editor [(ngModel)]="listing.description" [style]="{ height: '320px' }"
[modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
</div>
<div class="mb-4">
<label for="type" class="block font-medium text-900 mb-2">Type of business</label>
<p-dropdown id="type" [options]="selectOptions?.typesOfBusiness" [(ngModel)]="listing.type"
optionLabel="name" optionValue="value" [showClear]="true" placeholder="Type of business"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="listingCategory" class="block font-medium text-900 mb-2">State</label>
<p-dropdown id="listingCategory" [options]="selectOptions?.states"
[(ngModel)]="listing.state" optionLabel="name" optionValue="value" [showClear]="true"
placeholder="State" [style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="listingCategory" class="block font-medium text-900 mb-2">City</label>
<p-autoComplete [(ngModel)]="listing.city" [suggestions]="suggestions"
(completeMethod)="search($event)"></p-autoComplete>
</div>
</div>
</div>
</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="price" class="block font-medium text-900 mb-2">Price</label>
<!-- <p-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price" ></p-inputNumber> -->
<app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price"
[(ngModel)]="listing.price"></app-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="salesRevenue" class="block font-medium text-900 mb-2">Sales Revenue</label>
<app-inputNumber mode="currency" currency="USD" inputId="salesRevenue"
[(ngModel)]="listing.salesRevenue"></app-inputNumber>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="cashFlow" class="block font-medium text-900 mb-2">Cash Flow</label>
<app-inputNumber mode="currency" currency="USD" inputId="cashFlow"
[(ngModel)]="listing.cashFlow"></app-inputNumber>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="employees" class="block font-medium text-900 mb-2">Years Established
Since</label>
<app-inputNumber mode="decimal" inputId="established"
[(ngModel)]="listing.established"></app-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="employees" class="block font-medium text-900 mb-2">Employees</label>
<app-inputNumber mode="decimal" inputId="employees"
[(ngModel)]="listing.employees"></app-inputNumber>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-4 ">
<p-checkbox [binary]="true" [(ngModel)]="listing.realEstateIncluded"></p-checkbox>
<span class="ml-2 text-900">Real Estate Included</span>
</div>
<div class="mb-4 col-12 md:col-4">
<p-checkbox [binary]="true" [(ngModel)]="listing.leasedLocation"></p-checkbox>
<span class="ml-2 text-900">Leased Location</span>
</div>
<div class="mb-4 col-12 md:col-4">
<p-checkbox [binary]="true" [(ngModel)]="listing.franchiseResale"></p-checkbox>
<span class="ml-2 text-900">Franchise Re-Sale</span>
</div>
</div>
<div class="mb-4">
<label for="supportAndTraining" class="block font-medium text-900 mb-2">Support &
Training</label>
<!-- <textarea id="inventory" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.supportAndTraining"></textarea> -->
<input id="supportAndTraining" type="text" pInputText [(ngModel)]="listing.supportAndTraining">
</div>
<div class="mb-4">
<label for="reasonForSale" class="block font-medium text-900 mb-2">Reason for Sale</label>
<textarea id="reasonForSale" type="text" pInputTextarea rows="5" [autoResize]="true"
[(ngModel)]="listing.reasonForSale"></textarea>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="brokerLicensing" class="block font-medium text-900 mb-2">Broker
Licensing</label>
<input id="brokerLicensing" type="text" pInputText [(ngModel)]="listing.brokerLicencing">
</div>
<div class="mb-4 col-12 md:col-6">
<label for="internalListingNumber" class="block font-medium text-900 mb-2">Internal Listing
Number</label>
<app-inputNumber mode="decimal" inputId="internalListingNumber" type="text"
[(ngModel)]="listing.internalListingNumber"></app-inputNumber>
</div>
</div>
<div class="mb-4">
<label for="internalListing" class="block font-medium text-900 mb-2">Internal Notes (Will not be
shown on the listing, for your records only.)</label>
<input id="internalListing" type="text" pInputText [(ngModel)]="listing.internals">
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6 ">
<!-- <p-tag value="New"></p-tag> -->
<!-- <p-checkbox [binary]="true" [(ngModel)]="listing.draft"></p-checkbox> -->
<p-inputSwitch inputId="draft" [(ngModel)]="listing.draft"></p-inputSwitch>
<!-- <span class="ml-2 text-900">Share my data with contacts</span> -->
<span class="ml-2 text-900 absolute translate-y-5">Draft Mode (Will not be shown as public
listing)</span>
</div>
</div>
<div>
@if (mode==='create'){
<button pButton pRipple label="Post Listing" class="w-auto" (click)="save()"></button>
} @else {
<button pButton pRipple label="Update Listing" class="w-auto" (click)="save()"></button>
}
</div>
</div>
</div>
</div>
</div>
</div>
<p-toast></p-toast>
<p-confirmDialog></p-confirmDialog>

57
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.scss Normal file
View File

@@ -0,0 +1,57 @@
.translate-y-5 {
transform: translateY(5px);
}
.image-container {
display: flex; /* Erlaubt ein flexibles Box-Layout */
flex-wrap: wrap; /* Erlaubt das Umfließen der Elemente auf die nächste Zeile */
justify-content: flex-start; /* Startet die Anordnung der Elemente am Anfang des Containers */
align-items: flex-start; /* Ausrichtung der Elemente am Anfang der Querachse */
padding: 10px; /* Abstand zwischen den Inhalten des Containers und dessen Rand */
}
.image-container span {
flex-flow: row;
display: flex;
width: fit-content;
height: fit-content;
}
.image-container span img {
max-height: 150px; /* Maximale Höhe der Bilder */
width: auto; /* Die Breite der Bilder passt sich automatisch an die Höhe an */
cursor: pointer;
margin: 10px;
}
// .image-container fa-icon {
// top: 0; /* Positioniert das Icon am oberen Rand des Bildes */
// right: 0; /* Positioniert das Icon am rechten Rand des Bildes */
// color: #fff; /* Weiße Farbe für das Icon */
// background-color: rgba(0,0,0,0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
// padding: 5px; /* Ein wenig Platz um das Icon */
// cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
// }
.image-wrap {
position: relative; /* Ermöglicht die absolute Positionierung des Icons bezogen auf diesen Container */
display: inline-block; /* Erlaubt die Inline-Anordnung, falls mehrere Bilder vorhanden sind */
}
/* Stil für das Bild */
.image-wrap img {
max-height: 150px;
width: auto;
display: block; /* Verhindert unerwünschten Abstand unter dem Bild */
}
/* Stil für das FontAwesome Icon */
.image-wrap fa-icon {
position: absolute;
top: 15px; /* Positioniert das Icon am oberen Rand des Bildes */
right: 15px; /* Positioniert das Icon am rechten Rand des Bildes */
color: #fff; /* Weiße Farbe für das Icon */
background-color: rgba(0,0,0,0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
padding: 5px; /* Ein wenig Platz um das Icon */
cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
border-radius: 8px; /* Optional: Abrunden der linken unteren Ecke für ästhetische Zwecke */
}

207
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts Normal file
View File

@@ -0,0 +1,207 @@
import { 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 data from '../../../../assets/data/user.json';
import dataListings from '../../../../assets/data/listings.json';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
import { createGenericObject, getListingType } from '../../../utils/utils';
import { ListingsService } from '../../../services/listings.service';
import { lastValueFrom } from 'rxjs';
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { ConfirmationService, MessageService } from 'primeng/api';
import { GeoResult, GeoService } from '../../../services/geo.service';
import { InputNumberComponent, InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
import { environment } from '../../../../environments/environment';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { CarouselModule } from 'primeng/carousel';
import { v4 as uuidv4 } from 'uuid';
import { DialogModule } from 'primeng/dialog';
import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
import { HttpClient, HttpEventType } from '@angular/common/http';
import { ImageService } from '../../../services/image.service'
import { LoadingService } from '../../../services/loading.service';
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
import { EditorModule } from 'primeng/editor';
import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
import { ImageCropperComponent } from '../../../components/image-cropper/image-cropper.component';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { CdkDragDrop, CdkDragEnter, CdkDragExit, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { AutoCompleteCompleteEvent, ImageProperty, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
@Component({
selector: 'create-listing',
standalone: true,
imports: [SharedModule, ArrayToStringPipe, InputNumberModule, CarouselModule,
DialogModule, AngularCropperjsModule, FileUploadModule, EditorModule, DynamicDialogModule, DragDropModule,
ConfirmDialogModule, MixedCdkDragDropModule],
providers: [MessageService, DialogService, ConfirmationService],
templateUrl: './edit-business-listing.component.html',
styleUrl: './edit-business-listing.component.scss'
})
export class EditBusinessListingComponent {
@ViewChild(FileUpload) public fileUpload: FileUpload;
listingsCategory = 'commercialProperty'
category: string;
location: string;
mode: 'edit' | 'create';
separator: '\n\n'
listing: BusinessListing
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user: User;
maxFileSize = 3000000;
uploadUrl: string;
environment = environment;
propertyImages: ImageProperty[]
responsiveOptions = [
{
breakpoint: '1199px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 1,
numScroll: 1
}
];
config = { aspectRatio: 16 / 9 }
editorModules = TOOLBAR_OPTIONS
dialogRef: DynamicDialogRef | undefined;
draggedImage: ImageProperty
faTrash = faTrash;
constructor(public selectOptions: SelectOptionsService,
private router: Router,
private activatedRoute: ActivatedRoute,
private listingsService: ListingsService,
public userService: UserService,
private messageService: MessageService,
private geoService: GeoService,
private imageService: ImageService,
private loadingService: LoadingService,
public dialogService: DialogService,
private confirmationService: ConfirmationService) {
this.user = this.userService.getUser();
// Abonniere Router-Events, um den aktiven Link zu ermitteln
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.mode = event.url === '/createListing' ? 'create' : 'edit';
}
});
}
async ngOnInit() {
if (this.mode === 'edit') {
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id));
} else {
const uuid = sessionStorage.getItem('uuid') ? sessionStorage.getItem('uuid') : uuidv4();
sessionStorage.setItem('uuid', uuid);
this.listing = createGenericObject<BusinessListing>();
this.listing.id = uuid
this.listing.userId = this.user.id
}
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
}
async save() {
sessionStorage.removeItem('uuid')
await this.listingsService.save(this.listing, getListingType(this.listing));
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
}
suggestions: string[] | undefined;
async search(event: AutoCompleteCompleteEvent) {
const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query, this.listing.state))
this.suggestions = result.map(r => r.city).slice(0, 5);
}
select(event: any) {
const imageUrl = URL.createObjectURL(event.files[0]);
this.dialogRef = this.dialogService.open(ImageCropperComponent, {
data: {
imageUrl: imageUrl,
fileUpload: this.fileUpload,
ratioVariable: false
},
header: 'Edit Image',
width: '50vw',
modal: true,
closeOnEscape: true,
keepInViewport: true,
closable: false,
breakpoints: {
'960px': '75vw',
'640px': '90vw'
},
});
this.dialogRef.onClose.subscribe(cropper => {
if (cropper){
this.loadingService.startLoading('uploadImage');
cropper.getCroppedCanvas().toBlob(async (blob) => {
this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.id).subscribe(async (event) => {
if (event.type === HttpEventType.Response) {
console.log('Upload abgeschlossen', event.body);
this.loadingService.stopLoading('uploadImage');
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
}
}, error => console.error('Fehler beim Upload:', error));
}, 'image/jpg');
cropper.destroy();
}
})
}
deleteConfirm(imageName: string) {
this.confirmationService.confirm({
target: event.target as EventTarget,
message: `Do you want to delete this image ${imageName}?`,
header: 'Delete Confirmation',
icon: 'pi pi-info-circle',
acceptButtonStyleClass: "p-button-danger p-button-text",
rejectButtonStyleClass: "p-button-text p-button-text",
acceptIcon: "none",
rejectIcon: "none",
accept: async () => {
await this.imageService.deleteListingImage(this.listing.id, imageName);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
},
reject: () => {
// this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
console.log('deny')
}
});
}
onDrop(event: { previousIndex: number; currentIndex: number }) {
moveItemInArray(this.propertyImages, event.previousIndex, event.currentIndex);
this.listingsService.changeImageOrder(this.listing.id, this.propertyImages)
}
}

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

@@ -0,0 +1,110 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
<div *ngIf="listing" class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">{{mode==='create'?'New':'Edit'}} Listing</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
<div class="mb-4">
<label for="listingCategory" class="block font-medium text-900 mb-2">Listing category</label>
<p-dropdown id="listingCategory" [options]="selectOptions?.listingCategories"
[(ngModel)]="listingsCategory" optionLabel="name" optionValue="value"
placeholder="Listing category" [disabled]="mode==='edit'"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="mb-4">
<label for="email" class="block font-medium text-900 mb-2">Title of Listing</label>
<input id="email" type="text" pInputText [(ngModel)]="listing.title">
</div>
<div>
<div class="mb-4">
<label for="description" class="block font-medium text-900 mb-2">Description</label>
<!-- <textarea id="description" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.description"></textarea> -->
<p-editor [(ngModel)]="listing.description" [style]="{ height: '320px' }"
[modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
</div>
<div class="mb-4">
<label for="type" class="block font-medium text-900 mb-2">Property Category</label>
<p-dropdown id="type" [options]="selectOptions?.typesOfCommercialProperty"
[(ngModel)]="listing.type" optionLabel="name" optionValue="value" [showClear]="true"
placeholder="Property Category" [style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="states" class="block font-medium text-900 mb-2">State</label>
<p-dropdown id="states" [options]="selectOptions?.states"
[(ngModel)]="listing.state" optionLabel="name" optionValue="value" [showClear]="true"
placeholder="State" [style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="city" class="block font-medium text-900 mb-2">City</label>
<p-autoComplete id="city" [(ngModel)]="listing.city" [suggestions]="suggestions"
(completeMethod)="search($event)"></p-autoComplete>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="zipCode" class="block font-medium text-900 mb-2">Zip Code</label>
<input id="zipCode" type="text" pInputText [(ngModel)]="listing.zipCode">
</div>
<div class="mb-4 col-12 md:col-6">
<label for="county" class="block font-medium text-900 mb-2">County</label>
<input id="county" type="text" pInputText [(ngModel)]="listing.county">
</div>
</div>
</div>
</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="price" class="block font-medium text-900 mb-2">Price</label>
<!-- <p-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price" ></p-inputNumber> -->
<app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price"
[(ngModel)]="listing.price"></app-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Property Pictures</span>
<!-- <img [src]="propertyPictureUrl" (error)="setImageToFallback($event)" class="image"/> -->
<p-fileUpload mode="basic" chooseLabel="Upload" [customUpload]="true" name="file"
accept="image/*" [maxFileSize]="maxFileSize" (onSelect)="select($event)"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4">
</p-fileUpload>
</div>
</div>
</div>
<div class="p-2 border-1 surface-border border-round mb-4 image-container" cdkDropListGroup
mixedCdkDragDrop (dropped)="onDrop($event)" cdkDropListOrientation="horizontal">
@for (image of propertyImages; track image) {
<span cdkDropList mixedCdkDropList>
<div cdkDrag mixedCdkDragSizeHelper class="image-wrap">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{image.name}}"
[alt]="image.name" class="shadow-2" cdkDrag>
<fa-icon [icon]="faTrash" (click)="deleteConfirm(image.name)"></fa-icon>
</div>
</span>
}
</div>
<div>
@if (mode==='create'){
<button pButton pRipple label="Post Listing" class="w-auto" (click)="save()"></button>
} @else {
<button pButton pRipple label="Update Listing" class="w-auto" (click)="save()"></button>
}
</div>
</div>
</div>
</div>
</div>
</div>
<p-toast></p-toast>
<p-confirmDialog></p-confirmDialog>

57
bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.scss Normal file
View File

@@ -0,0 +1,57 @@
.translate-y-5 {
transform: translateY(5px);
}
.image-container {
display: flex; /* Erlaubt ein flexibles Box-Layout */
flex-wrap: wrap; /* Erlaubt das Umfließen der Elemente auf die nächste Zeile */
justify-content: flex-start; /* Startet die Anordnung der Elemente am Anfang des Containers */
align-items: flex-start; /* Ausrichtung der Elemente am Anfang der Querachse */
padding: 10px; /* Abstand zwischen den Inhalten des Containers und dessen Rand */
}
.image-container span {
flex-flow: row;
display: flex;
width: fit-content;
height: fit-content;
}
.image-container span img {
max-height: 150px; /* Maximale Höhe der Bilder */
width: auto; /* Die Breite der Bilder passt sich automatisch an die Höhe an */
cursor: pointer;
margin: 10px;
}
// .image-container fa-icon {
// top: 0; /* Positioniert das Icon am oberen Rand des Bildes */
// right: 0; /* Positioniert das Icon am rechten Rand des Bildes */
// color: #fff; /* Weiße Farbe für das Icon */
// background-color: rgba(0,0,0,0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
// padding: 5px; /* Ein wenig Platz um das Icon */
// cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
// }
.image-wrap {
position: relative; /* Ermöglicht die absolute Positionierung des Icons bezogen auf diesen Container */
display: inline-block; /* Erlaubt die Inline-Anordnung, falls mehrere Bilder vorhanden sind */
}
/* Stil für das Bild */
.image-wrap img {
max-height: 150px;
width: auto;
display: block; /* Verhindert unerwünschten Abstand unter dem Bild */
}
/* Stil für das FontAwesome Icon */
.image-wrap fa-icon {
position: absolute;
top: 15px; /* Positioniert das Icon am oberen Rand des Bildes */
right: 15px; /* Positioniert das Icon am rechten Rand des Bildes */
color: #fff; /* Weiße Farbe für das Icon */
background-color: rgba(0,0,0,0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
padding: 5px; /* Ein wenig Platz um das Icon */
cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
border-radius: 8px; /* Optional: Abrunden der linken unteren Ecke für ästhetische Zwecke */
}

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

@@ -0,0 +1,207 @@
import { 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 data from '../../../../assets/data/user.json';
import dataListings from '../../../../assets/data/listings.json';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
import { createGenericObject, getListingType } from '../../../utils/utils';
import { ListingsService } from '../../../services/listings.service';
import { lastValueFrom } from 'rxjs';
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { ConfirmationService, MessageService } from 'primeng/api';
import { GeoResult, GeoService } from '../../../services/geo.service';
import { InputNumberComponent, InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
import { environment } from '../../../../environments/environment';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { CarouselModule } from 'primeng/carousel';
import { v4 as uuidv4 } from 'uuid';
import { DialogModule } from 'primeng/dialog';
import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
import { HttpClient, HttpEventType } from '@angular/common/http';
import { ImageService } from '../../../services/image.service'
import { LoadingService } from '../../../services/loading.service';
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
import { EditorModule } from 'primeng/editor';
import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
import { ImageCropperComponent } from '../../../components/image-cropper/image-cropper.component';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { CdkDragDrop, CdkDragEnter, CdkDragExit, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { AutoCompleteCompleteEvent, ImageProperty, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
@Component({
selector: 'create-listing',
standalone: true,
imports: [SharedModule, ArrayToStringPipe, InputNumberModule, CarouselModule,
DialogModule, AngularCropperjsModule, FileUploadModule, EditorModule, DynamicDialogModule, DragDropModule,
ConfirmDialogModule, MixedCdkDragDropModule],
providers: [MessageService, DialogService, ConfirmationService],
templateUrl: './edit-commercial-property-listing.component.html',
styleUrl: './edit-commercial-property-listing.component.scss'
})
export class EditCommercialPropertyListingComponent {
@ViewChild(FileUpload) public fileUpload: FileUpload;
listingsCategory = 'commercialProperty'
category: string;
location: string;
mode: 'edit' | 'create';
separator: '\n\n'
listing: CommercialPropertyListing
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user: User;
maxFileSize = 3000000;
uploadUrl: string;
environment = environment;
propertyImages: ImageProperty[]
responsiveOptions = [
{
breakpoint: '1199px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 1,
numScroll: 1
}
];
config = { aspectRatio: 16 / 9 }
editorModules = TOOLBAR_OPTIONS
dialogRef: DynamicDialogRef | undefined;
draggedImage: ImageProperty
faTrash = faTrash;
constructor(public selectOptions: SelectOptionsService,
private router: Router,
private activatedRoute: ActivatedRoute,
private listingsService: ListingsService,
public userService: UserService,
private messageService: MessageService,
private geoService: GeoService,
private imageService: ImageService,
private loadingService: LoadingService,
public dialogService: DialogService,
private confirmationService: ConfirmationService) {
this.user = this.userService.getUser();
// Abonniere Router-Events, um den aktiven Link zu ermitteln
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.mode = event.url === '/createListing' ? 'create' : 'edit';
}
});
}
async ngOnInit() {
if (this.mode === 'edit') {
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id));
} else {
const uuid = sessionStorage.getItem('uuid') ? sessionStorage.getItem('uuid') : uuidv4();
sessionStorage.setItem('uuid', uuid);
this.listing = createGenericObject<CommercialPropertyListing>();
this.listing.id = uuid
this.listing.userId = this.user.id
}
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
}
async save() {
sessionStorage.removeItem('uuid')
await this.listingsService.save(this.listing, getListingType(this.listing));
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
}
suggestions: string[] | undefined;
async search(event: AutoCompleteCompleteEvent) {
const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query, this.listing.state))
this.suggestions = result.map(r => r.city).slice(0, 5);
}
select(event: any) {
const imageUrl = URL.createObjectURL(event.files[0]);
this.dialogRef = this.dialogService.open(ImageCropperComponent, {
data: {
imageUrl: imageUrl,
fileUpload: this.fileUpload,
ratioVariable: false
},
header: 'Edit Image',
width: '50vw',
modal: true,
closeOnEscape: true,
keepInViewport: true,
closable: false,
breakpoints: {
'960px': '75vw',
'640px': '90vw'
},
});
this.dialogRef.onClose.subscribe(cropper => {
if (cropper){
this.loadingService.startLoading('uploadImage');
cropper.getCroppedCanvas().toBlob(async (blob) => {
this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.id).subscribe(async (event) => {
if (event.type === HttpEventType.Response) {
console.log('Upload abgeschlossen', event.body);
this.loadingService.stopLoading('uploadImage');
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
}
}, error => console.error('Fehler beim Upload:', error));
}, 'image/jpg');
cropper.destroy();
}
})
}
deleteConfirm(imageName: string) {
this.confirmationService.confirm({
target: event.target as EventTarget,
message: `Do you want to delete this image ${imageName}?`,
header: 'Delete Confirmation',
icon: 'pi pi-info-circle',
acceptButtonStyleClass: "p-button-danger p-button-text",
rejectButtonStyleClass: "p-button-text p-button-text",
acceptIcon: "none",
rejectIcon: "none",
accept: async () => {
await this.imageService.deleteListingImage(this.listing.id, imageName);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
},
reject: () => {
// this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
console.log('deny')
}
});
}
onDrop(event: { previousIndex: number; currentIndex: number }) {
moveItemInArray(this.propertyImages, event.previousIndex, event.currentIndex);
this.listingsService.changeImageOrder(this.listing.id, this.propertyImages)
}
}

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

@@ -1,201 +0,0 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
<div *ngIf="listing" class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">{{mode==='create'?'New':'Edit'}} Listing</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
<div class="mb-4">
<label for="listingCategory" class="block font-medium text-900 mb-2">Listing category</label>
<p-dropdown id="listingCategory" [options]="selectOptions?.listingCategories" [(ngModel)]="listing.listingsCategory" optionLabel="name"
optionValue="value" placeholder="Listing category" [disabled]="mode==='edit'"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="mb-4">
<label for="email" class="block font-medium text-900 mb-2">Title of Listing</label>
<input id="email" type="text" pInputText [(ngModel)]="listing.title">
</div>
<div>
<div class="mb-4">
<label for="description" class="block font-medium text-900 mb-2">Description</label>
<!-- <textarea id="description" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.description"></textarea> -->
<p-editor [(ngModel)]="listing.description" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
</div>
@if (listing.listingsCategory==='business'){
<div class="mb-4">
<label for="type" class="block font-medium text-900 mb-2">Type of business</label>
<p-dropdown id="type" [options]="selectOptions?.typesOfBusiness" [(ngModel)]="listing.type" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Type of business"
[style]="{ width: '100%'}"></p-dropdown>
</div>
}
@if (listing.listingsCategory==='commercialProperty'){
<div class="mb-4">
<label for="type" class="block font-medium text-900 mb-2">Property Category</label>
<p-dropdown id="type" [options]="selectOptions?.typesOfCommercialProperty" [(ngModel)]="listing.type" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Property Category"
[style]="{ width: '100%'}"></p-dropdown>
</div>
}
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="listingCategory" class="block font-medium text-900 mb-2">State</label>
<p-dropdown id="listingCategory" [options]="selectOptions?.states" [(ngModel)]="listing.state" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="State"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="listingCategory" class="block font-medium text-900 mb-2">City</label>
<p-autoComplete [(ngModel)]="listing.city" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
</div>
</div>
@if (listing.listingsCategory==='commercialProperty'){
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="zipCode" class="block font-medium text-900 mb-2">Zip Code</label>
<input id="zipCode" type="text" pInputText [(ngModel)]="listing.zipCode">
</div>
<div class="mb-4 col-12 md:col-6">
<label for="county" class="block font-medium text-900 mb-2">County</label>
<input id="county" type="text" pInputText [(ngModel)]="listing.county">
</div>
</div>
}
</div>
</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
@if (listing.listingsCategory==='commercialProperty'){
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="price" class="block font-medium text-900 mb-2">Price</label>
<!-- <p-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price" ></p-inputNumber> -->
<app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></app-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Property Pictures</span>
<!-- <img [src]="propertyPictureUrl" (error)="setImageToFallback($event)" class="image"/> -->
<p-fileUpload mode="basic"
chooseLabel="Upload"
[customUpload]="true"
name="file"
accept="image/*"
[maxFileSize]="maxFileSize"
(onSelect)="select($event)"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4">
</p-fileUpload>
</div>
</div>
</div>
<div class="p-2 border-1 surface-border border-round mb-4 image-container" cdkDropListGroup mixedCdkDragDrop
(dropped)="onDrop($event)"
cdkDropListOrientation="horizontal">
@for (image of propertyImages; track image) {
<span cdkDropList mixedCdkDropList>
<div cdkDrag mixedCdkDragSizeHelper class="image-wrap">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{image.name}}"
[alt]="image.name" class="shadow-2" cdkDrag>
<fa-icon [icon]="faTrash" (click)="deleteConfirm(image.name)"></fa-icon>
</div>
</span>
}
</div>
}
@if (listing.listingsCategory==='business'){
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="price" class="block font-medium text-900 mb-2">Price</label>
<!-- <p-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price" ></p-inputNumber> -->
<app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></app-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="salesRevenue" class="block font-medium text-900 mb-2">Sales Revenue</label>
<app-inputNumber mode="currency" currency="USD" inputId="salesRevenue" [(ngModel)]="listing.salesRevenue"></app-inputNumber>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="cashFlow" class="block font-medium text-900 mb-2">Cash Flow</label>
<app-inputNumber mode="currency" currency="USD" inputId="cashFlow" [(ngModel)]="listing.cashFlow"></app-inputNumber>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="employees" class="block font-medium text-900 mb-2">Years Established Since</label>
<app-inputNumber mode="decimal" inputId="established" [(ngModel)]="listing.established"></app-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="employees" class="block font-medium text-900 mb-2">Employees</label>
<app-inputNumber mode="decimal" inputId="employees" [(ngModel)]="listing.employees"></app-inputNumber>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-4 ">
<p-checkbox [binary]="true" [(ngModel)]="listing.realEstateIncluded"></p-checkbox>
<span class="ml-2 text-900">Real Estate Included</span>
</div>
<div class="mb-4 col-12 md:col-4">
<p-checkbox [binary]="true" [(ngModel)]="listing.leasedLocation"></p-checkbox>
<span class="ml-2 text-900">Leased Location</span>
</div>
<div class="mb-4 col-12 md:col-4">
<p-checkbox [binary]="true" [(ngModel)]="listing.franchiseResale"></p-checkbox>
<span class="ml-2 text-900">Franchise Re-Sale</span>
</div>
</div>
<div class="mb-4">
<label for="supportAndTraining" class="block font-medium text-900 mb-2">Support & Training</label>
<!-- <textarea id="inventory" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.supportAndTraining"></textarea> -->
<input id="supportAndTraining" type="text" pInputText [(ngModel)]="listing.supportAndTraining">
</div>
<div class="mb-4">
<label for="reasonForSale" class="block font-medium text-900 mb-2">Reason for Sale</label>
<textarea id="reasonForSale" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.reasonForSale"></textarea>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="brokerLicensing" class="block font-medium text-900 mb-2">Broker Licensing</label>
<input id="brokerLicensing" type="text" pInputText [(ngModel)]="listing.brokerLicencing">
</div>
<div class="mb-4 col-12 md:col-6">
<label for="internalListingNumber" class="block font-medium text-900 mb-2">Internal Listing Number</label>
<app-inputNumber mode="decimal" inputId="internalListingNumber" type="text" [(ngModel)]="listing.internalListingNumber"></app-inputNumber>
</div>
</div>
<div class="mb-4">
<label for="internalListing" class="block font-medium text-900 mb-2">Internal Notes (Will not be shown on the listing, for your records only.)</label>
<input id="internalListing" type="text" pInputText [(ngModel)]="listing.internals">
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6 ">
<!-- <p-tag value="New"></p-tag> -->
<!-- <p-checkbox [binary]="true" [(ngModel)]="listing.draft"></p-checkbox> -->
<p-inputSwitch inputId="draft" [(ngModel)]="listing.draft"></p-inputSwitch>
<!-- <span class="ml-2 text-900">Share my data with contacts</span> -->
<span class="ml-2 text-900 absolute translate-y-5">Draft Mode (Will not be shown as public listing)</span>
</div>
</div>
}
<div>
@if (mode==='create'){
<button pButton pRipple label="Post Listing" class="w-auto" (click)="save()"></button>
} @else {
<button pButton pRipple label="Update Listing" class="w-auto" (click)="save()"></button>
}
</div>
</div>
</div>
</div>
</div>
</div>
<p-toast></p-toast>
<p-confirmDialog></p-confirmDialog>

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

@@ -17,7 +17,7 @@ import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
import { createGenericObject } from '../../../utils/utils';
import { createGenericObject, getListingType } from '../../../utils/utils';
import { ListingsService } from '../../../services/listings.service';
import { lastValueFrom } from 'rxjs';
@@ -25,7 +25,6 @@ import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { ConfirmationService, MessageService } from 'primeng/api';
import { AutoCompleteCompleteEvent, BusinessListing, CommercialPropertyListing, ImageProperty, ListingType, User } from '../../../../../../common-models/src/main.model';
import { GeoResult, GeoService } from '../../../services/geo.service';
import { InputNumberComponent, InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
import { environment } from '../../../../environments/environment';
@@ -45,6 +44,8 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { CdkDragDrop, CdkDragEnter, CdkDragExit, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { AutoCompleteCompleteEvent, ImageProperty, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
@Component({
selector: 'create-listing',
standalone: true,
@@ -120,7 +121,6 @@ export class EditListingComponent {
this.listing = createGenericObject<BusinessListing>();
this.listing.id = uuid
this.listing.userId = this.user.id
this.listing.listingsCategory = 'business';
}
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
@@ -128,7 +128,7 @@ export class EditListingComponent {
async save() {
sessionStorage.removeItem('uuid')
await this.listingsService.save(this.listing, this.listing.listingsCategory);
await this.listingsService.save(this.listing, getListingType(this.listing));
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
}
@@ -173,20 +173,6 @@ export class EditListingComponent {
cropper.destroy();
}
})
// this.dialogRef.onClose.subscribe(blob => {
// if (blob) {
// // this.loadingService.startLoading('uploadImage');
// setTimeout(()=>{
// this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.id).subscribe(async (event) => {
// if (event.type === HttpEventType.Response) {
// console.log('Upload abgeschlossen', event.body);
// // this.loadingService.stopLoading('uploadImage');
// this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
// }
// }, error => console.error('Fehler beim Upload:', error));
// },10)
// }
// });
}
deleteConfirm(imageName: string) {

3
bizmatch/src/app/pages/subscription/favorites/favorites.component.ts
View File

@@ -6,7 +6,8 @@ import { UserService } from '../../../services/user.service';
import { lastValueFrom } from 'rxjs';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { BusinessListing, ListingType, User } from '../../../../../../common-models/src/main.model';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
@Component({
selector: 'app-favorites',

7
bizmatch/src/app/pages/subscription/my-listing/my-listing.component.ts
View File

@@ -7,7 +7,10 @@ import { ListingsService } from '../../../services/listings.service';
import { lastValueFrom } from 'rxjs';
import { SelectOptionsService } from '../../../services/select-options.service';
import { ConfirmationService, MessageService } from 'primeng/api';
import { BusinessListing, ListingType, User } from '../../../../../../common-models/src/main.model';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { getListingType } from '../../../utils/utils';
@Component({
selector: 'app-my-listing',
standalone: true,
@@ -30,7 +33,7 @@ export class MyListingComponent {
}
async deleteListing(listing:ListingType){
await this.listingsService.deleteListing(listing.id,listing.listingsCategory);
await this.listingsService.deleteListing(listing.id,getListingType(listing));
// this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.myListings=this.listings.filter(l=>l.userId===this.user.id);
}

2
bizmatch/src/app/services/image.service.ts
View File

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { lastValueFrom } from 'rxjs';
import { ImageType } from '../../../../common-models/src/main.model';
import { ImageType } from '../../../../bizmatch-server/src/models/main.model';
@Injectable({
providedIn: 'root'

9
bizmatch/src/app/services/listings.service.ts
View File

@@ -2,9 +2,10 @@ import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, lastValueFrom } from 'rxjs';
import { environment } from '../../environments/environment';
import { BusinessListing, CommercialPropertyListing, ImageProperty, ListingCriteria, ListingType, ResponseBusinessListing, ResponseBusinessListingArray, ResponseCommercialPropertyListing, ResponseCommercialPropertyListingArray } from '../../../../common-models/src/main.model';
import onChange from 'on-change';
import { getSessionStorageHandler } from '../utils/utils';
import { getListingType, getSessionStorageHandler } from '../utils/utils';
import { ImageProperty, ListingCriteria, ListingType, ResponseBusinessListingArray, ResponseCommercialPropertyListingArray } from '../../../../bizmatch-server/src/models/main.model';
import { BusinessListing } from '../../../../bizmatch-server/src/models/db.model';
@Injectable({
providedIn: 'root'
@@ -17,8 +18,8 @@ export class ListingsService {
// getAllListings():Observable<ListingType[]>{
// return this.http.get<ListingType[]>(`${this.apiBaseUrl}/bizmatch/business-listings`);
// }
async getListings(criteria:ListingCriteria):Promise<ListingType[]>{
const result = await lastValueFrom(this.http.post<ResponseBusinessListingArray|ResponseCommercialPropertyListingArray>(`${this.apiBaseUrl}/bizmatch/listings/${criteria.listingsCategory}/search`,criteria));
async getListings(criteria:ListingCriteria,listingsCategory:'business'|'professionals_brokers'|'commercialProperty'):Promise<ListingType[]>{
const result = await lastValueFrom(this.http.post<ResponseBusinessListingArray>(`${this.apiBaseUrl}/bizmatch/listings/${listingsCategory}/search`,criteria));
return result.data;
}
getListingById(id:string,listingsCategory?:'business'|'commercialProperty'):Observable<ListingType>{

2
bizmatch/src/app/services/mail.service.ts
View File

@@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { MailInfo } from '../../../../common-models/src/main.model';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { lastValueFrom } from 'rxjs';
import { MailInfo } from '../../../../bizmatch-server/src/models/main.model';
@Injectable({
providedIn: 'root'

19
bizmatch/src/app/services/select-options.service.ts
View File

@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
import { InitEditableRow } from 'primeng/table';
import { lastValueFrom } from 'rxjs';
import { environment } from '../../environments/environment';
import { KeyValue, KeyValueStyle } from '../../../../common-models/src/main.model';
import { KeyValue, KeyValueStyle } from '../../../../bizmatch-server/src/models/main.model';
@Injectable({
providedIn: 'root',
@@ -38,12 +38,11 @@ export class SelectOptionsService {
getState(value:string):string{
return this.states.find(l=>l.value===value)?.name
}
getBusiness(value:string):string{
return this.typesOfBusiness.find(t=>t.value===value)?.name
getBusiness(value:number):string{
return this.typesOfBusiness.find(t=>t.value===String(value))?.name
}
getCommercialProperty(value:string):string{
return this.typesOfCommercialProperty.find(t=>t.value===value)?.name
getCommercialProperty(value:number):string{
return this.typesOfCommercialProperty.find(t=>t.value===String(value))?.name
}
getListingsCategory(value:string):string{
return this.listingCategories.find(l=>l.value===value)?.name
@@ -70,11 +69,11 @@ export class SelectOptionsService {
getTextColorType(value:string):string{
return this.typesOfBusiness.find(c=>c.value===value)?.textColorClass
}
getBgColorType(value:string):string{
return this.typesOfBusiness.find(c=>c.value===value)?.bgColorClass
getBgColorType(value:number):string{
return this.typesOfBusiness.find(c=>c.value===String(value))?.bgColorClass
}
getIconAndTextColorType(value:string):string{
const category = this.typesOfBusiness.find(c=>c.value===value)
getIconAndTextColorType(value:number):string{
const category = this.typesOfBusiness.find(c=>c.value===String(value))
return `${category?.icon} ${category?.textColorClass}`
}
}

2
bizmatch/src/app/services/subscriptions.service.ts
View File

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Subscription } from '../../../../common-models/src/main.model';
import { Subscription } from '../../../../bizmatch-server/src/models/main.model';
@Injectable({
providedIn: 'root'

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

@@ -4,9 +4,10 @@ import { jwtDecode } from 'jwt-decode';
import { Observable, distinctUntilChanged, filter, from, lastValueFrom, map } from 'rxjs';
import { CommonModule } from '@angular/common';
import { KeycloakService } from './keycloak.service';
import { JwtToken, ListingCriteria, User } from '../../../../common-models/src/main.model';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { User } from '../../../../bizmatch-server/src/models/db.model';
import { JwtToken, ListingCriteria } from '../../../../bizmatch-server/src/models/main.model';
@Injectable({
providedIn: 'root'

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

@@ -1,5 +1,6 @@
import { INFO, ConsoleFormattedStream, createLogger as _createLogger, stdSerializers } from "browser-bunyan";
import { ListingCriteria } from "../../../../common-models/src/main.model";
import { ListingCriteria } from "../../../../bizmatch-server/src/models/main.model";
import { BusinessListing, CommercialPropertyListing } from "../../../../bizmatch-server/src/models/db.model";
export function createGenericObject<T>(): T {
// Ein leeres Objekt vom Typ T erstellen
@@ -32,7 +33,10 @@ export function createGenericObject<T>(): T {
export function getCriteriaStateObject(){
const initialState = createGenericObject<ListingCriteria>();
initialState.listingsCategory='business';
const storedState = sessionStorage.getItem('criteria');
return storedState ? JSON.parse(storedState) : initialState;
}
export function getListingType(listing:BusinessListing|CommercialPropertyListing){
return listing.type<100?'business':'commercialProperty';
}