aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

Update Angular 18, ng-select, quill editor, ngx-currency, Umbau business-detail, edit-business, commercial-lsitings, remove ng-prime

Browse Source
This commit is contained in:
Andreas Knuth
2024-07-04 17:51:35 +02:00
parent 9228cbebbe
commit 5fa2dd60fa
49 changed files with 356 additions and 2972 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
bizmatch/src/app/pages/subscription/account/account.component.html
View File

@@ -1,4 +1,4 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<!-- <div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
@@ -114,7 +114,6 @@
<p-button class="mr-1" icon="pi pi-plus" severity="success" (click)="addArea()"></p-button>
<p-button icon="pi pi-minus" severity="danger" (click)="removeArea()" [disabled]="user.areasServed?.length < 2"></p-button>
<span class="text-xs">&nbsp;(Add more Areas or remove existing ones.)</span>
<!-- <button pButton pRipple label="Add Licence" class="w-auto" (click)="addLicence()"></button> -->
</div>
<div>
<label for="companyOverview" class="block font-medium text-900 mb-2">Licensed In</label>
@@ -143,7 +142,6 @@
<p-button class="mr-1" icon="pi pi-plus" severity="success" (click)="addLicence()"></p-button>
<p-button icon="pi pi-minus" severity="danger" (click)="removeLicence()" [disabled]="user.licensedIn?.length < 2"></p-button>
<span class="text-xs">&nbsp;(Add more licenses or remove existing ones.)</span>
<!-- <button pButton pRipple label="Add Licence" class="w-auto" (click)="addLicence()"></button> -->
</div>
} }
<div>
@@ -160,7 +158,6 @@
<img src="{{ companyLogoUrl }}" class="rounded-profile" />
<fa-icon [icon]="faTrash" (click)="deleteConfirm('logo')"></fa-icon>
</div>
<!-- <img src="profile/{{ user.id }}.avif" class="rounded-profile" /> -->
} @else {
<img src="assets/images/placeholder.png" class="rounded-profile" />
}
@@ -263,4 +260,4 @@
</div>
</div>
</div>
<p-confirmDialog></p-confirmDialog>
<p-confirmDialog></p-confirmDialog> -->

170
bizmatch/src/app/pages/subscription/account/account.component.ts
View File

