Umbau: header & businessListing
This commit is contained in:
@@ -25,7 +25,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<footer class="bg-white py-6 px-4 md:px-6 mt-auto">
|
||||
|
||||
<footer class="bg-white px-4 py-2 md:px-6 mt-auto w-full">
|
||||
<div class="container mx-auto flex flex-col lg:flex-row justify-between items-center">
|
||||
<div class="flex flex-col lg:flex-row items-center mb-4 lg:mb-0">
|
||||
<img src="assets/images/header-logo.png" alt="BizMatch Logo" class="h-8 mb-2 lg:mb-0 lg:mr-4" />
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
:host {
|
||||
height: 192px;
|
||||
// position: absolute;
|
||||
// bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
div {
|
||||
font-size: small;
|
||||
@@ -12,7 +14,7 @@ div {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
p {
|
||||
section p {
|
||||
display: block;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
|
||||
@@ -16,13 +16,4 @@ export class FooterComponent {
|
||||
ngOnInit() {
|
||||
initFlowbite();
|
||||
}
|
||||
// constructor(public keycloakService: KeycloakService) {}
|
||||
// login() {
|
||||
// this.keycloakService.login({
|
||||
// redirectUri: window.location.href,
|
||||
// });
|
||||
// }
|
||||
// register() {
|
||||
// this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
|
||||
// }
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="wrapper">
|
||||
<!-- <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>
|
||||
@@ -9,4 +9,100 @@
|
||||
}
|
||||
<ng-template #empty> </ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
||||
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||
<a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
|
||||
<img src="assets/images/header-logo.png" class="h-8" alt="Flowbite Logo" />
|
||||
</a>
|
||||
<div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||
<button
|
||||
type="button"
|
||||
class="flex text-sm bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
[attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'"
|
||||
data-dropdown-placement="bottom"
|
||||
>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
@if(user){
|
||||
<img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="user photo" />
|
||||
} @else {
|
||||
<i class="flex justify-center items-center text-stone-50 w-8 h-8 rounded-full fa-solid fa-bars"></i>
|
||||
}
|
||||
</button>
|
||||
<!-- Dropdown menu -->
|
||||
@if(user){
|
||||
<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-login">
|
||||
<div class="px-4 py-3">
|
||||
<span class="block text-sm text-gray-900 dark:text-white">Welcome, {{ user.firstName }} </span>
|
||||
<span class="block text-sm text-gray-500 truncate dark:text-gray-400">{{ user.email }}</span>
|
||||
</div>
|
||||
<ul class="py-2" aria-labelledby="user-menu-button">
|
||||
<li>
|
||||
<a routerLink="/account" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Account</a>
|
||||
</li>
|
||||
<li>
|
||||
<a routerLink="/createBusinessListing" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Create Listing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a routerLink="/myListings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Listings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a routerLink="/emailUs" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">EMail Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a routerLink="/logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Logout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-unknown">
|
||||
<ul class="py-2" aria-labelledby="user-menu-button">
|
||||
<li>
|
||||
<a (click)="login()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="register()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
<button
|
||||
data-collapse-toggle="navbar-user"
|
||||
type="button"
|
||||
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
aria-controls="navbar-user"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
|
||||
<ul
|
||||
class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
|
||||
>
|
||||
<li>
|
||||
<a class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">Businesses</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>Properties</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>Professionals</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { faUserGear } from '@fortawesome/free-solid-svg-icons';
|
||||
import { initFlowbite } from 'flowbite';
|
||||
import { KeycloakService } from 'keycloak-angular';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
@@ -33,92 +34,13 @@ export class HeaderComponent {
|
||||
async ngOnInit() {
|
||||
const token = await this.keycloakService.getToken();
|
||||
this.user = map2User(token);
|
||||
//this.user$ = this.keycloakService
|
||||
// this.user$.subscribe(u => {
|
||||
// this.user = u;
|
||||
this.menuItems = [
|
||||
{
|
||||
label: 'User Actions',
|
||||
icon: 'fas fa-cog',
|
||||
items: [
|
||||
{
|
||||
label: 'Account',
|
||||
icon: 'pi pi-user',
|
||||
routerLink: `/account`,
|
||||
visible: this.keycloakService.isLoggedIn(),
|
||||
},
|
||||
{
|
||||
label: 'Create Listing',
|
||||
icon: 'pi pi-plus-circle',
|
||||
routerLink: '/createBusinessListing',
|
||||
visible: this.keycloakService.isLoggedIn(),
|
||||
},
|
||||
{
|
||||
label: 'My Listings',
|
||||
icon: 'pi pi-list',
|
||||
routerLink: '/myListings',
|
||||
visible: this.keycloakService.isLoggedIn(),
|
||||
},
|
||||
{
|
||||
label: 'My Favorites',
|
||||
icon: 'pi pi-star',
|
||||
routerLink: '/myFavorites',
|
||||
visible: this.keycloakService.isLoggedIn(),
|
||||
},
|
||||
{
|
||||
label: 'EMail Us',
|
||||
icon: 'fa-regular fa-envelope',
|
||||
routerLink: '/emailUs',
|
||||
visible: this.keycloakService.isLoggedIn(),
|
||||
},
|
||||
{
|
||||
label: 'Logout',
|
||||
icon: 'fa-solid fa-right-from-bracket',
|
||||
routerLink: '/logout',
|
||||
visible: this.keycloakService.isLoggedIn(),
|
||||
},
|
||||
{
|
||||
label: 'Login',
|
||||
icon: 'fa-solid fa-right-from-bracket',
|
||||
command: () => this.login(),
|
||||
visible: !this.keycloakService.isLoggedIn(),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
// });
|
||||
this.tabItems = [
|
||||
{
|
||||
label: 'Businesses for Sale',
|
||||
routerLink: '/businessListings',
|
||||
state: {},
|
||||
},
|
||||
{
|
||||
label: 'Commercial Property',
|
||||
routerLink: '/commercialPropertyListings',
|
||||
state: {},
|
||||
},
|
||||
{
|
||||
label: 'Professionals/Brokers Directory',
|
||||
routerLink: '/brokerListings',
|
||||
state: {},
|
||||
},
|
||||
];
|
||||
this.loginItems = [
|
||||
{
|
||||
label: 'Login',
|
||||
command: () => this.login(),
|
||||
visible: !this.keycloakService.isLoggedIn(),
|
||||
},
|
||||
{
|
||||
label: 'Register',
|
||||
command: () => this.register(),
|
||||
visible: !this.keycloakService.isLoggedIn(),
|
||||
},
|
||||
];
|
||||
this.activeItem = this.tabItems[0];
|
||||
setTimeout(() => {
|
||||
initFlowbite();
|
||||
});
|
||||
}
|
||||
|
||||
ngAfterViewInit() {}
|
||||
|
||||
navigateWithState(dest: string, state: any) {
|
||||
this.router.navigate([dest], { state: state });
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user