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

Bug Fixing overall

Browse Source
This commit is contained in:
Andreas Knuth
2024-05-06 20:13:09 +02:00
parent bb5a408cdc
commit 6b61c19bd7
52 changed files with 1926 additions and 1048 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,7 @@
<div class="col-12 md:col-6">
<ul class="list-none p-0 m-0 border-top-1 border-300">
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Description</div>
<div class="text-500 w-full md:w-2 font-medium flex align-self-start">Description</div>
<div class="text-900 w-full md:w-10 line-height-3" [innerHTML]="description"></div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
@@ -50,16 +50,6 @@
<div class="text-900 w-full md:w-10">{{ listing.brokerLicencing }}</div>
</li>
</ul>
<p-galleria [value]="propertyImages" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
<ng-template pTemplate="item" let-item>
<img src="{{ environment.apiBaseUrl }}/property/{{ listing.id }}/{{ item.name }}" style="width: 100%" />
</ng-template>
<!-- <ng-template pTemplate="thumbnail" let-item>
<div class="grid grid-nogutter justify-content-center">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{item.name}}" />
</div>
</ng-template> -->
</p-galleria>
@if(listing && user && (user.id===listing?.userId || isAdmin())){
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/editListing', listing.id]"></button>
}

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

@@ -1,3 +1,4 @@
import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
@@ -46,7 +47,6 @@ export class DetailsBusinessListingComponent {
listing: BusinessListing;
criteria: ListingCriteria;
mailinfo: MailInfo;
propertyImages: string[] = [];
environment = environment;
user: User;
description: SafeHtml;
@@ -59,27 +59,28 @@ export class DetailsBusinessListingComponent {
private mailService: MailService,
private messageService: MessageService,
private sanitizer: DomSanitizer,
private location: Location,
) {
this.userService.getUserObservable().subscribe(user => {
this.user = user;
this.mailinfo = { sender: {}, userId: '', email: user.email };
});
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
this.mailinfo = { sender: {}, userId: '' };
}
async ngOnInit() {
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'business'));
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
}
back() {
this.router.navigate(['businessListings']);
this.location.back();
}
isAdmin() {
return this.userService.hasAdminRole();
}
async mail() {
this.mailinfo.userId = this.listing.userId;
this.mailinfo.listing = this.listing;
await this.mailService.mail(this.mailinfo);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your message has been sent to the creator of the listing', life: 3000 });
}

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

@@ -12,7 +12,7 @@
<div class="col-12 md:col-6">
<ul class="list-none p-0 m-0 border-top-1 border-300">
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Description</div>
<div class="text-500 w-full md:w-2 font-medium flex align-self-start">Description</div>
<div class="text-900 w-full md:w-10 line-height-3" [innerHTML]="description"></div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">

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

@@ -1,3 +1,4 @@
import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
@@ -59,12 +60,13 @@ export class DetailsCommercialPropertyListingComponent {
private mailService: MailService,
private messageService: MessageService,
private sanitizer: DomSanitizer,
private location: Location,
) {
this.userService.getUserObservable().subscribe(user => {
this.user = user;
this.mailinfo = { sender: {}, userId: '', email: user.email };
});
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
this.mailinfo = { sender: {}, userId: '' };
}
async ngOnInit() {
@@ -73,13 +75,14 @@ export class DetailsCommercialPropertyListingComponent {
this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
}
back() {
this.router.navigate(['commercialPropertyListings']);
this.location.back();
}
isAdmin() {
return this.userService.hasAdminRole();
}
async mail() {
this.mailinfo.userId = this.listing.userId;
this.mailinfo.listing = this.listing;
await this.mailService.mail(this.mailinfo);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your message has been sent to the creator of the listing', life: 3000 });
}

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

@@ -1,5 +1,6 @@
<div class="surface-ground h-full">
<div class="px-6 py-5">
@if (user){
<div class="surface-card p-4 shadow-2 border-round">
<!-- <div class="flex justify-content-between align-items-center align-content-center">
<div class="font-medium text-3xl text-900 mb-3">{{listing?.title}}</div>
@@ -118,5 +119,6 @@
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/account']"></button>
}
</div>
}
</div>
</div>

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

