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

format on save, resolve compile errors, functionality 1. stage

Browse Source
This commit is contained in:
Andreas Knuth
2024-04-23 17:32:21 +02:00
parent 7f0f21b598
commit 9e03620be7
32 changed files with 1506 additions and 1389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,194 +1,203 @@
<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>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">Account Details</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
<!-- <div class="mb-4">
<label for="email" class="block font-medium text-900 mb-2">Username</label>
<input id="email" type="text" [disabled]="true" pInputText [(ngModel)]="user.username">
<p class="font-italic text-sm line-height-1">Usernames cannot be changed.</p>
</div> -->
<div class="mb-4">
<label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label>
<input id="state" type="text" [disabled]="true" pInputText [(ngModel)]="user.email">
<p class="font-italic text-sm line-height-1">You can only modify your email by contacting us at
emailchange&#64;bizmatch.net</p>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="firstname" class="block font-medium text-900 mb-2">First Name</label>
<input id="firstname" type="text" pInputText [(ngModel)]="user.firstname">
</div>
<div class="mb-4 col-12 md:col-6">
<label for="lastname" class="block font-medium text-900 mb-2">Last Name</label>
<input id="lastname" type="text" pInputText [(ngModel)]="user.lastname">
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="firstname" class="block font-medium text-900 mb-2">Company Name</label>
<input id="firstname" type="text" pInputText [(ngModel)]="user.companyName">
</div>
<div class="mb-4 col-12 md:col-6">
<label for="lastname" class="block font-medium text-900 mb-2">Describe yourself</label>
<input id="lastname" type="text" pInputText [(ngModel)]="user.description">
</div>
</div>
<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">
</div>
<div class="mb-4 col-12 md:col-4">
<label for="companyWebsite" class="block font-medium text-900 mb-2">Company Website</label>
<input id="companyWebsite" type="text" pInputText [(ngModel)]="user.companyWebsite">
</div>
<div class="mb-4 col-12 md:col-4">
<label for="companyLocation" class="block font-medium text-900 mb-2">Company
Location</label>
<p-autoComplete [(ngModel)]="user.companyLocation" [suggestions]="suggestions"
(completeMethod)="search($event)"></p-autoComplete>
</div>
</div>
<div class="mb-4">
<label for="companyOverview" class="block font-medium text-900 mb-2">Company Overview</label>
<p-editor [(ngModel)]="user.companyOverview" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
<div class="mb-4">
<label for="companyOverview" class="block font-medium text-900 mb-2">Services We offer</label>
<p-editor [(ngModel)]="user.offeredServices" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
<div class="mb-4">
<label for="areasServed" class="block font-medium text-900 mb-2">Areas We Serve</label>
<textarea id="areasServed" type="text" pInputTextarea rows="5" [autoResize]="true"
[(ngModel)]="user.areasServed"></textarea>
</div>
<div>
<label for="companyOverview" class="block font-medium text-900 mb-2">Licensed In</label>
@for (licensedIn of userLicensedIn; track licensedIn.value){
<div class="grid">
<div class="flex col-12 md:col-6">
<p-dropdown id="states" [options]="selectOptions?.states" [(ngModel)]="licensedIn.name"
optionLabel="name" optionValue="value" [showClear]="true" placeholder="State"
[ngStyle]="{ width: '100%'}"></p-dropdown>
</div>
<div class="flex col-12 md:col-6">
<input id="companyWebsite" type="text" pInputText [(ngModel)]="licensedIn.value"
placeholder="Licence Number">
</div>
</div>
}
</div>
<div class="field mb-5 col-12 md:col-6 flex align-items-center">
<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>
<button pButton pRipple label="Update Profile" class="w-auto"
(click)="updateProfile(user)"></button>
</div>
</div>
<div>
<div class="flex flex-column align-items-center flex-or mb-8">
<span class="font-medium text-900 mb-2">Company Logo</span>
<span class="font-medium text-xs mb-2">(is shown in every offer)</span>
@if(user.hasCompanyLogo){
<img src="{{companyLogoUrl}}" class="rounded-profile" />
} @else {
<img src="assets/images/placeholder.png" class="rounded-profile" />
}
<p-fileUpload #companyUpload mode="basic" chooseLabel="Upload" name="file" [customUpload]="true"
accept="image/*" [maxFileSize]="maxFileSize" (onSelect)="select($event,'company')"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
</div>
<p-divider></p-divider>
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Your Profile Picture</span>
@if(user.hasProfile){
<img src="{{profileUrl}}" class="rounded-profile" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="rounded-profile" />
}
<p-fileUpload #profileUpload mode="basic" chooseLabel="Upload" name="file" [customUpload]="true"
accept="image/*" [maxFileSize]="maxFileSize" (onSelect)="select($event,'profile')"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
</div>
</div>
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">Account Details</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
@if (user){
<div class="mb-4">
<label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label>
<input id="state" type="text" [disabled]="true" pInputText [(ngModel)]="user.email" />
<p class="font-italic text-sm line-height-1">You can only modify your email by contacting us at emailchange&#64;bizmatch.net</p>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="firstname" class="block font-medium text-900 mb-2">First Name</label>
<input id="firstname" type="text" pInputText [(ngModel)]="user.firstname" />
</div>
<div class="text-900 font-semibold text-lg mt-3">Membership Level</div>
<p-divider></p-divider>
<p-table [value]="userSubscriptions" [tableStyle]="{ 'min-width': '50rem' }" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th style="width: 5rem"></th>
<th>ID</th>
<th>Level</th>
<th>Start Date</th>
<th>Date Modified</th>
<th>End Date</th>
<th>Status</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-subscription let-expanded="expanded">
<tr>
<td>
<button type="button" pButton pRipple [pRowToggler]="subscription"
class="p-button-text p-button-rounded p-button-plain"
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td>{{ subscription.id }}</td>
<td>{{ subscription.level }}</td>
<td>{{ subscription.start | date }}</td>
<td>{{ subscription.modified | date }}</td>
<td>{{ subscription.end | date }}</td>
<td>{{ subscription.status }}</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-subscription>
<tr>
<td colspan="7">
<div class="p-3">
<p-table [value]="subscription.invoices" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th style="width: 5rem"></th>
<th>ID</th>
<th>Date</th>
<th>Price</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-invoice>
<tr>
<td>
<button pButton pRipple icon="pi pi-print" class="p-button-rounded p-button-success mr-2"
(click)="printInvoice(invoice)"></button>
</td>
<td>{{ invoice.id }}</td>
<td>{{ invoice.date | date}}</td>
<td>{{ invoice.price | currency}}</td>
<td></td>
<td></td>
</tr>
</ng-template>
</p-table>
<div class="mb-4 col-12 md:col-6">
<label for="lastname" class="block font-medium text-900 mb-2">Last Name</label>
<input id="lastname" type="text" pInputText [(ngModel)]="user.lastname" />
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="firstname" class="block font-medium text-900 mb-2">Company Name</label>
<input id="firstname" type="text" pInputText [(ngModel)]="user.companyName" />
</div>
<div class="mb-4 col-12 md:col-6">
<label for="lastname" class="block font-medium text-900 mb-2">Describe yourself</label>
<input id="lastname" type="text" pInputText [(ngModel)]="user.description" />
</div>
</div>
<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" />
</div>
<div class="mb-4 col-12 md:col-4">
<label for="companyWebsite" class="block font-medium text-900 mb-2">Company Website</label>
<input id="companyWebsite" type="text" pInputText [(ngModel)]="user.companyWebsite" />
</div>
<div class="mb-4 col-12 md:col-4">
<label for="companyLocation" class="block font-medium text-900 mb-2">Company Location</label>
<p-autoComplete [(ngModel)]="user.companyLocation" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
</div>
</div>
<div class="mb-4">
<label for="companyOverview" class="block font-medium text-900 mb-2">Company Overview</label>
<p-editor [(ngModel)]="user.companyOverview" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
<div class="mb-4">
<label for="companyOverview" class="block font-medium text-900 mb-2">Services We offer</label>
<p-editor [(ngModel)]="user.offeredServices" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
<div class="mb-4">
<label for="areasServed" class="block font-medium text-900 mb-2">Areas We Serve</label>
<textarea id="areasServed" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="user.areasServed"></textarea>
</div>
<div>
<label for="companyOverview" class="block font-medium text-900 mb-2">Licensed In</label>
@for (licensedIn of userLicensedIn; track licensedIn.value){
<div class="grid">
<div class="flex col-12 md:col-6">
<p-dropdown
id="states"
[options]="selectOptions?.states"
[(ngModel)]="licensedIn.name"
optionLabel="name"
optionValue="value"
[showClear]="true"
placeholder="State"
[ngStyle]="{ width: '100%' }"
></p-dropdown>
</div>
<div class="flex col-12 md:col-6">
<input id="companyWebsite" type="text" pInputText [(ngModel)]="licensedIn.value" placeholder="Licence Number" />
</div>
</div>
}
</div>
<div class="field mb-5 col-12 md:col-6 flex align-items-center">
<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>
<button pButton pRipple label="Update Profile" class="w-auto" (click)="updateProfile(user)"></button>
</div>
</div>
</td>
</tr>
<div>
<div class="flex flex-column align-items-center flex-or mb-8">
<span class="font-medium text-900 mb-2">Company Logo</span>
<span class="font-medium text-xs mb-2">(is shown in every offer)</span>
@if(user?.hasCompanyLogo){
<img src="{{ companyLogoUrl }}" class="rounded-profile" />
} @else {
<img src="assets/images/placeholder.png" class="rounded-profile" />
}
<p-fileUpload
#companyUpload
mode="basic"
chooseLabel="Upload"
name="file"
[customUpload]="true"
accept="image/*"
[maxFileSize]="maxFileSize"
(onSelect)="select($event, 'company')"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
></p-fileUpload>
</div>
<p-divider></p-divider>
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Your Profile Picture</span>
@if(user.hasProfile){
<img src="{{ profileUrl }}" class="rounded-profile" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="rounded-profile" />
}
<p-fileUpload
#profileUpload
mode="basic"
chooseLabel="Upload"
name="file"
[customUpload]="true"
accept="image/*"
[maxFileSize]="maxFileSize"
(onSelect)="select($event, 'profile')"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
></p-fileUpload>
</div>
</div>
</div>
<div class="text-900 font-semibold text-lg mt-3">Membership Level</div>
<p-divider></p-divider>
<p-table [value]="userSubscriptions" [tableStyle]="{ 'min-width': '50rem' }" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th style="width: 5rem"></th>
<th>ID</th>
<th>Level</th>
<th>Start Date</th>
<th>Date Modified</th>
<th>End Date</th>
<th>Status</th>
</tr>
</ng-template>
</p-table>
<ng-template pTemplate="body" let-subscription let-expanded="expanded">
<tr>
<td>
<button type="button" pButton pRipple [pRowToggler]="subscription" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td>{{ subscription.id }}</td>
<td>{{ subscription.level }}</td>
<td>{{ subscription.start | date }}</td>
<td>{{ subscription.modified | date }}</td>
<td>{{ subscription.end | date }}</td>
<td>{{ subscription.status }}</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-subscription>
<tr>
<td colspan="7">
<div class="p-3">
<p-table [value]="subscription.invoices" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th style="width: 5rem"></th>
<th>ID</th>
<th>Date</th>
<th>Price</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-invoice>
<tr>
<td>
<button pButton pRipple icon="pi pi-print" class="p-button-rounded p-button-success mr-2" (click)="printInvoice(invoice)"></button>
</td>
<td>{{ invoice.id }}</td>
<td>{{ invoice.date | date }}</td>
<td>{{ invoice.price | currency }}</td>
<td></td>
<td></td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</div>
</div>

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

@@ -1,49 +1,33 @@
import { HttpEventType } from '@angular/common/http';
import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
import { StyleClassModule } from 'primeng/styleclass';
import { SelectOptionsService } from '../../../services/select-options.service';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { TagModule } from 'primeng/tag';
import { ActivatedRoute } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
import { HttpClient, HttpEventType } from '@angular/common/http';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { SubscriptionsService } from '../../../services/subscriptions.service';
import { lastValueFrom } from 'rxjs';
import { AngularCropperjsModule } from 'angular-cropperjs';
import { MessageService } from 'primeng/api';
import { environment } from '../../../../environments/environment';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { GeoService } from '../../../services/geo.service';
import { ChangeDetectionStrategy } from '@angular/compiler';
import { EditorModule } from 'primeng/editor';
import { LoadingService } from '../../../services/loading.service';
import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
import { ImageService } from '../../../services/image.service';
import { DialogModule } from 'primeng/dialog';
import { SelectButtonModule } from 'primeng/selectbutton';
import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
import { ImageCropperComponent, stateOptions } from '../../../components/image-cropper/image-cropper.component';
import Quill from 'quill'
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
import { EditorModule } from 'primeng/editor';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { SelectButtonModule } from 'primeng/selectbutton';
import { lastValueFrom } from 'rxjs';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, Invoice, KeyValue, Subscription } 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';
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 { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({
selector: 'app-account',
standalone: true,
imports: [SharedModule, FileUploadModule, EditorModule, AngularCropperjsModule, DialogModule, SelectButtonModule, DynamicDialogModule],
providers: [MessageService, DialogService],
templateUrl: './account.component.html',
styleUrl: './account.component.scss'
styleUrl: './account.component.scss',
})
export class AccountComponent {
@ViewChild('companyUpload') public companyUpload: FileUpload;
@@ -55,12 +39,13 @@ export class AccountComponent {
maxFileSize = 1000000;
companyLogoUrl: string;
profileUrl: string;
type: 'company' | 'profile'
type: 'company' | 'profile';
dialogRef: DynamicDialogRef | undefined;
environment = environment
editorModules = TOOLBAR_OPTIONS
userLicensedIn :KeyValue[]
constructor(public userService: UserService,
environment = environment;
editorModules = TOOLBAR_OPTIONS;
userLicensedIn: KeyValue[];
constructor(
public userService: UserService,
private subscriptionService: SubscriptionsService,
private messageService: MessageService,
private geoService: GeoService,
@@ -69,42 +54,43 @@ export class AccountComponent {
private activatedRoute: ActivatedRoute,
private loadingService: LoadingService,
private imageUploadService: ImageService,
public dialogService: DialogService) {}
public dialogService: DialogService,
) {}
async ngOnInit() {
this.user = await this.userService.getById(this.id);
this.userLicensedIn = this.user.licensedIn.map(l=>{return {name:l.split('|')[0],value:l.split('|')[1]}})
const email = this.userService.getUser().email;
this.user = await this.userService.getByMail(email);
this.userLicensedIn = this.user.licensedIn.map(l => {
return { name: l.split('|')[0], value: l.split('|')[1] };
});
this.userSubscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions());
if (!this.user.licensedIn || this.user.licensedIn?.length === 0) {
this.user.licensedIn = ['']
this.user.licensedIn = [''];
}
this.user = await this.userService.getById(this.user.id);
this.profileUrl = this.user.hasProfile ? `${environment.apiBaseUrl}/profile/${this.user.id}.avif` : `/assets/images/placeholder.png`
this.companyLogoUrl = this.user.hasCompanyLogo ? `${environment.apiBaseUrl}/logo/${this.user.id}.avif` : `/assets/images/placeholder.png`
this.profileUrl = this.user.hasProfile ? `${environment.apiBaseUrl}/profile/${this.user.id}.avif` : `/assets/images/placeholder.png`;
this.companyLogoUrl = this.user.hasCompanyLogo ? `${environment.apiBaseUrl}/logo/${this.user.id}.avif` : `/assets/images/placeholder.png`;
}
printInvoice(invoice: Invoice) { }
printInvoice(invoice: Invoice) {}
async updateProfile(user: User) {
await this.userService.save(this.user);
}
onUploadCompanyLogo(event: any) {
const uniqueSuffix = '?_ts=' + new Date().getTime();
this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}${uniqueSuffix}`; //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
}
onUploadProfilePicture(event: any) {
const uniqueSuffix = '?_ts=' + new Date().getTime();
this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}${uniqueSuffix}`; //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
}
setImageToFallback(event: Event) {
(event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
}
suggestions: string[] | undefined;
async search(event: AutoCompleteCompleteEvent) {
const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query))
const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query));
this.suggestions = result.map(r => `${r.city} - ${r.state_code}`).slice(0, 5);
}
addLicence() {
@@ -116,14 +102,14 @@ 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 }
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
ratioVariable: type === 'company' ? true : false,
},
header: 'Edit Image',
width: '50vw',
@@ -133,27 +119,30 @@ export class AccountComponent {
closable: false,
breakpoints: {
'960px': '75vw',
'640px': '90vw'
'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',this.user.id).subscribe(async(event) => {
if (event.type === HttpEventType.Response) {
this.loadingService.stopLoading('uploadImage');
if (this.type==='company'){
this.user.hasCompanyLogo=true;//
this.companyLogoUrl=`${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`
} else {
this.user.hasProfile=true;
this.profileUrl=`${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`
if (cropper) {
this.loadingService.startLoading('uploadImage');
cropper.getCroppedCanvas().toBlob(async blob => {
this.imageUploadService.uploadImage(blob, type === 'company' ? 'uploadCompanyLogo' : 'uploadProfile', this.user.id).subscribe(
async event => {
if (event.type === HttpEventType.Response) {
this.loadingService.stopLoading('uploadImage');
if (this.type === 'company') {
this.user.hasCompanyLogo = true; //
this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`;
} else {
this.user.hasProfile = true;
this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`;
}
}
}
}, error => console.error('Fehler beim Upload:', error));
})
},
error => console.error('Fehler beim Upload:', error),
);
});
}
})
});
}
}