Merged branch exports-module into master

package.json

@@ -14,31 +14,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/core": "^4.1.0",
-    "@angular/animations": "4.1.0",
-    "@angular/common": "^4.1.0",
-    "@angular/compiler": "^4.1.0",
-    "@angular/forms": "^4.1.0",
-    "@angular/http": "^4.1.0",
-    "@angular/platform-browser": "^4.1.0",
-    "@angular/platform-browser-dynamic": "^4.1.0",
-    "@angular/router": "^4.1.0",
+    "@angular/animations": "4.1.3",
+    "@angular/common": "^4.1.3",
+    "@angular/compiler": "^4.1.3",
+    "@angular/core": "^4.1.3",
+    "@angular/forms": "^4.1.3",
+    "@angular/http": "^4.1.3",
+    "@angular/platform-browser": "^4.1.3",
+    "@angular/platform-browser-dynamic": "^4.1.3",
+    "@angular/router": "^4.1.3",
     "angular-in-memory-web-api": "^0.3.1",
     "chart.js": "2.1.3",
+    "content-disposition": "^0.5.2",
     "core-js": "^2.4.1",
+    "file-saver": "^1.3.3",
     "font-awesome": "^4.7.0",
-    "primeng": "^4.0.0",
-    "rxjs": "^5.2.0",
-    "zone.js": "^0.8.4",
     "fullcalendar": "^3.1.0",
     "jquery": "^3.1.1",
     "moment": "^2.17.1",
     "nanoscroller": "0.8.7",
-    "quill": "^1.1.8"
+    "primeng": "^4.0.0",
+    "quill": "^1.1.8",
+    "rxjs": "^5.2.0",
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "@angular/cli": "1.0.2",
-    "@angular/compiler-cli": "^4.1.0",
+    "@angular/compiler-cli": "^4.1.3",
+    "@types/content-disposition": "^0.5.2",
+    "@types/file-saver": "0.0.1",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
     "codelyzer": "~2.0.0",

src/app/app-routing.module.ts

@@ -17,8 +17,12 @@ const appRoutes: Routes = [
     path: 'reports',
     loadChildren: 'app/reports/reports.module#ReportsModule'
   },
+  {
+    path: 'exports',
+    loadChildren: 'app/exports/exports.module#ExportsModule'
+  },
   //{ path: '**', component: PageNotFoundComponent }
