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

Validation first Part

Browse Source
This commit is contained in:
Andreas Knuth
2024-07-30 23:23:25 +02:00
parent 55e800009e
commit 2955c034a0
11 changed files with 206 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
import { TitleCasePipe } from '@angular/common';
import { ChangeDetectorRef, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
@@ -8,13 +9,15 @@ import { ImageCropperComponent } from 'ngx-image-cropper';
import { QuillModule } from 'ngx-quill';
import { lastValueFrom } from 'rxjs';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, Invoice, Subscription, UploadParams, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { AutoCompleteCompleteEvent, Invoice, Subscription, UploadParams, ValidationMessage, 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 { ImageCropAndUploadComponent, UploadReponse } from '../../../components/image-crop-and-upload/image-crop-and-upload.component';
import { MessageComponent } from '../../../components/message/message.component';
import { MessageService } from '../../../components/message/message.service';
import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
import { ValidatedSelectComponent } from '../../../components/validated-select/validated-select.component';
import { GeoService } from '../../../services/geo.service';
import { ImageService } from '../../../services/image.service';
import { LoadingService } from '../../../services/loading.service';
@@ -28,8 +31,19 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({
selector: 'app-account',
standalone: true,
imports: [SharedModule, QuillModule, NgxCurrencyDirective, NgSelectModule, ImageCropperComponent, ConfirmationComponent, ImageCropAndUploadComponent, MessageComponent],
providers: [],
imports: [
SharedModule,
QuillModule,
NgxCurrencyDirective,
NgSelectModule,
ImageCropperComponent,
ConfirmationComponent,
ImageCropAndUploadComponent,
MessageComponent,
ValidatedInputComponent,
ValidatedSelectComponent,
],
providers: [TitleCasePipe],
templateUrl: './account.component.html',
styleUrl: './account.component.scss',
})
@@ -51,6 +65,9 @@ export class AccountComponent {
toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
};
uploadParams: UploadParams;
validationMessages: ValidationMessage[] = [];
customerTypeOptions: Array<{ value: string; label: string }> = [];
customerSubTypeOptions: Array<{ value: string; label: string }> = [];
constructor(
public userService: UserService,
private subscriptionService: SubscriptionsService,
@@ -65,6 +82,7 @@ export class AccountComponent {
private confirmationService: ConfirmationService,
private messageService: MessageService,
private sharedService: SharedService,
private titleCasePipe: TitleCasePipe,
) {}
async ngOnInit() {
if (this.id) {
@@ -95,6 +113,16 @@ export class AccountComponent {
this.userSubscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions(this.user.id));
this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
this.companyLogoUrl = this.user.hasCompanyLogo ? `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
this.customerTypeOptions = this.customerTypes.map(type => ({
value: type,
label: this.titleCasePipe.transform(type),
}));
this.customerSubTypeOptions = this.customerSubTypes.map(type => ({
value: type,
label: this.titleCasePipe.transform(type),
}));
}
printInvoice(invoice: Invoice) {}
@@ -182,76 +210,8 @@ export class AccountComponent {
});
}
}
// 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),
// );
// });
// }
// });
// });
// }
// this.confirmationService.showConfirmation({
// 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');
// },
// });
getValidationMessage(fieldName: string): string {
const message = this.validationMessages.find(msg => msg.field === fieldName);
return message ? message.message : '';
}
}