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

Ansichten verbessert - 1. Teil

Browse Source
This commit is contained in:
Andreas Knuth
2024-03-17 20:29:53 +01:00
parent 25b201a9c6
commit 2b27ab8ba5
24 changed files with 322 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
bizmatch/src/app/pages/details/details.component.ts
View File

@@ -51,8 +51,10 @@ export class DetailsComponent {
}
async ngOnInit(){
this.user = this.userService.getUser();
this.listing=await lastValueFrom(this.listingsService.getListingById(this.id));
this.userService.getUserObservable().subscribe(user=>{
this.user=user
});
this.listing=await lastValueFrom(this.listingsService.getListingById(this.id,this.criteria.listingsCategory));
}
back(){
this.router.navigate(['listings',this.criteria.listingsCategory])

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

@@ -95,7 +95,7 @@
<p class="mt-0 mb-1 text-700 line-height-3">Phone Number: {{listing.phoneNumber}}</p> -->
}
<div class="mt-auto ml-auto">
<img *ngIf="!listing.hideImage" src="{{environment.apiBaseUrl}}/profile_{{listing.userId}}" (error)="imageErrorHandler(listing)" class="rounded-image"/>
<img *ngIf="!listing.hideImage" src="{{environment.apiBaseUrl}}/profile/{{listing.userId}}" (error)="imageErrorHandler(listing)" class="rounded-image"/>
</div>
</div>
<div class="px-4 py-3 surface-100 text-right">

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

