Publish from private repository
This commit is contained in:
Gitea Actions
@@ -0,0 +1,179 @@
|
||||
<nav #navbar class="navbar active">
|
||||
<div class="container-fluid">
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="float-start collapse-menu-icon">
|
||||
<li>
|
||||
<button mat-button (click)="mobileMenuSidebarOpen($event,'overlay-open')" class="sidemenu-collapse">
|
||||
<app-feather-icons [icon]="'menu'" [class]="'header-icon'"></app-feather-icons>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="float-start navbar-nav navbar-left">
|
||||
<li class="nav-item btnAppList" ngbDropdown>
|
||||
<button mat-button [matMenuTriggerFor]="appDropdownMenu" class="nav-notification-icons">
|
||||
<app-feather-icons [icon]="'grid'" [class]="'header-icon'"></app-feather-icons>
|
||||
</button>
|
||||
<mat-menu #appDropdownMenu="matMenu" class="notification-dropdown app-dropdown" xPosition="before">
|
||||
<div class="noti-list">
|
||||
<ul class="menu">
|
||||
<li class="nfc-header">
|
||||
<h5 class="mb-0">Applications</h5>
|
||||
</li>
|
||||
<li>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a routerLink="/apps/chat" class="app-icons">
|
||||
<img src="assets/images/apps/chat.png">
|
||||
<p class="tx-12 mb-0">Chat</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a routerLink="/calendar" class="app-icons">
|
||||
<img src="assets/images/apps/calendar.png">
|
||||
<p class="tx-12 mb-0">Calendar</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a routerLink="/task" class="app-icons">
|
||||
<img src="assets/images/apps/task.png">
|
||||
<p class="tx-12 mb-0">Task</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a routerLink="/email/inbox" class="app-icons">
|
||||
<img src="assets/images/apps/mail.png">
|
||||
<p class="tx-12 mb-0">Mail</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a routerLink="/contacts" class="app-icons">
|
||||
<img src="assets/images/apps/contact.png">
|
||||
<p class="tx-12 mb-0">Contact</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a routerLink="/apps/support" class="app-icons">
|
||||
<img src="assets/images/apps/support.png">
|
||||
<p class="tx-12 mb-0">Support</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a routerLink="/media/gallery" class="app-icons">
|
||||
<img src="assets/images/apps/gallery.png">
|
||||
<p class="tx-12 mb-0">Gallery</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</mat-menu>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" [ngClass]="isNavbarCollapsed ? '' : 'show'">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<!-- Full Screen Button -->
|
||||
<li class="fullscreen">
|
||||
<button mat-button class="nav-notification-icons" (click)="callFullscreen()">
|
||||
<app-feather-icons [icon]="'maximize'" [class]="'header-icon'"></app-feather-icons>
|
||||
</button>
|
||||
</li>
|
||||
<!-- #END# Full Screen Button -->
|
||||
<li class="nav-item">
|
||||
<button mat-button [matMenuTriggerFor]="languagemenu" class="lang-dropdown nav-notification-icons">
|
||||
<img *ngIf="flagvalue !== undefined" src="{{flagvalue}}" height="16">
|
||||
<img *ngIf="flagvalue === undefined" src="{{defaultFlag}}" height="16">
|
||||
</button>
|
||||
<mat-menu #languagemenu="matMenu" class="lang-item-menu">
|
||||
<div *ngFor="let item of listLang" class="lang-item">
|
||||
<button mat-menu-item class="dropdown-item lang-item-list"
|
||||
(click)="setLanguage(item.text, item.lang, item.flag)"
|
||||
[ngClass]="{'active': langStoreValue === item.lang}">
|
||||
<img src="{{item.flag}}" class="flag-img" height="12"> <span class="align-middle">{{item.text}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
</li>
|
||||
<!-- #START# Notifications-->
|
||||
<li>
|
||||
<button mat-button [matMenuTriggerFor]="notificationMenu" class="nav-notification-icons">
|
||||
<app-feather-icons [icon]="'bell'" [class]="'header-icon'"></app-feather-icons>
|
||||
</button>
|
||||
<mat-menu #notificationMenu="matMenu" class="nfc-menu">
|
||||
<div class="nfc-header">
|
||||
<h5 class="mb-0">Notitications</h5>
|
||||
<a class="nfc-mark-as-read">Mark all as read</a>
|
||||
</div>
|
||||
<div class="nfc-dropdown">
|
||||
<ng-scrollbar style="height: 350px" visibility="hover">
|
||||
<div class="noti-list header-menu">
|
||||
<div class="menu">
|
||||
<div>
|
||||
<button mat-menu-item *ngFor="let notification of notifications" onClick="return false;"
|
||||
[ngClass]="[notification.status]">
|
||||
<span class="table-img msg-user ">
|
||||
<i class="material-icons-two-tone nfc-type-icon"
|
||||
[ngClass]="[notification.color]">
|
||||
{{notification.icon}}
|
||||
</i>
|
||||
</span>
|
||||
<span class="menu-info">
|
||||
<span class="menu-title">{{notification.message}}</span>
|
||||
<span class="menu-desc mt-2">
|
||||
<i class="material-icons">access_time</i> {{notification.time}}
|
||||
</span>
|
||||
</span>
|
||||
<span class="nfc-close">
|
||||
<app-feather-icons [icon]="'x'" [class]="'user-menu-icons'"></app-feather-icons>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</div>
|
||||
<div class="nfc-footer">
|
||||
<a class="nfc-read-all">
|
||||
Read
|
||||
All Notifications
|
||||
</a>
|
||||
</div>
|
||||
</mat-menu>
|
||||
</li>
|
||||
<!-- #END# Notifications-->
|
||||
<li class="nav-item user_profile">
|
||||
<button mat-button [matMenuTriggerFor]="profilemenu">
|
||||
<div class="chip dropdown-toggle" ngbDropdownToggle class="">
|
||||
<span>{{userName}}</span>
|
||||
<img src="{{userImg}}" class="user_img" width="32" height="32" alt="User">
|
||||
</div>
|
||||
</button>
|
||||
<mat-menu #profilemenu="matMenu" class="profile-menu">
|
||||
<div class="noti-list">
|
||||
<div class="menu ">
|
||||
<div class="user_dw_menu">
|
||||
<button mat-menu-item routerLink="/user/profile">
|
||||
<app-feather-icons [icon]="'user'" [class]="'user-menu-icons'" routerlink="/user/profile"></app-feather-icons>Account
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<app-feather-icons [icon]="'mail'" [class]="'user-menu-icons'"></app-feather-icons>Inbox
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<app-feather-icons [icon]="'settings'" [class]="'user-menu-icons'"></app-feather-icons>Settings
|
||||
</button>
|
||||
<button mat-menu-item (click)="logout()">
|
||||
<app-feather-icons [icon]="'log-out'" [class]="'user-menu-icons'"></app-feather-icons>Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-menu>
|
||||
</li>
|
||||
<!-- #END# Tasks -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
import { HeaderComponent } from './header.component';
|
||||
describe('HeaderComponent',
|
||||
() => {
|
||||
let component: HeaderComponent;
|
||||
let fixture: ComponentFixture<HeaderComponent>;
|
||||
beforeEach(
|
||||
waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [HeaderComponent],
|
||||
}).compileComponents();
|
||||
})
|
||||
);
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HeaderComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
it('should create',
|
||||
() => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,264 @@
|
||||
// angular
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { Inject } from '@angular/core';
|
||||
import { ElementRef } from '@angular/core';
|
||||
import { OnInit } from '@angular/core';
|
||||
import { Renderer2 } from '@angular/core';
|
||||
import { AfterViewInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
// libs
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
|
||||
// app
|
||||
import { ConfigService } from 'src/app/config/config.service';
|
||||
import { InConfiguration } from 'src/app/core/models/config.interface';
|
||||
import { AuthService } from 'src/app/core/service/auth.service';
|
||||
import { LanguageService } from 'src/app/core/service/language.service';
|
||||
import { UnsubscribeOnDestroyAdapter } from 'src/app/shared/UnsubscribeOnDestroyAdapter';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
interface Notifications {
|
||||
message: string;
|
||||
time: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: ['./header.component.scss'],
|
||||
standalone: true,
|
||||
imports: [SharedModule, NgScrollbarModule],
|
||||
})
|
||||
export class HeaderComponent extends UnsubscribeOnDestroyAdapter implements OnInit, AfterViewInit {
|
||||
|
||||
config!: InConfiguration;
|
||||
|
||||
userImg?: string;
|
||||
userName?: string;
|
||||
|
||||
homePage?: string;
|
||||
isNavbarCollapsed = true;
|
||||
flagvalue: string | string[] | undefined;
|
||||
countryName: string | string[] = [];
|
||||
langStoreValue?: string;
|
||||
defaultFlag?: string;
|
||||
isOpenSidebar?: boolean;
|
||||
docElement: HTMLElement | undefined;
|
||||
isFullScreen = false;
|
||||
|
||||
constructor(
|
||||
@Inject(DOCUMENT) private document: Document,
|
||||
private renderer: Renderer2,
|
||||
public elementRef: ElementRef,
|
||||
private configService: ConfigService,
|
||||
private authService: AuthService,
|
||||
private router: Router,
|
||||
public languageService: LanguageService
|
||||
) {
|
||||
super();
|
||||
|
||||
this.subs.sink = this.authService.currentUser$.subscribe(() => {
|
||||
this.setUser();
|
||||
});
|
||||
}
|
||||
|
||||
listLang = [
|
||||
{ text: 'English', flag: 'assets/images/flags/us.jpg', lang: 'en' },
|
||||
{ text: 'Spanish', flag: 'assets/images/flags/spain.jpg', lang: 'es' },
|
||||
{ text: 'German', flag: 'assets/images/flags/germany.jpg', lang: 'de' },
|
||||
{ text: 'Ukraine', flag: 'assets/images/flags/ukraine.png', lang: 'ua' },
|
||||
];
|
||||
notifications: Notifications[] = [
|
||||
{
|
||||
message: 'Please check your mail',
|
||||
time: '14 mins ago',
|
||||
icon: 'mail',
|
||||
color: 'nfc-green',
|
||||
status: 'msg-unread',
|
||||
},
|
||||
{
|
||||
message: 'New Employee Added..',
|
||||
time: '22 mins ago',
|
||||
icon: 'person_add',
|
||||
color: 'nfc-blue',
|
||||
status: 'msg-read',
|
||||
},
|
||||
{
|
||||
message: 'Your leave is approved!! ',
|
||||
time: '3 hours ago',
|
||||
icon: 'event_available',
|
||||
color: 'nfc-orange',
|
||||
status: 'msg-read',
|
||||
},
|
||||
{
|
||||
message: 'Lets break for lunch...',
|
||||
time: '5 hours ago',
|
||||
icon: 'lunch_dining',
|
||||
color: 'nfc-blue',
|
||||
status: 'msg-read',
|
||||
},
|
||||
{
|
||||
message: 'Employee report generated',
|
||||
time: '14 mins ago',
|
||||
icon: 'description',
|
||||
color: 'nfc-green',
|
||||
status: 'msg-read',
|
||||
},
|
||||
{
|
||||
message: 'Please check your mail',
|
||||
time: '22 mins ago',
|
||||
icon: 'mail',
|
||||
color: 'nfc-red',
|
||||
status: 'msg-read',
|
||||
},
|
||||
{
|
||||
message: 'Salary credited...',
|
||||
time: '3 hours ago',
|
||||
icon: 'paid',
|
||||
color: 'nfc-purple',
|
||||
status: 'msg-read',
|
||||
},
|
||||
];
|
||||
|
||||
ngOnInit() {
|
||||
this.config = this.configService.configData;
|
||||
|
||||
this.setUser();
|
||||
|
||||
this.homePage = 'dashboard/rests';
|
||||
|
||||
this.langStoreValue = localStorage.getItem('lang') as string;
|
||||
const val = this.listLang.filter((x) => x.lang === this.langStoreValue);
|
||||
this.countryName = val.map((element) => element.text);
|
||||
if (val.length === 0) {
|
||||
if (this.flagvalue === undefined) {
|
||||
this.defaultFlag = 'assets/images/flags/us.jpg';
|
||||
}
|
||||
} else {
|
||||
this.flagvalue = val.map((element) => element.flag);
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
// set theme on startup
|
||||
if (localStorage.getItem('theme')) {
|
||||
this.renderer.removeClass(this.document.body, this.config.layout.variant);
|
||||
this.renderer.addClass(
|
||||
this.document.body,
|
||||
localStorage.getItem('theme') as string
|
||||
);
|
||||
} else {
|
||||
this.renderer.addClass(this.document.body, this.config.layout.variant);
|
||||
}
|
||||
|
||||
if (localStorage.getItem('menuOption')) {
|
||||
this.renderer.addClass(
|
||||
this.document.body,
|
||||
localStorage.getItem('menuOption') as string
|
||||
);
|
||||
} else {
|
||||
this.renderer.addClass(
|
||||
this.document.body,
|
||||
'menu_' + this.config.layout.sidebar.backgroundColor
|
||||
);
|
||||
}
|
||||
|
||||
if (localStorage.getItem('choose_logoheader')) {
|
||||
this.renderer.addClass(
|
||||
this.document.body,
|
||||
localStorage.getItem('choose_logoheader') as string
|
||||
);
|
||||
} else {
|
||||
this.renderer.addClass(
|
||||
this.document.body,
|
||||
'logo-' + this.config.layout.logo_bg_color
|
||||
);
|
||||
}
|
||||
|
||||
if (localStorage.getItem('sidebar_status')) {
|
||||
if (localStorage.getItem('sidebar_status') === 'close') {
|
||||
this.renderer.addClass(this.document.body, 'side-closed');
|
||||
this.renderer.addClass(this.document.body, 'submenu-closed');
|
||||
} else {
|
||||
this.renderer.removeClass(this.document.body, 'side-closed');
|
||||
this.renderer.removeClass(this.document.body, 'submenu-closed');
|
||||
}
|
||||
} else {
|
||||
if (this.config.layout.sidebar.collapsed === true) {
|
||||
this.renderer.addClass(this.document.body, 'side-closed');
|
||||
this.renderer.addClass(this.document.body, 'submenu-closed');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
callFullscreen() {
|
||||
if (!this.isFullScreen) {
|
||||
this.docElement?.requestFullscreen();
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
this.isFullScreen = !this.isFullScreen;
|
||||
}
|
||||
|
||||
setLanguage(text: string, lang: string, flag: string) {
|
||||
this.countryName = text;
|
||||
this.flagvalue = flag;
|
||||
this.langStoreValue = lang;
|
||||
this.languageService.setLanguage(lang);
|
||||
}
|
||||
|
||||
mobileMenuSidebarOpen(event: Event, className: string) {
|
||||
const hasClass = (event.target as HTMLInputElement).classList.contains(
|
||||
className
|
||||
);
|
||||
if (hasClass) {
|
||||
this.renderer.removeClass(this.document.body, className);
|
||||
} else {
|
||||
this.renderer.addClass(this.document.body, className);
|
||||
}
|
||||
|
||||
const hasClass2 = this.document.body.classList.contains('side-closed');
|
||||
if (hasClass2) {
|
||||
// this.renderer.removeClass(this.document.body, "side-closed");
|
||||
this.renderer.removeClass(this.document.body, 'submenu-closed');
|
||||
} else {
|
||||
// this.renderer.addClass(this.document.body, "side-closed");
|
||||
this.renderer.addClass(this.document.body, 'submenu-closed');
|
||||
}
|
||||
}
|
||||
|
||||
callSidemenuCollapse() {
|
||||
const hasClass = this.document.body.classList.contains('side-closed');
|
||||
if (hasClass) {
|
||||
this.renderer.removeClass(this.document.body, 'side-closed');
|
||||
this.renderer.removeClass(this.document.body, 'submenu-closed');
|
||||
} else {
|
||||
this.renderer.addClass(this.document.body, 'side-closed');
|
||||
this.renderer.addClass(this.document.body, 'submenu-closed');
|
||||
}
|
||||
}
|
||||
|
||||
logout() {
|
||||
this.subs.sink = this.authService.logout().subscribe((res) => {
|
||||
if (!res.success) {
|
||||
this.router.navigate(['/authentication/signin']);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private setUser() {
|
||||
this.userImg = this.authService.currentUserValue.img;
|
||||
|
||||
this.userName = [
|
||||
this.authService.currentUserValue.firstName,
|
||||
this.authService.currentUserValue.lastName
|
||||
].join(' ').trim();
|
||||
|
||||
this.userName = this.userName || this.authService.currentUserValue.userName;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user