format on save, resolve compile errors, functionality 1. stage
This commit is contained in:
@@ -1,73 +1,68 @@
|
||||
<div id="sky-line" class="hidden-lg-down">
|
||||
</div>
|
||||
<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 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 class="col-1 col-offset-9">
|
||||
<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 class="wrapper">
|
||||
<div class="grid">
|
||||
@for (listing of listings; 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>
|
||||
<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 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-commercial-property-listing', listing.id]"
|
||||
></button>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@@ -1,100 +1,96 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ChangeDetectorRef, Component } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import onChange from 'on-change';
|
||||
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 { InputTextModule } from 'primeng/inputtext';
|
||||
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 { StyleClassModule } from 'primeng/styleclass';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
|
||||
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';
|
||||
import { ImageService } from '../../../services/image.service';
|
||||
import { ListingsService } from '../../../services/listings.service';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
|
||||
|
||||
@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'
|
||||
styleUrl: './commercial-property-listings.component.scss',
|
||||
})
|
||||
export class CommercialPropertyListingsComponent {
|
||||
environment=environment;
|
||||
environment = environment;
|
||||
listings: Array<CommercialPropertyListing>;
|
||||
users: Array<User>
|
||||
users: Array<User>;
|
||||
filteredListings: Array<CommercialPropertyListing>;
|
||||
criteria:ListingCriteria;
|
||||
criteria: ListingCriteria;
|
||||
realEstateChecked: boolean;
|
||||
|
||||
maxPrice: string;
|
||||
minPrice: string;
|
||||
type:string;
|
||||
type: string;
|
||||
states = [];
|
||||
statesSet = new Set();
|
||||
state:string;
|
||||
state: string;
|
||||
first: number = 0;
|
||||
rows: number = 12;
|
||||
totalRecords:number = 0;
|
||||
ts = new Date().getTime()
|
||||
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
|
||||
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;
|
||||
if (this.activatedRoute.snapshot.fragment === '') {
|
||||
this.criteria = onChange(createGenericObject<ListingCriteria>(), getSessionStorageHandler);
|
||||
this.first = 0;
|
||||
}
|
||||
this.init()
|
||||
})
|
||||
|
||||
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();
|
||||
async ngOnInit() {}
|
||||
async init() {
|
||||
this.users = [];
|
||||
this.listings = await this.listingsService.getListings(this.criteria, 'commercialProperty');
|
||||
|
||||
|
||||
}
|
||||
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.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();
|
||||
}
|
||||
@@ -102,10 +98,10 @@ export class CommercialPropertyListingsComponent {
|
||||
//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;
|
||||
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