Ansichten verbessert - 1. Teil

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