aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

drag & drop renewed, imageCropper revisited, imageOrder persisted, css quirks

Browse Source
This commit is contained in:
Andreas Knuth
2024-03-31 19:44:08 +02:00
parent 89bb85a512
commit a437851f6d
28 changed files with 767 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
bizmatch/package.json
View File

@@ -30,6 +30,7 @@
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@types/uuid": "^9.0.8",
"angular-cropperjs": "^14.0.1",
"angular-mixed-cdk-drag-drop": "^2.2.3",
"browser-bunyan": "^1.8.0",
"cropperjs": "^1.6.1",
"express": "^4.18.2",

16
bizmatch/src/app/components/image-cropper/image-cropper.component.ts
View File

@@ -44,13 +44,15 @@ export class ImageCropperComponent {
}
}
sendImage(){
this.loadingService.startLoading('uploadImage');
setTimeout(()=>{
this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
this.fileUpload.clear()
this.ref.close(blob);
}, 'image/png');
})
// setTimeout(()=>{
// this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
// this.ref.close(blob);
// this.fileUpload.clear()
// }, 'image/jpg');
// },0)
this.fileUpload.clear()
this.ref.close(this.angularCropper.cropper);
}
cancelUpload(){

2
bizmatch/src/app/pages/home/home.component.html
View File

@@ -8,7 +8,7 @@
<div
class="flex justify-content-between lg:block border-top-1 lg:border-top-none border-gray-800 py-3 lg:py-0 mt-3 lg:mt-0">
@if(userService.isLoggedIn()){
<p-button label="Account" class="ml-3 font-bold" [outlined]="true" severity="secondary" [routerLink]="['/account',(user$|async).id]"></p-button>
<p-button label="Account" class="ml-3 font-bold" [outlined]="true" severity="secondary" [routerLink]="['/account',(user$|async)?.id]"></p-button>
} @else {
<p-button label="Log In" class="ml-3 font-bold" [outlined]="true" severity="secondary" (click)="login()"></p-button>
}

65
bizmatch/src/app/pages/listings/listings.component.html
View File

@@ -86,37 +86,38 @@
</div>
}
@for (listing of filteredListings; track listing.id) {
<div *ngIf="listing.listingsCategory==='commercialProperty'" class="col-12 xl:col-4">
<div class="surface-card p-2" style="border-radius: 10px">
<article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
<div class="relative">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/1.avif" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem">
<p class="absolute px-2 py-1 border-round-lg text-sm font-normal text-white mt-0 mb-0" style="background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); top: 3%; left: 3%;">{{selectOptions.getState(listing.state)}}</p>
</div>
<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 *ngIf="listing.listingsCategory==='commercialProperty'" class="col-12 xl:col-4 flex">
<div class="surface-card p-2 flex flex-column flex-grow-1 justify-content-between" style="border-radius: 10px">
<article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
<div class="relative">
@if (listing.imageOrder.length>0){
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{listing.imageOrder[0].name}}" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem">
} @else {
<!-- <img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{listing.imageOrder[0].name}}" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem"> -->
<img src="assets/images/placeholder_properties.jpg" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem" />
}
<p class="absolute px-2 py-1 border-round-lg text-sm font-normal text-white mt-0 mb-0" style="background-color: rgba(255, 255, 255, 0.3); backdrop-filter: invert(30%);; top: 3%; left: 3%;">{{selectOptions.getState(listing.state)}}</p>
</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">
<p class="text-base flex align-items-center text-900 mt-0 mb-1">
<i class="pi pi-list mr-2"></i>
<span class="font-medium">{{selectOptions.getCommercialProperty(listing.type)}}</span>
</p>
<!-- <p class="text-base flex align-items-center text-900 mt-0 mb-1">
<i class="pi pi-check-circle mr-2"></i>
<span class="font-medium">Verified</span>
</p> -->
<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">
<p class="text-base flex align-items-center text-900 mt-0 mb-1">
<i class="pi pi-list mr-2"></i>
<span class="font-medium">{{selectOptions.getCommercialProperty(listing.type)}}</span>
</p>
</div>
<p class="font-semibold text-3xl text-900 mt-0 mb-2">{{listing.price | currency}}</p>
</div>
<p class="font-semibold text-3xl text-900 mt-0 mb-2">{{listing.price | currency}}</p>
</div>
</article>
<div class="px-4 py-3 text-left">
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full Listing"
class="p-button-rounded p-button-success" [routerLink]="['/details-listing/commercialProperty',listing.id]"></button>
</div>
</div>
</article>
<div class="px-4 py-3 text-left ">
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full Listing"
class="p-button-rounded p-button-success" [routerLink]="['/details-listing/commercialProperty',listing.id]"></button>
</div>
</div>
</div>
}
@@ -126,7 +127,7 @@
<div class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full" >
<span>
@if(user.hasProfile){
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif" class="w-5rem" />
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif?_ts={{ts}}" class="w-5rem" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="w-5rem" />
}
@@ -147,9 +148,7 @@
class="p-button-rounded p-button-success" [routerLink]="['/details-user',user.id]"></button>
</div>
<!-- <div class="mt-auto ml-auto">
<img *ngIf="user.hasCompanyLogo" src="{{environment.apiBaseUrl}}/logo/{{user.id}}" class="rounded-image"/>
</div> -->
</div>
</div>
}

