bizmatch-project/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts

import { Component, ViewChild } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
import { StyleClassModule } from 'primeng/styleclass';
import { SelectOptionsService } from '../../../services/select-options.service';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { TagModule } from 'primeng/tag';
import data from '../../../../assets/data/user.json';
import dataListings from '../../../../assets/data/listings.json';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
import { createGenericObject, getListingType } from '../../../utils/utils';
import { ListingsService } from '../../../services/listings.service';
import { lastValueFrom } from 'rxjs';

import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { ConfirmationService, MessageService } from 'primeng/api';
import { GeoResult, GeoService } from '../../../services/geo.service';
import { InputNumberComponent, InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
import { environment } from '../../../../environments/environment';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { CarouselModule } from 'primeng/carousel';
import { v4 as uuidv4 } from 'uuid';
import { DialogModule } from 'primeng/dialog';
import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
import { HttpClient, HttpEventType } from '@angular/common/http';
import { ImageService } from '../../../services/image.service'
import { LoadingService } from '../../../services/loading.service';
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
import { EditorModule } from 'primeng/editor';
import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
import { ImageCropperComponent } from '../../../components/image-cropper/image-cropper.component';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { CdkDragDrop, CdkDragEnter, CdkDragExit, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { AutoCompleteCompleteEvent, ImageProperty, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
@Component({
  selector: 'create-listing',
  standalone: true,
  imports: [SharedModule, ArrayToStringPipe, InputNumberModule, CarouselModule,
    DialogModule, AngularCropperjsModule, FileUploadModule, EditorModule, DynamicDialogModule, DragDropModule,
    ConfirmDialogModule, MixedCdkDragDropModule],
  providers: [MessageService, DialogService, ConfirmationService],
  templateUrl: './edit-business-listing.component.html',
  styleUrl: './edit-business-listing.component.scss'
})
export class EditBusinessListingComponent {
  @ViewChild(FileUpload) public fileUpload: FileUpload;
  listingsCategory = 'commercialProperty'
  category: string;
  location: string;
  mode: 'edit' | 'create';
  separator: '\n\n'
  listing: BusinessListing
  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
  user: User;
  maxFileSize = 3000000;
  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
    }
  ];
  config = { aspectRatio: 16 / 9 }
  editorModules = TOOLBAR_OPTIONS
  dialogRef: DynamicDialogRef | undefined;
  draggedImage: ImageProperty
  faTrash = faTrash;
  constructor(public selectOptions: SelectOptionsService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private listingsService: ListingsService,
    public userService: UserService,
    private messageService: MessageService,
    private geoService: GeoService,
    private imageService: ImageService,
    private loadingService: LoadingService,
    public dialogService: DialogService,
    private confirmationService: ConfirmationService) {
    this.user = this.userService.getUser();
    // Abonniere Router-Events, um den aktiven Link zu ermitteln
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.mode = event.url === '/createListing' ? 'create' : 'edit';
      }
    });

  }
  async ngOnInit() {
    if (this.mode === 'edit') {
      this.listing = await lastValueFrom(this.listingsService.getListingById(this.id));
    } else {
      const uuid = sessionStorage.getItem('uuid') ? sessionStorage.getItem('uuid') : uuidv4();
      sessionStorage.setItem('uuid', uuid);
      this.listing = createGenericObject<BusinessListing>();
      this.listing.id = uuid
      this.listing.userId = this.user.id
    }
    this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
    this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
  }

  async save() {
    sessionStorage.removeItem('uuid')
    await this.listingsService.save(this.listing, getListingType(this.listing));
    this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
  }

  suggestions: string[] | undefined;

  async search(event: AutoCompleteCompleteEvent) {
    const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query, this.listing.state))
    this.suggestions = result.map(r => r.city).slice(0, 5);
  }

  select(event: any) {
    const imageUrl = URL.createObjectURL(event.files[0]);
    this.dialogRef = this.dialogService.open(ImageCropperComponent, {
      data: {
        imageUrl: imageUrl,
        fileUpload: this.fileUpload,
        ratioVariable: false
      },
      header: 'Edit Image',
      width: '50vw',
      modal: true,
      closeOnEscape: true,
      keepInViewport: true,
      closable: false,
      breakpoints: {
        '960px': '75vw',
        '640px': '90vw'
      },
    });
    this.dialogRef.onClose.subscribe(cropper => {
      if (cropper){
        this.loadingService.startLoading('uploadImage');   
        cropper.getCroppedCanvas().toBlob(async (blob) => {
          this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.id).subscribe(async (event) => {
            if (event.type === HttpEventType.Response) {
              console.log('Upload abgeschlossen', event.body);
              this.loadingService.stopLoading('uploadImage');
              this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
            }
          }, error => console.error('Fehler beim Upload:', error));
        }, 'image/jpg');
        cropper.destroy();
      }
    })
  }

  deleteConfirm(imageName: string) {
    this.confirmationService.confirm({
      target: event.target as EventTarget,
      message: `Do you want to delete this image ${imageName}?`,
      header: 'Delete Confirmation',
      icon: 'pi pi-info-circle',
      acceptButtonStyleClass: "p-button-danger p-button-text",
      rejectButtonStyleClass: "p-button-text p-button-text",
      acceptIcon: "none",
      rejectIcon: "none",

      accept: async () => {
        await this.imageService.deleteListingImage(this.listing.id, imageName);
        this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
        this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)

      },
      reject: () => {
        // this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
        console.log('deny')
      }
    });
  }

  onDrop(event: { previousIndex: number; currentIndex: number }) {
    moveItemInArray(this.propertyImages, event.previousIndex, event.currentIndex);
    this.listingsService.changeImageOrder(this.listing.id, this.propertyImages)
  }

}