aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

initial release

Browse Source
This commit is contained in:
Andreas Knuth
2024-02-29 10:23:41 -06:00
commit 5146c8e919
210 changed files with 11040 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
bizmatch/src/app/pages/listings/listings.component.html Normal file
View File

@@ -0,0 +1,130 @@
<div id="sky-line" class="hidden-lg-down">
</div>
<div class="search">
<div class="wrapper">
<div class="grid p-4 align-items-center">
@if (listingCategory==='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]="locations" [(ngModel)]="location" optionLabel="criteria.location" optionLabel="name" optionValue="value"
[showClear]="true" placeholder="Location" [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 (listingCategory==='investment'){
<div class="col-2">
<p-dropdown [options]="locations" [(ngModel)]="criteria.location" 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]="locations" [(ngModel)]="criteria.location" optionLabel="name" optionValue="value"
[showClear]="true" placeholder="Location" [style]="{ width: '100%'}"></p-dropdown>
</div>
}
<div [ngClass]="{'col-offset-9':type==='investment','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 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==='professionals_brokers'){
<div class="flex align-items-center">
<span [class]="selectOptions.getBgColor(listing.category)" class="inline-flex border-circle align-items-center justify-content-center mr-3"
style="width:38px;height:38px">
<i [class]="selectOptions.getIconAndTextColor(listing.category)" class="text-xl"></i>
</span>
<span class="text-900 font-medium text-2xl">{{selectOptions.getCategory(listing.category)}}</span>
</div>
}
@if (listing.listingsCategory==='investment'){
<div class="flex align-items-center">
<span
class="inline-flex border-circle align-items-center justify-content-center bg-green-100 mr-3"
style="width:38px;height:38px">
<i class="pi pi-globe text-xl text-green-600"></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.getLocation(listing.location)}}</p>
<p class="mt-0 mb-1 text-700 line-height-3">Established: {{listing.established}}</p>
}
@if (listing.listingsCategory==='professionals_brokers'){
<!-- <p class="mt-0 mb-1 text-700 line-height-3">Category: {{listing.category}}</p> -->
<p class="mt-0 mb-1 text-700 line-height-3">Location: {{selectOptions.getLocation(listing.location)}}</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>
}
@if (listing.listingsCategory==='investment'){
<p class="mt-0 mb-1 text-700 line-height-3">Location: {{selectOptions.getLocation(listing.location)}}</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"/>
</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>
}
</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>

22
bizmatch/src/app/pages/listings/listings.component.scss Normal file
View File

@@ -0,0 +1,22 @@
#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;
height: 25px;
border: 1px solid rgba(0,0,0,0.2);
padding: 1px 1px;
object-fit: contain;
}

96
bizmatch/src/app/pages/listings/listings.component.ts Normal file
View File

@@ -0,0 +1,96 @@
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 { BusinessListing, InvestmentsListing, KeyValue, ListingCriteria, ListingType, PageEvent, ProfessionalsBrokersListing, } from '../../models/main.model';
import { SelectOptionsService } from '../../services/select-options.service';
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 { ListingsService } from '../../services/listings.service';
import { Observable, lastValueFrom } from 'rxjs';
import { PaginatorModule } from 'primeng/paginator';
import onChange from 'on-change';
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils';
import { InitEditableRow } from 'primeng/table';
import { environment } from '../../../environments/environment';
@Component({
selector: 'app-listings',
standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
templateUrl: './listings.component.html',
styleUrls: ['./listings.component.scss', '../pages.scss']
})
export class ListingsComponent {
environment=environment;
listings: Array<ListingType>;
filteredListings: Array<ListingType>;
criteria:ListingCriteria;
realEstateChecked: boolean;
category: string;
maxPrice: string;
minPrice: string;
type:string;
locations = [];
locationsSet = new Set();
location:string;
first: number = 0;
rows: number = 12;
totalRecords:number = 0;
public listingCategory: 'business' | 'professionals_brokers' | 'investment' | undefined;
constructor(public selectOptions: SelectOptionsService, private listingsService:ListingsService,private activatedRoute: ActivatedRoute, private router:Router, private cdRef:ChangeDetectorRef) {
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.listingCategory = (<any>params).type;
this.criteria.listingsCategory=this.listingCategory;
this.init()
})
}
async ngOnInit(){
}
async init(){
this.listings=await this.listingsService.getListings(this.criteria);
this.setLocations();
this.filteredListings=[...this.listings];
this.totalRecords=this.listings.length
this.filteredListings=[...this.listings].splice(this.first,this.rows);
this.cdRef.markForCheck();
this.cdRef.detectChanges();
}
setLocations(){
this.locationsSet=new Set();
this.listings.forEach(l=>{
if (l.location){
this.locationsSet.add(l.location)
}
})
this.locations = [...this.locationsSet].map((ls) =>({name:this.selectOptions.getLocation(ls as string),value:ls}))
}
async search() {
this.listings= await this.listingsService.getListings(this.criteria);
this.setLocations();
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);
}
imageErrorHandler(listing: ListingType) {
listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
}
}