first commit
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
<ul class="submenu submenu2">
|
||||
<li *ngFor="let item of menuItems"
|
||||
[ngClass]="{'parent-menu-active' : item.expanded && item.items, 'SidebarMenulink': item.expanded && !item.items}">
|
||||
<a *ngIf="!item.items" [routerLink]="item.routerLink"
|
||||
(click)="isMobile ? checkSidebar.SideBar('IsActive') : ''">
|
||||
<i *ngIf="item.icon" class="{{ item.icon }}"></i>
|
||||
<span>{{ item.label }}</span>
|
||||
</a>
|
||||
<div *ngIf="item.items">
|
||||
<a (click)="toggleSubMenu(item)">
|
||||
<i *ngIf="item.icon" class="{{ item.icon }}"></i>
|
||||
<span>{{ item.label }}</span>
|
||||
<i class="pi" [class.pi-chevron-down]="!item.expanded" [class.pi-chevron-up]="item.expanded"></i>
|
||||
</a>
|
||||
<ul class="submenu" [@submenuAnimation]="item.expanded ? 'open' : 'closed'">
|
||||
<custom-sidebar-item [menuItems]="item.items" [isMobile]="isMobile"></custom-sidebar-item>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -0,0 +1,38 @@
|
||||
import { trigger, state, style, transition, animate } from '@angular/animations';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { ActiveSidebarService } from 'src/app/core/services/active-sidebar.service';
|
||||
|
||||
@Component({
|
||||
selector: 'custom-sidebar-item',
|
||||
templateUrl: './custom-sidebar-item.component.html',
|
||||
animations: [
|
||||
trigger('submenuAnimation', [
|
||||
state('closed', style({
|
||||
height: '0px',
|
||||
opacity: 0,
|
||||
overflow: 'hidden',
|
||||
})),
|
||||
state('open', style({
|
||||
height: '*',
|
||||
opacity: 1,
|
||||
overflow: 'hidden',
|
||||
})),
|
||||
transition('closed => open', [
|
||||
animate('300ms ease-in-out')
|
||||
]),
|
||||
transition('open => closed', [
|
||||
animate('200ms ease-in-out')
|
||||
])
|
||||
])
|
||||
]
|
||||
})
|
||||
export class CustomSidebarItemComponent {
|
||||
@Input() menuItems: any[] = []; // Input for the nested menu items
|
||||
@Input() isMobile: boolean = false; // Input for the nested menu items
|
||||
|
||||
constructor(public checkSidebar: ActiveSidebarService) { }
|
||||
|
||||
toggleSubMenu(item: any) {
|
||||
item.expanded = !item.expanded; // Toggle the 'isOpen' property
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
<div *ngIf="!MobileBreakpoints.checkMob()" class="ng-aside-brand"
|
||||
[ngClass]="{'ng-asidebar-active': ChcekSidebar.activeSide == 'IsActive', 'ng-asidebar-inactive': ChcekSidebar.activeSide != 'IsActive'}">
|
||||
<div class="ng-brand-logo" [ngStyle]="{'height.px': headerHeight}">
|
||||
<img class="aside-logo" [src]="commonF.logo" #logoImage (load)="adjustHeaderSize()" />
|
||||
</div>
|
||||
<div class="ng-asideToggle" (click)="ChcekSidebar.SideBar('IsActive')">
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
|
||||
viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<polygon points="0 0 24 0 24 24 0 24"></polygon>
|
||||
<path
|
||||
d="M5.29288961,6.70710318 C4.90236532,6.31657888 4.90236532,5.68341391 5.29288961,5.29288961 C5.68341391,4.90236532 6.31657888,4.90236532 6.70710318,5.29288961 L12.7071032,11.2928896 C13.0856821,11.6714686 13.0989277,12.281055 12.7371505,12.675721 L7.23715054,18.675721 C6.86395813,19.08284 6.23139076,19.1103429 5.82427177,18.7371505 C5.41715278,18.3639581 5.38964985,17.7313908 5.76284226,17.3242718 L10.6158586,12.0300721 L5.29288961,6.70710318 Z"
|
||||
fill="var(--primary-theme)" fill-rule="nonzero"
|
||||
transform="translate(8.999997, 11.999999) scale(-1, 1) translate(-8.999997, -11.999999) "></path>
|
||||
<path
|
||||
d="M10.7071009,15.7071068 C10.3165766,16.0976311 9.68341162,16.0976311 9.29288733,15.7071068 C8.90236304,15.3165825 8.90236304,14.6834175 9.29288733,14.2928932 L15.2928873,8.29289322 C15.6714663,7.91431428 16.2810527,7.90106866 16.6757187,8.26284586 L22.6757187,13.7628459 C23.0828377,14.1360383 23.1103407,14.7686056 22.7371482,15.1757246 C22.3639558,15.5828436 21.7313885,15.6103465 21.3242695,15.2371541 L16.0300699,10.3841378 L10.7071009,15.7071068 Z"
|
||||
fill="var(--primary-theme)" fill-rule="nonzero" opacity="0.3"
|
||||
transform="translate(15.999997, 11.999999) scale(-1, 1) rotate(-270.000000) translate(-15.999997, -11.999999) ">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ng-AsideBar"
|
||||
[ngClass]="{'ng-asidebar-active': ChcekSidebar.activeSide == 'IsActive', 'DvSide': ChcekSidebar.activeSide != 'IsActive'}">
|
||||
<ul class="menu">
|
||||
<li *ngFor="let item of asideItems" class="p-panelmenu-panel" [ngClass]="{'parent-menu-active' : item.expanded}">
|
||||
<a *ngIf="!item.items" [routerLink]="item.routerLink" (click)="isMobile ? ChcekSidebar.SideBar('IsActive') : ''">
|
||||
<img class="asidebarIcons" *ngIf="item.icon" [src]="commonF.environmentObj.cdnBaseUrl + item.icon" alt="">
|
||||
<!-- <p *ngIf="" class="{{ item.icon }}"></p> -->
|
||||
<span>{{ item.label }}</span>
|
||||
</a>
|
||||
<div *ngIf="item.items">
|
||||
<a (click)="toggleSubMenu(item)">
|
||||
<img class="asidebarIcons" *ngIf="item.icon" [src]="commonF.environmentObj.cdnBaseUrl + item.icon" alt="">
|
||||
<!-- <p *ngIf="" class="{{ item.icon }}"></p> -->
|
||||
<span>{{ item.label }}</span>
|
||||
<i class="pi" [class.pi-chevron-down]="!item.expanded" [class.pi-chevron-up]="item.expanded"></i>
|
||||
</a>
|
||||
<ul class="submenu" [@submenuAnimation]="item.expanded ? 'open' : 'closed'">
|
||||
<custom-sidebar-item [menuItems]="item.items" [isMobile]="isMobile"></custom-sidebar-item>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,212 @@
|
||||
import { ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
|
||||
import { CommonFunctionService } from 'src/app/core/common/common-function.service';
|
||||
import { ActiveSidebarService } from 'src/app/core/services/active-sidebar.service';
|
||||
import { API } from 'src/app/core/services/api.service';
|
||||
import { BreakpointsService } from 'src/app/core/services/breakpoints.services';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
import { securityFunctions } from 'src/app/core/common/security';
|
||||
import { trigger, state, style, transition, animate } from '@angular/animations';
|
||||
import { filter } from 'rxjs';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'custom-sidebar',
|
||||
templateUrl: './custom-sidebar.component.html',
|
||||
animations: [
|
||||
trigger('submenuAnimation', [
|
||||
state('closed', style({
|
||||
height: '0px',
|
||||
opacity: 0,
|
||||
overflow: 'hidden',
|
||||
})),
|
||||
state('open', style({
|
||||
height: '*',
|
||||
opacity: 1,
|
||||
overflow: 'hidden',
|
||||
})),
|
||||
transition('closed => open', [
|
||||
animate('300ms ease-in-out')
|
||||
]),
|
||||
transition('open => closed', [
|
||||
animate('200ms ease-in-out')
|
||||
])
|
||||
])
|
||||
]
|
||||
})
|
||||
export class CustomSidebarComponent {
|
||||
@ViewChild('logoImage') logoImage: ElementRef<HTMLImageElement>;
|
||||
flag: boolean = true;
|
||||
// mobile resposive start
|
||||
isMobile = false;
|
||||
// mobile resposive end
|
||||
constructor(
|
||||
public ChcekSidebar: ActiveSidebarService,
|
||||
public MobileBreakpoints: BreakpointsService,
|
||||
private cd: ChangeDetectorRef, // mobile resposive end,
|
||||
private ApiSer: API,
|
||||
public commonF: CommonFunctionService,
|
||||
private renderer: Renderer2,
|
||||
public router: Router
|
||||
) {
|
||||
// mobile resposive start
|
||||
this.MobileBreakpoints.IsMobile.subscribe({
|
||||
next: (val) => {
|
||||
this.isMobile = val;
|
||||
},
|
||||
});
|
||||
// mobile resposive end
|
||||
}
|
||||
|
||||
asideItems!: MenuItem[];
|
||||
ngOnInit(): void {
|
||||
this.isMobile == true
|
||||
? (this.ChcekSidebar.activeSide = '')
|
||||
: (this.ChcekSidebar.activeSide = 'IsActive');
|
||||
this.getMenus().subscribe(res => {
|
||||
if (res) {
|
||||
this.commonF.CheckActiveTabMenus(res);
|
||||
this.BindMenu(res);
|
||||
const currentUrl = this.router.url;
|
||||
this.expandAndActivateRecursive(this.asideItems, currentUrl, true);
|
||||
}
|
||||
})
|
||||
this.router.events
|
||||
.pipe(filter(event => event instanceof NavigationEnd)) // Filter to get NavigationEnd event
|
||||
.subscribe((data) => {
|
||||
this.resetMenuItems(this.asideItems);
|
||||
// this.expandAndActivateRecursive(this.asideItems, this.router.url, true);
|
||||
});
|
||||
this.cd.detectChanges();
|
||||
|
||||
}
|
||||
getMenuss() {
|
||||
let LoginUserData = securityFunctions.getSessionStorage('LoginUserData') ? JSON.parse(securityFunctions.getSessionStorage('LoginUserData')) : null;
|
||||
return this.ApiSer.AdminGet(`/MenuMasterNew/GetMenuMasterNewsByOrgId/2405170833594899108/${LoginUserData.user_id}`)
|
||||
}
|
||||
getMenus() {
|
||||
let LoginUserData = securityFunctions.getSessionStorage('LoginUserData') ? JSON.parse(securityFunctions.getSessionStorage('LoginUserData')) : null;
|
||||
return this.ApiSer.AdminGet('/MenuMasterNew/GetAllMenuByUserId/' + LoginUserData.user_id + '/2405170833594899108')
|
||||
}
|
||||
BindMenu(list) {
|
||||
let aisemenu = [];
|
||||
let FliterList = list.sort(function (a, b) { return a.sequence - b.sequence; });
|
||||
let AllParentlist = list.filter(e => e.parent_id == '');
|
||||
AllParentlist.forEach(e => {
|
||||
if (e.menu_type == '2305170833594899101' && !e.is_tab_wise_menu) {
|
||||
aisemenu.push({
|
||||
label: e.menu_name,
|
||||
icon: e.ng_icon == null ? 'pi pi-fw pi-pencil' : '' + e.ng_icon,
|
||||
items: []
|
||||
});
|
||||
} else if (!e.is_hide_in_side_menu) {
|
||||
aisemenu.push({ label: e.menu_name, icon: ' ', page_data: e.page_data ? JSON.parse(e.page_data) : [], routerLink: '/' + e.ui_controller + '/' + e.ui_action, command: (event) => { this.isMobile ? this.ChcekSidebar.SideBar('IsActive') : '' } });
|
||||
}
|
||||
let index = aisemenu.length - 1;
|
||||
let submenu = FliterList.filter(s => s.parent_id == e.menu_id);
|
||||
if (submenu.length > 0) {
|
||||
this.subMenu(aisemenu[index], submenu, FliterList);
|
||||
}
|
||||
});
|
||||
this.asideItems = aisemenu;
|
||||
};
|
||||
|
||||
subMenu(menu, FilterSubmenu, Allmenu) {
|
||||
if (FilterSubmenu.length > 0) {
|
||||
FilterSubmenu.forEach(e => {
|
||||
if (e.menu_type == '2305170833594899101' && !e.is_tab_wise_menu) {
|
||||
menu.items.push({
|
||||
label: e.menu_name,
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: []
|
||||
});
|
||||
} else if (!e.is_hide_in_side_menu) {
|
||||
menu.items.push(
|
||||
{ label: e.menu_name, icon: ' ', page_data: e.page_data ? JSON.parse(e.page_data) : [], routerLink: '/' + e.ui_controller + '/' + e.ui_action, command: (event) => { this.isMobile ? this.ChcekSidebar.SideBar('IsActive') : '' } }
|
||||
);
|
||||
}
|
||||
let index = menu.items.length - 1;
|
||||
let submenu = Allmenu.filter(a => a.parent_id == e.menu_id && !e.is_tab_wise_menu);
|
||||
if (submenu.length > 0) {
|
||||
this.subMenu(menu.items[index], submenu, Allmenu);
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
headerHeight; // Default height
|
||||
isHeightSet: boolean = false; // Flag to check if actual height is set
|
||||
adjustHeaderSize() {
|
||||
requestAnimationFrame(() => {
|
||||
this.headerHeight = this.commonF.getHeaderSize(this.logoImage);
|
||||
if (this.headerHeight > 0) { // Check if the height is valid
|
||||
this.isHeightSet = true;
|
||||
}
|
||||
this.cd.detectChanges(); // Trigger change detection
|
||||
});
|
||||
}
|
||||
|
||||
toggleSubMenu(selectedItem: any) {
|
||||
this.asideItems.forEach(item => item.expanded = item.label === selectedItem.label ? !item.expanded : false);
|
||||
}
|
||||
|
||||
private expandAndActivateRecursive(items: MenuItem[], targetUrl: string, isBeforeActive: boolean = true): boolean {
|
||||
let menu = true;
|
||||
if (items) {
|
||||
for (const [i, item] of items.entries()) {
|
||||
if (item.routerLink) {
|
||||
if (item['page_data'].some(z => targetUrl.includes(z.page_url.replaceAll('/$', '')))) {
|
||||
item.expanded = true;
|
||||
item.styleClass = 'SidebarMenulink';
|
||||
menu = false;
|
||||
for (let ind = i + 1; ind < items.length; ind++) {
|
||||
if (items[ind].items) {
|
||||
items[ind].items.forEach(sub_item => sub_item.styleClass = '')
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
} else if (item.items) {
|
||||
if (this.expandAndActivateRecursive(item.items, targetUrl, isBeforeActive)) {
|
||||
item.expanded = true;
|
||||
item.styleClass = 'parent-menu-active';
|
||||
for (let ind = i + 1; ind < items.length; ind++) {
|
||||
if (items[ind].items) {
|
||||
items[ind].items.forEach(sub_item => sub_item.styleClass = '')
|
||||
}
|
||||
}
|
||||
// this.RemoveSubmenuActive(items,index+1);
|
||||
return true;
|
||||
} else {
|
||||
item.styleClass = '';
|
||||
}
|
||||
}
|
||||
if (menu) {
|
||||
item.styleClass = 'submenu-before-active';
|
||||
}
|
||||
}
|
||||
}
|
||||
// Get the active panel (the expanded one)
|
||||
const activePanel = document.querySelector('.menu');
|
||||
const selected_panel = activePanel.querySelector('.active-panel')
|
||||
selected_panel?.classList.remove("active-panel")
|
||||
const panel = activePanel.querySelector('.p-highlight')?.closest('.p-panelmenu-panel');
|
||||
|
||||
// Add 'active-panel' class to the currently active panel
|
||||
if (panel) {
|
||||
this.renderer.addClass(panel, 'active-panel');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
private resetMenuItems(items: MenuItem[]) {
|
||||
if (items) {
|
||||
for (const [index, item] of items.entries()) {
|
||||
item.expanded = false;
|
||||
item.expanded = false; // Reset expanded state
|
||||
item.styleClass = ''; // Clear any existing style classes
|
||||
if (item.items) {
|
||||
this.resetMenuItems(item.items); // Recursively reset child items
|
||||
}
|
||||
}
|
||||
this.expandAndActivateRecursive(items, this.router.url, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
7
src/app/modules/common/footer/footer.component.html
Normal file
7
src/app/modules/common/footer/footer.component.html
Normal file
@@ -0,0 +1,7 @@
|
||||
<div class="ng-footer">
|
||||
<div class="ng-footerBody">
|
||||
<div>
|
||||
<p class="ng-footerCopy">©{{date}} {{venderGroupName}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
24
src/app/modules/common/footer/footer.component.ts
Normal file
24
src/app/modules/common/footer/footer.component.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { Component } from "@angular/core";
|
||||
import * as moment from "moment";
|
||||
import { securityFunctions } from "src/app/core/common/security";
|
||||
|
||||
@Component({
|
||||
templateUrl: './footer.component.html',
|
||||
selector: 'app-footer'
|
||||
})
|
||||
export class FooterComponent {
|
||||
date;
|
||||
venderGroupName = '';
|
||||
ngOnInit(): void {
|
||||
this.getyear();
|
||||
}
|
||||
agencyData
|
||||
getyear() {
|
||||
const d = new Date();
|
||||
this.date = moment(d).format('YYYY');
|
||||
this.agencyData = securityFunctions.getSessionStorage('VData');
|
||||
if (this.agencyData) {
|
||||
this.venderGroupName = JSON.parse(this.agencyData).vendor_group_name;
|
||||
}
|
||||
};
|
||||
}
|
||||
119
src/app/modules/common/header/header.component.html
Normal file
119
src/app/modules/common/header/header.component.html
Normal file
@@ -0,0 +1,119 @@
|
||||
<div class="headerWrapper">
|
||||
<!-- <div class="header-bar" [ngStyle]="{'height.px': headerHeight}" [ngClass]="{'logo': ChcekSidebar.activeSide == 'IsActive'}" *ngIf="MobileHide">
|
||||
<img [src]="commonF.logo" />
|
||||
</div> -->
|
||||
<div class="d-flex align-items-center h-100" *ngIf="MobileShow">
|
||||
<button class="MenuBtn" *ngIf="ChcekSidebar.activeSide != 'IsActive'"
|
||||
(click)="ChcekSidebar.SideBar('IsActive')"><span class="material-icons">
|
||||
menu </span>
|
||||
</button>
|
||||
<button class="MenuBtn" *ngIf="ChcekSidebar.activeSide =='IsActive'" (click)="ChcekSidebar.SideBar('IsActive')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 -960 960 960" width="26">
|
||||
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<img [src]="orgLogo" />
|
||||
</div>
|
||||
<div class="MobIcon_wrapper" *ngIf="MobileShow">
|
||||
<div class="User_loginDetailMob" *ngIf="ChcekSidebar.activeSide != 'IsActive'"
|
||||
[ngClass]="{'loginDetailMob_Toggle':topBarMenu}" (click)="topBar()">
|
||||
<button class="btn-icon">
|
||||
<span class="profile-svg">
|
||||
<svg width="24px" height="24px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#fff"
|
||||
class="active">
|
||||
<title>ionicons-v5-j</title>
|
||||
<path
|
||||
d="M332.64,64.58C313.18,43.57,286,32,256,32c-30.16,0-57.43,11.5-76.8,32.38-19.58,21.11-29.12,49.8-26.88,80.78C156.76,206.28,203.27,256,256,256s99.16-49.71,103.67-110.82C361.94,114.48,352.34,85.85,332.64,64.58Z">
|
||||
</path>
|
||||
<path
|
||||
d="M432,480H80A31,31,0,0,1,55.8,468.87c-6.5-7.77-9.12-18.38-7.18-29.11C57.06,392.94,83.4,353.61,124.8,326c36.78-24.51,83.37-38,131.2-38s94.42,13.5,131.2,38c41.4,27.6,67.74,66.93,76.18,113.75,1.94,10.73-.68,21.34-7.18,29.11A31,31,0,0,1,432,480Z">
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="User_DetalWrapper" *ngIf="topBarMenu">
|
||||
<div class="">
|
||||
<div class="logout_DropdownLinks">
|
||||
<div class="links_Item">
|
||||
<span class="self-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.54651 1C5.87403 1 6.13954 1.26551 6.13954 1.59302V2.1961C6.663 2.18604 7.23971 2.18604 7.87399 2.18605H11.126C11.7603 2.18604 12.337 2.18604 12.8605 2.1961V1.59302C12.8605 1.26551 13.126 1 13.4535 1C13.781 1 14.0465 1.26551 14.0465 1.59302V2.247C14.252 2.26267 14.4467 2.28237 14.6308 2.30713C15.5579 2.43176 16.3082 2.69437 16.9 3.2861C17.4917 3.87783 17.7543 4.62816 17.8789 5.55519C17.9187 5.85146 17.9454 6.17479 17.9634 6.52703C17.9871 6.59107 18 6.6603 18 6.73256C18 6.78737 17.9926 6.84044 17.9787 6.89082C18 7.52492 18 8.245 18 9.06006V10.686C18 11.0136 17.7345 11.2791 17.407 11.2791C17.0795 11.2791 16.814 11.0136 16.814 10.686V9.10465C16.814 8.4294 16.8137 7.84167 16.8036 7.32558H2.1964C2.1863 7.84167 2.18605 8.4294 2.18605 9.10465V10.686C2.18605 12.1937 2.1873 13.2649 2.29655 14.0775C2.4035 14.8729 2.60408 15.3313 2.93871 15.6659C3.27334 16.0006 3.73167 16.2012 4.52718 16.3081C5.33975 16.4173 6.41089 16.4186 7.9186 16.4186H11.0814C11.4089 16.4186 11.6744 16.6841 11.6744 17.0116C11.6744 17.3391 11.4089 17.6047 11.0814 17.6047H7.874C6.42089 17.6047 5.26992 17.6047 4.36915 17.4836C3.44212 17.3589 2.69179 17.0963 2.10005 16.5046C1.50832 15.9129 1.24572 15.1625 1.12109 14.2355C0.999977 13.3347 0.999985 12.1838 1 10.7306V9.06006C0.999992 8.24493 0.999985 7.52492 1.02136 6.89083C1.00744 6.84045 1 6.78737 1 6.73256C1 6.6603 1.01292 6.59106 1.03659 6.52702C1.05452 6.17478 1.08125 5.85145 1.12109 5.55519C1.24572 4.62816 1.50832 3.87783 2.10005 3.2861C2.69179 2.69437 3.44212 2.43176 4.36915 2.30713C4.55332 2.28237 4.74795 2.26267 4.95349 2.247V1.59302C4.95349 1.26551 5.219 1 5.54651 1ZM2.25063 6.13954H16.7494C16.7367 5.98978 16.7215 5.84795 16.7034 5.71323C16.5965 4.91772 16.3959 4.45939 16.0613 4.12476C15.7267 3.79013 15.2683 3.58955 14.4729 3.4826C13.6603 3.37335 12.5891 3.37209 11.0814 3.37209H7.9186C6.41089 3.37209 5.33975 3.37335 4.52718 3.4826C3.73167 3.58955 3.27334 3.79013 2.93871 4.12476C2.60408 4.45939 2.4035 4.91772 2.29655 5.71323C2.27844 5.84795 2.2633 5.98978 2.25063 6.13954Z" fill="#1C274C"></path><path d="M14.8768 13.225V14.7186H13.9806M17.5651 14.7186C17.5651 16.2033 16.3615 17.407 14.8768 17.407C13.392 17.407 12.1884 16.2033 12.1884 14.7186C12.1884 13.2338 13.392 12.0302 14.8768 12.0302C16.3615 12.0302 17.5651 13.2338 17.5651 14.7186Z" stroke="#1C274C" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||||
</span>
|
||||
<div class="LastLogin_links_Item">
|
||||
<span>Last login:</span>
|
||||
<span>{{lastLogin}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links_Item" (click)="commonF.loginOut()">
|
||||
<span class="material-icons"> logout </span>
|
||||
<span>Log Out</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="UserDetail" *ngIf="MobileHide">
|
||||
<button mat-button class="ng-header-button" [matMenuTriggerFor]="menu">
|
||||
<div class="menu-dropdown">
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" color="inherit" fill="currentcolor"
|
||||
aria-hidden="true" role="presentation" viewBox="0 0 85 85" preserveAspectRatio="xMidYMid meet" size="35"
|
||||
width="35" height="35">
|
||||
<defs>
|
||||
<path id="a"
|
||||
d="M42.5 0C65.972 0 85 19.028 85 42.5S65.972 85 42.5 85 0 65.972 0 42.5 19.028 0 42.5 0zm-.09 7.352c-19.362 0-35.058 15.696-35.058 35.058 0 19.362 15.696 35.058 35.058 35.058 19.362 0 35.058-15.696 35.058-35.058 0-19.362-15.696-35.058-35.058-35.058z">
|
||||
</path>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<use xmlns="http://www.w3.org/2000/svg" fill="#E7412A" opacity=".1"></use>
|
||||
<path fill="var(--primary-theme)" fill-rule="nonzero" stroke="var(--primary-theme)" stroke-width="1.063"
|
||||
d="M42.5 10.625c-17.578 0-31.875 14.297-31.875 31.875S24.922 74.375 42.5 74.375 74.375 60.078 74.375 42.5 60.078 10.625 42.5 10.625zm0 2.198c16.363 0 29.677 13.314 29.677 29.677S58.863 72.177 42.5 72.177 12.823 58.863 12.823 42.5 26.137 12.823 42.5 12.823zm-.48 4.405a25.368 25.368 0 00-17.394 7.394C19.852 29.401 17.22 35.746 17.22 42.5s2.627 13.1 7.402 17.878c.215.21.498.322.777.322a1.102 1.102 0 00.781-1.88 22.596 22.596 0 01-1.425-1.568c.013-.021.039-.038.051-.064 2.465-5.07 6.823-8.565 11.833-9.703 1.64 1.631 3.658 2.709 5.861 2.709s4.225-1.078 5.86-2.71c5.015 1.134 9.373 4.633 11.838 9.704.013.026.03.047.043.069a23.51 23.51 0 01-1.421 1.563 1.102 1.102 0 001.558 1.558c4.775-4.779 7.402-11.124 7.402-17.878s-2.627-13.1-7.402-17.878a26.468 26.468 0 00-2.301-2.04 1.105 1.105 0 00-1.546.19 1.093 1.093 0 00.19 1.54 23.724 23.724 0 012.099 1.868c4.362 4.358 6.762 10.155 6.762 16.32 0 4.633-1.357 9.055-3.881 12.816-2.64-4.843-6.883-8.286-11.782-9.708 1.533-2.245 2.473-4.993 2.473-7.505v-2.198c0-5.453-4.44-9.892-9.892-9.892-5.453 0-9.892 4.44-9.892 9.892v2.198c0 2.512.936 5.26 2.473 7.505-4.9 1.422-9.145 4.865-11.782 9.708-2.524-3.761-3.88-8.183-3.88-12.816 0-6.165 2.4-11.962 6.761-16.32 5.217-5.22 12.688-7.638 19.99-6.47a1.094 1.094 0 001.259-.91 1.102 1.102 0 00-.91-1.262 24.917 24.917 0 00-4.5-.31zm.48 10.983c4.242 0 7.694 3.452 7.694 7.694v2.198c0 4.363-3.624 9.893-7.694 9.893s-7.694-5.53-7.694-9.893v-2.198c0-4.242 3.452-7.694 7.694-7.694z">
|
||||
</path>
|
||||
<path
|
||||
d="M42.5 10.625c-17.578 0-31.875 14.297-31.875 31.875S24.922 74.375 42.5 74.375 74.375 60.078 74.375 42.5 60.078 10.625 42.5 10.625z">
|
||||
</path>
|
||||
<path
|
||||
d="M42.5 12.823c16.363 0 29.677 13.314 29.677 29.677S58.863 72.177 42.5 72.177 12.823 58.863 12.823 42.5 26.137 12.823 42.5 12.823z">
|
||||
</path>
|
||||
<path
|
||||
d="M42.019 17.228a25.368 25.368 0 00-17.393 7.394C19.852 29.401 17.22 35.746 17.22 42.5s2.627 13.1 7.402 17.878c.215.21.498.322.777.322a1.102 1.102 0 00.781-1.88 22.596 22.596 0 01-1.425-1.568c.013-.021.039-.038.051-.064 2.465-5.07 6.823-8.565 11.833-9.703 1.64 1.631 3.658 2.709 5.861 2.709s4.225-1.078 5.86-2.71c5.015 1.134 9.373 4.633 11.838 9.704.013.026.03.047.043.069a23.51 23.51 0 01-1.421 1.563 1.102 1.102 0 001.558 1.558c4.775-4.779 7.402-11.124 7.402-17.878s-2.627-13.1-7.402-17.878a26.468 26.468 0 00-2.301-2.04 1.105 1.105 0 00-1.546.19 1.093 1.093 0 00.19 1.54 23.724 23.724 0 012.099 1.868c4.362 4.358 6.762 10.155 6.762 16.32 0 4.633-1.357 9.055-3.881 12.816-2.64-4.843-6.883-8.286-11.782-9.708 1.533-2.245 2.473-4.993 2.473-7.505v-2.198c0-5.453-4.44-9.892-9.892-9.892-5.453 0-9.892 4.44-9.892 9.892v2.198c0 2.512.936 5.26 2.473 7.505-4.9 1.422-9.145 4.865-11.782 9.708-2.524-3.761-3.88-8.183-3.88-12.816 0-6.165 2.4-11.962 6.761-16.32 5.217-5.22 12.688-7.638 19.99-6.47a1.094 1.094 0 001.259-.91 1.102 1.102 0 00-.91-1.262 24.917 24.917 0 00-4.5-.31z">
|
||||
</path>
|
||||
<path
|
||||
d="M42.5 28.211c4.242 0 7.694 3.452 7.694 7.694v2.198c0 4.363-3.624 9.893-7.694 9.893s-7.694-5.53-7.694-9.893v-2.198c0-4.242 3.452-7.694 7.694-7.694z">
|
||||
</path>
|
||||
<path fill="var(--primary-theme)"
|
||||
d="M31.645 58.995a1.092 1.092 0 00-1.087.541l-1.1 1.906a1.097 1.097 0 001.898 1.099l1.1-1.906a1.097 1.097 0 00-.812-1.64zm21.158 0a1.1 1.1 0 00-.812 1.645l1.1 1.902a1.092 1.092 0 001.498.399c.528-.3.704-.975.399-1.499l-1.1-1.902a1.1 1.1 0 00-1.085-.545zm-16.281 2.143c-.421.06-.79.365-.91.807l-.567 2.125a1.098 1.098 0 002.124.567l.568-2.125a1.096 1.096 0 00-.773-1.344c-.15-.043-.3-.052-.442-.03zm11.403 0a1.029 1.029 0 00-.442.03 1.1 1.1 0 00-.777 1.344l.57 2.125c.134.49.576.816 1.061.816a1.1 1.1 0 001.065-1.383l-.567-2.125a1.108 1.108 0 00-.91-.807zm-5.702.721c-.605 0-1.099.494-1.099 1.099v2.198c0 .606.494 1.1 1.1 1.1a1.1 1.1 0 001.098-1.1v-2.198c0-.605-.493-1.1-1.099-1.1zm8.697-43.115a1.1 1.1 0 00-.34 2.13c.782.292 1.559.63 2.306 1.004a1.1 1.1 0 001.481-.485c.27-.54.052-1.202-.49-1.477-.82-.412-1.67-.781-2.528-1.103a1.138 1.138 0 00-.43-.069z">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Hi, {{userName}}</span>
|
||||
<span class="material-icons"> arrow_drop_down </span>
|
||||
</div>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<div class="logout_DropdownLinks">
|
||||
<div class="links_Item">
|
||||
<span class="self-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.54651 1C5.87403 1 6.13954 1.26551 6.13954 1.59302V2.1961C6.663 2.18604 7.23971 2.18604 7.87399 2.18605H11.126C11.7603 2.18604 12.337 2.18604 12.8605 2.1961V1.59302C12.8605 1.26551 13.126 1 13.4535 1C13.781 1 14.0465 1.26551 14.0465 1.59302V2.247C14.252 2.26267 14.4467 2.28237 14.6308 2.30713C15.5579 2.43176 16.3082 2.69437 16.9 3.2861C17.4917 3.87783 17.7543 4.62816 17.8789 5.55519C17.9187 5.85146 17.9454 6.17479 17.9634 6.52703C17.9871 6.59107 18 6.6603 18 6.73256C18 6.78737 17.9926 6.84044 17.9787 6.89082C18 7.52492 18 8.245 18 9.06006V10.686C18 11.0136 17.7345 11.2791 17.407 11.2791C17.0795 11.2791 16.814 11.0136 16.814 10.686V9.10465C16.814 8.4294 16.8137 7.84167 16.8036 7.32558H2.1964C2.1863 7.84167 2.18605 8.4294 2.18605 9.10465V10.686C2.18605 12.1937 2.1873 13.2649 2.29655 14.0775C2.4035 14.8729 2.60408 15.3313 2.93871 15.6659C3.27334 16.0006 3.73167 16.2012 4.52718 16.3081C5.33975 16.4173 6.41089 16.4186 7.9186 16.4186H11.0814C11.4089 16.4186 11.6744 16.6841 11.6744 17.0116C11.6744 17.3391 11.4089 17.6047 11.0814 17.6047H7.874C6.42089 17.6047 5.26992 17.6047 4.36915 17.4836C3.44212 17.3589 2.69179 17.0963 2.10005 16.5046C1.50832 15.9129 1.24572 15.1625 1.12109 14.2355C0.999977 13.3347 0.999985 12.1838 1 10.7306V9.06006C0.999992 8.24493 0.999985 7.52492 1.02136 6.89083C1.00744 6.84045 1 6.78737 1 6.73256C1 6.6603 1.01292 6.59106 1.03659 6.52702C1.05452 6.17478 1.08125 5.85145 1.12109 5.55519C1.24572 4.62816 1.50832 3.87783 2.10005 3.2861C2.69179 2.69437 3.44212 2.43176 4.36915 2.30713C4.55332 2.28237 4.74795 2.26267 4.95349 2.247V1.59302C4.95349 1.26551 5.219 1 5.54651 1ZM2.25063 6.13954H16.7494C16.7367 5.98978 16.7215 5.84795 16.7034 5.71323C16.5965 4.91772 16.3959 4.45939 16.0613 4.12476C15.7267 3.79013 15.2683 3.58955 14.4729 3.4826C13.6603 3.37335 12.5891 3.37209 11.0814 3.37209H7.9186C6.41089 3.37209 5.33975 3.37335 4.52718 3.4826C3.73167 3.58955 3.27334 3.79013 2.93871 4.12476C2.60408 4.45939 2.4035 4.91772 2.29655 5.71323C2.27844 5.84795 2.2633 5.98978 2.25063 6.13954Z" fill="#1C274C"></path><path d="M14.8768 13.225V14.7186H13.9806M17.5651 14.7186C17.5651 16.2033 16.3615 17.407 14.8768 17.407C13.392 17.407 12.1884 16.2033 12.1884 14.7186C12.1884 13.2338 13.392 12.0302 14.8768 12.0302C16.3615 12.0302 17.5651 13.2338 17.5651 14.7186Z" stroke="#1C274C" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||||
</span>
|
||||
<div class="LastLogin_links_Item">
|
||||
<span>Last login:</span>
|
||||
<span>{{lastLogin}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links_Item" (click)="commonF.loginOut()">
|
||||
<span class="self-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path opacity="0.978" fill-rule="evenodd" clip-rule="evenodd" d="M2.02953 0.0020799C3.94819 -0.00346636 5.86679 0.0020799 7.78539 0.0187153C8.01785 0.1121 8.12875 0.284001 8.1181 0.534414C8.11391 0.843717 7.95863 1.02671 7.65231 1.08338C5.82241 1.09447 3.99251 1.10557 2.16261 1.11666C1.49815 1.30426 1.13772 1.74232 1.0813 2.43086C1.05912 6.02411 1.05912 9.61737 1.0813 13.2106C1.13772 13.8992 1.49815 14.3372 2.16261 14.5248C4.04947 14.5254 5.9348 14.5476 7.81866 14.5914C8.11544 14.7808 8.19862 15.0415 8.06819 15.3732C8.01829 15.4675 7.94619 15.5396 7.85193 15.5895C6.87796 15.6279 5.90202 15.6446 4.92409 15.6394C3.91379 15.6442 2.90455 15.6275 1.89644 15.5895C0.871665 15.3078 0.245064 14.6479 0.0166363 13.6099C-0.00554543 9.75045 -0.00554543 5.89103 0.0166363 2.0316C0.272187 0.938749 0.943151 0.262242 2.02953 0.0020799Z" fill="#1C274C"/>
|
||||
<path opacity="0.977" fill-rule="evenodd" clip-rule="evenodd" d="M11.6448 3.39572C11.7919 3.40737 11.925 3.45727 12.0441 3.54544C13.3139 4.81529 14.5837 6.08511 15.8536 7.35496C16.0593 7.68417 16.0483 8.00577 15.8203 8.31982C14.5616 9.57855 13.3028 10.8373 12.0441 12.0961C11.7276 12.2821 11.4448 12.2433 11.1957 11.9796C11.0878 11.7806 11.0878 11.5809 11.1957 11.3807C12.1993 10.3771 13.203 9.3734 14.2067 8.36972C11.0903 8.35864 7.97394 8.34753 4.85756 8.33645C4.50562 8.15689 4.41136 7.88516 4.57475 7.52131C4.65008 7.42373 4.74437 7.35163 4.85756 7.30505C7.97394 7.29397 11.0903 7.28286 14.2067 7.27178C13.203 6.2681 12.1993 5.26445 11.1957 4.26076C11.0218 3.79873 11.1715 3.51041 11.6448 3.39572Z" fill="#1C274C"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Log Out</span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
127
src/app/modules/common/header/header.component.ts
Normal file
127
src/app/modules/common/header/header.component.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
||||
import { ChangeDetectorRef, Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { PrimeNGConfig } from 'primeng/api';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { CommonFunctionService } from 'src/app/core/common/common-function.service';
|
||||
import { ActiveSidebarService } from 'src/app/core/services/active-sidebar.service';
|
||||
import { API } from 'src/app/core/services/api.service';
|
||||
import { BreakpointsService } from 'src/app/core/services/breakpoints.services';
|
||||
|
||||
@Component({
|
||||
templateUrl: './header.component.html',
|
||||
selector: 'app-header',
|
||||
})
|
||||
export class HeaderComponent implements OnInit {
|
||||
@ViewChild('logoImage') logoImage: ElementRef<HTMLImageElement>;
|
||||
|
||||
isMobile!: boolean;
|
||||
destroyed = new Subject<void>();
|
||||
MobileShow = true;
|
||||
MobileHide = true;
|
||||
topBarMenu = false;
|
||||
activeAside;
|
||||
|
||||
constructor(
|
||||
public ChcekSidebar: ActiveSidebarService,
|
||||
// mobile resposive start
|
||||
breakpointObserver: BreakpointObserver,
|
||||
public MobileBreakpoints: BreakpointsService,
|
||||
private cd: ChangeDetectorRef,
|
||||
public commonF: CommonFunctionService,
|
||||
private ApiSer: API,
|
||||
private renderer: Renderer2,
|
||||
public titleService: Title
|
||||
// mobile resposive end
|
||||
) {
|
||||
// mobile resposive start
|
||||
this.MobileBreakpoints.IsMobile.subscribe({
|
||||
next: (val) => {
|
||||
this.isMobile = val;
|
||||
},
|
||||
});
|
||||
breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small])
|
||||
.pipe(takeUntil(this.destroyed))
|
||||
.subscribe((result) => {
|
||||
if (
|
||||
result.breakpoints["(max-width: 599.98px)"] ||
|
||||
result.breakpoints["(min-width: 600px) and (max-width: 959.98px)"]
|
||||
) {
|
||||
this.isMobile = true;
|
||||
this.MobileShow = true;
|
||||
this.MobileHide = false;
|
||||
} else {
|
||||
this.isMobile = false;
|
||||
this.MobileShow = false;
|
||||
this.MobileHide = true;
|
||||
}
|
||||
});
|
||||
// mobile resposive end
|
||||
}
|
||||
|
||||
// topBar() {
|
||||
// this.ChcekSidebartopBarMenu = !this.topBarMenu;
|
||||
// }
|
||||
userName;
|
||||
lastLogin;
|
||||
ngOnInit(): void {
|
||||
this.userName = sessionStorage.getItem('userName')
|
||||
this.lastLogin = sessionStorage.getItem('lastLogin');
|
||||
this.isMobile == true
|
||||
? (this.ChcekSidebar.activeSide = '') : (this.ChcekSidebar.activeSide = 'IsActive'); this.cd.detectChanges();
|
||||
if (sessionStorage.getItem("logo")) {
|
||||
const favicon = document.getElementById('favIcon') as HTMLLinkElement;
|
||||
let res = JSON.parse(sessionStorage.getItem("logo"));
|
||||
if (res != null) if (res["logo"] != null) {
|
||||
this.orgLogo = res["logo"];
|
||||
this.commonF.logo = this.orgLogo
|
||||
sessionStorage.setItem("logo", JSON.stringify(res));
|
||||
this.titleService.setTitle('Inventory Management | ' + res.org_name)
|
||||
document.documentElement.style.setProperty('--primary-theme', res['primary_color']);
|
||||
document.documentElement.style.setProperty('--secondary-theme', res['secondary_color']);
|
||||
this.renderer.setAttribute(favicon, 'href', res['favicon'] ? res['favicon'] : './assets/images/TMC.svg');
|
||||
} else {
|
||||
this.orgLogo = "https://cdn-aos.b-cdn.net/Static/Email/TMC.svg";
|
||||
this.commonF.logo = this.orgLogo
|
||||
}
|
||||
} else {
|
||||
this.getLogo()
|
||||
}
|
||||
|
||||
}
|
||||
orgLogo
|
||||
getLogo() {
|
||||
const favicon = this.renderer.selectRootElement('link[rel="icon"]', true);
|
||||
this.ApiSer.AdminGet('/ForgotPassword/GetOrgLogo').subscribe((res) => {
|
||||
if (res != null) if (res["logo"] != null) {
|
||||
this.orgLogo = res["logo"];
|
||||
this.commonF.logo = this.orgLogo
|
||||
sessionStorage.setItem("logo", JSON.stringify(res));
|
||||
this.titleService.setTitle('Inventory Management | ' + res.org_name)
|
||||
document.documentElement.style.setProperty('--primary-theme', res['primary_color']);
|
||||
document.documentElement.style.setProperty('--secondary-theme', res['secondary_color']);
|
||||
this.renderer.setAttribute(favicon, 'href', res['favicon'] ? res['favicon'] : './assets/images/TMC.svg');
|
||||
} else {
|
||||
this.orgLogo = "https://cdn-aos.b-cdn.net/Static/Email/TMC.svg";
|
||||
this.commonF.logo = this.orgLogo
|
||||
}
|
||||
})
|
||||
}
|
||||
asideBar(ele) {
|
||||
this.activeAside = ele;
|
||||
}
|
||||
topBar() {
|
||||
this.topBarMenu = !this.topBarMenu;
|
||||
}
|
||||
headerHeight; // Default height
|
||||
isHeightSet: boolean = false; // Flag to check if actual height is set
|
||||
adjustHeaderSize() {
|
||||
requestAnimationFrame(() => {
|
||||
this.headerHeight = this.commonF.getHeaderSize(this.logoImage);
|
||||
if (this.headerHeight > 0) { // Check if the height is valid
|
||||
this.isHeightSet = true;
|
||||
}
|
||||
this.cd.detectChanges(); // Trigger change detection
|
||||
});
|
||||
}
|
||||
}
|
||||
37
src/app/modules/common/sidebar/sidebar.component.html
Normal file
37
src/app/modules/common/sidebar/sidebar.component.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<div class="app-aside">
|
||||
<div>
|
||||
<div *ngIf="!MobileBreakpoints.checkMob()" class="ng-aside-brand" [ngClass]="{'ng-asidebar-active': ChcekSidebar.activeSide == 'IsActive', 'ng-asidebar-inactive': ChcekSidebar.activeSide != 'IsActive'}">
|
||||
<div class="ng-brand-logo" [ngStyle]="{'height.px': headerHeight}">
|
||||
<img class="aside-logo" [src]="commonF.logo" #logoImage (load)="adjustHeaderSize()" />
|
||||
</div>
|
||||
<div class="ng-asideToggle" (click)="ChcekSidebar.SideBar('IsActive')">
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
|
||||
viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<polygon points="0 0 24 0 24 24 0 24"></polygon>
|
||||
<path
|
||||
d="M5.29288961,6.70710318 C4.90236532,6.31657888 4.90236532,5.68341391 5.29288961,5.29288961 C5.68341391,4.90236532 6.31657888,4.90236532 6.70710318,5.29288961 L12.7071032,11.2928896 C13.0856821,11.6714686 13.0989277,12.281055 12.7371505,12.675721 L7.23715054,18.675721 C6.86395813,19.08284 6.23139076,19.1103429 5.82427177,18.7371505 C5.41715278,18.3639581 5.38964985,17.7313908 5.76284226,17.3242718 L10.6158586,12.0300721 L5.29288961,6.70710318 Z"
|
||||
fill="var(--primary-theme)" fill-rule="nonzero"
|
||||
transform="translate(8.999997, 11.999999) scale(-1, 1) translate(-8.999997, -11.999999) "></path>
|
||||
<path
|
||||
d="M10.7071009,15.7071068 C10.3165766,16.0976311 9.68341162,16.0976311 9.29288733,15.7071068 C8.90236304,15.3165825 8.90236304,14.6834175 9.29288733,14.2928932 L15.2928873,8.29289322 C15.6714663,7.91431428 16.2810527,7.90106866 16.6757187,8.26284586 L22.6757187,13.7628459 C23.0828377,14.1360383 23.1103407,14.7686056 22.7371482,15.1757246 C22.3639558,15.5828436 21.7313885,15.6103465 21.3242695,15.2371541 L16.0300699,10.3841378 L10.7071009,15.7071068 Z"
|
||||
fill="var(--primary-theme)" fill-rule="nonzero" opacity="0.3"
|
||||
transform="translate(15.999997, 11.999999) scale(-1, 1) rotate(-270.000000) translate(-15.999997, -11.999999) ">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ng-asidebar MobSideBar" [ngClass]="{
|
||||
'ng-asidebar-active': ChcekSidebar.activeSide == 'IsActive'}">
|
||||
<p-panelMenu [multiple]="false" [model]="asideItems"> </p-panelMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Overlay" *ngIf="MobileBreakpoints.checkMob()" (click)="ChcekSidebar.SideBar('IsActive')"
|
||||
[ngClass]="{ show: ChcekSidebar.activeSide == 'IsActive' }"></div>
|
||||
<!-- MobileBreakpoints.checkMob() for mobile show -->
|
||||
<!-- !MobileBreakpoints.checkMob() for mobile Hide -->
|
||||
193
src/app/modules/common/sidebar/sidebar.component.ts
Normal file
193
src/app/modules/common/sidebar/sidebar.component.ts
Normal file
@@ -0,0 +1,193 @@
|
||||
import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
import { ActiveSidebarService } from 'src/app/core/services/active-sidebar.service';
|
||||
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { BreakpointsService } from 'src/app/core/services/breakpoints.services';
|
||||
import { API } from 'src/app/core/services/api.service';
|
||||
import { securityFunctions } from 'src/app/core/common/security';
|
||||
import { CommonFunctionService } from 'src/app/core/common/common-function.service';
|
||||
@Component({
|
||||
templateUrl: './sidebar.component.html',
|
||||
selector: 'side-bar',
|
||||
})
|
||||
export class SideBarComponent implements OnInit {
|
||||
@ViewChild('logoImage') logoImage: ElementRef<HTMLImageElement>;
|
||||
|
||||
router: any;
|
||||
flag: boolean = true;
|
||||
// mobile resposive start
|
||||
isMobile = false;
|
||||
// mobile resposive end
|
||||
constructor(
|
||||
public ChcekSidebar: ActiveSidebarService,
|
||||
public MobileBreakpoints: BreakpointsService,
|
||||
private cd: ChangeDetectorRef, // mobile resposive end,
|
||||
private ApiSer: API,
|
||||
public commonF: CommonFunctionService,
|
||||
) {
|
||||
// mobile resposive start
|
||||
this.MobileBreakpoints.IsMobile.subscribe({
|
||||
next: (val) => {
|
||||
this.isMobile = val;
|
||||
},
|
||||
});
|
||||
// mobile resposive end
|
||||
}
|
||||
|
||||
asideItems!: MenuItem[];
|
||||
ngOnInit(): void {
|
||||
|
||||
// this.asideItems = [
|
||||
// {
|
||||
// label: 'Bookings',
|
||||
// icon: 'pi pi-pw pi-file',
|
||||
// items: [
|
||||
// {
|
||||
// label: 'Search Hotel Booking',
|
||||
// icon: 'pi',
|
||||
// routerLink: '/BookingManagement/HotelBooking/Search',
|
||||
// },
|
||||
// {
|
||||
// label: 'Search Experience Booking',
|
||||
// icon: 'pi',
|
||||
// routerLink: '/BookingManagement/ExperienceBooking/Search',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// label: 'Services',
|
||||
// icon: 'pi pi-fw pi-th-large',
|
||||
// items: [
|
||||
// {
|
||||
// label: 'Hotels',
|
||||
// icon: 'pi ',
|
||||
// routerLink: '/Services/HotelServices/Search',
|
||||
// },
|
||||
// {
|
||||
// label: 'Activity',
|
||||
// icon: 'pi ',
|
||||
// items: [
|
||||
// {
|
||||
// label: 'Experience',
|
||||
// icon: 'pi ',
|
||||
// routerLink: '/Services/ActivityServices/ExpServices/Search',
|
||||
// },
|
||||
// {
|
||||
// label: 'Hotel Zone',
|
||||
// icon: 'pi ',
|
||||
// routerLink: '/Services/ActivityServices/HotelZone/Search',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// label: 'Flights',
|
||||
// icon: 'pi ',
|
||||
// routerLink: '/Services/FlightServices/Search',
|
||||
// },
|
||||
// {
|
||||
// label: 'Flight Inventory',
|
||||
// icon: 'pi ',
|
||||
// routerLink: '/Services/FlightInventory/Search',
|
||||
// },
|
||||
// {
|
||||
// label: 'Flight Inventory Report',
|
||||
// icon: 'pi ',
|
||||
// routerLink: 'Services/FlightInventoryReport/Search',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// label: 'User Configuration',
|
||||
// icon: 'pi pi-fw pi-users',
|
||||
// items: [
|
||||
// {
|
||||
// label: 'Role Management',
|
||||
// icon: 'pi ',
|
||||
// routerLink: '/UserConfiguration/RoleManagement/Search',
|
||||
// },
|
||||
// {
|
||||
// label: 'User Management',
|
||||
// icon: 'pi ',
|
||||
// routerLink: '/UserConfiguration/UserManagement/Search',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ];
|
||||
this.isMobile == true
|
||||
? (this.ChcekSidebar.activeSide = '')
|
||||
: (this.ChcekSidebar.activeSide = 'IsActive');
|
||||
this.getMenus().subscribe(res => {
|
||||
if (res) {
|
||||
this.commonF.CheckActiveTabMenus(res);
|
||||
this.BindMenu(res);
|
||||
}
|
||||
})
|
||||
this.cd.detectChanges();
|
||||
|
||||
}
|
||||
getMenuss() {
|
||||
let LoginUserData = securityFunctions.getSessionStorage('LoginUserData') ? JSON.parse(securityFunctions.getSessionStorage('LoginUserData')) : null;
|
||||
return this.ApiSer.AdminGet(`/MenuMasterNew/GetMenuMasterNewsByOrgId/2405170833594899108/${LoginUserData.user_id}`)
|
||||
}
|
||||
getMenus() {
|
||||
let LoginUserData = securityFunctions.getSessionStorage('LoginUserData') ? JSON.parse(securityFunctions.getSessionStorage('LoginUserData')) : null;
|
||||
return this.ApiSer.AdminGet('/MenuMasterNew/GetAllMenuByUserId/' + LoginUserData.user_id + '/2405170833594899108')
|
||||
}
|
||||
BindMenu(list) {
|
||||
let aisemenu = [];
|
||||
let FliterList = list.sort(function (a, b) { return a.sequence - b.sequence; });
|
||||
let AllParentlist = list.filter(e => e.parent_id == '');
|
||||
AllParentlist.forEach(e => {
|
||||
if (e.menu_type == '2305170833594899101' && !e.is_tab_wise_menu) {
|
||||
aisemenu.push({
|
||||
label: e.menu_name,
|
||||
icon: e.ng_icon == null ? 'pi pi-fw pi-pencil' : 'pi pi-fw ' + e.ng_icon,
|
||||
items: []
|
||||
});
|
||||
} else if(!e.is_hide_in_side_menu){
|
||||
aisemenu.push({ label: e.menu_name, icon: ' ', routerLink: '/' + e.ui_controller + '/' + e.ui_action, command: (event) => { this.isMobile ? this.ChcekSidebar.SideBar('IsActive') : '' } });
|
||||
}
|
||||
let index = aisemenu.length - 1;
|
||||
let submenu = FliterList.filter(s => s.parent_id == e.menu_id);
|
||||
if (submenu.length > 0) {
|
||||
this.subMenu(aisemenu[index], submenu, FliterList);
|
||||
}
|
||||
});
|
||||
this.asideItems = aisemenu;
|
||||
};
|
||||
|
||||
subMenu(menu, FilterSubmenu, Allmenu) {
|
||||
if (FilterSubmenu.length > 0) {
|
||||
FilterSubmenu.forEach(e => {
|
||||
if (e.menu_type == '2305170833594899101' && !e.is_tab_wise_menu) {
|
||||
menu.items.push({
|
||||
label: e.menu_name,
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: []
|
||||
});
|
||||
} else if(!e.is_hide_in_side_menu){
|
||||
menu.items.push(
|
||||
{ label: e.menu_name, icon: ' ', routerLink: '/' + e.ui_controller + '/' + e.ui_action, command: (event) => { this.isMobile ? this.ChcekSidebar.SideBar('IsActive') : '' } }
|
||||
);
|
||||
}
|
||||
let index = menu.items.length - 1;
|
||||
let submenu = Allmenu.filter(a => a.parent_id == e.menu_id && !e.is_tab_wise_menu);
|
||||
if (submenu.length > 0) {
|
||||
this.subMenu(menu.items[index], submenu, Allmenu);
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
headerHeight; // Default height
|
||||
isHeightSet: boolean = false; // Flag to check if actual height is set
|
||||
adjustHeaderSize() {
|
||||
requestAnimationFrame(() => {
|
||||
this.headerHeight = this.commonF.getHeaderSize(this.logoImage);
|
||||
if (this.headerHeight > 0) { // Check if the height is valid
|
||||
this.isHeightSet = true;
|
||||
}
|
||||
this.cd.detectChanges(); // Trigger change detection
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user