-  { path: '**', redirectTo: '/reports' }
+  { path: '**', redirectTo: '/exports' }
 ];
 
 @NgModule({

src/app/app.menu.component.ts

@@ -28,8 +28,8 @@ export class AppMenuComponent implements OnInit {
           {label: 'Activities', icon: 'local_activity', url: ['/Activity']},
           {label: 'Sign-ins', icon: 'track_changes', url: ['/workersignin']},
           {label: 'Emails', icon: 'email', url: ['/email']},
-          {label: 'Reports', icon: 'subtitles', routerLink: ['/reports']}
-
+          {label: 'Reports', icon: 'subtitles', routerLink: ['/reports']},
+          {label: 'Exports', icon: 'file_download', routerLink: ['/exports']}
         ];
     }
 

src/app/exports/exports-options.component.html

@@ -0,0 +1,12 @@
+<div [formGroup]="form">
+  <p-dataTable  [value]="columns" [responsive]="true">
+    <p-column field="name" header="Column name"></p-column>
+    <p-column field="is_nullable" header="Contains nulls?"></p-column>
+    <p-column field="system_type_name" header="Data type"></p-column>
+    <p-column header="Include in export">
+      <ng-template let-foo="rowData" pTemplate="body">
+        <p-inputSwitch onLabel="Yes" offLabel="No" [(ngModel)]="foo.include" [formControlName]="foo.name"></p-inputSwitch>
+      </ng-template>
+    </p-column>
+  </p-dataTable>
+</div>

src/app/exports/exports-options.component.spec.ts

@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {ReactiveFormsModule, FormsModule, FormGroup} from '@angular/forms';
+import {DialogModule, InputSwitchModule, CalendarModule, DataTableModule, TabViewModule, DropdownModule} from 'primeng/primeng';
+
+import { ExportsOptionsComponent } from './exports-options.component';
+
+describe('ExportsOptionsComponent', () => {
+  let component: ExportsOptionsComponent;
+  let fixture: ComponentFixture<ExportsOptionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExportsOptionsComponent ],
+      imports: [
+        DataTableModule,
+        DropdownModule,
+        TabViewModule,
+        CalendarModule,
+        DialogModule,
+        InputSwitchModule,
+        FormsModule,
+        ReactiveFormsModule
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExportsOptionsComponent);
+    component = fixture.componentInstance;
+    component.form = new FormGroup({});
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/exports/exports-options.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { ExportColumn } from './models/export-column';
+import {FormGroup} from '@angular/forms';
+@Component({
+  selector: 'exports-options',
+  templateUrl: './exports-options.component.html',
+  styleUrls: ['./exports-options.component.css']
+})
+export class ExportsOptionsComponent implements OnInit {
+  @Input() columns: ExportColumn[] = [];
+  @Input() form: FormGroup;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/exports/exports-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {ExportsComponent} from './exports.component';
+
+const exportsRoutes: Routes = [
+  {
+    path: '',
+    component: ExportsComponent
+  }
+];
+@NgModule({
+  imports: [
+    RouterModule.forChild(exportsRoutes)
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+  ]
+})
+export class ExportsRoutingModule { }

src/app/exports/exports.component.html

@@ -0,0 +1,41 @@
+<h1>Exports</h1>
+<div class="ui-g" >
+  <div class="ui-g-12 ui-md-6">
+    <p-dropdown
+      id="exportsDD"
+      placeholder="Select a table"
+      [options]="exportsDropDown"
+      (onChange)="getColumns()"
+      [(ngModel)]="selectedExportName"
+      [filter]="true"
+      [style]="{'width':'10em'}"></p-dropdown>
+  </div>
+  <div class="ui-g-12 ui-md-6">
+    <p-dropdown
+      placeholder="date field for filter"
+      [options]="dateFilterDropDown"
+      [(ngModel)]="selectedDateFilter"
+      [style]="{'width':'10em'}"></p-dropdown>
+  </div>
+  <div class="ui-g-12 ui-md-4 ui-lg-3">
+    <p-calendar
+      placeholder="Start date"
+      [showIcon]="true"
+      [(ngModel)]="selectedStartDate"
+      dataType="string"></p-calendar>
+  </div>
+  <div class="ui-g-12 ui-md-4 ui-lg-3">
+    <p-calendar
+      placeholder="End date"
+      [showIcon]="true"
+      [(ngModel)]="selectedEndDate"
+      dataType="string"></p-calendar>
+  </div>
+  <div class="ui-g-12 ui-md-4 ui-lg-3">
+    <button pButton type="submit" label="Export" (click)="onSubmit()"></button>
+  </div>
+</div>
+<div>
+    <exports-options [columns]="selectedColumns" [form]="form"></exports-options>
+
+</div>

src/app/exports/exports.component.spec.ts

@@ -0,0 +1,55 @@
+import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import {DialogModule, CalendarModule, DataTableModule, TabViewModule, DropdownModule} from 'primeng/primeng';
+import {FormsModule} from '@angular/forms';
+import { ExportsComponent } from './exports.component';
+import {InMemoryWebApiModule} from 'angular-in-memory-web-api';
+import {InMemoryDataService} from '../in-memory-data.service';
+import {HttpModule} from '@angular/http';
+import {ExportsService} from './exports.service';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import { ExportsOptionsComponent } from './exports-options.component';
+describe('ExportsComponent', () => {
+  let component: ExportsComponent;
+  let fixture: ComponentFixture<ExportsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExportsComponent, ExportsOptionsComponent ],
+      providers: [ExportsService ],
+      imports: [
+        NoopAnimationsModule,
+        DataTableModule,
+        DropdownModule,
+        TabViewModule,
+        CalendarModule,
+        DialogModule,
+        FormsModule,
+        HttpModule,
+        InMemoryWebApiModule.forRoot(InMemoryDataService)
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExportsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should populate the export list',
+    async(inject([ExportsService], (service: ExportsService) => {
+      service.getExportsList()
+        .toPromise()
+        .then(rows => {
+          expect(rows.length).toBe(2, 'expected 2 in exports list');
+        });
+    }))
+  );
+
+
+});

src/app/exports/exports.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit } from '@angular/core';
+import {ExportsService} from './exports.service';
+import {MySelectItem} from '../reports/reports.component';
+import { Export } from './models/export';
+import {ExportColumn} from './models/export-column';
+import {Response} from '@angular/http';
+import { saveAs } from 'file-saver';
+import {FormControl, FormGroup, FormBuilder} from '@angular/forms';
+import * as contentDisposition from 'content-disposition';
+@Component({
+  selector: 'app-exports',
+  templateUrl: './exports.component.html',
+  styleUrls: ['./exports.component.css'],
+  providers: [ExportsService]
+})
+export class ExportsComponent implements OnInit {
+  exports: Export[];
+  dateFilterDropDown: MySelectItem[];
+  exportsDropDown: MySelectItem[];
+  errorMessage: string;
+  selectedColumns: ExportColumn[];
+  selectedExportName: string;
+  selectedDateFilter: string;
+  selectedStartDate: string;
+  selectedEndDate: string;
+  form: FormGroup;
+
+  constructor(private exportsService: ExportsService, private _fb: FormBuilder)
+  {
+    this.form = new FormGroup({});
+  }
+
+  ngOnInit() {
+    this.exportsService.getExportsList()
+      .subscribe(
+      listData => {
+        this.exports = listData;
+        this.exportsDropDown = listData.map(r =>
+          new MySelectItem(r.name, r.name));
+      },
+      error => this.errorMessage = <any>error,
+      () => console.log('exports.component: ngOnInit onCompleted'));
+  }
+
+  getColumns() {
+    this.exportsService.getColumns(this.selectedExportName)
+      .subscribe(
+        data => {
+          this.selectedColumns = data;
+          this.dateFilterDropDown = data.filter(f => f.system_type_name === 'datetime')
+            .map(r =>
+              new MySelectItem(r.name, r.name));
+          const group: any = {};
+          data.forEach(col => {
+            group[col.name] = new FormControl(true);
+          });
+          this.form = new FormGroup(group);
+        },
+        error => this.errorMessage = <any>error,
+        () => console.log('exportsService.getColumns completed')
+      );
+  }
+
+  onSubmit()
+  {
+    let data = Object.assign( {
+      beginDate: this.selectedStartDate,
+      endDate: this.selectedEndDate,
+      filterField: this.selectedDateFilter
+    }, this.form.value);
+    console.log(this.form.value);
+    this.exportsService.getExport(this.selectedExportName, data)
+      .subscribe((res: Response) => {
+        this.downloadFile(res['_body'],
+          this.getFilename(res.headers.get('content-disposition')),
+          res['_body'].type);
+      }
+      ),
+      error => this.errorMessage = <any>error,
+      () => console.log('exportsService.getColumns completed');
+  }
+
+  downloadFile(data: any, fileName: string, ttype: string) {
+    const blob = new Blob([data], {type: ttype});
+    saveAs(blob, fileName);
+  }
+
+  getFilename(content: string): string {
+    return contentDisposition.parse(content).parameters['filename'];
+  }
+}

src/app/exports/exports.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ExportsComponent } from './exports.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { JsonpModule } from '@angular/http';
+import {ExportsRoutingModule} from './exports-routing.module';
+import {
+  ButtonModule, DropdownModule, DataTableModule, SharedModule, ChartModule,
+  DialogModule, TabViewModule, CalendarModule, InputTextareaModule, InputSwitchModule
+} from 'primeng/primeng';
+import { ExportsOptionsComponent } from './exports-options.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    JsonpModule,
+    TabViewModule,
+    ChartModule,
+    DataTableModule,
+    SharedModule,
+    CalendarModule,
+    ButtonModule,
+    DropdownModule,
+    DialogModule,
+    InputSwitchModule,
+    InputTextareaModule,
+    ExportsRoutingModule
+  ],
+  declarations: [ExportsComponent, ExportsOptionsComponent]
+})
+export class ExportsModule {
+  constructor() {
+    console.log('ExportsModule-ctor');
+  }
+}