@@ -1,10 +1,9 @@
import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { GalleriaModule } from 'primeng/galleria';
import { SharedModule } from '../../../shared/shared/shared.module';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { MessageService } from 'primeng/api';
import { GalleriaModule } from 'primeng/galleria';
import { Observable } from 'rxjs';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { KeyValue, ListingCriteria } from '../../../../../../bizmatch-server/src/models/main.model';
@@ -13,6 +12,7 @@ import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
@Component({
selector: 'app-details-user',
@@ -41,6 +41,7 @@ export class DetailsUserComponent {
public selectOptions: SelectOptionsService,
private sanitizer: DomSanitizer,
private imageService: ImageService,
private location: Location,
) {}
async ngOnInit() {
@@ -54,7 +55,7 @@ export class DetailsUserComponent {
this.offeredServices = this.sanitizer.bypassSecurityTrustHtml(this.user.offeredServices);
}
back() {
this.router.navigate(['brokerListings']);
this.location.back();
}
isAdmin() {
return this.userService.hasAdminRole();

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

@@ -28,9 +28,6 @@
<div class="mt-5">
<ul class="flex flex-column align-items-left gap-3 px-2 py-3 list-none surface-border">
<li><button pButton pRipple icon="pi pi-user" (click)="activeTabAction = 'business'" label="Businesses" [ngClass]="{ 'p-button-text text-700': activeTabAction !== 'business' }"></button></li>
<li>
<button pButton pRipple icon="pi pi-globe" (click)="activeTabAction = 'broker'" label="Professionals/Brokers Directory" [ngClass]="{ 'p-button-text text-700': activeTabAction != 'broker' }"></button>
</li>
<li>
<button
pButton
@@ -41,13 +38,32 @@
[ngClass]="{ 'p-button-text text-700': activeTabAction != 'commercialProperty' }"
></button>
</li>
<li>
<button pButton pRipple icon="pi pi-globe" (click)="activeTabAction = 'broker'" label="Professionals/Brokers Directory" [ngClass]="{ 'p-button-text text-700': activeTabAction != 'broker' }"></button>
</li>
</ul>
</div>
<div class="mt-5">
<div class="flex flex-column align-items-right gap-3 px-2 py-3 my-3 surface-border">
<p-dropdown [options]="selectOptions.states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '200px' }"></p-dropdown>
@if(activeTabAction === 'business'){
<p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Category" [style]="{ width: '200px' }"></p-dropdown>
} @if(activeTabAction === 'commercialProperty'){
<p-dropdown
[options]="selectOptions.typesOfCommercialProperty"
[(ngModel)]="criteria.type"
optionLabel="name"
optionValue="value"
[showClear]="true"
placeholder="Category"
[style]="{ width: '200px' }"
></p-dropdown>
} @if(activeTabAction === 'business' || activeTabAction === 'commercialProperty'){
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Min Price" [style]="{ width: '200px' }"></p-dropdown>
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Max Price" [style]="{ width: '200px' }"></p-dropdown>
} @else {
<div style="height: 46px">&nbsp;</div>
}
<button pButton pRipple label="Find" class="ml-3 font-bold" [style]="{ width: '170px' }" (click)="search()"></button>
</div>
</div>

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

@@ -5,8 +5,14 @@
<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 class="col-1 col-offset-9">
<p-button label="Refine" (click)="search()"></p-button>
<div class="col-2">
<p-inputGroup>
<input id="name" type="text" pInputText [(ngModel)]="criteria.name" placeholder="Name" />
<button type="button" pButton icon="pi pi-times" class="p-button-danger" (click)="reset()"></button>
</p-inputGroup>
</div>
<div class="col-1 col-offset-7">
<p-button label="Refine" (click)="refine()"></p-button>
</div>
</div>
</div>
@@ -14,13 +20,13 @@
<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">
@for (user of users; track user) {
<div class="col-12 lg:col-6 xl:col-4 p-4 flex flex-column">
<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" />
<img src="profile/{{ user.id }}.avif" class="w-5rem" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="w-5rem" />
}
@@ -33,7 +39,7 @@
</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" />
<img src="logo/{{ user.id }}.avif" class="rounded-image" />
} @else {
<img src="assets/images/placeholder.png" class="rounded-image" />
}

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

@@ -6,6 +6,7 @@ import onChange from 'on-change';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputTextModule } from 'primeng/inputtext';
import { PaginatorModule } from 'primeng/paginator';
import { StyleClassModule } from 'primeng/styleclass';
@@ -22,7 +23,7 @@ import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler }
@Component({
selector: 'app-broker-listings',
standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule, InputGroupModule],
templateUrl: './broker-listings.component.html',
styleUrl: './broker-listings.component.scss',
})
@@ -33,7 +34,6 @@ export class BrokerListingsComponent {
filteredListings: Array<ListingType>;
criteria: ListingCriteria;
realEstateChecked: boolean;
// category: string;
maxPrice: string;
minPrice: string;
type: string;
@@ -56,12 +56,12 @@ export class BrokerListingsComponent {
private imageService: ImageService,
) {
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
this.criteria.type = undefined;
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();
});
@@ -73,16 +73,15 @@ export class BrokerListingsComponent {
async init() {
this.search();
}
refine() {
this.criteria.start = 0;
this.criteria.page = 0;
this.search();
}
async search() {
const usersReponse = await this.userService.search(this.criteria);
this.users = usersReponse.data;
this.totalRecords = usersReponse.total;
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();
}
@@ -93,7 +92,7 @@ export class BrokerListingsComponent {
this.criteria.pageCount = event.pageCount;
this.search();
}
imageErrorHandler(listing: ListingType) {
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
reset() {
this.criteria.name = '';
}
}

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

@@ -2,6 +2,9 @@
<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="criteria.location" optionLabel="name" optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '100%' }"></p-dropdown>
</div>
<div class="col-2">
<p-dropdown
[options]="selectOptions.typesOfBusiness"
@@ -13,21 +16,24 @@
[style]="{ width: '100%' }"
></p-dropdown>
</div>
<div class="col-2">
<p-dropdown [options]="states" [(ngModel)]="criteria.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">
<div class="col-2">
<p-inputGroup>
<input id="name" type="text" pInputText [(ngModel)]="criteria.title" placeholder="Title" />
<button type="button" pButton icon="pi pi-times" class="p-button-secondary" (click)="reset()"></button>
</p-inputGroup>
</div>
<div class="col-1" pTooltip="Real Estate excluded/included" tooltipPosition="top">
<!-- <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>
<p-toggleButton [(ngModel)]="criteria.realEstateChecked" onLabel="RE incl." offLabel="RE excl."></p-toggleButton>
</div>
<div class="col-1">
<p-button label="Refine" (click)="search()"></p-button>
<p-button label="Refine" (click)="refine()"></p-button>
</div>
</div>
</div>
@@ -52,7 +58,7 @@
<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" />
<img src="{{ environment.apiBaseUrl }}/logo/{{ listing.userId }}.avif" (error)="imageErrorHandler(listing)" class="rounded-image" />
</div>
</div>
<div class="px-4 py-3 surface-100 text-left">

