drag & drop renewed, imageCropper revisited, imageOrder persisted, css quirks

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

@@ -80,13 +80,14 @@ export class FileService {
       return false
     }
   }
-  async storePropertyPicture(file: Express.Multer.File, listingId: string) {
+  async storePropertyPicture(file: Express.Multer.File, listingId: string) : Promise<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);
     await this.resizeImageToAVIF(file.buffer,150 * 1024,imageName,directory);
+    return `${imageName}.avif`
   }
   async getNextImageName(directory) {
     try {

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

@@ -4,11 +4,15 @@ import { Logger } from 'winston';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { FileService } from '../file/file.service.js';
 import { SelectOptionsService } from '../select-options/select-options.service.js';
+import { ListingsService } from '../listings/listings.service.js';
+import { CommercialPropertyListing } from 'src/models/main.model.js';
+import { Entity, EntityData } from 'redis-om';
 
 @Controller('image')
 export class ImageController {
     
     constructor(private fileService:FileService,
+      private listingService:ListingsService,
       @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
       private selectOptions:SelectOptionsService) {
     }
@@ -16,7 +20,8 @@ export class ImageController {
     @Post('uploadPropertyPicture/:id')
     @UseInterceptors(FileInterceptor('file'),)
     async uploadPropertyPicture(@UploadedFile() file: Express.Multer.File,@Param('id') id:string) {
-      await this.fileService.storePropertyPicture(file,id);
+      const imagename = await this.fileService.storePropertyPicture(file,id);
+      await this.listingService.addImage(id,imagename);
     }
 
     @Post('uploadProfile/:id')
@@ -33,7 +38,16 @@ export class ImageController {
     
     @Get(':id')
     async getPropertyImagesById(@Param('id') id:string): Promise<any> {
-      return await this.fileService.getPropertyImages(id);
+      const result = await this.listingService.getCommercialPropertyListingById(id);
+      const listing = result as CommercialPropertyListing;
+      if (listing.imageOrder){
+        return listing.imageOrder
+      } else {
+        const imageOrder = await this.fileService.getPropertyImages(id);
+        listing.imageOrder=imageOrder;
+        this.listingService.saveListing(listing);
+        return imageOrder;
+      }
     }
     @Get('profileImages/:userids')
     async getProfileImagesForUsers(@Param('userids') userids:string): Promise<any> {
@@ -43,9 +57,11 @@ export class ImageController {
     async getCompanyLogosForUsers(@Param('userids') userids:string): Promise<any> {
       return await this.fileService.getCompanyLogosForUsers(userids);
     }
+    
     @Delete('propertyPicture/:listingid/:imagename')
     async deletePropertyImagesById(@Param('listingid') listingid:string,@Param('imagename') imagename:string): Promise<any> {
-      this.fileService.deleteImage(`pictures/property/${listingid}/${imagename}`)
+      this.fileService.deleteImage(`pictures/property/${listingid}/${imagename}`);
+      await this.listingService.deleteImage(listingid,imagename);
     }
     @Delete('logo/:userid/')
     async deleteLogoImagesById(@Param('id') id:string): Promise<any> {

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

@@ -3,8 +3,11 @@ import { ImageController } from './image.controller.js';
 import { ImageService } from './image.service.js';
 import { FileService } from '../file/file.service.js';
 import { SelectOptionsService } from '../select-options/select-options.service.js';
+import { ListingsService } from '../listings/listings.service.js';
+import { ListingsModule } from '../listings/listings.module.js';
 
 @Module({
+  imports: [ListingsModule],
   controllers: [ImageController],
   providers: [ImageService,FileService,SelectOptionsService]
 })

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

@@ -1,9 +1,10 @@
-import { Body, Controller, Delete, Get, Inject, Param, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Inject, Param, Post, Put, 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';
+import { CommercialPropertyListing, ImageProperty } from 'src/models/main.model.js';
 
 @Controller('listings/commercialProperty')
 export class CommercialPropertyListingsController {
@@ -21,7 +22,11 @@ export class CommercialPropertyListingsController {
     find(@Body() criteria: any): any {
         return this.listingsService.findCommercialPropertyListings(criteria);
     }
-  
+
+    @Put('imageOrder/:id')
+    async changeImageOrder(@Param('id') id:string,@Body() imageOrder: ImageProperty[]) {
+        this.listingsService.updateImageOrder(id, imageOrder)
+    }
     /**
      * @param listing creates a new listing
      */

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

@@ -12,6 +12,7 @@ import { UserService } from '../user/user.service.js';
 @Module({
     imports: [RedisModule],
     controllers: [BusinessListingsController, CommercialPropertyListingsController,UnknownListingsController,BrokerListingsController],
-    providers: [ListingsService,FileService,UserService]
+    providers: [ListingsService,FileService,UserService],
+    exports: [ListingsService],
   })
 export class ListingsModule {}

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

@@ -3,7 +3,8 @@ import {
   BusinessListing,
   CommercialPropertyListing,
   ListingCriteria,
-  ListingType
+  ListingType,
+  ImageProperty
 } from '../models/main.model.js';
 import { convertStringToNullUndefined } from '../utils.js';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
@@ -77,8 +78,8 @@ export class ListingsService {
     }
     return result;
   }
-  async getCommercialPropertyListingById(id: string) {
-    return await this.commercialPropertyListingRepository.fetch(id)
+  async getCommercialPropertyListingById(id: string): Promise<CommercialPropertyListing>{
+    return await this.commercialPropertyListingRepository.fetch(id) as unknown as CommercialPropertyListing;
   }
   async getBusinessListingById(id: string) {
     return await this.businessListingRepository.fetch(id)
@@ -134,4 +135,23 @@ export class ListingsService {
     }
     return listings
   }
+
+  async updateImageOrder(id:string,imageOrder: ImageProperty[]){
+    const listing = await this.getCommercialPropertyListingById(id) as unknown as CommercialPropertyListing
+    listing.imageOrder=imageOrder;
+    this.saveListing(listing);
+  }
+  async deleteImage(listingid:string,name:string,){
+    const listing = await this.getCommercialPropertyListingById(listingid) as unknown as CommercialPropertyListing
+    const index = listing.imageOrder.findIndex(im=>im.name===name);
+    if (index>-1){
+      listing.imageOrder.splice(index,1);
+      this.saveListing(listing);
+    }
+  }
+  async addImage(id:string,imagename: string){
+    const listing = await this.getCommercialPropertyListingById(id) as unknown as CommercialPropertyListing
+    listing.imageOrder.push({name:imagename,code:'',id:''});
+    this.saveListing(listing);
+  }
 }