bugfixes for stepper and data-table (#108)

* bugfix for td-step where vertical line doesnt apply the correct height when step is inactive * update(data-table): follow spec better for header/footer + bugfixes * added additional code-health for http forkJoin * bugfix(file-drop): removed 'drop-zone' class on drop + fixed on drag event/leave methods
Teradata · Oct 24, 2016 · 9ea75f3 · 9ea75f3
1 parent 773cffd
commit 9ea75f3
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 36 deletions.
diff --git a/src/platform/core/steps/steps.component.scss b/src/platform/core/steps/steps.component.scss
@@ -12,7 +12,8 @@ $background: $md-light-theme-background;
 }
 
 .td-line-wrapper {
-  width: 24px;  
+  width: 24px;
+  min-height: 1px;
 }
 
 .td-horizontal-line {

diff --git a/src/platform/data-table/_data-table-theme.scss b/src/platform/data-table/_data-table-theme.scss
@@ -10,6 +10,12 @@ $accent: md-palette($md-light-blue, 50);
 .md-row {
   border-bottom-color: md-color($foreground, divider);
 }
+.td-data-table-header,
+.td-data-table-footer {
+  button[md-icon-button] {
+    color: md-color($foreground, secondary-text);
+  }
+}
 .md-checkbox-cell,
 .md-checkbox-column {
   color: md-color($foreground, secondary-text);

diff --git a/src/platform/data-table/data-table.component.html b/src/platform/data-table/data-table.component.html
@@ -1,12 +1,11 @@
-<div layout="row" layout-align="start center" *ngIf="_title && !_searchVisible">
-  <span class="md-subhead">{{_title}}</span>
+<div class="td-data-table-header" layout="row" layout-align="start center" *ngIf="(title || _search) && !_searchVisible">
+  <span class="md-title">{{title}}</span>
   <span flex></span>
-  <button md-icon-button (click)="toggleSearch()">
-    <md-icon *ngIf="_search">filter_list</md-icon>
+  <button md-icon-button *ngIf="_search" (click)="toggleSearch()">
+    <md-icon>filter_list</md-icon>
   </button>
 </div>
-
-<div layout="row" layout-align="start center" *ngIf="_searchVisible">
+<div class="td-data-table-header" layout="row" layout-align="start center" *ngIf="_searchVisible">
   <md-icon>search</md-icon>
   <form flex layout="row" name="filter.form">
     <md-input flex #searchTerm id="search" name="search" type="text" [formControl]="_searchTermControl">
@@ -79,22 +78,18 @@
   </table>
 </div>
 
-<div class="md-body-1" *ngIf="_visibleData.length < 1">
-  No results
+<div class="md-padding" *ngIf="!hasData && _search" layout="row" layout-align="center center">
+  <h3>No results.</h3>
 </div>
 
-<div layout="row" layout-align="end center" class="md-caption md-table-pagination" *ngIf="_pagination && hasData">
-  <span>
+<div layout="row" layout-align="end center" class="md-caption md-table-pagination td-data-table-footer" *ngIf="_pagination && hasData">
+  <span class="td-data-table-pages">
     {{ _currentPage }} of {{ _totalPages }}
   </span>
   <button md-icon-button (click)="prevPage()">
-    <md-icon *ngIf="_search">keyboard_arrow_left</md-icon>
+    <md-icon>keyboard_arrow_left</md-icon>
   </button>
   <button md-icon-button (click)="nextPage()">
-    <md-icon *ngIf="_search">keyboard_arrow_right</md-icon>
+    <md-icon>keyboard_arrow_right</md-icon>
   </button>
-</div>
-
-<div class="md-body-1" *ngIf="_pagination && !hasData">
-  No pages
 </div>
diff --git a/src/platform/data-table/data-table.component.scss b/src/platform/data-table/data-table.component.scss
@@ -10,6 +10,27 @@ $checkbox-size: 18px;
   -webkit-overflow-scrolling: touch;
 }
 
+.td-data-table-header {
+  height: 64px;
+  padding-left: 24px;
+}
+.td-data-table-footer {
+  height: 48px;
+  span.td-data-table-pages {
+    margin-left: 32px;
+    margin-right: 8px;
+  }
+}
+.td-data-table-header,
+.td-data-table-footer {
+  button[md-icon-button] {
+    margin-left: 16px;
+    &:last-child {
+      margin-right: 6px;
+    }
+  }
+}
+
 table.md-table {
   width: 100%;
   border-spacing: 0;

diff --git a/src/platform/data-table/data-table.component.ts b/src/platform/data-table/data-table.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewInit, Input, Output,
+import { Component, OnInit, Input, Output,
          EventEmitter, ViewChildren, QueryList, Renderer } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MdInput } from '@angular/material';
@@ -28,7 +28,7 @@ export interface ITdDataTableSortEvent {
   styleUrls: [ 'data-table.component.scss' ],
   templateUrl: 'data-table.component.html',
 })
