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

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

@@ -59,6 +59,8 @@ import { ResourceViewComponent } from './views/resource-view/resource-view.compo
 import { DateInputTextComponent } from './values/date-value/date-input-text/date-input-text.component';
 import { DateEditComponent } from './values/date-value/date-input-text/date-edit/date-edit.component';
 import { MatRadioModule } from '@angular/material/radio';
+import { ResourceListContentComponent } from './views/list-view/resource-list/resource-list-content/resource-list-content.component';
+import { ResourceGridContentComponent } from './views/list-view/resource-grid/resource-grid-content/resource-grid-content.component';
 
 @NgModule({
     declarations: [
@@ -96,7 +98,9 @@ import { MatRadioModule } from '@angular/material/radio';
         UploadFileComponent,
         UriValueComponent,
         DateInputTextComponent,
-        DateEditComponent
+        DateEditComponent,
+        ResourceListContentComponent,
+        ResourceGridContentComponent
     ],
     imports: [
         CKEditorModule,

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

@@ -21,25 +21,46 @@
 <!-- container with search results -->
 <div class="list-view-container">
     <dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>
-
-    <div class="list-view" *ngIf="!loading && numberOfAllResults > 0 && resources">
+    <!-- When single resources is selected to view -->
+    <div class="list-view" *ngIf="!loading && numberOfAllResults > 0 && resources && withMultipleSelection === false">
         <div [ngSwitch]="view">
             <dsp-resource-list
                 *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> -->
         </div>
+    </div>
 
+    <!-- When multiple resources are selected for comparision -->
+    <div class="list-view" *ngIf="!loading && numberOfAllResults > 0 && resources && withMultipleSelection">
+        <div [ngSwitch]="view">
+            <dsp-resource-list
+                *ngSwitchCase="'list'"
+                [withMultipleSelection]="true"
+                [resources]="resources"
+                [selectedResourceIdx]="selectedResourceIdx"
+                (resourcesSelected)="emitSelectedResources($event)">
+            </dsp-resource-list>
+            <dsp-resource-grid
+                *ngSwitchCase="'grid'"
+                [withMultipleSelection]="true"
+                [resources]="resources"
+                [selectedResourceIdx]="selectedResourceIdx"
+                (resourcesSelected)="emitSelectedResources($event)">
+            </dsp-resource-grid>
+            <!-- TODO: implement table view -->
+            <!-- <kui-table-view *ngSwitchCase="'table'" [resources]="resources"></kui-table-view> -->
+        </div>
     </div>
 
     <!-- In case of 0 result -->

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

@@ -40,6 +40,6 @@ button.active {
   background-color: $black-12-opacity;
 }
 
-.selected-resource {
+::ng-deep .selected-resource {
   background-color: $black-20-opacity;
 }

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

@@ -22,6 +22,29 @@ export interface SearchParams {
     filter?: IFulltextSearchParams;
 }
 
+/* return the selected resources in below format
+ *
+ * count: total number of resources selected
+ * selectedIds: list of selected resource's ids
+ */
+export interface FilteredResouces {
+    count: number,
+    resListIndex: number[],
+    resIds: string[],
+    selectionType: "multiple" | "single"
+}
+
+/* return the checkbox value
+ *
+ * checked: checkbox value
+ * resIndex: resource index from the list
+ */
+export interface checkboxUpdate {
+    checked: boolean,
+    resListIndex: number,
+    resId: string
+}
+
 @Component({
     selector: 'dsp-list-view',
     templateUrl: './list-view.component.html',
@@ -35,16 +58,28 @@ export class ListViewComponent implements OnChanges {
 
     @Input() displayViewSwitch?: boolean = true;
 
+    /**
+      * Set to true if multiple resources can be selected for comparison
+      */
+    @Input() withMultipleSelection?: boolean = false;
+
+    /**
+     * Click on checkbox will emit the resource info
+     *
+     * @param {EventEmitter<FilteredResouces>} resourcesSelected
+     */
+    @Output() multipleResourcesSelected?: EventEmitter<FilteredResouces> = new EventEmitter<FilteredResouces>();
+
     /**
      * Click on an item will emit the resource iri
      *
      * @param {EventEmitter<string>} resourceSelected
      */
-    @Output() resourceSelected: EventEmitter<string> = new EventEmitter<string>();
+    @Output() singleResourceSelected?: EventEmitter<string> = new EventEmitter<string>();
 
     resources: ReadResourceSequence;
 
-    selectedResourceIdx = 0;
+    selectedResourceIdx: number[] = [];
 
     // MatPaginator Output
     pageEvent: PageEvent;
@@ -78,15 +113,15 @@ export class ListViewComponent implements OnChanges {
         this.view = view;
     }
 
-    emitSelectedResource(id: string) {
-        // get selected resource index from list to highlight it
-        for (let idx = 0; idx < this.resources.resources.length; idx++) {
-            if (this.resources.resources[idx].id === id) {
-                this.selectedResourceIdx = idx;
-                break;
-            }
+    // If 'withMultipleSelection' is true, multiple resources are selected for comparision
+    // If 'withMultipleSelection' is false, single resource is selected for viewing
+    emitSelectedResources(resInfo: FilteredResouces) {
+        this.selectedResourceIdx = resInfo.resListIndex;
+        if (resInfo.selectionType === "multiple") {
+            this.multipleResourcesSelected.emit(resInfo);
+        } else {
+            this.singleResourceSelected.emit(resInfo.resIds[0]);
         }
-        this.resourceSelected.emit(id);
     }
 
     goToPage(page: PageEvent) {
@@ -117,7 +152,9 @@ export class ListViewComponent implements OnChanges {
                 (response: ReadResourceSequence) => {
                     this.resources = response;
                     this.loading = false;
-                    this.emitSelectedResource(this.resources.resources[0].id);
+                    if (!this.withMultipleSelection) {
+                        this.emitSelectedResources({count: 1, resListIndex: [0], resIds: [this.resources.resources[0].id], selectionType: "single"});
+                    }
                 },
                 (error: ApiResponseError) => {
                     this._notification.openSnackBar(error);
@@ -149,7 +186,9 @@ export class ListViewComponent implements OnChanges {
                     (response: ReadResourceSequence) => {
                         this.resources = response;
                         this.loading = false;
-                        this.emitSelectedResource(this.resources.resources[0].id);
+                        if (!this.withMultipleSelection) {
+                            this.emitSelectedResources({count: 1, resListIndex: [0], resIds: [this.resources.resources[0].id], selectionType: "single"});
+                        }
                     },
                     (error: ApiResponseError) => {
                         this._notification.openSnackBar(error);

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

@@ -0,0 +1,29 @@
+
+.res-class-header-text {
+    width: 90%;
+    float: left;
+}
+
+.res-class-header-actions {
+    width: 10%;
+    float: right;
+}
+
+.res-class-label,
+.res-prop-label {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+.res-class-label {
+    font-size: 14px !important;
+}
+
+.res-class-value {
+    font-weight: bold !important;
+    font-size: 16px !important;
+    line-height: 1.5;
+}
+
+.res-prop-label {
+    font-style: italic;
+}

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

@@ -0,0 +1,28 @@
+<mat-card [class.selected-resource]="selectedResourceIdx.indexOf(resIndex) > -1">
+    <!-- TODO: add the representation preview here, mat-card-image can be used for images -->
+    <mat-card-header class="grid-card-header">
+        <mat-card-title-group class="res-class-header-text">
+            <mat-card-subtitle class="res-class-label">{{ resource.entityInfo.classes[resource.type].label }}</mat-card-subtitle>
+            <mat-card-title class="res-class-value">{{ resource.label }}</mat-card-title>
+        </mat-card-title-group>
+
+        <div fxFlex></div>
+
+        <!-- if withMultipleSelection is true, we display checkbox -->
+        <mat-card-title-group *ngIf="withMultipleSelection" class="res-class-header-actions">
+            <mat-checkbox id="{{ resIndex }}" (change)="viewResource($event.checked, resIndex, resource.id)" class="res-checkbox"></mat-checkbox>
+        </mat-card-title-group>
+
+    </mat-card-header>
+    <mat-card-content class="grid-card-content" *ngFor="let prop of resource.properties | keyvalue">
+        <div *ngFor="let val of prop.value">
+            <span class="res-prop-label">
+                {{ resource.entityInfo.properties[val.property].label }}
+            </span>
+
+            <div class="res-prop-value">
+                {{ val.strval | dspTruncate: 256:"..." }}
+            </div>
+        </div>
+    </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { ReadResource } from '@dasch-swiss/dsp-js'
+import { checkboxUpdate } from '../../list-view.component';
+
+@Component({
+  selector: 'dsp-resource-grid-content',
+  templateUrl: './resource-grid-content.component.html',
+  styleUrls: ['./resource-grid-content.component.css']
+})
+export class ResourceGridContentComponent {
+
+  @Input() resource: ReadResource;
+
+  /**
+    * Set to true if multiple resources can be selected for comparison
+    */
+  @Input() withMultipleSelection?: boolean = false;
+
+  /**
+   * Resource index used for checkbox
+   */
+  @Input() resIndex?: number = 0;
+
+  /**
+   * Selected resource index list to apply style
+   */
+   @Input() selectedResourceIdx: number[];
+
+  /**
+   * When checkbox is clicked, event is returned with checkbox value and index
+   */
+  @Output() checkboxUpdated?: EventEmitter<checkboxUpdate> = new EventEmitter<checkboxUpdate>();
+
+  constructor() { }
+
+  /**
+   * Emit the checkbox details
+   *
+   * @param checked boolean: checkbox value
+   * @param resId number: resource index from list
+   */
+  viewResource(checked: boolean, resListIndex: number, resId: string) {
+    this.checkboxUpdated.emit({ checked: checked, resListIndex: resListIndex, resId: resId});
+  }
+
+}

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

@@ -1,24 +1,24 @@
-<div class="resource-grid">
-    <mat-card
+<!-- When withMultipleSelection is false and user can select only one resource at a time to view -->
+<div class="resource-grid" *ngIf="withMultipleSelection === false">
+    <div
         class="grid-card link"
-        [class.selected-resource]="selectedResourceIdx === i"
         *ngFor="let res of resources.resources; let i = index;"
-        (click)="resourceSelected.emit(res.id)">
-        <!-- 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-card-header>
-        <mat-card-content class="grid-card-content" *ngFor="let prop of res.properties | keyvalue">
-            <div *ngFor="let val of prop.value">
-                <span class="res-prop-label">
-                    {{ res.entityInfo.properties[val.property].label }}
-                </span>
+        (click)="viewResource({ checked: true, resListIndex: i, resId: res.id})">
+        <dsp-resource-grid-content [resource]="res" [selectedResourceIdx]="selectedResourceIdx"></dsp-resource-grid-content>
+    </div>
+</div>
 
-                <div class="res-prop-value">
-                    {{ val.strval | dspTruncate: 256:"..." }}
-                </div>
-            </div>
-        </mat-card-content>
-    </mat-card>
+<!-- When withMultipleSelection is true and user can select multiple resources for comparision -->
+<div class="resource-grid" *ngIf="withMultipleSelection === true">
+    <div
+        class="grid-card link"
+        *ngFor="let res of resources.resources; let i = index;">
+        <dsp-resource-grid-content
+            [resource]="res"
+            [withMultipleSelection]="withMultipleSelection"
+            [resIndex]="i"
+            [selectedResourceIdx]="selectedResourceIdx"
+            (checkboxUpdated)="viewResource($event)">
+        </dsp-resource-grid-content>
+    </div>
 </div>

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

@@ -16,25 +16,6 @@
   height: calc(100% - 32px);
 }
 
-.res-class-label,
-.res-prop-label {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.res-class-label {
-  font-size: 14px !important;
-}
-
-.res-class-value {
-  font-weight: bold !important;
-  font-size: 16px !important;
-  line-height: 1.5;
-}
-
-.res-prop-label {
-  font-style: italic;
-}
-
 // responsive for tablet device
 @media (max-width: map-get($grid-breakpoints, tablet)) and (min-width: map-get($grid-breakpoints, phone)) {
   .resource-grid {