From 1e0381ac489504a0486ca34be736d1ee49012e14 Mon Sep 17 00:00:00 2001 From: Snehal Kumbhar Date: Fri, 9 Jul 2021 12:41:08 +0200 Subject: [PATCH] feat(viewer): add checkbox for every resource in list and grid view (DSP-1711) (#311) * feat(resource viewer): add checkbox for every resouce * feat(resource viewer): add function to list and count selected resources * feat(resource viewer): add functionality to grid view * feat(resource viewer): update testcases * feat(resource viewer): add interface for filtered resources * feat(resource viewer): display checkbox at right side in grid view * feat(resource viewer): add two cases - to select single resource or multiple resources * feat(resource viewer): create separate component resource-list-content * feat(resource viewer): update component resource-list-content * feat(resource viewer): create separate component resource-grid-content * feat(resource viewer): cleanup * feat(resource viewer): cleanup, highlight selected resource(s) * feat(resource viewer): update tests * feat(resource viewer): added deprecated warning for resourceSelected event * feat(resource viewer): update multiple selection case - when withMultipleSelection is true and clicked on the resource, it will go to the resource details page - when withMultipleSelection is true and checkbox(s) is selected, it will go to the resource comparison page - resource-grid-content component is deleted - resource-list-content component is deleted * feat(resource viewer): small changes --- .../views/list-view/list-view.component.html | 29 ++++- .../views/list-view/list-view.component.scss | 2 +- .../views/list-view/list-view.component.ts | 74 ++++++++++--- .../resource-grid.component.html | 53 ++++++---- .../resource-grid.component.scss | 15 +++ .../resource-grid.component.spec.ts | 25 +++-- .../resource-grid/resource-grid.component.ts | 100 ++++++++++++++++-- .../resource-list.component.html | 48 +++++---- .../resource-list.component.scss | 16 ++- .../resource-list.component.spec.ts | 23 ++-- .../resource-list/resource-list.component.ts | 89 +++++++++++++++- .../search-playground.component.html | 10 +- .../search-playground.component.ts | 12 ++- 13 files changed, 400 insertions(+), 96 deletions(-) diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.html b/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.html index 5dac4de4e..adfa85c68 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.html +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.html @@ -21,25 +21,46 @@
- -
+ +
+ (resourcesSelected)="emitSelectedResources($event)"> + (resourcesSelected)="emitSelectedResources($event)">
+
+ +
+
+ + + + + + +
diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.scss b/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.scss index 7c86f2dfb..b983823d8 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.scss +++ b/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; } diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.ts b/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.ts index 88db79250..9ef05f21a 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.ts +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.ts @@ -22,6 +22,30 @@ 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, + isCheckbox: boolean +} + @Component({ selector: 'dsp-list-view', templateUrl: './list-view.component.html', @@ -36,15 +60,33 @@ export class ListViewComponent implements OnChanges { @Input() displayViewSwitch?: boolean = true; /** - * Click on an item will emit the resource iri + * 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} resourceSelected + * @param {EventEmitter} resourcesSelected + */ + @Output() multipleResourcesSelected?: EventEmitter = new EventEmitter(); + + /** + * @deprecated Use singleResourceSelected instead. + * Click on an item will emit the resource iri */ @Output() resourceSelected: EventEmitter = new EventEmitter(); + /** + * Click on an item will emit the resource iri + * + * @param {EventEmitter} singleResourceSelected + */ + @Output() singleResourceSelected?: EventEmitter = new EventEmitter(); + resources: ReadResourceSequence; - selectedResourceIdx = 0; + selectedResourceIdx: number[] = []; // MatPaginator Output pageEvent: PageEvent; @@ -78,15 +120,17 @@ 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(resInfo.resIds[0]); } - this.resourceSelected.emit(id); } goToPage(page: PageEvent) { @@ -117,7 +161,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 +195,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); diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.html b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.html index bfc8f7b55..d2f3fa80f 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.html +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.html @@ -1,24 +1,39 @@ +
- - - - {{ res.entityInfo.classes[res.type].label }} - {{ res.label }} - - -
- - {{ res.entityInfo.properties[val.property].label }} - + *ngFor="let resource of resources.resources; let i = index;"> + + + + + {{ resource.entityInfo.classes[resource.type].label }} + {{ resource.label }} + +
+ + + + + -
- {{ val.strval | dspTruncate: 256:"..." }} -
+ +
+ +
+ + {{ resource.entityInfo.properties[val.property].label }} + + +
+ {{ val.strval | dspTruncate: 256:"..." }} +
+
+
- - + +
diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.scss b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.scss index 2dbd29536..9513764f1 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.scss +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.scss @@ -16,6 +16,16 @@ height: calc(100% - 32px); } +.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); @@ -31,6 +41,11 @@ line-height: 1.5; } +.res-class-label, +.res-class-value { + margin: 4px 0 !important; // to overwrite it with .mat-card-title margin +} + .res-prop-label { font-style: italic; } diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.spec.ts b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.spec.ts index 087449082..3a127ce11 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.spec.ts +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.spec.ts @@ -1,8 +1,10 @@ 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'; +import { FilteredResouces } from '../list-view.component'; /** * Mocked truncate pipe from action module. @@ -20,7 +22,7 @@ class MockPipe implements PipeTransform { */ @Component({ template: ` - ` + ` }) class TestParentComponent implements OnInit { @@ -28,7 +30,9 @@ class TestParentComponent implements OnInit { resources: ReadResourceSequence; - resIri: string; + selectedResourceIdx = [0]; + + selectedResources: FilteredResouces; ngOnInit() { @@ -37,8 +41,8 @@ class TestParentComponent implements OnInit { }); } - openResource(id: string) { - this.resIri = id; + emitSelectedResources(resInfo: FilteredResouces) { + this.selectedResources = resInfo; } } @@ -55,7 +59,8 @@ describe('ResourceGridComponent', () => { TestParentComponent ], imports: [ - MatCardModule + MatCardModule, + MatCheckboxModule ], providers: [] }) @@ -78,14 +83,14 @@ describe('ResourceGridComponent', () => { it('should open first resource', () => { // trigger the click const nativeElement = testHostFixture.nativeElement; - const item = nativeElement.querySelector('mat-card'); + const item = nativeElement.querySelector('div.link'); item.dispatchEvent(new Event('click')); - spyOn(testHostComponent, 'openResource').call('http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw'); - expect(testHostComponent.openResource).toHaveBeenCalled(); - expect(testHostComponent.openResource).toHaveBeenCalledTimes(1); + spyOn(testHostComponent, 'emitSelectedResources').call({count: 1, resListIndex: [0], resIds: ['http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw'], selectionType: "single"}); + expect(testHostComponent.emitSelectedResources).toHaveBeenCalled(); + expect(testHostComponent.emitSelectedResources).toHaveBeenCalledTimes(1); - expect(testHostComponent.resIri).toEqual('http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw'); + //expect(testHostComponent.resIri).toEqual('http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw'); }); }); diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.ts b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.ts index f4622e337..bf5d06df5 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.ts +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-grid/resource-grid.component.ts @@ -1,5 +1,7 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, Output, ViewChildren } from '@angular/core'; +import { MatCheckbox } from '@angular/material/checkbox'; import { ReadResourceSequence } from '@dasch-swiss/dsp-js'; +import { FilteredResouces, checkboxUpdate } from '../list-view.component'; @Component({ selector: 'dsp-resource-grid', @@ -9,21 +11,99 @@ import { ReadResourceSequence } from '@dasch-swiss/dsp-js'; export class ResourceGridComponent { /** - * List of resources of type ReadResourceSequence - * - * @param {ReadResourceSequence} resources - */ + * List of all resource checkboxes. This list is used to + * unselect all checkboxes when single selection to view + * resource is used + */ + @ViewChildren("gridCkbox") resChecks: MatCheckbox[]; + + /** + * List of resources of type ReadResourceSequence + * + * @param {ReadResourceSequence} resources + */ @Input() resources: ReadResourceSequence; - @Input() selectedResourceIdx: number; + /** + * List of all selected resources indices + */ + @Input() selectedResourceIdx: number[]; + + /** + * 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} resourcesSelected + */ + @Output() resourcesSelected?: EventEmitter = new EventEmitter(); + + // for keeping track of multiple selection + selectedResourcesCount = 0; + selectedResourcesList = []; + selectedResourceIdxMultiple = []; + + constructor() { } /** - * Click on an item will emit the resource iri + * Maintain the list and count of selected resources * - * @param {EventEmitter} resourceSelected + * @param {checkboxUpdate} checkbox value and resource index */ - @Output() resourceSelected: EventEmitter = new EventEmitter(); + viewResource(status: checkboxUpdate) { + // when multiple selection and checkbox is used to select more + // than one resources + if (this.withMultipleSelection && status.isCheckbox) { + if (status.checked) { + if(this.selectedResourceIdx.indexOf(status.resListIndex) < 0) { + // add resource in to the selected resources list + this.selectedResourcesList.push(status.resId); - constructor() { } + // increase the count of selected resources + this.selectedResourcesCount += 1; + + // add resource list index to apply selected class style + this.selectedResourceIdxMultiple.push(status.resListIndex); + } + } + else { + // remove resource from the selected resources list + let index = this.selectedResourcesList.findIndex(d => d === status.resId); + this.selectedResourcesList.splice(index, 1); + + // decrease the count of selected resources + this.selectedResourcesCount -= 1; + + // remove resource list index from the selected index list + index = this.selectedResourceIdxMultiple.findIndex(d => d === status.resListIndex); + this.selectedResourceIdxMultiple.splice(index, 1); + } + + this.selectedResourceIdx = this.selectedResourceIdxMultiple; + this.resourcesSelected.emit({count: this.selectedResourcesCount, resListIndex: this.selectedResourceIdx, resIds: this.selectedResourcesList, selectionType: "multiple"}); + + } else { + // else condition when single resource is clicked for viewing + + // unselect checkboxes if any + this.resChecks.forEach(function(ckb){ + if(ckb.checked) { + ckb.checked = false; + } + }); + + // reset all the variables for multiple selection + this.selectedResourceIdxMultiple = []; + this.selectedResourcesCount = 0; + this.selectedResourcesList = []; + + // add resource list index to apply selected class style + this.selectedResourceIdx = [status.resListIndex]; + this.resourcesSelected.emit({count: 1, resListIndex: this.selectedResourceIdx, resIds: [status.resId], selectionType: "single"}); + } + } } diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.html b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.html index de72ea8be..a30d44cd8 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.html +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.html @@ -1,26 +1,36 @@ + - - image_search -

- {{ res.entityInfo.classes[res.type].label }} -

-

{{ res.label }}

+ *ngFor="let resource of resources.resources; let i = index; let last = last"> + + image_search +
+

+ {{ resource.entityInfo.classes[resource.type].label }} +

+

{{ resource.label }}

+
+
+ + {{ resource.entityInfo.properties[val.property].label }} + -
-
- - {{ res.entityInfo.properties[val.property].label }} - - -
- {{ val.strval | dspTruncate: 256:"..." }} +
+ {{ val.strval | dspTruncate: 256:"..." }} +
+
-
- + + + + +
diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.scss b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.scss index 55f07b065..c5d276713 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.scss +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.scss @@ -16,11 +16,24 @@ } } +.res-checkbox { + margin: 0 15px; +} + +.res-prop-value { + text-align: justify; +} + .res-class-label, .res-prop-label { color: rgba(0, 0, 0, 0.54); } +.res-class-label, +.res-class-value { + margin: 4px 0; +} + .res-class-label { font-size: 14px !important; } @@ -33,5 +46,4 @@ .res-prop-label { font-style: italic; -} - +} \ No newline at end of file diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.spec.ts b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.spec.ts index 823c55e01..82d3dfd07 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.spec.ts +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.spec.ts @@ -1,10 +1,12 @@ 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'; import { MockResource, ReadResourceSequence } from '@dasch-swiss/dsp-js'; import { ResourceListComponent } from './resource-list.component'; +import { FilteredResouces } from '../list-view.component'; /** * Mocked truncate pipe from action module. @@ -22,7 +24,7 @@ class MockPipe implements PipeTransform { */ @Component({ template: ` - ` + ` }) class TestParentComponent implements OnInit { @@ -30,7 +32,9 @@ class TestParentComponent implements OnInit { resources: ReadResourceSequence; - resIri: string; + selectedResourceIdx = [0]; + + selectedResources: FilteredResouces; ngOnInit() { @@ -39,8 +43,8 @@ class TestParentComponent implements OnInit { }); } - openResource(id: string) { - this.resIri = id; + emitSelectedResources(resInfo: FilteredResouces) { + this.selectedResources = resInfo; } } @@ -57,6 +61,7 @@ describe('ResourceListComponent', () => { TestParentComponent ], imports: [ + MatCheckboxModule, MatIconModule, MatLineModule, MatListModule @@ -82,14 +87,14 @@ describe('ResourceListComponent', () => { it('should open first resource', () => { // trigger the click const nativeElement = testHostFixture.nativeElement; - const item = nativeElement.querySelector('mat-list-item'); + const item = nativeElement.querySelector('div.link'); item.dispatchEvent(new Event('click')); - spyOn(testHostComponent, 'openResource').call('http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw'); - expect(testHostComponent.openResource).toHaveBeenCalled(); - expect(testHostComponent.openResource).toHaveBeenCalledTimes(1); + spyOn(testHostComponent, 'emitSelectedResources').call({count: 1, resListIndex: [0], resIds: ['http://rdfh.ch/0001/H6gBWUuJSuuO-CilHV8kQw'], selectionType: "single"}); + expect(testHostComponent.emitSelectedResources).toHaveBeenCalled(); + expect(testHostComponent.emitSelectedResources).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']}); }); diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.ts b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.ts index 341d32e50..de6f813a5 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.ts +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/resource-list/resource-list.component.ts @@ -1,5 +1,7 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, Output, ViewChildren } from '@angular/core'; +import { MatCheckbox } from '@angular/material/checkbox'; import { ReadResourceSequence } from '@dasch-swiss/dsp-js'; +import { FilteredResouces, checkboxUpdate } from '../list-view.component'; @Component({ selector: 'dsp-resource-list', @@ -8,6 +10,13 @@ import { ReadResourceSequence } from '@dasch-swiss/dsp-js'; }) export class ResourceListComponent { + /** + * List of all resource checkboxes. This list is used to + * unselect all checkboxes when single selection to view + * resource is used + */ + @ViewChildren("ckbox") resChecks: MatCheckbox[]; + /** * List of resources of type ReadResourceSequence * @@ -15,15 +24,85 @@ export class ResourceListComponent { */ @Input() resources: ReadResourceSequence; - @Input() selectedResourceIdx: number; + /** + * List of all selected resources indices + */ + @Input() selectedResourceIdx: number[]; /** - * Click on an item will emit the resource iri + * 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} resourceSelected + * @param {EventEmitter} resourcesSelected */ - @Output() resourceSelected: EventEmitter = new EventEmitter(); + @Output() resourcesSelected?: EventEmitter = new EventEmitter(); + + // for keeping track of multiple selection + selectedResourcesCount = 0; + selectedResourcesList = []; + selectedResourceIdxMultiple = []; constructor() { } + /** + * Maintain the list and count of selected resources + * + * @param {checkboxUpdate} checkbox value and resource index + */ + viewResource(status: checkboxUpdate) { + + // when multiple selection and checkbox is used to select more + // than one resources + if (this.withMultipleSelection && status.isCheckbox) { + if (status.checked) { + if(this.selectedResourceIdx.indexOf(status.resListIndex) < 0) { + // add resource in to the selected resources list + this.selectedResourcesList.push(status.resId); + + // increase the count of selected resources + this.selectedResourcesCount += 1; + + // add resource list index to apply selected class style + this.selectedResourceIdxMultiple.push(status.resListIndex); + } + } + else { + // remove resource from the selected resources list + let index = this.selectedResourcesList.findIndex(d => d === status.resId); + this.selectedResourcesList.splice(index, 1); + + // decrease the count of selected resources + this.selectedResourcesCount -= 1; + + // remove resource list index from the selected index list + index = this.selectedResourceIdxMultiple.findIndex(d => d === status.resListIndex); + this.selectedResourceIdxMultiple.splice(index, 1); + } + this.selectedResourceIdx = this.selectedResourceIdxMultiple; + this.resourcesSelected.emit({count: this.selectedResourcesCount, resListIndex: this.selectedResourceIdx, resIds: this.selectedResourcesList, selectionType: "multiple"}); + + } else { + // else condition when single resource is clicked for viewing + + // unselect checkboxes if any + this.resChecks.forEach(function(ckb){ + if(ckb.checked) { + ckb.checked = false; + } + }); + + // reset all the variables for multiple selection + this.selectedResourceIdxMultiple = []; + this.selectedResourcesCount = 0; + this.selectedResourcesList = []; + + // add resource list index to apply selected class style + this.selectedResourceIdx = [status.resListIndex]; + this.resourcesSelected.emit({count: 1, resListIndex: this.selectedResourceIdx, resIds: [status.resId], selectionType: "single"}); + } + } } diff --git a/src/app/search-playground/search-playground.component.html b/src/app/search-playground/search-playground.component.html index 42478c0de..552120c97 100644 --- a/src/app/search-playground/search-playground.component.html +++ b/src/app/search-playground/search-playground.component.html @@ -89,6 +89,12 @@

Configure the search panel with the following parameters


+ + + +
+ +
\ No newline at end of file diff --git a/src/app/search-playground/search-playground.component.ts b/src/app/search-playground/search-playground.component.ts index 525e4f0a1..5a03bf6dc 100644 --- a/src/app/search-playground/search-playground.component.ts +++ b/src/app/search-playground/search-playground.component.ts @@ -59,8 +59,16 @@ export class SearchPlaygroundComponent implements OnInit { this.searchParams = search; } - openResource(id: string) { - console.log('open ', id); + // This funtion is called when 'withMultipleSelection' is true and + // multiple resources are selected for comparision + openMultipleResources(resInfo: object) { + console.log('selected resources ', resInfo); + } + + // This funtion is called when 'withMultipleSelection' is false and + // single resources is selected to view + openSingleResource(id: string) { + console.log('Open ', id); } // playground helper method