TSK-451-457 Fix pagination bugs

2018-04-25 14:59:54 +02:00 · 2018-04-25 14:59:54 +02:00 · 74b61ccaa9
parent 4794ec97fc
commit 74b61ccaa9
15 changed files with 129 additions and 68 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -1694,6 +1694,13 @@
      "requires": {
        "chartjs-color": "2.2.0",
        "moment": "2.18.1"
+      },
+      "dependencies": {
+        "moment": {
+          "version": "2.18.1",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
+          "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
+        }
      }
    },
    "chartjs-color": {
@ -7366,9 +7373,10 @@
      }
    },
    "moment": {
-      "version": "2.18.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
-      "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz",
+      "integrity": "sha512-shJkRTSebXvsVqk56I+lkb2latjBs8I+pc2TzWc545y2iFnSjm7Wg0QMh+ZWcdSLQyGEau5jI8ocnmkyTgr9YQ==",
+      "dev": true
    },
    "move-concurrently": {
      "version": "1.0.1",
@ -7492,6 +7500,12 @@
        "chart.js": "2.7.1"
      }
    },
+    "ng2-mock-component": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ng2-mock-component/-/ng2-mock-component-0.1.1.tgz",
+      "integrity": "sha512-HPcn61Wfmcmg2swJ4chqwGueTVkqz0PpnsTriLqMFblaW1/p1tthL9yKpa8TQpcwGSih2NI2Hb7IcQiMlC+E0w==",
+      "dev": true
+    },
    "ngx-bootstrap": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.1.tgz",
@ -10798,6 +10812,23 @@
        }
      }
    },
+    "ts-mockito": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ts-mockito/-/ts-mockito-2.3.0.tgz",
+      "integrity": "sha512-IB37YP8DppTHUf/aJeayUa7fZp7mn7HK+NYalzdyoy0z0vOpZwO+HiUKLUkK+c9ERcRlOdwm8Do99ndYsvm+Bw==",
+      "dev": true,
+      "requires": {
+        "lodash": "4.17.10"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.10",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+          "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
+          "dev": true
+        }
+      }
+    },
    "ts-node": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-4.1.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -55,7 +55,10 @@
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-phantomjs-launcher": "1.0.4",
+    "moment": "2.22.1",
+    "ng2-mock-component": "^0.1.1",
    "protractor": "5.2.2",
+    "ts-mockito": "^2.3.0",
    "ts-node": "4.1.0",
    "tslint": "5.9.1",
    "typescript": "2.5.3"
