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

update

Browse Source
This commit is contained in:
Andreas Knuth
2025-04-06 21:49:44 +02:00
parent 7d64ee11bf
commit 466e1dcdce
44 changed files with 1780 additions and 1520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

732
bizmatch-client/src/app/pages/account/account.component.html
View File

@@ -1,55 +1,66 @@
<div class="container mx-auto p-4">
@if (user){
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
<form #accountForm="ngForm" class="space-y-4">
<h2 class="text-2xl font-bold mb-4">Account Details</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<form #accountForm="ngForm" class="space-y-6">
<h2 class="text-2xl font-bold mb-6">Account Details</h2>
<!-- E-Mail und Bilder -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2">
<label for="email" class="block text-sm font-medium text-gray-700">E-mail (required)</label>
<input type="email" id="email" name="email" [(ngModel)]="user.email" disabled class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
<label for="email" class="block text-gray-700 mb-2 font-medium">E-mail (required)</label>
<div class="relative">
<input type="email" id="email" name="email" [(ngModel)]="user.email" disabled class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg bg-gray-100 focus:outline-none focus:border-black focus:ring-0" />
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<p class="text-xs text-gray-500 mt-1">You can only modify your email by contacting us at support&#64;bizmatch.net</p>
</div>
@if (isProfessional || (authService.isAdmin() | async)){
<div class="flex flex-row items-center justify-around md:space-x-4">
<!-- Company Logo -->
<div class="flex h-full justify-between flex-col">
<p class="text-sm font-medium text-gray-700 mb-1">Company Logo</p>
<div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
<div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative border border-gray-200 overflow-hidden">
@if(user?.hasCompanyLogo){
<img src="{{ companyLogoUrl }}" alt="Company logo" class="max-w-full max-h-full" />
<img src="{{ companyLogoUrl }}" alt="Company logo" class="max-w-full max-h-full object-cover" />
<div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (click)="deleteConfirm('logo')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
} @else {
<img src="assets/images/placeholder.png" class="max-w-full max-h-full" />
<img src="assets/images/placeholder.png" class="max-w-full max-h-full object-cover" />
}
</div>
<button
type="button"
class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
class="mt-2 w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:border-black focus:ring-0 transition-colors duration-200"
(click)="uploadCompanyLogo()"
>
Upload
</button>
</div>
<!-- Profile Picture -->
<div class="flex h-full justify-between flex-col">
<p class="text-sm font-medium text-gray-700 mb-1">Your Profile Picture</p>
<div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
<div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative border border-gray-200 overflow-hidden">
@if(user?.hasProfile){
<img src="{{ profileUrl }}" alt="Profile picture" class="max-w-full max-h-full" />
<img src="{{ profileUrl }}" alt="Profile picture" class="max-w-full max-h-full object-cover" />
<div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (click)="deleteConfirm('profile')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
} @else {
<img src="assets/images/placeholder.png" class="max-w-full max-h-full" />
<img src="assets/images/placeholder.png" class="max-w-full max-h-full object-cover" />
}
</div>
<button
type="button"
class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
class="mt-2 w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:border-black focus:ring-0 transition-colors duration-200"
(click)="uploadProfile()"
>
Upload
@@ -59,258 +70,481 @@
}
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="First Name" name="firstname" [(ngModel)]="user.firstname"></app-validated-input>
<app-validated-input label="Last Name" name="lastname" [(ngModel)]="user.lastname"></app-validated-input>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- <div>
<label for="customerType" class="block text-sm font-medium text-gray-700">Customer Type</label>
<select id="customerType" name="customerType" [(ngModel)]="user.customerType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
<option *ngFor="let type of customerTypes" [value]="type">{{ type | titlecase }}</option>
</select>
</div> -->
@if ((authService.isAdmin() | async) && !id){
<!-- Name Fields -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- First Name -->
<div>
<label for="customerType" class="block text-sm font-medium text-gray-700">User Type</label>
<span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span>
</div>
}
<app-validated-select [disabled]="true" label="Customer Type" name="customerType" [(ngModel)]="user.customerType" [options]="customerTypeOptions"></app-validated-select>
@if (isProfessional){
<!-- <div>
<label for="customerSubType" class="block text-sm font-medium text-gray-700">Professional Type</label>
<select id="customerSubType" name="customerSubType" [(ngModel)]="user.customerSubType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
<option *ngFor="let subType of customerSubTypes" [value]="subType">{{ subType | titlecase }}</option>
</select>
</div> -->
<app-validated-select label="Professional Type" name="customerSubType" [(ngModel)]="user.customerSubType" [options]="customerSubTypeOptions"></app-validated-select>
}
</div>
@if (isProfessional){
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- <div>
<label for="companyName" class="block text-sm font-medium text-gray-700">Company Name</label>
<input type="text" id="companyName" name="companyName" [(ngModel)]="user.companyName" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div> -->
<!-- <div>
<label for="description" class="block text-sm font-medium text-gray-700">Describe yourself</label>
<input type="text" id="description" name="description" [(ngModel)]="user.description" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div> -->
<app-validated-input label="Company Name" name="companyName" [(ngModel)]="user.companyName"></app-validated-input>
<app-validated-input label="Describe Yourself" name="description" [(ngModel)]="user.description"></app-validated-input>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- <div>
<label for="phoneNumber" class="block text-sm font-medium text-gray-700">Your Phone Number</label>
<input type="tel" id="phoneNumber" name="phoneNumber" [(ngModel)]="user.phoneNumber" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
<div>
<label for="companyWebsite" class="block text-sm font-medium text-gray-700">Company Website</label>
<input type="url" id="companyWebsite" name="companyWebsite" [(ngModel)]="user.companyWebsite" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
<div>
<label for="companyLocation" class="block text-sm font-medium text-gray-700">Company Location</label>
<input type="text" id="companyLocation" name="companyLocation" [(ngModel)]="user.companyLocation" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div> -->
<app-validated-input label="Your Phone Number" name="phoneNumber" [(ngModel)]="user.phoneNumber" mask="(000) 000-0000"></app-validated-input>
<app-validated-input label="Company Website" name="companyWebsite" [(ngModel)]="user.companyWebsite"></app-validated-input>
<!-- <app-validated-input label="Company Location" name="companyLocation" [(ngModel)]="user.companyLocation"></app-validated-input> -->
<!-- <app-validated-city label="Company Location" name="location" [(ngModel)]="user.location"></app-validated-city> -->
<app-validated-location label="Company Location" name="location" [(ngModel)]="user.location"></app-validated-location>
</div>
<!-- <div>
<label for="companyOverview" class="block text-sm font-medium text-gray-700">Company Overview</label>
<quill-editor [(ngModel)]="user.companyOverview" name="companyOverview" [modules]="quillModules"></quill-editor>
</div> -->
<div>
<app-validated-quill label="Company Overview" name="companyOverview" [(ngModel)]="user.companyOverview"></app-validated-quill>
</div>
<div>
<!-- <label for="offeredServices" class="block text-sm font-medium text-gray-700">Services We Offer</label>
<quill-editor [(ngModel)]="user.offeredServices" name="offeredServices" [modules]="quillModules"></quill-editor> -->
<app-validated-quill label="Services We Offer" name="offeredServices" [(ngModel)]="user.offeredServices"></app-validated-quill>
</div>
<div>
<h3 class="text-lg font-medium text-gray-700 mb-2 relative w-fit">
Areas We Serve @if(getValidationMessage('areasServed')){
<div
[attr.data-tooltip-target]="tooltipTargetAreasServed"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip [id]="tooltipTargetAreasServed" [text]="getValidationMessage('areasServed')"></app-tooltip>
}
</h3>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-6">
<label for="state" class="block text-sm font-medium text-gray-700">State</label>
</div>
<div class="col-span-5">
<label for="county" class="block text-sm font-medium text-gray-700">County</label>
</div>
</div>
@for (areasServed of user.areasServed; track areasServed; let i=$index){
<div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
<div class="col-span-6">
<ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="areasServed.state" (ngModelChange)="setState(i, $event)" name="areasServed_state{{ i }}"> </ng-select>
</div>
<div class="col-span-5">
<!-- <input type="text" id="county{{ i }}" name="county{{ i }}" [(ngModel)]="areasServed.county" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" /> -->
<app-validated-county name="county{{ i }}" [(ngModel)]="areasServed.county" labelClasses="text-gray-900 font-medium" [state]="areasServed.state" [readonly]="!areasServed.state"></app-validated-county>
</div>
<div class="col-span-1">
<button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8" (click)="removeArea(i)">-</button>
</div>
</div>
}
<div class="mt-2">
<button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8" (click)="addArea()">+</button>
<span class="text-sm text-gray-500 ml-2">[Add more Areas or remove existing ones.]</span>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-700 mb-2 relative">
Licensed In@if(getValidationMessage('licensedIn')){
<div
[attr.data-tooltip-target]="tooltipTargetLicensed"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip [id]="tooltipTargetLicensed" [text]="getValidationMessage('licensedIn')"></app-tooltip>
}
</h3>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-6">
<label for="state" class="block text-sm font-medium text-gray-700">State</label>
</div>
<div class="col-span-5">
<label for="county" class="block text-sm font-medium text-gray-700">License Number</label>
</div>
</div>
@for (licensedIn of user.licensedIn; track licensedIn; let i=$index){
<div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
<div class="col-span-6">
<ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="licensedIn.state" name="licensedIn_state{{ i }}"> </ng-select>
</div>
<div class="col-span-5">
<label for="firstname" class="block text-gray-700 mb-2 font-medium flex items-center">
First Name
<div *ngIf="validationService.hasMessage('firstname')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('firstname')?.message }}
</div>
</div>
</label>
<div class="relative">
<input
type="text"
id="licenseNumber{{ i }}"
name="licenseNumber{{ i }}"
[(ngModel)]="licensedIn.registerNo"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
id="firstname"
name="firstname"
[(ngModel)]="user.firstname"
placeholder="Enter your first name"
class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
[class.border-red-500]="validationService.hasMessage('firstname')"
/>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8" (click)="removeLicence(i)">-</button>
</div>
<!-- Last Name -->
<div>
<label for="lastname" class="block text-gray-700 mb-2 font-medium flex items-center">
Last Name
<div *ngIf="validationService.hasMessage('lastname')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('lastname')?.message }}
</div>
</div>
</label>
<div class="relative">
<input
type="text"
id="lastname"
name="lastname"
[(ngModel)]="user.lastname"
placeholder="Enter your last name"
class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
[class.border-red-500]="validationService.hasMessage('lastname')"
/>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
</div>
</div>
<!-- Customer Type Fields -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@if ((authService.isAdmin() | async) && !id){
<div>
<label for="customerType" class="block text-gray-700 mb-2 font-medium">User Type</label>
<span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span>
</div>
}
<div class="mt-2">
<button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8" (click)="addLicence()">+</button>
<span class="text-sm text-gray-500 ml-2">[Add more licenses or remove existing ones.]</span>
<!-- Customer Type -->
<div>
<label for="customerType" class="block text-gray-700 mb-2 font-medium flex items-center">
Customer Type
<div *ngIf="validationService.hasMessage('customerType')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('customerType')?.message }}
</div>
</div>
</label>
<div class="relative">
<select
id="customerType"
name="customerType"
[(ngModel)]="user.customerType"
disabled
class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg bg-gray-100 focus:outline-none focus:border-black focus:ring-0 appearance-none"
[class.border-red-500]="validationService.hasMessage('customerType')"
>
<option *ngFor="let option of customerTypeOptions" [value]="option.value">{{ option.label }}</option>
</select>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
@if (isProfessional){
<!-- Professional Type -->
<div>
<label for="customerSubType" class="block text-gray-700 mb-2 font-medium flex items-center">
Professional Type
<div *ngIf="validationService.hasMessage('customerSubType')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('customerSubType')?.message }}
</div>
</div>
</label>
<div class="relative">
<select
id="customerSubType"
name="customerSubType"
[(ngModel)]="user.customerSubType"
class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0 appearance-none"
[class.border-red-500]="validationService.hasMessage('customerSubType')"
>
<option *ngFor="let option of customerSubTypeOptions" [value]="option.value">{{ option.label }}</option>
</select>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
}
</div>
@if (isProfessional){
<!-- Company Info -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Company Name -->
<div>
<label for="companyName" class="block text-gray-700 mb-2 font-medium flex items-center">
Company Name
<div *ngIf="validationService.hasMessage('companyName')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('companyName')?.message }}
</div>
</div>
</label>
<div class="relative">
<input
type="text"
id="companyName"
name="companyName"
[(ngModel)]="user.companyName"
placeholder="Enter company name"
class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
[class.border-red-500]="validationService.hasMessage('companyName')"
/>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
</div>
<!-- Description -->
<div>
<label for="description" class="block text-gray-700 mb-2 font-medium flex items-center">
Describe Yourself
<div *ngIf="validationService.hasMessage('description')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('description')?.message }}
</div>
</div>
</label>
<div class="relative">
<input
type="text"
id="description"
name="description"
[(ngModel)]="user.description"
placeholder="Short description about yourself"
class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
[class.border-red-500]="validationService.hasMessage('description')"
/>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
</div>
<!-- Contact Info -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Phone Number -->
<div>
<label for="phoneNumber" class="block text-gray-700 mb-2 font-medium flex items-center">
Your Phone Number
<div *ngIf="validationService.hasMessage('phoneNumber')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('phoneNumber')?.message }}
</div>
</div>
</label>
<div class="relative">
<input
type="tel"
id="phoneNumber"
name="phoneNumber"
[(ngModel)]="user.phoneNumber"
mask="(000) 000-0000"
placeholder="(123) 456-7890"
class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
[class.border-red-500]="validationService.hasMessage('phoneNumber')"
/>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
</div>
</div>
<!-- Company Website -->
<div>
<label for="companyWebsite" class="block text-gray-700 mb-2 font-medium flex items-center">
Company Website
<div *ngIf="validationService.hasMessage('companyWebsite')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('companyWebsite')?.message }}
</div>
</div>
</label>
<div class="relative">
<input
type="url"
id="companyWebsite"
name="companyWebsite"
[(ngModel)]="user.companyWebsite"
placeholder="https://example.com"
class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
[class.border-red-500]="validationService.hasMessage('companyWebsite')"
/>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
</div>
<!-- Company Location -->
<div>
<label for="location" class="block text-gray-700 mb-2 font-medium flex items-center">
Company Location
<div *ngIf="validationService.hasMessage('location')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('location')?.message }}
</div>
</div>
</label>
<div class="relative">
<app-validated-location id="location" name="location" [(ngModel)]="user.location" [class.border-red-500]="validationService.hasMessage('location')"></app-validated-location>
</div>
</div>
</div>
<!-- Rich Text Editors -->
<div>
<label for="companyOverview" class="block text-gray-700 mb-2 font-medium flex items-center">
Company Overview
<div *ngIf="validationService.hasMessage('companyOverview')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('companyOverview')?.message }}
</div>
</div>
</label>
<app-validated-quill id="companyOverview" name="companyOverview" [(ngModel)]="user.companyOverview" [class.border-red-500]="validationService.hasMessage('companyOverview')"></app-validated-quill>
</div>
<div>
<label for="offeredServices" class="block text-gray-700 mb-2 font-medium flex items-center">
Services We Offer
<div *ngIf="validationService.hasMessage('offeredServices')" class="ml-2 relative group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('offeredServices')?.message }}
</div>
</div>
</label>
<app-validated-quill id="offeredServices" name="offeredServices" [(ngModel)]="user.offeredServices" [class.border-red-500]="validationService.hasMessage('offeredServices')"></app-validated-quill>
</div>
<!-- Areas We Serve Section -->
<div>
<h3 class="text-lg font-medium text-gray-700 mb-4 relative">
Areas We Serve
<div *ngIf="validationService.hasMessage('areasServed')" class="inline-flex items-center justify-center w-6 h-6 ml-2 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full hover:cursor-pointer relative group">
!
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('areasServed')?.message }}
</div>
</div>
</h3>
<div class="grid grid-cols-12 gap-4 mb-2">
<div class="col-span-6">
<span class="block text-sm font-medium text-gray-700">State</span>
</div>
<div class="col-span-5">
<span class="block text-sm font-medium text-gray-700">County</span>
</div>
<div class="col-span-1"></div>
</div>
@for (areasServed of user.areasServed; track areasServed; let i=$index){
<div class="grid grid-cols-12 gap-4 mb-4">
<div class="col-span-6">
<div class="relative">
<ng-select
[items]="selectOptions?.states"
bindLabel="name"
bindValue="value"
[(ngModel)]="areasServed.state"
(ngModelChange)="setState(i, $event)"
name="areasServed_state{{ i }}"
[class.border-red-500]="validationService.hasMessage('areasServed')"
class="area-state-select"
placeholder="Select state"
></ng-select>
</div>
</div>
<div class="col-span-5">
<app-validated-county name="county{{ i }}" [(ngModel)]="areasServed.county" [state]="areasServed.state" [readonly]="!areasServed.state" [class.border-red-500]="validationService.hasMessage('areasServed')"></app-validated-county>
</div>
<div class="col-span-1 flex items-center">
<button type="button" class="h-10 w-10 bg-red-500 text-white rounded-lg flex items-center justify-center hover:bg-red-600 focus:outline-none focus:border-black focus:ring-0" (click)="removeArea(i)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
</svg>
</button>
</div>
</div>
}
<div class="mt-2 flex items-center">
<button type="button" class="h-10 w-10 bg-green-500 text-white rounded-lg flex items-center justify-center hover:bg-green-600 focus:outline-none focus:border-black focus:ring-0" (click)="addArea()">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
<span class="text-sm text-gray-500 ml-3">[Add more Areas or remove existing ones.]</span>
</div>
</div>
<!-- Licensed In Section -->
<div>
<h3 class="text-lg font-medium text-gray-700 mb-4 relative">
Licensed In
<div *ngIf="validationService.hasMessage('licensedIn')" class="inline-flex items-center justify-center w-6 h-6 ml-2 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full hover:cursor-pointer relative group">
!
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
{{ validationService.getMessage('licensedIn')?.message }}
</div>
</div>
</h3>
<div class="grid grid-cols-12 gap-4 mb-2">
<div class="col-span-6">
<span class="block text-sm font-medium text-gray-700">State</span>
</div>
<div class="col-span-5">
<span class="block text-sm font-medium text-gray-700">License Number</span>
</div>
<div class="col-span-1"></div>
</div>
@for (licensedIn of user.licensedIn; track licensedIn; let i=$index){
<div class="grid grid-cols-12 gap-4 mb-4">
<div class="col-span-6">
<div class="relative">
<ng-select
[items]="selectOptions?.states"
bindLabel="name"
bindValue="value"
[(ngModel)]="licensedIn.state"
name="licensedIn_state{{ i }}"
[class.border-red-500]="validationService.hasMessage('licensedIn')"
class="license-state-select"
placeholder="Select state"
></ng-select>
</div>
</div>
<div class="col-span-5">
<div class="relative">
<input
type="text"
id="licenseNumber{{ i }}"
name="licenseNumber{{ i }}"
[(ngModel)]="licensedIn.registerNo"
placeholder="Enter license number"
class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
[class.border-red-500]="validationService.hasMessage('licensedIn')"
/>
</div>
</div>
<div class="col-span-1 flex items-center">
<button type="button" class="h-10 w-10 bg-red-500 text-white rounded-lg flex items-center justify-center hover:bg-red-600 focus:outline-none focus:border-black focus:ring-0" (click)="removeLicence(i)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
</svg>
</button>
</div>
</div>
}
<div class="mt-2 flex items-center">
<button type="button" class="h-10 w-10 bg-green-500 text-white rounded-lg flex items-center justify-center hover:bg-green-600 focus:outline-none focus:border-black focus:ring-0" (click)="addLicence()">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
<span class="text-sm text-gray-500 ml-3">[Add more licenses or remove existing ones.]</span>
</div>
</div>
}
<!-- <div class="flex items-center !my-8">
<label class="flex items-center cursor-pointer">
<div class="relative">
<input type="checkbox" [(ngModel)]="user.showInDirectory" name="showInDirectory" class="hidden" />
<div class="toggle-bg block w-12 h-6 rounded-full bg-gray-600 transition"></div>
</div>
<div class="ml-3 text-gray-700 font-medium">Show your profile in Professional Directory</div>
</label>
</div> -->
<!-- Submit Button -->
<div class="flex justify-start">
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" (click)="updateProfile(user)">
<button type="submit" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:border-black focus:ring-0 transition-colors duration-200 flex items-center" (click)="updateProfile(user)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Update Profile
</button>
</div>
</form>
<!-- <div class="mt-8 max-lg:hidden">
<h3 class="text-lg font-medium text-gray-700 mb-2">Membership Level</h3>
<div class="overflow-x-auto">
<div class="inline-block min-w-full">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next Settlement</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@for (subscription of subscriptions; track subscriptions; let i=$index){
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getLevel(i) }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getStartDate(i) }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getEndDate(i) }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getNextSettlement(i) }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getStatus(i) }}</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="mt-8 sm:hidden">
<h3 class="text-lg font-medium text-gray-700 mb-1">Membership Level</h3>
<div class="space-y-2">
@for (subscription of subscriptions; track subscriptions; let i=$index){
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<dl class="grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-2">
<div class="sm:col-span-1 flex">
<dt class="text-sm font-bold text-gray-500 mr-2">Level</dt>
<dd class="text-sm text-gray-900">{{ getLevel(i) }}</dd>
</div>
<div class="sm:col-span-1 flex">
<dt class="text-sm font-bold text-gray-500 mr-2">Start Date</dt>
<dd class="text-sm text-gray-900">{{ getStartDate(i) }}</dd>
</div>
<div class="sm:col-span-1 flex">
<dt class="text-sm font-bold text-gray-500 mr-2">End Date</dt>
<dd class="text-sm text-gray-900">{{ getEndDate(i) }}</dd>
</div>
<div class="sm:col-span-1 flex">
<dt class="text-sm font-bold text-gray-500 mr-2">Next Settlement</dt>
<dd class="text-sm text-gray-900">{{ getNextSettlement(i) }}</dd>
</div>
<div class="sm:col-span-1 flex">
<dt class="text-sm font-bold text-gray-500 mr-2">Status</dt>
<dd class="text-sm text-gray-900">{{ getStatus(i) }}</dd>
</div>
</dl>
</div>
</div>
}
</div>
</div> -->
<!-- @if(user.subscriptionPlan==='free'){
<div class="flex justify-start">
<button
routerLink="/pricing"
class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-white focus:outline-none bg-green-500 rounded-lg border border-gray-400 hover:bg-green-600 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
Upgrade Subscription Plan
</button>
</div>
} -->
</div>
}
</div>

