Fix for Issue #45

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

@@ -49,7 +49,7 @@
         </div>
 
         <div class="col-12 md:col-6">
-          <p-galleria [value]="propertyImages" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
+          <p-galleria [value]="listing.imageOrder" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
             <ng-template pTemplate="item" let-item>
               <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ item }}" style="width: 100%" />
             </ng-template>

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

@@ -27,7 +27,6 @@ import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../.
   styleUrl: './details-commercial-property-listing.component.scss',
 })
 export class DetailsCommercialPropertyListingComponent {
-  // listings: Array<BusinessListing>;
   responsiveOptions = [
     {
       breakpoint: '1199px',
@@ -49,7 +48,6 @@ export class DetailsCommercialPropertyListingComponent {
   listing: CommercialPropertyListing;
   criteria: ListingCriteria;
   mailinfo: MailInfo;
-  propertyImages: string[] = [];
   environment = environment;
   user: KeycloakUser;
   listingUser: User;
@@ -79,7 +77,6 @@ export class DetailsCommercialPropertyListingComponent {
     const token = await this.keycloakService.getToken();
     this.user = map2User(token);
     this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
-    this.propertyImages = await this.imageService.getPropertyImages(this.listing.imagePath, this.listing.serialId);
     this.listingUser = await this.userService.getById(this.listing.userId);
     this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
   }

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

@@ -111,9 +111,9 @@
               </div>
             </div>
           </div>
-          @if (propertyImages?.length>0){
+          @if (listing && listing.imageOrder?.length>0){
           <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) {
+            @for (image of listing.imageOrder; track listing.imageOrder) {
             <span cdkDropList mixedCdkDropList>
               <div cdkDrag mixedCdkDragSizeHelper class="image-wrap">
                 <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="shadow-2" cdkDrag />

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

@@ -63,7 +63,6 @@ export class EditCommercialPropertyListingComponent {
   user: User;
   maxFileSize = 3000000;
   environment = environment;
-  propertyImages: string[];
   responsiveOptions = [
     {
       breakpoint: '1199px',
@@ -137,7 +136,6 @@ export class EditCommercialPropertyListingComponent {
         this.listing.description = this.data?.description;
       }
     }
-    this.propertyImages = await this.imageService.getPropertyImages(this.listing.imagePath, this.listing.serialId);
   }
 
   async save() {
@@ -179,7 +177,6 @@ export class EditCommercialPropertyListingComponent {
               if (event.type === HttpEventType.Response) {
                 console.log('Upload abgeschlossen', event.body);
                 this.loadingService.stopLoading('uploadImage');
-                this.propertyImages = await this.imageService.getPropertyImages(this.listing.imagePath, this.listing.serialId);
                 this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
               }
             },
@@ -206,7 +203,6 @@ export class EditCommercialPropertyListingComponent {
         this.listing.imageOrder = this.listing.imageOrder.filter(item => item !== imageName);
         await Promise.all([this.imageService.deleteListingImage(this.listing.imagePath, this.listing.serialId, imageName), this.listingsService.save(this.listing, 'commercialProperty')]);
         this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
-        this.propertyImages = await this.imageService.getPropertyImages(this.listing.imagePath, this.listing.serialId);
       },
       reject: () => {
         // this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
@@ -216,8 +212,7 @@ export class EditCommercialPropertyListingComponent {
   }
 
   onDrop(event: { previousIndex: number; currentIndex: number }) {
-    moveItemInArray(this.propertyImages, event.previousIndex, event.currentIndex);
-    this.listingsService.changeImageOrder(this.listing.id, this.propertyImages);
+    moveItemInArray(this.listing.imageOrder, event.previousIndex, event.currentIndex);
   }
   changeListingCategory(value: 'business' | 'commercialProperty') {
     routeListingWithState(this.router, value, this.listing);

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

@@ -37,7 +37,4 @@ export class ImageService {
     const adjustedEmail = emailToDirName(email);
     await lastValueFrom(this.http.delete<[]>(`${this.apiBaseUrl}/bizmatch/image/profile/${adjustedEmail}`));
   }
-  async getPropertyImages(imagePath: string, serial: number): Promise<string[]> {
-    return await lastValueFrom(this.http.get<string[]>(`${this.apiBaseUrl}/bizmatch/image/${imagePath}/${serial}`));
-  }
 }

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

@@ -40,7 +40,4 @@ export class ListingsService {
   async deleteCommercialPropertyListing(id: string, imagePath: string) {
     await lastValueFrom(this.http.delete<ListingType>(`${this.apiBaseUrl}/bizmatch/listings/commercialProperty/${id}/${imagePath}`));
   }
-  async changeImageOrder(id: string, propertyImages: string[]): Promise<string[]> {
-    return await lastValueFrom(this.http.put<string[]>(`${this.apiBaseUrl}/bizmatch/listings/commercialProperty/imageOrder/${id}`, propertyImages));
-  }
 }