Umbau auf postgres 2. step

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

@@ -0,0 +1,207 @@
+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)
+  }
+
+}