2
bizmatch/src/app/pages/listings/listings.component.ts
View File

@@ -43,6 +43,7 @@ export class ListingsComponent {
first: number = 0;
rows: number = 12;
totalRecords:number = 0;
ts = new Date().getTime()
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
constructor(public selectOptions: SelectOptionsService,
@@ -118,4 +119,5 @@ export class ListingsComponent {
imageErrorHandler(listing: ListingType) {
listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
}
}

37
bizmatch/src/app/pages/subscription/account/account.component.ts
View File

@@ -133,27 +133,24 @@ export class AccountComponent {
'640px': '90vw'
},
});
this.dialogRef.onClose.subscribe(blob => {
if (blob) {
this.imageUploadService.uploadImage(blob, type==='company'?'uploadCompanyLogo':'uploadProfile',this.user.id).subscribe(async(event) => {
if (event.type === HttpEventType.UploadProgress) {
const progress = event.total ? event.loaded / event.total : 0;
console.log(`Upload-Fortschritt: ${progress * 100}%`);
} else if (event.type === HttpEventType.Response) {
console.log('Upload abgeschlossen', event.body);
this.loadingService.stopLoading('uploadImage');
if (this.type==='company'){
this.user.hasCompanyLogo=true;
this.companyLogoUrl=`${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`
} else {
this.user.hasProfile=true;
this.profileUrl=`${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`
this.dialogRef.onClose.subscribe(cropper => {
if (cropper){
this.loadingService.startLoading('uploadImage');
cropper.getCroppedCanvas().toBlob(async (blob) => {
this.imageUploadService.uploadImage(blob, type==='company'?'uploadCompanyLogo':'uploadProfile',this.user.id).subscribe(async(event) => {
if (event.type === HttpEventType.Response) {
this.loadingService.stopLoading('uploadImage');
if (this.type==='company'){
this.user.hasCompanyLogo=true;
this.companyLogoUrl=`${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`
} else {
this.user.hasProfile=true;
this.profileUrl=`${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`
}
}
}
}, error => console.error('Fehler beim Upload:', error));
}, error => console.error('Fehler beim Upload:', error));
})
}
});
})
}
}

35
bizmatch/src/app/pages/subscription/edit-listing/edit-listing.component.html
View File