--- a/web/src/app/administration/classification/master/list/classification-list.component.scss
+++ b/web/src/app/administration/classification/master/list/classification-list.component.scss
@ -1,5 +1,5 @@
 .classification-list-full-height {
-  height: calc(100vh - 55px);
+  height: calc(100vh - 57px);
 }

 .list-group-item {
--- a/web/src/app/administration/workbasket/master/list/pagination/pagination.component.html
+++ b/web/src/app/administration/workbasket/master/list/pagination/pagination.component.html
@ -6,8 +6,9 @@
 	<li *ngFor="let pageNumber of workbasketsResource?.page?.totalPages |
 				spreadNumber:  workbasketsResource?.page?.number: maxPagesAvailable:  workbasketsResource?.page?.totalPages">
 		<a *ngIf="pageNumber + 1 !== workbasketsResource?.page?.number" (click)="changeToPage(pageNumber+1)">{{pageNumber + 1}}</a>
-		<input *ngIf="pageNumber + 1 === workbasketsResource?.page?.number" [(ngModel)]="pageSelected" (keyup.enter)="changeToPage(pageSelected)"
-		 type="text" class="pagination" (blur)="changeToPage(pageSelected)">
+		<a *ngIf="pageNumber + 1 === workbasketsResource?.page?.number"  class="pagination">
+			<input [(ngModel)]="pageSelected" (keyup.enter)="changeToPage(pageSelected)" type="text" (blur)="changeToPage(pageSelected)">
+		</a>
 	</li>
 	<li>
 		<a (click)="changeToPage(workbasketsResource?.page.totalPages)" aria-label="Last">Last</a>
--- a/web/src/app/administration/workbasket/master/list/pagination/pagination.component.scss
+++ b/web/src/app/administration/workbasket/master/list/pagination/pagination.component.scss
@ -1,9 +1,24 @@
-input.pagination{
+a.pagination{
    width: 35px;
    height: 35px;
    margin: 0 10px;
-    text-align: center;
+    padding: 0;
    background-color: aliceblue;
+     > input{
+        margin: 1px;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        background-color: aliceblue;
+        border: none;
+        outline: none;
+        &:focus{
+            border-color: #66afe9;
+            outline: 0;
+            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+        }
+     }
 }

 ul.pagination{
--- a/web/src/app/administration/workbasket/master/list/pagination/pagination.component.spec.ts
+++ b/web/src/app/administration/workbasket/master/list/pagination/pagination.component.spec.ts
@ -1,19 +1,22 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SimpleChange } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { SharedModule } from 'app/shared/shared.module';
+
 import { PaginationComponent } from './pagination.component';
-import { SpreadNumberPipe } from 'app/shared/pipes/spreadNumber/spread-number';
-import { WorkbasketSummaryResource } from '../../../../../models/workbasket-summary-resource';
-import { Page } from '../../../../../models/page';
+import { WorkbasketSummaryResource } from 'app/models/workbasket-summary-resource';
+import { Page } from 'app/models/page';

 describe('PaginationComponent', () => {
 	let component: PaginationComponent;
 	let fixture: ComponentFixture<PaginationComponent>;
 	let debugElement;
-
 	beforeEach(async(() => {
-		TestBed.configureTestingModule({
-			declarations: [PaginationComponent, SpreadNumberPipe],
-			imports: [FormsModule]
+		return TestBed.configureTestingModule({
+			declarations: [
+				PaginationComponent
+			],
+			imports: [FormsModule, SharedModule]
 		})
 			.compileComponents();
 	}));
@ -81,4 +84,14 @@ describe('PaginationComponent', () => {
 		component.changeToPage(0);
 	});

+	it('should change pageSelected onChanges', () => {
+		expect(component.pageSelected).toBe(1);
+		component.ngOnChanges({
+			workbasketsResource: new SimpleChange(null, new WorkbasketSummaryResource(undefined, undefined, new Page(6, 3, 3, 2)), true)
+		});
+		fixture.detectChanges();
+		expect(component.pageSelected).toBe(2);
+
+	});
+
 });
--- a/web/src/app/administration/workbasket/master/list/pagination/pagination.component.ts
+++ b/web/src/app/administration/workbasket/master/list/pagination/pagination.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { WorkbasketSummaryResource } from 'app/models/workbasket-summary-resource';

@Component({
@ -6,7 +6,7 @@ import { WorkbasketSummaryResource } from 'app/models/workbasket-summary-resourc
 	templateUrl: './pagination.component.html',
 	styleUrls: ['./pagination.component.scss']
 })
-export class PaginationComponent implements OnInit {
+export class PaginationComponent implements OnInit, OnChanges {

 	@Input()
 	workbasketsResource: WorkbasketSummaryResource;
@ -19,6 +19,11 @@ export class PaginationComponent implements OnInit {

 	constructor() { }

+	ngOnChanges(changes: SimpleChanges): void {
+		if (changes.workbasketsResource.currentValue && changes.workbasketsResource.currentValue.page) {
+			this.pageSelected = changes.workbasketsResource.currentValue.page.number;
+		}
+	}
 	ngOnInit() {
 	}

@ -30,7 +35,6 @@ export class PaginationComponent implements OnInit {
 		if (this.previousPageSelected !== page) {
 			this.changePage.emit(page);
 			this.previousPageSelected = page;
-			this.pageSelected = page;
 		}
 	}
 }
--- a/web/src/app/administration/workbasket/master/list/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts
+++ b/web/src/app/administration/workbasket/master/list/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts
@ -8,6 +8,8 @@ import { AngularSvgIconModule } from 'angular-svg-icon';
 import { HttpModule } from '@angular/http';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterTestingModule } from '@angular/router/testing';
+import { SharedModule } from 'app/shared/shared.module';
+import { AppModule } from 'app/app.module';

 import { WorkbasketSummary } from 'app/models/workbasket-summary';
 import { Links } from 'app/models/links';
@ -20,16 +22,9 @@ import { IconTypeComponent } from 'app/administration/components/type-icon/icon-
 import { WorkbasketListToolbarComponent } from './workbasket-list-toolbar.component';
 import { ImportExportComponent } from 'app/administration/components/import-export/import-export.component';

-import { MapValuesPipe } from 'app/shared/pipes/mapValues/map-values.pipe';
-
-import { ErrorModalService } from 'app/services/errorModal/error-modal.service';
 import { WorkbasketService } from 'app/administration/services/workbasket/workbasket.service';
-import { RequestInProgressService } from 'app/services/requestInProgress/request-in-progress.service';
-import { AlertService } from 'app/services/alert/alert.service';
 import { ClassificationDefinitionService } from 'app/administration/services/classification-definition/classification-definition.service';
 import { WorkbasketDefinitionService } from 'app/administration/services/workbasket-definition/workbasket-definition.service';
-import { DomainService } from 'app/services/domain/domain.service';
-import { DomainServiceMock } from 'app/services/domain/domain.service.mock';

@Component({
 	selector: 'taskana-dummy-detail',
@ -42,7 +37,7 @@ export class DummyDetailComponent {
 describe('WorkbasketListToolbarComponent', () => {
 	let component: WorkbasketListToolbarComponent;
 	let fixture: ComponentFixture<WorkbasketListToolbarComponent>;
-	let debugElement, workbasketService, requestInProgressService, router;
+	let debugElement, workbasketService, router;

 	const routes: Routes = [
 		{ path: ':id', component: DummyDetailComponent, outlet: 'detail' }
@ -51,14 +46,14 @@ describe('WorkbasketListToolbarComponent', () => {
 	beforeEach(async(() => {
 		TestBed.configureTestingModule({
 			imports: [FormsModule, ReactiveFormsModule, AngularSvgIconModule, HttpModule,
-				HttpClientModule, RouterTestingModule.withRoutes(routes)],
+				HttpClientModule, RouterTestingModule.withRoutes(routes), SharedModule, AppModule],
 			declarations: [WorkbasketListToolbarComponent, SortComponent,
-				FilterComponent, IconTypeComponent, DummyDetailComponent, MapValuesPipe, ImportExportComponent],
-			providers: [ErrorModalService, WorkbasketService, RequestInProgressService, AlertService,
-				ClassificationDefinitionService, WorkbasketDefinitionService, {
-					provide: DomainService,
-					useClass: DomainServiceMock
-				}]
+				FilterComponent, IconTypeComponent, DummyDetailComponent, ImportExportComponent],
+			providers: [
+				WorkbasketService,
+				ClassificationDefinitionService,
+				WorkbasketDefinitionService,
+			]
 		})
 			.compileComponents();
 	}));
@ -66,11 +61,9 @@ describe('WorkbasketListToolbarComponent', () => {
 	beforeEach(() => {
 		fixture = TestBed.createComponent(WorkbasketListToolbarComponent);
 		workbasketService = TestBed.get(WorkbasketService);
-		requestInProgressService = TestBed.get(RequestInProgressService);
 		router = TestBed.get(Router);
 		spyOn(workbasketService, 'deleteWorkbasket').and.returnValue(Observable.of(''));
 		spyOn(workbasketService, 'triggerWorkBasketSaved');
-		spyOn(requestInProgressService, 'setRequestInProgress');

 		debugElement = fixture.debugElement.nativeElement;
 		component = fixture.componentInstance;
--- a/web/src/app/administration/workbasket/master/list/workbasket-list.component.scss
+++ b/web/src/app/administration/workbasket/master/list/workbasket-list.component.scss
@ -1,5 +1,5 @@
 .workbasket-list-full-height{
-    height: calc(100vh - 55px);
+    height: calc(100vh - 57px);
 }

 .row.list-group {
--- a/web/src/app/administration/workbasket/master/list/workbasket-list.component.spec.ts
+++ b/web/src/app/administration/workbasket/master/list/workbasket-list.component.spec.ts
@ -7,31 +7,24 @@ import { HttpClientModule } from '@angular/common/http';
 import { HttpModule } from '@angular/http';
 import { Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
+import { SharedModule } from 'app/shared/shared.module';
+import { AppModule } from 'app/app.module';

 import { WorkbasketSummary } from 'app/models/workbasket-summary';
 import { WorkbasketSummaryResource } from 'app/models/workbasket-summary-resource';
 import { FilterModel } from 'app/models/filter';
 import { LinksWorkbasketSummary } from 'app/models/links-workbasket-summary';

-import { ErrorModalService } from 'app/services/errorModal/error-modal.service';
-import { RequestInProgressService } from 'app/services/requestInProgress/request-in-progress.service';
-import { AlertService } from 'app/services/alert/alert.service';
-import { WorkbasketService } from 'app/administration/services/workbasket/workbasket.service';
-import { OrientationService } from 'app/services/orientation/orientation.service';

 import { WorkbasketListComponent } from './workbasket-list.component';
 import { WorkbasketListToolbarComponent } from './workbasket-list-toolbar/workbasket-list-toolbar.component';
 import { IconTypeComponent } from 'app/administration/components/type-icon/icon-type.component';
-import { SpinnerComponent } from 'app/shared/spinner/spinner.component';
 import { SortComponent } from 'app/administration/components/sort/sort.component';
 import { ImportExportComponent } from 'app/administration/components/import-export/import-export.component';

-import { RemoveNoneTypePipe } from 'app/shared/pipes/removeNoneType/remove-none-type.pipe';
-import { MapValuesPipe } from 'app/shared/pipes/mapValues/map-values.pipe';
 import { WorkbasketDefinitionService } from 'app/administration/services/workbasket-definition/workbasket-definition.service';
 import { ClassificationDefinitionService } from 'app/administration/services/classification-definition/classification-definition.service';
-import { DomainService } from 'app/services/domain/domain.service';
-import { DomainServiceMock } from 'app/services/domain/domain.service.mock';
+import { WorkbasketService } from 'app/administration/services/workbasket/workbasket.service';

@Component({
 	selector: 'taskana-dummy-detail',
@ -83,19 +76,21 @@ describe('WorkbasketListComponent', () => {
 	beforeEach(async(() => {
 		TestBed.configureTestingModule({

-			declarations: [WorkbasketListComponent, DummyDetailComponent, SpinnerComponent, FilterComponent, WorkbasketListToolbarComponent,
-				RemoveNoneTypePipe, IconTypeComponent, SortComponent, PaginationComponent, ImportExportComponent, MapValuesPipe],
+			declarations: [WorkbasketListComponent, DummyDetailComponent, FilterComponent, WorkbasketListToolbarComponent,
+				IconTypeComponent, SortComponent, PaginationComponent, ImportExportComponent],
 			imports: [
 				AngularSvgIconModule,
 				HttpModule,
 				HttpClientModule,
-				RouterTestingModule.withRoutes(routes)
+				RouterTestingModule.withRoutes(routes),
+				SharedModule,
+				AppModule
 			],
-			providers: [WorkbasketService, ErrorModalService, RequestInProgressService, AlertService,
-				WorkbasketDefinitionService, OrientationService, {
-					provide: DomainService,
-					useClass: DomainServiceMock
-				}, ClassificationDefinitionService]
+			providers: [
+				WorkbasketService,
+				WorkbasketDefinitionService,
+				ClassificationDefinitionService
+			]
 		})
 			.compileComponents();

@ -143,8 +138,10 @@ describe('WorkbasketListComponent', () => {
 		fixture.detectChanges();
 		fixture.whenStable().then(() => {
 			expect(debugElement.querySelectorAll('#wb-list-container > li').length).toBe(3);
-			expect(debugElement.querySelectorAll('#wb-list-container > li')[1].getAttribute('class')).toBe('list-group-item');
-			expect(debugElement.querySelectorAll('#wb-list-container > li')[2].getAttribute('class')).toBe('list-group-item active');
+			expect(debugElement.querySelectorAll('#wb-list-container > li')[1].getAttribute('class'))
+				.toBe('list-group-item ng-star-inserted');
+			expect(debugElement.querySelectorAll('#wb-list-container > li')[2].getAttribute('class'))
+				.toBe('list-group-item ng-star-inserted active');
 		})

 	}));
--- a/web/src/app/app.component.spec.ts
+++ b/web/src/app/app.component.spec.ts
@ -17,7 +17,7 @@ import { DomainServiceMock } from 'app/services/domain/domain.service.mock';
 import { DomainService } from 'app/services/domain/domain.service';


-describe('AppComponent', () => {
+fdescribe('AppComponent', () => {

 	let app, fixture, debugElement;

--- a/web/src/app/app.module.ts
+++ b/web/src/app/app.module.ts
@ -43,6 +43,7 @@ import { NavBarComponent } from 'app/components/nav-bar/nav-bar.component';
 * Guards
 */
 import { DomainGuard } from './guards/domain-guard';
+import { APP_BASE_HREF } from '@angular/common';


 const MODULES = [
@ -72,6 +73,7 @@ export function startupServiceFactory(startupService: StartupService): Function
  declarations: DECLARATIONS,
  imports: MODULES,
  providers: [
+    { provide: APP_BASE_HREF, useValue: '/' },
    DomainService,
    {
      provide: HTTP_INTERCEPTORS,
--- a/web/src/app/components/nav-bar/nav-bar.component.spec.ts
+++ b/web/src/app/components/nav-bar/nav-bar.component.spec.ts
@ -12,7 +12,7 @@ import { DomainServiceMock } from 'app/services/domain/domain.service.mock';
 describe('NavBarComponent', () => {
  let component: NavBarComponent;
  let fixture: ComponentFixture<NavBarComponent>;
-  let navBar;
+  let debugElement, navBar;

  const routes: Routes = [
    { path: 'classifications', component: NavBarComponent }
@ -37,10 +37,16 @@ describe('NavBarComponent', () => {
  beforeEach(() => {
    fixture = TestBed.createComponent(NavBarComponent);
    component = fixture.componentInstance;
+    debugElement = fixture.debugElement.nativeElement;
    navBar = fixture.debugElement.componentInstance;
    fixture.detectChanges();
  });

+  afterEach(() => {
+    fixture.detectChanges()
+    document.body.removeChild(debugElement);
+  });
+
  it('should create', () => {
    expect(component).toBeTruthy();
  });
--- a/web/src/assets/_site.scss
+++ b/web/src/assets/_site.scss
@ -21,18 +21,18 @@
 /*
 * Base structure
 */
-/* Move down content because we have a fixed navbar that is 55px tall */
+/* Move down content because we have a fixed navbar that is 57px tall */

 .container-main {
-    margin-top: 55px;
+    margin-top: 57px;
    overflow-y: hidden;
    /*Min mobile view size*/
    min-width: 420px;
 }

 .container-scrollable {
-    max-height: calc(100vh - 55px);
-    height: calc(100vh - 55px);
+    max-height: calc(100vh - 57px);
+    height: calc(100vh - 57px);
    overflow: hidden;
 }

@ -226,7 +226,7 @@ svg-icon.fa-fw > svg {
    transition: opacity 300ms ease, visibility 300ms ease;
 }
 .vertical-align{
-    vertical-align: middle;
+    vertical-align: sub;
 }

 .panel-heading{
--- a/web/src/index.html
+++ b/web/src/index.html
@ -5,14 +5,10 @@
  <meta charset="utf-8">
  <title>Administration</title>
  <base href="/">
-
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./taskana.ico">
 </head>
-
 <body>
  <taskana-root></taskana-root>
 </body>
-
-
-</html>
+</html>