feat(action): intermediate page for selected resources in comparison …

…viewer (DSP-1765) (#313)

* feat(resource comparison viewer): create selected-resources component

* feat(resource comparison viewer): add selected-resources component in action-playground

* feat(resource comparison viewer): display resource count and ids

* feat(resource comparison viewer): add action buttons

* feat(resource comparison viewer): update test case

* feat(resource comparison viewer): small correction

* feat(resource comparison viewer): add missing export

projects/dsp-ui/src/lib/action/action.module.ts

@@ -30,6 +30,7 @@ import { KnoraDatePipe } from './pipes/formatting/knoradate.pipe';
 import { StringifyStringLiteralPipe } from './pipes/string-transformation/stringify-string-literal.pipe';
 import { TruncatePipe } from './pipes/string-transformation/truncate.pipe';
 import { SelectProjectComponent } from './components/select-project/select-project.component';
+import { SelectedResourcesComponent } from './components/selected-resources/selected-resources.component';
 
 @NgModule({
   declarations: [
@@ -49,7 +50,8 @@ import { SelectProjectComponent } from './components/select-project/select-proje
     StringifyStringLiteralPipe,
     StringLiteralInputComponent,
     SelectProjectComponent,
-    TruncatePipe
+    TruncatePipe,
+    SelectedResourcesComponent
   ],
   imports: [
     BrowserAnimationsModule,
@@ -85,7 +87,8 @@ import { SelectProjectComponent } from './components/select-project/select-proje
     StringifyStringLiteralPipe,
     StringLiteralInputComponent,
     SelectProjectComponent,
-    TruncatePipe
+    TruncatePipe,
+    SelectedResourcesComponent
   ]
 })
 

projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.html

@@ -0,0 +1,20 @@
+<div class="selected-resources">
+
+    <h4>Number of resources selected: <span class="res-value">{{ resCount }}</span></h4>
+
+    <h4>Ids of the Selected resources are:</h4>
+    <mat-list>
+        <mat-list-item *ngFor="let id of resIds">
+          <mat-icon mat-list-icon>description</mat-icon>
+          <div mat-line class="res-value">{{ id }}</div>
+        </mat-list-item>
+    </mat-list>
+
+    <div class="action-buttons">
+        <button id="compare" mat-raised-button color="primary" class="res-action" (click)="compareResources()"> Compare </button>
+        <button id="edit" mat-raised-button color="primary" class="res-action" disabled> Edit </button>
+        <button id="delete" mat-raised-button color="primary" class="res-action" disabled> Delete </button>
+        <button id="star" mat-raised-button color="primary" class="res-action" disabled> Starred </button>
+        <button id="cancel" mat-raised-button class="res-action" (click)="cancelSelection()"> Cancel </button>
+    </div>
+</div>

projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.scss

@@ -0,0 +1,37 @@
+
+.selected-resources {
+    margin-top: 10px;
+
+    .mat-list-item {
+        height: auto;
+
+        .mat-icon {
+          font-size: 20px;
+          color: #673ab7;
+        }
+
+        .mat-line {
+          white-space: normal !important;
+        }
+
+        .mat-list-item {
+          margin-left: 0px;
+        }
+    }
+}
+
+.res-ids-container {
+    margin: 8px;
+}
+
+.res-value {
+    color: #673ab7;
+}
+
+.action-buttons {
+  margin-top: 20px;
+
+  .res-action {
+    margin: 4px;
+  }
+}

projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.spec.ts

@@ -0,0 +1,62 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { Component, ViewChild } from '@angular/core';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+
+import { SelectedResourcesComponent } from './selected-resources.component';
+
+/**
+ * Test host component to simulate parent component.
+ */
+ @Component({
+  selector: `dsp-selected-resources-host-component`,
+  template: `
+      <dsp-selected-resources #selectedResources [resCount]="selectedResCount" [resIds]="selectedRes" (actionType)="getActionType($event)">
+      </dsp-selected-resources>`
+})
+class TestHostSelectedResourcesComponent {
+
+  @ViewChild('selectedResources') selectedResources: SelectedResourcesComponent;
+
+  selectedResCount = 2;
+  selectedRes = ['http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw', 'http://rdfh.ch/0010/H6gBWUuJSuuO-CilddsgfdQw'];
+
+  getActionType(action: string) {
+    console.log(action);
+  }
+}
+
+describe('SelectedResourcesComponent', () => {
+  let testHostComponent: TestHostSelectedResourcesComponent
+  let testHostFixture: ComponentFixture<TestHostSelectedResourcesComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          SelectedResourcesComponent,
+          TestHostSelectedResourcesComponent
+        ],
+        imports: [
+          MatListModule,
+          MatButtonModule,
+          MatIconModule
+        ]
+      })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    testHostFixture = TestBed.createComponent(TestHostSelectedResourcesComponent);
+    testHostComponent = testHostFixture.componentInstance;
+    loader = TestbedHarnessEnvironment.loader(testHostFixture);
+    testHostFixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(testHostComponent.selectedResources).toBeTruthy();
+  });
+});

