Ansichten verbessert - 1. Teil

bizmatch-server/.gitignore

@@ -55,4 +55,4 @@ pids
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
-public
+pictures

bizmatch-server/src/account/account.controller.ts

@@ -6,9 +6,14 @@ import { FileService } from '../file/file.service.js';
 export class AccountController {
   constructor(private fileService:FileService){}
 
-  @Post('uploadPhoto/:id')
+  @Post('uploadProfile/:id')
   @UseInterceptors(FileInterceptor('file'),)
-  uploadFile(@UploadedFile() file: Express.Multer.File,@Param('id') id:string) {
-    this.fileService.storeFile(file,id);
+  uploadProfile(@UploadedFile() file: Express.Multer.File,@Param('id') id:string) {
+    this.fileService.storeProfilePicture(file,id);
+  }
+  @Post('uploadCompanyLogo/:id')
+  @UseInterceptors(FileInterceptor('file'),)
+  uploadCompanyLogo(@UploadedFile() file: Express.Multer.File,@Param('id') id:string) {
+    this.fileService.storeCompanyLogo(file,id);
   }
 }

bizmatch-server/src/app.module.ts

@@ -31,7 +31,7 @@ const __dirname = path.dirname(__filename);
 @Module({
   imports: [ConfigModule.forRoot(), MailModule, AuthModule,
     ServeStaticModule.forRoot({
-      rootPath: join(__dirname, '..', 'public'), // `public` ist das Verzeichnis, wo Ihre statischen Dateien liegen
+      rootPath: join(__dirname, '..', 'pictures'), // `public` ist das Verzeichnis, wo Ihre statischen Dateien liegen
     }),
     WinstonModule.forRoot({
         transports: [

bizmatch-server/src/file/file.service.ts

@@ -4,6 +4,7 @@ import { join } from 'path';
 import { fileURLToPath } from 'url';
 import path from 'path';
 import fs from 'fs-extra';
+import { ImageProperty } from 'src/models/main.model.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -13,6 +14,10 @@ export class FileService {
   private subscriptions: any;
   constructor() {
     this.loadSubscriptions();
+    fs.ensureDirSync(`./pictures`);
+    fs.ensureDirSync(`./pictures/profile`);
+    fs.ensureDirSync(`./pictures/logo`);
+    fs.ensureDirSync(`./pictures/property`);
   }
   private loadSubscriptions(): void {
     const filePath = join(__dirname,'..', 'assets', 'subscriptions.json');
@@ -22,8 +27,49 @@ export class FileService {
   getSubscriptions() {
     return this.subscriptions
   }
-  async storeFile(file: Express.Multer.File,id: string){
+  async storeProfilePicture(file: Express.Multer.File,userId: string){
     const suffix = file.mimetype.includes('png')?'png':'jpg'
-    await fs.outputFile(`./public/profile_${id}`,file.buffer);
+    await fs.outputFile(`./pictures/profile/${userId}`,file.buffer);
+  }
+  async storeCompanyLogo(file: Express.Multer.File,userId: string){
+    const suffix = file.mimetype.includes('png')?'png':'jpg'
+    await fs.outputFile(`./pictures/logo/${userId}`,file.buffer);
+  }
+  async getPropertyImages(listingId: string):Promise<ImageProperty[]>{
+    const result:ImageProperty[]=[]
+    const directory = `./pictures/property/${listingId}`
+    if (fs.existsSync(directory)){
+      const files = await fs.readdir(directory);
+      files.forEach(f=>{
+        const image:ImageProperty={name:f,id:'',code:''};
+        result.push(image)
+      })
+      return result;
+    } else {
+      return []
+    }
+
+  }
+  async storePropertyPicture(file: Express.Multer.File,listingId: string){
+    const suffix = file.mimetype.includes('png')?'png':'jpg'
+    const directory = `./pictures/property/${listingId}`
+    fs.ensureDirSync(`${directory}`);
+    const imageName = await this.getNextImageName(directory);
+    await fs.outputFile(`${directory}/${imageName}`,file.buffer);
+  }
+  async getNextImageName(directory) {
+    try {
+      const files = await fs.readdir(directory);
+      const imageNumbers = files
+        .map(file => parseInt(file, 10)) // Dateinamen direkt in Zahlen umwandeln
+        .filter(number => !isNaN(number)) // Sicherstellen, dass die Konvertierung gültig ist
+        .sort((a, b) => a - b); // Aufsteigend sortieren
+  
+      const nextNumber = imageNumbers.length > 0 ? Math.max(...imageNumbers) + 1 : 1;
+      return `${nextNumber}`; // Keine Endung für den Dateinamen
+    } catch (error) {
+      console.error('Fehler beim Lesen des Verzeichnisses:', error);
+      return null;
+    }
   }
 }

bizmatch-server/src/listings/broker-listings.controller.ts

@@ -0,0 +1,21 @@
+import { Body, Controller, Delete, Get, Inject, Param, Post, Put } from '@nestjs/common';
+import { FileService } from '../file/file.service.js';
+import { convertStringToNullUndefined } from '../utils.js';
+import { ListingsService } from './listings.service.js';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { Logger } from 'winston';
+import { UserService } from '../user/user.service.js';
+
+@Controller('listings/professionals_brokers')
+export class BrokerListingsController {
+ 
+  constructor(private readonly userService:UserService,@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {
+  }
+
+  @Post('search')
+  find(@Body() criteria: any): any {
+    return this.userService.findUser(criteria);
+  }
+
+}
+

bizmatch-server/src/listings/business-listings.controller.ts

@@ -5,7 +5,7 @@ import { ListingsService } from './listings.service.js';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
 
-@Controller('business-listings')
+@Controller('listings/business')
 export class BusinessListingsController {
  
   constructor(private readonly listingsService:ListingsService,@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {

bizmatch-server/src/listings/commercial-property-listings.controller.ts

@@ -1,12 +1,14 @@
-import { Body, Controller, Delete, Get, Inject, Param, Post } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Inject, Param, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
 import { ListingsService } from './listings.service.js';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
+import { FileInterceptor } from '@nestjs/platform-express';
+import { FileService } from '../file/file.service.js';
 
-@Controller('commercial-property-listings')
+@Controller('listings/commercialProperty')
 export class CommercialPropertyListingsController {
     
-    constructor(private readonly listingsService:ListingsService,@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {
+    constructor(private readonly listingsService:ListingsService,private fileService:FileService,@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {
     }
     
     @Get()
@@ -41,4 +43,14 @@ export class CommercialPropertyListingsController {
       this.listingsService.deleteCommercialPropertyListing(id)
     }
     
+    @Post('uploadPropertyPicture/:id')
+    @UseInterceptors(FileInterceptor('file'),)
+    uploadFile(@UploadedFile() file: Express.Multer.File,@Param('id') id:string) {
+      this.fileService.storePropertyPicture(file,id);
+    }
+
+    @Get('images/:id')
+    getPropertyImagesById(@Param('id') id:string): any {
+      return this.fileService.getPropertyImages(id);
+    }
 }

bizmatch-server/src/listings/listings.module.ts

@@ -3,10 +3,15 @@ import { BusinessListingsController } from './business-listings.controller.js';
 import { ListingsService } from './listings.service.js';
 import { CommercialPropertyListingsController } from './commercial-property-listings.controller.js';
 import { RedisModule } from '../redis/redis.module.js';
+import { FileService } from '../file/file.service.js';
+import { UnknownListingsController } from './unknown-listings.controller.js';
+import { UserModule } from '../user/user.module.js';
+import { BrokerListingsController } from './broker-listings.controller.js';
+import { UserService } from '../user/user.service.js';
 
 @Module({
     imports: [RedisModule],
-    controllers: [BusinessListingsController, CommercialPropertyListingsController],
-    providers: [ListingsService]
+    controllers: [BusinessListingsController, CommercialPropertyListingsController,UnknownListingsController,BrokerListingsController],
+    providers: [ListingsService,FileService,UserService]
   })
 export class ListingsModule {}

bizmatch-server/src/listings/listings.service.ts

@@ -67,6 +67,7 @@ export class ListingsService {
   async saveListing(listing: BusinessListing | CommercialPropertyListing) {
     const repo=listing.listingsCategory==='business'?this.businessListingRepository:this.commercialPropertyListingRepository;
     let result
+    listing.temporary=false;
     if (listing.id){
       result = await repo.save(listing.id,listing as any)
     } else {

bizmatch-server/src/listings/unknown-listings.controller.ts

@@ -0,0 +1,26 @@
+import { Body, Controller, Delete, Get, Inject, Param, Post, Put } from '@nestjs/common';
+import { FileService } from '../file/file.service.js';
+import { convertStringToNullUndefined } from '../utils.js';
+import { ListingsService } from './listings.service.js';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { Logger } from 'winston';
+
+@Controller('listings/undefined')
+export class UnknownListingsController {
+ 
+  constructor(private readonly listingsService:ListingsService,@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {
+  }
+
+
+  @Get(':id')
+  async findById(@Param('id') id:string): Promise<any> {
+    const result = await this.listingsService.getBusinessListingById(id);
+    if (result.id){
+      return result
+    } else {
+      return await this.listingsService.getCommercialPropertyListingById(id);
+    }
+  }
+
+}
+

bizmatch-server/src/select-options/select-options.controller.ts

@@ -12,6 +12,7 @@ export class SelectOptionsController {
             listingCategories:this.selectOptionsService.listingCategories,
             categories:this.selectOptionsService.categories,
             locations:this.selectOptionsService.locations,
+            typesOfCommercialProperty:this.selectOptionsService.typesOfCommercialProperty,
         }
     }
 }

bizmatch-server/src/select-options/select-options.service.ts

@@ -20,6 +20,15 @@ export class SelectOptionsService {
       { name: 'Manufacturing', value: '12' , icon:'fa-solid fa-industry',bgColorClass:'bg-red-100',textColorClass:'text-red-600'},
       { name: 'Food and Restaurant', value: '13' , icon:'fa-solid fa-utensils',bgColorClass:'bg-primary-100',textColorClass:'text-primary-600'},
     ];
+    public typesOfCommercialProperty: Array<KeyValueStyle> = [
+      { name: 'Retail', value: '100' , icon:'fa-solid fa-money-bill-wave',bgColorClass:'bg-pink-100',textColorClass:'text-pink-600'},
+      { name: 'Land', value: '101' , icon:'pi pi-building',bgColorClass:'bg-blue-100',textColorClass:'text-blue-600'},
+      { name: 'Industrial', value: '102', icon:'fa-solid fa-industry',bgColorClass:'bg-yellow-100',textColorClass:'text-yellow-600'},
+      { name: 'Office', value: '103' , icon:'fa-solid fa-umbrella',bgColorClass:'bg-teal-100',textColorClass:'text-teal-600'},
+      { name: 'Mixed Use', value: '104' , icon:'fa-solid fa-rectangle-ad',bgColorClass:'bg-orange-100',textColorClass:'text-orange-600'},
+      { name: 'Multifamily', value: '105' , icon:'pi pi-star',bgColorClass:'bg-purple-100',textColorClass:'text-purple-600'},
+      { name: 'Uncategorized', value: '106' , icon:'pi pi-question',bgColorClass:'bg-cyan-100',textColorClass:'text-cyan-600'},
+    ];
     public prices: Array<KeyValue> = [
       { name: '$100K', value: '100000' },
       { name: '$250K', value: '250000' },

bizmatch-server/src/user/user.service.ts

@@ -1,7 +1,7 @@
 import { Get, Inject, Injectable, Param } from '@nestjs/common';
 import { createClient } from 'redis';
 import { Entity, Repository, Schema } from 'redis-om';
-import { User } from '../models/main.model.js';
+import { ListingCriteria, User } from '../models/main.model.js';
 import { REDIS_CLIENT } from '../redis/redis.module.js';
 import { UserEntity } from '../models/server.model.js';
 
@@ -26,6 +26,7 @@ export class UserService {
     })
     constructor(@Inject(REDIS_CLIENT) private readonly redis: any){
         this.userRepository = new Repository(this.userSchema, redis)
+        this.userRepository.createIndex();
     }
     async getUserById( id:string){
         return await this.userRepository.fetch(id);
@@ -33,5 +34,8 @@ export class UserService {
     async saveUser(user:any):Promise<UserEntity>{
        return await this.userRepository.save(user.id,user) as UserEntity
     }
+    async findUser(criteria:ListingCriteria){
+        return await this.userRepository.search().return.all();
+    }
     
 }

bizmatch/src/app/pages/details/details.component.ts

@@ -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])

bizmatch/src/app/pages/listings/listings.component.html

@@ -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">

bizmatch/src/app/pages/subscription/account/account.component.ts

@@ -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

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

@@ -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">

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

@@ -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;
+  }

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

@@ -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)
+  }
 }

bizmatch/src/app/pages/subscription/favorites/favorites.component.ts

@@ -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));
   }
 }

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

@@ -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);
   }
 

bizmatch/src/app/services/listings.service.ts

@@ -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}`));
   }
 }

bizmatch/src/app/services/select-options.service.ts

@@ -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>;

common-models/src/main.model.ts

@@ -16,22 +16,23 @@ export type SelectOption<T = number> = {
 export interface Listing {
     id: string;
     userId: string;
+    type: string; //enum
     title: string;
     description: Array<string>;
     country: string;
     city: string,
     state: string;//enum
+    price?: number;
     favoritesForUser:Array<string>;
     hideImage?:boolean;
     draft?:boolean;
     created:Date;
     updated:Date;
+    temporary:boolean;
 }
 export interface BusinessListing extends Listing {
     listingsCategory: 'business'; //enum
     // summary: Array<string>;
-    type: string; //enum
-    price?: number;
     realEstateIncluded?: boolean;
     leasedLocation?:boolean;
     franchiseResale?:boolean;
@@ -46,6 +47,18 @@ export interface BusinessListing extends Listing {
     brokerLicencing?: string;
     internals?: string;
 }
+export interface CommercialPropertyListing extends Listing {
+    listingsCategory: 'commercialProperty'; //enum
+    images:string[];
+    zipCode:number;
+    county:string
+    email?: string;
+    website?: string;
+    phoneNumber?: string;
+}
+export type ListingType =
+  | BusinessListing
+  | CommercialPropertyListing;
 // export interface ProfessionalsBrokersListing extends Listing {
 //     listingsCategory: 'professionals_brokers'; //enum
 //     summary: string;
@@ -54,16 +67,6 @@ export interface BusinessListing extends Listing {
 //     website?: string;
 //     category?: 'Professionals' | 'Broker';
 // }
-export interface CommercialPropertyListing extends Listing {
-    listingsCategory: 'commercialProperty'; //enum
-    email?: string;
-    website?: string;
-    phoneNumber?: string;
-}
-export type ListingType =
-  | BusinessListing
-  | CommercialPropertyListing;
-
 export interface ListingCriteria {
    type:string,
    state:string,
@@ -177,3 +180,8 @@ export interface MailInfo {
     state?: string;
     comments?: string;
   }
+  export interface ImageProperty {
+    id:string;
+    code:string;
+    name:string;
+  }