conversion inputs to components

bizmatch-server/src/models/db.model.ts

@@ -98,55 +98,142 @@ export const LicensedInSchema = z.object({
   state: z.string().nonempty('State is required'),
 });
 
+// export const UserSchema = z
+//   .object({
+//     id: z.string().uuid('Invalid ID format. Must be a valid UUID').optional(),
+//     firstname: z.string().min(2, 'First name must be at least 2 characters long'),
+//     lastname: z.string().min(2, 'Last name must be at least 2 characters long'),
+//     email: z.string().email('Invalid email address'),
+//     phoneNumber: z.string().optional().nullable(),
+//     description: z.string().min(10, 'Description must be at least 10 characters long').optional().nullable(),
+//     companyName: z.string().optional().nullable(),
+//     companyOverview: z.string().min(10, 'Company overview must be at least 10 characters long').optional().nullable(),
+//     companyWebsite: z.string().url('Invalid company website URL').optional().nullable(),
+//     companyLocation: z.string().optional().nullable(), // Additional validation for US locations could be implemented here
+//     offeredServices: z.string().min(10, 'Offered services must be at least 10 characters long').optional().nullable(),
+//     areasServed: z.array(AreasServedSchema).optional().nullable(),
+//     hasProfile: z.boolean().optional().nullable(),
+//     hasCompanyLogo: z.boolean().optional().nullable(),
+//     licensedIn: z.array(LicensedInSchema).optional().nullable(),
+//     gender: GenderEnum.optional().nullable(),
+//     customerType: CustomerTypeEnum.optional().nullable(),
+//     customerSubType: CustomerSubTypeEnum.optional().nullable(),
+//     created: z.date().optional().nullable(),
+//     updated: z.date().optional().nullable(),
+//     latitude: z.number().optional().nullable(),
+//     longitude: z.number().optional().nullable(),
+//   })
+//   .refine(
+//     data => {
+//       if (data.customerType === 'professional') {
+//         return !!data.customerSubType && !!data.phoneNumber && !!data.companyOverview && !!data.description && !!data.offeredServices && !!data.companyLocation && data.areasServed && data.areasServed.length > 0;
+//       }
+//       return true;
+//     },
+//     {
+//       message: 'For professional customers, additional fields are required: customer subtype, phone number, company overview, description, offered services, company location, and at least one area served',
+//       path: ['customerType'],
+//     },
+//   )
+//   .refine(
+//     data => {
+//       if (data.customerType === 'professional') {
+//         return /\(\d{3}\) \d{3}-\d{4}$/.test(data.phoneNumber || '');
+//       }
+//       return true;
+//     },
+//     {
+//       message: 'Phone number must be in US format: +1 (XXX) XXX-XXXX',
+//       path: ['phoneNumber'],
+//     },
+//   );
+
+const phoneRegex = /^\+1 \(\d{3}\) \d{3}-\d{4}$/;
+
 export const UserSchema = z
   .object({
-    id: z.string().uuid('Invalid ID format. Must be a valid UUID').optional(),
+    id: z.string().uuid(),
-    firstname: z.string().min(2, 'First name must be at least 2 characters long'),
+    firstname: z.string().min(2, { message: 'First name must contain at least 2 characters' }),
-    lastname: z.string().min(2, 'Last name must be at least 2 characters long'),
+    lastname: z.string().min(2, { message: 'Last name must contain at least 2 characters' }),
-    email: z.string().email('Invalid email address'),
+    email: z.string().email({ message: 'Invalid email address' }),
     phoneNumber: z.string().optional().nullable(),
-    description: z.string().min(10, 'Description must be at least 10 characters long').optional().nullable(),
+    description: z.string().optional().nullable(),
     companyName: z.string().optional().nullable(),
-    companyOverview: z.string().min(10, 'Company overview must be at least 10 characters long').optional().nullable(),
+    companyOverview: z.string().optional().nullable(),
-    companyWebsite: z.string().url('Invalid company website URL').optional().nullable(),
+    companyWebsite: z.string().url({ message: 'Invalid URL format' }).optional().nullable(),
-    companyLocation: z.string().optional().nullable(), // Additional validation for US locations could be implemented here
+    companyLocation: z.string().optional().nullable(),
-    offeredServices: z.string().min(10, 'Offered services must be at least 10 characters long').optional().nullable(),
+    offeredServices: z.string().optional().nullable(),
     areasServed: z.array(AreasServedSchema).optional().nullable(),
     hasProfile: z.boolean().optional().nullable(),
     hasCompanyLogo: z.boolean().optional().nullable(),
     licensedIn: z.array(LicensedInSchema).optional().nullable(),
     gender: GenderEnum.optional().nullable(),
-    customerType: CustomerTypeEnum.optional().nullable(),
+    customerType: CustomerTypeEnum,
     customerSubType: CustomerSubTypeEnum.optional().nullable(),
     created: z.date().optional().nullable(),
     updated: z.date().optional().nullable(),
     latitude: z.number().optional().nullable(),
     longitude: z.number().optional().nullable(),
   })
