account, myListings and emailUs pages

bizmatch/src/app/components/image-crop-and-upload/image-crop-and-upload.component.ts

@@ -0,0 +1,74 @@
+import { Component, ElementRef, Input, output, ViewChild } from '@angular/core';
+import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
+import { UploadParams } from '../../../../../bizmatch-server/src/models/main.model';
+import { ImageService } from '../../services/image.service';
+import { ListingsService } from '../../services/listings.service';
+import { SharedModule } from '../../shared/shared/shared.module';
+export interface UploadReponse {
+  success: boolean;
+  type: 'uploadPropertyPicture' | 'uploadCompanyLogo' | 'uploadProfile';
+}
+@Component({
+  selector: 'app-image-crop-and-upload',
+  standalone: true,
+  imports: [SharedModule, ImageCropperComponent],
+  templateUrl: './image-crop-and-upload.component.html',
+  styleUrl: './image-crop-and-upload.component.scss',
+})
+export class ImageCropAndUploadComponent {
+  showModal = false;
+  imageChangedEvent: any = '';
+  croppedImage: Blob | null = null;
+  @Input() uploadParams: UploadParams;
+  uploadFinished = output<UploadReponse>();
+  @ViewChild('fileInput', { static: true }) fileInput!: ElementRef<HTMLInputElement>;
+
+  constructor(private imageService: ImageService, private listingsService: ListingsService) {}
+
+  ngOnInit() {}
+  ngOnChanges() {
+    this.openFileDialog();
+  }
+  openFileDialog() {
+    if (this.uploadParams) {
+      this.fileInput.nativeElement.click();
+    }
+  }
+
+  fileChangeEvent(event: any): void {
+    this.imageChangedEvent = event;
+    this.showModal = true;
+  }
+
+  imageCropped(event: ImageCroppedEvent) {
+    this.croppedImage = event.blob;
+  }
+
+  closeModal() {
+    this.imageChangedEvent = null;
+    this.croppedImage = null;
+    this.showModal = false;
+    this.uploadFinished.emit({ success: false, type: this.uploadParams.type });
+  }
+
+  uploadImage() {
+    if (this.croppedImage) {
+      this.imageService.uploadImage(this.croppedImage, this.uploadParams.type, this.uploadParams.imagePath, this.uploadParams.serialId).subscribe(
+        response => {
+          console.log('Upload successful', response);
+          this.closeModal();
+          this.uploadFinished.emit({ success: true, type: this.uploadParams.type });
+        },
+        error => {
+          console.error('Upload failed', error);
+          this.closeModal();
+          this.uploadFinished.emit({ success: false, type: this.uploadParams.type });
+        },
+      );
+    }
+  }
+
+  loadImageFailed() {
+    console.error('Load image failed');
+  }
+}