37
bizmatch/src/app/pages/listings/business-listings/business-listings.component.scss
View File

@@ -1,23 +1,26 @@
#sky-line {
background-image: url(../../../../assets/images/bw-sky.jpg);
height: 204px;
background-position: bottom;
background-size: cover;
margin-bottom: -1px;
background-image: url(../../../../assets/images/bw-sky.jpg);
height: 204px;
background-position: bottom;
background-size: cover;
margin-bottom: -1px;
}
.search{
background-color: #343F69;
.search {
background-color: #343f69;
}
::ng-deep p-paginator div {
background-color: var(--surface-200) !important;
// background-color: var(--surface-400) !important;
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;
}
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;
}
::ng-deep span.p-button-label {
font-weight: 500;
}

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

@@ -6,10 +6,12 @@ import onChange from 'on-change';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputTextModule } from 'primeng/inputtext';
import { PaginatorModule } from 'primeng/paginator';
import { StyleClassModule } from 'primeng/styleclass';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { TooltipModule } from 'primeng/tooltip';
import { BusinessListing } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
@@ -21,7 +23,21 @@ import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler }
@Component({
selector: 'app-business-listings',
standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
imports: [
CommonModule,
StyleClassModule,
ButtonModule,
CheckboxModule,
InputTextModule,
DropdownModule,
FormsModule,
StyleClassModule,
ToggleButtonModule,
RouterModule,
PaginatorModule,
InputGroupModule,
TooltipModule,
],
templateUrl: './business-listings.component.html',
styleUrl: './business-listings.component.scss',
})
@@ -36,10 +52,10 @@ export class BusinessListingsComponent {
type: string;
states = [];
state: string;
first: number = 0;
rows: number = 12;
totalRecords: number = 0;
ts = new Date().getTime();
first: number = 0;
rows: number = 12;
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
constructor(
@@ -56,7 +72,6 @@ export class BusinessListingsComponent {
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();
@@ -68,6 +83,11 @@ export class BusinessListingsComponent {
this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
this.search();
}
refine() {
this.criteria.start = 0;
this.criteria.page = 0;
this.search();
}
async search() {
const listingReponse = await this.listingsService.getListings(this.criteria, 'business');
this.listings = listingReponse.data;
@@ -85,4 +105,7 @@ export class BusinessListingsComponent {
imageErrorHandler(listing: ListingType) {
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
}
reset() {
this.criteria.title = null;
}
}

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

@@ -5,8 +5,31 @@
<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 class="col-1 col-offset-9">
<p-button label="Refine" (click)="search()"></p-button>
<div class="col-2">
<p-dropdown
[options]="selectOptions.typesOfCommercialProperty"
[(ngModel)]="criteria.type"
optionLabel="name"
optionValue="value"
[showClear]="true"
placeholder="Categorie of Property"
[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-2">
<p-inputGroup>
<input id="name" type="text" pInputText [(ngModel)]="criteria.title" placeholder="Title" />
<button type="button" pButton icon="pi pi-times" class="p-button-secondary" (click)="reset()"></button>
</p-inputGroup>
</div>
<div class="col-1 col-offset-1">
<p-button label="Refine" (click)="refine()"></p-button>
</div>
</div>
</div>
@@ -19,7 +42,7 @@
<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){
@if (listing.imageOrder?.length>0){
<img src="property/{{ listing.imagePath }}/{{ 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"> -->
@@ -60,9 +83,12 @@
}
</div>
<div class="mb-2 surface-200 flex align-items-center justify-content-center">
<!-- @if(listings && listings.length>12){ -->
<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>

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

@@ -6,12 +6,13 @@ import onChange from 'on-change';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputTextModule } from 'primeng/inputtext';
import { PaginatorModule } from 'primeng/paginator';
import { StyleClassModule } from 'primeng/styleclass';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { CommercialPropertyListing } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { ListingCriteria } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
@@ -21,7 +22,7 @@ import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler }
@Component({
selector: 'app-commercial-property-listings',
standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule, InputGroupModule],
templateUrl: './commercial-property-listings.component.html',
styleUrl: './commercial-property-listings.component.scss',
})
@@ -31,15 +32,14 @@ export class CommercialPropertyListingsComponent {
filteredListings: Array<CommercialPropertyListing>;
criteria: ListingCriteria;
realEstateChecked: boolean;
first: number = 0;
rows: number = 12;
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();
@@ -52,12 +52,12 @@ export class CommercialPropertyListingsComponent {
private imageService: ImageService,
) {
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
this.criteria.type = undefined;
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();
});
@@ -68,7 +68,11 @@ export class CommercialPropertyListingsComponent {
this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
this.search();
}
refine() {
this.criteria.start = 0;
this.criteria.page = 0;
this.search();
}
async search() {
const listingReponse = await this.listingsService.getListings(this.criteria, 'commercialProperty');
this.listings = listingReponse.data;
@@ -83,7 +87,7 @@ export class CommercialPropertyListingsComponent {
this.criteria.pageCount = event.pageCount;
this.search();
}
imageErrorHandler(listing: ListingType) {
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
reset() {
this.criteria.title = null;
}
}

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

@@ -103,6 +103,7 @@
<span class="font-medium text-xs mb-2">(is shown in every offer)</span>
@if(user?.hasCompanyLogo){
<img src="{{ companyLogoUrl }}" class="rounded-profile" />
<!-- <img src="profile/{{ user.id }}.avif" class="rounded-profile" /> -->
} @else {
<img src="assets/images/placeholder.png" class="rounded-profile" />
}
@@ -121,7 +122,7 @@
<p-divider></p-divider>
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Your Profile Picture</span>
@if(user.hasProfile){
@if(user?.hasProfile){
<img src="{{ profileUrl }}" class="rounded-profile" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="rounded-profile" />

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

@@ -57,17 +57,25 @@ export class AccountComponent {
public dialogService: DialogService,
) {}
async ngOnInit() {
const email = this.userService.getUser().email;
this.user = await this.userService.getByMail(email);
this.userLicensedIn = this.user.licensedIn.map(l => {
return { name: l.split('|')[0], value: l.split('|')[1] };
});
const keycloakUser = this.userService.getKeycloakUser();
const email = keycloakUser.email;
try {
this.user = await this.userService.getByMail(email);
} catch (e) {
this.user = { email, firstname: keycloakUser.firstname, lastname: keycloakUser.lastname };
this.user = await this.userService.save(this.user);
}
this.userLicensedIn = this.user.licensedIn
? 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 = [''];
}
this.profileUrl = this.user.hasProfile ? `${environment.apiBaseUrl}/profile/${this.user.id}.avif` : `/assets/images/placeholder.png`;
this.companyLogoUrl = this.user.hasCompanyLogo ? `${environment.apiBaseUrl}/logo/${this.user.id}.avif` : `/assets/images/placeholder.png`;
this.profileUrl = this.user.hasProfile ? `profile/${this.user.id}.avif` : `/assets/images/placeholder.png`;
this.companyLogoUrl = this.user.hasCompanyLogo ? `logo/${this.user.id}.avif` : `/assets/images/placeholder.png`;
}
printInvoice(invoice: Invoice) {}

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

@@ -36,16 +36,7 @@
</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>
<p-dropdown id="type" [options]="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">

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

@@ -85,6 +85,7 @@ export class EditBusinessListingComponent {
draggedImage: ImageProperty;
faTrash = faTrash;
data: CommercialPropertyListing;
typesOfBusiness = [];
constructor(
public selectOptions: SelectOptionsService,
private router: Router,
@@ -109,10 +110,13 @@ export class EditBusinessListingComponent {
this.data = this.router.getCurrentNavigation().extras.state['data'];
}
});
this.typesOfBusiness = selectOptions.typesOfBusiness.map(e => {
return { name: e.name, value: parseInt(e.value) };
});
}
async ngOnInit() {
if (this.mode === 'edit') {
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id));
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'business'));
} else {
this.listing = createGenericObject<BusinessListing>();
this.listing.listingsCategory = 'business';

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

@@ -38,7 +38,7 @@
<label for="type" class="block font-medium text-900 mb-2">Property Category</label>
<p-dropdown
id="type"
[options]="selectOptions?.typesOfCommercialProperty"
[options]="typesOfCommercialProperty"
[(ngModel)]="listing.type"
optionLabel="name"
optionValue="value"
@@ -92,7 +92,7 @@
[maxFileSize]="maxFileSize"
(onSelect)="select($event)"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
[disabled]="true"
[disabled]="!listing.id"
>
</p-fileUpload>
</div>

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

@@ -89,6 +89,7 @@ export class EditCommercialPropertyListingComponent {
suggestions: string[] | undefined;
data: BusinessListing;
userId: string;
typesOfCommercialProperty = [];
constructor(
public selectOptions: SelectOptionsService,
private router: Router,
@@ -103,7 +104,6 @@ export class EditCommercialPropertyListingComponent {
private confirmationService: ConfirmationService,
private route: ActivatedRoute,
) {
// this.user = this.userService.getUser();
// Abonniere Router-Events, um den aktiven Link zu ermitteln
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
@@ -115,10 +115,13 @@ export class EditCommercialPropertyListingComponent {
this.data = this.router.getCurrentNavigation().extras.state['data'];
}
});
this.typesOfCommercialProperty = selectOptions.typesOfCommercialProperty.map(e => {
return { name: e.name, value: parseInt(e.value) };
});
}
async ngOnInit() {
if (this.mode === 'edit') {
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id));
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
} else {
this.listing = createGenericObject<CommercialPropertyListing>();
this.listing.userId = await this.userService.getId();

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

@@ -1,216 +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>
<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>
<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>
<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>
<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>
<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-inputSwitch inputId="draft" [(ngModel)]="listing.draft"></p-inputSwitch>
<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-listing/edit-listing.component.scss
View File

@@ -1,57 +0,0 @@
.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 */
}

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

@@ -1,203 +0,0 @@
import { Component, ViewChild } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { lastValueFrom } from 'rxjs';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { createGenericObject } from '../../../utils/utils';
import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { HttpEventType } from '@angular/common/http';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { AngularCropperjsModule } from 'angular-cropperjs';
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
import { ConfirmationService, MessageService } from 'primeng/api';
import { CarouselModule } from 'primeng/carousel';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { DialogModule } from 'primeng/dialog';
import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
import { EditorModule } from 'primeng/editor';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { v4 as uuidv4 } from 'uuid';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, ImageProperty, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ImageCropperComponent } from '../../../components/image-cropper/image-cropper.component';
import { InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { GeoService } from '../../../services/geo.service';
import { ImageService } from '../../../services/image.service';
import { LoadingService } from '../../../services/loading.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@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-listing.component.html',
styleUrl: './edit-listing.component.scss',
})
export class EditListingComponent {
@ViewChild(FileUpload) public fileUpload: FileUpload;
listingCategory: 'Business' | 'Commercial Property';
category: string;
location: string;
mode: 'edit' | 'create';
separator: '\n\n';
listing: ListingType;
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, this.listing.listingsCategory);
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: () => {
console.log('deny');
},
});
}
onDrop(event: { previousIndex: number; currentIndex: number }) {
moveItemInArray(this.propertyImages, event.previousIndex, event.currentIndex);
this.listingsService.changeImageOrder(this.listing.id, this.propertyImages);
}
}

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

