Umbau auf postgres 2. step
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
<div id="sky-line" class="hidden-lg-down">
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="wrapper">
|
||||
<div class="grid p-4 align-items-center">
|
||||
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}"
|
||||
class="col-1">
|
||||
<p-button label="Refine" (click)="search()"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="surface-200 h-full">
|
||||
<div class="wrapper">
|
||||
<div class="grid">
|
||||
|
||||
@for (user of users; track user.id) {
|
||||
<div class="col-12 lg:col-6 xl:col-4 p-4 flex flex-column flex-grow-1">
|
||||
<div class="surface-card shadow-2 p-2 flex flex-column flex-grow-1 justify-content-between"
|
||||
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>
|
||||
@if(user.hasProfile){
|
||||
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif?_ts={{ts}}" class="w-5rem" />
|
||||
} @else {
|
||||
<img src="assets/images/person_placeholder.jpg" 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">
|
||||
@if(user.hasCompanyLogo){
|
||||
<img src="{{environment.apiBaseUrl}}/logo/{{user.id}}.avif" class="rounded-image" />
|
||||
} @else {
|
||||
<img src="assets/images/placeholder.png" 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',user.id]"></button>
|
||||
|
||||
</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>
|
||||
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows"
|
||||
[totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
#sky-line {
|
||||
background-image: url(../../../../assets/images/bw-sky.jpg);
|
||||
height: 204px;
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.search{
|
||||
background-color: #343F69;
|
||||
}
|
||||
::ng-deep p-paginator div {
|
||||
background-color: var(--surface-200) !important;
|
||||
// background-color: var(--surface-400) !important;
|
||||
}
|
||||
.rounded-image {
|
||||
border-radius: 6px;
|
||||
// width: 100px;
|
||||
max-width: 100px;
|
||||
height: 45px;
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
padding: 1px 1px;
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { ChangeDetectorRef, Component } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { Observable, lastValueFrom } from 'rxjs';
|
||||
import { PaginatorModule } from 'primeng/paginator';
|
||||
import onChange from 'on-change';
|
||||
import { InitEditableRow } from 'primeng/table';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { ListingsService } from '../../../services/listings.service';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
import { ImageService } from '../../../services/image.service';
|
||||
import { createGenericObject, getCriteriaStateObject, getListingType, getSessionStorageHandler } from '../../../utils/utils';
|
||||
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-broker-listings',
|
||||
standalone: true,
|
||||
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
|
||||
templateUrl: './broker-listings.component.html',
|
||||
styleUrl: './broker-listings.component.scss'
|
||||
})
|
||||
export class BrokerListingsComponent {
|
||||
environment=environment;
|
||||
listings: Array<BusinessListing>;
|
||||
users: Array<User>
|
||||
filteredListings: Array<ListingType>;
|
||||
criteria:ListingCriteria;
|
||||
realEstateChecked: boolean;
|
||||
// category: string;
|
||||
maxPrice: string;
|
||||
minPrice: string;
|
||||
type:string;
|
||||
states = [];
|
||||
statesSet = new Set();
|
||||
state:string;
|
||||
first: number = 0;
|
||||
rows: number = 12;
|
||||
totalRecords:number = 0;
|
||||
ts = new Date().getTime()
|
||||
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
|
||||
|
||||
constructor(public selectOptions: SelectOptionsService,
|
||||
private listingsService:ListingsService,
|
||||
private userService:UserService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private router:Router,
|
||||
private cdRef:ChangeDetectorRef,
|
||||
private imageService:ImageService) {
|
||||
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
|
||||
this.router.getCurrentNavigation()
|
||||
this.activatedRoute.snapshot
|
||||
this.activatedRoute.params.subscribe(params => {
|
||||
if (this.activatedRoute.snapshot.fragment===''){
|
||||
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
|
||||
this.first=0;
|
||||
}
|
||||
this.init()
|
||||
})
|
||||
|
||||
}
|
||||
async ngOnInit(){
|
||||
}
|
||||
async init(){
|
||||
|
||||
this.listings=[]
|
||||
this.filteredListings=[];
|
||||
this.users=await this.userService.search(this.criteria);
|
||||
const profiles = await this.imageService.getProfileImagesForUsers(this.users.map(u=>u.id));
|
||||
const logos = await this.imageService.getCompanyLogosForUsers(this.users.map(u=>u.id));
|
||||
this.users.forEach(u=>{
|
||||
u.hasProfile=profiles[u.id]
|
||||
u.hasCompanyLogo=logos[u.id]
|
||||
})
|
||||
this.cdRef.markForCheck();
|
||||
this.cdRef.detectChanges();
|
||||
|
||||
}
|
||||
setStates(){
|
||||
this.statesSet=new Set();
|
||||
this.listings.forEach(l=>{
|
||||
if (l.state){
|
||||
this.statesSet.add(l.state)
|
||||
}
|
||||
})
|
||||
this.states = [...this.statesSet].map((ls) =>({name:this.selectOptions.getState(ls as string),value:ls}))
|
||||
}
|
||||
async search() {
|
||||
this.listings= await this.listingsService.getListings(this.criteria,'professionals_brokers');
|
||||
this.setStates();
|
||||
this.totalRecords=this.listings.length
|
||||
this.filteredListings =[...this.listings].splice(this.first,this.rows);
|
||||
this.cdRef.markForCheck();
|
||||
this.cdRef.detectChanges();
|
||||
}
|
||||
onPageChange(event: any) {
|
||||
|
||||
this.criteria.start=event.first;
|
||||
this.criteria.length=event.rows;
|
||||
this.criteria.page=event.page;
|
||||
this.criteria.pageCount=event.pageCount;
|
||||
}
|
||||
imageErrorHandler(listing: ListingType) {
|
||||
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
<div id="sky-line" class="hidden-lg-down">
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="wrapper">
|
||||
<div class="grid p-4 align-items-center">
|
||||
@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"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p-dropdown [options]="states" [(ngModel)]="state" optionLabel="criteria.location" optionLabel="name"
|
||||
optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name"
|
||||
optionValue="value" [showClear]="true" placeholder="Min Price"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name"
|
||||
optionValue="value" [showClear]="true" placeholder="Max Price"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<!-- <p-toggleButton [(ngModel)]="checked1" onLabel="Sustainable" offLabel="Unsustainable" onIcon="pi pi-check" offIcon="pi pi-times" styleClass="mb-3 lg:mt-0 mr-4 flex-shrink-0 w-12rem"></p-toggleButton> -->
|
||||
<p-toggleButton [(ngModel)]="criteria.realEstateChecked" onLabel="Real Estate not included"
|
||||
offLabel="Real Estate included"></p-toggleButton>
|
||||
</div>
|
||||
}
|
||||
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}"
|
||||
class="col-1">
|
||||
<p-button label="Refine" (click)="search()"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="surface-200 h-full">
|
||||
<div class="wrapper">
|
||||
<div class="grid">
|
||||
@for (listing of listings; 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]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
|
||||
</span>
|
||||
<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 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/business',listing.id]"></button>
|
||||
</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>
|
||||
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows"
|
||||
[totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
#sky-line {
|
||||
background-image: url(../../../../assets/images/bw-sky.jpg);
|
||||
height: 204px;
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.search{
|
||||
background-color: #343F69;
|
||||
}
|
||||
::ng-deep p-paginator div {
|
||||
background-color: var(--surface-200) !important;
|
||||
// background-color: var(--surface-400) !important;
|
||||
}
|
||||
.rounded-image {
|
||||
border-radius: 6px;
|
||||
// width: 100px;
|
||||
max-width: 100px;
|
||||
height: 45px;
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
padding: 1px 1px;
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import { ChangeDetectorRef, Component } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { Observable, lastValueFrom } from 'rxjs';
|
||||
import { PaginatorModule } from 'primeng/paginator';
|
||||
import onChange from 'on-change';
|
||||
import { InitEditableRow } from 'primeng/table';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { ListingsService } from '../../../services/listings.service';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
import { ImageService } from '../../../services/image.service';
|
||||
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
|
||||
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-business-listings',
|
||||
standalone: true,
|
||||
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
|
||||
templateUrl: './business-listings.component.html',
|
||||
styleUrl: './business-listings.component.scss'
|
||||
})
|
||||
export class BusinessListingsComponent {
|
||||
environment=environment;
|
||||
listings: Array<BusinessListing>;
|
||||
users: Array<User>
|
||||
filteredListings: Array<BusinessListing>;
|
||||
criteria:ListingCriteria;
|
||||
realEstateChecked: boolean;
|
||||
// category: string;
|
||||
maxPrice: string;
|
||||
minPrice: string;
|
||||
type:string;
|
||||
states = [];
|
||||
statesSet = new Set();
|
||||
state:string;
|
||||
first: number = 0;
|
||||
rows: number = 12;
|
||||
totalRecords:number = 0;
|
||||
ts = new Date().getTime()
|
||||
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
|
||||
|
||||
constructor(public selectOptions: SelectOptionsService,
|
||||
private listingsService:ListingsService,
|
||||
private userService:UserService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private router:Router,
|
||||
private cdRef:ChangeDetectorRef,
|
||||
private imageService:ImageService) {
|
||||
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
|
||||
this.router.getCurrentNavigation()
|
||||
this.activatedRoute.snapshot
|
||||
this.activatedRoute.params.subscribe(params => {
|
||||
if (this.activatedRoute.snapshot.fragment===''){
|
||||
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
|
||||
this.first=0;
|
||||
}
|
||||
this.category = (<any>params).type;
|
||||
this.init()
|
||||
})
|
||||
|
||||
}
|
||||
async ngOnInit(){
|
||||
}
|
||||
async init(){
|
||||
this.users=[]
|
||||
this.listings=await this.listingsService.getListings(this.criteria,'business');
|
||||
|
||||
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();
|
||||
|
||||
|
||||
}
|
||||
setStates(){
|
||||
this.statesSet=new Set();
|
||||
this.listings.forEach(l=>{
|
||||
if (l.state){
|
||||
this.statesSet.add(l.state)
|
||||
}
|
||||
})
|
||||
this.states = [...this.statesSet].map((ls) =>({name:this.selectOptions.getState(ls as string),value:ls}))
|
||||
}
|
||||
async search() {
|
||||
this.listings= await this.listingsService.getListings(this.criteria,'business');
|
||||
this.setStates();
|
||||
this.totalRecords=this.listings.length
|
||||
this.filteredListings =[...this.listings].splice(this.first,this.rows);
|
||||
this.cdRef.markForCheck();
|
||||
this.cdRef.detectChanges();
|
||||
}
|
||||
onPageChange(event: any) {
|
||||
|
||||
this.criteria.start=event.first;
|
||||
this.criteria.length=event.rows;
|
||||
this.criteria.page=event.page;
|
||||
this.criteria.pageCount=event.pageCount;
|
||||
}
|
||||
imageErrorHandler(listing: ListingType) {
|
||||
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
<div id="sky-line" class="hidden-lg-down">
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="wrapper">
|
||||
<div class="grid p-4 align-items-center">
|
||||
<div class="col-2">
|
||||
<p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value"
|
||||
[showClear]="true" placeholder="Location" [style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}"
|
||||
class="col-1">
|
||||
<p-button label="Refine" (click)="search()"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="surface-200 h-full">
|
||||
<div class="wrapper">
|
||||
<div class="grid">
|
||||
|
||||
@for (listing of filteredListings; track listing.id) {
|
||||
<div 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]}}"
|
||||
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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
}
|
||||
</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>
|
||||
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows"
|
||||
[totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
#sky-line {
|
||||
background-image: url(../../../../assets/images/bw-sky.jpg);
|
||||
height: 204px;
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.search{
|
||||
background-color: #343F69;
|
||||
}
|
||||
::ng-deep p-paginator div {
|
||||
background-color: var(--surface-200) !important;
|
||||
// background-color: var(--surface-400) !important;
|
||||
}
|
||||
.rounded-image {
|
||||
border-radius: 6px;
|
||||
// width: 100px;
|
||||
max-width: 100px;
|
||||
height: 45px;
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
padding: 1px 1px;
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { ChangeDetectorRef, Component } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { Observable, lastValueFrom } from 'rxjs';
|
||||
import { PaginatorModule } from 'primeng/paginator';
|
||||
import onChange from 'on-change';
|
||||
import { InitEditableRow } from 'primeng/table';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { ListingsService } from '../../../services/listings.service';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
import { ImageService } from '../../../services/image.service';
|
||||
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
|
||||
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-commercial-property-listings',
|
||||
standalone: true,
|
||||
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
|
||||
templateUrl: './commercial-property-listings.component.html',
|
||||
styleUrl: './commercial-property-listings.component.scss'
|
||||
})
|
||||
export class CommercialPropertyListingsComponent {
|
||||
environment=environment;
|
||||
listings: Array<CommercialPropertyListing>;
|
||||
users: Array<User>
|
||||
filteredListings: Array<CommercialPropertyListing>;
|
||||
criteria:ListingCriteria;
|
||||
realEstateChecked: boolean;
|
||||
|
||||
maxPrice: string;
|
||||
minPrice: string;
|
||||
type:string;
|
||||
states = [];
|
||||
statesSet = new Set();
|
||||
state:string;
|
||||
first: number = 0;
|
||||
rows: number = 12;
|
||||
totalRecords:number = 0;
|
||||
ts = new Date().getTime()
|
||||
|
||||
constructor(public selectOptions: SelectOptionsService,
|
||||
private listingsService:ListingsService,
|
||||
private userService:UserService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private router:Router,
|
||||
private cdRef:ChangeDetectorRef,
|
||||
private imageService:ImageService) {
|
||||
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
|
||||
this.router.getCurrentNavigation()
|
||||
this.activatedRoute.snapshot
|
||||
this.activatedRoute.params.subscribe(params => {
|
||||
if (this.activatedRoute.snapshot.fragment===''){
|
||||
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
|
||||
this.first=0;
|
||||
}
|
||||
this.init()
|
||||
})
|
||||
|
||||
}
|
||||
async ngOnInit(){
|
||||
}
|
||||
async init(){
|
||||
this.users=[]
|
||||
this.listings=await this.listingsService.getListings(this.criteria,'commercialProperty');
|
||||
|
||||
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();
|
||||
|
||||
|
||||
}
|
||||
setStates(){
|
||||
this.statesSet=new Set();
|
||||
this.listings.forEach(l=>{
|
||||
if (l.state){
|
||||
this.statesSet.add(l.state)
|
||||
}
|
||||
})
|
||||
this.states = [...this.statesSet].map((ls) =>({name:this.selectOptions.getState(ls as string),value:ls}))
|
||||
}
|
||||
async search() {
|
||||
this.listings= await this.listingsService.getListings(this.criteria,'commercialProperty');
|
||||
this.setStates();
|
||||
this.totalRecords=this.listings.length
|
||||
this.filteredListings =[...this.listings].splice(this.first,this.rows);
|
||||
this.cdRef.markForCheck();
|
||||
this.cdRef.detectChanges();
|
||||
}
|
||||
onPageChange(event: any) {
|
||||
//this.first = event.first;
|
||||
//this.rows = event.rows;
|
||||
//this.filteredListings=[...this.listings].splice(this.first,this.rows);
|
||||
this.criteria.start=event.first;
|
||||
this.criteria.length=event.rows;
|
||||
this.criteria.page=event.page;
|
||||
this.criteria.pageCount=event.pageCount;
|
||||
}
|
||||
imageErrorHandler(listing: ListingType) {
|
||||
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
|
||||
}
|
||||
}
|
||||
@@ -1,162 +0,0 @@
|
||||
<div id="sky-line" class="hidden-lg-down">
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="wrapper">
|
||||
<div class="grid p-4 align-items-center">
|
||||
@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"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p-dropdown [options]="states" [(ngModel)]="state" optionLabel="criteria.location" optionLabel="name" optionValue="value"
|
||||
[showClear]="true" placeholder="State" [style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name"
|
||||
optionValue="value" [showClear]="true" placeholder="Min Price"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name"
|
||||
optionValue="value" [showClear]="true" placeholder="Max Price"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<!-- <p-toggleButton [(ngModel)]="checked1" onLabel="Sustainable" offLabel="Unsustainable" onIcon="pi pi-check" offIcon="pi pi-times" styleClass="mb-3 lg:mt-0 mr-4 flex-shrink-0 w-12rem"></p-toggleButton> -->
|
||||
<p-toggleButton [(ngModel)]="criteria.realEstateChecked" onLabel="Real Estate not included"
|
||||
offLabel="Real Estate included"></p-toggleButton>
|
||||
</div>
|
||||
}
|
||||
@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>
|
||||
</div>
|
||||
}
|
||||
<!-- @if (listingCategory==='professionals_brokers'){ -->
|
||||
<!-- <div class="col-2">
|
||||
<p-dropdown [options]="selectOptions.categories" [(ngModel)]="criteria.category" optionLabel="name"
|
||||
optionValue="value" [showClear]="true" placeholder="Category"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value"
|
||||
[showClear]="true" placeholder="Location" [style]="{ width: '100%'}"></p-dropdown>
|
||||
</div> -->
|
||||
<!-- } -->
|
||||
<div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}" class="col-1">
|
||||
<p-button label="Refine" (click)="search()"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="surface-200 h-full">
|
||||
<div class="wrapper">
|
||||
<div class="grid">
|
||||
@for (listing of listings; 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]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
|
||||
</span>
|
||||
<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/business',listing.id]"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@for (listing of filteredListings; track listing.id) {
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
}
|
||||
@for (user of users; track user.id) {
|
||||
<div class="col-12 lg:col-6 xl:col-4 p-4 flex flex-column flex-grow-1">
|
||||
<div class="surface-card shadow-2 p-2 flex flex-column flex-grow-1 justify-content-between" 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>
|
||||
@if(user.hasProfile){
|
||||
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif?_ts={{ts}}" class="w-5rem" />
|
||||
} @else {
|
||||
<img src="assets/images/person_placeholder.jpg" 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">
|
||||
@if(user.hasCompanyLogo){
|
||||
<img src="{{environment.apiBaseUrl}}/logo/{{user.id}}.avif" class="rounded-image"/>
|
||||
} @else {
|
||||
<img src="assets/images/placeholder.png" 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',user.id]"></button>
|
||||
|
||||
</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>
|
||||
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]" ></p-paginator>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -16,9 +16,11 @@ 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, User } from '../../../../../common-models/src/main.model';
|
||||
|
||||
import { UserService } from '../../services/user.service';
|
||||
import { ImageService } from '../../services/image.service';
|
||||
import { ListingCriteria, ListingType } from '../../../../../bizmatch-server/src/models/main.model';
|
||||
import { User } from '../../../../../bizmatch-server/src/models/db.model';
|
||||
@Component({
|
||||
selector: 'app-listings',
|
||||
standalone: true,
|
||||
@@ -27,102 +29,96 @@ import { ImageService } from '../../services/image.service';
|
||||
styleUrls: ['./listings.component.scss', '../pages.scss']
|
||||
})
|
||||
export class ListingsComponent {
|
||||
environment=environment;
|
||||
listings: Array<ListingType>;
|
||||
users: Array<User>
|
||||
filteredListings: Array<ListingType>;
|
||||
criteria:ListingCriteria;
|
||||
realEstateChecked: boolean;
|
||||
// category: string;
|
||||
maxPrice: string;
|
||||
minPrice: string;
|
||||
type:string;
|
||||
states = [];
|
||||
statesSet = new Set();
|
||||
state:string;
|
||||
first: number = 0;
|
||||
rows: number = 12;
|
||||
totalRecords:number = 0;
|
||||
ts = new Date().getTime()
|
||||
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
|
||||
// environment=environment;
|
||||
// listings: Array<ListingType>;
|
||||
// users: Array<User>
|
||||
// filteredListings: Array<ListingType>;
|
||||
// criteria:ListingCriteria;
|
||||
// realEstateChecked: boolean;
|
||||
// maxPrice: string;
|
||||
// minPrice: string;
|
||||
// type:string;
|
||||
// states = [];
|
||||
// statesSet = new Set();
|
||||
// state:string;
|
||||
// first: number = 0;
|
||||
// rows: number = 12;
|
||||
// totalRecords:number = 0;
|
||||
// ts = new Date().getTime()
|
||||
// public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
|
||||
|
||||
constructor(public selectOptions: SelectOptionsService,
|
||||
private listingsService:ListingsService,
|
||||
private userService:UserService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private router:Router,
|
||||
private cdRef:ChangeDetectorRef,
|
||||
private imageService:ImageService) {
|
||||
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
|
||||
this.router.getCurrentNavigation()
|
||||
this.activatedRoute.snapshot
|
||||
this.activatedRoute.params.subscribe(params => {
|
||||
if (this.activatedRoute.snapshot.fragment===''){
|
||||
this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
|
||||
this.first=0;
|
||||
}
|
||||
this.category = (<any>params).type;
|
||||
this.criteria.listingsCategory=this.category;
|
||||
this.init()
|
||||
})
|
||||
// constructor(public selectOptions: SelectOptionsService,
|
||||
// private listingsService:ListingsService,
|
||||
// private userService:UserService,
|
||||
// private activatedRoute: ActivatedRoute,
|
||||
// private router:Router,
|
||||
// private cdRef:ChangeDetectorRef,
|
||||
// private imageService:ImageService) {
|
||||
// this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
|
||||
// this.router.getCurrentNavigation()
|
||||
// this.activatedRoute.snapshot
|
||||
// this.activatedRoute.params.subscribe(params => {
|
||||
// if (this.activatedRoute.snapshot.fragment===''){
|
||||
// this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
|
||||
// this.first=0;
|
||||
// }
|
||||
// this.category = (<any>params).type;
|
||||
// this.criteria.listingsCategory=this.category;
|
||||
// this.init()
|
||||
// })
|
||||
|
||||
}
|
||||
async ngOnInit(){
|
||||
}
|
||||
async init(){
|
||||
if (this.category==='business' || this.category==='commercialProperty'){
|
||||
this.users=[]
|
||||
this.listings=await this.listingsService.getListings(this.criteria);
|
||||
// }
|
||||
// async ngOnInit(){
|
||||
// }
|
||||
// async init(){
|
||||
// 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);
|
||||
const profiles = await this.imageService.getProfileImagesForUsers(this.users.map(u=>u.id));
|
||||
const logos = await this.imageService.getCompanyLogosForUsers(this.users.map(u=>u.id));
|
||||
this.users.forEach(u=>{
|
||||
u.hasProfile=profiles[u.id]
|
||||
u.hasCompanyLogo=logos[u.id]
|
||||
})
|
||||
this.cdRef.markForCheck();
|
||||
this.cdRef.detectChanges();
|
||||
}
|
||||
// this.setStates();
|
||||
// this.totalRecords=this.listings.length
|
||||
// this.cdRef.markForCheck();
|
||||
// this.cdRef.detectChanges();
|
||||
// } else {
|
||||
// this.listings=[]
|
||||
// this.filteredListings=[];
|
||||
// this.users=await this.userService.search(this.criteria);
|
||||
// const profiles = await this.imageService.getProfileImagesForUsers(this.users.map(u=>u.id));
|
||||
// const logos = await this.imageService.getCompanyLogosForUsers(this.users.map(u=>u.id));
|
||||
// this.users.forEach(u=>{
|
||||
// u.hasProfile=profiles[u.id]
|
||||
// u.hasCompanyLogo=logos[u.id]
|
||||
// })
|
||||
// this.cdRef.markForCheck();
|
||||
// this.cdRef.detectChanges();
|
||||
// }
|
||||
|
||||
}
|
||||
setStates(){
|
||||
this.statesSet=new Set();
|
||||
this.listings.forEach(l=>{
|
||||
if (l.state){
|
||||
this.statesSet.add(l.state)
|
||||
}
|
||||
})
|
||||
this.states = [...this.statesSet].map((ls) =>({name:this.selectOptions.getState(ls as string),value:ls}))
|
||||
}
|
||||
async search() {
|
||||
this.listings= await this.listingsService.getListings(this.criteria);
|
||||
this.setStates();
|
||||
this.totalRecords=this.listings.length
|
||||
this.filteredListings =[...this.listings].splice(this.first,this.rows);
|
||||
this.cdRef.markForCheck();
|
||||
this.cdRef.detectChanges();
|
||||
}
|
||||
onPageChange(event: any) {
|
||||
//this.first = event.first;
|
||||
//this.rows = event.rows;
|
||||
//this.filteredListings=[...this.listings].splice(this.first,this.rows);
|
||||
this.criteria.start=event.first;
|
||||
this.criteria.length=event.rows;
|
||||
this.criteria.page=event.page;
|
||||
this.criteria.pageCount=event.pageCount;
|
||||
}
|
||||
imageErrorHandler(listing: ListingType) {
|
||||
listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
|
||||
}
|
||||
// }
|
||||
// setStates(){
|
||||
// this.statesSet=new Set();
|
||||
// this.listings.forEach(l=>{
|
||||
// if (l.state){
|
||||
// this.statesSet.add(l.state)
|
||||
// }
|
||||
// })
|
||||
// this.states = [...this.statesSet].map((ls) =>({name:this.selectOptions.getState(ls as string),value:ls}))
|
||||
// }
|
||||
// async search() {
|
||||
// this.listings= await this.listingsService.getListings(this.criteria);
|
||||
// this.setStates();
|
||||
// this.totalRecords=this.listings.length
|
||||
// this.filteredListings =[...this.listings].splice(this.first,this.rows);
|
||||
// this.cdRef.markForCheck();
|
||||
// this.cdRef.detectChanges();
|
||||
// }
|
||||
// onPageChange(event: any) {
|
||||
// this.criteria.start=event.first;
|
||||
// this.criteria.length=event.rows;
|
||||
// this.criteria.page=event.page;
|
||||
// this.criteria.pageCount=event.pageCount;
|
||||
// }
|
||||
// imageErrorHandler(listing: ListingType) {
|
||||
// listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user