@adlfe/campaign-management-library 2.10.0 → 2.10.2

package/projects/adl-campaign-management-library-internal-test/src/app/layout/component/header/header.component.ts

@@ -0,0 +1,129 @@
+import {
+	Component,
+	EventEmitter,
+	OnDestroy,
+	OnInit,
+	Output,
+} from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { BaseService } from '../../../base.service';
+import { ConfirmationModule } from '../../../ui/component/confirmation/confirmation.module';
+
+@Component({
+	selector: 'app-header',
+	templateUrl: './header.component.html',
+	styleUrls: ['./header.component.scss'],
+})
+export class HeaderComponent implements OnInit, OnDestroy {
+	public email: string;
+	public clientName: string;
+
+	private subscribers: Subscription[];
+
+	@Output()
+	public sidenavToggle: EventEmitter<void>;
+	previousUser: string;
+
+	constructor(
+		private router: Router,
+		private dialog: MatDialog,
+		private baseService: BaseService
+	) // private authService: AuthService
+	{
+		this.sidenavToggle = new EventEmitter();
+	}
+
+	ngOnInit(): void {
+		this.email = localStorage.getItem('telin.email');
+		this.clientName = localStorage.getItem('telin.clientName').charAt(0);
+		this.subscribers = [];
+		this.previousUser = localStorage.getItem('previousUser');
+	}
+
+	public onToggleSidenav(): void {
+		this.sidenavToggle.emit();
+	}
+
+	public doLogout(): void {
+		const confirmation = new ConfirmationModel();
+
+		confirmation.title = 'Logout';
+		confirmation.content = 'Are you sure want to log out?';
+		confirmation.btnSubmit = 'Yes';
+		confirmation.btnCancel = 'No';
+
+		const subs = this.dialog
+			.open(ConfirmationModule, {
+				autoFocus: false,
+				width: '325px',
+				backdropClass: 'overlay-backdrop-dialog',
+				data: {
+					confirmation,
+				},
+			})
+			.afterClosed()
+			.subscribe(resp => {
+				if (resp) {
+					// this.logoutService();
+				}
+			});
+
+		this.subscribers.push(subs);
+	}
+
+	public switchAccount(): void {
+		let previousUser = localStorage.getItem('previousUser');
+		localStorage.setItem('user', previousUser);
+		// this.authService.storeAccount(JSON.parse(previousUser));
+		window.location.replace('/');
+		localStorage.removeItem('previousUser');
+	}
+
+	public showPricing(): void {
+		this.router.navigate(['/secure/billing-management']);
+	}
+
+	// private logoutService(): void {
+	// 	const subs = this.baseService
+	// 		.postData(LogoutServicePathConst, null)
+	// 		.subscribe(resp => {
+	// 			if (resp) {
+	// 				this.authService.unauthorized();
+	// 			}
+	// 		});
+
+	// this.subscribers.push(subs);
+	// }
+
+	public redirectToSetting(): void {
+		this.router.navigate(['/secure/settings/profile']);
+	}
+
+	ngOnDestroy(): void {
+		this.subscribers.forEach(each => each.unsubscribe());
+	}
+}
+
+export class ConfirmationModel {
+	public title: string;
+	public content: string;
+	public btnSubmit: string;
+	public btnCancel: string;
+}
+
+function LogoutServicePathConst(LogoutServicePathConst: any, arg1: null) {
+	throw new Error('Function not implemented.');
+}
+function ConfirmationComponent(
+	ConfirmationComponent: any,
+	arg1: {
+		autoFocus: false;
+		width: string;
+		backdropClass: string;
+		data: { confirmation: ConfirmationModel };
+	}
+) {
+	throw new Error('Function not implemented.');
+}

package/projects/adl-campaign-management-library-internal-test/src/app/layout/component/header/index.ts

@@ -0,0 +1 @@
+export * from './header.component';

package/projects/adl-campaign-management-library-internal-test/src/app/layout/component/menu-list-item/index.ts

@@ -0,0 +1 @@
+export * from './menu-list-item.component';

package/projects/adl-campaign-management-library-internal-test/src/app/layout/component/menu-list-item/menu-list-item.component.html