@@ -94,30 +94,19 @@
</div>
</div>
</div>
<!-- <p-carousel [value]="propertyImages" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="responsiveOptions">
<ng-template let-image pTemplate="item">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{image.name}}" [alt]="image.name" class="w-11 shadow-2" />
</div>
<div>
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<p-button icon="pi pi-file-edit" [rounded]="true" />
<p-button icon="fa-solid fa-trash-can" [rounded]="true" severity="danger" (click)="deleteConfirm(image.name)"></p-button>
</div>
</div>
</div>
</ng-template>
</p-carousel> -->
<div class="p-2 border-1 surface-border border-round mb-4 image-container" cdkDropList (cdkDropListDropped)="onDrop($event)"
<div class="p-2 border-1 surface-border border-round mb-4 image-container" cdkDropListGroup mixedCdkDragDrop
(dropped)="onDrop($event)"
cdkDropListOrientation="horizontal">
<ul >
<li *ngFor="let image of propertyImages" class="p-2 border-round shadow-1" >
<!-- <div class="image-container"> -->
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{image.name}}" [alt]="image.name" class="shadow-2" cdkDrag/>
<!-- </div> -->
</li>
</ul>
@for (image of propertyImages; track image) {
<span cdkDropList mixedCdkDropList>
<div cdkDrag mixedCdkDragSizeHelper class="image-wrap">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{image.name}}"
[alt]="image.name" class="shadow-2" cdkDrag>
<fa-icon [icon]="faTrash" (click)="deleteConfirm(image.name)"></fa-icon>
</div>
</span>
}
</div>
}
@if (listing.listingsCategory==='business'){

120
bizmatch/src/app/pages/subscription/edit-listing/edit-listing.component.scss
View File

@@ -2,86 +2,56 @@
transform: translateY(5px);
}
// .image {
// width: 120px;
// height: 30px;
// border: 1px solid #6b7280;
// padding: 1px 1px;
// object-fit: contain;
// }
// .image-container img {
// width: 200px;
// box-shadow: 0 3px 6px #00000029, 0 3px 6px #0000003b;
// margin-right: 1rem;
// }
// .container {
// width: 100%;
// min-height: 200px;
// border: 1px solid #ccc;
// display: flex;
// flex-wrap: wrap;
// }
.image-container {
width: 100%;
/* oder eine spezifische Breite */
overflow-x: auto;
/* Ermöglicht das Scrollen, wenn die Bilder zu breit sind */
}
display: flex; /* Erlaubt ein flexibles Box-Layout */
flex-wrap: wrap; /* Erlaubt das Umfließen der Elemente auf die nächste Zeile */
justify-content: flex-start; /* Startet die Anordnung der Elemente am Anfang des Containers */
align-items: flex-start; /* Ausrichtung der Elemente am Anfang der Querachse */
padding: 10px; /* Abstand zwischen den Inhalten des Containers und dessen Rand */
}
.image-container ul {
.image-container span {
flex-flow: row;
display: flex;
padding: 0;
/* Entfernt den Standard-Abstand des ul-Elements */
margin: 0;
/* Entfernt den Standard-Außenabstand des ul-Elements */
list-style-type: none;
/* Entfernt die Listenpunkte */
width: fit-content;
height: fit-content;
}
.image-container li {
flex: 1 1 auto;
/* Erlaubt den li-Elementen, zu wachsen und zu schrumpfen, aber füllt den Raum gleichmäßig */
/* Optional: Füge hier Abstände zwischen den li-Elementen hinzu */
}
.image-container img {
max-width: 100%;
/* Stellt sicher, dass die Bilder nicht über ihre natürliche Größe hinaus wachsen */
height: auto;
/* Behält das Seitenverhältnis bei */
.image-container span img {
max-height: 150px; /* Maximale Höhe der Bilder */
width: auto; /* Die Breite der Bilder passt sich automatisch an die Höhe an */
cursor: pointer;
margin: 10px;
}
// .image-container fa-icon {
// top: 0; /* Positioniert das Icon am oberen Rand des Bildes */
// right: 0; /* 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 */
// cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
// }
.draggable-image {
margin: 8px;
cursor: grab;
}
.draggable-image:active {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
// .cdk-drag-preview {
// box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
// }
// .cdk-drag-placeholder {
// background-color: #ccc;
// }
.drop-area {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
transition: all 0.3s;
}
/* CSS-Klasse für den Drop-Bereich, wenn ein Element darüber gezogen wird */
.drop-area-active {
border-color: #2196F3;
background-color: #E3F2FD;
}
.image-wrap {
position: relative; /* Ermöglicht die absolute Positionierung des Icons bezogen auf diesen Container */
display: inline-block; /* Erlaubt die Inline-Anordnung, falls mehrere Bilder vorhanden sind */
}
/* Stil für das Bild */
.image-wrap img {
max-height: 150px;
width: auto;
display: block; /* Verhindert unerwünschten Abstand unter dem Bild */
}
/* Stil für das FontAwesome Icon */
.image-wrap fa-icon {
position: absolute;
top: 15px; /* Positioniert das Icon am oberen Rand des Bildes */
right: 15px; /* 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 */
cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
border-radius: 8px; /* Optional: Abrunden der linken unteren Ecke für ästhetische Zwecke */
}

63
bizmatch/src/app/pages/subscription/edit-listing/edit-listing.component.ts
View File

@@ -43,10 +43,14 @@ import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dy
import { ImageCropperComponent } from '../../../components/image-cropper/image-cropper.component';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { CdkDragDrop, CdkDragEnter, CdkDragExit, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'create-listing',
standalone: true,
imports: [SharedModule, ArrayToStringPipe, InputNumberModule, CarouselModule, DialogModule, AngularCropperjsModule, FileUploadModule, EditorModule, DynamicDialogModule, ConfirmDialogModule,DragDropModule],
imports: [SharedModule, ArrayToStringPipe, InputNumberModule, CarouselModule,
DialogModule, AngularCropperjsModule, FileUploadModule, EditorModule, DynamicDialogModule, DragDropModule,
ConfirmDialogModule, MixedCdkDragDropModule],
providers: [MessageService, DialogService, ConfirmationService],
templateUrl: './edit-listing.component.html',
styleUrl: './edit-listing.component.scss'
@@ -85,8 +89,8 @@ export class EditListingComponent {
config = { aspectRatio: 16 / 9 }
editorModules = TOOLBAR_OPTIONS
dialogRef: DynamicDialogRef | undefined;
draggedImage:ImageProperty
dropAreaActive = false;
draggedImage: ImageProperty
faTrash = faTrash;
constructor(public selectOptions: SelectOptionsService,
private router: Router,
private activatedRoute: ActivatedRoute,
@@ -155,18 +159,35 @@ export class EditListingComponent {
'640px': '90vw'
},
});
this.dialogRef.onClose.subscribe(blob => {
if (blob) {
this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.id).subscribe(async (event) => {
if (event.type === HttpEventType.Response) {
console.log('Upload abgeschlossen', event.body);
this.loadingService.stopLoading('uploadImage');
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
}
}, error => console.error('Fehler beim Upload:', error));
this.dialogRef.onClose.subscribe(cropper => {
if (cropper){
this.loadingService.startLoading('uploadImage');
cropper.getCroppedCanvas().toBlob(async (blob) => {
this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.id).subscribe(async (event) => {
if (event.type === HttpEventType.Response) {
console.log('Upload abgeschlossen', event.body);
this.loadingService.stopLoading('uploadImage');
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
}
}, error => console.error('Fehler beim Upload:', error));
}, 'image/jpg');
cropper.destroy();
}
});
})
// this.dialogRef.onClose.subscribe(blob => {
// if (blob) {
// // this.loadingService.startLoading('uploadImage');
// setTimeout(()=>{
// this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.id).subscribe(async (event) => {
// if (event.type === HttpEventType.Response) {
// console.log('Upload abgeschlossen', event.body);
// // this.loadingService.stopLoading('uploadImage');
// this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
// }
// }, error => console.error('Fehler beim Upload:', error));
// },10)
// }
// });
}
deleteConfirm(imageName: string) {
@@ -193,19 +214,9 @@ export class EditListingComponent {
});
}
onDrop(event: CdkDragDrop<string[]>) {
this.dropAreaActive = false;
onDrop(event: { previousIndex: number; currentIndex: number }) {
moveItemInArray(this.propertyImages, event.previousIndex, event.currentIndex);
//console.log(event.previousIndex, event.currentIndex);
}
onDragEnter(event: CdkDragEnter<any,any>) {
this.dropAreaActive = true;
}
onDragExit(event: CdkDragExit<any,any>) {
this.dropAreaActive = false;
this.listingsService.changeImageOrder(this.listing.id, this.propertyImages)
}
}

2
bizmatch/src/app/services/image.service.ts
View File

@@ -20,7 +20,7 @@ export class ImageService {
return this.http.post(uploadUrl, formData,{
// headers: this.headers,
reportProgress: true,
//reportProgress: true,
observe: 'events',
});
}

3
bizmatch/src/app/services/listings.service.ts
View File

@@ -36,4 +36,7 @@ export class ListingsService {
async getPropertyImages(id:string):Promise<ImageProperty[]>{
return await lastValueFrom(this.http.get<ImageProperty[]>(`${this.apiBaseUrl}/bizmatch/image/${id}`));
}
async changeImageOrder(id:string, propertyImages: ImageProperty[]):Promise<ImageProperty[]>{
return await lastValueFrom(this.http.put<ImageProperty[]>(`${this.apiBaseUrl}/bizmatch/listings/commercialProperty/imageOrder/${id}`,propertyImages));
}
}

BIN
bizmatch/src/assets/images/placeholder_properties.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

3
bizmatch/src/assets/images/placeholder_properties.jpg:Zone.Identifier Normal file
View File

@@ -0,0 +1,3 @@
[ZoneTransfer]
LastWriterPackageFamilyName=Microsoft.Windows.Photos_8wekyb3d8bbwe
ZoneId=3