Image Upload, spinner aktivirt, listings & details überarbeitet
This commit is contained in:
@@ -7,22 +7,11 @@
|
||||
<p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
|
||||
</div>
|
||||
<!-- <div class="text-500 mb-5">Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</div> -->
|
||||
@if (listing){
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<ul class="list-none p-0 m-0 border-top-1 border-300">
|
||||
<!-- @if (listing && (listing.listingsCategory==='business')){
|
||||
<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">Summary</div>
|
||||
<div class="w-full md:w-10">
|
||||
@for (summary of listing.summary; track summary; let idx = $index; let last = $last) {
|
||||
<div class="text-900">{{summary}}</div>
|
||||
@if (!last) {
|
||||
<br/>
|
||||
}
|
||||
}
|
||||
</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">Description</div>
|
||||
<div class="text-900 w-full md:w-10 line-height-3">{{listing?.description}}</div>
|
||||
@@ -63,47 +52,43 @@
|
||||
<div class="text-900 w-full md:w-10">{{listing.brokerLicencing}}</div>
|
||||
</li>
|
||||
}
|
||||
<!-- @if (listing && (listing.listingsCategory==='professionals_brokers')){
|
||||
<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">Located in</div>
|
||||
<div class="text-900 w-full md:w-10">{{selectOptions.getLocation(listing.location)}}</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">Address</div>
|
||||
<div class="text-900 w-full md:w-10">{{listing.address}}</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</div>
|
||||
<div class="text-900 w-full md:w-10">{{listing.email}}</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">Website</div>
|
||||
<div class="text-900 w-full md:w-10">{{listing.website}}</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">Category</div>
|
||||
<div class="text-900 w-full md:w-10">{{listing.category}}</div>
|
||||
</li>
|
||||
} -->
|
||||
@if (listing && (listing.listingsCategory==='commercialProperty')){
|
||||
<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>
|
||||
</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>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 flex-wrap">
|
||||
<div class="text-500 w-full md:w-2 font-medium">EMail</div>
|
||||
<div class="text-900 w-full md:w-10">{{listing.email}}</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">Website</div>
|
||||
<div class="text-900 w-full md:w-10">{{listing.website}}</div>
|
||||
<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>
|
||||
</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">{{listing.phoneNumber}}</div>
|
||||
</li>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
<p-galleria [value]="propertyImages" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
|
||||
<ng-template pTemplate="item" let-item>
|
||||
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{item.name}}" style="width: 100%;" />
|
||||
</ng-template>
|
||||
<!-- <ng-template pTemplate="thumbnail" let-item>
|
||||
<div class="grid grid-nogutter justify-content-center">
|
||||
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{item.name}}" />
|
||||
</div>
|
||||
</ng-template> -->
|
||||
</p-galleria>
|
||||
@if(listing && user && (user.id===listing?.userId || isAdmin())){
|
||||
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/editListing',listing.id]"></button>
|
||||
}
|
||||
@@ -141,6 +126,118 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="surface-section px-6 py-5">
|
||||
<div class="flex align-items-start flex-column lg:flex-row lg:justify-content-between">
|
||||
<div class="flex align-items-start flex-column md:flex-row">
|
||||
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}" class="mr-5 mb-3 lg:mb-0" style="width:90px;height:90px" />
|
||||
<div>
|
||||
<span class="text-900 font-medium text-3xl">{{user.firstname}} {{user.lastname}}</span>
|
||||
<i class="pi pi-star text-2xl ml-4 text-yellow-500"></i>
|
||||
<div class="flex align-items-center flex-wrap text-sm">
|
||||
<div class="mr-5 mt-3">
|
||||
<span class="font-medium text-500">Company</span>
|
||||
<div class="text-700 mt-2">{{user.companyName}}</div>
|
||||
</div>
|
||||
<div class="mr-5 mt-3">
|
||||
<span class="font-medium text-500">For Sale</span>
|
||||
<div class="text-700 mt-2">12</div>
|
||||
</div>
|
||||
<div class="mr-5 mt-3">
|
||||
<span class="font-medium text-500">Sold</span>
|
||||
<div class="text-700 mt-2">8</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<span class="font-medium text-500">Logo</span>
|
||||
<div class="mt-2"><img src="{{environment.apiBaseUrl}}/logo/{{user.id}}" class="mr-5 mb-3 lg:mb-0" style="width:100px;height:30px" /></div>
|
||||
<!-- <div class="text-700 mt-2">130</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="mt-3 lg:mt-0">
|
||||
<button pButton pRipple icon="pi pi-bookmark" class="p-button-rounded mr-2"></button>
|
||||
<button pButton pRipple icon="pi pi-heart" class="p-button-rounded p-button-success mr-2"></button>
|
||||
<button pButton pRipple icon="pi pi-list" class="p-button-rounded p-button-help"></button>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 py-5">
|
||||
<div class="surface-card p-4 shadow-2 border-round">
|
||||
<div class="font-medium text-3xl text-900 mb-3">Company Profile</div>
|
||||
<div class="text-500 mb-5">{{user.companyOverview}}</div>
|
||||
<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 surface-ground">
|
||||
<div class="text-500 w-full md:w-2 font-medium">Name</div>
|
||||
<div class="text-900 w-full md:w-10">{{user.firstname}} {{user.lastname}}</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">Description</div>
|
||||
<div class="text-900 w-full md:w-10 line-height-3">{{user.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">Services we offer</div>
|
||||
<div class="text-900 w-full md:w-10">{{user.offeredServices}}</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">Areas we serve</div>
|
||||
<div class="text-900 w-full md:w-10">
|
||||
@for (area of user.areasServed; track area) {
|
||||
<p-tag styleClass="mr-2" [value]="area" [rounded]="true"></p-tag>
|
||||
}
|
||||
<!-- <p-tag styleClass="mr-2" severity="success" value="Javascript" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="danger" value="Python" [rounded]="true"></p-tag>
|
||||
<p-tag severity="warning" value="SQL" [rounded]="true"></p-tag> -->
|
||||
</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">My Listings For Sale</div>
|
||||
<div class="text-900 w-full md:w-10">
|
||||
<div class="grid mt-0 mr-0">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-3 border-1 surface-border border-round surface-card">
|
||||
<div class="text-900 mb-2">
|
||||
<i class="pi pi-github mr-2"></i>
|
||||
<span class="font-medium">PrimeFaces</span>
|
||||
</div>
|
||||
<div class="text-700">Ultimate UI Component Suite for JavaServer Faces</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-3 border-1 surface-border border-round surface-card">
|
||||
<div class="text-900 mb-2">
|
||||
<i class="pi pi-github mr-2"></i>
|
||||
<span class="font-medium">PrimeNG</span>
|
||||
</div>
|
||||
<div class="text-700">The Most Complete Angular UI Component Library</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-3 border-1 surface-border border-round surface-card">
|
||||
<div class="text-900 mb-2">
|
||||
<i class="pi pi-github mr-2"></i>
|
||||
<span class="font-medium">PrimeReact</span>
|
||||
</div>
|
||||
<div class="text-700">Advanced UI Components for ReactJS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-3 border-1 surface-border border-round surface-card">
|
||||
<div class="text-900 mb-2">
|
||||
<i class="pi pi-github mr-2"></i>
|
||||
<span class="font-medium">PrimeVue</span>
|
||||
</div>
|
||||
<div class="text-700">The Most Powerful Vue UI Component Library</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -18,27 +18,46 @@ import { ListingsService } from '../../services/listings.service';
|
||||
import { UserService } from '../../services/user.service';
|
||||
import onChange from 'on-change';
|
||||
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils';
|
||||
import { ListingCriteria, ListingType, MailInfo, User } from '../../../../../common-models/src/main.model';
|
||||
import { ImageProperty, ListingCriteria, ListingType, MailInfo, User } from '../../../../../common-models/src/main.model';
|
||||
import { MailService } from '../../services/mail.service';
|
||||
import { MessageService } from 'primeng/api';
|
||||
import { SharedModule } from '../../shared/shared/shared.module';
|
||||
import { GalleriaModule } from 'primeng/galleria';
|
||||
import { environment } from '../../../environments/environment';
|
||||
@Component({
|
||||
selector: 'app-details',
|
||||
standalone: true,
|
||||
imports: [SharedModule],
|
||||
imports: [SharedModule,GalleriaModule],
|
||||
providers:[MessageService],
|
||||
templateUrl: './details.component.html',
|
||||
styleUrl: './details.component.scss'
|
||||
})
|
||||
export class DetailsComponent {
|
||||
// listings: Array<BusinessListing>;
|
||||
|
||||
responsiveOptions = [
|
||||
{
|
||||
breakpoint: '1199px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '991px',
|
||||
numVisible: 2,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
];
|
||||
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
|
||||
listing: ListingType;
|
||||
user:User;
|
||||
criteria:ListingCriteria
|
||||
mailinfo: MailInfo;
|
||||
|
||||
propertyImages:ImageProperty[]=[]
|
||||
environment=environment;
|
||||
constructor(private activatedRoute: ActivatedRoute,
|
||||
private listingsService:ListingsService,
|
||||
private router:Router,
|
||||
@@ -55,6 +74,7 @@ export class DetailsComponent {
|
||||
this.user=user
|
||||
});
|
||||
this.listing=await lastValueFrom(this.listingsService.getListingById(this.id,this.criteria.listingsCategory));
|
||||
this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
|
||||
}
|
||||
back(){
|
||||
this.router.navigate(['listings',this.criteria.listingsCategory])
|
||||
|
||||
Reference in New Issue
Block a user