account, myListings and emailUs pages

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

@@ -0,0 +1,12 @@
+<!-- Modal -->
+<div *ngIf="showModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
+  <div class="bg-white p-5 rounded-lg shadow-xl" style="width: 90%; max-width: 600px">
+    <h3 class="text-lg font-semibold mb-4">Crop Image</h3>
+    <image-cropper (loadImageFailed)="loadImageFailed()" [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="false" format="png" (imageCropped)="imageCropped($event)"></image-cropper>
+    <div class="mt-4 flex justify-end">
+      <button (click)="closeModal()" class="mr-2 px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">Cancel</button>
+      <button (click)="uploadImage()" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Upload</button>
+    </div>
+  </div>
+</div>
+<input type="file" #fileInput style="display: none" (change)="fileChangeEvent($event)" accept="image/*" />

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

@@ -0,0 +1,6 @@
+::ng-deep image-cropper {
+  justify-content: center;
+  & > div {
+    width: unset !important;
+  }
+}

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