Raptor user interface code in Angular

Issue-ID: PORTAL-725

Signed-off-by: mravula <mr257h@att.com>
Change-Id: I0ceaf52026ba43b8f16e1e904643dccec74df09c

4 files changed, 237 insertions, 0 deletions

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.css
new file mode 100644
index 00000000..434bd917
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.css
@@ -0,0 +1,6 @@
+/* .mat-tab-group {
+    margin-bottom: 48px;
+  } */
+
+
+  
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.html
new file mode 100644
index 00000000..da1ac250
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.html
@@ -0,0 +1,34 @@
+<!-- <nav mat-tab-nav-bar>
+        <a mat-tab-link
+           *ngFor="let link of navLinks"
+           [routerLink]="link.path"
+           routerLinkActive #rla="routerLinkActive"
+           [active]="rla.isActive">
+          {{link.label}}
+        </a>
+      </nav> -->
+    
+    
+    <!-- 
+    <app-pilot-page></app-pilot-page> -->
+    
+    
+<!-- <router-outlet></router-outlet> -->
+
+<!-- <mat-tab-group>
+  <mat-tab *ngFor="let tab of asyncTabs | async">
+    <ng-template mat-tab-label>{{tab.label}}</ng-template>
+    {{tab.content}}
+  </mat-tab>
+</mat-tab-group> -->
+
+<mat-tab-group>
+  <mat-tab label="Definition"><app-definition [reportId]="reportId" [reportMode]="reportMode"></app-definition></mat-tab>
+  <mat-tab label="SQL"><app-sqlcomponent [reportId]="reportId" [reportMode]="reportMode"></app-sqlcomponent></mat-tab>
+  <mat-tab label="Colums"><app-columns [reportId]="reportId"></app-columns></mat-tab>
+  <mat-tab label="Form Fields"><app-form-fields [reportId]="reportId"></app-form-fields></mat-tab>
+  <mat-tab label="Chart Wizard"><app-chart-wizard [reportId]="reportId"></app-chart-wizard></mat-tab>
+  <mat-tab label="Security"><app-security [reportId]="reportId"></app-security></mat-tab>
+  <mat-tab label="Log"><app-log [reportId]="reportId"></app-log></mat-tab>
+  <mat-tab label="Run"><app-run [reportId]="reportId"></app-run></mat-tab>
+</mat-tab-group>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.spec.ts
new file mode 100644
index 00000000..d297fa06
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderTabsComponent } from './header-tabs.component';
+
+describe('MainComponentComponent', () => {
+  let component: HeaderTabsComponent;
+  let fixture: ComponentFixture<HeaderTabsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderTabsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderTabsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.ts
new file mode 100644
index 00000000..c2c89780
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.ts
@@ -0,0 +1,172 @@
+import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import { environment } from '../../../../../environments/environment';
+import {MatTabChangeEvent, VERSION} from '@angular/material';
+import { Observable, Observer } from 'rxjs';
+
+
+export interface ExampleTab {
+  label: string;
+  content: any;
+}
+
+
+
+@Component({
+  selector: 'app-header-tabs-component',
+  templateUrl: './header-tabs.component.html',
+  styleUrls: ['./header-tabs.component.css']
+})
+export class HeaderTabsComponent implements OnInit {
+
+  asyncTabs: Observable<ExampleTab[]>;
+
+  @Input("reportId") reportId : string;
+  @Input ("reportMode") reportMode : string;
+
+  finalReportId : string;
+  repMode : string;
+  navLinks : {}[];
+
+  tabChanged : any;
+  
+  constructor(private _router : Router) {
+
+    this.asyncTabs = new Observable((observer: Observer<ExampleTab[]>) => {
+      setTimeout(() => {
+        observer.next([
+          {label: 'Definition', content: '<app-pilot-page [reportId]="reportId"></app-pilot-page>'},
+         
+        ]);
+      }, 1000);
+    });
+    
+    //console.log(this.reportId);
+    if(this.reportId == "" && this.reportMode=="")
+    {
+      this.finalReportId = "-1";
+      this.repMode = "Create";
+      
+      this.reportId = "-1";
+      this.reportMode = "Create";
+      console.log(this.finalReportId, this.repMode);
+    }
+    else
+    {
+      if(this.reportId !== undefined && this.reportMode !== undefined)
+      {
+        this.finalReportId = this.reportId;
+        this.repMode = this.reportMode;
+        console.log(this.finalReportId, this.repMode);
+      }
+    }
+
+   
+   }
+
+  ngOnInit() {
+
+
+    if(this.reportId == "" && this.reportMode=="")
+    {
+      this.finalReportId = "-1";
+      this.repMode = "Create";
+
+      this.reportId = "-1";
+      this.reportMode = "Create";
+      console.log(this.finalReportId, this.repMode);
+    }
+    else
+    {
+      if(this.reportId !== undefined && this.reportMode !== undefined)
+      {
+        this.finalReportId = this.reportId;
+        this.repMode = this.reportMode;
+        console.log(this.finalReportId, this.repMode);
+      }
+    }
+   }
+
+   ngAfterViewInit()
+   {
+    //console.log(this.reportId);
+
+   
+
+    if(this.reportId == "" && this.reportMode=="")
+    {
+      this.finalReportId = "-1";
+      this.repMode = "Create";
+      
+      this.reportId = "-1";
+      this.reportMode = "Create";
+      console.log(this.finalReportId, this.repMode);
+    }
+    else
+    {
+      if(this.reportId !== undefined && this.reportMode !== undefined)
+      {
+        this.finalReportId = this.reportId;
+        this.repMode = this.reportMode;
+        console.log(this.finalReportId, this.repMode);
+      }
+    }
+   }
+
+   ngDoCheck()
+   {
+    // var id = this.finalReportId;
+    //  console.log(this.finalReportId);
+
+    this.tabChanged = (tabChangeEvent: MatTabChangeEvent): void => {
+      console.log('tabChangeEvent => ', tabChangeEvent);
+      console.log('index => ', tabChangeEvent.index);
+    };
+   }
+
+   ngOnChanges(changes: SimpleChanges)
+   {
+    this.tabChanged = (tabChangeEvent: MatTabChangeEvent): void => {
+      console.log('tabChangeEvent => ', tabChangeEvent);
+      console.log('index => ', tabChangeEvent.index);
+    };
+
+    // this.navLinks = [{
+    //   path : "definition/" + changes["reportId"]["currentValue"],
+    //   label : "Definition"
+    // },  
+    // {
+    //   path : "sql",
+    //   label : "SQL"
+    // },
+    // {
+    //   path : "columns",
+    //   label : "Columns"
+    // },
+    // {
+    //   path : "formFields",
+    //   label : "Form Fields"
+    // },
+    // {
+    //   path : "chartWizard",
+    //   label : "Chart Wizard"
+    // },
+    // {
+    //   path : "security",
+    //   label : "Security"
+    // },
+    // {
+    //   path : "log",
+    //   label : "Log"
+    // },
+    // {
+    //   path : "run/" + changes["reportId"]["currentValue"],
+    //   label : "Run"
+    // }];
+      console.log(changes);
+
+      // this._router.navigate(["search/definition", 7]);  
+   }
+  
+
+}