broker direcrtory renewed, imageservice updated, demo data
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
|
||||
<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>
|
||||
@@ -16,7 +15,8 @@
|
||||
<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@bizmatch.net</p>
|
||||
<p class="font-italic text-sm line-height-1">You can only modify your email by contacting us at
|
||||
emailchange@bizmatch.net</p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="mb-4 col-12 md:col-6">
|
||||
@@ -48,60 +48,109 @@
|
||||
<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>
|
||||
<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>
|
||||
<textarea id="companyOverview" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="user.companyOverview"></textarea>
|
||||
</div>
|
||||
<p-editor [(ngModel)]="user.companyOverview" [style]="{ height: '320px' }">
|
||||
<ng-template pTemplate="header">
|
||||
<span class="ql-formats">
|
||||
<button type="button" class="ql-bold" aria-label="Bold"></button>
|
||||
<button type="button" class="ql-italic" aria-label="Italic"></button>
|
||||
<button type="button" class="ql-underline" aria-label="Underline"></button>
|
||||
<button value="ordered" aria-label="Ordered List" type="button"
|
||||
class="ql-list"></button>
|
||||
<button value="bullet" aria-label="Unordered List" type="button"
|
||||
class="ql-list"></button>
|
||||
</span>
|
||||
</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' }">
|
||||
<ng-template pTemplate="header">
|
||||
<span class="ql-formats">
|
||||
<button type="button" class="ql-bold" aria-label="Bold"></button>
|
||||
<button type="button" class="ql-italic" aria-label="Italic"></button>
|
||||
<button type="button" class="ql-underline" aria-label="Underline"></button>
|
||||
<button value="ordered" aria-label="Ordered List" type="button"
|
||||
class="ql-list"></button>
|
||||
<button value="bullet" aria-label="Unordered List" type="button"
|
||||
class="ql-list"></button>
|
||||
</span>
|
||||
</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 >
|
||||
<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 user.licensedIn; 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>
|
||||
<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">
|
||||
<input id="companyWebsite" type="text" pInputText [(ngModel)]="licensedIn.value"
|
||||
placeholder="Licence Number">
|
||||
</div>
|
||||
</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>
|
||||
<p-button icon="pi pi-minus" severity="danger" (click)="removeLicence()"
|
||||
[disabled]="user.licensedIn?.length<2"></p-button>
|
||||
<span class="text-xs"> (Add more licenses or remove existing ones.)</span>
|
||||
<!-- <button pButton pRipple label="Add Licence" class="w-auto" (click)="addLicence()"></button> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button pButton pRipple label="Update Profile" class="w-auto" (click)="updateProfile(user)"></button>
|
||||
<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>
|
||||
<img [src]="companyLogoUrl" class="rounded-logo"/>
|
||||
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadCompanyUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUploadCompanyLogo($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
|
||||
@if(user.hasCompanyLogo){
|
||||
<img src="{{environment.apiBaseUrl}}/logo/{{user.id}}.avif" 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>
|
||||
<img [src]="profileUrl" class="rounded-profile"/>
|
||||
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadProfileUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUploadProfilePicture($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
|
||||
@if(user.hasProfile){
|
||||
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif" 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">
|
||||
<p-table [value]="userSubscriptions" [tableStyle]="{ 'min-width': '50rem' }" dataKey="id">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 5rem"></th>
|
||||
@@ -116,7 +165,9 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -132,31 +183,51 @@
|
||||
<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>
|
||||
<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>
|
||||
<p-dialog header="Edit Image" [visible]="imageUrl" [modal]="true" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
|
||||
<!-- <app-cropper #cropper [imageUrl]="imageUrl"></app-cropper> -->
|
||||
<angular-cropper #cropper [imageUrl]="imageUrl" [cropperOptions]="config"></angular-cropper>
|
||||
<ng-template pTemplate="footer" let-config="config">
|
||||
<div class="flex justify-content-between">
|
||||
@if(type==='company'){
|
||||
<div>
|
||||
<p-selectButton [options]="stateOptions" [ngModel]="value" (ngModelChange)="changeAspectRation($event)" optionLabel="label" optionValue="value"></p-selectButton>
|
||||
</div>
|
||||
} @else {
|
||||
<div></div>
|
||||
}
|
||||
<div>
|
||||
<p-button icon="pi" (click)="cancelUpload()" label="Cancel" [outlined]="true"></p-button>
|
||||
<p-button icon="pi pi-check" (click)="sendImage()" label="Finish" pAutoFocus [autofocus]="true"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ChangeDetectorRef, Component } from '@angular/core';
|
||||
import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
@@ -15,56 +15,72 @@ 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 } from '@angular/common/http';
|
||||
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 { MessageService } from 'primeng/api';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { FileUploadModule } from 'primeng/fileupload';
|
||||
import { AutoCompleteCompleteEvent, Invoice, Subscription, User } from '../../../../../../common-models/src/main.model';
|
||||
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
|
||||
import { AutoCompleteCompleteEvent, Invoice, KeyValue, KeyValueRatio, Subscription, User } from '../../../../../../common-models/src/main.model';
|
||||
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';
|
||||
@Component({
|
||||
selector: 'app-account',
|
||||
standalone: true,
|
||||
// imports: [CommonModule, StyleClassModule, MenuAccountComponent, DividerModule,ButtonModule, TableModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule ],
|
||||
imports: [SharedModule,FileUploadModule],
|
||||
imports: [SharedModule,FileUploadModule,EditorModule,AngularCropperjsModule,DialogModule,SelectButtonModule],
|
||||
providers:[MessageService],
|
||||
templateUrl: './account.component.html',
|
||||
styleUrl: './account.component.scss'
|
||||
})
|
||||
export class AccountComponent {
|
||||
@ViewChild(CropperComponent) public angularCropper: CropperComponent;
|
||||
@ViewChild('companyUpload') public companyUpload: FileUpload;
|
||||
@ViewChild('profileUpload') public profileUpload: FileUpload;
|
||||
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
|
||||
user:User;
|
||||
subscriptions:Array<Subscription>;
|
||||
userSubscriptions:Array<Subscription>=[];
|
||||
uploadProfileUrl:string;
|
||||
uploadCompanyUrl:string;
|
||||
maxFileSize=1000000;
|
||||
companyLogoUrl:string;
|
||||
profileUrl:string;
|
||||
imageUrl;
|
||||
type:'company'|'profile'
|
||||
stateOptions:KeyValueRatio[]=[
|
||||
{label:'16/9',value:16/9},
|
||||
{label:'1/1',value:1},
|
||||
{label:'2/3',value:2/3},
|
||||
]
|
||||
value:number = this.stateOptions[0].value;
|
||||
config={aspectRatio: this.value}
|
||||
environment=environment
|
||||
constructor(public userService: UserService,
|
||||
private subscriptionService: SubscriptionsService,
|
||||
private messageService: MessageService,
|
||||
private geoService:GeoService,
|
||||
public selectOptions:SelectOptionsService,
|
||||
private cdref:ChangeDetectorRef) {
|
||||
this.user=this.userService.getUser()
|
||||
private cdref:ChangeDetectorRef,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private loadingService:LoadingService,
|
||||
private imageUploadService: ImageService) {
|
||||
|
||||
}
|
||||
async ngOnInit(){
|
||||
|
||||
this.user=await this.userService.getById(this.id);
|
||||
this.userSubscriptions=await lastValueFrom(this.subscriptionService.getAllSubscriptions());
|
||||
this.uploadProfileUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadProfile/${this.user.id}`;
|
||||
this.uploadCompanyUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadCompanyLogo/${this.user.id}`;
|
||||
if (!this.user.licensedIn || this.user.licensedIn?.length===0){
|
||||
this.user.licensedIn = [{name:'',value:''}]
|
||||
}
|
||||
this.user=await this.userService.getById(this.user.id);
|
||||
this.profileUrl = this.user.hasProfile?`${environment.apiBaseUrl}/profile/${this.user.id}`:`/assets/images/placeholder.png`
|
||||
this.companyLogoUrl = this.user.hasCompanyLogo?`${environment.apiBaseUrl}/logo/${this.user.id}`:`/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){}
|
||||
|
||||
@@ -99,4 +115,60 @@ export class AccountComponent {
|
||||
removeLicence(){
|
||||
this.user.licensedIn.splice(this.user.licensedIn.length-2,1);
|
||||
}
|
||||
|
||||
select(event:any,type:'company'|'profile'){
|
||||
this.imageUrl = URL.createObjectURL(event.files[0]);
|
||||
this.type=type
|
||||
this.config={aspectRatio: type==='company'?this.stateOptions[0].value:this.stateOptions[2].value}
|
||||
}
|
||||
sendImage(){
|
||||
this.imageUrl=null
|
||||
this.loadingService.startLoading('uploadImage');
|
||||
this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
|
||||
if (this.type==='company'){
|
||||
this.imageUploadService.uploadCompanyLogo(blob,this.user.id).subscribe(async(event) => {
|
||||
if (event.type === HttpEventType.UploadProgress) {
|
||||
// Berechne und zeige den Fortschritt basierend auf event.loaded und event.total
|
||||
const progress = event.total ? event.loaded / event.total : 0;
|
||||
console.log(`Upload-Fortschritt: ${progress * 100}%`);
|
||||
// Hier könntest du beispielsweise eine Fortschrittsanzeige aktualisieren
|
||||
} else if (event.type === HttpEventType.Response) {
|
||||
console.log('Upload abgeschlossen', event.body);
|
||||
this.companyUpload.clear();
|
||||
this.loadingService.stopLoading('uploadImage');
|
||||
this.companyLogoUrl=`${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`
|
||||
}
|
||||
}, error => console.error('Fehler beim Upload:', error));
|
||||
} else {
|
||||
this.imageUploadService.uploadProfileImage(blob,this.user.id).subscribe(async(event) => {
|
||||
if (event.type === HttpEventType.UploadProgress) {
|
||||
// Berechne und zeige den Fortschritt basierend auf event.loaded und event.total
|
||||
const progress = event.total ? event.loaded / event.total : 0;
|
||||
console.log(`Upload-Fortschritt: ${progress * 100}%`);
|
||||
// Hier könntest du beispielsweise eine Fortschrittsanzeige aktualisieren
|
||||
} else if (event.type === HttpEventType.Response) {
|
||||
console.log('Upload abgeschlossen', event.body);
|
||||
this.profileUpload.clear();
|
||||
this.loadingService.stopLoading('uploadImage');
|
||||
this.profileUrl=`${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`
|
||||
}
|
||||
}, error => console.error('Fehler beim Upload:', error));
|
||||
}
|
||||
|
||||
|
||||
// this.fileUpload.upload();
|
||||
}, 'image/png');
|
||||
}
|
||||
cancelUpload(){
|
||||
this.imageUrl=null
|
||||
if (this.type==='company'){
|
||||
this.companyUpload.clear();
|
||||
} else {
|
||||
this.profileUpload.clear();
|
||||
}
|
||||
}
|
||||
changeAspectRation(ratio:number){
|
||||
this.config={aspectRatio: ratio}
|
||||
this.angularCropper.cropper.setAspectRatio(ratio);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -134,7 +134,7 @@ export class EditListingComponent {
|
||||
this.loadingService.startLoading('uploadImage');
|
||||
this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
|
||||
|
||||
this.imageUploadService.uploadImage(blob).subscribe(async(event) => {
|
||||
this.imageUploadService.uploadPropertyImage(blob,this.listing.id).subscribe(async(event) => {
|
||||
if (event.type === HttpEventType.UploadProgress) {
|
||||
// Berechne und zeige den Fortschritt basierend auf event.loaded und event.total
|
||||
const progress = event.total ? event.loaded / event.total : 0;
|
||||
|
||||
Reference in New Issue
Block a user