225 lines
9.0 KiB
TypeScript
225 lines
9.0 KiB
TypeScript
import { Component, ViewChild } from '@angular/core';
|
|
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
|
|
import { lastValueFrom } from 'rxjs';
|
|
import { ListingsService } from '../../../services/listings.service';
|
|
import { SelectOptionsService } from '../../../services/select-options.service';
|
|
import { createDefaultCommercialPropertyListing, getDialogWidth, getImageDimensions, map2User, routeListingWithState } from '../../../utils/utils';
|
|
|
|
import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
import { HttpEventType } from '@angular/common/http';
|
|
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
|
import { AngularCropperjsModule } from 'angular-cropperjs';
|
|
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
|
|
import { KeycloakService } from 'keycloak-angular';
|
|
import { ConfirmationService, MessageService } from 'primeng/api';
|
|
import { CarouselModule } from 'primeng/carousel';
|
|
import { ConfirmDialogModule } from 'primeng/confirmdialog';
|
|
import { DialogModule } from 'primeng/dialog';
|
|
import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
|
|
import { EditorModule } from 'primeng/editor';
|
|
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
|
|
import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
|
|
import { AutoCompleteCompleteEvent, ImageProperty, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
|
|
import { environment } from '../../../../environments/environment';
|
|
import { ImageCropperComponent } from '../../../components/image-cropper/image-cropper.component';
|
|
import { InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
|
|
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
|
|
import { GeoService } from '../../../services/geo.service';
|
|
import { ImageService } from '../../../services/image.service';
|
|
import { LoadingService } from '../../../services/loading.service';
|
|
import { UserService } from '../../../services/user.service';
|
|
import { SharedModule } from '../../../shared/shared/shared.module';
|
|
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
|
|
@Component({
|
|
selector: 'commercial-property-listing',
|
|
standalone: true,
|
|
imports: [
|
|
SharedModule,
|
|
ArrayToStringPipe,
|
|
InputNumberModule,
|
|
CarouselModule,
|
|
DialogModule,
|
|
AngularCropperjsModule,
|
|
FileUploadModule,
|
|
EditorModule,
|
|
DynamicDialogModule,
|
|
DragDropModule,
|
|
ConfirmDialogModule,
|
|
MixedCdkDragDropModule,
|
|
],
|
|
providers: [MessageService, DialogService, ConfirmationService],
|
|
templateUrl: './edit-commercial-property-listing.component.html',
|
|
styleUrl: './edit-commercial-property-listing.component.scss',
|
|
})
|
|
export class EditCommercialPropertyListingComponent {
|
|
@ViewChild(FileUpload) public fileUpload: FileUpload;
|
|
listingsCategory = 'commercialProperty';
|
|
category: string;
|
|
location: string;
|
|
mode: 'edit' | 'create';
|
|
separator: '\n\n';
|
|
listing: CommercialPropertyListing;
|
|
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
|
|
user: User;
|
|
maxFileSize = 3000000;
|
|
environment = environment;
|
|
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;
|
|
suggestions: string[] | undefined;
|
|
data: BusinessListing;
|
|
userId: string;
|
|
typesOfCommercialProperty = [];
|
|
env = environment;
|
|
ts = new Date().getTime();
|
|
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,
|
|
private route: ActivatedRoute,
|
|
private keycloakService: KeycloakService,
|
|
) {
|
|
// Abonniere Router-Events, um den aktiven Link zu ermitteln
|
|
this.router.events.subscribe(event => {
|
|
if (event instanceof NavigationEnd) {
|
|
this.mode = event.url === '/createCommercialPropertyListing' ? 'create' : 'edit';
|
|
}
|
|
});
|
|
this.route.data.subscribe(async () => {
|
|
if (this.router.getCurrentNavigation().extras.state) {
|
|
this.data = this.router.getCurrentNavigation().extras.state['data'];
|
|
}
|
|
});
|
|
this.typesOfCommercialProperty = selectOptions.typesOfCommercialProperty.map(e => {
|
|
return { name: e.name, value: parseInt(e.value) };
|
|
});
|
|
}
|
|
async ngOnInit() {
|
|
const token = await this.keycloakService.getToken();
|
|
const keycloakUser = map2User(token);
|
|
if (this.mode === 'edit') {
|
|
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
|
|
} else {
|
|
this.listing = createDefaultCommercialPropertyListing();
|
|
const listingUser = await this.userService.getByMail(keycloakUser.email);
|
|
this.listing.userId = listingUser.id;
|
|
this.listing.imagePath = `${emailToDirName(keycloakUser.email)}`;
|
|
if (this.data) {
|
|
this.listing.title = this.data?.title;
|
|
this.listing.description = this.data?.description;
|
|
}
|
|
}
|
|
}
|
|
|
|
async save() {
|
|
this.listing = await this.listingsService.save(this.listing, this.listing.listingsCategory);
|
|
this.router.navigate(['editCommercialPropertyListing', this.listing.id]);
|
|
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
|
|
}
|
|
|
|
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]);
|
|
getImageDimensions(imageUrl).then(dimensions => {
|
|
const dialogWidth = getDialogWidth(dimensions);
|
|
this.dialogRef = this.dialogService.open(ImageCropperComponent, {
|
|
data: {
|
|
imageUrl: imageUrl,
|
|
fileUpload: this.fileUpload,
|
|
ratioVariable: false,
|
|
},
|
|
header: 'Edit Image',
|
|
width: dialogWidth,
|
|
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.imagePath, this.listing.serialId).subscribe(
|
|
async event => {
|
|
if (event.type === HttpEventType.Response) {
|
|
this.ts = new Date().getTime();
|
|
console.log('Upload abgeschlossen', event.body);
|
|
this.loadingService.stopLoading('uploadImage');
|
|
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
|
|
}
|
|
},
|
|
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 () => {
|
|
this.listing.imageOrder = this.listing.imageOrder.filter(item => item !== imageName);
|
|
await Promise.all([this.imageService.deleteListingImage(this.listing.imagePath, this.listing.serialId, imageName), this.listingsService.save(this.listing, 'commercialProperty')]);
|
|
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
|
|
},
|
|
reject: () => {
|
|
// this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
|
|
console.log('deny');
|
|
},
|
|
});
|
|
}
|
|
|
|
onDrop(event: { previousIndex: number; currentIndex: number }) {
|
|
moveItemInArray(this.listing.imageOrder, event.previousIndex, event.currentIndex);
|
|
}
|
|
changeListingCategory(value: 'business' | 'commercialProperty') {
|
|
routeListingWithState(this.router, value, this.listing);
|
|
}
|
|
}
|