conversion inputs to components

bizmatch/src/app/pages/subscription/account/account.component.html

@@ -84,18 +84,20 @@
       </div>
       @if (isProfessional){
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
+        <!-- <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>
+        </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>
+        </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>
+        <!-- <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>
@@ -106,21 +108,37 @@
         <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>
+        </div> -->
+        <app-validated-input label="Your Phone Number" name="phoneNumber" [(ngModel)]="user.phoneNumber"></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>
       </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> -->
-      <app-validated-quill label="Company Overview" name="companyOverview" [(ngModel)]="user.companyOverview" (ngModelChange)="test($event)"></app-validated-quill>
       <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="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">Areas We Serve</h3>
+        <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]="tooltipTarget"
+            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]="tooltipTarget" [text]="getValidationMessage('areasServed')"></app-tooltip>
+          }
+        </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
             <label for="state" class="block text-sm font-medium text-gray-700">State</label>

bizmatch/src/app/pages/subscription/account/account.component.ts

@@ -3,6 +3,7 @@ import { ChangeDetectorRef, Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { initFlowbite } from 'flowbite';
 import { KeycloakService } from 'keycloak-angular';
 import { NgxCurrencyDirective } from 'ngx-currency';
 import { ImageCropperComponent } from 'ngx-image-cropper';
@@ -16,6 +17,7 @@ import { ConfirmationService } from '../../../components/confirmation/confirmati
 import { ImageCropAndUploadComponent, UploadReponse } from '../../../components/image-crop-and-upload/image-crop-and-upload.component';
 import { MessageComponent } from '../../../components/message/message.component';
 import { MessageService } from '../../../components/message/message.service';
+import { TooltipComponent } from '../../../components/tooltip/tooltip.component';
 import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
 import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
 import { ValidatedSelectComponent } from '../../../components/validated-select/validated-select.component';
@@ -45,6 +47,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
     ValidatedInputComponent,
     ValidatedSelectComponent,
     ValidatedQuillComponent,
+    TooltipComponent,
   ],
   providers: [TitleCasePipe],
   templateUrl: './account.component.html',
@@ -71,6 +74,7 @@ export class AccountComponent {
   validationMessages: ValidationMessage[] = [];
   customerTypeOptions: Array<{ value: string; label: string }> = [];
   customerSubTypeOptions: Array<{ value: string; label: string }> = [];
+  tooltipTarget = 'tooltip-areasServed';
   constructor(
     public userService: UserService,
     private subscriptionService: SubscriptionsService,
@@ -89,6 +93,9 @@ export class AccountComponent {
     private validationMessagesService: ValidationMessagesService,
   ) {}
   async ngOnInit() {
+    setTimeout(() => {
+      initFlowbite();
+    }, 10);
     if (this.id) {
       this.user = await this.userService.getById(this.id);
     } else {
@@ -127,6 +134,7 @@ export class AccountComponent {
       await this.userService.save(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.validationMessages = [];
     } catch (error) {
       this.messageService.addMessage({
         severity: 'danger',
@@ -135,6 +143,7 @@ export class AccountComponent {
       });
       if (error.error && Array.isArray(error.error?.message)) {
         this.validationMessagesService.updateMessages(error.error.message);
+        this.validationMessages = error.error.message;
       }
     }
   }