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

geo coding, user service, listing for business

Browse Source
This commit is contained in:
Andreas Knuth
2024-03-10 20:59:23 +01:00
parent 06f349d1c3
commit 6ad40b6dca
59 changed files with 120466 additions and 687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,41 +8,90 @@
<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">
<!-- <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">First Name</label>
<input id="state" type="text" pInputText [(ngModel)]="user.firstname">
</div>
<div class="mb-4">
<label for="state" class="block font-medium text-900 mb-2">Last Name</label>
<input id="state" type="text" pInputText [(ngModel)]="user.lastname">
</div>
</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" pInputText [(ngModel)]="user.email">
<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="mb-4">
<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">
<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 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>
<textarea id="companyOverview" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="user.companyOverview"></textarea>
</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 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>
</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 class="mb-4">
<label for="state" class="block font-medium text-900 mb-2">New Password</label>
<p class="font-italic text-sm line-height-1">If you would like to change the password type a new one. Otherwise leave this blank.</p>
<input id="state" type="text" pInputText>
<p class="font-italic text-sm line-height-1">Password repetition</p>
<input id="state" type="text" pInputText>
</div>
</div> -->
<div>
<button pButton pRipple label="Update Profile" class="w-auto" (click)="updateProfile(user)"></button>
</div>
</div>
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Profile Picture</span>
<img [src]="imageUrl" (error)="setImageToFallback($event)" class="rounded-image"/>
<!-- <p-image src="http://localhost:3000/public/user.png" alt="Image" width="10rem" [preview]="true"></p-image> -->
<!-- <button pButton type="button" icon="pi pi-pencil" class="p-button-rounded -mt-4"></button> -->
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUpload($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
<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" (error)="setImageToFallback($event)" class="rounded-image"/>
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUploadCompanyLogo($event)" [auto]="true" 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" (error)="setImageToFallback($event)" class="rounded-image"/>
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUploadProfilePicture($event)" [auto]="true" 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>

5
bizmatch/src/app/pages/subscription/account/account.component.scss
View File

@@ -6,4 +6,7 @@
padding: 1px 1px;
object-fit: contain;
}
.wfull{
width: 100%;
}

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

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { ChangeDetectorRef, Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
@@ -23,7 +23,9 @@ import { lastValueFrom } from 'rxjs';
import { MessageService } from 'primeng/api';
import { environment } from '../../../../environments/environment';
import { FileUploadModule } from 'primeng/fileupload';
import { Invoice, Subscription, User } from '../../../../../../common-models/src/main.model';
import { AutoCompleteCompleteEvent, Invoice, Subscription, User } from '../../../../../../common-models/src/main.model';
import { GeoService } from '../../../services/geo.service';
import { ChangeDetectionStrategy } from '@angular/compiler';
@Component({
@@ -41,24 +43,58 @@ export class AccountComponent {
userSubscriptions:Array<Subscription>=[];
uploadUrl:string;
maxFileSize=1000000;
imageUrl:string;
constructor(public userService: UserService, private subscriptionService: SubscriptionsService,private messageService: MessageService) {
companyLogoUrl:string;
profileUrl:string;
constructor(public userService: UserService,
private subscriptionService: SubscriptionsService,
private messageService: MessageService,
private geoService:GeoService,
public selectOptions:SelectOptionsService,
private cdref:ChangeDetectorRef) {
this.user=this.userService.getUser()
}
async ngOnInit(){
this.imageUrl = `${environment.apiBaseUrl}/profile_${this.user.id}`
this.profileUrl = `${environment.apiBaseUrl}/profile_${this.user.id}`
this.companyLogoUrl = `${environment.apiBaseUrl}/profile_${this.user.id}`
this.userSubscriptions=await lastValueFrom(this.subscriptionService.getAllSubscriptions());
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/account/uploadPhoto/${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);
}
printInvoice(invoice:Invoice){}
updateProfile(user:User){
this.messageService.add({ severity: 'warn', summary: 'Information', detail: 'This function is not yet available, please send an email to info@bizmatch.net for changes to your customer data', life: 15000 });
async updateProfile(user:User){
//this.messageService.add({ severity: 'warn', summary: 'Information', detail: 'This function is not yet available, please send an email to info@bizmatch.net for changes to your customer data', life: 15000 });
await this.userService.save(this.user);
}
onUpload(event:any){
onUploadCompanyLogo(event:any){
const uniqueSuffix = '?_ts=' + new Date().getTime();
this.imageUrl = `${environment.apiBaseUrl}/profile_${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
this.companyLogoUrl = `${environment.apiBaseUrl}/company_${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}`;
}
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))
this.suggestions = result.map(r=>`${r.city} - ${r.state_code}`).slice(0,5);
}
addLicence(){
this.user.licensedIn.push({name:'',value:''});
}
removeLicence(){
this.user.licensedIn.splice(this.user.licensedIn.length-2,1);
}
}