+
+ {{ 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 55f07b06..c5d27671 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 823c55e0..82d3dfd0 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 341d32e5..de6f813a 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 42478c0d..552120c9 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 525e4f0a..5a03bf6d 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