@@ -0,0 +1,34 @@
+<a mat-list-item
+  class="menu-list-item"
+  [ngStyle]="{ 'padding-left': (depth * 12) + 'px' }"
+  [ngClass]="{
+		'sub-menu-1': item.level === 2,
+		'sub-menu-2': item.level === 3,
+		'active': item.target ? router.isActive(item.target, true): false,
+		'expanded': expanded,
+		'mb-2': item.level === 1
+	}"
+  (click)="onItemSelected(item)">
+
+  <mat-icon *ngIf="item.icon"
+    class="icon-menu"
+    style="margin-right: 15px"
+    [svgIcon]="router.isActive(item.target, true) || parentMenuActive() ? item.icon + '_active' : item.icon">
+  </mat-icon>
+
+  <span>
+    {{ item.name }}
+  </span>
+
+  <mat-icon *ngIf="item.subMenu && item.subMenu.length"
+    class="expand__icon ml-auto">
+    {{ expanded ? 'expand_less': 'expand_more' }}
+  </mat-icon>
+</a>
+<div *ngIf="expanded">
+  <app-menu-list-item *ngFor="let child of item.subMenu"
+    [item]="child"
+    [depth]="depth + 1"
+    (openSidenav)="openSidenavChild(child)">
+  </app-menu-list-item>
+</div>

