From 016e22ac558a98d019cccd266a7512a4045b0d04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= Date: Tue, 10 Aug 2021 16:11:34 +0200 Subject: [PATCH] refactor(viewer): return label and id in multiple resource selection (DSP-1842 / DSP-1820) (#327) * refactor(lib): clean up and update package.json * chore: git ignore yalc.lock * refactor(viewer): refactor code and improve functionality * chore(playground): update playground with new setup * fix(viewer): bug fix in tests * refactor(viewer): remove console.logs --- .gitignore | 1 + projects/dsp-ui/ng-package.json | 9 +- projects/dsp-ui/package.json | 9 +- .../views/list-view/list-view.component.ts | 106 ++++++++++++------ .../views/list-view/list-view.service.ts | 46 +++++--- .../resource-grid.component.html | 6 +- .../resource-grid.component.spec.ts | 6 +- .../resource-grid/resource-grid.component.ts | 8 +- .../resource-list.component.html | 4 +- .../resource-list.component.spec.ts | 6 +- .../resource-list/resource-list.component.ts | 17 ++- .../multiple-resources-view.component.ts | 68 +++++++---- .../viewer-playground.component.html | 8 +- .../viewer-playground.component.ts | 30 +++-- 14 files changed, 209 insertions(+), 115 deletions(-) diff --git a/.gitignore b/.gitignore index 333f18008..3eaa1776c 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,7 @@ # dependencies /node_modules /.yalc +yalc.lock # profiling files chrome-profiler-events*.json diff --git a/projects/dsp-ui/ng-package.json b/projects/dsp-ui/ng-package.json index a8e7f7d00..82a2f314f 100644 --- a/projects/dsp-ui/ng-package.json +++ b/projects/dsp-ui/ng-package.json @@ -7,13 +7,14 @@ "lib": { "entryFile": "src/public-api.ts", "umdModuleIds": { + "@ckeditor/ckeditor5-angular": "ckeditor5Angular", "@dasch-swiss/dsp-js": "@dasch-swiss/dsp-js", - "ngx-color-picker": "ngxColorPicker", + "angular-split": "angular-split", + "ckeditor5-custom-build": "Editor", "jdnconvertiblecalendar": "jdnconvertiblecalendar", "jdnconvertiblecalendardateadapter": "jdnconvertiblecalendardateadapter", - "ts-md5": "tsMd5", - "@ckeditor/ckeditor5-angular": "ckeditor5Angular", - "ckeditor5-custom-build": "Editor" + "ngx-color-picker": "ngxColorPicker", + "ts-md5": "tsMd5" } } } diff --git a/projects/dsp-ui/package.json b/projects/dsp-ui/package.json index 58990cc4d..de5e43954 100644 --- a/projects/dsp-ui/package.json +++ b/projects/dsp-ui/package.json @@ -20,17 +20,18 @@ "tslib": "^2.0.0" }, "peerDependencies": { + "@angular/cdk": "^11.2.5", "@angular/common": "~11.2.6", "@angular/core": "~11.2.6", "@angular/material": "^11.2.5", - "@angular/cdk": "^11.2.5", + "@ckeditor/ckeditor5-angular": "^1.2.3", "@dasch-swiss/dsp-js": "^3.0.0", + "angular-split": "^4.0.0", + "ckeditor5-custom-build": "github:dasch-swiss/ckeditor_custom_build", "jdnconvertiblecalendar": "^0.0.7", "jdnconvertiblecalendardateadapter": "^0.0.17", "ngx-color-picker": "^11.0.0", "openseadragon": "^2.4.2", - "svg-overlay": "github:openseadragon/svg-overlay", - "@ckeditor/ckeditor5-angular": "^1.2.3", - "ckeditor5-custom-build": "github:dasch-swiss/ckeditor_custom_build" + "svg-overlay": "github:openseadragon/svg-overlay" } } 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 795129067..068298ce5 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 @@ -1,6 +1,6 @@ import { Component, EventEmitter, Inject, Input, OnChanges, Output } from '@angular/core'; import { PageEvent } from '@angular/material/paginator'; -import { ApiResponseError, CountQueryResponse, IFulltextSearchParams, KnoraApiConnection, ReadResource, ReadResourceSequence } from '@dasch-swiss/dsp-js'; +import { ApiResponseError, CountQueryResponse, IFulltextSearchParams, KnoraApiConnection, ReadResourceSequence } from '@dasch-swiss/dsp-js'; import { NotificationService } from '../../../action/services/notification.service'; import { DspApiConnectionToken } from '../../../core/core.module'; import { AdvancedSearchParamsService } from '../../../search/services/advanced-search-params.service'; @@ -22,16 +22,21 @@ export interface SearchParams { filter?: IFulltextSearchParams; } +export interface ShortResInfo { + id: string; + label: string; +} + /* 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' +export interface FilteredResources { + count: number; + resListIndex: number[]; + resInfo: ShortResInfo[]; + selectionType: 'multiple' | 'single'; } /* return the checkbox value @@ -40,10 +45,11 @@ export interface FilteredResouces { * resIndex: resource index from the list */ export interface CheckboxUpdate { - checked: boolean, - resListIndex: number, - resId: string, - isCheckbox: boolean + checked: boolean; + resIndex: number; + resId: string; + resLabel: string; + isCheckbox: boolean; } @Component({ @@ -65,13 +71,22 @@ export class ListViewComponent implements OnChanges { @Input() withMultipleSelection?: boolean = false; /** + * Emits the selected resources 1-n + */ + @Output() selectedResources: EventEmitter = new EventEmitter(); + + /** + * @deprecated Use selectedResources instead + * * Click on checkbox will emit the resource info * - * @param {EventEmitter} resourcesSelected + * @param {EventEmitter} resourcesSelected */ - @Output() multipleResourcesSelected?: EventEmitter = new EventEmitter(); + @Output() multipleResourcesSelected?: EventEmitter = new EventEmitter(); /** + * @deprecated Use selectedResources instead + * * Click on an item will emit the resource iri * * @param {EventEmitter} singleResourceSelected @@ -79,7 +94,7 @@ export class ListViewComponent implements OnChanges { @Output() singleResourceSelected?: EventEmitter = new EventEmitter(); /** - * @deprecated Use singleResourceSelected instead. + * @deprecated Use selectedResources instead. * Click on an item will emit the resource iri */ @Output() resourceSelected: EventEmitter = new EventEmitter(); @@ -122,17 +137,21 @@ export class ListViewComponent implements OnChanges { this.view = view; } - // 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]); + // the child component send the selected resources to the parent of this component directly; + // but when this component is intialized, it should select the first item in the list and + // emit this selected resource to the parent. + emitSelectedResources(res?: FilteredResources) { + + if (!res || res.count === 0) { + // no resource is selected: In case of an error or no search results + this.selectedResources.emit({ count: 0, resListIndex: [], resInfo: [], selectionType: 'single' }); + } else if (res.count > 0) { + this.selectedResourceIdx = res.resListIndex; + this.selectedResources.emit(res); + this.resourceSelected.emit(res.resInfo[0].id); } + + } goToPage(page: PageEvent) { @@ -140,6 +159,11 @@ export class ListViewComponent implements OnChanges { this._doSearch(); } + + /** + * do the search and send the resources to the child components + * like resource-list, resource-grid or resource-table + */ private _doSearch() { this.loading = true; @@ -153,14 +177,13 @@ export class ListViewComponent implements OnChanges { this.numberOfAllResults = count.numberOfResults; if (this.numberOfAllResults === 0) { + this.emitSelectedResources(); this.resources = undefined; - this._emitSelectedResource(undefined); this.loading = false; } }, (countError: ApiResponseError) => { this._notification.openSnackBar(countError); - this._emitSelectedResource(undefined); } ); } @@ -168,9 +191,13 @@ export class ListViewComponent implements OnChanges { // perform full text search this._dspApiConnection.v2.search.doFulltextSearch(this.search.query, this.pageEvent.pageIndex, this.search.filter).subscribe( (response: ReadResourceSequence) => { + // if the response does not contain any resources even the search count is greater than 0, + // it means that the user does not have the permissions to see anything: emit an empty result + if (response.resources.length === 0) { + this.emitSelectedResources(); + } this.resources = response; this.loading = false; - this._emitSelectedResource(this.resources.resources); }, (error: ApiResponseError) => { this._notification.openSnackBar(error); @@ -189,14 +216,13 @@ export class ListViewComponent implements OnChanges { this.numberOfAllResults = count.numberOfResults; if (this.numberOfAllResults === 0) { + this.emitSelectedResources(); this.resources = undefined; - this._emitSelectedResource(undefined); this.loading = false; } }, (countError: ApiResponseError) => { this._notification.openSnackBar(countError); - this._emitSelectedResource(undefined); } ); } @@ -207,9 +233,13 @@ export class ListViewComponent implements OnChanges { if (typeof gravsearch === 'string') { this._dspApiConnection.v2.search.doExtendedSearch(gravsearch).subscribe( (response: ReadResourceSequence) => { + // if the response does not contain any resources even the search count is greater than 0, + // it means that the user does not have the permissions to see anything: emit an empty result + if (response.resources.length === 0) { + this.emitSelectedResources(); + } this.resources = response; this.loading = false; - this._emitSelectedResource(this.resources.resources); }, (error: ApiResponseError) => { this._notification.openSnackBar(error); @@ -227,12 +257,16 @@ export class ListViewComponent implements OnChanges { } - private _emitSelectedResource(resources: ReadResource[]) { - if (resources && resources.length > 0) { - this.emitSelectedResources({ count: 1, resListIndex: [0], resIds: [resources[0].id], selectionType: 'single' }); - } else { - this.emitSelectedResources({ count: 0, resListIndex: [], resIds: [], selectionType: 'single'}); - } - } + // private _prepareResourceToEmit(resources: ReadResource[]) { + // if (resources && resources.length > 0) { + // const resInfo: ShortResInfo = { + // id: resources[0].id, + // label: resources[0].label + // }; + // this.emitSelectedResources({ count: 1, resListIndex: [0], resInfo: [resInfo], selectionType: 'single' }); + // } else { + // this.emitSelectedResources({ count: 0, resListIndex: [], resInfo: [], selectionType: 'single'}); + // } + // } } diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.service.ts b/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.service.ts index 5fe3f308f..d96b7323a 100644 --- a/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.service.ts +++ b/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { MatCheckbox } from '@angular/material/checkbox'; -import { CheckboxUpdate, FilteredResouces } from './list-view.component'; +import { CheckboxUpdate, FilteredResources, ShortResInfo } from './list-view.component'; @Injectable({ providedIn: 'root' @@ -9,52 +9,68 @@ export class ListViewService { // for keeping track of multiple selection selectedResourcesCount = 0; - selectedResourcesList = []; + selectedResourcesList: ShortResInfo[] = []; selectedResourceIdxMultiple = []; constructor() { } - viewResource(status: CheckboxUpdate, withMultipleSelection: boolean, selectedResourceIdx: number [], resChecks: MatCheckbox[]): FilteredResouces { + viewResource(status: CheckboxUpdate, withMultipleSelection: boolean, selectedResourceIdx: number [], resChecks: MatCheckbox[]): FilteredResources { + + if (selectedResourceIdx.length === 1 && this.selectedResourcesCount === 0) { + // reset the selected resources count and list + // this.selectedResourcesCount = 0; + this.selectedResourcesList = []; + this.selectedResourceIdxMultiple = []; + } + + + const resInfo: ShortResInfo = { + id: status.resId, + label: status.resLabel + }; // when multiple selection and checkbox is used to select more // than one resources if (withMultipleSelection && status.isCheckbox) { if (status.checked) { - if (selectedResourceIdx.indexOf(status.resListIndex) <= 0) { + if (selectedResourceIdx.indexOf(status.resIndex) <= 0) { // add resource in to the selected resources list - this.selectedResourcesList.push(status.resId); + this.selectedResourcesList.push(resInfo); // increase the count of selected resources this.selectedResourcesCount += 1; // add resource list index to apply selected class style - this.selectedResourceIdxMultiple.push(status.resListIndex); + this.selectedResourceIdxMultiple.push(status.resIndex); } } else { // remove resource from the selected resources list - let index = this.selectedResourcesList.findIndex(d => d === status.resId); + let index = this.selectedResourcesList.findIndex(d => d.id === 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); + index = this.selectedResourceIdxMultiple.findIndex(d => d === status.resIndex); this.selectedResourceIdxMultiple.splice(index, 1); } // selectedResourceIdx = selectedResourceIdxMultiple; - return { count: this.selectedResourcesCount, resListIndex: this.selectedResourceIdxMultiple, resIds: this.selectedResourcesList, selectionType: "multiple" }; + return { count: this.selectedResourcesCount, resListIndex: this.selectedResourceIdxMultiple, resInfo: this.selectedResourcesList, selectionType: "multiple" }; } else { // else condition when single resource is clicked for viewing // unselect checkboxes if any - resChecks.forEach(function (ckb) { - if (ckb.checked) { - ckb.checked = false; - } - }); + if (resChecks) { + + resChecks.forEach(function (ckb) { + if (ckb.checked) { + ckb.checked = false; + } + }); + } // reset all the variables for multiple selection this.selectedResourceIdxMultiple = []; @@ -63,7 +79,7 @@ export class ListViewService { // add resource list index to apply selected class style // selectedResourceIdx = [status.resListIndex]; - return { count: 1, resListIndex: [status.resListIndex], resIds: [status.resId], selectionType: "single" }; + return { count: 1, resListIndex: [status.resIndex], resInfo: [resInfo], selectionType: "single" }; } } } 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 08d650347..7b1901c16 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 @@ -5,7 +5,7 @@ - + {{ resource.entityInfo.classes[resource.type].label }} {{ resource.label }} @@ -14,13 +14,13 @@ -
+
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 3a127ce11..a86276e1c 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 @@ -4,7 +4,7 @@ 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'; +import { FilteredResources } from '../list-view.component'; /** * Mocked truncate pipe from action module. @@ -32,7 +32,7 @@ class TestParentComponent implements OnInit { selectedResourceIdx = [0]; - selectedResources: FilteredResouces; + selectedResources: FilteredResources; ngOnInit() { @@ -41,7 +41,7 @@ class TestParentComponent implements OnInit { }); } - emitSelectedResources(resInfo: FilteredResouces) { + emitSelectedResources(resInfo: FilteredResources) { this.selectedResources = resInfo; } 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 44a53358c..0d7dbd442 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,7 +1,7 @@ import { Component, EventEmitter, Input, Output, ViewChildren } from '@angular/core'; import { MatCheckbox } from '@angular/material/checkbox'; import { ReadResourceSequence } from '@dasch-swiss/dsp-js'; -import { CheckboxUpdate, FilteredResouces } from '../list-view.component'; +import { CheckboxUpdate, FilteredResources } from '../list-view.component'; import { ListViewService } from '../list-view.service'; @Component({ @@ -38,16 +38,16 @@ export class ResourceGridComponent { /** * Click on checkbox will emit the resource info * - * @param {EventEmitter} resourcesSelected + * @param {EventEmitter} resourcesSelected */ - @Output() resourcesSelected?: EventEmitter = new EventEmitter(); + @Output() resourcesSelected?: EventEmitter = new EventEmitter(); constructor( private _listView: ListViewService ) { } selectResource(status: CheckboxUpdate) { - const selection = this._listView.viewResource(status, this.withMultipleSelection, this.selectedResourceIdx, this.resChecks); + const selection: FilteredResources = this._listView.viewResource(status, this.withMultipleSelection, this.selectedResourceIdx, this.resChecks); this.selectedResourceIdx = selection.resListIndex; 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 12b702568..a642eaa63 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 @@ -6,7 +6,7 @@ *ngFor="let resource of resources.resources; let i = index; let last = last"> image_search -
+

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

@@ -27,7 +27,7 @@

{{ resource.label }}

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 82d3dfd07..8be4de565 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 @@ -6,7 +6,7 @@ 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'; +import { FilteredResources } from '../list-view.component'; /** * Mocked truncate pipe from action module. @@ -34,7 +34,7 @@ class TestParentComponent implements OnInit { selectedResourceIdx = [0]; - selectedResources: FilteredResouces; + selectedResources: FilteredResources; ngOnInit() { @@ -43,7 +43,7 @@ class TestParentComponent implements OnInit { }); } - emitSelectedResources(resInfo: FilteredResouces) { + emitSelectedResources(resInfo: FilteredResources) { this.selectedResources = resInfo; } 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 bc7e03a50..437664fb6 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,7 +1,7 @@ -import { Component, EventEmitter, Input, Output, ViewChildren } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; import { MatCheckbox } from '@angular/material/checkbox'; import { ReadResourceSequence } from '@dasch-swiss/dsp-js'; -import { CheckboxUpdate, FilteredResouces } from '../list-view.component'; +import { CheckboxUpdate, FilteredResources } from '../list-view.component'; import { ListViewService } from '../list-view.service'; @Component({ @@ -9,7 +9,7 @@ import { ListViewService } from '../list-view.service'; templateUrl: './resource-list.component.html', styleUrls: ['./resource-list.component.scss'] }) -export class ResourceListComponent { +export class ResourceListComponent implements OnInit { /** * List of all resource checkboxes. This list is used to @@ -38,16 +38,21 @@ export class ResourceListComponent { /** * Click on checkbox will emit the resource info * - * @param {EventEmitter} resourcesSelected + * @param {EventEmitter} resourcesSelected */ - @Output() resourcesSelected?: EventEmitter = new EventEmitter(); + @Output() resourcesSelected?: EventEmitter = new EventEmitter(); constructor( private _listView: ListViewService ) { } + ngOnInit() { + // select the first item in the list + this.selectResource({ checked: true, resIndex: 0, resId: this.resources.resources[0].id, resLabel: this.resources.resources[0].label, isCheckbox: false }) + } + selectResource(status: CheckboxUpdate) { - const selection = this._listView.viewResource(status, this.withMultipleSelection, this.selectedResourceIdx, this.resChecks); + const selection: FilteredResources = this._listView.viewResource(status, this.withMultipleSelection, this.selectedResourceIdx, this.resChecks); this.selectedResourceIdx = selection.resListIndex; diff --git a/projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.ts b/projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.ts index 51611298a..0eeafd797 100644 --- a/projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.ts +++ b/projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.ts @@ -1,34 +1,56 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnChanges } from '@angular/core'; +import { ShortResInfo } from '../list-view/list-view.component'; @Component({ - selector: 'dsp-multiple-resources-view', - templateUrl: './multiple-resources-view.component.html', - styleUrls: ['./multiple-resources-view.component.scss'] + selector: 'dsp-multiple-resources-view', + templateUrl: './multiple-resources-view.component.html', + styleUrls: ['./multiple-resources-view.component.scss'] }) -export class MultipleResourcesViewComponent implements OnInit { +export class MultipleResourcesViewComponent implements OnChanges { - // no of resources selected - @Input() noOfResources: number; + /** + * number of resources + */ + @Input() noOfResources?: number; - // list of resources - @Input() resourceIds: string[]; + /** + * resource ids + */ + @Input() resourceIds?: string[]; - // if number of selected resources > 3, divide them in 2 rows - topRow = []; - bottomRow = []; + /** + * list of resources with id and label + */ + @Input() resources?: ShortResInfo[]; - constructor() { } + // if number of selected resources > 3, divide them into 2 rows + topRow = []; + bottomRow = []; - ngOnInit(): void { - // if number of resources are more than 3, divide it into 2 rows - // otherwise display then in 1 row only - if (this.noOfResources < 4) { - this.topRow = this.resourceIds; - } - else { - this.topRow = this.resourceIds.slice(0, this.noOfResources / 2); - this.bottomRow = this.resourceIds.slice(this.noOfResources / 2) + constructor() { } + + ngOnChanges(): void { + + if (this.resources && this.resources.length) { + this.resourceIds = []; + this.resources.forEach(res => { + this.resourceIds.push(res.id); + }); + } + + if (!this.noOfResources) { + this.noOfResources = ((this.resourceIds && this.resourceIds.length) ? this.resourceIds.length : this.resources.length); + } + + // if number of resources are more than 3, divide it into 2 rows + // otherwise display then in 1 row only + if (this.noOfResources < 4) { + this.topRow = this.resourceIds; + } + else { + this.topRow = this.resourceIds.slice(0, this.noOfResources / 2); + this.bottomRow = this.resourceIds.slice(this.noOfResources / 2); + } } - } } diff --git a/src/app/viewer-playground/viewer-playground.component.html b/src/app/viewer-playground/viewer-playground.component.html index d20187f44..fb0dafd75 100644 --- a/src/app/viewer-playground/viewer-playground.component.html +++ b/src/app/viewer-playground/viewer-playground.component.html @@ -38,10 +38,10 @@

Multiple resources viewer

Resources displayed:

    -
  • - {{res}} +
  • + {{res.label}} ({{res.id}})
- -
\ No newline at end of file + +
diff --git a/src/app/viewer-playground/viewer-playground.component.ts b/src/app/viewer-playground/viewer-playground.component.ts index 521d4d40f..7b22a5ccc 100644 --- a/src/app/viewer-playground/viewer-playground.component.ts +++ b/src/app/viewer-playground/viewer-playground.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { SessionService } from '@dasch-swiss/dsp-ui'; +import { SessionService, ShortResInfo } from '@dasch-swiss/dsp-ui'; import { ReadLinkValue, ReadProject } from '@dasch-swiss/dsp-js'; @Component({ @@ -18,14 +18,28 @@ export class ViewerPlaygroundComponent implements OnInit { ]; resourceIri: string = this.resources[0]; - resourceIds = [ - 'http://rdfh.ch/0803/18a671b8a601', - 'http://rdfh.ch/0803/7e4cfc5417', - 'http://rdfh.ch/0803/6ad3e2c47501', - 'http://rdfh.ch/0803/009e225a5f01', - 'http://rdfh.ch/0803/00ed33070f02' + resourcesWithLabel: ShortResInfo[] = [ + { + id: 'http://rdfh.ch/0803/18a671b8a601', + label: 'e2V' + }, + { + id: 'http://rdfh.ch/0803/7e4cfc5417', + label: 'g3r' + }, + { + id: 'http://rdfh.ch/0803/6ad3e2c47501', + label: '30v' + }, + { + id: 'http://rdfh.ch/0803/009e225a5f01', + label: 'm3v' + }, + { + id: 'http://rdfh.ch/0803/00ed33070f02', + label: 'C5r' + } ]; - noOfResources = this.resourceIds.length; constructor(