@@ -1,22 +1,12 @@
import { HttpEventType } from '@angular/common/http';
import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { ChangeDetectorRef, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { AngularCropperjsModule } from 'angular-cropperjs';
import { KeycloakService } from 'keycloak-angular';
import { ConfirmationService, MessageService } from 'primeng/api';
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 { InputMaskModule } from 'primeng/inputmask';
import { SelectButtonModule } from 'primeng/selectbutton';
import { lastValueFrom } from 'rxjs';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, Invoice, Subscription, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ImageCropperComponent, stateOptions } from '../../../components/image-cropper/image-cropper.component';
import { GeoService } from '../../../services/geo.service';
import { ImageService } from '../../../services/image.service';
import { LoadingService } from '../../../services/loading.service';
@@ -24,19 +14,19 @@ import { SelectOptionsService } from '../../../services/select-options.service';
import { SubscriptionsService } from '../../../services/subscriptions.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { getDialogWidth, getImageDimensions, map2User } from '../../../utils/utils';
import { map2User } from '../../../utils/utils';
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({
selector: 'app-account',
standalone: true,
imports: [SharedModule, FileUploadModule, EditorModule, AngularCropperjsModule, DialogModule, SelectButtonModule, DynamicDialogModule, ConfirmDialogModule, InputMaskModule],
providers: [MessageService, DialogService, ConfirmationService],
imports: [SharedModule, AngularCropperjsModule],
providers: [],
templateUrl: './account.component.html',
styleUrl: './account.component.scss',
})
export class AccountComponent {
@ViewChild('companyUpload') public companyUpload: FileUpload;
@ViewChild('profileUpload') public profileUpload: FileUpload;
// @ViewChild('companyUpload') public companyUpload: FileUpload;
// @ViewChild('profileUpload') public profileUpload: FileUpload;
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user: User;
subscriptions: Array<Subscription>;
@@ -45,7 +35,6 @@ export class AccountComponent {
companyLogoUrl: string;
profileUrl: string;
type: 'company' | 'profile';
dialogRef: DynamicDialogRef | undefined;
environment = environment;
editorModules = TOOLBAR_OPTIONS;
env = environment;
@@ -53,15 +42,12 @@ export class AccountComponent {
constructor(
public userService: UserService,
private subscriptionService: SubscriptionsService,
private messageService: MessageService,
private geoService: GeoService,
public selectOptions: SelectOptionsService,
private cdref: ChangeDetectorRef,
private activatedRoute: ActivatedRoute,
private loadingService: LoadingService,
private imageUploadService: ImageService,
public dialogService: DialogService,
private confirmationService: ConfirmationService,
private imageService: ImageService,
private keycloakService: KeycloakService,
) {}
@@ -98,7 +84,7 @@ export class AccountComponent {
async updateProfile(user: User) {
await this.userService.save(this.user);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Account changes have been persisted', life: 3000 });
// this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Account changes have been persisted', life: 3000 });
}
onUploadCompanyLogo(event: any) {
@@ -134,77 +120,77 @@ export class AccountComponent {
get isProfessional() {
return this.user.customerType === 'professional';
}
select(event: any, type: 'company' | 'profile') {
const imageUrl = URL.createObjectURL(event.files[0]);
this.type = type;
const config = { aspectRatio: type === 'company' ? stateOptions[0].value : stateOptions[2].value };
getImageDimensions(imageUrl).then(dimensions => {
const dialogWidth = getDialogWidth(dimensions);
// select(event: any, type: 'company' | 'profile') {
// const imageUrl = URL.createObjectURL(event.files[0]);
// this.type = type;
// const config = { aspectRatio: type === 'company' ? stateOptions[0].value : stateOptions[2].value };
// getImageDimensions(imageUrl).then(dimensions => {
// const dialogWidth = getDialogWidth(dimensions);
this.dialogRef = this.dialogService.open(ImageCropperComponent, {
data: {
imageUrl: imageUrl,
fileUpload: type === 'company' ? this.companyUpload : this.profileUpload,
config: config,
ratioVariable: type === 'company' ? true : false,
},
header: 'Edit Image',
width: dialogWidth,
modal: true,
closeOnEscape: true,
keepInViewport: true,
closable: false,
});
this.dialogRef.onClose.subscribe(cropper => {
if (cropper) {
this.loadingService.startLoading('uploadImage');
cropper.getCroppedCanvas().toBlob(async blob => {
this.imageUploadService.uploadImage(blob, type === 'company' ? 'uploadCompanyLogo' : 'uploadProfile', emailToDirName(this.user.email)).subscribe(
async event => {
if (event.type === HttpEventType.Response) {
this.loadingService.stopLoading('uploadImage');
if (this.type === 'company') {
this.user.hasCompanyLogo = true; //
this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
} else {
this.user.hasProfile = true;
this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
}
await this.userService.save(this.user);
}
},
error => console.error('Fehler beim Upload:', error),
);
});
}
});
});
}
deleteConfirm(type: 'profile' | 'logo') {
this.confirmationService.confirm({
target: event.target as EventTarget,
message: `Do you want to delete your ${type === 'logo' ? 'Logo' : 'Profile'} image`,
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',
// this.dialogRef = this.dialogService.open(ImageCropperComponent, {
// data: {
// imageUrl: imageUrl,
// fileUpload: type === 'company' ? this.companyUpload : this.profileUpload,
// config: config,
// ratioVariable: type === 'company' ? true : false,
// },
// header: 'Edit Image',
// width: dialogWidth,
// modal: true,
// closeOnEscape: true,
// keepInViewport: true,
// closable: false,
// });
// this.dialogRef.onClose.subscribe(cropper => {
// if (cropper) {
// this.loadingService.startLoading('uploadImage');
// cropper.getCroppedCanvas().toBlob(async blob => {
// this.imageUploadService.uploadImage(blob, type === 'company' ? 'uploadCompanyLogo' : 'uploadProfile', emailToDirName(this.user.email)).subscribe(
// async event => {
// if (event.type === HttpEventType.Response) {
// this.loadingService.stopLoading('uploadImage');
// if (this.type === 'company') {
// this.user.hasCompanyLogo = true; //
// this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
// } else {
// this.user.hasProfile = true;
// this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
// }
// await this.userService.save(this.user);
// }
// },
// error => console.error('Fehler beim Upload:', error),
// );
// });
// }
// });
// });
// }
// deleteConfirm(type: 'profile' | 'logo') {
// this.confirmationService.confirm({
// target: event.target as EventTarget,
// message: `Do you want to delete your ${type === 'logo' ? 'Logo' : 'Profile'} image`,
// 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 () => {
if (type === 'profile') {
this.user.hasProfile = false;
await Promise.all([this.imageService.deleteProfileImagesById(this.user.email), this.userService.save(this.user)]);
} else {
this.user.hasCompanyLogo = false;
await Promise.all([this.imageService.deleteLogoImagesById(this.user.email), this.userService.save(this.user)]);
}
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
this.user = await this.userService.getById(this.user.id);
},
reject: () => {
console.log('deny');
},
});
}
// accept: async () => {
// if (type === 'profile') {
// this.user.hasProfile = false;
// await Promise.all([this.imageService.deleteProfileImagesById(this.user.email), this.userService.save(this.user)]);
// } else {
// this.user.hasCompanyLogo = false;
// await Promise.all([this.imageService.deleteLogoImagesById(this.user.email), this.userService.save(this.user)]);
// }
// this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
// this.user = await this.userService.getById(this.user.id);
// },
// reject: () => {
// console.log('deny');
// },
// });
// }
}

21
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
View File

@@ -156,10 +156,11 @@
</div>
<p-toast></p-toast>
<p-confirmDialog></p-confirmDialog> -->
<div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6">
<h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
<form (ngSubmit)="onSubmit()" #listingForm="ngForm">
<form #listingForm="ngForm">
<div class="mb-4">
<label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
<select id="listingsCategory" [(ngModel)]="listing.listingsCategory" name="listingsCategory" class="w-full p-2 border border-gray-300 rounded-md">
@@ -186,7 +187,7 @@
<div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
<ng-select [items]="usStates" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
<ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
</div>
<div class="w-1/2">
<label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
@@ -203,7 +204,7 @@
[(ngModel)]="listing.price"
name="price"
class="w-full p-2 border border-gray-300 rounded-md"
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 2 }"
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
currencyMask
/>
</div>
@@ -215,7 +216,7 @@
[(ngModel)]="listing.salesRevenue"
name="salesRevenue"
class="w-full p-2 border border-gray-300 rounded-md"
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 2 }"
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
currencyMask
/>
</div>
@@ -229,7 +230,7 @@
[(ngModel)]="listing.cashFlow"
name="cashFlow"
class="w-full p-2 border border-gray-300 rounded-md"
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 2 }"
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
currencyMask
/>
</div>
@@ -290,14 +291,16 @@
<label class="flex items-center cursor-pointer">
<div class="relative">
<input type="checkbox" [(ngModel)]="listing.draft" name="draft" class="hidden" />
<div class="toggle-bg block w-14 h-8 rounded-full bg-gray-600 transition"></div>
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
<div class="toggle-bg block w-12 h-6 rounded-full bg-gray-600 transition"></div>
</div>
<div class="ml-3 text-gray-700 font-medium">Draft Mode (Will not be shown as public listing)</div>
</label>
</div>
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Update Listing</button>
@if (mode==='create'){
<button (click)="save()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Post Listing</button>
} @else {
<button (click)="save()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Update Listing</button>
}
</form>
</div>
</div>

16
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.scss
View File

@@ -14,14 +14,14 @@
}
}
input[type='checkbox'] {
&:checked + .dot {
transform: translateX(100%);
}
&:checked + .block {
background-color: #4299e1;
}
}
// input[type='checkbox'] {
// &:checked + .dot {
// transform: translateX(100%);
// }
// &:checked + .block {
// background-color: #4299e1;
// }
// }
.dot {
transition: all 0.3s ease-in-out;

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

@@ -1,4 +1,4 @@
import { Component, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { lastValueFrom } from 'rxjs';
import { ListingsService } from '../../../services/listings.service';
@@ -11,17 +11,12 @@ import { AngularCropperjsModule } from 'angular-cropperjs';
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
import { KeycloakService } from 'keycloak-angular';
import { QuillModule } from 'ngx-quill';
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 { NgSelectModule } from '@ng-select/ng-select';
import { NgxCurrencyDirective } from 'ngx-currency';
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 { 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';
@@ -32,27 +27,12 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({
selector: 'business-listing',
standalone: true,
imports: [
SharedModule,
ArrayToStringPipe,
InputNumberModule,
CarouselModule,
DialogModule,
AngularCropperjsModule,
FileUploadModule,
EditorModule,
DynamicDialogModule,
DragDropModule,
ConfirmDialogModule,
MixedCdkDragDropModule,
QuillModule,
],
providers: [MessageService, DialogService, ConfirmationService],
imports: [SharedModule, ArrayToStringPipe, AngularCropperjsModule, DragDropModule, MixedCdkDragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule],
providers: [],
templateUrl: './edit-business-listing.component.html',
styleUrl: './edit-business-listing.component.scss',
})
export class EditBusinessListingComponent {
@ViewChild(FileUpload) public fileUpload: FileUpload;
listingsCategory = 'business';
category: string;
location: string;
@@ -82,7 +62,6 @@ export class EditBusinessListingComponent {
];
config = { aspectRatio: 16 / 9 };
editorModules = TOOLBAR_OPTIONS;
dialogRef: DynamicDialogRef | undefined;
draggedImage: ImageProperty;
faTrash = faTrash;
data: CommercialPropertyListing;
@@ -96,12 +75,10 @@ export class EditBusinessListingComponent {
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,
) {
@@ -139,7 +116,7 @@ export class EditBusinessListingComponent {
async save() {
this.listing = await this.listingsService.save(this.listing, this.listing.listingsCategory);
this.router.navigate(['editBusinessListing', this.listing.id]);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
// this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
}
suggestions: string[] | undefined;

7
bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
View File

@@ -1,4 +1,4 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<!-- <div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
@@ -28,7 +28,6 @@
<div>
<div class="mb-4">
<label for="description" class="block font-medium text-900 mb-2">Description</label>
<!-- <textarea id="description" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.description"></textarea> -->
<p-editor [(ngModel)]="listing.description" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
@@ -95,14 +94,12 @@
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="price" class="block font-medium text-900 mb-2">Price</label>
<!-- <p-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price" ></p-inputNumber> -->
<app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></app-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Property Pictures</span>
<span class="font-light text-sm text-900 mb-2">(Pictures can be uploaded once the listing is posted initially)</span>
<!-- <img [src]="propertyPictureUrl" (error)="setImageToFallback($event)" class="image"/> -->
<p-fileUpload
mode="basic"
chooseLabel="Upload"
@@ -144,4 +141,4 @@
</div>
<p-toast></p-toast>
<p-confirmDialog></p-confirmDialog>
</div>
</div> -->

168
bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.ts
View File

@@ -1,28 +1,18 @@
import { Component, ViewChild } from '@angular/core';
import { Component } 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 { createDefaultCommercialPropertyListing, 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';
@@ -33,26 +23,13 @@ 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],
imports: [SharedModule, ArrayToStringPipe, AngularCropperjsModule, DragDropModule, MixedCdkDragDropModule],
providers: [],
templateUrl: './edit-commercial-property-listing.component.html',
styleUrl: './edit-commercial-property-listing.component.scss',
})
export class EditCommercialPropertyListingComponent {
@ViewChild(FileUpload) public fileUpload: FileUpload;
// @ViewChild(FileUpload) public fileUpload: FileUpload;
listingsCategory = 'commercialProperty';
category: string;
location: string;
@@ -82,7 +59,7 @@ export class EditCommercialPropertyListingComponent {
];
config = { aspectRatio: 16 / 9 };
editorModules = TOOLBAR_OPTIONS;
dialogRef: DynamicDialogRef | undefined;
draggedImage: ImageProperty;
faTrash = faTrash;
suggestions: string[] | undefined;
@@ -97,12 +74,11 @@ export class EditCommercialPropertyListingComponent {
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,
) {
@@ -141,7 +117,7 @@ export class EditCommercialPropertyListingComponent {
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 });
// this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
}
async search(event: AutoCompleteCompleteEvent) {
@@ -149,71 +125,71 @@ export class EditCommercialPropertyListingComponent {
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();
}
});
});
}
// 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',
// 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');
},
});
}
// 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);

