conversion inputs to components

2024-08-02 20:14:07 +02:00
parent 29f88d610f
commit c9305749d2
28 changed files with 528 additions and 300 deletions
--- a/bizmatch/src/app/pages/subscription/account/account.component.html
+++ b/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>
--- a/bizmatch/src/app/pages/subscription/account/account.component.ts
+++ b/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;
      }
    }
  }
--- a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
+++ b/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> 
      <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">
--- a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts
+++ b/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',
--- a/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
+++ b/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">
-      <div class="mb-4">
+    <form #listingForm="ngForm" class="space-y-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">
-          <option value="business">Business</option>
-          <option value="commercialProperty">Commercial Property</option>
-        </select>
+        <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">
-        <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>
+        <!-- <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> -->
+        <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="w-1/2">
+      <!-- <div class="flex items-center mb-4"> -->
+      <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 class="w-1/2 flex justify-center">
+        </div> -->
+        <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" />
--- a/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.ts
+++ b/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',