@@ -55,8 +55,8 @@ export class AccountComponent {
}
async ngOnInit(){
this.profileUrl = `${environment.apiBaseUrl}/profile_${this.user.id}`
this.companyLogoUrl = `${environment.apiBaseUrl}/profile_${this.user.id}`
this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}`
this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}`
this.userSubscriptions=await lastValueFrom(this.subscriptionService.getAllSubscriptions());
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/account/uploadPhoto/${this.user.id}`;
if (!this.user.licensedIn || this.user.licensedIn?.length===0){
@@ -74,11 +74,11 @@ export class AccountComponent {
onUploadCompanyLogo(event:any){
const uniqueSuffix = '?_ts=' + new Date().getTime();
this.companyLogoUrl = `${environment.apiBaseUrl}/company_${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
this.companyLogoUrl = `${environment.apiBaseUrl}/company/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
}
onUploadProfilePicture(event:any){
const uniqueSuffix = '?_ts=' + new Date().getTime();
this.profileUrl = `${environment.apiBaseUrl}/profile_${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
}
setImageToFallback(event: Event) {
(event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild

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

@@ -26,52 +26,83 @@
</div>
@if (listing.listingsCategory==='business'){
<div class="mb-4">
<label for="listingCategory" class="block font-medium text-900 mb-2">Type of business</label>
<p-dropdown id="listingCategory" [options]="selectOptions?.typesOfBusiness" [(ngModel)]="listing.type" optionLabel="name"
<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-dropdown id="listingCategory" [options]="selectOptions?.states" [(ngModel)]="listing.city" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="State"
[style]="{ width: '100%'}"></p-dropdown> -->
<p-autoComplete [(ngModel)]="listing.city" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
</div>
</div>
<!-- @if (listing.listingsCategory==='commercialProperty'){
<div>
<div class="mb-4">
<label for="email" class="block font-medium text-900 mb-2">Email</label>
<input id="address" type="text" pInputText [(ngModel)]="listing.email">
<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 class="mb-4">
<label for="website" class="block font-medium text-900 mb-2">Website</label>
<input id="address" type="text" pInputText [(ngModel)]="listing.website">
@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 class="mb-4">
<label for="phoneNumber" class="block font-medium text-900 mb-2">Phone Number</label>
<input id="phoneNumber" type="text" pInputText [(ngModel)]="listing.phoneNumber">
</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 Picture</span>
<!-- <img [src]="propertyPictureUrl" (error)="setImageToFallback($event)" class="image"/> -->
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUploadPropertyPicture($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
</div>
</div>
</div>
<p-carousel [value]="propertyImages" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="responsiveOptions">
<ng-template let-image pTemplate="item">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{image.name}}" [alt]="image.name" class="w-6 shadow-2" />
</div>
<!-- <div>
<h4 class="mb-1">{{ product.name }}</h4>
<h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<p-button icon="pi pi-search" [rounded]="true" />
<p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
</div>
</div> -->
</div>
</ng-template>
</p-carousel>
}
@if (listing.listingsCategory==='business'){
<div class="grid">
<div class="mb-4 col-12 md:col-6">

9
bizmatch/src/app/pages/subscription/edit-listing/edit-listing.component.scss
View File

@@ -1,3 +1,10 @@
.translate-y-5{
transform: translateY(5px);
}
}
.image {
width: 120px;
height: 30px;
border: 1px solid #6b7280;
padding: 1px 1px;
object-fit: contain;
}

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

@@ -25,16 +25,18 @@ import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { MessageService } from 'primeng/api';
import { AutoCompleteCompleteEvent, BusinessListing, ListingType, User } from '../../../../../../common-models/src/main.model';
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';
import { FileUploadModule } from 'primeng/fileupload';
import { CarouselModule } from 'primeng/carousel';
import { v4 as uuidv4 } from 'uuid';
@Component({
selector: 'create-listing',
standalone: true,
imports: [SharedModule,ArrayToStringPipe, InputNumberModule],
imports: [SharedModule,ArrayToStringPipe, InputNumberModule,FileUploadModule,CarouselModule],
providers:[MessageService],
templateUrl: './edit-listing.component.html',
styleUrl: './edit-listing.component.scss'
@@ -45,10 +47,30 @@ export class EditListingComponent {
location:string;
mode:'edit'|'create';
separator:'\n\n'
listing:ListingType = createGenericObject<BusinessListing>();
listing:ListingType
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user:User;
value:12;
maxFileSize=1000000;
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
}
];
constructor(public selectOptions:SelectOptionsService,
private router: Router,
private activatedRoute: ActivatedRoute,
@@ -68,23 +90,21 @@ export class EditListingComponent {
async ngOnInit(){
if (this.mode==='edit'){
this.listing=await lastValueFrom(this.listingsService.getListingById(this.id));
this.listing.price=123456
} else {
const uuid = sessionStorage.getItem('uuid')?sessionStorage.getItem('uuid'):uuidv4();
sessionStorage.setItem('uuid',uuid);
this.listing=createGenericObject<BusinessListing>();
this.listing.id=uuid
this.listing.temporary=true;
this.listing.userId=this.user.id
this.listing.listingsCategory='business';
}
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/${this.listing.listingsCategory}/uploadPropertyPicture/${this.listing.id}`;
this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
}
// updateSummary(value: string): void {
// const lines = value.split('\n');
// (<BusinessListing>this.listing).summary = lines.filter(l=>l.trim().length>0);
// }
// async update(id:string){
// await this.listingsService.update(this.listing,this.listing.id);
// this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing has been updated', life: 3000 });
// }
async save(){
await this.listingsService.save(this.listing);
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 });
}
@@ -94,4 +114,14 @@ export class EditListingComponent {
const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query,this.listing.state))
this.suggestions = result.map(r=>r.city).slice(0,5);
}
setImageToFallback(event: Event) {
(event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
}
async onUploadPropertyPicture(event:any){
// (<CommercialPropertyListing>this.listing).images=[];
// (<CommercialPropertyListing>this.listing).images.push(this.listing.id);
// await this.listingsService.save(this.listing)
this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
}
}

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

@@ -6,7 +6,7 @@ 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, User } from '../../../../../../common-models/src/main.model';
import { BusinessListing, ListingType, User } from '../../../../../../common-models/src/main.model';
@Component({
selector: 'app-favorites',
@@ -17,13 +17,13 @@ import { BusinessListing, User } from '../../../../../../common-models/src/main.
})
export class FavoritesComponent {
user: User;
listings: Array<BusinessListing> //= dataListings as unknown as Array<BusinessListing>;
favorites: Array<BusinessListing>
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();
}
async ngOnInit(){
this.listings=await lastValueFrom(this.listingsService.getAllListings());
// this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.favorites=this.listings.filter(l=>l.favoritesForUser?.includes(this.user.id));
}
}

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

@@ -18,20 +18,20 @@ import { BusinessListing, ListingType, User } from '../../../../../../common-mod
})
export class MyListingComponent {
user: User;
listings: Array<BusinessListing> //dataListings as unknown as Array<BusinessListing>;
myListings: Array<BusinessListing>
listings: Array<ListingType> =[]//dataListings as unknown as Array<BusinessListing>;
myListings: Array<ListingType>
constructor(public userService: UserService,private listingsService:ListingsService, private cdRef:ChangeDetectorRef,public selectOptions:SelectOptionsService,private confirmationService: ConfirmationService,private messageService: MessageService){
this.user=this.userService.getUser();
}
async ngOnInit(){
this.listings=await lastValueFrom(this.listingsService.getAllListings());
// this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.myListings=this.listings.filter(l=>l.userId===this.user.id);
}
async deleteListing(listing:ListingType){
await this.listingsService.deleteListing(listing.id);
this.listings=await lastValueFrom(this.listingsService.getAllListings());
await this.listingsService.deleteListing(listing.id,listing.listingsCategory);
// this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.myListings=this.listings.filter(l=>l.userId===this.user.id);
}

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

@@ -2,32 +2,35 @@ import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, lastValueFrom } from 'rxjs';
import { environment } from '../../environments/environment';
import { BusinessListing, ListingCriteria } from '../../../../common-models/src/main.model';
import { BusinessListing, ImageProperty, ListingCriteria, ListingType } from '../../../../common-models/src/main.model';
import onChange from 'on-change';
import { getSessionStorageHandler } from '../utils/utils';
@Injectable({
providedIn: 'root'
})
export class ListingsService {
private apiBaseUrl = environment.apiBaseUrl;
constructor(private http: HttpClient) { }
getAllListings():Observable<BusinessListing[]>{
return this.http.get<BusinessListing[]>(`${this.apiBaseUrl}/bizmatch/business-listings`);
constructor(private http: HttpClient) {
}
async getListings(criteria:ListingCriteria):Promise<BusinessListing[]>{
const result = await lastValueFrom(this.http.post<BusinessListing[]>(`${this.apiBaseUrl}/bizmatch/business-listings/search`,criteria));
// 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<ListingType[]>(`${this.apiBaseUrl}/bizmatch/listings/${criteria.listingsCategory}/search`,criteria));
return result;
}
getListingById(id:string):Observable<BusinessListing>{
return this.http.get<BusinessListing>(`${this.apiBaseUrl}/bizmatch/business-listings/${id}`);
getListingById(id:string,listingsCategory?:'business'|'professionals_brokers'|'commercialProperty'):Observable<ListingType>{
return this.http.get<ListingType>(`${this.apiBaseUrl}/bizmatch/listings/${listingsCategory}/${id}`);
}
// async update(listing:any,id:string){
// await lastValueFrom(this.http.put<BusinessListing>(`${this.apiBaseUrl}/bizmatch/listings/${id}`,listing));
// }
async save(listing:any){
await lastValueFrom(this.http.post<BusinessListing>(`${this.apiBaseUrl}/bizmatch/business-listings`,listing));
async save(listing:any,listingsCategory:'business'|'professionals_brokers'|'commercialProperty'){
await lastValueFrom(this.http.post<ListingType>(`${this.apiBaseUrl}/bizmatch/listings/${listingsCategory}`,listing));
}
async deleteListing(id:string){
await lastValueFrom(this.http.delete<BusinessListing>(`${this.apiBaseUrl}/bizmatch/business-listings/${id}`));
async deleteListing(id:string,listingsCategory:'business'|'professionals_brokers'|'commercialProperty'){
await lastValueFrom(this.http.delete<ListingType>(`${this.apiBaseUrl}/bizmatch/listings/${listingsCategory}/${id}`));
}
async getPropertyImages(id:string):Promise<ImageProperty[]>{
return await lastValueFrom(this.http.get<ImageProperty[]>(`${this.apiBaseUrl}/bizmatch/listings/commercialProperty/images/${id}`));
}
}

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

@@ -21,9 +21,12 @@ export class SelectOptionsService {
this.listingCategories = allSelectOptions.listingCategories;
this.categories = allSelectOptions.categories;
this.states = allSelectOptions.locations;
this.typesOfCommercialProperty = allSelectOptions.typesOfCommercialProperty
}
public typesOfBusiness: Array<KeyValueStyle>;
public typesOfCommercialProperty: Array<KeyValueStyle>;
public prices: Array<KeyValue>;
public listingCategories: Array<KeyValue>;