4
bizmatch/src/app/pages/subscription/email-us/email-us.component.html
View File

@@ -1,4 +1,4 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
<!-- <div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
@@ -31,4 +31,4 @@
</div>
</div>
</div>
</div>
</div> -->

10
bizmatch/src/app/pages/subscription/email-us/email-us.component.ts
View File

@@ -1,8 +1,6 @@
import { Component } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';
import { MessageService } from 'primeng/api';
import { InputMaskModule } from 'primeng/inputmask';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
@@ -13,8 +11,8 @@ import { map2User } from '../../../utils/utils';
@Component({
selector: 'app-email-us',
standalone: true,
imports: [SharedModule, InputMaskModule],
providers: [MessageService],
imports: [SharedModule],
providers: [],
templateUrl: './email-us.component.html',
styleUrl: './email-us.component.scss',
})
@@ -23,7 +21,7 @@ export class EmailUsComponent {
keycloakUser: KeycloakUser;
user: User;
errorResponse: ErrorResponse;
constructor(private mailService: MailService, private userService: UserService, public keycloakService: KeycloakService, private messageService: MessageService) {
constructor(private mailService: MailService, private userService: UserService, public keycloakService: KeycloakService) {
this.mailinfo = { sender: {}, userId: '', email: '', url: environment.mailinfoUrl };
}
async ngOnInit() {
@@ -41,7 +39,7 @@ export class EmailUsComponent {
this.errorResponse = result as ErrorResponse;
} else {
this.errorResponse = null;
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your request has been forwarded to the support team of bizmatch.', life: 3000 });
// this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your request has been forwarded to the support team of bizmatch.', life: 3000 });
}
}
containsError(fieldname: string) {

4
bizmatch/src/app/pages/subscription/favorites/favorites.component.html
View File

@@ -1,4 +1,4 @@
<!--
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
@@ -27,4 +27,4 @@
</p-table>
</div>
</div>
</div>
</div> -->

3
bizmatch/src/app/pages/subscription/favorites/favorites.component.ts
View File

@@ -5,12 +5,11 @@ import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { map2User } from '../../../utils/utils';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
@Component({
selector: 'app-favorites',
standalone: true,
imports: [MenuAccountComponent, SharedModule],
imports: [SharedModule],
templateUrl: './favorites.component.html',
styleUrl: './favorites.component.scss',
})

4
bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html
View File

@@ -1,4 +1,4 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
<!-- <div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
@@ -42,4 +42,4 @@
</p-table>
</div>
</div>
</div>
</div> -->

35
bizmatch/src/app/pages/subscription/my-listing/my-listing.component.ts
View File

@@ -1,6 +1,5 @@
import { ChangeDetectorRef, Component } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';
import { ConfirmationService, MessageService } from 'primeng/api';
import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { ListingsService } from '../../../services/listings.service';
@@ -8,12 +7,12 @@ import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { map2User } from '../../../utils/utils';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
@Component({
selector: 'app-my-listing',
standalone: true,
imports: [MenuAccountComponent, SharedModule],
providers: [ConfirmationService, MessageService],
imports: [SharedModule],
providers: [],
templateUrl: './my-listing.component.html',
styleUrl: './my-listing.component.scss',
})
@@ -21,15 +20,7 @@ export class MyListingComponent {
listings: Array<ListingType> = []; //dataListings as unknown as Array<BusinessListing>;
myListings: Array<ListingType>;
user: User;
constructor(
public userService: UserService,
public keycloakService: KeycloakService,
private listingsService: ListingsService,
private cdRef: ChangeDetectorRef,
public selectOptions: SelectOptionsService,
private confirmationService: ConfirmationService,
private messageService: MessageService,
) {}
constructor(public userService: UserService, public keycloakService: KeycloakService, private listingsService: ListingsService, private cdRef: ChangeDetectorRef, public selectOptions: SelectOptionsService) {}
async ngOnInit() {
// const keycloakUser = this.userService.getKeycloakUser();
const token = await this.keycloakService.getToken();
@@ -51,14 +42,14 @@ export class MyListingComponent {
}
confirm(event: Event, listing: ListingType) {
this.confirmationService.confirm({
target: event.target as EventTarget,
message: 'Are you sure you want to delet this listing?',
icon: 'pi pi-exclamation-triangle',
accept: () => {
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing has been deleted', life: 3000 });
this.deleteListing(listing);
},
});
// this.confirmationService.confirm({
// target: event.target as EventTarget,
// message: 'Are you sure you want to delet this listing?',
// icon: 'pi pi-exclamation-triangle',
// accept: () => {
// this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing has been deleted', life: 3000 });
// this.deleteListing(listing);
// },
// });
}
}