projects/dsp-ui/src/lib/action/components/selected-resources/selected-resources.component.ts

@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'dsp-selected-resources',
+  templateUrl: './selected-resources.component.html',
+  styleUrls: ['./selected-resources.component.scss']
+})
+export class SelectedResourcesComponent {
+
+  // actions which can be applied on selected resources
+  resourceAction: 'compare' | 'edit' | 'delete' | 'starred' | 'cancel';
+
+  // total number of resources selected
+  @Input() resCount: number;
+
+  // list of selected resources ids
+  @Input() resIds: string[];
+
+  // return selected actions and other info if any
+  @Output() actionType: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor() { }
+
+  // return compare action
+  compareResources() {
+    this.resourceAction = 'compare';
+    this.actionType.emit(this.resourceAction);
+  }
+
+  // cancel action
+  cancelSelection() {
+    this.resourceAction = 'cancel';
+    this.actionType.emit(this.resourceAction);
+  }
+
+}

projects/dsp-ui/src/lib/action/index.ts

@@ -21,6 +21,7 @@ export * from './components/string-literal-input/string-literal-input.component'
 export * from './components/confirmation-dialog/confirmation-dialog.component';
 export * from './components/confirmation-dialog/confirmation-message/confirmation-message.component';
 export * from './components/select-project/select-project.component';
+export * from './components/selected-resources/selected-resources.component';
 
 // directives
 export * from './directives/admin-image/admin-image.directive';

src/app/action-playground/action-playground.component.html

@@ -10,6 +10,9 @@
 <dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>
 -->
 
+<p>Selected resources Component</p>
+
+<dsp-selected-resources [resCount]="selectedResCount" [resIds]="selectedRes" (actionType)="getActionType($event)"></dsp-selected-resources>
 <hr>
 
 <p>Select project component</p>

src/app/action-playground/action-playground.component.ts

@@ -134,6 +134,10 @@ export class ActionPlaygroundComponent implements OnInit {
     confirmationDialogResponse: string;
     showTimedMessage: boolean;
 
+    // selected resources action
+    selectedResCount = 4;
+    selectedRes = ['http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw', 'http://rdfh.ch/0010/H6gBWUuJSuuO-CilddsgfdQw', 'http://rdfh.ch/0004/H6gBWdvdSuuO-dgdsg', 'http://rdfh.ch/0009/H6ddgdfgfuJSuuO-gdfsg'];
+
     constructor(
         private _sortingService: SortingService,
         private _dialog: MatDialog
@@ -202,7 +206,13 @@ export class ActionPlaygroundComponent implements OnInit {
         setTimeout(() => { this.showTimedMessage = false; }, 2100);
     }
 
+    // selected-project
     getSelectedProject(selectedProject: ReadProject) {
         console.log(selectedProject);
     }
+
+    // selected-reources - get action type
+    getActionType(action: string) {
+        console.log(action);
+    }
 }