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
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user