initial release

bizmatch/src/app/components/footer/footer.component.html

@@ -0,0 +1,27 @@
+<div class="surface-0 px-4 py-4 md:px-6 lg:px-8">
+    <div class="surface-0">
+        <div class="grid">
+            <div class="col-12 md:col-3 md:mb-0 mb-3">
+                <img src="assets/images/header-logo.png" alt="footer sections" height="30" class="mr-3">
+                <div class="text-500">© 2024 Bizmatch All rights reserved.</div>
+                <!-- <div class="text-gray-300 font-bold text-5xl">Bastion</div> -->
+            </div>
+            <div class="col-12 md:col-3">
+                <div class="text-black mb-4 flex flex-wrap" style="max-width: 290px">BizMatch, Inc., 1001 Blucher Street, Corpus Christi, Texas 78401</div>
+                <div class="text-black mb-3"><i class="text-white pi pi-phone surface-800 border-round p-1 mr-2"></i>1-800-840-6025</div>
+                <div class="text-black mb-3"><i class="text-white pi pi-inbox surface-800 border-round p-1 mr-2"></i>bizmatch&#64;biz-match.com</div>
+            </div>
+            <div class="col-12 md:col-3 text-500">
+                <div class="text-black font-bold line-height-3 mb-3">Legal</div>
+                <a class="line-height-3 block cursor-pointer mb-2">Terms of use</a>
+                <a class="line-height-3 block cursor-pointer mb-2">Privacy statement</a>
+            </div>
+            <div class="col-12 md:col-3 text-500">
+                <div class="text-black font-bold line-height-3 mb-3">Actions</div>
+                <a *ngIf="!userService.isLoggedIn()" (click)="login()"  class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Login</a>
+                <a *ngIf="userService.isLoggedIn()" [routerLink]="['/account']"  class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Account</a>
+                <a *ngIf="userService.isLoggedIn()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline" (click)="userService.logout()">Log Out</a>
+            </div>
+        </div>
+    </div>
+</div>

bizmatch/src/app/components/footer/footer.component.scss

@@ -0,0 +1,6 @@
+:host{
+    height: 192px;
+}
+div {
+    font-size: small;
+}

bizmatch/src/app/components/footer/footer.component.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+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 { KeyValue } from '../../models/main.model';
+import { DropdownModule } from 'primeng/dropdown';
+import { FormsModule } from '@angular/forms';
+import { UserService } from '../../services/user.service';
+import { SharedModule } from '../../shared/shared/shared.module';
+
+
+@Component({
+  selector: 'footer',
+  standalone: true,
+  imports: [SharedModule],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
+})
+export class FooterComponent {
+  constructor(public userService:UserService){}
+  login(){
+		this.userService.login(window.location.href);
+	}
+}

bizmatch/src/app/components/header/header.component.html

@@ -0,0 +1,11 @@
+<div class="wrapper">
+	<div class="pl-3 flex align-items-center gap-2">
+		<a routerLink="/home"><img src="assets/images/header-logo.png" height="40" alt="bizmatch" /></a>
+		<p-tabMenu [model]="tabItems" ariaLabelledBy="label" styleClass="flex" [activeItem]="activeItem">
+		</p-tabMenu>
+		<p-menubar [model]="menuItems"></p-menubar>
+		<div *ngIf="user$ | async as user else empty">Welcome, {{user.firstname}}</div>
+		<ng-template #empty>		
+		</ng-template>
+	</div>
+</div>

bizmatch/src/app/components/header/header.component.scss

@@ -0,0 +1,13 @@
+::ng-deep p-menubarsub{
+    margin-left: auto;
+}
+::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link{
+    border:1px solid #ffffff;
+}
+::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    border-bottom: 2px solid #3B82F6 !important;
+}
+::ng-deep .p-menubar{
+    border:unset;
+    background: unset;
+}

bizmatch/src/app/components/header/header.component.ts

@@ -0,0 +1,115 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { MenubarModule } from 'primeng/menubar';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { environment } from '../../../environments/environment';
+import { UserService } from '../../services/user.service';
+import { User } from '../../models/main.model';
+import { TabMenuModule } from 'primeng/tabmenu';
+import { Observable } from 'rxjs';
+import { faUserGear } from '@fortawesome/free-solid-svg-icons';
+import { Router } from '@angular/router';
+
+@Component({
+	selector: 'header',
+	standalone: true,
+	imports: [CommonModule, MenubarModule, ButtonModule, OverlayPanelModule, TabMenuModule ],
+	templateUrl: './header.component.html',
+	styleUrl: './header.component.scss'
+})
+export class HeaderComponent {
+	public buildVersion = environment.buildVersion;
+	user:User;
+	user$:Observable<User>
+	public tabItems: MenuItem[];
+	public menuItems: MenuItem[];
+	activeItem
+	faUserGear=faUserGear
+	constructor(public userService: UserService,private router: Router) {
+		
+	}
+
+	ngOnInit(){
+		this.user$=this.userService.getUserObservable();
+		this.tabItems = [
+			{
+				label: 'Businesses for Sale',
+				routerLink: '/listings/business',
+				fragment:''
+			},
+			{
+				label: 'Professionals/Brokers Directory',
+				routerLink: '/listings/professionals_brokers',
+				fragment:''
+			},
+			{
+				label: 'Investment Property',
+				routerLink: '/listings/investment',
+				fragment:''
+			}
+		];
+		this.menuItems = [
+			{
+                label: 'User Actions',
+                icon: 'fas fa-cog',
+                items: [
+					{
+                        label: 'Account',
+                        icon: 'pi pi-user',
+						routerLink: '/account',
+						visible: this.isUserLoogedIn()
+                    },
+                    {
+                        label: 'Create Listing',
+                        icon: 'pi pi-plus-circle',
+						routerLink: "/createListing",
+						visible: this.isUserLoogedIn()
+                    },
+					{
+                        label: 'My Listings',
+                        icon: 'pi pi-list',
+						routerLink:"/myListings",
+						visible: this.isUserLoogedIn()
+                    },
+					{
+                        label: 'My Favorites',
+                        icon: 'pi pi-star',
+						routerLink:"/myFavorites",
+						visible: this.isUserLoogedIn()
+                    },
+					{
+                        label: 'EMail Us',
+                        icon: 'fa-regular fa-envelope',
+						routerLink:"/emailUs",
+						visible: this.isUserLoogedIn()
+                    },
+					{
+                        label: 'Logout',
+                        icon: 'fa-solid fa-right-from-bracket',
+						routerLink:"/logout",
+						visible: this.isUserLoogedIn()
+                    },
+					{
+                        label: 'Login',
+                        icon: 'fa-solid fa-right-from-bracket',
+						//routerLink:"/account",
+						command: () => this.login(),
+						visible: !this.isUserLoogedIn()
+                    },
+				]
+			}
+		]
+		this.activeItem=this.tabItems[0];
+	}
+	navigateWithState(dest: string, state: any) {
+		this.router.navigate([dest], { state: state });
+	}
+	isUserLoogedIn(){
+		return this.userService?.isLoggedIn();
+	}
+	login(){
+		this.userService.login(window.location.href);
+	}
+}

bizmatch/src/app/components/logout/logout.component.html

@@ -0,0 +1 @@
+<p>logout works!</p>

bizmatch/src/app/components/logout/logout.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { UserService } from '../../services/user.service';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'logout',
+  standalone: true,
+  imports: [CommonModule,RouterModule],
+  template:``
+})
+export class LogoutComponent {
+  constructor(private userService:UserService){
+    userService.logout();
+  }
+}