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

@@ -1,15 +1,14 @@
 <angular-cropper #cropper [imageUrl]="imageUrl" [cropperOptions]="cropperConfig"></angular-cropper>
 <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>
-    </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>
-</div>
+  @if(ratioVariable){
+  <div>
+    <p-selectButton [options]="stateOptions" [ngModel]="value" (ngModelChange)="changeAspectRation($event)" optionLabel="label" optionValue="value" class="small"></p-selectButton>
+  </div>
+  } @else {
+  <div></div>
+  }
+  <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,67 +1,52 @@
 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';
-export const stateOptions:KeyValueRatio[]=[
-  {label:'16/9',value:16/9},
-  {label:'1/1',value:1},
-  {label:'2/3',value:2/3},
-]
+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: 'Free', value: NaN },
+];
 @Component({
   selector: 'app-image-cropper',
   standalone: true,
-  imports: [SharedModule,FileUploadModule,AngularCropperjsModule,SelectButtonModule],
+  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
-  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
-  ){}
+  imageUrl: string; //wird im Template verwendet
+  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) {}
   ngOnInit(): void {
     if (this.config.data) {
-        this.imageUrl = this.config.data.imageUrl;
-        this.fileUpload = this.config.data.fileUpload;
-        this.cropperConfig = this.config.data.config ? this.config.data.config: this.cropperConfig;
-        this.ratioVariable = this.config.data.ratioVariable;
+      this.imageUrl = this.config.data.imageUrl;
+      this.fileUpload = this.config.data.fileUpload;
+      this.cropperConfig = this.config.data.config ? this.config.data.config : this.cropperConfig;
+      this.ratioVariable = this.config.data.ratioVariable;
     }
   }
-  sendImage(){
-    // setTimeout(()=>{
-      // this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
-      //   this.ref.close(blob);
-      //   this.fileUpload.clear()
-      // }, 'image/jpg');  
-    // },0)
-
-    this.fileUpload.clear()
+  sendImage() {
+    this.fileUpload.clear();
     this.ref.close(this.angularCropper.cropper);
-  }  
+  }
 
-  cancelUpload(){
+  cancelUpload() {
     this.fileUpload.clear();
     this.ref.close();
   }
-  changeAspectRation(ratio:number){
-    this.cropperConfig={aspectRatio: ratio}
+  changeAspectRation(ratio: number) {
+    this.cropperConfig = { aspectRatio: ratio };
     this.angularCropper.cropper.setAspectRatio(ratio);
   }
 }