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

Bug Fixed: #34,#28,#48,#46,#2,#15

Browse Source
This commit is contained in:
Andreas Knuth
2024-05-29 12:41:55 -05:00
parent 24a3d210f0
commit 044f8efa0f
18 changed files with 247 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,7 +36,7 @@
<div class="grid">
<div class="mb-4 col-12 md:col-4">
<label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone Number</label>
<input id="phoneNumber" type="text" pInputText [(ngModel)]="user.phoneNumber" />
<p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="user.phoneNumber"></p-inputMask>
</div>
<div class="mb-4 col-12 md:col-4">
<label for="companyWebsite" class="block font-medium text-900 mb-2">Company Website</label>

4
bizmatch/src/app/pages/subscription/account/account.component.scss
View File

@@ -25,8 +25,8 @@
/* Stil für das FontAwesome Icon */
.image-wrap fa-icon {
position: absolute;
top: 5px; /* Positioniert das Icon am oberen Rand des Bildes */
right: 5px; /* Positioniert das Icon am rechten Rand des Bildes */
top: -5px; /* Positioniert das Icon am oberen Rand des Bildes */
right: -18px; /* Positioniert das Icon am rechten Rand des Bildes */
color: #fff; /* Weiße Farbe für das Icon */
background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
padding: 5px; /* Ein wenig Platz um das Icon */

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

@@ -10,6 +10,7 @@ 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';
@@ -23,12 +24,12 @@ 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 { map2User } from '../../../utils/utils';
import { getDialogWidth, getImageDimensions, 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],
imports: [SharedModule, FileUploadModule, EditorModule, AngularCropperjsModule, DialogModule, SelectButtonModule, DynamicDialogModule, ConfirmDialogModule, InputMaskModule],
providers: [MessageService, DialogService, ConfirmationService],
templateUrl: './account.component.html',
styleUrl: './account.component.scss',
@@ -124,46 +125,46 @@ export class AccountComponent {
const imageUrl = URL.createObjectURL(event.files[0]);
this.type = type;
const config = { aspectRatio: type === 'company' ? stateOptions[0].value : stateOptions[2].value };
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: '30vw',
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.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()}`;
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);
}
await this.userService.save(this.user);
}
},
error => console.error('Fehler beim Upload:', error),
);
});
}
},
error => console.error('Fehler beim Upload:', error),
);
});
}
});
});
}
deleteConfirm(type: 'profile' | 'logo') {

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

@@ -3,7 +3,7 @@ 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 { createDefaultCommercialPropertyListing, getDialogWidth, getImageDimensions, map2User, routeListingWithState } from '../../../utils/utils';
import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { HttpEventType } from '@angular/common/http';
@@ -151,41 +151,44 @@ export class EditCommercialPropertyListingComponent {
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.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();
}
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();
}
});
});
}