Image Upload, spinner aktivirt, listings & details überarbeitet
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div class="search">
|
||||
<div class="wrapper">
|
||||
<div class="grid p-4 align-items-center">
|
||||
@if (listingCategory==='business'){
|
||||
@if (category==='business'){
|
||||
<div class="col-2">
|
||||
<p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name"
|
||||
optionValue="value" [showClear]="true" placeholder="Categorie of Business"
|
||||
@@ -29,7 +29,7 @@
|
||||
offLabel="Real Estate included"></p-toggleButton>
|
||||
</div>
|
||||
}
|
||||
@if (listingCategory==='commercialProperty'){
|
||||
@if (category==='commercialProperty'){
|
||||
<div class="col-2">
|
||||
<p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value"
|
||||
[showClear]="true" placeholder="Location" [style]="{ width: '100%'}"></p-dropdown>
|
||||
@@ -56,55 +56,95 @@
|
||||
<div class="surface-200 h-full">
|
||||
<div class="wrapper">
|
||||
<div class="grid">
|
||||
@for (listing of filteredListings; track listing.id) {
|
||||
<div class="col-12 lg:col-3 p-3">
|
||||
<div class="shadow-2 border-round surface-card mb-3 h-full flex-column justify-content-between flex">
|
||||
<div class="p-4 h-full flex flex-column">
|
||||
@if (listing.listingsCategory==='business'){
|
||||
<div class="flex align-items-center">
|
||||
<span [class]="selectOptions.getBgColorType(listing.type)"
|
||||
class="inline-flex border-circle align-items-center justify-content-center mr-3"
|
||||
style="width:38px;height:38px">
|
||||
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
|
||||
</span>
|
||||
<span class="text-900 font-medium text-2xl">{{selectOptions.getBusiness(listing.type)}}</span>
|
||||
</div>
|
||||
}
|
||||
@if (listing.listingsCategory==='commercialProperty'){
|
||||
<!-- <div class="flex align-items-center">
|
||||
<span
|
||||
class="inline-flex border-circle align-items-center justify-content-center bg-green-100 mr-3"
|
||||
@for (listing of filteredListings; track listing.id) {
|
||||
<div *ngIf="listing.listingsCategory==='business'" class="col-12 lg:col-3 p-3">
|
||||
<div class="shadow-2 border-round surface-card mb-3 h-full flex-column justify-content-between flex">
|
||||
<div class="p-4 h-full flex flex-column">
|
||||
<div class="flex align-items-center">
|
||||
<span [class]="selectOptions.getBgColorType(listing.type)"
|
||||
class="inline-flex border-circle align-items-center justify-content-center mr-3"
|
||||
style="width:38px;height:38px">
|
||||
<i class="pi pi-globe text-xl text-green-600"></i>
|
||||
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
|
||||
</span>
|
||||
<span class="text-900 font-medium text-2xl">Investment</span>
|
||||
</div> -->
|
||||
}
|
||||
<div class="text-900 my-3 text-xl font-medium">{{listing.title}}</div>
|
||||
@if (listing.listingsCategory==='business'){
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Asking price: {{listing.price | currency}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Sales revenue: {{listing.salesRevenue | currency}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Net profit: {{listing.cashFlow | currency}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Location: {{selectOptions.getState(listing.state)}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Established: {{listing.established}}</p>
|
||||
}
|
||||
@if (listing.listingsCategory==='commercialProperty'){
|
||||
<!-- <p class="mt-0 mb-1 text-700 line-height-3">Location: {{selectOptions.getState(listing.state)}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">EMail: {{listing.email}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Website: {{listing.website}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Phone Number: {{listing.phoneNumber}}</p> -->
|
||||
}
|
||||
<div class="mt-auto ml-auto">
|
||||
<img *ngIf="!listing.hideImage" src="{{environment.apiBaseUrl}}/profile/{{listing.userId}}" (error)="imageErrorHandler(listing)" class="rounded-image"/>
|
||||
<span class="text-900 font-medium text-2xl">{{selectOptions.getBusiness(listing.type)}}</span>
|
||||
</div>
|
||||
<div class="text-900 my-3 text-xl font-medium">{{listing.title}}</div>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Asking price: {{listing.price | currency}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Sales revenue: {{listing.salesRevenue | currency}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Net profit: {{listing.cashFlow | currency}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Location: {{selectOptions.getState(listing.state)}}</p>
|
||||
<p class="mt-0 mb-1 text-700 line-height-3">Established: {{listing.established}}</p>
|
||||
<div class="mt-auto ml-auto">
|
||||
<img *ngIf="!listing.hideImage" src="{{environment.apiBaseUrl}}/logo/{{listing.userId}}" (error)="imageErrorHandler(listing)" class="rounded-image"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 surface-100 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.id]"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 surface-100 text-right">
|
||||
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full Listing"
|
||||
class="p-button-rounded p-button-success" [routerLink]="['/details',listing.id]"></button>
|
||||
</div>
|
||||
</div>
|
||||
</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-12rem">
|
||||
<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>
|
||||
<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>
|
||||
<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.id]"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
@for (user of users; track user.id) {
|
||||
<div class="col-12 lg:col-6 xl:col-4 p-4">
|
||||
<div class="surface-card shadow-2 p-2" style="border-radius: 10px">
|
||||
<div class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full" >
|
||||
<span>
|
||||
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}" class="w-5rem" />
|
||||
</span>
|
||||
<div class="flex flex-column align-items-center md:align-items-stretch ml-4 mt-4 md:mt-0">
|
||||
<p class="mt-0 mb-3 line-height-3 text-center md:text-left">{{user.description}}</p>
|
||||
<span class="text-900 font-medium mb-1 mt-auto">{{user.firstname}} {{user.lastname}}</span>
|
||||
<div class="text-600 text-sm">{{user.companyName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 text-right flex justify-content-between align-items-center">
|
||||
<img *ngIf="user.hasCompanyLogo" src="{{environment.apiBaseUrl}}/logo/{{user.id}}" class="rounded-image"/>
|
||||
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full profile"
|
||||
class="p-button-rounded p-button-success" [routerLink]="['/details',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>
|
||||
}
|
||||
</div>
|
||||
<div class="mb-2 surface-200 flex align-items-center justify-content-center">
|
||||
<div class="mx-1 text-color">Total number of Listings: {{totalRecords}}</div>
|
||||
|
||||
@@ -16,7 +16,8 @@ import onChange from 'on-change';
|
||||
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils';
|
||||
import { InitEditableRow } from 'primeng/table';
|
||||
import { environment } from '../../../environments/environment';
|
||||
import { ListingCriteria, ListingType } from '../../../../../common-models/src/main.model';
|
||||
import { ListingCriteria, ListingType, User } from '../../../../../common-models/src/main.model';
|
||||
import { UserService } from '../../services/user.service';
|
||||
@Component({
|
||||
selector: 'app-listings',
|
||||
standalone: true,
|
||||
@@ -27,10 +28,11 @@ import { ListingCriteria, ListingType } from '../../../../../common-models/src/m
|
||||
export class ListingsComponent {
|
||||
environment=environment;
|
||||
listings: Array<ListingType>;
|
||||
users: Array<User>
|
||||
filteredListings: Array<ListingType>;
|
||||
criteria:ListingCriteria;
|
||||
realEstateChecked: boolean;
|
||||
category: string;
|
||||
// category: string;
|
||||
maxPrice: string;
|
||||
minPrice: string;
|
||||
type:string;
|
||||
@@ -40,9 +42,14 @@ export class ListingsComponent {
|
||||
first: number = 0;
|
||||
rows: number = 12;
|
||||
totalRecords:number = 0;
|
||||
public listingCategory: 'business' | 'commercialProperty' | undefined;
|
||||
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
|
||||
|
||||
constructor(public selectOptions: SelectOptionsService, private listingsService:ListingsService,private activatedRoute: ActivatedRoute, private router:Router, private cdRef:ChangeDetectorRef) {
|
||||
constructor(public selectOptions: SelectOptionsService,
|
||||
private listingsService:ListingsService,
|
||||
private userService:UserService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private router:Router,
|
||||
private cdRef:ChangeDetectorRef) {
|
||||
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
|
||||
this.router.getCurrentNavigation()
|
||||
this.activatedRoute.snapshot
|
||||
@@ -51,8 +58,8 @@ export class ListingsComponent {
|
||||
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
|
||||
this.first=0;
|
||||
}
|
||||
this.listingCategory = (<any>params).type;
|
||||
this.criteria.listingsCategory=this.listingCategory;
|
||||
this.category = (<any>params).type;
|
||||
this.criteria.listingsCategory=this.category;
|
||||
this.init()
|
||||
})
|
||||
|
||||
@@ -60,13 +67,23 @@ export class ListingsComponent {
|
||||
async ngOnInit(){
|
||||
}
|
||||
async init(){
|
||||
this.listings=await this.listingsService.getListings(this.criteria);
|
||||
this.setStates();
|
||||
this.filteredListings=[...this.listings];
|
||||
this.totalRecords=this.listings.length
|
||||
this.filteredListings=[...this.listings].splice(this.first,this.rows);
|
||||
this.cdRef.markForCheck();
|
||||
this.cdRef.detectChanges();
|
||||
if (this.category==='business' || this.category==='commercialProperty'){
|
||||
this.users=[]
|
||||
this.listings=await this.listingsService.getListings(this.criteria);
|
||||
this.setStates();
|
||||
this.filteredListings=[...this.listings];
|
||||
this.totalRecords=this.listings.length
|
||||
this.filteredListings=[...this.listings].splice(this.first,this.rows);
|
||||
this.cdRef.markForCheck();
|
||||
this.cdRef.detectChanges();
|
||||
} else {
|
||||
this.listings=[]
|
||||
this.filteredListings=[];
|
||||
this.users=await this.userService.search(this.criteria);
|
||||
this.cdRef.markForCheck();
|
||||
this.cdRef.detectChanges();
|
||||
}
|
||||
|
||||
}
|
||||
setStates(){
|
||||
this.statesSet=new Set();
|
||||
|
||||
Reference in New Issue
Block a user