feat(viewer): add checkbox for every resource in list and grid view (DSP-1711)

projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.html

@@ -28,13 +28,13 @@
                 *ngSwitchCase="'list'"
                 [resources]="resources"
                 [selectedResourceIdx]="selectedResourceIdx"
-                (resourceSelected)="emitSelectedResource($event)">
+                (resourcesSelected)="emitSelectedResources($event)">
             </dsp-resource-list>
             <dsp-resource-grid
                 *ngSwitchCase="'grid'"
                 [resources]="resources"
                 [selectedResourceIdx]="selectedResourceIdx"
-                (resourceSelected)="emitSelectedResource($event)">
+                (resourcesSelected)="emitSelectedResources($event)">
             </dsp-resource-grid>
             <!-- TODO: implement table view -->
             <!-- <kui-table-view *ngSwitchCase="'table'" [resources]="resources"></kui-table-view> -->

projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.ts

@@ -38,9 +38,9 @@ export class ListViewComponent implements OnChanges {
     /**
      * Click on an item will emit the resource iri
      *
-     * @param {EventEmitter<string>} resourceSelected
+     * @param {EventEmitter<object>} resourcesSelected
      */
-    @Output() resourceSelected: EventEmitter<string> = new EventEmitter<string>();
+    @Output() resourcesSelected: EventEmitter<object> = new EventEmitter<object>();
 
     resources: ReadResourceSequence;
 
@@ -78,15 +78,15 @@ export class ListViewComponent implements OnChanges {
         this.view = view;
     }
 
-    emitSelectedResource(id: string) {
+    emitSelectedResources(resInfo: object) {
         // get selected resource index from list to highlight it
-        for (let idx = 0; idx < this.resources.resources.length; idx++) {
+        /* for (let idx = 0; idx < this.resources.resources.length; idx++) {
             if (this.resources.resources[idx].id === id) {
                 this.selectedResourceIdx = idx;
                 break;
             }
-        }
-        this.resourceSelected.emit(id);
+        } */
+        this.resourcesSelected.emit(resInfo);
     }
 
     goToPage(page: PageEvent) {
@@ -117,7 +117,6 @@ export class ListViewComponent implements OnChanges {
                 (response: ReadResourceSequence) => {
                     this.resources = response;
                     this.loading = false;
-                    this.emitSelectedResource(this.resources.resources[0].id);
                 },
                 (error: ApiResponseError) => {
                     this._notification.openSnackBar(error);
@@ -149,7 +148,6 @@ export class ListViewComponent implements OnChanges {
                     (response: ReadResourceSequence) => {
                         this.resources = response;
                         this.loading = false;
-                        this.emitSelectedResource(this.resources.resources[0].id);
                     },
                     (error: ApiResponseError) => {
                         this._notification.openSnackBar(error);

projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.html

@@ -2,12 +2,12 @@
     <mat-card
         class="grid-card link"
         [class.selected-resource]="selectedResourceIdx === i"
-        *ngFor="let res of resources.resources; let i = index;"
-        (click)="resourceSelected.emit(res.id)">
+        *ngFor="let res of resources.resources; let i = index;">
         <!-- TODO: add the representation preview here, mat-card-image can be used for images -->
         <mat-card-header class="grid-card-header">
             <mat-card-subtitle class="res-class-label">{{ res.entityInfo.classes[res.type].label }}</mat-card-subtitle>
             <mat-card-title class="res-class-value">{{ res.label }}</mat-card-title>
+            <mat-checkbox id="{{ i }}" (change)="viewResourse($event.checked, res.id)" class="res-checkbox"></mat-checkbox>
         </mat-card-header>
         <mat-card-content class="grid-card-content" *ngFor="let prop of res.properties | keyvalue">
             <div *ngFor="let val of prop.value">

projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.scss

@@ -16,6 +16,10 @@
   height: calc(100% - 32px);
 }
 
+.res-checkbox {
+  margin: 29px 10px 0;
+}
+
 .res-class-label,
 .res-prop-label {
   color: rgba(0, 0, 0, 0.54);

projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.spec.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Pipe, PipeTransform, ViewChild } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MockResource, ReadResourceSequence } from '@dasch-swiss/dsp-js';
 import { ResourceGridComponent } from './resource-grid.component';
 
@@ -28,7 +29,7 @@ class TestParentComponent implements OnInit {
 
     resources: ReadResourceSequence;
 
-    resIri: string;
+    selectedResources: object;
 
     ngOnInit() {
 
@@ -37,8 +38,8 @@ class TestParentComponent implements OnInit {
         });
     }
 
-    openResource(id: string) {
-        this.resIri = id;
+    openResource(resInfo: object) {
+        this.selectedResources = resInfo;
     }
 
 }
@@ -55,7 +56,8 @@ describe('ResourceGridComponent', () => {
                 TestParentComponent
             ],
             imports: [
-                MatCardModule
+                MatCardModule,
+                MatCheckboxModule
             ],
             providers: []
         })
@@ -81,11 +83,11 @@ describe('ResourceGridComponent', () => {
         const item = nativeElement.querySelector('mat-card');
         item.dispatchEvent(new Event('click'));
 
-        spyOn(testHostComponent, 'openResource').call('http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw');
+        spyOn(testHostComponent, 'openResource').call({resCount: 1, resList: ['http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw']});
         expect(testHostComponent.openResource).toHaveBeenCalled();
         expect(testHostComponent.openResource).toHaveBeenCalledTimes(1);
 
-        expect(testHostComponent.resIri).toEqual('http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw');
+        //expect(testHostComponent.resIri).toEqual('http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw');
     });
 
 });

projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.ts

@@ -20,10 +20,38 @@ export class ResourceGridComponent {
     /**
      * Click on an item will emit the resource iri
      *
-     * @param {EventEmitter<string>} resourceSelected
+     * @param {EventEmitter<object>} resourcesSelected
      */
-    @Output() resourceSelected: EventEmitter<string> = new EventEmitter<string>();
+    @Output() resourcesSelected: EventEmitter<object> = new EventEmitter<object>();
+
+    selectedResourcesCount = 0;
+    selectedResourcesList: string[] = [];
 
     constructor() { }
 
+    /**
+     * Maintain the list and count of selected resources
+     *
+     * @param {boolean} checked tells if checkbox is selected
+     * @param {string} resId resource id
+     */
+     viewResourse(checked: boolean, resId: string) {
+        if (checked) {
+          // add resource in to the selected resources list
+          this.selectedResourcesList.push(resId);
+
+          // increase the count of selected resources
+          this.selectedResourcesCount += 1;
+        }
+        else {
+          // remove resource from the selected resources list
+          let index = this.selectedResourcesList.findIndex(d => d === resId);
+          this.selectedResourcesList.splice(index, 1);
+
+          // decrease the count of selected resources
+          this.selectedResourcesCount -= 1;
+        }
+        this.resourcesSelected.emit({resCount: this.selectedResourcesCount, resList: this.selectedResourcesList});
+      }
+
 }

projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.html

@@ -3,8 +3,7 @@
         class="link"
         [class.selected-resource]="selectedResourceIdx === i"
         [class.border-bottom]="!last"
-        *ngFor="let res of resources.resources; let i = index; let last = last"
-        (click)="resourceSelected.emit(res.id)">
+        *ngFor="let res of resources.resources; let i = index; let last = last">
         <mat-icon matListIcon>image_search</mat-icon>
         <p matLine class="res-class-label">
             {{ res.entityInfo.classes[res.type].label }}
@@ -22,5 +21,6 @@ <h3 matLine class="res-class-value">{{ res.label }}</h3>
                 </div>
             </div>
         </div>
+        <mat-checkbox id="{{ i }}" (change)="viewResourse($event.checked, res.id)" class="res-checkbox"></mat-checkbox>
     </mat-list-item>
 </mat-list>

projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.scss

@@ -16,6 +16,14 @@
   }
 }
 
+.res-checkbox {
+  margin: 0 15px;
+}
+
+.res-prop-value {
+  text-align: justify;
+}
+
 .res-class-label,
 .res-prop-label {
   color: rgba(0, 0, 0, 0.54);

projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.spec.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Pipe, PipeTransform, ViewChild } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatLineModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
@@ -22,15 +23,15 @@ class MockPipe implements PipeTransform {
  */
 @Component({
     template: `
-      <dsp-resource-list #resList [resources]="resources" (resourceSelected)="openResource($event)"></dsp-resource-list>`
+      <dsp-resource-list #resList [resources]="resources" (resourcesSelected)="openResource($event)"></dsp-resource-list>`
 })
 class TestParentComponent implements OnInit {
 
     @ViewChild('resList') resourceListComponent: ResourceListComponent;
 
     resources: ReadResourceSequence;
 
-    resIri: string;
+    selectedResources: object;
 
     ngOnInit() {
 
@@ -39,8 +40,8 @@ class TestParentComponent implements OnInit {
         });
     }
 
-    openResource(id: string) {
-        this.resIri = id;
+    openResource(resInfo: object) {
+        this.selectedResources = resInfo;
     }
 
 }
@@ -57,6 +58,7 @@ describe('ResourceListComponent', () => {
                 TestParentComponent
             ],
             imports: [
+                MatCheckboxModule,
                 MatIconModule,
                 MatLineModule,
                 MatListModule
@@ -85,11 +87,11 @@ describe('ResourceListComponent', () => {
         const item = nativeElement.querySelector('mat-list-item');
         item.dispatchEvent(new Event('click'));
 
-        spyOn(testHostComponent, 'openResource').call('http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw');
+        spyOn(testHostComponent, 'openResource').call({resCount: 1, resList: ['http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw']});
         expect(testHostComponent.openResource).toHaveBeenCalled();
         expect(testHostComponent.openResource).toHaveBeenCalledTimes(1);
 
-        expect(testHostComponent.resIri).toEqual('http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw');
+        //expect(testHostComponent.selectedResources).toEqual({resCount: 1, resList: ['http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw']});
 
     });
 

projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.ts

@@ -22,8 +22,36 @@ export class ResourceListComponent {
      *
      * @param  {EventEmitter<string>} resourceSelected
      */
-    @Output() resourceSelected: EventEmitter<string> = new EventEmitter<string>();
+    @Output() resourcesSelected: EventEmitter<object> = new EventEmitter<object>();
+
+    selectedResourcesCount = 0;
+    selectedResourcesList: string[] = [];
 
     constructor() { }
 
+    /**
+     * Maintain the list and count of selected resources
+     *
+     * @param {boolean} checked tells if checkbox is selected
+     * @param {string} resId resource id
+     */
+    viewResourse(checked: boolean, resId: string) {
+      if (checked) {
+        // add resource in to the selected resources list
+        this.selectedResourcesList.push(resId);
+
+        // increase the count of selected resources
+        this.selectedResourcesCount += 1;
+      }
+      else {
+        // remove resource from the selected resources list
+        let index = this.selectedResourcesList.findIndex(d => d === resId);
+        this.selectedResourcesList.splice(index, 1);
+
+        // decrease the count of selected resources
+        this.selectedResourcesCount -= 1;
+      }
+      this.resourcesSelected.emit({resCount: this.selectedResourcesCount, resList: this.selectedResourcesList});
+    }
+
 }

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

@@ -90,5 +90,5 @@ <h3>Configure the search panel with the following parameters</h3>
 <br>
 
 <div class="search-results" *ngIf="searchParams">
-    <dsp-list-view [search]="searchParams" (resourceSelected)="openResource($event)"></dsp-list-view>
+    <dsp-list-view [search]="searchParams" (resourcesSelected)="openResource($event)"></dsp-list-view>
 </div>

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

@@ -59,8 +59,8 @@ export class SearchPlaygroundComponent implements OnInit {
         this.searchParams = search;
     }
 
-    openResource(id: string) {
-        console.log('open ', id);
+    openResource(resInfo: object) {
+        console.log('selected resources ', resInfo);
     }
 
     // playground helper method