-  .refine(
+  .superRefine((data, ctx) => {
-    data => {
     if (data.customerType === 'professional') {
-        return !!data.customerSubType && !!data.phoneNumber && !!data.companyOverview && !!data.description && !!data.offeredServices && !!data.companyLocation && data.areasServed && data.areasServed.length > 0;
+      if (!data.customerSubType) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Customer subtype is required for professional customers',
+          path: ['customerSubType'],
+        });
       }
-      return true;
+
-    },
+      if (!data.phoneNumber || !phoneRegex.test(data.phoneNumber)) {
-    {
+        ctx.addIssue({
-      message: 'For professional customers, additional fields are required: customer subtype, phone number, company overview, description, offered services, company location, and at least one area served',
+          code: z.ZodIssueCode.custom,
-      path: ['customerType'],
+          message: 'Phone number is required and must be in US format (+1 (XXX) XXX-XXXX) for professional customers',
-    },
-  )
-  .refine(
-    data => {
-      if (data.customerType === 'professional') {
-        return /\(\d{3}\) \d{3}-\d{4}$/.test(data.phoneNumber || '');
-      }
-      return true;
-    },
-    {
-      message: 'Phone number must be in US format: +1 (XXX) XXX-XXXX',
           path: ['phoneNumber'],
-    },
+        });
-  );
+      }
+
+      if (!data.companyOverview || data.companyOverview.length < 10) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Company overview must contain at least 10 characters for professional customers',
+          path: ['companyOverview'],
+        });
+      }
+
+      if (!data.description || data.description.length < 10) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Description must contain at least 10 characters for professional customers',
+          path: ['description'],
+        });
+      }
+
+      if (!data.offeredServices || data.offeredServices.length < 10) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Offered services must contain at least 10 characters for professional customers',
+          path: ['offeredServices'],
+        });
+      }
+
+      if (!data.companyLocation) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Company location is required for professional customers',
+          path: ['companyLocation'],
+        });
+      }
+
+      if (!data.areasServed || data.areasServed.length < 1) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'At least one area served is required for professional customers',
+          path: ['areasServed'],
+        });
+      }
+    }
+  });
 
 export type AreasServed = z.infer<typeof AreasServedSchema>;
 export type LicensedIn = z.infer<typeof LicensedInSchema>;

bizmatch/src/app/components/base-input/base-input.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { initFlowbite } from 'flowbite';
 import { Subscription } from 'rxjs';
 import { ValidationMessagesService } from '../validation-messages.service';
 
@@ -23,6 +24,9 @@ export abstract class BaseInputComponent implements ControlValueAccessor {
     this.subscription = this.validationMessagesService.messages$.subscribe(() => {
       this.updateValidationMessage();
     });
+    setTimeout(() => {
+      initFlowbite();
+    }, 10);
   }
 
   ngOnDestroy() {

bizmatch/src/app/components/tooltip/tooltip.component.html

@@ -0,0 +1,8 @@
+<div
+  [id]="id"
+  role="tooltip"
+  class="max-w-72 w-max absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
+>
+  {{ text }}
+  <div class="tooltip-arrow" data-popper-arrow></div>
+</div>

bizmatch/src/app/components/tooltip/tooltip.component.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { initFlowbite } from 'flowbite';
+
+@Component({
+  selector: 'app-tooltip',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './tooltip.component.html',
+})
+export class TooltipComponent {
+  @Input() id;
+  @Input() text;
+  ngOnInit() {
+    setTimeout(() => {
+      initFlowbite();
+    }, 10);
+  }
+}

bizmatch/src/app/components/validated-input/validated-input.component.html

@@ -1 +1,23 @@
-<p>validated-input works!</p>
+<div>
+  <label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
+    {{ label }}
+    @if(validationMessage){
+    <div
+      attr.data-tooltip-target="tooltip-{{ name }}"
+      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="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    }
+  </label>
+  <input
+    [type]="kind"
+    [id]="name"
+    [ngModel]="value"
+    (input)="onInputChange($event)"
+    (blur)="onTouched()"
+    [attr.name]="name"
+    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+  />
+</div>

bizmatch/src/app/components/validated-input/validated-input.component.ts

@@ -1,30 +1,15 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, forwardRef, Output } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 import { ValidationMessagesService } from '../validation-messages.service';
 
 @Component({
   selector: 'app-validated-input',
-  template: `
+  templateUrl: './validated-input.component.html',
-    <div>
-      <label [for]="name" class="block text-sm font-medium text-gray-700">
-        {{ label }}
-        <span class="text-red-500 ml-1">{{ validationMessage }}</span>
-      </label>
-      <input
-        type="text"
-        [id]="name"
-        [ngModel]="value"
-        (input)="onInputChange($event)"
-        (blur)="onTouched()"
-        [attr.name]="name"
-        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-      />
-    </div>
-  `,
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, TooltipComponent],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -35,15 +20,13 @@ import { ValidationMessagesService } from '../validation-messages.service';
 })
 export class ValidatedInputComponent extends BaseInputComponent {
   @Output() valueChange = new EventEmitter<any>();
-
+  @Input() kind: 'text' | 'number' | 'email' | 'tel' = 'text';
   constructor(validationMessagesService: ValidationMessagesService) {
     super(validationMessagesService);
   }
 
   onInputChange(event: Event): void {
-    const value = (event.target as HTMLInputElement).value;
+    this.value = event;
-    this.value = value;
+    this.onChange(event);
-    this.onChange(value);
-    this.valueChange.emit(value);
   }
 }

