format on save, resolve compile errors, functionality 1. stage
This commit is contained in:
@@ -1,75 +1,68 @@
|
||||
<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>
|
||||
<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">
|
||||
@if(userService.isLoggedIn()){
|
||||
<p-button label="Account" class="ml-3 font-bold" [outlined]="true" severity="secondary" [routerLink]="['/account',(user$|async)?.id]"></p-button>
|
||||
} @else {
|
||||
<p-button label="Log In" class="ml-3 font-bold" [outlined]="true" severity="secondary" (click)="login()"></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 = 'commercialProperty'"
|
||||
label="Commercial Property"
|
||||
[ngClass]="{'p-button-text text-700': activeTabAction != 'commercialProperty'}"></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 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>
|
||||
<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">
|
||||
@if(userService.isLoggedIn()){
|
||||
<p-button label="Account" class="ml-3 font-bold" [outlined]="true" severity="secondary" [routerLink]="['/account']"></p-button>
|
||||
} @else {
|
||||
<p-button label="Log In" class="ml-3 font-bold" [outlined]="true" severity="secondary" (click)="login()"></p-button>
|
||||
}
|
||||
</div>
|
||||
</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 = 'broker'" label="Professionals/Brokers Directory" [ngClass]="{ 'p-button-text text-700': activeTabAction != 'broker' }"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
pButton
|
||||
pRipple
|
||||
icon="pi pi-shield"
|
||||
(click)="activeTabAction = 'commercialProperty'"
|
||||
label="Commercial Property"
|
||||
[ngClass]="{ 'p-button-text text-700': activeTabAction != 'commercialProperty' }"
|
||||
></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>
|
||||
|
||||
@@ -1,47 +1,45 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { Component } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import onChange from 'on-change';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
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 { SelectOptionsService } from '../../services/select-options.service';
|
||||
import { UserService } from '../../services/user.service';
|
||||
import onChange from 'on-change';
|
||||
import { getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
|
||||
import { User } from '../../../../../bizmatch-server/src/models/db.model';
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
standalone: true,
|
||||
imports: [CommonModule, StyleClassModule,ButtonModule, CheckboxModule,InputTextModule,DropdownModule,FormsModule, RouterModule],
|
||||
imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, RouterModule],
|
||||
templateUrl: './home.component.html',
|
||||
styleUrl: './home.component.scss'
|
||||
styleUrl: './home.component.scss',
|
||||
})
|
||||
export class HomeComponent {
|
||||
activeTabAction = '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) {
|
||||
this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
|
||||
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) {
|
||||
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
|
||||
}
|
||||
ngOnInit(){
|
||||
this.user$=this.userService.getUserObservable();
|
||||
ngOnInit() {
|
||||
this.user$ = this.userService.getUserObservable();
|
||||
}
|
||||
|
||||
search(){
|
||||
this.router.navigate([`listings/${this.activeTabAction}`])
|
||||
search() {
|
||||
this.router.navigate([`${this.activeTabAction}Listings`]);
|
||||
}
|
||||
|
||||
|
||||
login(){
|
||||
this.userService.login(window.location.href);
|
||||
}
|
||||
}
|
||||
login() {
|
||||
this.userService.login(window.location.href);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user