Update Angular 18, ng-select, quill editor, ngx-currency, Umbau business-detail, edit-business, commercial-lsitings, remove ng-prime

bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html

@@ -1,4 +1,4 @@
-<div id="sky-line" class="hidden-lg-down"></div>
+<!-- <div id="sky-line" class="hidden-lg-down"></div>
 <div class="search">
   <div class="wrapper">
     <div class="grid p-4 align-items-center">
@@ -60,4 +60,4 @@
       <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
     </div>
   </div>
-</div>
+</div> -->

bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts

@@ -3,14 +3,6 @@ import { ChangeDetectorRef, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import onChange from 'on-change';
-import { ButtonModule } from 'primeng/button';
-import { CheckboxModule } from 'primeng/checkbox';
-import { DropdownModule } from 'primeng/dropdown';
-import { InputGroupModule } from 'primeng/inputgroup';
-import { InputTextModule } from 'primeng/inputtext';
-import { PaginatorModule } from 'primeng/paginator';
-import { StyleClassModule } from 'primeng/styleclass';
-import { ToggleButtonModule } from 'primeng/togglebutton';
 import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { ListingCriteria, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
@@ -23,21 +15,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from
 @Component({
   selector: 'app-broker-listings',
   standalone: true,
-  imports: [
-    CommonModule,
-    StyleClassModule,
-    ButtonModule,
-    CheckboxModule,
-    InputTextModule,
-    DropdownModule,
-    FormsModule,
-    StyleClassModule,
-    ToggleButtonModule,
-    RouterModule,
-    PaginatorModule,
-    InputGroupModule,
-    NgOptimizedImage,
-  ],
+  imports: [CommonModule, FormsModule, RouterModule, NgOptimizedImage],
   templateUrl: './broker-listings.component.html',
   styleUrls: ['./broker-listings.component.scss', '../../pages.scss'],
 })

bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts

@@ -3,15 +3,6 @@ import { ChangeDetectorRef, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import onChange from 'on-change';
-import { ButtonModule } from 'primeng/button';
-import { CheckboxModule } from 'primeng/checkbox';
-import { DropdownModule } from 'primeng/dropdown';
-import { InputGroupModule } from 'primeng/inputgroup';
-import { InputTextModule } from 'primeng/inputtext';
-import { PaginatorModule } from 'primeng/paginator';
-import { StyleClassModule } from 'primeng/styleclass';
-import { ToggleButtonModule } from 'primeng/togglebutton';
-import { TooltipModule } from 'primeng/tooltip';
 import { BusinessListing } from '../../../../../../bizmatch-server/src/models/db.model';
 import { ListingCriteria, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
@@ -23,21 +14,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from
 @Component({
   selector: 'app-business-listings',
   standalone: true,
-  imports: [
-    CommonModule,
-    StyleClassModule,
-    ButtonModule,
-    CheckboxModule,
-    InputTextModule,
-    DropdownModule,
-    FormsModule,
-    StyleClassModule,
-    ToggleButtonModule,
-    RouterModule,
-    PaginatorModule,
-    InputGroupModule,
-    TooltipModule,
-  ],
+  imports: [CommonModule, FormsModule, RouterModule],
   templateUrl: './business-listings.component.html',
   styleUrls: ['./business-listings.component.scss', '../../pages.scss'],
 })

bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html

@@ -1,47 +1,4 @@
-<div id="sky-line" class="hidden-lg-down"></div>
-<div class="search">
-  <div class="wrapper">
-    <div class="grid p-4 align-items-center">
-      <div class="col-2">
-        <p-dropdown [filter]="true" filterBy="name" [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Location" [style]="{ width: '100%' }">
-          <ng-template let-state pTemplate="item">
-            <div class="flex align-items-center gap-2">
-              <div>{{ state.name }} ({{ state.count }})</div>
-            </div>
-          </ng-template>
-        </p-dropdown>
-      </div>
-      <div class="col-2">
-        <p-dropdown
-          [filter]="true"
-          filterBy="name"
-          [options]="selectOptions.typesOfCommercialProperty"
-          [(ngModel)]="criteria.type"
-          optionLabel="name"
-          optionValue="value"
-          [showClear]="true"
-          placeholder="Categorie of Property"
-          [style]="{ width: '100%' }"
-        ></p-dropdown>
-      </div>
-      <div class="col-2">
-        <p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Min Price" [style]="{ width: '100%' }"></p-dropdown>
-      </div>
-      <div class="col-2">
-        <p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Max Price" [style]="{ width: '100%' }"></p-dropdown>
-      </div>
-      <div class="col-2">
-        <p-inputGroup>
-          <input id="name" type="text" pInputText [(ngModel)]="criteria.title" placeholder="Title" />
-          <button type="button" pButton icon="pi pi-times" class="p-button-secondary" (click)="reset()"></button>
-        </p-inputGroup>
-      </div>
-      <div class="col-1 col-offset-1">
-        <p-button label="Refine" (click)="refine()"></p-button>
-      </div>
-    </div>
-  </div>
-</div>
+<!--
 <div class="surface-200 h-full">
   <div class="wrapper">
     <div class="grid">
@@ -66,7 +23,6 @@
             <div class="flex flex-column w-full gap-3">
               <div class="flex w-full justify-content-between align-items-center flex-wrap gap-3">
                 <p class="font-semibold text-lg mt-0 mb-0">{{ listing.title }}</p>
-                <!-- <p-rating [ngModel]="val1" readonly="true" stars="5" [cancel]="false" ngClass="flex-shrink-0"></p-rating> -->
               </div>
               <p class="font-normal text-lg text-600 mt-0 mb-0">{{ listing.city }}</p>
               <div class="flex flex-wrap justify-content-between xl:h-2rem mt-auto">
@@ -94,12 +50,31 @@
 
       }
     </div>
-
-    <div class="mb-2 surface-200 flex align-items-center justify-content-center paginator-bar">
-      <!-- @if(listings && listings.length>12){ -->
-      <div class="mx-1 text-color">Total number of Listings: {{ totalRecords }}</div>
-      <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
-      <!-- } -->
+  </div>
+</div> -->
+<div class="container mx-auto px-4 py-8">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <!-- Property Card 1 -->
+    @for (listing of listings; track listing.id) {
+    <div class="bg-white rounded-lg shadow-md overflow-hidden">
+      @if (listing.imageOrder?.length>0){
+      <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" alt="Image" class="w-full h-48 object-cover" />
+      } @else {
+      <img src="assets/images/placeholder_properties.jpg" alt="Image" class="w-full h-48 object-cover" />
+      }
+      <div class="p-4">
+        <div class="flex items-center justify-between mb-2">
+          <span class="bg-gray-200 text-gray-700 text-xs font-semibold px-2 py-1 rounded">{{ selectOptions.getState(listing.state) }}</span>
+          <span class="text-gray-600 text-sm"><i [class]="selectOptions.getIconTypeOfCommercials(listing.type)" class="mr-1"></i> {{ selectOptions.getCommercialProperty(listing.type) }}</span>
+        </div>
+        <h3 class="text-lg font-semibold mb-2">{{ listing.title }}</h3>
+        <p class="text-gray-600 mb-2">{{ listing.city }}</p>
+        <p class="text-xl font-bold mb-4">{{ listing.price | currency }}</p>
+        <button [routerLink]="['/details-commercial-property-listing', listing.id]" class="bg-green-500 text-white px-4 py-2 rounded-full w-full hover:bg-green-600 transition duration-300">
+          View Full Listing <i class="fas fa-arrow-right ml-1"></i>
+        </button>
+      </div>
     </div>
+    }
   </div>
 </div>

bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts

@@ -3,14 +3,6 @@ import { ChangeDetectorRef, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import onChange from 'on-change';
-import { ButtonModule } from 'primeng/button';
-import { CheckboxModule } from 'primeng/checkbox';
-import { DropdownModule } from 'primeng/dropdown';
-import { InputGroupModule } from 'primeng/inputgroup';
-import { InputTextModule } from 'primeng/inputtext';
-import { PaginatorModule } from 'primeng/paginator';
-import { StyleClassModule } from 'primeng/styleclass';
-import { ToggleButtonModule } from 'primeng/togglebutton';
 import { CommercialPropertyListing } from '../../../../../../bizmatch-server/src/models/db.model';
 import { ListingCriteria } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
@@ -22,7 +14,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from
 @Component({
   selector: 'app-commercial-property-listings',
   standalone: true,
-  imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule, InputGroupModule],
+  imports: [CommonModule, FormsModule, RouterModule],
   templateUrl: './commercial-property-listings.component.html',
   styleUrls: ['./commercial-property-listings.component.scss', '../../pages.scss'],
 })