location eingebaut, back buttons angeglichen, paging & criteria korrigiert

2024-08-08 17:25:00 +02:00
parent 7df5d32cc4
commit 69b0a83b1e
21 changed files with 196 additions and 328 deletions
--- a/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts
+++ b/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts
@@ -2,10 +2,9 @@ import { Component } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { KeycloakService } from 'keycloak-angular';
-import onChange from 'on-change';
 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 { KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { MessageService } from '../../../components/message/message.service';
 import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
@@ -17,7 +16,7 @@ import { MailService } from '../../../services/mail.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
-import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../../../utils/utils';
+import { map2User } from '../../../utils/utils';
@Component({
  selector: 'app-details-business-listing',
  standalone: true,
@@ -47,7 +46,6 @@ export class DetailsBusinessListingComponent {
  ];
  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
  listing: BusinessListing;
-  criteria: BusinessListingCriteria;
  mailinfo: MailInfo;
  environment = environment;
  keycloakUser: KeycloakUser;
@@ -76,7 +74,6 @@ export class DetailsBusinessListingComponent {
      }
    });
    this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl };
-    this.criteria = onChange(getCriteriaStateObject('business'), getSessionStorageHandler.bind('business'));
  }

  async ngOnInit() {
--- a/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
+++ b/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
@@ -101,8 +101,11 @@
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
    <div class="p-6 relative">
      <h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1>
-      <button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700" (click)="historyService.goBack()">
-        <fa-icon [icon]="faTimes" size="2x"></fa-icon>
+      <button
+        (click)="historyService.goBack()"
+        class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
+      >
+        <i class="fas fa-times"></i>
      </button>
      <div class="lg:hidden">
        @if (listing && listing.imageOrder && listing.imageOrder.length > 0) {
--- a/bizmatch/src/app/pages/details/details-user/details-user.component.html
+++ b/bizmatch/src/app/pages/details/details-user/details-user.component.html
@@ -138,7 +138,7 @@
  @if(user){
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
    <!-- Header -->
-    <div class="flex items-center justify-between p-4 border-b">
+    <div class="flex items-center justify-between p-4 border-b relative">
      <div class="flex items-center space-x-4">
        <!-- <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" /> -->
        @if(user.hasProfile){
@@ -167,7 +167,12 @@
        }
        <!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
      </div>
-      <button class="text-red-500 text-2xl" (click)="historyService.goBack()">&times;</button>
+      <button
+        (click)="historyService.goBack()"
+        class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
+      >
+        <i class="fas fa-times"></i>
+      </button>
    </div>

    <!-- Description -->
@@ -194,7 +199,7 @@
        </div>
        <div class="flex flex-col sm:flex-row sm:items-center">
          <span class="font-semibold w-40 p-2">Company Location</span>
-          <span class="p-2 flex-grow">{{ user.companyLocation }}</span>
+          <span class="p-2 flex-grow">{{ user.companyLocation.city }} - {{ user.companyLocation.state }}</span>
        </div>
      </div>

--- a/bizmatch/src/app/pages/home/home.component.ts
+++ b/bizmatch/src/app/pages/home/home.component.ts
@@ -5,7 +5,6 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { KeycloakService } from 'keycloak-angular';
-import onChange from 'on-change';
 import { catchError, concat, debounceTime, distinctUntilChanged, Observable, of, Subject, Subscription, switchMap, tap } from 'rxjs';
 import { BusinessListingCriteria, CityAndStateResult, CommercialPropertyListingCriteria, GeoResult, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { ModalService } from '../../components/search-modal/modal.service';
@@ -15,7 +14,7 @@ import { ListingsService } from '../../services/listings.service';
 import { SearchService } from '../../services/search.service';
 import { SelectOptionsService } from '../../services/select-options.service';
 import { UserService } from '../../services/user.service';
-import { compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaStateObject, map2User } from '../../utils/utils';
+import { compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, createEnhancedProxy, getCriteriaStateObject, map2User } from '../../utils/utils';
@UntilDestroy()
@Component({
  selector: 'app-home',
@@ -55,10 +54,10 @@ export class HomeComponent {
  ) {}
  async ngOnInit() {
    const token = await this.keycloakService.getToken();
-    sessionStorage.removeItem('business_criteria');
-    sessionStorage.removeItem('commercialProperty_criteria');
-    sessionStorage.removeItem('broker_criteria');
-    this.criteria = this.createEnhancedProxy(getCriteriaStateObject('business'));
+    sessionStorage.removeItem('businessListings');
+    sessionStorage.removeItem('commercialPropertyListings');
+    sessionStorage.removeItem('brokerListings');
+    this.criteria = createEnhancedProxy(getCriteriaStateObject('businessListings'), this);
    this.user = map2User(token);
    this.loadCities();
    this.setupCriteriaChangeListener();
@@ -66,31 +65,31 @@ export class HomeComponent {
  async changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {
    this.activeTabAction = tabname;
    if ('business' === tabname) {
-      this.criteria = this.createEnhancedProxy(getCriteriaStateObject('business'));
+      this.criteria = createEnhancedProxy(getCriteriaStateObject('businessListings'), this);
    } else if ('commercialProperty' === tabname) {
-      this.criteria = this.createEnhancedProxy(getCriteriaStateObject('commercialProperty'));
+      this.criteria = createEnhancedProxy(getCriteriaStateObject('commercialPropertyListings'), this);
    } else if ('broker' === tabname) {
-      this.criteria = this.createEnhancedProxy(getCriteriaStateObject('broker'));
+      this.criteria = createEnhancedProxy(getCriteriaStateObject('brokerListings'), this);
    } else {
      this.criteria = undefined;
    }
  }
-  private createEnhancedProxy(obj: any) {
-    const component = this;
+  // private createEnhancedProxy(obj: any) {
+  //   const component = this;

-    const sessionStorageHandler = function (path, value, previous, applyData) {
-      let criteriaType = this.criteriaType;
-      sessionStorage.setItem(`${criteriaType}_criteria`, JSON.stringify(this));
-    };
+  //   const sessionStorageHandler = function (path, value, previous, applyData) {
+  //     let criteriaType = this.criteriaType;
+  //     sessionStorage.setItem(`${criteriaType}_criteria`, JSON.stringify(this));
+  //   };

-    return onChange(obj, function (path, value, previous, applyData) {
-      // Call the original sessionStorageHandler
-      sessionStorageHandler.call(this, path, value, previous, applyData);
+  //   return onChange(obj, function (path, value, previous, applyData) {
+  //     // Call the original sessionStorageHandler
+  //     sessionStorageHandler.call(this, path, value, previous, applyData);

-      // Notify about the criteria change using the component's context
-      component.criteriaChangeService.notifyCriteriaChange();
-    });
-  }
+  //     // Notify about the criteria change using the component's context
+  //     component.criteriaChangeService.notifyCriteriaChange();
+  //   });
+  // }
  search() {
    this.router.navigate([`${this.activeTabAction}Listings`]);
  }
@@ -169,18 +168,18 @@ export class HomeComponent {
    }
  }
  getTypes() {
-    if (this.criteria.criteriaType === 'business') {
+    if (this.criteria.criteriaType === 'businessListings') {
      return this.selectOptions.typesOfBusiness;
-    } else if (this.criteria.criteriaType === 'commercialProperty') {
+    } else if (this.criteria.criteriaType === 'commercialPropertyListings') {
      return this.selectOptions.typesOfCommercialProperty;
    } else {
      return this.selectOptions.customerSubTypes;
    }
  }
  getPlaceholderLabel() {
-    if (this.criteria.criteriaType === 'business') {
+    if (this.criteria.criteriaType === 'businessListings') {
      return 'Business Type';
-    } else if (this.criteria.criteriaType === 'commercialProperty') {
+    } else if (this.criteria.criteriaType === 'commercialPropertyListings') {
      return 'Property Type';
    } else {
      return 'Professional Type';
@@ -189,9 +188,9 @@ export class HomeComponent {
  setTotalNumberOfResults() {
    if (this.criteria) {
      console.log(`Getting total number of results for ${this.criteria.criteriaType}`);
-      if (this.criteria.criteriaType === 'business' || this.criteria.criteriaType === 'commercialProperty') {
-        this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria, this.criteria.criteriaType);
-      } else if (this.criteria.criteriaType === 'broker') {
+      if (this.criteria.criteriaType === 'businessListings' || this.criteria.criteriaType === 'commercialPropertyListings') {
+        this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria, this.criteria.criteriaType === 'businessListings' ? 'business' : 'commercialProperty');
+      } else if (this.criteria.criteriaType === 'brokerListings') {
        this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria);
      } else {
        this.numberOfResults$ = of();
@@ -199,11 +198,11 @@ export class HomeComponent {
    }
  }
  getNumberOfFiltersSet() {
-    if (this.criteria?.criteriaType === 'broker') {
+    if (this.criteria?.criteriaType === 'brokerListings') {
      return compareObjects(createEmptyUserListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
-    } else if (this.criteria?.criteriaType === 'business') {
+    } else if (this.criteria?.criteriaType === 'businessListings') {
      return compareObjects(createEmptyBusinessListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
-    } else if (this.criteria?.criteriaType === 'commercialProperty') {
+    } else if (this.criteria?.criteriaType === 'commercialPropertyListings') {
      return compareObjects(createEmptyCommercialPropertyListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
    } else {
      return 0;
--- a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
+++ b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
@@ -53,10 +53,10 @@ export class BrokerListingsComponent {
    private route: ActivatedRoute,
    private searchService: SearchService,
  ) {
-    this.criteria = getCriteriaStateObject('broker');
+    this.criteria = getCriteriaStateObject('brokerListings');
    this.init();
    this.searchService.currentCriteria.subscribe(criteria => {
-      if (criteria && criteria.criteriaType === 'broker') {
+      if (criteria && criteria.criteriaType === 'brokerListings') {
        this.criteria = criteria as UserListingCriteria;
        this.search();
      }
@@ -74,6 +74,7 @@ export class BrokerListingsComponent {
    this.users = usersReponse.results;
    this.totalRecords = usersReponse.totalCount;
    this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1;
+    this.page = this.criteria.page ? this.criteria.page : 1;
    this.cdRef.markForCheck();
    this.cdRef.detectChanges();
  }
--- a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts
+++ b/bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts
@@ -49,10 +49,10 @@ export class BusinessListingsComponent {
    private route: ActivatedRoute,
    private searchService: SearchService,
  ) {
-    this.criteria = getCriteriaStateObject('business');
+    this.criteria = getCriteriaStateObject('businessListings');
    this.init();
    this.searchService.currentCriteria.subscribe(criteria => {
-      if (criteria && criteria.criteriaType === 'business') {
+      if (criteria && criteria.criteriaType === 'businessListings') {
        this.criteria = criteria as BusinessListingCriteria;
        this.search();
      }
@@ -66,11 +66,11 @@ export class BusinessListingsComponent {
  }

  async search() {
-    //this.listings = await this.listingsService.getListingsByPrompt(this.criteria);
    const listingReponse = await this.listingsService.getListings(this.criteria, 'business');
    this.listings = listingReponse.results;
    this.totalRecords = listingReponse.totalCount;
    this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1;
+    this.page = this.criteria.page ? this.criteria.page : 1;
    this.cdRef.markForCheck();
    this.cdRef.detectChanges();
  }
--- a/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts
+++ b/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts
@@ -48,10 +48,10 @@ export class CommercialPropertyListingsComponent {
    private route: ActivatedRoute,
    private searchService: SearchService,
  ) {
-    this.criteria = getCriteriaStateObject('commercialProperty');
+    this.criteria = getCriteriaStateObject('commercialPropertyListings');
    this.init();
    this.searchService.currentCriteria.subscribe(criteria => {
-      if (criteria && criteria.criteriaType === 'commercialProperty') {
+      if (criteria && criteria.criteriaType === 'commercialPropertyListings') {
        this.criteria = criteria as CommercialPropertyListingCriteria;
        this.search();
      }
@@ -63,16 +63,12 @@ export class CommercialPropertyListingsComponent {
    this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count }));
    this.search();
  }
-  refine() {
-    this.criteria.start = 0;
-    this.criteria.page = 0;
-    this.search();
-  }
  async search() {
    const listingReponse = await this.listingsService.getListings(this.criteria, 'commercialProperty');
    this.listings = (<ResponseCommercialPropertyListingArray>listingReponse).results;
    this.totalRecords = (<ResponseCommercialPropertyListingArray>listingReponse).totalCount;
    this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1;
+    this.page = this.criteria.page ? this.criteria.page : 1;
    this.cdRef.markForCheck();
    this.cdRef.detectChanges();
  }
--- a/bizmatch/src/app/pages/subscription/account/account.component.html
+++ b/bizmatch/src/app/pages/subscription/account/account.component.html
@@ -71,13 +71,14 @@
            <option *ngFor="let type of customerTypes" [value]="type">{{ type | titlecase }}</option>
          </select>
        </div> -->
-        @if (!isAdmin()){
-        <app-validated-select label="Customer Type" name="customerType" [(ngModel)]="user.customerType" [options]="customerTypeOptions"></app-validated-select>
-        }@else{
+        @if (isAdmin() && !id){
        <div>
          <label for="customerType" class="block text-sm font-medium text-gray-700">User Type</label>
          <span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span>
        </div>
+
+        }@else{
+        <app-validated-select label="Customer Type" name="customerType" [(ngModel)]="user.customerType" [options]="customerTypeOptions"></app-validated-select>
        } @if (isProfessional){
        <!-- <div>
          <label for="customerSubType" class="block text-sm font-medium text-gray-700">Professional Type</label>
--- a/bizmatch/src/app/pages/subscription/account/account.component.ts
+++ b/bizmatch/src/app/pages/subscription/account/account.component.ts
@@ -56,7 +56,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
  styleUrl: './account.component.scss',
 })
 export class AccountComponent {
-  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
+  id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
  user: User;
  subscriptions: Array<Subscription>;
  userSubscriptions: Array<Subscription> = [];
--- 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
@@ -52,8 +52,10 @@
        </div>
      </div> -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
-        <app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input>
+        <!-- <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
+        <app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> -->
+        <app-validated-city label="Location" name="location" [(ngModel)]="listing.location"></app-validated-city>
+        <app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
      </div>

      <!-- <div class="flex mb-4 space-x-4">
@@ -83,8 +85,8 @@
        </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>
+        <app-validated-price label="Cash Flow" name="cashFlow" [(ngModel)]="listing.cashFlow"></app-validated-price>
      </div>

      <!-- <div class="mb-4">
@@ -99,9 +101,9 @@
          currencyMask
        />
      </div> -->
-      <div>
-        <app-validated-price label="Cash Flow" name="cashFlow" [(ngModel)]="listing.cashFlow"></app-validated-price>
-      </div>
+      <!-- <div>
+        
+      </div> -->

      <!-- <div class="flex mb-4 space-x-4">
        <div class="w-1/2">
--- 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,7 @@ import { AutoCompleteCompleteEvent, ImageProperty, createDefaultBusinessListing,

 import { environment } from '../../../../environments/environment';
 import { MessageService } from '../../../components/message/message.service';
+import { ValidatedCityComponent } from '../../../components/validated-city/validated-city.component';
 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';
@@ -45,6 +46,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
    ValidatedNgSelectComponent,
    ValidatedPriceComponent,
    ValidatedTextareaComponent,
+    ValidatedCityComponent,
  ],
  providers: [],
  templateUrl: './edit-business-listing.component.html',
--- 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
@@ -35,8 +35,9 @@
        <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>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select>
+        <app-validated-city label="Location" name="location" [(ngModel)]="listing.location"></app-validated-city>
      </div>

      <!-- <div class="flex mb-4 space-x-4">
@@ -49,10 +50,11 @@
          <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.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
-        <app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input>
-      </div>
+      <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> -->
+      <!-- <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
+        <app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> -->
+
+      <!-- </div> -->

      <!-- <div class="flex mb-4 space-x-4">
        <div class="w-1/2">
--- 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,7 @@ 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 { ValidatedCityComponent } from '../../../components/validated-city/validated-city.component';
 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';
@@ -50,6 +51,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
    ValidatedQuillComponent,
    ValidatedNgSelectComponent,
    ValidatedPriceComponent,
+    ValidatedCityComponent,
  ],
  providers: [],
  templateUrl: './edit-commercial-property-listing.component.html',