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

146
bizmatch/src/app/pages/details/details.component.html Normal file
View File

@@ -0,0 +1,146 @@
<div class="surface-ground h-full">
<div class="px-6 py-5">
<div class="surface-card p-4 shadow-2 border-round">
<div class="flex justify-content-between align-items-center align-content-center">
<div class="font-medium text-3xl text-900 mb-3">{{listing?.title}}</div>
<!-- <button pButton pRipple type="button" label="Go back to listings" icon="pi pi-user-plus" class="mr-3 p-button-rounded"></button> -->
<p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
</div>
<!-- <div class="text-500 mb-5">Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</div> -->
<div class="grid">
<div class="col-12 md:col-6">
<ul class="list-none p-0 m-0 border-top-1 border-300">
@if (listing && (listing.listingsCategory==='business' || listing.listingsCategory==='professionals_brokers')){
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Summary</div>
<div class="w-full md:w-10">
@for (summary of listing.summary; track summary; let idx = $index; let last = $last) {
<div class="text-900">{{summary}}</div>
@if (!last) {
<br/>
}
}
</div>
</li>
}
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Description</div>
<div class="text-900 w-full md:w-10 line-height-3">{{listing?.description}}</div>
</li>
@if (listing && (listing.listingsCategory==='business')){
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Category</div>
<div class="text-900 w-full md:w-10">
<p-chip [label]="selectOptions.getBusiness(listing.type)"></p-chip>
</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Located in</div>
<div class="text-900 w-full md:w-10">{{selectOptions.getLocation(listing.location)}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Asking Price</div>
<div class="text-900 w-full md:w-10">{{listing.price | currency}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Real Estate Included</div>
<div class="text-900 w-full md:w-10">{{listing.realEstateIncluded?'Yes':'No'}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Sales revenue</div>
<div class="text-900 w-full md:w-10">{{listing.salesRevenue | currency}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Cash flow</div>
<div class="text-900 w-full md:w-10">{{listing.cashFlow | currency}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Employees</div>
<div class="text-900 w-full md:w-10">{{listing.employees}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Broker licensing</div>
<div class="text-900 w-full md:w-10">{{listing.brokerLicencing}}</div>
</li>
}
@if (listing && (listing.listingsCategory==='professionals_brokers')){
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Located in</div>
<div class="text-900 w-full md:w-10">{{selectOptions.getLocation(listing.location)}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Address</div>
<div class="text-900 w-full md:w-10">{{listing.address}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">EMail</div>
<div class="text-900 w-full md:w-10">{{listing.email}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Website</div>
<div class="text-900 w-full md:w-10">{{listing.website}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap ">
<div class="text-500 w-full md:w-2 font-medium">Category</div>
<div class="text-900 w-full md:w-10">{{listing.category}}</div>
</li>
}
@if (listing && (listing.listingsCategory==='investment')){
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Located in</div>
<div class="text-900 w-full md:w-10">{{selectOptions.getLocation(listing.location)}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">EMail</div>
<div class="text-900 w-full md:w-10">{{listing.email}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
<div class="text-500 w-full md:w-2 font-medium">Website</div>
<div class="text-900 w-full md:w-10">{{listing.website}}</div>
</li>
<li class="flex align-items-center py-3 px-2 flex-wrap">
<div class="text-500 w-full md:w-2 font-medium">Phone Number</div>
<div class="text-900 w-full md:w-10">{{listing.phoneNumber}}</div>
</li>
}
</ul>
@if(listing && user && (user.id===listing?.userId || isAdmin())){
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/editListing',listing.id]"></button>
}
</div>
<div class="col-12 md:col-6">
<div class="surface-card p-4 border-round p-fluid">
<div class="font-medium text-xl text-primary text-900 mb-3">Contact The Author of This Listing
</div>
<div class="font-italic text-sm text-900 mb-5">Please Include your contact info below:</div>
<div class="grid formgrid p-fluid">
<div class="field mb-4 col-12 md:col-6">
<label for="company_name" class="font-medium text-900">Your Name</label>
<input id="company_name" type="text" pInputText>
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="invoice_id" class="font-medium text-900">Your Email</label>
<input id="invoice_id" type="text" pInputText>
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="customer_name" class="font-medium text-900">Phone Number</label>
<input id="customer_name" type="text" pInputText>
</div>
<div class="field mb-4 col-12 md:col-6">
<label for="customer_email" class="font-medium text-900">Country/State</label>
<input id="customer_email" type="text" pInputText>
</div>
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
<div class="field mb-4 col-12">
<label for="notes" class="font-medium text-900">Questions/Comments</label>
<textarea id="notes" pInputTextarea [autoResize]="true" [rows]="5"></textarea>
</div>
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
</div>
<button pButton pRipple label="Submit" icon="pi pi-file" class="w-auto"></button>
</div>
</div>
</div>
</div>
</div>

0
bizmatch/src/app/pages/details/details.component.scss Normal file
View File

50
bizmatch/src/app/pages/details/details.component.ts Normal file
View File

@@ -0,0 +1,50 @@
import { 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, ProfessionalsBrokersListing, User } 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 { TagModule } from 'primeng/tag';
import data from '../../../assets/data/listings.json';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { lastValueFrom } from 'rxjs';
import { ListingsService } from '../../services/listings.service';
import { UserService } from '../../services/user.service';
import onChange from 'on-change';
import { getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils';
@Component({
selector: 'app-details',
standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule,RouterModule],
templateUrl: './details.component.html',
styleUrl: './details.component.scss'
})
export class DetailsComponent {
// listings: Array<BusinessListing>;
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
listing: BusinessListing|ProfessionalsBrokersListing|InvestmentsListing;
user:User;
criteria:ListingCriteria
constructor(private activatedRoute: ActivatedRoute,private listingsService:ListingsService,private router:Router,private userService:UserService,public selectOptions: SelectOptionsService){
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
}
async ngOnInit(){
this.user = this.userService.getUser();
this.listing=await lastValueFrom(this.listingsService.getListingById(this.id));
}
back(){
this.router.navigate(['listings',this.criteria.listingsCategory])
}
isAdmin(){
return this.userService.hasAdminRole();
}
}

93
bizmatch/src/app/pages/home/home.component.html Normal file
View File

@@ -0,0 +1,93 @@
<div class="container">
<div class="wrapper">
<div class="py-3 px-6 flex align-items-center justify-content-between relative">
<a routerLink="/home"><img src="../../../assets/images/header-logo.png" alt="Image" height="50" ></a>
<div
class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 top-100 px-6 lg:px-0 shadow-2 lg:shadow-none z-2">
<section></section>
<ul
class="list-none p-0 m-0 flex lg:align-items-center text-blue-900 select-none flex-column lg:flex-row cursor-pointer">
<li>
<a pRipple
class="flex px-0 lg:px-5 py-3 hover:text-blue-600 font-medium transition-colors transition-duration-150">
<span>Corporate</span>
</a>
</li>
<li>
<a pRipple
class="flex px-0 lg:px-5 py-3 hover:text-blue-600 font-medium transition-colors transition-duration-150">
<span>Resources</span>
</a>
</li>
<li>
<a pRipple
class="flex px-0 lg:px-5 py-3 hover:text-blue-600 font-medium transition-colors transition-duration-150">
<span>Pricing</span>
</a>
</li>
</ul>
<div
class="flex justify-content-between lg:block border-top-1 lg:border-top-none border-gray-800 py-3 lg:py-0 mt-3 lg:mt-0">
<!-- <p-button label="Account" class="ml-3 font-bold" [outlined]="true" severity="secondary" [routerLink]="['/account']"></p-button> -->
<p-button label="Account" class="ml-3 font-bold" [outlined]="true" severity="secondary" (click)="account()"></p-button>
</div>
</div>
</div>
<div class="px-4 py-8 md:px-6 lg:px-8">
<div class="flex flex-wrap">
<div class="w-12 lg:w-6 p-4">
<h1 class="text-6xl font-bold text-blue-900 mt-0 mb-3">Find businesses for sale</h1>
<p class="text-3xl text-blue-600 mt-0 mb-5">Arcu cursus euismod quis viverra nibh cras. Amet justo
donec
enim diam vulputate ut.</p>
<ul class="list-none p-0 m-0">
<li class="mb-3 flex align-items-center"><i
class="pi pi-compass text-yellow-500 text-xl mr-2"></i><span
class="text-blue-600 line-height-3">Senectus et netus et malesuada fames.</span></li>
<li class="mb-3 flex align-items-center"><i
class="pi pi-map text-yellow-500 text-xl mr-2"></i><span
class="text-blue-600 line-height-3">Orci a scelerisque purus semper eget.</span></li>
<li class="mb-3 flex align-items-center"><i
class="pi pi-calendar text-yellow-500 text-xl mr-2"></i><span
class="text-blue-600 line-height-3">Aenean sed adipiscing diam donec adipiscing
tristique.</span></li>
</ul>
</div>
<div class="w-12 lg:w-6 text-center lg:text-right flex">
<div class="mt-5">
<ul class="flex flex-column align-items-left gap-3 px-2 py-3 list-none surface-border">
<li><button pButton pRipple icon="pi pi-user" (click)="activeTabAction = 'business'"
label="Businesses"
[ngClass]="{'p-button-text text-700': activeTabAction !== 'business'}"></button></li>
<li><button pButton pRipple icon="pi pi-globe" (click)="activeTabAction = 'professionals_brokers'"
label="Professionals/Brokers Directory"
[ngClass]="{'p-button-text text-700': activeTabAction != 'professionals_brokers'}"></button></li>
<li><button pButton pRipple icon="pi pi-shield" (click)="activeTabAction = 'investment'"
label="Investment Property"
[ngClass]="{'p-button-text text-700': activeTabAction != 'investment'}"></button>
</li>
</ul>
</div>
<div class="mt-5">
<div class="flex flex-column align-items-right gap-3 px-2 py-3 my-3 surface-border">
<p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Category"
[style]="{ width: '200px'}"></p-dropdown>
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name" optionValue="value"
[showClear]="true" placeholder="Min Price" [style]="{ width: '200px'}"></p-dropdown>
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name" optionValue="value"
[showClear]="true" placeholder="Max Price" [style]="{ width: '200px'}"></p-dropdown>
<button pButton pRipple label="Find" class="ml-3 font-bold"
[style]="{ width: '170px'}" (click)="search()"></button>
</div>
</div>
</div>
<div class="w-12 flex justify-content-center">
<button type="button" pButton pRipple label="Create Your Listing"
class="block mt-7 mb-7 lg:mb-0 p-button-rounded p-button-success p-button-lg font-medium" [routerLink]="userService.isLoggedIn()?'/createListing':'/pricing'"></button>
</div>
</div>
</div>
</div>
</div>

17
bizmatch/src/app/pages/home/home.component.scss Normal file
View File

@@ -0,0 +1,17 @@
:host {
height: 100%
}
.container {
background-image: url(../../../assets/images/index-bg.webp);
//background-image: url(../../../assets/images/corpusChristiSkyline.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.combo_lp{
width: 200px;
}
.p-button-white{
color:aliceblue
}

45
bizmatch/src/app/pages/home/home.component.ts Normal file
View File

@@ -0,0 +1,45 @@
import { Component } from '@angular/core';
import { DropdownModule } from 'primeng/dropdown';
import { KeyValue, ListingCriteria } from '../../models/main.model';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { StyleClassModule } from 'primeng/styleclass';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
import { SelectOptionsService } from '../../services/select-options.service';
import { UserService } from '../../services/user.service';
import onChange from 'on-change';
import { getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils';
@Component({
selector: 'app-home',
standalone: true,
imports: [CommonModule, StyleClassModule,ButtonModule, CheckboxModule,InputTextModule,DropdownModule,FormsModule, RouterModule],
templateUrl: './home.component.html',
styleUrl: './home.component.scss'
})
export class HomeComponent {
activeTabAction = 'business';
type:string;
maxPrice:string;
minPrice:string;
criteria:ListingCriteria
public constructor(private router: Router,private activatedRoute: ActivatedRoute, public selectOptions:SelectOptionsService, public userService:UserService) {
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
}
ngOnInit(){
}
search(){
this.router.navigate([`listings/${this.activeTabAction}`])
}
account(){
setTimeout(()=>{
this.router.navigate([`account`])
},10);
}
}

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
}
}

42
bizmatch/src/app/pages/menu-account/menu-account.component.html Normal file
View File

@@ -0,0 +1,42 @@
<div class="surface-ground ">
<div class="p-fluid flex flex-column lg:flex-row">
<ul class="list-none m-0 p-0 flex flex-row lg:flex-column justify-content-evenly md:justify-content-between lg:justify-content-start mb-5 lg:pr-8 lg:mb-0">
<li>
<a routerLink="/account" routerLinkActive="text-blue-500" pRipple class="flex align-items-center cursor-pointer p-3 border-round text-800 hover:surface-200 transition-duration-150 transition-colors no-underline" >
<i class="pi pi-user md:mr-2"></i>
<span class="font-medium hidden md:block">Account</span>
</a>
</li>
<li>
<a routerLink="/createListing" routerLinkActive="text-blue-500" pRipple class="flex align-items-center cursor-pointer p-3 border-round text-800 hover:surface-200 transition-duration-150 transition-colors no-underline">
<i class="pi pi-plus-circle md:mr-2"></i>
<span class="font-medium hidden md:block">Create Listing</span>
</a>
</li>
<li>
<a routerLink="/myListings" routerLinkActive="text-blue-500" pRipple class="flex align-items-center cursor-pointer p-3 border-round text-800 hover:surface-200 transition-duration-150 transition-colors no-underline">
<i class="pi pi-list md:mr-2"></i>
<span class="font-medium hidden md:block">My Listings</span>
</a>
</li>
<li>
<a routerLink="/myFavorites" routerLinkActive="text-blue-500" pRipple class="flex align-items-center cursor-pointer p-3 border-round text-800 hover:surface-200 transition-duration-150 transition-colors no-underline">
<i class="pi pi-star md:mr-2"></i>
<span class="font-medium hidden md:block">My Favorites</span>
</a>
</li>
<li>
<a routerLink="/emailUs" routerLinkActive="text-blue-500" pRipple class="flex align-items-center cursor-pointer p-3 border-round text-800 hover:surface-200 transition-duration-150 transition-colors no-underline">
<fa-icon [icon]="faEnvelope" class="mr-2 flex"></fa-icon>
<span class="font-medium hidden md:block">Email Us</span>
</a>
</li>
<li>
<a (click)="userService.logout()" routerLinkActive="text-blue-500" pRipple class="flex align-items-center cursor-pointer p-3 border-round text-800 hover:surface-200 transition-duration-150 transition-colors no-underline">
<fa-icon [icon]="faRightFromBracket" class="mr-2 flex"></fa-icon>
<span class="font-medium hidden md:block">Logout</span>
</a>
</li>
</ul>
</div>
</div>

3
bizmatch/src/app/pages/menu-account/menu-account.component.scss Normal file
View File

@@ -0,0 +1,3 @@
ul {
text-wrap: nowrap;
}

43
bizmatch/src/app/pages/menu-account/menu-account.component.ts Normal file
View File

@@ -0,0 +1,43 @@
import { 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, KeyValue } 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 { TagModule } from 'primeng/tag';
import data from '../../../assets/data/listings.json';
import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { DividerModule } from 'primeng/divider';
import { RippleModule } from 'primeng/ripple';
import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { UserService } from '../../services/user.service';
@Component({
selector: 'menu-account',
standalone: true,
imports: [CommonModule, StyleClassModule, ButtonModule, DividerModule, RouterModule, RippleModule, FontAwesomeModule ],
templateUrl: './menu-account.component.html',
styleUrl: './menu-account.component.scss'
})
export class MenuAccountComponent {
activeLink: string;
faEnvelope=faEnvelope;
faRightFromBracket=faRightFromBracket;
constructor(private router: Router,public userService:UserService) {
// Abonniere Router-Events, um den aktiven Link zu ermitteln
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.activeLink = event.url;
}
});
}
}

6
bizmatch/src/app/pages/pages.scss Normal file
View File

@@ -0,0 +1,6 @@
.wrapper {
width: 1491px;
max-width: 100%;
height: 100%;
margin: auto;
}

85
bizmatch/src/app/pages/pricing/pricing.component.html Normal file
View File

@@ -0,0 +1,85 @@
<div class="container">
<div class="wrapper">
<div class="py-3 px-6 flex flex-column align-items-center justify-content-between relative">
<a routerLink="/home"><img src="../../../assets/images/header-logo.png" alt="Image" height="50" ></a>
<div class="px-4 py-8 md:px-6 lg:px-8 bg-no-repeat bg-cover" >
<div class="flex flex-wrap">
<div class="w-full lg:w-6 lg:pr-8">
<div class="text-900 font-bold text-6xl text-blue-900 mb-4">Pricing</div>
<div class="text-700 text-xl text-blue-600 line-height-3 mb-4 lg:mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velitnumquam eligendi quos.</div>
</div>
<div class="w-full md:w-6 lg:w-3">
<ul class="list-none p-0 m-0">
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
<i class="pi pi-check text-green-500 mr-3"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
<i class="pi pi-check text-green-500 mr-3"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
<i class="pi pi-check text-green-500 mr-3"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
</div>
<div class="w-full md:w-6 lg:w-3 md:pl-5">
<ul class="list-none p-0 m-0">
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
<i class="pi pi-check text-green-500 mr-3"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
<i class="pi pi-check text-green-500 mr-3"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
<i class="pi pi-check text-green-500 mr-3"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
</div>
</div>
<div class="flex flex-wrap mt-5 -mx-3">
<div class="w-full lg:w-4 p-3">
<div class="shadow-2 p-3 h-full bg-primary" style="border-radius: 6px">
<div class="font-medium text-xl mb-5">Free Forever</div>
<div class="font-bold text-5xl mb-5">Free</div>
<button (click)="register()" type="button" pRipple class="font-medium appearance-none border-none p-2 surface-0 text-primary hover:surface-100 p-component lg:w-full border-rounded cursor-pointer transition-colors transition-duration-150" style="border-radius: 6px">
<span>Create Account</span>
</button>
<p class="text-sm line-height-3 mb-0 mt-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="w-full lg:w-4 p-3">
<div class="shadow-2 p-3 h-full surface-card" style="border-radius: 6px">
<div class="font-medium text-xl mb-5 text-900 ">Monthly</div>
<div class="flex align-items-center mb-5">
<span class="text-900 font-bold text-5xl">$29</span>
<span class="font-medium text-500 ml-2">per month</span>
</div>
<button (click)="register()" pButton pRipple label="Proceed Monthly" icon="pi pi-arrow-right" iconPos="right" class="lg:w-full font-medium p-2" style="border-radius: 6px"></button>
<p class="text-sm line-height-3 mb-0 mt-5">Nec ultrices dui sapien eget. Amet nulla facilisi morbi tempus.</p>
</div>
</div>
<div class="w-full lg:w-4 p-3">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="flex flex-row justify-content-between mb-5 align-items-center">
<div class="text-900 text-xl font-medium">Yearly</div>
<span class="bg-orange-100 500 text-orange-500 font-semibold px-2 py-1 border-round">🎉 Save 20%</span>
</div>
<div class="flex align-items-center mb-5">
<span class="text-900 font-bold text-5xl">$275</span>
<span class="font-medium text-500 ml-2">per year</span>
</div>
<button (click)="register()" pButton pRipple label="Proceed Yearly" icon="pi pi-arrow-right" iconPos="right" class="lg:w-full font-medium p-2" style="border-radius: 6px"></button>
<p class="text-sm line-height-3 mb-0 mt-5">Placerat in egestas erat imperdiet sed euismod nisi porta.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

11
bizmatch/src/app/pages/pricing/pricing.component.scss Normal file
View File

@@ -0,0 +1,11 @@
:host {
height: 100%
}
.container {
background-image: url(../../../assets/images/index-bg.jpg), url(../../../assets/images/pricing-4.svg);
//background-image: url(../../../assets/images/corpusChristiSkyline.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}

17
bizmatch/src/app/pages/pricing/pricing.component.ts Normal file
View File

@@ -0,0 +1,17 @@
import { Component } from '@angular/core';
import { SharedModule } from '../../shared/shared/shared.module';
import { UserService } from '../../services/user.service';
@Component({
selector: 'app-pricing',
standalone: true,
imports: [SharedModule],
templateUrl: './pricing.component.html',
styleUrl: './pricing.component.scss'
})
export class PricingComponent {
constructor(private userService:UserService){}
register(){
this.userService.register(`${window.location.origin}/account`);
}
}

108
bizmatch/src/app/pages/subscription/account/account.component.html Normal file
View File

@@ -0,0 +1,108 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">Account Details</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
<div class="mb-4">
<label for="email" class="block font-medium text-900 mb-2">Username</label>
<input id="email" type="text" [disabled]="true" pInputText [(ngModel)]="user.username">
<p class="font-italic text-sm line-height-1">Usernames cannot be changed.</p>
</div>
<div class="mb-4">
<label for="state" class="block font-medium text-900 mb-2">First Name</label>
<input id="state" type="text" pInputText [(ngModel)]="user.firstname">
</div>
<div class="mb-4">
<label for="state" class="block font-medium text-900 mb-2">Last Name</label>
<input id="state" type="text" pInputText [(ngModel)]="user.lastname">
</div>
<div class="mb-4">
<label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label>
<input id="state" type="text" pInputText [(ngModel)]="user.email">
</div>
<div class="mb-4">
<label for="state" class="block font-medium text-900 mb-2">New Password</label>
<p class="font-italic text-sm line-height-1">If you would like to change the password type a new one. Otherwise leave this blank.</p>
<input id="state" type="text" pInputText>
<p class="font-italic text-sm line-height-1">Password repetition</p>
<input id="state" type="text" pInputText>
</div>
<div>
<button pButton pRipple label="Update Profile" class="w-auto" (click)="updateProfile(user)"></button>
</div>
</div>
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Profile Picture</span>
<img [src]="imageUrl" (error)="setImageToFallback($event)" class="rounded-image"/>
<!-- <p-image src="http://localhost:3000/public/user.png" alt="Image" width="10rem" [preview]="true"></p-image> -->
<!-- <button pButton type="button" icon="pi pi-pencil" class="p-button-rounded -mt-4"></button> -->
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUpload($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
</div>
</div>
<div class="text-900 font-semibold text-lg mt-3">Membership Level</div>
<p-divider></p-divider>
<p-table [value]="userSubscriptions" [tableStyle]="{ 'min-width': '50rem' }" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th style="width: 5rem"></th>
<th>ID</th>
<th>Level</th>
<th>Start Date</th>
<th>Date Modified</th>
<th>End Date</th>
<th>Status</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-subscription let-expanded="expanded">
<tr>
<td>
<button type="button" pButton pRipple [pRowToggler]="subscription" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td>{{ subscription.id }}</td>
<td>{{ subscription.level }}</td>
<td>{{ subscription.start | date }}</td>
<td>{{ subscription.modified | date }}</td>
<td>{{ subscription.end | date }}</td>
<td>{{ subscription.status }}</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-subscription>
<tr>
<td colspan="7">
<div class="p-3">
<p-table [value]="subscription.invoices" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th style="width: 5rem"></th>
<th>ID</th>
<th>Date</th>
<th>Price</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-invoice>
<tr>
<td>
<button pButton pRipple icon="pi pi-print" class="p-button-rounded p-button-success mr-2" (click)="printInvoice(invoice)"></button>
</td>
<td>{{ invoice.id }}</td>
<td>{{ invoice.date | date}}</td>
<td>{{ invoice.price | currency}}</td>
<td></td>
<td></td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</div>

9
bizmatch/src/app/pages/subscription/account/account.component.scss Normal file
View File

@@ -0,0 +1,9 @@
.rounded-image {
border-radius: 6px;
width: 120px;
height: 30px;
border: 1px solid #6b7280;
padding: 1px 1px;
object-fit: contain;
}

64
bizmatch/src/app/pages/subscription/account/account.component.ts Normal file
View File

@@ -0,0 +1,64 @@
import { 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, Invoice, KeyValue, Subscription, User } 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 { TagModule } from 'primeng/tag';
import { ActivatedRoute } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
import { HttpClient } from '@angular/common/http';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { SubscriptionsService } from '../../../services/subscriptions.service';
import { lastValueFrom } from 'rxjs';
import { MessageService } from 'primeng/api';
import { environment } from '../../../../environments/environment';
import { FileUploadModule } from 'primeng/fileupload';
@Component({
selector: 'app-account',
standalone: true,
// imports: [CommonModule, StyleClassModule, MenuAccountComponent, DividerModule,ButtonModule, TableModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule ],
imports: [SharedModule,FileUploadModule],
providers:[MessageService],
templateUrl: './account.component.html',
styleUrl: './account.component.scss'
})
export class AccountComponent {
user:User;
subscriptions:Array<Subscription>;
userSubscriptions:Array<Subscription>=[];
uploadUrl:string;
maxFileSize=1000000;
imageUrl:string;
constructor(public userService: UserService, private subscriptionService: SubscriptionsService,private messageService: MessageService) {
this.user=this.userService.getUser()
}
async ngOnInit(){
this.imageUrl = `${environment.apiBaseUrl}/profile_${this.user.id}`
this.userSubscriptions=await lastValueFrom(this.subscriptionService.getAllSubscriptions());
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/account/uploadPhoto/${this.user.id}`;
}
printInvoice(invoice:Invoice){}
updateProfile(user:User){
this.messageService.add({ severity: 'warn', summary: 'Information', detail: 'This function is not yet available, please send an email to info@bizmatch.net for changes to your customer data', life: 15000 });
}
onUpload(event:any){
const uniqueSuffix = '?_ts=' + new Date().getTime();
this.imageUrl = `${environment.apiBaseUrl}/profile_${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
}
setImageToFallback(event: Event) {
(event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
}
}

156
bizmatch/src/app/pages/subscription/edit-listing/edit-listing.component.html Normal file
View File

@@ -0,0 +1,156 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">{{mode==='create'?'New':'Edit'}} Listing</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
<div class="mb-4">
<label for="listingCategory" class="block font-medium text-900 mb-2">Listing category</label>
<p-dropdown id="listingCategory" [options]="selectOptions?.listingCategories" [(ngModel)]="listing.listingsCategory" optionLabel="name"
optionValue="value" placeholder="Listing category" [disabled]="mode==='edit'"
[style]="{ width: '100%'}"></p-dropdown>
</div>
<div class="mb-4">
<label for="email" class="block font-medium text-900 mb-2">Title of Listing</label>
<input id="email" type="text" pInputText [(ngModel)]="listing.title">
</div>
@if (listing.listingsCategory==='business' || listing.listingsCategory==='professionals_brokers'){
<div>
<div class="mb-4">
<label for="summary" class="block font-medium text-900 mb-2">Summary (Brief description)</label>
<textarea id="summary" type="text" pInputTextarea rows="5" [autoResize]="true" [ngModel]="listing.summary | arrayToString:'\n\n'" (ngModelChange)="updateSummary($event)"></textarea>
</div>
</div>
}
<div>
<div class="mb-4">
<label for="description" class="block font-medium text-900 mb-2">Description</label>
<textarea id="description" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.description"></textarea>
</div>
</div>
@if (listing.listingsCategory==='business'){
<div class="mb-4">
<label for="listingCategory" class="block font-medium text-900 mb-2">Type of business</label>
<p-dropdown id="listingCategory" [options]="selectOptions?.typesOfBusiness" [(ngModel)]="listing.type" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Type of business"
[style]="{ width: '100%'}"></p-dropdown>
</div>
}
<div class="mb-4">
<label for="listingCategory" class="block font-medium text-900 mb-2">Location</label>
<p-dropdown id="listingCategory" [options]="selectOptions?.locations" [(ngModel)]="listing.location" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Location"
[style]="{ width: '100%'}"></p-dropdown>
</div>
@if (listing.listingsCategory==='professionals_brokers'){
<div>
<div class="mb-4">
<label for="address" class="block font-medium text-900 mb-2">Address</label>
<input id="address" type="text" pInputText [(ngModel)]="listing.address">
</div>
</div>
}
@if (listing.listingsCategory==='professionals_brokers' || listing.listingsCategory==='investment'){
<div>
<div class="mb-4">
<label for="email" class="block font-medium text-900 mb-2">Email</label>
<input id="address" type="text" pInputText [(ngModel)]="listing.email">
</div>
</div>
<div>
<div class="mb-4">
<label for="website" class="block font-medium text-900 mb-2">Website</label>
<input id="address" type="text" pInputText [(ngModel)]="listing.website">
</div>
</div>
}
@if (listing.listingsCategory==='professionals_brokers'){
<div class="mb-4">
<label for="category" class="block font-medium text-900 mb-2">Category</label>
<p-dropdown id="category" [options]="selectOptions?.categories" [(ngModel)]="listing.category" optionLabel="name"
optionValue="value" [showClear]="true" placeholder="Category"
[style]="{ width: '100%'}"></p-dropdown>
</div>
}
@if (listing.listingsCategory==='investment'){
<div>
<div class="mb-4">
<label for="phoneNumber" class="block font-medium text-900 mb-2">Phone Number</label>
<input id="phoneNumber" type="text" pInputText [(ngModel)]="listing.phoneNumber">
</div>
</div>
}
</div>
</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
@if (listing.listingsCategory==='business'){
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="price" class="block font-medium text-900 mb-2">Price</label>
<!-- <input id="price" type="text" pInputText [(ngModel)]="listing.price"> -->
<p-inputNumber mode="currency" currency="USD" inputId="price" type="text" [(ngModel)]="listing.price"></p-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6 flex align-items-end justify-content-center">
<p-checkbox [binary]="true" [(ngModel)]="listing.realEstateIncluded"></p-checkbox>
<span class="ml-2 text-900">Real Estate Included</span>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="salesRevenue" class="block font-medium text-900 mb-2">Sales Revenue</label>
<!-- <input id="salesRevenue" type="text" pInputText [(ngModel)]="listing.salesRevenue"> -->
<p-inputNumber mode="currency" currency="USD" inputId="salesRevenue" type="text" [(ngModel)]="listing.salesRevenue"></p-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="cashFlow" class="block font-medium text-900 mb-2">Cash Flow</label>
<!-- <input id="cashFlow" type="text" pInputText [(ngModel)]="listing.cashFlow"> -->
<p-inputNumber mode="currency" currency="USD" inputId="cashFlow" type="text" [(ngModel)]="listing.cashFlow"></p-inputNumber>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="netProfit" class="block font-medium text-900 mb-2">Net Profit</label>
<!-- <input id="netProfit" type="text" pInputText [(ngModel)]="listing.netProfit"> -->
<p-inputNumber mode="currency" currency="USD" inputId="netProfit" type="text" [(ngModel)]="listing.netProfit"></p-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="employees" class="block font-medium text-900 mb-2">Employees</label>
<!-- <input id="employees" type="text" pInputText [(ngModel)]="listing.employees"> -->
<p-inputNumber mode="employees" mode="decimal" inputId="employees" type="text" [(ngModel)]="listing.employees"></p-inputNumber>
</div>
</div>
<div class="mb-4">
<label for="inventory" class="block font-medium text-900 mb-2">Inventory</label>
<textarea id="inventory" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.inventory"></textarea>
</div>
<div class="mb-4">
<label for="reasonForSale" class="block font-medium text-900 mb-2">Reason for Sale</label>
<textarea id="reasonForSale" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.reasonForSale"></textarea>
</div>
<div class="mb-4">
<label for="brokerLicensing" class="block font-medium text-900 mb-2">Broker Licensing</label>
<input id="brokerLicensing" type="text" pInputText [(ngModel)]="listing.brokerLicencing">
</div>
<div class="mb-4">
<label for="internalListing" class="block font-medium text-900 mb-2">Internal Listing (Will not be shown on the listing, for your records only.)</label>
<input id="internalListing" type="text" pInputText [(ngModel)]="listing.internals">
</div>
}
<div>
@if (mode==='create'){
<button pButton pRipple label="Post Listing" class="w-auto" (click)="create()"></button>
} @else {
<button pButton pRipple label="Update Listing" class="w-auto" (click)="update(listing.id)"></button>
}
</div>
</div>
</div>
</div>
</div>
</div>

0
bizmatch/src/app/pages/subscription/edit-listing/edit-listing.component.scss Normal file
View File

77
bizmatch/src/app/pages/subscription/edit-listing/edit-listing.component.ts Normal file
View File

@@ -0,0 +1,77 @@
import { 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, Invoice, KeyValue, ProfessionalsBrokersListing, User } 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 { TagModule } from 'primeng/tag';
import data from '../../../../assets/data/user.json';
import dataListings from '../../../../assets/data/listings.json';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
import { createGenericObject } from '../../../utils/utils';
import { ListingsService } from '../../../services/listings.service';
import { lastValueFrom } from 'rxjs';
import { InputNumberModule } from 'primeng/inputnumber';
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { MessageService } from 'primeng/api';
@Component({
selector: 'create-listing',
standalone: true,
imports: [SharedModule,ArrayToStringPipe],
providers:[MessageService],
templateUrl: './edit-listing.component.html',
styleUrl: './edit-listing.component.scss'
})
export class EditListingComponent {
listingCategory:'Business'|'Professionals/Brokers Directory'|'Investment Property';
category:string;
location:string;
mode:'edit'|'create';
separator:'\n\n'
listing:BusinessListing|ProfessionalsBrokersListing|InvestmentsListing = createGenericObject<BusinessListing>();
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user:User;
constructor(public selectOptions:SelectOptionsService,private router: Router,private activatedRoute: ActivatedRoute,private listingsService:ListingsService,public userService: UserService,private messageService: MessageService){
this.user=this.userService.getUser();
// Abonniere Router-Events, um den aktiven Link zu ermitteln
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.mode = event.url==='/createListing'?'create':'edit';
}
});
}
async ngOnInit(){
if (this.mode==='edit'){
this.listing=await lastValueFrom(this.listingsService.getListingById(this.id));
} else {
this.listing=createGenericObject<BusinessListing>();
this.listing.userId=this.user.id
this.listing.listingsCategory='business';
}
}
updateSummary(value: string): void {
const lines = value.split('\n');
(<BusinessListing>this.listing).summary = lines.filter(l=>l.trim().length>0);
}
async update(id:string){
await this.listingsService.update(this.listing,this.listing.id);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing has been updated', life: 3000 });
}
async create(){
await this.listingsService.create(this.listing);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing has been created', life: 3000 });
}
}

35
bizmatch/src/app/pages/subscription/email-us/email-us.component.html Normal file
View File

@@ -0,0 +1,35 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">Contact Us</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid">
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="name" class="block font-medium text-900 mb-2">Your name</label>
<input id="name" type="text" pInputText>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="email" class="block font-medium text-900 mb-2">Your Email</label>
<input id="email" type="text" pInputText>
</div>
</div>
<div class="mb-4">
<label for="phone" class="block font-medium text-900 mb-2">Your Phone</label>
<input id="phone" type="text" pInputText>
</div>
<div class="mb-4">
<label for="help" class="block font-medium text-900 mb-2">How can we help you ?</label>
<textarea id="help" type="text" pInputTextarea rows="5" [autoResize]="true"></textarea>
</div>
<div>
<button pButton pRipple label="Submit" class="w-auto"></button>
</div>
</div>
</div>
</div>
</div>
</div>

0
bizmatch/src/app/pages/subscription/email-us/email-us.component.scss Normal file
View File

29
bizmatch/src/app/pages/subscription/email-us/email-us.component.ts Normal file
View File

@@ -0,0 +1,29 @@
import { 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, Invoice, KeyValue, User } 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 { TagModule } from 'primeng/tag';
import data from '../../../../assets/data/user.json';
import { ActivatedRoute } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
@Component({
selector: 'app-email-us',
standalone: true,
imports: [CommonModule, StyleClassModule, MenuAccountComponent, DividerModule,ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule],
templateUrl: './email-us.component.html',
styleUrl: './email-us.component.scss'
})
export class EmailUsComponent {
}

30
bizmatch/src/app/pages/subscription/favorites/favorites.component.html Normal file
View File

@@ -0,0 +1,30 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">My Favorites</div>
<p-divider></p-divider>
<p-table [value]="favorites" [tableStyle]="{ 'min-width': '50rem' }" dataKey="id" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[10, 20, 50]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
<ng-template pTemplate="header">
<tr>
<th class="wide-column">Title</th>
<th>Category</th>
<th>Located in</th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-listing>
<tr>
<td class="wide-column line-height-3">{{ listing.title }}</td>
<td>{{ selectOptions.getListingsCategory(listing.listingsCategory) }}</td>
<td>{{ selectOptions.getLocation(listing.location) }}</td>
<td>
<button pButton pRipple icon="pi pi-eye" class="p-button-rounded p-button-success mr-2" [routerLink]="['/details',listing.id]"></button>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</div>

3
bizmatch/src/app/pages/subscription/favorites/favorites.component.scss Normal file
View File

@@ -0,0 +1,3 @@
.wide-column{
width: 40%;
}

29
bizmatch/src/app/pages/subscription/favorites/favorites.component.ts Normal file
View File

@@ -0,0 +1,29 @@
import { Component } from '@angular/core';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import dataListings from '../../../../assets/data/listings.json';
import { BusinessListing, User } from '../../../models/main.model';
import { SharedModule } from '../../../shared/shared/shared.module';
import { UserService } from '../../../services/user.service';
import { lastValueFrom } from 'rxjs';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
@Component({
selector: 'app-favorites',
standalone: true,
imports: [MenuAccountComponent, SharedModule],
templateUrl: './favorites.component.html',
styleUrl: './favorites.component.scss'
})
export class FavoritesComponent {
user: User;
listings: Array<BusinessListing> //= dataListings as unknown as Array<BusinessListing>;
favorites: Array<BusinessListing>
constructor(public userService: UserService, private listingsService:ListingsService, public selectOptions:SelectOptionsService){
this.user=this.userService.getUser();
}
async ngOnInit(){
this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.favorites=this.listings.filter(l=>l.favoritesForUser?.includes(this.user.id));
}
}

33
bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html Normal file
View File

@@ -0,0 +1,33 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
<p-confirmPopup></p-confirmPopup>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">My Listings</div>
<p-divider></p-divider>
<p-table [value]="myListings" [tableStyle]="{ 'min-width': '50rem' }" dataKey="id" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[10, 20, 50]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
<ng-template pTemplate="header">
<tr>
<th class="wide-column">Title</th>
<th>Category</th>
<th>Located in</th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-listing>
<tr>
<td class="wide-column line-height-3">{{ listing.title }}</td>
<td>{{ selectOptions.getListingsCategory(listing.listingsCategory) }}</td>
<td>{{ selectOptions.getLocation(listing.location) }}</td>
<td>
<button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" [routerLink]="['/editListing',listing.id]"></button>
<button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="confirm($event,listing)"></button>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</div>

3
bizmatch/src/app/pages/subscription/my-listing/my-listing.component.scss Normal file
View File

@@ -0,0 +1,3 @@
.wide-column{
width: 40%;
}

49
bizmatch/src/app/pages/subscription/my-listing/my-listing.component.ts Normal file
View File

@@ -0,0 +1,49 @@
import { ChangeDetectorRef, Component } from '@angular/core';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import dataListings from '../../../../assets/data/listings.json';
import { BusinessListing, ListingType, User } from '../../../models/main.model';
import { SharedModule } from '../../../shared/shared/shared.module';
import { UserService } from '../../../services/user.service';
import { ListingsService } from '../../../services/listings.service';
import { lastValueFrom } from 'rxjs';
import { SelectOptionsService } from '../../../services/select-options.service';
import { ConfirmationService, MessageService } from 'primeng/api';
@Component({
selector: 'app-my-listing',
standalone: true,
imports: [MenuAccountComponent, SharedModule],
providers:[ConfirmationService,MessageService],
templateUrl: './my-listing.component.html',
styleUrl: './my-listing.component.scss'
})
export class MyListingComponent {
user: User;
listings: Array<BusinessListing> //dataListings as unknown as Array<BusinessListing>;
myListings: Array<BusinessListing>
constructor(public userService: UserService,private listingsService:ListingsService, private cdRef:ChangeDetectorRef,public selectOptions:SelectOptionsService,private confirmationService: ConfirmationService,private messageService: MessageService){
this.user=this.userService.getUser();
}
async ngOnInit(){
this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.myListings=this.listings.filter(l=>l.userId===this.user.id);
}
async deleteListing(listing:ListingType){
await this.listingsService.deleteListing(listing.id);
this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.myListings=this.listings.filter(l=>l.userId===this.user.id);
}
confirm(event: Event,listing:ListingType) {
this.confirmationService.confirm({
target: event.target as EventTarget,
message: 'Are you sure you want to delet this listing?',
icon: 'pi pi-exclamation-triangle',
accept: () => {
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing has been deleted', life: 3000 });
this.deleteListing(listing);
}
});
}
}