242 lines
9.6 KiB
TypeScript
242 lines
9.6 KiB
TypeScript
import { ChangeDetectorRef, Component, ElementRef, 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, map2User, routeListingWithState } from '../../../utils/utils';
|
|
|
|
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
import { ViewportRuler } from '@angular/cdk/scrolling';
|
|
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
import { KeycloakService } from 'keycloak-angular';
|
|
import { NgxCurrencyDirective } from 'ngx-currency';
|
|
import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
|
|
import { QuillModule } from 'ngx-quill';
|
|
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 { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
|
|
import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
|
|
import { DragDropMixedComponent } from '../../../components/drag-drop-mixed/drag-drop-mixed.component';
|
|
import { MessageService } from '../../../components/message/message.service';
|
|
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, DragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule, ImageCropperComponent, ConfirmationComponent, DragDropMixedComponent],
|
|
providers: [],
|
|
templateUrl: './edit-commercial-property-listing.component.html',
|
|
styleUrl: './edit-commercial-property-listing.component.scss',
|
|
})
|
|
export class EditCommercialPropertyListingComponent {
|
|
@ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
|
|
|
|
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;
|
|
|
|
draggedImage: ImageProperty;
|
|
faTrash = faTrash;
|
|
suggestions: string[] | undefined;
|
|
data: BusinessListing;
|
|
userId: string;
|
|
typesOfCommercialProperty = [];
|
|
env = environment;
|
|
ts = new Date().getTime();
|
|
quillModules = {
|
|
toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
|
|
};
|
|
showModal = false;
|
|
imageChangedEvent: any = '';
|
|
croppedImage: Blob | null = null;
|
|
|
|
constructor(
|
|
public selectOptions: SelectOptionsService,
|
|
private router: Router,
|
|
private activatedRoute: ActivatedRoute,
|
|
private listingsService: ListingsService,
|
|
public userService: UserService,
|
|
|
|
private geoService: GeoService,
|
|
private imageService: ImageService,
|
|
private loadingService: LoadingService,
|
|
|
|
private route: ActivatedRoute,
|
|
private keycloakService: KeycloakService,
|
|
private cdr: ChangeDetectorRef,
|
|
private confirmationService: ConfirmationService,
|
|
private messageService: MessageService,
|
|
private viewportRuler: ViewportRuler,
|
|
) {
|
|
// 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'))) as CommercialPropertyListing;
|
|
} else {
|
|
this.listing = createDefaultCommercialPropertyListing();
|
|
const listingUser = await this.userService.getByMail(keycloakUser.email);
|
|
this.listing.email = listingUser.email;
|
|
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)) as CommercialPropertyListing;
|
|
this.router.navigate(['editCommercialPropertyListing', this.listing.id]);
|
|
this.messageService.addMessage({ severity: 'success', text: 'Listing changes have been persisted', duration: 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);
|
|
}
|
|
openFileDialog() {
|
|
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;
|
|
}
|
|
|
|
uploadImage() {
|
|
if (this.croppedImage) {
|
|
this.imageService.uploadImage(this.croppedImage, 'uploadPropertyPicture', this.listing.imagePath, this.listing.serialId).subscribe(
|
|
async () => {
|
|
this.listing = (await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'))) as CommercialPropertyListing;
|
|
this.closeModal();
|
|
},
|
|
error => {
|
|
console.error('Upload failed', error);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
async deleteConfirm(imageName: string) {
|
|
const confirmed = await this.confirmationService.showConfirmation('Are you sure you want to delete this image?');
|
|
if (confirmed) {
|
|
this.listing.imageOrder = this.listing.imageOrder.filter(item => item !== imageName);
|
|
await this.imageService.deleteListingImage(this.listing.imagePath, this.listing.serialId, imageName);
|
|
await this.listingsService.save(this.listing, 'commercialProperty');
|
|
this.listing = (await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'))) as CommercialPropertyListing;
|
|
this.messageService.addMessage({ severity: 'success', text: 'Image has been deleted', duration: 3000 });
|
|
} else {
|
|
console.log('deny');
|
|
}
|
|
}
|
|
|
|
changeListingCategory(value: 'business' | 'commercialProperty') {
|
|
routeListingWithState(this.router, value, this.listing);
|
|
}
|
|
imageOrderChanged(imageOrder: string[]) {
|
|
this.listing.imageOrder = imageOrder;
|
|
}
|
|
|
|
// 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();
|
|
// }
|
|
// });
|
|
// });
|
|
// }
|
|
}
|