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

This commit is contained in:
2024-07-04 17:51:35 +02:00
parent 9228cbebbe
commit 5fa2dd60fa
49 changed files with 356 additions and 2972 deletions

View File

@@ -1,11 +1,13 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { initFlowbite } from 'flowbite';
import { SidebarModule } from 'primeng/sidebar';
import { SharedModule } from '../../shared/shared/shared.module';
@Component({
selector: 'app-footer',
standalone: true,
imports: [SharedModule, SidebarModule],
imports: [CommonModule, FormsModule, RouterModule, FontAwesomeModule],
templateUrl: './footer.component.html',
styleUrl: './footer.component.scss',
})

View File

@@ -87,18 +87,30 @@
class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
>
<li>
<a class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">Businesses</a>
<a
routerLinkActive="active-link"
routerLink="/businessListings"
[ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/businessListings') }"
class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
aria-current="page"
>Businesses</a
>
</li>
<li>
<a
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
routerLinkActive="active-link"
routerLink="/commercialPropertyListings"
[ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/commercialPropertyListings') }"
class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>Properties</a
>
</li>
<li>
<a
href="#"
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
routerLinkActive="active-link"
routerLink="/brokerListings"
[ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/brokerListings') }"
class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>Professionals</a
>
</li>

View File

@@ -1,14 +1,9 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Router, RouterModule } from '@angular/router';
import { faUserGear } from '@fortawesome/free-solid-svg-icons';
import { initFlowbite } from 'flowbite';
import { KeycloakService } from 'keycloak-angular';
import { MenuItem } from 'primeng/api';
import { ButtonModule } from 'primeng/button';
import { MenubarModule } from 'primeng/menubar';
import { OverlayPanelModule } from 'primeng/overlaypanel';
import { TabMenuModule } from 'primeng/tabmenu';
import { Observable } from 'rxjs';
import { KeycloakUser } from '../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../environments/environment';
@@ -16,7 +11,7 @@ import { map2User } from '../../utils/utils';
@Component({
selector: 'header',
standalone: true,
imports: [CommonModule, MenubarModule, ButtonModule, OverlayPanelModule, TabMenuModule],
imports: [CommonModule, RouterModule],
templateUrl: './header.component.html',
styleUrl: './header.component.scss',
})
@@ -24,9 +19,6 @@ export class HeaderComponent {
public buildVersion = environment.buildVersion;
user$: Observable<KeycloakUser>;
user: KeycloakUser;
public tabItems: MenuItem[];
public loginItems: MenuItem[];
public menuItems: MenuItem[];
activeItem;
faUserGear = faUserGear;
constructor(public keycloakService: KeycloakService, private router: Router) {}
@@ -52,4 +44,7 @@ export class HeaderComponent {
register() {
this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
}
isActive(route: string): boolean {
return this.router.url === route;
}
}

View File

@@ -2,13 +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" class="small"></p-selectButton>
<!-- <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>
<!-- <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>

View File

@@ -1,8 +1,5 @@
import { Component, ViewChild } from '@angular/core';
import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
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';
@@ -15,36 +12,35 @@ export const stateOptions: KeyValueRatio[] = [
@Component({
selector: 'app-image-cropper',
standalone: true,
imports: [SharedModule, FileUploadModule, AngularCropperjsModule, SelectButtonModule],
imports: [SharedModule, AngularCropperjsModule],
templateUrl: './image-cropper.component.html',
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) {}
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;
}
}
sendImage() {
this.fileUpload.clear();
this.ref.close(this.angularCropper.cropper);
}
constructor(private loadingService: LoadingService, private imageUploadService: ImageService) {}
// 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;
// }
// }
// sendImage() {
// this.fileUpload.clear();
// this.ref.close(this.angularCropper.cropper);
// }
cancelUpload() {
this.fileUpload.clear();
this.ref.close();
}
// cancelUpload() {
// this.fileUpload.clear();
// this.ref.close();
// }
changeAspectRation(ratio: number) {
this.cropperConfig = { aspectRatio: ratio };
this.angularCropper.cropper.setAspectRatio(ratio);

View File

@@ -1,115 +0,0 @@
// @layer primeng {
app-inputnumber,
.p-inputnumber {
display: inline-flex;
}
.p-inputnumber-button {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
display: none;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 0;
}
.p-inputnumber-buttons-stacked .p-inputnumber-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
padding: 0;
}
.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
display: flex;
flex-direction: column;
}
.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
flex: 1 1 auto;
}
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
order: 3;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-inputnumber-buttons-horizontal .p-inputnumber-input {
order: 2;
border-radius: 0;
}
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
order: 1;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-inputnumber-buttons-vertical {
flex-direction: column;
}
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
order: 1;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
width: 100%;
}
.p-inputnumber-buttons-vertical .p-inputnumber-input {
order: 2;
border-radius: 0;
text-align: center;
}
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
order: 3;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 100%;
}
.p-inputnumber-input {
flex: 1 1 auto;
}
.p-fluid app-inputnumber,
.p-fluid .p-inputnumber {
width: 100%;
}
.p-fluid .p-inputnumber .p-inputnumber-input {
width: 1%;
}
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
width: 100%;
}
.p-inputnumber-clear-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
cursor: pointer;
}
.p-inputnumber-clearable {
position: relative;
}
// }