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

2024-07-04 17:51:35 +02:00
parent 9228cbebbe
commit 5fa2dd60fa
49 changed files with 356 additions and 2972 deletions
--- 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
@@ -156,10 +156,11 @@
 </div>
 <p-toast></p-toast>
 <p-confirmDialog></p-confirmDialog> -->
+
 <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>
-    <form (ngSubmit)="onSubmit()" #listingForm="ngForm">
+    <form #listingForm="ngForm">
      <div class="mb-4">
        <label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
        <select id="listingsCategory" [(ngModel)]="listing.listingsCategory" name="listingsCategory" class="w-full p-2 border border-gray-300 rounded-md">
@@ -186,7 +187,7 @@
      <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]="usStates" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
+          <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
        </div>
        <div class="w-1/2">
          <label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
@@ -203,7 +204,7 @@
            [(ngModel)]="listing.price"
            name="price"
            class="w-full p-2 border border-gray-300 rounded-md"
-            [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 2 }"
+            [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
            currencyMask
          />
        </div>
@@ -215,7 +216,7 @@
            [(ngModel)]="listing.salesRevenue"
            name="salesRevenue"
            class="w-full p-2 border border-gray-300 rounded-md"
-            [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 2 }"
+            [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
            currencyMask
          />
        </div>
@@ -229,7 +230,7 @@
          [(ngModel)]="listing.cashFlow"
          name="cashFlow"
          class="w-full p-2 border border-gray-300 rounded-md"
-          [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 2 }"
+          [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
          currencyMask
        />
      </div>
@@ -290,14 +291,16 @@
        <label class="flex items-center cursor-pointer">
          <div class="relative">
            <input type="checkbox" [(ngModel)]="listing.draft" name="draft" class="hidden" />
-            <div class="toggle-bg block w-14 h-8 rounded-full bg-gray-600 transition"></div>
-            <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
+            <div class="toggle-bg block w-12 h-6 rounded-full bg-gray-600 transition"></div>
          </div>
          <div class="ml-3 text-gray-700 font-medium">Draft Mode (Will not be shown as public listing)</div>
        </label>
      </div>
-
-      <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Update Listing</button>
+      @if (mode==='create'){
+      <button (click)="save()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Post Listing</button>
+      } @else {
+      <button (click)="save()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Update Listing</button>
+      }
    </form>
  </div>
 </div>
--- a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.scss
+++ b/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.scss
@@ -14,14 +14,14 @@
  }
 }

-input[type='checkbox'] {
-  &:checked + .dot {
-    transform: translateX(100%);
-  }
-  &:checked + .block {
-    background-color: #4299e1;
-  }
-}
+// input[type='checkbox'] {
+//   &:checked + .dot {
+//     transform: translateX(100%);
+//   }
+//   &:checked + .block {
+//     background-color: #4299e1;
+//   }
+// }

 .dot {
  transition: all 0.3s ease-in-out;
--- 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
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { lastValueFrom } from 'rxjs';
 import { ListingsService } from '../../../services/listings.service';
@@ -11,17 +11,12 @@ import { AngularCropperjsModule } from 'angular-cropperjs';
 import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
 import { KeycloakService } from 'keycloak-angular';
 import { QuillModule } from 'ngx-quill';
-import { ConfirmationService, MessageService } from 'primeng/api';
-import { CarouselModule } from 'primeng/carousel';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import { DialogModule } from 'primeng/dialog';
-import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { EditorModule } from 'primeng/editor';
-import { FileUpload, FileUploadModule } from 'primeng/fileupload';
+
+import { NgSelectModule } from '@ng-select/ng-select';
+import { NgxCurrencyDirective } from 'ngx-currency';
 import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { AutoCompleteCompleteEvent, ImageProperty, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
-import { InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
 import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
 import { GeoService } from '../../../services/geo.service';
 import { ImageService } from '../../../services/image.service';
@@ -32,27 +27,12 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({
  selector: 'business-listing',
  standalone: true,
-  imports: [
-    SharedModule,
-    ArrayToStringPipe,
-    InputNumberModule,
-    CarouselModule,
-    DialogModule,
-    AngularCropperjsModule,
-    FileUploadModule,
-    EditorModule,
-    DynamicDialogModule,
-    DragDropModule,
-    ConfirmDialogModule,
-    MixedCdkDragDropModule,
-    QuillModule,
-  ],
-  providers: [MessageService, DialogService, ConfirmationService],
+  imports: [SharedModule, ArrayToStringPipe, AngularCropperjsModule, DragDropModule, MixedCdkDragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule],
+  providers: [],
  templateUrl: './edit-business-listing.component.html',
  styleUrl: './edit-business-listing.component.scss',
 })
 export class EditBusinessListingComponent {
-  @ViewChild(FileUpload) public fileUpload: FileUpload;
  listingsCategory = 'business';
  category: string;
  location: string;
@@ -82,7 +62,6 @@ export class EditBusinessListingComponent {
  ];
  config = { aspectRatio: 16 / 9 };
  editorModules = TOOLBAR_OPTIONS;
-  dialogRef: DynamicDialogRef | undefined;
  draggedImage: ImageProperty;
  faTrash = faTrash;
  data: CommercialPropertyListing;
@@ -96,12 +75,10 @@ export class EditBusinessListingComponent {
    private activatedRoute: ActivatedRoute,
    private listingsService: ListingsService,
    public userService: UserService,
-    private messageService: MessageService,
    private geoService: GeoService,
    private imageService: ImageService,
    private loadingService: LoadingService,
-    public dialogService: DialogService,
-    private confirmationService: ConfirmationService,
+
    private route: ActivatedRoute,
    private keycloakService: KeycloakService,
  ) {
@@ -139,7 +116,7 @@ export class EditBusinessListingComponent {
  async save() {
    this.listing = await this.listingsService.save(this.listing, this.listing.listingsCategory);
    this.router.navigate(['editBusinessListing', this.listing.id]);
-    this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
+    // this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
  }

  suggestions: string[] | undefined;