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

show all listings, Bug Fixes

Browse Source
This commit is contained in:
Andreas Knuth
2024-05-09 16:10:01 +02:00
parent 6b61c19bd7
commit d508415de4
29 changed files with 810 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
bizmatch/src/app/pages/home/home.component.html
View File

@@ -27,25 +27,25 @@
<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-user" (click)="changeTab('business')" label="Businesses" [ngClass]="{ 'p-button-text text-700': activeTabAction !== 'business' }"></button></li>
<li>
<button
pButton
pRipple
icon="pi pi-shield"
(click)="activeTabAction = 'commercialProperty'"
(click)="changeTab('commercialProperty')"
label="Commercial Property"
[ngClass]="{ 'p-button-text text-700': activeTabAction != 'commercialProperty' }"
></button>
</li>
<li>
<button pButton pRipple icon="pi pi-globe" (click)="activeTabAction = 'broker'" label="Professionals/Brokers Directory" [ngClass]="{ 'p-button-text text-700': activeTabAction != 'broker' }"></button>
<button pButton pRipple icon="pi pi-globe" (click)="changeTab('broker')" label="Professionals/Brokers Directory" [ngClass]="{ 'p-button-text text-700': activeTabAction != 'broker' }"></button>
</li>
</ul>
</div>
<div class="mt-5">
<div [ngClass]="{ 'mt-5': activeTabAction === 'business', 'mt-11': activeTabAction === 'commercialProperty', 'mt-22': activeTabAction === 'broker' }">
<div class="flex flex-column align-items-right gap-3 px-2 py-3 my-3 surface-border">
<p-dropdown [options]="selectOptions.states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '200px' }"></p-dropdown>
<p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '200px' }"></p-dropdown>
@if(activeTabAction === 'business'){
<p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Category" [style]="{ width: '200px' }"></p-dropdown>
} @if(activeTabAction === 'commercialProperty'){
@@ -61,10 +61,8 @@
} @if(activeTabAction === 'business' || activeTabAction === 'commercialProperty'){
<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>
} @else {
<div style="height: 46px">&nbsp;</div>
}
<button pButton pRipple label="Find" class="ml-3 font-bold" [style]="{ width: '170px' }" (click)="search()"></button>
<button pButton pRipple label="Find" class="ml-3 font-bold" [style]="{ width: '200px' }" (click)="search()"></button>
</div>
</div>
</div>

6
bizmatch/src/app/pages/home/home.component.scss
View File

@@ -16,3 +16,9 @@
.p-button-white {
color: aliceblue;
}
.mt-11 {
margin-top: 5.9rem !important;
}
.mt-22 {
margin-top: 9.7rem !important;
}

27
bizmatch/src/app/pages/home/home.component.ts
View File

@@ -11,6 +11,7 @@ import { StyleClassModule } from 'primeng/styleclass';
import { Observable } from 'rxjs';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { ListingsService } from '../../services/listings.service';
import { SelectOptionsService } from '../../services/select-options.service';
import { UserService } from '../../services/user.service';
import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from '../../utils/utils';
@@ -22,22 +23,38 @@ import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from
styleUrl: './home.component.scss',
})
export class HomeComponent {
activeTabAction = 'business';
activeTabAction: 'business' | 'commercialProperty' | 'broker' = 'business';
type: string;
maxPrice: string;
minPrice: string;
criteria: ListingCriteria;
user$: Observable<User>;
public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public userService: UserService) {
states = [];
public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public userService: UserService, private listingsService: ListingsService) {
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
resetCriteria(this.criteria);
}
ngOnInit() {
async ngOnInit() {
this.user$ = this.userService.getUserObservable();
if (this.activeTabAction === 'business' || this.activeTabAction === 'commercialProperty') {
const statesResult = await this.listingsService.getAllStates(this.activeTabAction);
this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
} else {
this.states = [];
}
}
async changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {
this.activeTabAction = tabname;
if (this.activeTabAction === 'business' || this.activeTabAction === 'commercialProperty') {
const statesResult = await this.listingsService.getAllStates(this.activeTabAction);
this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
} else {
this.states = this.selectOptions.states;
}
}
search() {
this.router.navigate([`${this.activeTabAction}Listings`]);
const data = { keep: true };
this.router.navigate([`${this.activeTabAction}Listings`], { state: { data } });
}
login() {