package/projects/adl-campaign-management-library-internal-test/src/app/layout/component/menu-list-item/menu-list-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuListItemComponent } from './menu-list-item.component';
+
+describe('MenuListItemComponent', () => {
+  let component: MenuListItemComponent;
+  let fixture: ComponentFixture<MenuListItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MenuListItemComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuListItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/adl-campaign-management-library-internal-test/src/app/layout/component/menu-list-item/menu-list-item.component.ts

@@ -0,0 +1,79 @@
+import {
+	Component,
+	EventEmitter,
+	HostBinding,
+	Input,
+	OnInit,
+	Output,
+} from '@angular/core';
+import { Router } from '@angular/router';
+// import { NavigationModel } from '../../../core/model';
+
+@Component({
+	selector: 'app-menu-list-item',
+	templateUrl: './menu-list-item.component.html',
+	styleUrls: ['./menu-list-item.component.scss'],
+})
+export class MenuListItemComponent implements OnInit {
+	public expanded = false;
+
+	@HostBinding('attr.aria-expanded')
+	ariaExpanded = this.expanded;
+
+	@Input()
+	public item;
+
+	@Input()
+	public depth: number;
+
+	@Output()
+	public openSidenav: EventEmitter<boolean>;
+
+	constructor(public router: Router) {
+		this.openSidenav = new EventEmitter();
+
+		if (this.depth === undefined) {
+			this.depth = 0;
+		}
+	}
+
+	ngOnInit(): void {}
+
+	public onItemSelected(item): void {
+		if (item.subMenu.length || item.level === 2 || item.level === 3) {
+			this.openSidenav.emit(true);
+		}
+
+		if (!item.subMenu || !item.subMenu.length) {
+			this.router.navigate([item.target]);
+		}
+
+		if (item.subMenu && item.subMenu.length) {
+			this.expanded = !this.expanded;
+
+			if (item.target) {
+				this.router.navigate([item.target]);
+			}
+		}
+	}
+
+	public parentMenuActive(): boolean {
+		if (this.item.parentActive) {
+			const menu = this.item.parentActive.some(parent =>
+				window.location.href.includes(parent)
+			);
+
+			if (menu) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	public openSidenavChild(item): void {
+		if (item.subMenu.length || item.level === 2 || item.level === 3) {
+			this.openSidenav.emit(true);
+		}
+	}
+}

package/projects/adl-campaign-management-library-internal-test/src/app/layout/component/sidebar/index.ts

@@ -0,0 +1 @@
+export * from './sidebar.component';

package/projects/adl-campaign-management-library-internal-test/src/app/layout/component/sidebar/sidebar.component.html

@@ -0,0 +1,13 @@
+<div class="logo"
+	[ngClass]="{'mt-15px': !isOpen}">
+	<img src="../../../../assets/images/logo-white.png"
+		class="pointer"
+		routerLink="/secure/dashboard"
+		alt="Logo">
+</div>
+
+<mat-nav-list class="mb-4">
+	<app-menu-list-item *ngFor="let item of navigation"
+		[item]="item"
+		(openSidenav)="openSidenav($event)"></app-menu-list-item>
+</mat-nav-list>

package/projects/adl-campaign-management-library-internal-test/src/app/layout/component/sidebar/sidebar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/adl-campaign-management-library-internal-test/src/app/layout/component/sidebar/sidebar.component.ts

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+	selector: 'app-sidebar',
+	templateUrl: './sidebar.component.html',
+	styleUrls: ['./sidebar.component.scss'],
+})
+export class SidebarComponent implements OnInit {
+	public navigation = [];
+	public isOpen: boolean;
+
+	@Input()
+	set sidenavOpen(status: boolean) {
+		this.isOpen = status;
+
+		if (!status) {
+			this.navigation = null;
+
+			setTimeout(() => {
+				this.initMenu();
+			});
+		}
+	}
+
+	@Output()
+	public closeSidenav: EventEmitter<void>;
+
+	constructor() {
+		this.closeSidenav = new EventEmitter();
+	}
+
+	ngOnInit(): void {
+		this.initMenu();
+	}
+
+	private initMenu() {
+		const role = localStorage.getItem('telin.roleId');
+
+		if (role === 'OWNER') {
+			// return (this.navigation = [...OwnerConst]);
+		}
+
+		// return (this.navigation = [...NavigationConst]);
+	}
+
+	public openSidenav(isParent: any): void {
+		if (!isParent) {
+			return;
+		}
+
+		this.closeSidenav.emit();
+	}
+}

package/projects/adl-campaign-management-library-internal-test/src/app/layout/layout-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LayoutComponent } from './page/layout/layout.component';
+
+const routes: Routes = [
+	{
+		path: '',
+		component: LayoutComponent,
+		children: []
+    }
+];
+
+@NgModule({
+	imports: [RouterModule.forRoot(routes)],
+	exports: [RouterModule],
+})
+export class LayoutRoutingModule {}

package/projects/adl-campaign-management-library-internal-test/src/app/layout/layout.module.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { CampaignManagementModule } from 'projects/adl-campaign-management-library-internal/src/lib/campaign-management/campaign-management.module';
+import { AdlCampaignManagementLibraryInternalModule } from 'projects/adl-campaign-management-library-internal/src/public-api';
+import { BreadcrumbModule } from '../ui/component/breadcrumb/breadcrumb.module';
+import { ConfirmationModule } from '../ui/component/confirmation/confirmation.module';
+
+import { HeaderComponent } from './component/header';
+import { MenuListItemComponent } from './component/menu-list-item';
+import { SidebarComponent } from './component/sidebar';
+import { LayoutRoutingModule } from './layout-routing.module';
+import { LayoutComponent } from './page/layout';
+
+@NgModule({
+	declarations: [
+		LayoutComponent,
+		SidebarComponent,
+		HeaderComponent,
+		MenuListItemComponent,
+	],
+	imports: [
+		CommonModule,
+		AdlCampaignManagementLibraryInternalModule,
+		CampaignManagementModule,
+		LayoutRoutingModule,
+		MatToolbarModule,
+		MatButtonModule,
+		MatButtonToggleModule,
+		MatSidenavModule,
+		MatListModule,
+		MatIconModule,
+		MatMenuModule,
+		BreadcrumbModule,
+		ConfirmationModule,
+	],
+	exports: [LayoutComponent],
+})
+export class LayoutModule {}

package/projects/adl-campaign-management-library-internal-test/src/app/layout/page/layout/index.ts

@@ -0,0 +1 @@
+export * from './layout.component';

package/projects/adl-campaign-management-library-internal-test/src/app/layout/page/layout/layout.component.html

@@ -0,0 +1,19 @@
+<mat-sidenav-container class="sidebar">
+	<mat-sidenav #sidenav="matSidenav"
+		[mode]="side"
+		[opened]="opened"
+		role="navigation"
+		[ngClass]="{'sidenav__close': !sidenav.opened}">
+		<app-sidebar [sidenavOpen]="sidenav.opened"
+			(closeSidenav)="sidenav.open()"></app-sidebar>
+	</mat-sidenav>
+
+	<mat-sidenav-content [ngClass]="{'sidenav__content': !sidenav.opened}">
+		<app-header (sidenavToggle)="sidenav.toggle()"></app-header>
+
+		<main>
+			<!-- <router-outlet></router-outlet> -->
+      <lib-adl-campaign-management-library-internal></lib-adl-campaign-management-library-internal>
+		</main>
+	</mat-sidenav-content>
+</mat-sidenav-container>

package/projects/adl-campaign-management-library-internal-test/src/app/layout/page/layout/layout.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LayoutComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/adl-campaign-management-library-internal-test/src/app/layout/page/layout/layout.component.ts

@@ -0,0 +1,31 @@
+import { Component, HostListener, OnInit } from '@angular/core';
+import { MatDrawerMode } from '@angular/material/sidenav';
+
+@Component({
+	selector: 'app-layout',
+	templateUrl: './layout.component.html',
+	styleUrls: ['./layout.component.scss'],
+})
+export class LayoutComponent implements OnInit {
+	public side: MatDrawerMode;
+	public opened: boolean;
+	public isDesktop: boolean;
+
+	@HostListener('window:resize')
+	private onResize(): void {
+		this.isResolution(window.innerWidth);
+	}
+
+	constructor() {}
+
+	ngOnInit(): void {
+		this.isResolution(window.innerWidth);
+	}
+
+	private isResolution(width: number): void {
+		this.isDesktop = width >= 768;
+
+		this.opened = this.isDesktop;
+		this.side = this.isDesktop ? 'side' : 'over';
+	}
+}

package/projects/adl-campaign-management-library-internal-test/src/app/layout/shared/enum/index.ts

@@ -0,0 +1 @@
+export * from "./user-role.enum";

package/projects/adl-campaign-management-library-internal-test/src/app/layout/shared/enum/user-role.enum.ts

@@ -0,0 +1,4 @@
+export enum UserRoleEnum {
+  Owner = "OWNER",
+  Admin = "ADMIN",
+}

package/projects/adl-campaign-management-library-internal-test/src/app/ui/component/breadcrumb/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,24 @@
+<nav aria-label="breadcrumb"
+	class="nav__breadcrumb">
+	<ol class="breadcrumb font-18px">
+		<li class="breadcrumb-item"
+			[ngClass]="{ 'active': lastIndex }"
+			*ngFor="let item of breadcrumbs; let lastIndex = last">
+
+			<!-- [routerLink]="[item.path, params]"
+				routerLinkActive="active" -->
+			<a *ngIf="lastIndex; else notLastIndex">
+				{{ item.title }}
+			</a>
+
+			<!-- [routerLink]="[item.path]"
+				routerLinkActive="active" -->
+			<ng-template #notLastIndex>
+				<a *ngIf="!lastIndex">
+					{{ item.title }}
+				</a>
+			</ng-template>
+
+		</li>
+	</ol>
+</nav>

package/projects/adl-campaign-management-library-internal-test/src/app/ui/component/breadcrumb/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+import {
+	ActivatedRoute,
+	NavigationEnd,
+	PRIMARY_OUTLET,
+	Router,
+} from '@angular/router';
+import { filter, map } from 'rxjs/operators';
+
+@Component({
+	selector: 'app-breadcrumb',
+	templateUrl: './breadcrumb.component.html',
+	styleUrls: ['./breadcrumb.component.scss'],
+})
+export class BreadcrumbComponent implements OnInit {
+	public currentUrl: string;
+	public breadcrumbs: any[];
+	public params: any;
+
+	constructor(
+		private router: Router,
+		private activatedRoute: ActivatedRoute
+	) {
+		this.getBreadcrumb();
+	}
+
+	ngOnInit(): void {}
+
+	private getBreadcrumb(): void {
+		this.router.events
+			.pipe(filter(event => event instanceof NavigationEnd))
+			.pipe(map(() => this.activatedRoute))
+			.pipe(
+				map(route => {
+					while (route.firstChild) {
+						route = route.firstChild;
+					}
+					return route;
+				})
+			)
+			.pipe(filter(route => route.outlet === PRIMARY_OUTLET))
+			.subscribe(route => {
+				const data = route.snapshot.data;
+				const params = route.snapshot.queryParams;
+
+				if (data) {
+					this.createBreadcrumbs(data.breadcrumb, params);
+				}
+			});
+	}
+
+	private createBreadcrumbs(data: any[], params: any): void {
+		if (!data) {
+			this.breadcrumbs = [];
+			return;
+		}
+
+		this.breadcrumbs = data.reduce((result, each) => {
+			this.isCurrentUrl(each.path);
+
+			result.push(each);
+			return result;
+		}, []);
+		this.params = params;
+	}
+
+	private isCurrentUrl(path: string): void {
+		const urlWithParam = this.router.url.includes('?');
+
+		if (urlWithParam) {
+			const urlSplit = this.router.url.split('?');
+
+			this.currentUrl = urlSplit[0] === path ? urlSplit[0] : null;
+		} else {
+			this.currentUrl = this.router.url === path ? this.router.url : null;
+		}
+	}
+}

package/projects/adl-campaign-management-library-internal-test/src/app/ui/component/breadcrumb/breadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumb.component';

package/projects/adl-campaign-management-library-internal-test/src/app/ui/component/breadcrumb/breadcrumb.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BreadcrumbComponent } from './breadcrumb';
+
+@NgModule({
+	declarations: [BreadcrumbComponent],
+	imports: [CommonModule, RouterModule],
+	exports: [BreadcrumbComponent],
+})
+export class BreadcrumbModule {}