From b6ea8121dc48949aea11ef9251282e30d10f846b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= Date: Mon, 2 Aug 2021 15:43:11 +0200 Subject: [PATCH 1/4] feat(workspace): add intermediate view (DSP-1834) --- src/app/app.module.ts | 2 + .../intermediate/intermediate.component.html | 40 ++++++++++ .../intermediate/intermediate.component.scss | 75 +++++++++++++++++++ .../intermediate.component.spec.ts | 25 +++++++ .../intermediate/intermediate.component.ts | 28 +++++++ .../workspace/results/results.component.html | 17 +++-- .../workspace/results/results.component.ts | 12 ++- 7 files changed, 190 insertions(+), 9 deletions(-) create mode 100644 src/app/workspace/intermediate/intermediate.component.html create mode 100644 src/app/workspace/intermediate/intermediate.component.scss create mode 100644 src/app/workspace/intermediate/intermediate.component.spec.ts create mode 100644 src/app/workspace/intermediate/intermediate.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0dfec737cb..a9e0dcbf83 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -96,6 +96,7 @@ import { SelectResourceClassComponent } from './workspace/resource/resource-inst import { ResourceComponent } from './workspace/resource/resource.component'; import { ResultsComponent } from './workspace/results/results.component'; import { AudioComponent } from './workspace/resource/representation/audio/audio.component'; +import { IntermediateComponent } from './workspace/intermediate/intermediate.component'; // translate: AoT requires an exported function for factories export function httpLoaderFactory(httpClient: HttpClient) { @@ -178,6 +179,7 @@ export function httpLoaderFactory(httpClient: HttpClient) { UsersListComponent, VisualizerComponent, AudioComponent, + IntermediateComponent, ], imports: [ AppRoutingModule, diff --git a/src/app/workspace/intermediate/intermediate.component.html b/src/app/workspace/intermediate/intermediate.component.html new file mode 100644 index 0000000000..cded6a2ab5 --- /dev/null +++ b/src/app/workspace/intermediate/intermediate.component.html @@ -0,0 +1,40 @@ +
+
+
+
+
+

{{resources.count}}

+

{{resources.count | i18nPlural: itemPluralMapping['resource']}} Selected

