141 lines
3.7 KiB
TypeScript
141 lines
3.7 KiB
TypeScript
import {animate, state, style, transition, trigger,} from '@angular/animations';
|
|
import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewContainerRef,} from '@angular/core';
|
|
import {faQuestionCircle, faSignIn, faSignOutAlt, faUser,} from '@fortawesome/free-solid-svg-icons';
|
|
import {Subscription} from 'rxjs';
|
|
import {AuthService} from 'src/app/shared/service/auth.service';
|
|
import {User} from '../../shared/model/user/user.model';
|
|
import {IconDefinition} from "@fortawesome/free-regular-svg-icons";
|
|
import {Value} from "@sinclair/typebox/value";
|
|
|
|
@Component({
|
|
selector: 'app-header-dropdown',
|
|
templateUrl: './header-dropdown.component.html',
|
|
styleUrls: ['./header-dropdown.component.css'],
|
|
animations: [
|
|
trigger('dropdownState', [
|
|
state('hide', style({
|
|
opacity: '0',
|
|
})),
|
|
state('show', style({
|
|
opacity: '1',
|
|
})),
|
|
transition('hide => show', animate('20ms ease-in')),
|
|
transition('show => hide', animate('5ms ease-out')),
|
|
]),
|
|
],
|
|
standalone: false
|
|
})
|
|
export class HeaderDropdownComponent implements OnInit, OnDestroy {
|
|
mainOptions: { text: string, icon: IconDefinition, callback: () => void }[] = [
|
|
{
|
|
text: 'Login',
|
|
icon: faUser,
|
|
callback: () => this.onLoginOptionClicked(),
|
|
},
|
|
{
|
|
text: 'Sign Up',
|
|
icon: faSignIn,
|
|
callback: () => this.onSignUpOptionClick(),
|
|
},
|
|
{
|
|
text: 'Help',
|
|
icon: faQuestionCircle,
|
|
callback: () => this.onHelpClicked(),
|
|
}
|
|
];
|
|
|
|
userOptions: { text: string, icon: IconDefinition, callback: () => void }[] = [
|
|
{
|
|
text: 'My Profile',
|
|
icon: faUser,
|
|
callback: () => this.onMyProfileClicked(),
|
|
},
|
|
{
|
|
text: 'Help',
|
|
icon: faQuestionCircle,
|
|
callback: () => this.onHelpClicked(),
|
|
},
|
|
{
|
|
text: 'Logout',
|
|
icon: faSignOutAlt,
|
|
callback: () => this.onLogout(),
|
|
}
|
|
];
|
|
|
|
signOutAltIcon = faSignOutAlt;
|
|
|
|
user!: User | null;
|
|
|
|
private userSubscription!: Subscription;
|
|
|
|
@Input()
|
|
state: boolean = false;
|
|
|
|
@Input()
|
|
ignoreClickOutside!: HTMLDivElement[];
|
|
|
|
@Output()
|
|
clickOutside = new EventEmitter();
|
|
|
|
@Output()
|
|
loginPopupState: EventEmitter<boolean> = new EventEmitter();
|
|
|
|
@Output()
|
|
signupPopupState: EventEmitter<boolean> = new EventEmitter();
|
|
|
|
@Output()
|
|
helpPopupState: EventEmitter<boolean> = new EventEmitter();
|
|
|
|
@Output()
|
|
myProfilePopupState: EventEmitter<boolean> = new EventEmitter();
|
|
|
|
constructor(
|
|
private viewContainerRef: ViewContainerRef,
|
|
private authService: AuthService,
|
|
) {}
|
|
|
|
ngOnInit(): void {
|
|
this.userSubscription = this.authService.authSubject.subscribe(
|
|
(res) => {
|
|
if (res && Value.Check(User, res)) {
|
|
this.user = <User>res;
|
|
} else {
|
|
this.user = null;
|
|
}
|
|
},
|
|
);
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.userSubscription.unsubscribe();
|
|
}
|
|
|
|
get dropDownState() {
|
|
return this.state ? 'show' : 'hide';
|
|
}
|
|
|
|
onClickedOutside() {
|
|
this.clickOutside.emit();
|
|
}
|
|
|
|
onLoginOptionClicked() {
|
|
this.loginPopupState.emit(true);
|
|
}
|
|
|
|
onSignUpOptionClick() {
|
|
this.signupPopupState.emit(true);
|
|
}
|
|
|
|
onMyProfileClicked() {
|
|
this.myProfilePopupState.emit(true);
|
|
}
|
|
|
|
onHelpClicked() {
|
|
this.helpPopupState.emit(true);
|
|
}
|
|
|
|
onLogout() {
|
|
this.authService.logout();
|
|
}
|
|
}
|