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

BugFix #87: neue Bild Gallery verwedet

This commit is contained in:
Andreas Knuth 2024-08-30 17:56:42 +02:00
parent f4f576d4a9
commit c5577969c8
5 changed files with 28 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bizmatch/package.json
View File

@ -42,6 +42,7 @@
"keycloak-angular": "^16.0.1",
"keycloak-js": "^25.0.1",
"memoize-one": "^6.0.0",
"ng-gallery": "^11.0.0",
"ngx-currency": "^18.0.0",
"ngx-image-cropper": "^8.0.0",
"ngx-mask": "^18.0.0",

8
bizmatch/src/app/app.config.ts
View File

@ -4,6 +4,7 @@ import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScroll
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { KeycloakBearerInterceptor, KeycloakService } from 'keycloak-angular';
import { GALLERY_CONFIG, GalleryConfig } from 'ng-gallery';
import { provideQuillConfig } from 'ngx-quill';
import { provideShareButtonsOptions, SharerMethods, withConfig } from 'ngx-sharebuttons';
import { shareIcons } from 'ngx-sharebuttons/icons';
@ -56,6 +57,13 @@ export const appConfig: ApplicationConfig = {
provide: 'TIMEOUT_DURATION',
useValue: 5000, // Standard-Timeout von 5 Sekunden
},
{
provide: GALLERY_CONFIG,
useValue: {
autoHeight: true,
imageSize: 'cover',
} as GalleryConfig,
},
provideShareButtonsOptions(
shareIcons(),
withConfig({

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

@ -60,7 +60,8 @@
<!-- Right column -->
<div class="w-full lg:w-1/2 mt-6 lg:mt-0 print:hidden">
<h3 class="text-lg font-semibold mb-4">Contact the Author of this Listing</h3>
<!-- <h2 class="text-lg font-semibold my-4">Contact the Author of this Listing</h2> -->
<div class="md:mt-8 mb-4 text-2xl font-bold mb-4">Contact the Author of this Listing</div>
<p class="text-sm mb-4">Please include your contact info below</p>
<form class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

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

@ -9,31 +9,6 @@
>
<i class="fas fa-times"></i>
</button>
<div class="lg:hidden">
@if (listing && listing.imageOrder && listing.imageOrder.length > 0) {
<div id="gallery" class="relative w-full" data-carousel="slide">
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
@for (image of listing.imageOrder; track $index) {
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}" class="absolute block max-w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" />
</div>
}
</div>
<div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
<button type="button" class="w-3 h-3 rounded-full bg-white dark:bg-gray-800" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
@for (i of getImageIndices(); track i) {
<button
type="button"
class="w-3 h-3 rounded-full bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800"
aria-current="false"
attr.aria-label="Slide {{ i }}"
attr.data-carousel-slide-to="{{ i }}"
></button>
}
</div>
</div>
}
</div>
<div class="flex flex-col lg:flex-row">
<div class="w-full lg:w-1/2 pr-0 lg:pr-4">
<p class="mb-4" [innerHTML]="description"></p>
@ -77,42 +52,20 @@
<share-button button="x" showText="true"></share-button>
<share-button button="linkedin" showText="true"></share-button>
</div>
<!-- @if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" [routerLink]="['/editCommercialPropertyListing', listing.id]">Edit</button>
} -->
</div>
<div class="w-full lg:w-1/2 mt-6 lg:mt-0">
<div class="hidden lg:block">
@if (listing && listing.imageOrder && listing.imageOrder.length > 0) {
<div id="gallery" class="relative w-full" data-carousel="slide">
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
@for (image of listing.imageOrder; track $index) {
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img
src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}"
class="absolute block max-w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
/>
@if(this.images.length>0){
<div class="block print:hidden">
<gallery [items]="images"></gallery>
</div>
}
</div>
<div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
<button type="button" class="w-3 h-3 rounded-full bg-white dark:bg-gray-800" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
@for (i of getImageIndices(); track i) {
<button
type="button"
class="w-3 h-3 rounded-full bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800"
aria-current="false"
attr.aria-label="Slide {{ i }}"
attr.data-carousel-slide-to="{{ i }}"
></button>
<div class="print:hidden" [ngClass]="{ 'mt-6': this.images.length > 0 }">
@if(this.images.length>0){
<h2 class="text-xl font-semibold">Contact the Author of this Listing</h2>
}@else {
<div class="md:mt-[-60px] text-2xl font-bold mb-4">Contact the Author of this Listing</div>
}
</div>
</div>
}
</div>
<div class="mt-6 print:hidden">
<h2 class="text-xl font-semibold mb-4">Contact the Author of this Listing</h2>
<p class="text-sm text-gray-600 mb-4">Please include your contact info below</p>
<form class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

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

@ -3,6 +3,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { KeycloakService } from 'keycloak-angular';
import { GalleryModule, ImageItem } from 'ng-gallery';
import { ShareButton } from 'ngx-sharebuttons/button';
import { lastValueFrom } from 'rxjs';
import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
@ -27,7 +28,7 @@ import { createMailInfo, map2User } from '../../../utils/utils';
@Component({
selector: 'app-details-commercial-property-listing',
standalone: true,
imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ShareButton, ValidatedNgSelectComponent],
imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ShareButton, ValidatedNgSelectComponent, GalleryModule],
providers: [],
templateUrl: './details-commercial-property-listing.component.html',
styleUrl: '../details.scss',
@ -64,7 +65,7 @@ export class DetailsCommercialPropertyListingComponent {
errorResponse: ErrorResponse;
faTimes = faTimes;
propertyDetails = [];
images: Array<ImageItem> = [];
constructor(
private activatedRoute: ActivatedRoute,
private listingsService: ListingsService,
@ -110,6 +111,10 @@ export class DetailsCommercialPropertyListingComponent {
if (this.listing.draft) {
this.propertyDetails.push({ label: 'Draft', value: this.listing.draft ? 'Yes' : 'No' });
}
this.listing.imageOrder.forEach(image => {
const imageURL = `${this.env.imageBaseUrl}/pictures/property/${this.listing.imagePath}/${this.listing.serialId}/${image}`;
this.images.push(new ImageItem({ src: imageURL, thumb: imageURL }));
});
} catch (error) {
this.logService.log({ severity: 'error', text: error.error.message });
this.router.navigate(['notfound']);