Bug Fixed: #34,#28,#48,#46,#2,#15

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

@@ -18,6 +18,7 @@
       <div class="col-12 md:col-3 text-500">
         <div class="text-black font-bold line-height-3 mb-3">Actions</div>
         <a *ngIf="!keycloakService.isLoggedIn()" (click)="login()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Login</a>
+        <a *ngIf="!keycloakService.isLoggedIn()" (click)="register()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Register</a>
         <a *ngIf="keycloakService.isLoggedIn()" [routerLink]="['/account']" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Account</a>
         <a *ngIf="keycloakService.isLoggedIn()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline" (click)="keycloakService.logout()">Log Out</a>
       </div>

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

@@ -18,4 +18,7 @@ export class FooterComponent {
       redirectUri: window.location.href,
     });
   }
+  register() {
+    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
+  }
 }

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

@@ -91,14 +91,17 @@ export class HeaderComponent {
       {
         label: 'Businesses for Sale',
         routerLink: '/businessListings',
+        state: {},
       },
       {
         label: 'Commercial Property',
         routerLink: '/commercialPropertyListings',
+        state: {},
       },
       {
         label: 'Professionals/Brokers Directory',
         routerLink: '/brokerListings',
+        state: {},
       },
     ];
     this.loginItems = [

bizmatch/src/app/components/image-cropper/image-cropper.component.html

@@ -2,14 +2,13 @@
 <div class="flex justify-content-between mt-3">
   @if(ratioVariable){
   <div>
-        <p-selectButton [options]="stateOptions" [ngModel]="value" (ngModelChange)="changeAspectRation($event)"
-            optionLabel="label" optionValue="value"></p-selectButton>
+    <p-selectButton [options]="stateOptions" [ngModel]="value" (ngModelChange)="changeAspectRation($event)" optionLabel="label" optionValue="value" class="small"></p-selectButton>
   </div>
   } @else {
   <div></div>
   }
-    <div>
-        <p-button icon="pi" (click)="cancelUpload()" label="Cancel" [outlined]="true"></p-button>
-        <p-button icon="pi pi-check" (click)="sendImage()" label="Finish" pAutoFocus [autofocus]="true"></p-button>
+  <div class="flex justify-content-between">
+    <p-button icon="pi" (click)="cancelUpload()" label="Cancel" [outlined]="true" size="small" class="mr-2"></p-button>
+    <p-button icon="pi pi-check" (click)="sendImage()" label="Finish" pAutoFocus [autofocus]="true" size="small"></p-button>
   </div>
 </div>

bizmatch/src/app/components/image-cropper/image-cropper.component.scss

@@ -0,0 +1,4 @@
+::ng-deep p-selectbutton.small .p-button {
+  font-size: 0.875rem;
+  padding: 0.65625rem 1.09375rem;
+}

bizmatch/src/app/components/image-cropper/image-cropper.component.ts

@@ -1,41 +1,33 @@
 import { Component, ViewChild } from '@angular/core';
 import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
-import { LoadingService } from '../../services/loading.service';
-import { ImageService } from '../../services/image.service';
-import { HttpEventType } from '@angular/common/http';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { FileUpload, FileUploadModule } from 'primeng/fileupload';
-import { environment } from '../../../environments/environment';
-import {  User } from '../../../../../bizmatch-server/src/models/db.model';
-import { SharedModule } from '../../shared/shared/shared.module';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { KeyValueRatio } from '../../../../../bizmatch-server/src/models/main.model';
+import { ImageService } from '../../services/image.service';
+import { LoadingService } from '../../services/loading.service';
+import { SharedModule } from '../../shared/shared/shared.module';
 export const stateOptions: KeyValueRatio[] = [
   { label: '16/9', value: 16 / 9 },
   { label: '1/1', value: 1 },
-  {label:'2/3',value:2/3},
-]
+  { label: 'Free', value: NaN },
+];
 @Component({
   selector: 'app-image-cropper',
   standalone: true,
   imports: [SharedModule, FileUploadModule, AngularCropperjsModule, SelectButtonModule],
   templateUrl: './image-cropper.component.html',
-  styleUrl: './image-cropper.component.scss'
+  styleUrl: './image-cropper.component.scss',
 })
 export class ImageCropperComponent {
   @ViewChild(CropperComponent) public angularCropper: CropperComponent;
   imageUrl: string; //wird im Template verwendet
-  fileUpload:FileUpload
+  fileUpload: FileUpload;
   value: number = stateOptions[0].value;
-  cropperConfig={aspectRatio: this.value}  
-  ratioVariable:boolean
-  stateOptions=stateOptions
-  constructor(
-    private loadingService:LoadingService,
-    private imageUploadService: ImageService,    
-    public config: DynamicDialogConfig,
-    public ref: DynamicDialogRef
-  ){}
+  cropperConfig = { aspectRatio: this.value };
+  ratioVariable: boolean;
+  stateOptions = stateOptions;
+  constructor(private loadingService: LoadingService, private imageUploadService: ImageService, public config: DynamicDialogConfig, public ref: DynamicDialogRef) {}
   ngOnInit(): void {
     if (this.config.data) {
       this.imageUrl = this.config.data.imageUrl;
@@ -45,14 +37,7 @@ export class ImageCropperComponent {
     }
   }
   sendImage() {
-    // setTimeout(()=>{
-      // this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
-      //   this.ref.close(blob);
-      //   this.fileUpload.clear()
-      // }, 'image/jpg');  
-    // },0)
-
-    this.fileUpload.clear()
+    this.fileUpload.clear();
     this.ref.close(this.angularCropper.cropper);
   }
 
@@ -61,7 +46,7 @@ export class ImageCropperComponent {
     this.ref.close();
   }
   changeAspectRation(ratio: number) {
-    this.cropperConfig={aspectRatio: ratio}
+    this.cropperConfig = { aspectRatio: ratio };
     this.angularCropper.cropper.setAspectRatio(ratio);
   }
 }

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

@@ -14,50 +14,62 @@
         <div class="col-12 md:col-6">
           <ul class="list-none p-0 m-0 border-top-1 border-300">
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium flex">Description</div>
-              <div class="text-900 w-full md:w-10 line-height-3 flex flex-column" [innerHTML]="description"></div>
+              <div class="text-500 w-full md:w-3 font-medium flex">Description</div>
+              <div class="text-900 w-full md:w-9 line-height-3 flex flex-column" [innerHTML]="description"></div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Category</div>
-              <div class="text-900 w-full md:w-10">
+              <div class="text-500 w-full md:w-3 font-medium">Category</div>
+              <div class="text-900 w-full md:w-9">
                 <p-chip [label]="selectOptions.getBusiness(listing.type)"></p-chip>
               </div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Located in</div>
-              <div class="text-900 w-full md:w-10">{{ selectOptions.getState(listing.state) }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Located in</div>
+              <div class="text-900 w-full md:w-9">{{ listing.city }}, {{ selectOptions.getState(listing.state) }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Asking Price</div>
-              <div class="text-900 w-full md:w-10">{{ listing.price | currency }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Asking Price</div>
+              <div class="text-900 w-full md:w-9">{{ listing.price | currency }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Real Estate Included</div>
-              <div class="text-900 w-full md:w-10">{{ listing.realEstateIncluded ? 'Yes' : 'No' }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Sales revenue</div>
+              <div class="text-900 w-full md:w-9">{{ listing.salesRevenue | currency }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Sales revenue</div>
-              <div class="text-900 w-full md:w-10">{{ listing.salesRevenue | currency }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Cash flow</div>
+              <div class="text-900 w-full md:w-9">{{ listing.cashFlow | currency }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Cash flow</div>
-              <div class="text-900 w-full md:w-10">{{ listing.cashFlow | currency }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Type of Real Estate</div>
+              <div class="text-900 w-full md:w-9">
+                @if (listing.realEstateIncluded){
+                <p-chip label="Real Estate Included"></p-chip>
+                } @if (listing.leasedLocation){
+                <p-chip label="Leased Location"></p-chip>
+                } @if (listing.franchiseResale){
+                <p-chip label="Franchise Re-Sale"></p-chip>
+                }
+              </div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Employees</div>
-              <div class="text-900 w-full md:w-10">{{ listing.employees }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Employees</div>
+              <div class="text-900 w-full md:w-9">{{ listing.employees }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Support & Training</div>
-              <div class="text-900 w-full md:w-10">{{ listing.supportAndTraining }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Established since</div>
+              <div class="text-900 w-full md:w-9">{{ listing.established }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Reason for Sale</div>
-              <div class="text-900 w-full md:w-10">{{ listing.reasonForSale }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Support & Training</div>
+              <div class="text-900 w-full md:w-9">{{ listing.supportAndTraining }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Broker licensing</div>
-              <div class="text-900 w-full md:w-10">{{ listing.brokerLicencing }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Reason for Sale</div>
+              <div class="text-900 w-full md:w-9">{{ listing.reasonForSale }}</div>
+            </li>
+            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
+              <div class="text-500 w-full md:w-3 font-medium">Broker licensing</div>
+              <div class="text-900 w-full md:w-9">{{ listing.brokerLicencing }}</div>
             </li>
           </ul>
           @if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
@@ -79,7 +91,8 @@
               </div>
               <div class="field mb-4 col-12 md:col-6">
                 <label for="phoneNumber" class="font-medium text-900">Phone Number</label>
-                <input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" />
+                <!-- <input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" /> -->
+                <p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="mailinfo.sender.phoneNumber"></p-inputMask>
               </div>
               <div class="field mb-4 col-12 md:col-6">
                 <label for="state" class="font-medium text-900">Country/State</label>
@@ -92,9 +105,9 @@
               </div>
               @if(listingUser){
               <div class="surface-border mb-4 col-12 flex align-items-center">
-                Listing by &nbsp;<a routerLink="/details-user/{{ listingUser.id }}" class="mr-2">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
+                Listing by &nbsp;<a routerLink="/details-user/{{ listingUser.id }}" class="mr-2 font-semibold">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
                 @if(listingUser.hasCompanyLogo){
-                <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="height: 30px; max-width: 100px" />
+                <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
                 }
               </div>
               }

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

@@ -5,6 +5,7 @@ import { KeycloakService } from 'keycloak-angular';
 import onChange from 'on-change';
 import { MessageService } from 'primeng/api';
 import { GalleriaModule } from 'primeng/galleria';
+import { InputMaskModule } from 'primeng/inputmask';
 import { lastValueFrom } from 'rxjs';
 import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { KeycloakUser, ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
@@ -16,11 +17,10 @@ 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';
-
 @Component({
   selector: 'app-details-business-listing',
   standalone: true,
-  imports: [SharedModule, GalleriaModule],
+  imports: [SharedModule, GalleriaModule, InputMaskModule],
   providers: [MessageService],
   templateUrl: './details-business-listing.component.html',
   styleUrl: './details-business-listing.component.scss',
@@ -82,7 +82,7 @@ export class DetailsBusinessListingComponent {
     this.keycloakUser = map2User(token);
     if (this.keycloakUser) {
       this.user = await this.userService.getByMail(this.keycloakUser.email);
-      this.mailinfo.sender = { name: `${this.user.firstname} ${this.user.lastname}`, email: this.user.email, phoneNumber: this.user.email, state: this.user.companyLocation };
+      this.mailinfo.sender = { name: `${this.user.firstname} ${this.user.lastname}`, email: this.user.email, phoneNumber: this.user.phoneNumber, state: this.user.companyLocation };
     }
     this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'business'));
     this.listingUser = await this.userService.getById(this.listing.userId);

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

@@ -14,32 +14,32 @@
         <div class="col-12 md:col-6">
           <ul class="list-none p-0 m-0 border-top-1 border-300">
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium flex">Description</div>
-              <div class="text-900 w-full md:w-10 line-height-3" [innerHTML]="description"></div>
+              <div class="text-500 w-full md:w-3 font-medium flex">Description</div>
+              <div class="text-900 w-full md:w-9 line-height-3" [innerHTML]="description"></div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Property Category</div>
-              <div class="text-900 w-full md:w-10">{{ selectOptions.getCommercialProperty(listing.type) }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Property Category</div>
+              <div class="text-900 w-full md:w-9">{{ selectOptions.getCommercialProperty(listing.type) }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Located in</div>
-              <div class="text-900 w-full md:w-10">{{ selectOptions.getState(listing.state) }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Located in</div>
+              <div class="text-900 w-full md:w-9">{{ selectOptions.getState(listing.state) }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">City</div>
-              <div class="text-900 w-full md:w-10">{{ listing.city }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">City</div>
+              <div class="text-900 w-full md:w-9">{{ listing.city }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Zip Code</div>
-              <div class="text-900 w-full md:w-10">{{ listing.zipCode }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Zip Code</div>
+              <div class="text-900 w-full md:w-9">{{ listing.zipCode }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">County</div>
-              <div class="text-900 w-full md:w-10">{{ listing.county }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">County</div>
+              <div class="text-900 w-full md:w-9">{{ listing.county }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Asking Price:</div>
-              <div class="text-900 w-full md:w-10">{{ listing.price | currency }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Asking Price:</div>
+              <div class="text-900 w-full md:w-9">{{ listing.price | currency }}</div>
             </li>
           </ul>
 
@@ -69,7 +69,8 @@
               </div>
               <div class="field mb-4 col-12 md:col-6">
                 <label for="phoneNumber" class="font-medium text-900">Phone Number</label>
-                <input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" />
+                <!-- <input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" /> -->
+                <p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="mailinfo.sender.phoneNumber"></p-inputMask>
               </div>
               <div class="field mb-4 col-12 md:col-6">
                 <label for="state" class="font-medium text-900">Country/State</label>
@@ -82,9 +83,9 @@
               </div>
               @if(listingUser){
               <div class="surface-border mb-4 col-12 flex align-items-center">
-                Listing by &nbsp;<a routerLink="/details-user/{{ listingUser.id }}" class="mr-2">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
+                Listing by &nbsp;<a routerLink="/details-user/{{ listingUser.id }}" class="mr-2 font-semibold">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
                 @if(listingUser.hasCompanyLogo){
-                <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imagePath }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="height: 30px; max-width: 100px" />
+                <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imagePath }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
                 }
               </div>
               }

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

@@ -5,6 +5,7 @@ import { KeycloakService } from 'keycloak-angular';
 import onChange from 'on-change';
 import { MessageService } from 'primeng/api';
 import { GalleriaModule } from 'primeng/galleria';
+import { InputMaskModule } from 'primeng/inputmask';
 import { lastValueFrom } from 'rxjs';
 import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { ErrorResponse, KeycloakUser, ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
@@ -21,7 +22,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../.
 @Component({
   selector: 'app-details-commercial-property-listing',
   standalone: true,
-  imports: [SharedModule, GalleriaModule],
+  imports: [SharedModule, GalleriaModule, InputMaskModule],
   providers: [MessageService],
   templateUrl: './details-commercial-property-listing.component.html',
   styleUrl: './details-commercial-property-listing.component.scss',
@@ -79,7 +80,7 @@ export class DetailsCommercialPropertyListingComponent {
     this.keycloakUser = map2User(token);
     if (this.keycloakUser) {
       this.user = await this.userService.getByMail(this.keycloakUser.email);
-      this.mailinfo.sender = { name: `${this.user.firstname} ${this.user.lastname}`, email: this.user.email, phoneNumber: this.user.email, state: this.user.companyLocation };
+      this.mailinfo.sender = { name: `${this.user.firstname} ${this.user.lastname}`, email: this.user.email, phoneNumber: this.user.phoneNumber, state: this.user.companyLocation };
     }
     this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
     this.listingUser = await this.userService.getById(this.listing.userId);

bizmatch/src/app/pages/details/details-user/details-user.component.html

@@ -30,7 +30,7 @@
                   <!-- <span class="font-medium text-500">Logo</span> -->
                   <div>
                     @if(user.hasCompanyLogo){
-                    <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="height: 60px; max-width: 100px" />
+                    <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 60px; max-width: 100px" />
                     }
                     <!-- <img *ngIf="!user.hasCompanyLogo" src="assets/images/placeholder.png"
                                             class="mr-5 lg:mb-0" style="height:60px;max-width:100px" /> -->
@@ -57,7 +57,7 @@
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
               <div class="text-500 w-full md:w-2 font-medium">Phone Number</div>
-              <div class="text-900 w-full md:w-10 line-height-3">{{ user.phoneNumber }}</div>
+              <div class="text-900 w-full md:w-10 line-height-3">{{ formatPhoneNumber(user.phoneNumber) }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
               <div class="text-500 w-full md:w-2 font-medium">EMail Address</div>

bizmatch/src/app/pages/details/details-user/details-user.component.ts

@@ -14,7 +14,7 @@ import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
-import { map2User } from '../../../utils/utils';
+import { formatPhoneNumber, map2User } from '../../../utils/utils';
 
 @Component({
   selector: 'app-details-user',
@@ -38,6 +38,7 @@ export class DetailsUserComponent {
   ts = new Date().getTime();
   env = environment;
   emailToDirName = emailToDirName;
+  formatPhoneNumber = formatPhoneNumber;
   constructor(
     private activatedRoute: ActivatedRoute,
     private router: Router,

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

@@ -6,7 +6,7 @@
   margin-bottom: -1px;
 }
 .search {
-    background-color: #343F69;
+  background-color: #343f69;
 }
 ::ng-deep p-paginator div {
   background-color: var(--surface-200) !important;
@@ -16,7 +16,7 @@
   border-radius: 6px;
   // width: 100px;
   max-width: 100px;
-    height: 45px;
+  max-height: 45px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   padding: 1px 1px;
   object-fit: contain;

bizmatch/src/app/pages/subscription/account/account.component.html

@@ -36,7 +36,7 @@
           <div class="grid">
             <div class="mb-4 col-12 md:col-4">
               <label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone Number</label>
-              <input id="phoneNumber" type="text" pInputText [(ngModel)]="user.phoneNumber" />
+              <p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="user.phoneNumber"></p-inputMask>
             </div>
             <div class="mb-4 col-12 md:col-4">
               <label for="companyWebsite" class="block font-medium text-900 mb-2">Company Website</label>

bizmatch/src/app/pages/subscription/account/account.component.scss

@@ -25,8 +25,8 @@
 /* Stil für das FontAwesome Icon */
 .image-wrap fa-icon {
   position: absolute;
-  top: 5px; /* Positioniert das Icon am oberen Rand des Bildes */
-  right: 5px; /* Positioniert das Icon am rechten Rand des Bildes */
+  top: -5px; /* Positioniert das Icon am oberen Rand des Bildes */
+  right: -18px; /* Positioniert das Icon am rechten Rand des Bildes */
   color: #fff; /* Weiße Farbe für das Icon */
   background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
   padding: 5px; /* Ein wenig Platz um das Icon */

bizmatch/src/app/pages/subscription/account/account.component.ts

@@ -10,6 +10,7 @@ import { DialogModule } from 'primeng/dialog';
 import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { EditorModule } from 'primeng/editor';
 import { FileUpload, FileUploadModule } from 'primeng/fileupload';
+import { InputMaskModule } from 'primeng/inputmask';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { lastValueFrom } from 'rxjs';
 import { User } from '../../../../../../bizmatch-server/src/models/db.model';
@@ -23,12 +24,12 @@ import { SelectOptionsService } from '../../../services/select-options.service';
 import { SubscriptionsService } from '../../../services/subscriptions.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
-import { map2User } from '../../../utils/utils';
+import { getDialogWidth, getImageDimensions, map2User } from '../../../utils/utils';
 import { TOOLBAR_OPTIONS } from '../../utils/defaults';
 @Component({
   selector: 'app-account',
   standalone: true,
-  imports: [SharedModule, FileUploadModule, EditorModule, AngularCropperjsModule, DialogModule, SelectButtonModule, DynamicDialogModule, ConfirmDialogModule],
+  imports: [SharedModule, FileUploadModule, EditorModule, AngularCropperjsModule, DialogModule, SelectButtonModule, DynamicDialogModule, ConfirmDialogModule, InputMaskModule],
   providers: [MessageService, DialogService, ConfirmationService],
   templateUrl: './account.component.html',
   styleUrl: './account.component.scss',
@@ -124,6 +125,9 @@ export class AccountComponent {
     const imageUrl = URL.createObjectURL(event.files[0]);
     this.type = type;
     const config = { aspectRatio: type === 'company' ? stateOptions[0].value : stateOptions[2].value };
+    getImageDimensions(imageUrl).then(dimensions => {
+      const dialogWidth = getDialogWidth(dimensions);
+
       this.dialogRef = this.dialogService.open(ImageCropperComponent, {
         data: {
           imageUrl: imageUrl,
@@ -132,15 +136,11 @@ export class AccountComponent {
           ratioVariable: type === 'company' ? true : false,
         },
         header: 'Edit Image',
-      width: '30vw',
+        width: dialogWidth,
         modal: true,
         closeOnEscape: true,
         keepInViewport: true,
         closable: false,
-      // breakpoints: {
-      //   '960px': '75vw',
-      //   '640px': '90vw',
-      // },
       });
       this.dialogRef.onClose.subscribe(cropper => {
         if (cropper) {
@@ -165,6 +165,7 @@ export class AccountComponent {
           });
         }
       });
+    });
   }
   deleteConfirm(type: 'profile' | 'logo') {
     this.confirmationService.confirm({

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

@@ -3,7 +3,7 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { lastValueFrom } from 'rxjs';
 import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
-import { createDefaultCommercialPropertyListing, map2User, routeListingWithState } from '../../../utils/utils';
+import { createDefaultCommercialPropertyListing, getDialogWidth, getImageDimensions, map2User, routeListingWithState } from '../../../utils/utils';
 
 import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { HttpEventType } from '@angular/common/http';
@@ -151,6 +151,8 @@ export class EditCommercialPropertyListingComponent {
 
   select(event: any) {
     const imageUrl = URL.createObjectURL(event.files[0]);
+    getImageDimensions(imageUrl).then(dimensions => {
+      const dialogWidth = getDialogWidth(dimensions);
       this.dialogRef = this.dialogService.open(ImageCropperComponent, {
         data: {
           imageUrl: imageUrl,
@@ -158,7 +160,7 @@ export class EditCommercialPropertyListingComponent {
           ratioVariable: false,
         },
         header: 'Edit Image',
-      width: '50vw',
+        width: dialogWidth,
         modal: true,
         closeOnEscape: true,
         keepInViewport: true,
@@ -187,6 +189,7 @@ export class EditCommercialPropertyListingComponent {
           cropper.destroy();
         }
       });
+    });
   }
 
   deleteConfirm(imageName: string) {

bizmatch/src/app/utils/utils.ts

@@ -87,7 +87,14 @@ export function createLogger(name: string, level: number = INFO, options: any =
     ...options,
   });
 }
-
+export function formatPhoneNumber(phone: string): string {
+  const cleaned = ('' + phone).replace(/\D/g, '');
+  const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+  if (match) {
+    return '(' + match[1] + ') ' + match[2] + '-' + match[3];
+  }
+  return phone;
+}
 export const getSessionStorageHandler = function (path, value, previous, applyData) {
   sessionStorage.setItem('criteria', JSON.stringify(this));
 };
@@ -130,3 +137,25 @@ export function map2User(jwt: string): KeycloakUser {
     return null;
   }
 }
+export function getImageDimensions(imageUrl: string): Promise<{ width: number; height: number }> {
+  return new Promise(resolve => {
+    const img = new Image();
+    img.onload = () => {
+      resolve({ width: img.width, height: img.height });
+    };
+    img.src = imageUrl;
+  });
+}
+
+export function getDialogWidth(dimensions): string {
+  const aspectRatio = dimensions.width / dimensions.height;
+  let dialogWidth = '50vw'; // Standardbreite
+
+  // Passen Sie die Breite basierend auf dem Seitenverhältnis an
+  if (aspectRatio < 1) {
+    dialogWidth = '30vw'; // Hochformat
+  } else if (aspectRatio > 1) {
+    dialogWidth = '50vw'; // Querformat
+  }
+  return dialogWidth;
+}