bizmatch/src/app/components/validated-ng-select/validated-ng-select.component.html

@@ -0,0 +1,14 @@
+<div>
+  <label for="type" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit"
+    >Property Category @if(validationMessage){
+    <div
+      attr.data-tooltip-target="tooltip-{{ name }}"
+      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="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    }
+  </label>
+  <ng-select [items]="items" bindLabel="name" bindValue="value" [(ngModel)]="value" (ngModelChange)="onInputChange($event)" name="type"> </ng-select>
+</div>

bizmatch/src/app/components/validated-ng-select/validated-ng-select.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component, forwardRef, Input } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
+import { ValidationMessagesService } from '../validation-messages.service';
+
+@Component({
+  selector: 'app-validated-ng-select',
+  standalone: true,
+  imports: [CommonModule, FormsModule, NgSelectModule, TooltipComponent],
+  templateUrl: './validated-ng-select.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ValidatedNgSelectComponent),
+      multi: true,
+    },
+  ],
+})
+export class ValidatedNgSelectComponent extends BaseInputComponent {
+  @Input() items;
+  constructor(validationMessagesService: ValidationMessagesService) {
+    super(validationMessagesService);
+  }
+  onInputChange(event: Event): void {
+    this.value = event;
+    this.onChange(this.value);
+  }
+}

bizmatch/src/app/components/validated-price/validated-price.component.html

@@ -0,0 +1,25 @@
+<div>
+  <label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
+    {{ label }}
+    @if(validationMessage){
+    <div
+      attr.data-tooltip-target="tooltip-{{ name }}"
+      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="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    }
+  </label>
+  <input
+    type="text"
+    [id]="name"
+    [ngModel]="value"
+    (input)="onInputChange($event)"
+    (blur)="onTouched()"
+    [attr.name]="name"
+    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+    [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
+    currencyMask
+  />
+</div>

bizmatch/src/app/components/validated-price/validated-price.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component, forwardRef } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgxCurrencyDirective } from 'ngx-currency';
+import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
+import { ValidationMessagesService } from '../validation-messages.service';
+
+@Component({
+  selector: 'app-validated-price',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TooltipComponent, NgxCurrencyDirective],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ValidatedPriceComponent),
+      multi: true,
+    },
+  ],
+  templateUrl: './validated-price.component.html',
+})
+export class ValidatedPriceComponent extends BaseInputComponent {
+  constructor(validationMessagesService: ValidationMessagesService) {
+    super(validationMessagesService);
+  }
+
+  onInputChange(event: Event): void {
+    this.value = event;
+    this.onChange(event);
+  }
+}

bizmatch/src/app/components/validated-quill/validated-quill.component.html

