BugFixes image upload, image display, new DB structure for areasServed, licenedIn

This commit is contained in:
2024-05-13 17:31:01 -05:00
parent 5230ef1230
commit aff55c5433
34 changed files with 326 additions and 1131 deletions

View File

@@ -62,17 +62,13 @@
<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){
@for (areasServed of user.areasServed; track areasServed){
<div class="grid">
<div class="flex col-12 md:col-6">
<p-dropdown
id="states"
[options]="selectOptions?.states"
[(ngModel)]="licensedIn.name"
[(ngModel)]="areasServed.state"
optionLabel="name"
optionValue="value"
[showClear]="true"
@@ -81,7 +77,35 @@
></p-dropdown>
</div>
<div class="flex col-12 md:col-6">
<input id="companyWebsite" type="text" pInputText [(ngModel)]="licensedIn.value" placeholder="Licence Number" />
<input id="county" type="text" pInputText [(ngModel)]="areasServed.county" placeholder="Area/County Served" />
</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)="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>
@for (licensedIn of user.licensedIn; track licensedIn){
<div class="grid">
<div class="flex col-12 md:col-6">
<p-dropdown
id="states"
[options]="selectOptions?.states"
[(ngModel)]="licensedIn.state"
optionLabel="name"
optionValue="value"
[showClear]="true"
placeholder="State"
[ngStyle]="{ width: '100%' }"
></p-dropdown>
</div>
<div class="flex col-12 md:col-6">
<input id="registerNo" type="text" pInputText [(ngModel)]="licensedIn.registerNo" placeholder="Licence Number" />
</div>
</div>
}

View File

@@ -10,7 +10,7 @@ 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 { AutoCompleteCompleteEvent, Invoice, 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';
@@ -36,14 +36,13 @@ export class AccountComponent {
user: User;
subscriptions: Array<Subscription>;
userSubscriptions: Array<Subscription> = [];
maxFileSize = 1000000;
maxFileSize = 15000000;
companyLogoUrl: string;
profileUrl: string;
type: 'company' | 'profile';
dialogRef: DynamicDialogRef | undefined;
environment = environment;
editorModules = TOOLBAR_OPTIONS;
userLicensedIn: KeyValue[];
constructor(
public userService: UserService,
private subscriptionService: SubscriptionsService,
@@ -57,30 +56,26 @@ export class AccountComponent {
public dialogService: DialogService,
) {}
async ngOnInit() {
const keycloakUser = this.userService.getKeycloakUser();
const email = keycloakUser.email;
try {
this.user = await this.userService.getByMail(email);
} catch (e) {
this.user = { email, firstname: keycloakUser.firstname, lastname: keycloakUser.lastname };
this.user = await this.userService.save(this.user);
if (this.id) {
this.user = await this.userService.getById(this.id);
} else {
const keycloakUser = this.userService.getKeycloakUser();
const email = keycloakUser.email;
try {
this.user = await this.userService.getByMail(email);
} catch (e) {
this.user = { email, firstname: keycloakUser.firstname, lastname: keycloakUser.lastname, areasServed: [], licensedIn: [] };
this.user = await this.userService.save(this.user);
}
}
this.userLicensedIn = this.user.licensedIn
? 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.profileUrl = this.user.hasProfile ? `pictures/profile/${this.user.id}.avif` : `/assets/images/placeholder.png`;
this.companyLogoUrl = this.user.hasCompanyLogo ? `pictures/logo/${this.user.id}.avif` : `/assets/images/placeholder.png`;
this.profileUrl = this.user.hasProfile ? `/pictures/profile/${this.user.id}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
this.companyLogoUrl = this.user.hasCompanyLogo ? `/pictures/logo/${this.user.id}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
}
printInvoice(invoice: Invoice) {}
async updateProfile(user: User) {
this.user.licensedIn = this.userLicensedIn.map(l => `${l.name}|${l.value}`);
await this.userService.save(this.user);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Acount changes have been persisted', life: 3000 });
}
@@ -104,12 +99,17 @@ export class AccountComponent {
this.suggestions = result.map(r => `${r.city} - ${r.state_code}`).slice(0, 5);
}
addLicence() {
this.userLicensedIn.push({ name: '', value: '' });
this.user.licensedIn.push({ registerNo: '', state: '' });
}
removeLicence() {
this.userLicensedIn.splice(this.user.licensedIn.length - 2, 1);
this.user.licensedIn.splice(this.user.licensedIn.length - 1, 1);
}
addArea() {
this.user.areasServed.push({ county: '', state: '' });
}
removeArea() {
this.user.areasServed.splice(this.user.areasServed.length - 1, 1);
}
select(event: any, type: 'company' | 'profile') {
const imageUrl = URL.createObjectURL(event.files[0]);
this.type = type;
@@ -142,11 +142,12 @@ export class AccountComponent {
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()}`;
this.companyLogoUrl = `pictures/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()}`;
this.profileUrl = `pictures/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`;
}
await this.userService.save(this.user);
}
},
error => console.error('Fehler beim Upload:', error),

View File

@@ -66,27 +66,27 @@
<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>
<p-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></p-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="salesRevenue" class="block font-medium text-900 mb-2">Sales Revenue</label>
<app-inputNumber mode="currency" currency="USD" inputId="salesRevenue" [(ngModel)]="listing.salesRevenue"></app-inputNumber>
<p-inputNumber mode="currency" currency="USD" inputId="salesRevenue" [(ngModel)]="listing.salesRevenue"></p-inputNumber>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="cashFlow" class="block font-medium text-900 mb-2">Cash Flow</label>
<app-inputNumber mode="currency" currency="USD" inputId="cashFlow" [(ngModel)]="listing.cashFlow"></app-inputNumber>
<p-inputNumber mode="currency" currency="USD" inputId="cashFlow" [(ngModel)]="listing.cashFlow"></p-inputNumber>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="employees" class="block font-medium text-900 mb-2">Years Established Since</label>
<app-inputNumber mode="decimal" inputId="established" [(ngModel)]="listing.established"></app-inputNumber>
<label for="established" class="block font-medium text-900 mb-2">Years Established Since</label>
<p-inputNumber mode="decimal" inputId="established" [(ngModel)]="listing.established"></p-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="employees" class="block font-medium text-900 mb-2">Employees</label>
<app-inputNumber mode="decimal" inputId="employees" [(ngModel)]="listing.employees"></app-inputNumber>
<p-inputNumber mode="decimal" inputId="employees" [(ngModel)]="listing.employees"></p-inputNumber>
</div>
</div>
<div class="grid">
@@ -119,7 +119,7 @@
</div>
<div class="mb-4 col-12 md:col-6">
<label for="internalListingNumber" class="block font-medium text-900 mb-2">Internal Listing Number</label>
<app-inputNumber mode="decimal" inputId="internalListingNumber" type="text" [(ngModel)]="listing.internalListingNumber"></app-inputNumber>
<p-inputNumber mode="decimal" inputId="internalListingNumber" type="text" [(ngModel)]="listing.internalListingNumber"></p-inputNumber>
</div>
</div>
<div class="mb-4">