2
bizmatch-client/src/app/pages/account/account.component.scss
View File

@@ -38,5 +38,5 @@ quill-editor {
width: 100%;
}
:host ::ng-deep .ng-select.ng-select-single .ng-select-container {
height: 42px;
height: 50px;
}

42
bizmatch-client/src/app/pages/account/account.component.ts
View File

@@ -6,8 +6,6 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { NgSelectModule } from '@ng-select/ng-select';
import { NgxCurrencyDirective } from 'ngx-currency';
import { ImageCropperComponent } from 'ngx-image-cropper';
import { QuillModule } from 'ngx-quill';
import { lastValueFrom } from 'rxjs';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
@@ -15,15 +13,10 @@ import { AutoCompleteCompleteEvent, Invoice, UploadParams, emailToDirName } from
import { environment } from '../../../environments/environment';
import { ConfirmationComponent } from '../../components/confirmation.component';
import { ImageCropAndUploadComponent, UploadReponse } from '../../components/image-crop-and-upload/image-crop-and-upload.component';
import { MessageComponent } from '../../components/message/message.component';
import { TooltipComponent } from '../../components/tooltip/tooltip.component';
import { ValidatedCityComponent } from '../../components/validated-city/validated-city.component';
import { ValidatedCountyComponent } from '../../components/validated-county/validated-county.component';
import { ValidatedInputComponent } from '../../components/validated-input/validated-input.component';
import { ValidatedLocationComponent } from '../../components/validated-location/validated-location.component';
import { ValidatedQuillComponent } from '../../components/validated-quill/validated-quill.component';
import { ValidatedSelectComponent } from '../../components/validated-select/validated-select.component';
import { ValidationMessage, ValidationMessagesService } from '../../components/validation-messages.service';
import { ValidationMessage } from '../../components/validation-messages.service';
import { AuthService } from '../../services/auth.service';
import { ConfirmationService } from '../../services/confirmation.service';
import { GeoService } from '../../services/geo.service';
@@ -33,31 +26,13 @@ import { MessageService } from '../../services/message.service';
import { SelectOptionsService } from '../../services/select-options.service';
import { SharedService } from '../../services/shared.service';
import { UserService } from '../../services/user.service';
import { ValidationService } from '../../services/validation.service';
import { TOOLBAR_OPTIONS, map2User } from '../../utils/utils';
@Component({
selector: 'app-account',
standalone: true,
imports: [
CommonModule,
FormsModule,
RouterModule,
FontAwesomeModule,
QuillModule,
NgxCurrencyDirective,
NgSelectModule,
ImageCropperComponent,
ConfirmationComponent,
ImageCropAndUploadComponent,
MessageComponent,
ValidatedInputComponent,
ValidatedSelectComponent,
ValidatedQuillComponent,
ValidatedCityComponent,
TooltipComponent,
ValidatedCountyComponent,
ValidatedLocationComponent,
],
imports: [CommonModule, FormsModule, RouterModule, FontAwesomeModule, QuillModule, NgSelectModule, ConfirmationComponent, ImageCropAndUploadComponent, ValidatedQuillComponent, ValidatedCountyComponent, ValidatedLocationComponent],
providers: [TitleCasePipe, DatePipe],
templateUrl: './account.component.html',
styleUrl: './account.component.scss',
@@ -95,7 +70,7 @@ export class AccountComponent {
private messageService: MessageService,
private sharedService: SharedService,
private titleCasePipe: TitleCasePipe,
private validationMessagesService: ValidationMessagesService,
public validationService: ValidationService,
// private subscriptionService: SubscriptionsService,
private datePipe: DatePipe,
private router: Router,
@@ -133,7 +108,7 @@ export class AccountComponent {
}
ngOnDestroy() {
this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
this.validationService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
}
printInvoice(invoice: Invoice) {}
@@ -142,7 +117,7 @@ export class AccountComponent {
await this.userService.save(this.user);
this.userService.changeUser(this.user);
this.messageService.addMessage({ severity: 'success', text: 'Account changes have been persisted', duration: 3000 });
this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
this.validationService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
this.validationMessages = [];
} catch (error) {
this.messageService.addMessage({
@@ -150,10 +125,7 @@ export class AccountComponent {
text: 'An error occurred while saving the profile - Please check your inputs',
duration: 5000,
});
if (error.error && Array.isArray(error.error?.message)) {
this.validationMessagesService.updateMessages(error.error.message);
this.validationMessages = error.error.message;
}
this.validationService.handleApiError(error.error);
}
}