@@ -0,0 +1,13 @@
+<label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
+  {{ label }}
+  @if(validationMessage){
+  <div
+    attr.data-tooltip-target="tooltip-{{ name }}"
+    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="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+  }
+</label>
+<quill-editor [(ngModel)]="value" (ngModelChange)="onInputChange($event)" (onBlur)="onTouched()" [id]="name" [attr.name]="name" [modules]="quillModules"></quill-editor>

bizmatch/src/app/components/validated-quill/validated-quill.component.ts

@@ -3,21 +3,17 @@ import { Component, forwardRef } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { QuillModule } from 'ngx-quill';
 import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 import { ValidationMessagesService } from '../validation-messages.service';
 
 @Component({
   selector: 'app-validated-quill',
-  template: `
+  templateUrl: './validated-quill.component.html',
-    <div>
+  styles: `quill-editor {
-      <label [for]="name" class="block text-sm font-medium text-gray-700">
+            width: 100%;
-        {{ label }}
+          }`,
-        <span class="text-red-500 ml-1">{{ validationMessage }}</span>
-      </label>
-      <quill-editor [(ngModel)]="value" (ngModelChange)="onInputChange($event)" (onBlur)="onTouched()" [id]="name" [attr.name]="name" [modules]="quillModules"></quill-editor>
-    </div>
-  `,
   standalone: true,
-  imports: [CommonModule, FormsModule, QuillModule],
+  imports: [CommonModule, FormsModule, QuillModule, TooltipComponent],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

bizmatch/src/app/components/validated-select/validated-select.component.html

@@ -1 +1,20 @@
-<p>validated-select works!</p>
+<div>
+  <label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
+    {{ label }}
+    @if(validationMessage){
+    <div
+      attr.data-tooltip-target="tooltip-{{ name }}"
+      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="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    }
+  </label>
+  <select [id]="name" [name]="name" [ngModel]="value" (change)="onSelectChange($event)" (blur)="onTouched()" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+    <option value="" disabled selected>Select an option</option>
+    <option *ngFor="let option of options" [value]="option.value">
+      {{ option.label }}
+    </option>
+  </select>
+</div>

bizmatch/src/app/components/validated-select/validated-select.component.ts

@@ -2,33 +2,14 @@ import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 import { ValidationMessagesService } from '../validation-messages.service';
 
 @Component({
   selector: 'app-validated-select',
-  template: `
+  templateUrl: './validated-select.component.html',
-    <div>
-      <label [for]="name" class="block text-sm font-medium text-gray-700">
-        {{ label }}
-        <span class="text-red-500 ml-1">{{ validationMessage }}</span>
-      </label>
-      <select
-        [id]="name"
-        [name]="name"
-        [ngModel]="value"
-        (change)="onSelectChange($event)"
-        (blur)="onTouched()"
-        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-      >
-        <option value="" disabled selected>Select an option</option>
-        <option *ngFor="let option of options" [value]="option.value">
-          {{ option.label }}
-        </option>
-      </select>
-    </div>
-  `,
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, TooltipComponent],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -38,8 +19,6 @@ import { ValidationMessagesService } from '../validation-messages.service';
   ],
 })
 export class ValidatedSelectComponent extends BaseInputComponent {
-  // @Input() required: boolean = false;
-  // @Input() validationMessage: string = '';
   @Input() options: Array<{ value: any; label: string }> = [];
   @Output() valueChange = new EventEmitter<any>();
 

bizmatch/src/app/components/validated-textarea/validated-textarea.component.html

@@ -0,0 +1,16 @@
+<div>
+  <label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
+    {{ label }}
+    @if(validationMessage){
+    <div
+      attr.data-tooltip-target="tooltip-{{ name }}"
+      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="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    }
+    <span class="text-red-500 ml-1">{{ validationMessage }}</span>
+  </label>
+  <textarea [id]="name" [ngModel]="value" (ngModelChange)="onInputChange($event)" [attr.name]="name" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
+</div>

bizmatch/src/app/components/validated-textarea/validated-textarea.component.ts

@@ -1,22 +1,15 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, forwardRef, Output } from '@angular/core';
+import { Component, forwardRef } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 import { ValidationMessagesService } from '../validation-messages.service';
 
 @Component({
   selector: 'app-validated-textarea',
-  template: `
+  templateUrl: './validated-textarea.component.html',
-    <div>
-      <label [for]="name" class="block text-sm font-medium text-gray-700">
-        {{ label }}
-        <span class="text-red-500 ml-1">{{ validationMessage }}</span>
-      </label>
-      <textarea [id]="name" [ngModel]="value" (ngModelChange)="onInputChange($event)" [attr.name]="name" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
-    </div>
-  `,
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, TooltipComponent],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -26,8 +19,6 @@ import { ValidationMessagesService } from '../validation-messages.service';
   ],
 })
 export class ValidatedTextareaComponent extends BaseInputComponent {
-  @Output() valueChange = new EventEmitter<any>();
-
   constructor(validationMessagesService: ValidationMessagesService) {
     super(validationMessagesService);
   }

bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html

@@ -38,7 +38,7 @@
         <h3 class="text-lg font-semibold mb-4">Contact the Author of this Listing</h3>
         <p class="text-sm mb-4">Please include your contact info below</p>
         <form class="space-y-4">
-          <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+          <!-- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
             <div class="w-full sm:w-1/2">
               <label for="name" class="block text-sm font-medium text-gray-700">Your Name</label>
               <input type="text" id="name" name="name" [(ngModel)]="mailinfo.sender.name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
@@ -53,8 +53,12 @@
                 class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               />
             </div>
+          </div> -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
+            <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email" kind="email"></app-validated-input>
           </div>
-          <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+          <!-- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
             <div class="w-full sm:w-1/2">
               <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
               <input
@@ -76,8 +80,12 @@
                 class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
               />
             </div>
+          </div> -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber" kind="tel"></app-validated-input>
+            <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input>
           </div>
-          <div>
+          <!-- <div>
             <label for="comments" class="block text-sm font-medium text-gray-700">Questions/Comments</label>
             <textarea
               id="comments"
@@ -86,6 +94,9 @@
               [(ngModel)]="mailinfo.sender.comments"
               class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             ></textarea>
+          </div> -->
+          <div>
+            <app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
           </div>
           @if(listingUser){
           <div class="flex items-center space-x-2">

bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts

@@ -7,6 +7,8 @@ import { lastValueFrom } from 'rxjs';
 import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { BusinessListingCriteria, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
+import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
 import { HistoryService } from '../../../services/history.service';
 import { ListingsService } from '../../../services/listings.service';
 import { MailService } from '../../../services/mail.service';
@@ -17,7 +19,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../.
 @Component({
   selector: 'app-details-business-listing',
   standalone: true,
-  imports: [SharedModule],
+  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent],
   providers: [],
   templateUrl: './details-business-listing.component.html',
   styleUrl: '../details.scss',

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html

@@ -176,8 +176,8 @@
           <div class="mt-6">
             <h2 class="text-xl font-semibold mb-4">Contact the Author of this Listing</h2>
             <p class="text-sm text-gray-600 mb-4">Please include your contact info below</p>
-            <form>
+            <form class="space-y-4">
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+              <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                 <div>
                   <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
                   <input type="text" id="name" name="name" [(ngModel)]="mailinfo.sender.name" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
@@ -198,7 +198,19 @@
               <div class="mb-4">
                 <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Questions/Comments</label>
                 <textarea id="message" name="message" [(ngModel)]="mailinfo.sender.comments" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md"></textarea>
+              </div> -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
+                <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email" kind="email"></app-validated-input>
               </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber" kind="tel"></app-validated-input>
+                <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input>
+              </div>
+              <div>
+                <app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
+              </div>
+
               <div class="flex items-center justify-between">
                 @if(listingUser){
                 <div class="flex items-center space-x-2">

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.ts

@@ -7,6 +7,8 @@ import { lastValueFrom } from 'rxjs';
 import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { CommercialPropertyListingCriteria, ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
+import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
 import { HistoryService } from '../../../services/history.service';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
@@ -19,7 +21,7 @@ import { map2User } from '../../../utils/utils';
 @Component({
   selector: 'app-details-commercial-property-listing',
   standalone: true,
-  imports: [SharedModule],
+  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent],
   providers: [],
   templateUrl: './details-commercial-property-listing.component.html',
   styleUrl: '../details.scss',

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>
+        <app-validated-quill label="Company Overview" name="companyOverview" [(ngModel)]="user.companyOverview"></app-validated-quill>
-        <quill-editor [(ngModel)]="user.offeredServices" name="offeredServices" [modules]="quillModules"></quill-editor>
+      </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;
       }
     }
   }

bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html

@@ -2,28 +2,37 @@
   <div class="bg-white rounded-lg shadow-md p-6">
     <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
     @if(listing){
-    <form #listingForm="ngForm">
+    <form #listingForm="ngForm" class="space-y-4">
       <div class="mb-4">
         <label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
         <ng-select [readonly]="mode === 'edit'" [items]="selectOptions?.listingCategories" bindLabel="name" bindValue="value" [(ngModel)]="listing.listingsCategory" name="listingsCategory"> </ng-select>
       </div>
 
-      <div class="mb-4">
+      <!-- <div class="mb-4">
         <label for="title" class="block text-sm font-bold text-gray-700 mb-1">Title of Listing</label>
         <input type="text" id="title" [(ngModel)]="listing.title" name="title" class="w-full p-2 border border-gray-300 rounded-md" />
+      </div> -->
+      <div>
+        <app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input>
       </div>
 
-      <div class="mb-4">
+      <!-- <div class="mb-4">
         <label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
         <quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor>
+      </div> -->
+      <div>
+        <app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill>
       </div>
 
-      <div class="mb-4">
+      <!-- <div class="mb-4">
         <label for="type" class="block text-sm font-bold text-gray-700 mb-1">Type of business</label>
         <ng-select [items]="typesOfBusiness" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
+      </div> -->
+      <div>
+        <app-validated-ng-select label="Type of business" name="type" [(ngModel)]="listing.type" [items]="typesOfBusiness"></app-validated-ng-select>
       </div>
 
-      <div class="flex mb-4 space-x-4">
+      <!-- <div class="flex mb-4 space-x-4">
         <div class="w-1/2">
           <label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
           <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
@@ -32,9 +41,13 @@
           <label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
           <input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
         </div>
+      </div> -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.state" [items]="selectOptions?.states"></app-validated-ng-select>
+        <app-validated-input label="City" name="city" [(ngModel)]="listing.city"></app-validated-input>
       </div>
 
-      <div class="flex mb-4 space-x-4">
+      <!-- <div class="flex mb-4 space-x-4">
         <div class="w-1/2">
           <label for="price" class="block text-sm font-bold text-gray-700 mb-1">Price</label>
           <input
@@ -59,9 +72,13 @@
             currencyMask
           />
         </div>
+      </div> -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
+        <app-validated-price label="Sales Revenue" name="salesRevenue" [(ngModel)]="listing.salesRevenue"></app-validated-price>
       </div>
 
-      <div class="mb-4">
+      <!-- <div class="mb-4">
         <label for="cashFlow" class="block text-sm font-bold text-gray-700 mb-1">Cash Flow</label>
         <input
           type="text"
@@ -72,9 +89,12 @@
           [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
           currencyMask
         />
+      </div> -->
+      <div>
+        <app-validated-price label="Cash Flow" name="cashFlow" [(ngModel)]="listing.cashFlow"></app-validated-price>
       </div>
 
-      <div class="flex mb-4 space-x-4">
+      <!-- <div class="flex mb-4 space-x-4">
         <div class="w-1/2">
           <label for="established" class="block text-sm font-bold text-gray-700 mb-1">Years Established Since</label>
           <input type="number" id="established" [(ngModel)]="listing.established" name="established" class="w-full p-2 border border-gray-300 rounded-md" />
@@ -83,6 +103,10 @@
           <label for="employees" class="block text-sm font-bold text-gray-700 mb-1">Employees</label>
           <input type="number" id="employees" [(ngModel)]="listing.employees" name="employees" class="w-full p-2 border border-gray-300 rounded-md" />
         </div>
+      </div> -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <app-validated-input label="Years Established Since" name="established" [(ngModel)]="listing.established" kind="number"></app-validated-input>
+        <app-validated-input label="Employees" name="employees" [(ngModel)]="listing.employees" kind="number"></app-validated-input>
       </div>
 
       <div class="flex mb-4 space-x-4">
@@ -100,17 +124,20 @@
         </div>
       </div>
 
-      <div class="mb-4">
+      <!-- <div class="mb-4">
         <label for="supportAndTraining" class="block text-sm font-bold text-gray-700 mb-1">Support & Training</label>
         <input type="text" id="supportAndTraining" [(ngModel)]="listing.supportAndTraining" name="supportAndTraining" class="w-full p-2 border border-gray-300 rounded-md" />
       </div> 
-
       <div class="mb-4">
         <label for="reasonForSale" class="block text-sm font-bold text-gray-700 mb-1">Reason for Sale</label>
         <input type="text" id="reasonForSale" [(ngModel)]="listing.reasonForSale" name="reasonForSale" class="w-full p-2 border border-gray-300 rounded-md" />
+      </div>-->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <app-validated-input label="Support & Training" name="supportAndTraining" [(ngModel)]="listing.supportAndTraining"></app-validated-input>
+        <app-validated-input label="Reason for Sale" name="reasonForSale" [(ngModel)]="listing.reasonForSale"></app-validated-input>
       </div>
 
-      <div class="flex mb-4 space-x-4">
+      <!-- <div class="flex mb-4 space-x-4">
         <div class="w-1/2">
           <label for="brokerLicencing" class="block text-sm font-bold text-gray-700 mb-1">Broker Licensing</label>
           <input type="text" id="brokerLicencing" [(ngModel)]="listing.brokerLicencing" name="brokerLicencing" class="w-full p-2 border border-gray-300 rounded-md" />
@@ -119,11 +146,18 @@
           <label for="internalListingNumber" class="block text-sm font-bold text-gray-700 mb-1">Internal Listing Number</label>
           <input type="number" id="internalListingNumber" [(ngModel)]="listing.internalListingNumber" name="internalListingNumber" class="w-full p-2 border border-gray-300 rounded-md" />
         </div>
+      </div> -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <app-validated-input label="Broker Licensing" name="brokerLicencing" [(ngModel)]="listing.brokerLicencing"></app-validated-input>
+        <app-validated-input label="Internal Listing Number" name="internalListingNumber" [(ngModel)]="listing.internalListingNumber" kind="number"></app-validated-input>
       </div>
 
-      <div class="mb-4">
+      <!-- <div class="mb-4">
         <label for="internals" class="block text-sm font-bold text-gray-700 mb-1">Internal Notes (Will not be shown on the listing, for your records only.)</label>
         <textarea id="internals" [(ngModel)]="listing.internals" name="internals" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
+      </div> -->
+      <div>
+        <app-validated-textarea label="Internal Notes (Will not be shown on the listing, for your records only.)" name="internals" [(ngModel)]="listing.internals"></app-validated-textarea>
       </div>
 
       <div class="flex items-center mb-4">

bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts

@@ -17,6 +17,11 @@ import { AutoCompleteCompleteEvent, ImageProperty, createDefaultBusinessListing,
 
 import { environment } from '../../../../environments/environment';
 import { MessageService } from '../../../components/message/message.service';
+import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
+import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component';
+import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
+import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
 import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
 import { GeoService } from '../../../services/geo.service';
 import { ImageService } from '../../../services/image.service';
@@ -27,7 +32,19 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
 @Component({
   selector: 'business-listing',
   standalone: true,
-  imports: [SharedModule, ArrayToStringPipe, DragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule],
+  imports: [
+    SharedModule,
+    ArrayToStringPipe,
+    DragDropModule,
+    QuillModule,
+    NgxCurrencyDirective,
+    NgSelectModule,
+    ValidatedInputComponent,
+    ValidatedQuillComponent,
+    ValidatedNgSelectComponent,
+    ValidatedPriceComponent,
+    ValidatedTextareaComponent,
+  ],
   providers: [],
   templateUrl: './edit-business-listing.component.html',
   styleUrl: './edit-business-listing.component.scss',

bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html

@@ -1,177 +1,34 @@
-<!-- <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>
-    <p-toast></p-toast>
-    <div *ngIf="listing" class="surface-card p-5 shadow-2 border-round flex-auto">
-      <div class="text-900 font-semibold text-lg mt-3">{{ mode === 'create' ? 'New' : 'Edit' }} Listing</div>
-      <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">
-            <label for="listingCategory" class="block font-medium text-900 mb-2">Listing category</label>
-            <p-dropdown
-              id="listingCategory"
-              [options]="selectOptions?.listingCategories"
-              [ngModel]="listingsCategory"
-              optionLabel="name"
-              optionValue="value"
-              (ngModelChange)="changeListingCategory($event)"
-              placeholder="Listing category"
-              [disabled]="mode === 'edit'"
-              [style]="{ width: '100%' }"
-            ></p-dropdown>
-          </div>
-          <div class="mb-4">
-            <label for="email" class="block font-medium text-900 mb-2">Title of Listing</label>
-            <input id="email" type="text" pInputText [(ngModel)]="listing.title" />
-          </div>
-          <div>
-            <div class="mb-4">
-              <label for="description" class="block font-medium text-900 mb-2">Description</label>
-              <p-editor [(ngModel)]="listing.description" [style]="{ height: '320px' }" [modules]="editorModules">
-                <ng-template pTemplate="header"></ng-template>
-              </p-editor>
-            </div>
-          </div>
-          <div class="mb-4">
-            <label for="type" class="block font-medium text-900 mb-2">Property Category</label>
-            <p-dropdown
-              id="type"
-              [filter]="true"
-              filterBy="name"
-              [options]="typesOfCommercialProperty"
-              [(ngModel)]="listing.type"
-              optionLabel="name"
-              optionValue="value"
-              [showClear]="true"
-              placeholder="Property Category"
-              [style]="{ width: '100%' }"
-            ></p-dropdown>
-          </div>
-          <div class="grid">
-            <div class="mb-4 col-12 md:col-6">
-              <label for="states" class="block font-medium text-900 mb-2">State</label>
-              <p-dropdown
-                [filter]="true"
-                filterBy="name"
-                id="states"
-                [options]="selectOptions?.states"
-                [(ngModel)]="listing.state"
-                optionLabel="name"
-                optionValue="value"
-                [showClear]="true"
-                placeholder="State"
-                [style]="{ width: '100%' }"
-              ></p-dropdown>
-            </div>
-            <div class="mb-4 col-12 md:col-6">
-              <label for="city" class="block font-medium text-900 mb-2">City</label>
-              <p-autoComplete id="city" [(ngModel)]="listing.city" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
-            </div>
-          </div>
-          <div class="grid">
-            <div class="mb-4 col-12 md:col-6">
-              <label for="zipCode" class="block font-medium text-900 mb-2">Zip Code</label>
-              <input id="zipCode" type="text" pInputText [(ngModel)]="listing.zipCode" />
-            </div>
-            <div class="mb-4 col-12 md:col-6">
-              <label for="county" class="block font-medium text-900 mb-2">County</label>
-              <input id="county" type="text" pInputText [(ngModel)]="listing.county" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="grid">
-        <div class="mb-4 col-12 md:col-6">
-          <p-inputSwitch inputId="draft" [(ngModel)]="listing.draft"></p-inputSwitch>
-          <span class="ml-2 text-900 absolute translate-y-5">Draft Mode (Will not be shown as public listing)</span>
-        </div>
-      </div>
-      <div>
-        <p-divider></p-divider>
-        <div class="flex gap-5 flex-column-reverse md:flex-row">
-          <div class="flex-auto p-fluid">
-            <div class="grid">
-              <div class="mb-4 col-12 md:col-6">
-                <label for="price" class="block font-medium text-900 mb-2">Price</label>
-                <app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></app-inputNumber>
-              </div>
-              <div class="mb-4 col-12 md:col-6">
-                <div class="flex flex-column align-items-center flex-or">
-                  <span class="font-medium text-900 mb-2">Property Pictures</span>
-                  <span class="font-light text-sm text-900 mb-2">(Pictures can be uploaded once the listing is posted initially)</span>
-                  <p-fileUpload
-                    mode="basic"
-                    chooseLabel="Upload"
-                    [customUpload]="true"
-                    name="file"
-                    accept="image/*"
-                    [maxFileSize]="maxFileSize"
-                    (onSelect)="select($event)"
-                    styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
-                    [disabled]="!listing.id"
-                  >
-                  </p-fileUpload>
-                </div>
-              </div>
-            </div>
-            @if (listing && listing.imageOrder?.length>0){
-            <div class="p-2 border-1 surface-border border-round mb-4 image-container" cdkDropListGroup mixedCdkDragDrop (dropped)="onDrop($event)" cdkDropListOrientation="horizontal">
-              @for (image of listing.imageOrder; track listing.imageOrder) {
-              <span cdkDropList mixedCdkDropList>
-                <div cdkDrag mixedCdkDragSizeHelper class="image-wrap">
-                  <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="shadow-2" cdkDrag />
-                  <fa-icon [icon]="faTrash" (click)="deleteConfirm(image)"></fa-icon>
-                </div>
-              </span>
-              }
-            </div>
-            }
-            <div>
-              @if (mode==='create'){
-              <button pButton pRipple label="Post Listing" class="w-auto" (click)="save()"></button>
-              } @else {
-              <button pButton pRipple label="Update Listing" class="w-auto" (click)="save()"></button>
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <p-toast></p-toast>
-  <p-confirmDialog></p-confirmDialog>
-</div> -->
-
 <div class="container mx-auto p-4">
   <div class="bg-white rounded-lg shadow-md p-6">
     <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
     @if (listing){
-    <form #listingForm="ngForm">
+    <form #listingForm="ngForm" class="space-y-4">
-      <div class="mb-4">
+      <div>
         <label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
-        <select id="listingsCategory" [ngModel]="listingsCategory" name="listingsCategory" class="w-full p-2 border border-gray-300 rounded-md">
+        <ng-select [readonly]="mode === 'edit'" [items]="selectOptions?.listingCategories" bindLabel="name" bindValue="value" [(ngModel)]="listing.listingsCategory" name="listingsCategory"> </ng-select>
-          <option value="business">Business</option>
-          <option value="commercialProperty">Commercial Property</option>
-        </select>
       </div>
 
-      <div class="mb-4">
+      <!-- <div class="mb-4">
         <label for="title" class="block text-sm font-bold text-gray-700 mb-1">Title of Listing</label>
         <input type="text" id="title" [(ngModel)]="listing.title" name="title" class="w-full p-2 border border-gray-300 rounded-md" />
+      </div> -->
+      <div>
+        <app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input>
       </div>
 
-      <div class="mb-4">
+      <div>
-        <label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
+        <!-- <label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
-        <quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor>
+        <quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor> -->
+        <app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill>
       </div>
 
-      <div class="mb-4">
+      <!-- <div>
         <label for="type" class="block text-sm font-bold text-gray-700 mb-1">Property Category</label>
         <ng-select [items]="typesOfCommercialProperty" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
-      </div>
+      </div> -->
+      <app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select>
 
-      <div class="flex mb-4 space-x-4">
+      <!-- <div class="flex mb-4 space-x-4">
         <div class="w-1/2">
           <label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
           <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
@@ -180,9 +37,13 @@
           <label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
           <input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
         </div>
+      </div> -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.state" [items]="selectOptions?.states"></app-validated-ng-select>
+        <app-validated-input label="City" name="city" [(ngModel)]="listing.city"></app-validated-input>
       </div>
 
-      <div class="flex mb-4 space-x-4">
+      <!-- <div class="flex mb-4 space-x-4">
         <div class="w-1/2">
           <label for="zipCode" class="block text-sm font-bold text-gray-700 mb-1">Zip Code</label>
           <input type="text" id="zipCode" [(ngModel)]="listing.zipCode" name="zipCode" class="w-full p-2 border border-gray-300 rounded-md" />
@@ -191,6 +52,10 @@
           <label for="county" class="block text-sm font-bold text-gray-700 mb-1">County</label>
           <input type="text" id="county" [(ngModel)]="listing.county" name="county" class="w-full p-2 border border-gray-300 rounded-md" />
         </div>
+      </div> -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <app-validated-input label="Zip Code" name="zipCode" [(ngModel)]="listing.zipCode"></app-validated-input>
+        <app-validated-input label="County" name="county" [(ngModel)]="listing.county"></app-validated-input>
       </div>
 
       <!-- <div class="mb-4">
@@ -198,8 +63,9 @@
         <textarea id="internals" [(ngModel)]="listing.internals" name="internals" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
       </div> -->
 
-      <div class="flex items-center mb-4">
+      <!-- <div class="flex items-center mb-4"> -->
-        <div class="w-1/2">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <!-- <div class="w-1/2">
           <label for="price" class="block text-sm font-bold text-gray-700 mb-1">Price</label>
           <input
             type="text"
@@ -210,8 +76,9 @@
             [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
             currencyMask
           />
-        </div>
+        </div> -->
-        <div class="w-1/2 flex justify-center">
+        <app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
+        <div class="flex justify-center">
           <label class="flex items-center cursor-pointer">
             <div class="relative">
               <input type="checkbox" [(ngModel)]="listing.draft" name="draft" class="hidden" />

bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.ts

@@ -21,6 +21,10 @@ import { ConfirmationComponent } from '../../../components/confirmation/confirma
 import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
 import { DragDropMixedComponent } from '../../../components/drag-drop-mixed/drag-drop-mixed.component';
 import { MessageService } from '../../../components/message/message.service';
+import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
+import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component';
+import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
 import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
 import { GeoService } from '../../../services/geo.service';
 import { ImageService } from '../../../services/image.service';
@@ -31,7 +35,21 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
 @Component({
   selector: 'commercial-property-listing',
   standalone: true,
-  imports: [SharedModule, ArrayToStringPipe, DragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule, ImageCropperComponent, ConfirmationComponent, DragDropMixedComponent],
+  imports: [
+    SharedModule,
+    ArrayToStringPipe,
+    DragDropModule,
+    QuillModule,
+    NgxCurrencyDirective,
+    NgSelectModule,
+    ImageCropperComponent,
+    ConfirmationComponent,
+    DragDropMixedComponent,
+    ValidatedInputComponent,
+    ValidatedQuillComponent,
+    ValidatedNgSelectComponent,
+    ValidatedPriceComponent,
+  ],
   providers: [],
   templateUrl: './edit-commercial-property-listing.component.html',
   styleUrl: './edit-commercial-property-listing.component.scss',