+
+
+ + + + + + + + + + + + +
+
+
+
+
+
diff --git a/src/app/workspace/intermediate/intermediate.component.scss b/src/app/workspace/intermediate/intermediate.component.scss new file mode 100644 index 0000000000..676d409567 --- /dev/null +++ b/src/app/workspace/intermediate/intermediate.component.scss @@ -0,0 +1,75 @@ +@import '../../../assets/style/config'; +@import '../../../assets/style/mixins'; + +.card-container { + position: relative; + width: 18em; + margin: 4em auto; +} + +.card { + height: 20.5em; + width: 20em; + position: absolute; + border-radius: $border-radius; + background: #cecece; + padding: 32px 16px; + box-shadow: 1px 1px 7px rgba(0,0,0,.65); + + &.front { + z-index: 10; + } + + &.background { + z-index: -1; + + &.two { + transform: rotateZ(4deg); + } + + &.three { + transform: rotateZ(-4deg); + } + + &.more { + transform: rotateZ(-8deg); + } + + } + + .mock { + background: rgba(0,0,0,.375); + min-height: 1em; + color: $primary_100; + + &.title { + width: 70%; + margin: 8px 0; + } + + &.content { + height: 14em; + margin-top: -3em; + text-align: center; + + .count { + font-size: 4em; + line-height:0.75em; + margin-bottom:0; + padding-top: 72px; + } + } + } + + .action { + height: 2em; + display: inline-flex; + margin: 1em 0; + width: 100%; + + button { + margin: 0 16px; + } + + } +} diff --git a/src/app/workspace/intermediate/intermediate.component.spec.ts b/src/app/workspace/intermediate/intermediate.component.spec.ts new file mode 100644 index 0000000000..e4fdeea2fe --- /dev/null +++ b/src/app/workspace/intermediate/intermediate.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IntermediateComponent } from './intermediate.component'; + +describe('IntermediateComponent', () => { + let component: IntermediateComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ IntermediateComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(IntermediateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/workspace/intermediate/intermediate.component.ts b/src/app/workspace/intermediate/intermediate.component.ts new file mode 100644 index 0000000000..48d01c9f8b --- /dev/null +++ b/src/app/workspace/intermediate/intermediate.component.ts @@ -0,0 +1,28 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { FilteredResouces } from '@dasch-swiss/dsp-ui'; + +@Component({ + selector: 'app-intermediate', + templateUrl: './intermediate.component.html', + styleUrls: ['./intermediate.component.scss'] +}) +export class IntermediateComponent implements OnInit { + + @Input() resources: FilteredResouces; + + @Output() action: EventEmitter = new EventEmitter(); + + // i18n plural mapping + itemPluralMapping = { + resource: { + '=1': 'Resource', + other: 'Resources' + } + }; + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/workspace/results/results.component.html b/src/app/workspace/results/results.component.html index ac32b9f231..1d8d66dc90 100644 --- a/src/app/workspace/results/results.component.html +++ b/src/app/workspace/results/results.component.html @@ -10,13 +10,18 @@ - - +
+ + - - - + + + + + + +
diff --git a/src/app/workspace/results/results.component.ts b/src/app/workspace/results/results.component.ts index 21172a09d2..780f122616 100644 --- a/src/app/workspace/results/results.component.ts +++ b/src/app/workspace/results/results.component.ts @@ -19,6 +19,7 @@ export class ResultsComponent { // display single resource or intermediate page in case of multiple selection multipleSelection = false; multipleResources: FilteredResouces; + viewMode: 'single' | 'intermediate' | 'compare' = 'single'; // number of all results numberOfAllResults: number; @@ -54,7 +55,8 @@ export class ResultsComponent { } openResource(id: string) { - this.multipleSelection = false; + // this.multipleSelection = false; + this.viewMode = 'single'; this.multipleResources = undefined; this.resourceIri = id; } @@ -63,9 +65,13 @@ export class ResultsComponent { // multiple resources are selected for comparision openMultipleResources(resources: FilteredResouces) { - this.multipleSelection = (resources && resources.count > 0); + if (this.viewMode !== 'compare') { + + this.viewMode = ((resources && resources.count > 0) ? 'intermediate' : 'single'); + + this.multipleResources = (this.viewMode !== 'single' ? resources : undefined); + } - this.multipleResources = (this.multipleSelection ? resources : undefined); } From 5ace347ad4f1c764caecf254c64b6112f6951363 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= Date: Mon, 2 Aug 2021 16:41:41 +0200 Subject: [PATCH 2/4] test(workspace): test intermediate view --- .../intermediate.component.spec.ts | 90 +++++++++++++++---- .../intermediate/intermediate.component.ts | 3 +- 2 files changed, 72 insertions(+), 21 deletions(-) diff --git a/src/app/workspace/intermediate/intermediate.component.spec.ts b/src/app/workspace/intermediate/intermediate.component.spec.ts index e4fdeea2fe..c3d1d8d9bb 100644 --- a/src/app/workspace/intermediate/intermediate.component.spec.ts +++ b/src/app/workspace/intermediate/intermediate.component.spec.ts @@ -1,25 +1,77 @@ +import { Component, DebugElement, OnInit, ViewChild } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { By } from '@angular/platform-browser'; +import { FilteredResouces } from '@dasch-swiss/dsp-ui'; import { IntermediateComponent } from './intermediate.component'; + +/** + * test host component to simulate parent component + */ +@Component({ + template: '' +}) +class ThreeSelectedResourcesComponent { + + @ViewChild('intermediateView') intermediateComponent: IntermediateComponent; + + resources: FilteredResouces = { + 'count': 3, + 'resListIndex': [3, 2, 1], + 'resIds': [ + 'http://rdfh.ch/0803/83616f8d8501', + 'http://rdfh.ch/0803/71e0b9958a01', + 'http://rdfh.ch/0803/683d5cd26f01' + ], + 'selectionType': 'multiple' + }; + + constructor() { } + +} + + describe('IntermediateComponent', () => { - let component: IntermediateComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ IntermediateComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(IntermediateComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); + + let hostComponent: ThreeSelectedResourcesComponent; + let hostFixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ + IntermediateComponent, + ThreeSelectedResourcesComponent + ], + imports: [ + MatButtonModule, + MatIconModule + ] + }) + .compileComponents(); + }); + + beforeEach(() => { + hostFixture = TestBed.createComponent(ThreeSelectedResourcesComponent); + hostComponent = hostFixture.componentInstance; + hostFixture.detectChanges(); + + expect(hostComponent).toBeTruthy(); + + }); + + it('expect count to be "3" and compare button to be enabled', () => { + expect(hostComponent.intermediateComponent).toBeTruthy(); + expect(hostComponent.intermediateComponent.resources).toBeDefined(); + + const hostCompDe = hostFixture.debugElement; + + const count: DebugElement = hostCompDe.query(By.css('.count')); + expect(count.nativeElement.innerText).toEqual('3'); + + const button: DebugElement = hostCompDe.query(By.css('.compare')); + expect(button.nativeElement.disabled).toBeFalsy(); + }); }); diff --git a/src/app/workspace/intermediate/intermediate.component.ts b/src/app/workspace/intermediate/intermediate.component.ts index 48d01c9f8b..195b6ad9d7 100644 --- a/src/app/workspace/intermediate/intermediate.component.ts +++ b/src/app/workspace/intermediate/intermediate.component.ts @@ -22,7 +22,6 @@ export class IntermediateComponent implements OnInit { constructor() { } - ngOnInit(): void { - } + ngOnInit(): void { } } From 117d7ae01fcaa0b7e8aabe5e6e9c0cfb144d997c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= Date: Mon, 2 Aug 2021 16:50:50 +0200 Subject: [PATCH 3/4] refactor(workspace): clean up code --- .../workspace/intermediate/intermediate.component.spec.ts | 5 +---- src/app/workspace/results/results.component.ts | 2 -- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/app/workspace/intermediate/intermediate.component.spec.ts b/src/app/workspace/intermediate/intermediate.component.spec.ts index c3d1d8d9bb..92cf522aad 100644 --- a/src/app/workspace/intermediate/intermediate.component.spec.ts +++ b/src/app/workspace/intermediate/intermediate.component.spec.ts @@ -1,13 +1,11 @@ -import { Component, DebugElement, OnInit, ViewChild } from '@angular/core'; +import { Component, DebugElement, ViewChild } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { By } from '@angular/platform-browser'; import { FilteredResouces } from '@dasch-swiss/dsp-ui'; - import { IntermediateComponent } from './intermediate.component'; - /** * test host component to simulate parent component */ @@ -33,7 +31,6 @@ class ThreeSelectedResourcesComponent { } - describe('IntermediateComponent', () => { let hostComponent: ThreeSelectedResourcesComponent; diff --git a/src/app/workspace/results/results.component.ts b/src/app/workspace/results/results.component.ts index 780f122616..933d053472 100644 --- a/src/app/workspace/results/results.component.ts +++ b/src/app/workspace/results/results.component.ts @@ -17,7 +17,6 @@ export class ResultsComponent { resourceIri: string; // display single resource or intermediate page in case of multiple selection - multipleSelection = false; multipleResources: FilteredResouces; viewMode: 'single' | 'intermediate' | 'compare' = 'single'; @@ -55,7 +54,6 @@ export class ResultsComponent { } openResource(id: string) { - // this.multipleSelection = false; this.viewMode = 'single'; this.multipleResources = undefined; this.resourceIri = id; From d7f590b7eb8798b1feb30bcbd2aa5c7b3ee45464 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= Date: Mon, 2 Aug 2021 21:47:10 +0200 Subject: [PATCH 4/4] test(workspace): bug fix in tests --- .../intermediate/intermediate.component.html | 5 +- .../intermediate.component.spec.ts | 134 ++++++++++++++++-- 2 files changed, 122 insertions(+), 17 deletions(-) diff --git a/src/app/workspace/intermediate/intermediate.component.html b/src/app/workspace/intermediate/intermediate.component.html index cded6a2ab5..41c3e6293f 100644 --- a/src/app/workspace/intermediate/intermediate.component.html +++ b/src/app/workspace/intermediate/intermediate.component.html @@ -1,4 +1,4 @@ -
+
@@ -13,8 +13,8 @@ -