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

account changes

Browse Source
This commit is contained in:
Andreas Knuth
2024-06-03 09:35:42 -05:00
parent d488f90f48
commit 3d5b7e3f39
10 changed files with 615 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,10 +8,16 @@
<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 support&#64;bizmatch.net</p>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<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-xs line-height-1">You can only modify your email by contacting us at support&#64;bizmatch.net</p>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="customerType" class="block font-medium text-900 mb-2">Customer Type</label>
<p-dropdown id="customerType" [options]="selectOptions?.customerTypes" [(ngModel)]="user.customerType" optionLabel="name" optionValue="value" placeholder="State" [style]="{ width: '100%' }"></p-dropdown>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
@@ -23,6 +29,7 @@
<input id="lastname" type="text" pInputText [(ngModel)]="user.lastname" />
</div>
</div>
@if (isProfessional){
<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>
@@ -33,6 +40,7 @@
<input id="lastname" type="text" pInputText [(ngModel)]="user.description" />
</div>
</div>
} @if (isProfessional){
<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>
@@ -47,6 +55,14 @@
<p-autoComplete [(ngModel)]="user.companyLocation" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
</div>
</div>
} @else {
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone Number</label>
<p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="user.phoneNumber"></p-inputMask>
</div>
</div>
} @if (isProfessional){
<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">
@@ -59,7 +75,6 @@
<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>
@for (areasServed of user.areasServed; track areasServed){
@@ -118,11 +133,12 @@
<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>
@if (isProfessional){
<div>
<div class="flex flex-column align-items-center flex-or mb-8">
<span class="font-medium text-900 mb-2">Company Logo</span>
@@ -172,6 +188,7 @@
></p-fileUpload>
</div>
</div>
}
</div>
<div class="text-900 font-semibold text-lg mt-3">Membership Level</div>
<p-divider></p-divider>

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

@@ -75,7 +75,7 @@ export class AccountComponent {
try {
this.user = await this.userService.getByMail(email);
} catch (e) {
this.user = { email, firstname: keycloakUser.firstName, lastname: keycloakUser.lastName, areasServed: [], licensedIn: [], companyOverview: '', offeredServices: '' };
this.user = { email, firstname: keycloakUser.firstName, lastname: keycloakUser.lastName, areasServed: [], licensedIn: [], companyOverview: '', offeredServices: '', customerType: 'broker' };
this.user = await this.userService.save(this.user);
}
}
@@ -121,6 +121,9 @@ export class AccountComponent {
removeArea() {
this.user.areasServed.splice(this.user.areasServed.length - 1, 1);
}
get isProfessional() {
return this.user.customerType === 'broker' || this.user.customerType === 'professional';
}
select(event: any, type: 'company' | 'profile') {
const imageUrl = URL.createObjectURL(event.files[0]);
this.type = type;

74
bizmatch/src/app/services/select-options.service.ts
View File

@@ -1,9 +1,8 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { InitEditableRow } from 'primeng/table';
import { Injectable } from '@angular/core';
import { lastValueFrom } from 'rxjs';
import { environment } from '../../environments/environment';
import { KeyValue, KeyValueStyle } from '../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../environments/environment';
@Injectable({
providedIn: 'root',
@@ -13,67 +12,58 @@ export class SelectOptionsService {
constructor(private http: HttpClient) {}
async init() {
const allSelectOptions = await lastValueFrom(
this.http.get<any>(`${this.apiBaseUrl}/bizmatch/select-options`)
);
const allSelectOptions = await lastValueFrom(this.http.get<any>(`${this.apiBaseUrl}/bizmatch/select-options`));
this.typesOfBusiness = allSelectOptions.typesOfBusiness;
this.prices = allSelectOptions.prices;
this.listingCategories = allSelectOptions.listingCategories;
this.categories = allSelectOptions.categories;
this.customerTypes = allSelectOptions.customerTypes;
this.states = allSelectOptions.locations;
this.typesOfCommercialProperty = allSelectOptions.typesOfCommercialProperty
this.gender = allSelectOptions.gender;
this.typesOfCommercialProperty = allSelectOptions.typesOfCommercialProperty;
}
public typesOfBusiness: Array<KeyValueStyle>;
public typesOfCommercialProperty: Array<KeyValueStyle>;
public prices: Array<KeyValue>;
public listingCategories: Array<KeyValue>;
public categories: Array<KeyValueStyle>;
public customerTypes: Array<KeyValue>;
public gender: Array<KeyValue>;
public states: Array<any>;
getState(value:string):string{
return this.states.find(l=>l.value===value)?.name
getState(value: string): string {
return this.states.find(l => l.value === value)?.name;
}
getBusiness(value:number):string{
return this.typesOfBusiness.find(t=>t.value===String(value))?.name
getBusiness(value: number): string {
return this.typesOfBusiness.find(t => t.value === String(value))?.name;
}
getCommercialProperty(value:number):string{
return this.typesOfCommercialProperty.find(t=>t.value===String(value))?.name
getCommercialProperty(value: number): string {
return this.typesOfCommercialProperty.find(t => t.value === String(value))?.name;
}
getListingsCategory(value:string):string{
return this.listingCategories.find(l=>l.value===value)?.name
getListingsCategory(value: string): string {
return this.listingCategories.find(l => l.value === value)?.name;
}
getCategory(value:string):string{
return this.categories.find(c=>c.value===value)?.name
getCustomerType(value: string): string {
return this.customerTypes.find(c => c.value === value)?.name;
}
getIcon(value:string):string{
return this.categories.find(c=>c.value===value)?.icon
getGender(value: string): string {
return this.gender.find(c => c.value === value)?.name;
}
getTextColor(value:string):string{
return this.categories.find(c=>c.value===value)?.textColorClass
getIconType(value: string): string {
return this.typesOfBusiness.find(c => c.value === value)?.icon;
}
getBgColor(value:string):string{
return this.categories.find(c=>c.value===value)?.bgColorClass
getTextColorType(value: string): string {
return this.typesOfBusiness.find(c => c.value === value)?.textColorClass;
}
getIconAndTextColor(value:string):string{
const category = this.categories.find(c=>c.value===value)
return `${category?.icon} ${category?.textColorClass}`
getBgColorType(value: number): string {
return this.typesOfBusiness.find(c => c.value === String(value))?.bgColorClass;
}
getIconType(value:string):string{
return this.typesOfBusiness.find(c=>c.value===value)?.icon
}
getTextColorType(value:string):string{
return this.typesOfBusiness.find(c=>c.value===value)?.textColorClass
}
getBgColorType(value:number):string{
return this.typesOfBusiness.find(c=>c.value===String(value))?.bgColorClass
}
getIconAndTextColorType(value:number):string{
const category = this.typesOfBusiness.find(c=>c.value===String(value))
return `${category?.icon} ${category?.textColorClass}`
getIconAndTextColorType(value: number): string {
const category = this.typesOfBusiness.find(c => c.value === String(value));
return `${category?.icon} ${category?.textColorClass}`;
}
}