-export class TdDataTableComponent implements OnInit, AfterViewInit {
+export class TdDataTableComponent implements OnInit {
 
   /** internal attributes */
   private _data: any[];
@@ -38,7 +38,6 @@ export class TdDataTableComponent implements OnInit, AfterViewInit {
   private _rowSelectionField: string = 'selected';
   private _multiple: boolean = true;
   private _search: boolean = false;
-  private _hasData: boolean = false;
   private _initialized: boolean = false;
 
   /** pagination */
@@ -63,7 +62,7 @@ export class TdDataTableComponent implements OnInit, AfterViewInit {
   @Output() sortChanged: EventEmitter<ITdDataTableSortEvent> = new EventEmitter<ITdDataTableSortEvent>();
 
   /** td-data-table element attributes */
-  @Input('title') _title: string;
+  @Input('title') title: string;
 
   @Input('data')
   set data(data: Object[]) {
@@ -174,7 +173,7 @@ export class TdDataTableComponent implements OnInit, AfterViewInit {
   }
 
   get hasData(): boolean {
-    return this._hasData;
+    return this._visibleData.length > 0;
   }
 
   constructor(private renderer: Renderer) {}
@@ -183,9 +182,6 @@ export class TdDataTableComponent implements OnInit, AfterViewInit {
     this._searchTermControl.valueChanges
       .debounceTime(250)
       .subscribe(this.searchTermChanged.bind(this));
-  }
-
-  ngAfterViewInit(): void {
     this.preprocessData();
     this._initialized = true;
     this.filterData();
@@ -323,8 +319,6 @@ export class TdDataTableComponent implements OnInit, AfterViewInit {
       this._totalPages = Math.ceil(this._visibleData.length / this._pageSize);
       this._visibleData = this._visibleData.slice(pageStart, pageEnd);
     }
-
-    this._hasData = this._visibleData.length > 0;
   }
 
 }
diff --git a/src/platform/file-upload/directives/file-drop.directive.ts b/src/platform/file-upload/directives/file-drop.directive.ts
@@ -61,12 +61,15 @@ export class TdFileDropDirective {
    */
   @HostListener('drop', ['$event'])
   onDrop(event: Event): void {
-    let transfer: DataTransfer = (<DragEvent>event).dataTransfer;
-    let files: FileList = transfer.files;
-    if (files.length) {
-      let value: FileList | File = this._multiple ? (files.length > 1 ? files : files[0]) : files[0];
-      this.onFileDrop.emit(value);
+    if (!this._disabled) {
+      let transfer: DataTransfer = (<DragEvent>event).dataTransfer;
+      let files: FileList = transfer.files;
+      if (files.length) {
+        let value: FileList | File = this._multiple ? (files.length > 1 ? files : files[0]) : files[0];
+        this.onFileDrop.emit(value);
+      }
     }
+    this._renderer.setElementClass(this._element.nativeElement, 'drop-zone', false);
     this._stopEvent(event);
   }
 
@@ -94,7 +97,7 @@ export class TdFileDropDirective {
    */
   @HostListener('dragenter', ['$event'])
   onDragEnter(event: Event): void {
-    if (event.target === this._element.nativeElement && !this._disabled) {
+    if (!this._disabled) {
       this._renderer.setElementClass(this._element.nativeElement, 'drop-zone', true);
     }
     this._stopEvent(event);
@@ -106,9 +109,7 @@ export class TdFileDropDirective {
    */
   @HostListener('dragleave', ['$event'])
   onDragLeave(event: Event): void {
-    if (event.target === this._element.nativeElement && !this._disabled) {
-      this._renderer.setElementClass(this._element.nativeElement, 'drop-zone', false);
-    }
+    this._renderer.setElementClass(this._element.nativeElement, 'drop-zone', false);
     this._stopEvent(event);
   }
 

diff --git a/src/platform/http/http-interceptor.service.spec.ts b/src/platform/http/http-interceptor.service.spec.ts
@@ -5,6 +5,7 @@ import {
 } from '@angular/core/testing';
 import { Injector } from '@angular/core';
 import { XHRBackend, Response, ResponseOptions } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
 import { MockBackend } from '@angular/http/testing';
 import { HttpModule, Http } from '@angular/http';
 import { HttpInterceptorService } from './http-interceptor.service';
@@ -32,6 +33,35 @@ describe('Service: HttpInterceptor', () => {
     });
   }));
 
+  it('expect to do a forkJoin get succesfully with observables',
+    async(inject([HttpInterceptorService, MockBackend], (service: HttpInterceptorService, mockBackend: MockBackend) => {
+      mockBackend.connections.subscribe((connection: any) => {
+        connection.mockRespond(new Response(new ResponseOptions({
+            status: 200,
+            body: JSON.stringify('success')}
+        )));
+      });
+      let success: boolean = false;
+      let error: boolean = false;
+      let complete: boolean = false;
+
+      Observable.forkJoin(
+        service.get('testurl'),
+        service.get('testurl'))
+      .subscribe((response: Response[]) => {
+        success = true;
+      }, () => {
+        error = true;
+      }, () => {
+        complete = true;
+      });
+
+      expect(success).toBe(true, 'on success didnt execute with observables');
+      expect(error).toBe(false, 'on error executed when it shouldnt have with observables');
+      expect(complete).toBe(true, 'on complete didnt execute with observables');
+    })
+  ));
+
   it('expect to do a post succesfully with observables',
     async(inject([HttpInterceptorService, MockBackend], (service: HttpInterceptorService, mockBackend: MockBackend) => {
       mockBackend.connections.subscribe((connection: any) => {