account, myListings and emailUs pages

This commit is contained in:
2024-07-10 18:40:46 +02:00
parent 08c179fa09
commit 7bd5e1aaf8
19 changed files with 622 additions and 226 deletions

View File

@@ -1,15 +1,25 @@
import { ChangeDetectorRef, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
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 { 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, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { AutoCompleteCompleteEvent, Invoice, Subscription, UploadParams, 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 { GeoService } from '../../../services/geo.service';
import { ImageService } from '../../../services/image.service';
import { LoadingService } from '../../../services/loading.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { SharedService } from '../../../services/shared.service';
import { SubscriptionsService } from '../../../services/subscriptions.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
@@ -18,7 +28,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({
selector: 'app-account',
standalone: true,
imports: [SharedModule],
imports: [SharedModule, QuillModule, NgxCurrencyDirective, NgSelectModule, ImageCropperComponent, ConfirmationComponent, ImageCropAndUploadComponent, MessageComponent],
providers: [],
templateUrl: './account.component.html',
styleUrl: './account.component.scss',
@@ -40,6 +50,10 @@ export class AccountComponent {
faTrash = faTrash;
customerTypes = ['buyer', 'professional'];
customerSubTypes = ['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser'];
quillModules = {
toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
};
uploadParams: UploadParams;
constructor(
public userService: UserService,
private subscriptionService: SubscriptionsService,
@@ -51,6 +65,9 @@ export class AccountComponent {
private imageUploadService: ImageService,
private imageService: ImageService,
private keycloakService: KeycloakService,
private confirmationService: ConfirmationService,
private messageService: MessageService,
private sharedService: SharedService,
) {}
async ngOnInit() {
if (this.id) {
@@ -121,6 +138,39 @@ export class AccountComponent {
get isProfessional() {
return this.user.customerType === 'professional';
}
uploadCompanyLogo() {
this.uploadParams = { type: 'uploadCompanyLogo', imagePath: emailToDirName(this.user.email) };
}
uploadProfile() {
this.uploadParams = { type: 'uploadProfile', imagePath: emailToDirName(this.user.email) };
}
async uploadFinished(response: UploadReponse) {
if (response.success) {
if (response.type === 'uploadCompanyLogo') {
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()}`;
this.sharedService.changeProfilePhoto(this.profileUrl);
}
await this.userService.save(this.user);
}
}
async deleteConfirm(type: 'profile' | 'logo') {
const confirmed = await this.confirmationService.showConfirmation(`Do you want to delete your ${type === 'logo' ? 'Logo' : 'Profile'} image`);
if (confirmed) {
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.user = await this.userService.getById(this.user.id);
this.messageService.showMessage('Image deleted');
}
}
// select(event: any, type: 'company' | 'profile') {
// const imageUrl = URL.createObjectURL(event.files[0]);
// this.type = type;
@@ -167,31 +217,30 @@ export class AccountComponent {
// });
// });
// }
// 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');
// },
// });
// }
// 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');
// },
// });
}