@@ -1,30 +1,28 @@
import { Component } from '@angular/core';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import dataListings from '../../../../assets/data/listings.json';
import { SharedModule } from '../../../shared/shared/shared.module';
import { UserService } from '../../../services/user.service';
import { lastValueFrom } from 'rxjs';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
@Component({
selector: 'app-favorites',
standalone: true,
imports: [MenuAccountComponent, SharedModule],
templateUrl: './favorites.component.html',
styleUrl: './favorites.component.scss'
styleUrl: './favorites.component.scss',
})
export class FavoritesComponent {
user: User;
listings: Array<ListingType> =[]//= dataListings as unknown as Array<BusinessListing>;
favorites: Array<ListingType>
constructor(public userService: UserService, private listingsService:ListingsService, public selectOptions:SelectOptionsService){
this.user=this.userService.getUser();
listings: Array<ListingType> = []; //= dataListings as unknown as Array<BusinessListing>;
favorites: Array<ListingType>;
constructor(public userService: UserService, private listingsService: ListingsService, public selectOptions: SelectOptionsService) {
this.user = this.userService.getKeycloakUser();
}
async ngOnInit(){
// this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.favorites=this.listings.filter(l=>l.favoritesForUser?.includes(this.user.id));
async ngOnInit() {
// this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.favorites = this.listings.filter(l => l.favoritesForUser?.includes(this.user.id));
}
}

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

@@ -1,5 +1,6 @@
import { ChangeDetectorRef, Component } from '@angular/core';
import { ConfirmationService, MessageService } from 'primeng/api';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
@@ -18,7 +19,7 @@ import { MenuAccountComponent } from '../../menu-account/menu-account.component'
export class MyListingComponent {
listings: Array<ListingType> = []; //dataListings as unknown as Array<BusinessListing>;
myListings: Array<ListingType>;
userId: string;
user: User;
isBusinessListing = isBusinessListing;
isCommercialPropertyListing = isCommercialPropertyListing;
constructor(
@@ -30,13 +31,15 @@ export class MyListingComponent {
private messageService: MessageService,
) {}
async ngOnInit() {
this.userId = await this.userService.getId();
this.myListings = await this.listingsService.getListingByUserId(this.userId);
const keycloakUser = this.userService.getKeycloakUser();
const email = keycloakUser.email;
this.user = await this.userService.getByMail(email);
this.myListings = await this.listingsService.getListingByUserId(this.user.id);
}
async deleteListing(listing: ListingType) {
await this.listingsService.deleteListing(listing.id, getListingType(listing));
this.myListings = await this.listingsService.getListingByUserId(this.userId);
this.myListings = await this.listingsService.getListingByUserId(this.user.id);
}
confirm(event: Event, listing: ListingType) {

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

@@ -69,7 +69,7 @@ export class UserService {
isLoggedIn(): boolean {
return this.$isLoggedIn();
}
getUser(): User {
getKeycloakUser(): User {
return this.user;
}
getUserObservable(): Observable<User> {

85
bizmatch/src/app/shared/shared/shared.module.ts
View File

@@ -1,35 +1,74 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { AutoCompleteModule } from 'primeng/autocomplete';
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 { ToggleButtonModule } from 'primeng/togglebutton';
import { TagModule } from 'primeng/tag';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { MenuAccountComponent } from '../../pages/menu-account/menu-account.component';
import { InputNumberModule } from 'primeng/inputnumber';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { ConfirmPopupModule } from 'primeng/confirmpopup';
import { ToastModule } from 'primeng/toast';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { DividerModule } from 'primeng/divider';
import { DropdownModule } from 'primeng/dropdown';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputNumberModule } from 'primeng/inputnumber';
import { InputSwitchModule } from 'primeng/inputswitch';
import { InputTextModule } from 'primeng/inputtext';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { StyleClassModule } from 'primeng/styleclass';
import { TableModule } from 'primeng/table';
import { TagModule } from 'primeng/tag';
import { ToastModule } from 'primeng/toast';
import { MenuAccountComponent } from '../../pages/menu-account/menu-account.component';
@NgModule({
declarations: [],
imports: [
CommonModule, StyleClassModule, DividerModule,ButtonModule, TableModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule, RouterModule,FontAwesomeModule,MenuAccountComponent,InputNumberModule,ConfirmDialogModule,ConfirmPopupModule, ToastModule, CheckboxModule, AutoCompleteModule,InputSwitchModule
CommonModule,
StyleClassModule,
DividerModule,
ButtonModule,
TableModule,
InputTextModule,
DropdownModule,
FormsModule,
ChipModule,
InputTextareaModule,
RouterModule,
FontAwesomeModule,
MenuAccountComponent,
InputNumberModule,
ConfirmDialogModule,
ConfirmPopupModule,
ToastModule,
CheckboxModule,
AutoCompleteModule,
InputSwitchModule,
InputGroupModule,
],
exports: [
CommonModule,
StyleClassModule,
DividerModule,
ButtonModule,
TableModule,
InputTextModule,
DropdownModule,
FormsModule,
ChipModule,
InputTextareaModule,
RouterModule,
FontAwesomeModule,
MenuAccountComponent,
InputNumberModule,
ConfirmDialogModule,
ConfirmPopupModule,
ToastModule,
CheckboxModule,
AutoCompleteModule,
TagModule,
InputSwitchModule,
InputGroupModule,
],
exports:[
CommonModule, StyleClassModule, DividerModule,ButtonModule, TableModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule,RouterModule,FontAwesomeModule,MenuAccountComponent,InputNumberModule,ConfirmDialogModule,ConfirmPopupModule, ToastModule, CheckboxModule, AutoCompleteModule, TagModule,InputSwitchModule
]
})
export class SharedModule { }
export class SharedModule {}