From ae4a7002bf4d2f5c15fadb7c71fe6e21fd1727d4 Mon Sep 17 00:00:00 2001 From: Stijn Taelemans Date: Wed, 1 Dec 2021 10:50:13 +0100 Subject: [PATCH] feat: add paginator to collection page (#526) * feat: created simple paginator for collection root component WIP * chore: added extra test objects * fix: adjusted styling of paginator WIP * chore: move paginator to shared components package * chore: import new paginator component in manage WIP * feat: add paginator to presentation * test: coverage --- packages/solid-crs-components/lib/demo.ts | 2 + packages/solid-crs-components/lib/index.ts | 1 + .../lib/paginator/paginator.component.spec.ts | 85 ++ .../lib/paginator/paginator.component.ts | 132 +++ packages/solid-crs-components/package.json | 4 +- packages/solid-crs-components/tests/setup.ts | 2 + packages/solid-crs-core/package.json | 2 +- packages/solid-crs-manage/lib/app.ts | 3 +- .../collection-root.component.spec.ts | 2 - .../collection/collection-root.component.ts | 53 +- .../solid-crs-manage/lib/public/nl-NL.json | 3 + packages/solid-crs-manage/package.json | 6 +- .../hetlageland/heritage-objects/data-1$.ttl | 792 ++++++++++++++++++ packages/solid-crs-presentation/lib/app.ts | 3 +- .../collection/collection-root.component.ts | 45 +- .../lib/public/nl-NL.json | 5 +- packages/solid-crs-presentation/package.json | 6 +- 17 files changed, 1125 insertions(+), 21 deletions(-) create mode 100644 packages/solid-crs-components/lib/paginator/paginator.component.spec.ts create mode 100644 packages/solid-crs-components/lib/paginator/paginator.component.ts diff --git a/packages/solid-crs-components/lib/demo.ts b/packages/solid-crs-components/lib/demo.ts index d71d2a9a..31e5d22e 100644 --- a/packages/solid-crs-components/lib/demo.ts +++ b/packages/solid-crs-components/lib/demo.ts @@ -17,6 +17,7 @@ import { LargeCardComponent } from './collections/large-card.component'; import { DemoLargeCardComponent } from './demo/demo-large-card.component'; import { ProgressBarComponent } from './loading/progress-bar-component'; import { PopupComponent } from './alerts/popup.component'; +import { PaginatorComponent } from './paginator/paginator.component'; /** * Register tags for components. @@ -40,3 +41,4 @@ customElements.define('nde-demo-svg', DemoSVGComponent); customElements.define('nde-sidebar-item', SidebarItemComponent); customElements.define('nde-progress-bar', ProgressBarComponent); customElements.define('nde-popup', PopupComponent); +customElements.define('nde-paginator', PaginatorComponent); diff --git a/packages/solid-crs-components/lib/index.ts b/packages/solid-crs-components/lib/index.ts index 56e64458..d12d5511 100644 --- a/packages/solid-crs-components/lib/index.ts +++ b/packages/solid-crs-components/lib/index.ts @@ -25,3 +25,4 @@ export * from './state/schema'; export * from './state/state'; export * from './header/content-header.component'; export * from './loading/progress-bar-component'; +export * from './paginator/paginator.component'; diff --git a/packages/solid-crs-components/lib/paginator/paginator.component.spec.ts b/packages/solid-crs-components/lib/paginator/paginator.component.spec.ts new file mode 100644 index 00000000..829b1702 --- /dev/null +++ b/packages/solid-crs-components/lib/paginator/paginator.component.spec.ts @@ -0,0 +1,85 @@ +/* eslint-disable @typescript-eslint/dot-notation */ +import { PaginatorComponent } from './paginator.component'; + +describe('PaginatorComponent', () => { + + let component: PaginatorComponent; + + beforeEach(() => { + + component = window.document.createElement('nde-paginator') as PaginatorComponent; + component.pageIndex = 0; + component.objectsPerPage = 18; + component.objectsAmount = 40; + + component.translator = { + translate: () => 'page 1 of 10', + } as any; + + }); + + afterEach(() => { + + document.getElementsByTagName('html')[0].innerHTML = ''; + + }); + + it('should be correctly instantiated', async () => { + + window.document.body.appendChild(component); + await component.updateComplete; + expect(component).toBeTruthy(); + + }); + + describe('HTML', () => { + + beforeEach(async () => { + + window.document.body.appendChild(component); + await component.updateComplete; + + }); + + it('should disable previous button when on first page', async () => { + + component.pageIndex = 0; + await component.updateComplete; + expect(component.shadowRoot.querySelector('button.previous').disabled).toBeTruthy(); + + }); + + it('should disable next button when on last page', async () => { + + // 40 objects, 18 per page, on page 3 (index 2) + component.pageIndex = 2; + await component.updateComplete; + expect(component.shadowRoot.querySelector('button.next').disabled).toBeTruthy(); + + }); + + }); + + describe('onNext', () => { + + it('should dispatch next CustomEvent', async (done) => { + + component.addEventListener('next', () => done()); + component['onNext'](); + + }); + + }); + + describe('onPrevious', () => { + + it('should dispatch previous CustomEvent', async (done) => { + + component.addEventListener('previous', () => done()); + component['onPrevious'](); + + }); + + }); + +}); diff --git a/packages/solid-crs-components/lib/paginator/paginator.component.ts b/packages/solid-crs-components/lib/paginator/paginator.component.ts new file mode 100644 index 00000000..1b6e66c7 --- /dev/null +++ b/packages/solid-crs-components/lib/paginator/paginator.component.ts @@ -0,0 +1,132 @@ +import { css, CSSResult, html, property, TemplateResult, unsafeCSS } from 'lit-element'; +import { RxLitElement } from 'rx-lit'; +import { Dropdown, Theme } from '@netwerk-digitaal-erfgoed/solid-crs-theme'; +import { unsafeSVG } from 'lit-html/directives/unsafe-svg'; +import { Translator } from '@netwerk-digitaal-erfgoed/solid-crs-core'; + +/** + * A component for paginator controls. + */ +export class PaginatorComponent extends RxLitElement { + + /** + * The index of the page curently being viewed. + */ + @property({ type: Object }) + public translator: Translator; + + /** + * The index of the page curently being viewed. + */ + @property({ type: Number }) + public pageIndex: number; + + /** + * The amount of objects to show per page. + */ + @property({ type: Number }) + public objectsPerPage: number; + + /** + * The total amount of objects. + */ + @property({ type: Number }) + public objectsAmount: number; + + /** + * Emits a custom next event. + */ + private onNext(): void { + + this.dispatchEvent(new CustomEvent('next')); + + } + + /** + * Emits a custom previous event. + */ + private onPrevious(): void { + + this.dispatchEvent(new CustomEvent('previous')); + + } + + /** + * Renders the component as HTML. + * + * @returns The rendered HTML of the component. + */ + render(): TemplateResult { + + return html` + +

${this.translator.translate('common.paginator.page-counter') + .replace('{CURRENT}', (this.pageIndex+1).toString()) + .replace('{TOTAL}', Math.ceil(this.objectsAmount / this.objectsPerPage).toString())} +

+ + + + + + + + + `; + + } + + /** + * The styles associated with the component. + */ + static get styles(): CSSResult[] { + + return [ + unsafeCSS(Theme), + css` + :host { + display: flex; + justify-content: flex-end; + gap: var(--gap-normal); + height: var(--gap-normal); + } + :host[hidden] { + display: none; + } + :host > * { + margin: 0; + padding: 0; + display: block; + background-color: unset; + font-size: var(--font-size-small); + line-height: var(--gap-normal); + min-width: var(--gap-normal); + } + :host svg { + fill: var(--colors-primary-dark); + } + button:disabled svg { + fill: var(--colors-foreground-light); + } + .previous svg { + transform: rotate(90deg); + } + .next svg { + transform: rotate(270deg); + } + `, + ]; + + } + +} diff --git a/packages/solid-crs-components/package.json b/packages/solid-crs-components/package.json index ac9a6bd9..27276edf 100644 --- a/packages/solid-crs-components/package.json +++ b/packages/solid-crs-components/package.json @@ -80,9 +80,9 @@ "coverageThreshold": { "global": { "branches": 93.17, - "functions": 98.97, + "functions": 99.01, "lines": 100, - "statements": 99.69 + "statements": 99.7 } }, "coveragePathIgnorePatterns": [ diff --git a/packages/solid-crs-components/tests/setup.ts b/packages/solid-crs-components/tests/setup.ts index 77a5d934..43109e1d 100644 --- a/packages/solid-crs-components/tests/setup.ts +++ b/packages/solid-crs-components/tests/setup.ts @@ -27,6 +27,7 @@ import { SidebarListComponent } from '../lib/sidebar/sidebar-list.component'; import { SidebarListItemComponent } from '../lib/sidebar/sidebar-list-item.component'; import { FormElementComponent } from '../lib/forms/form-element.component'; import { AlertComponent } from '../lib/alerts/alert.component'; +import { PaginatorComponent } from '../lib/paginator/paginator.component'; /** * Enable mocks for fetch. @@ -50,3 +51,4 @@ customElements.define('nde-card', CardComponent); customElements.define('nde-large-card', LargeCardComponent); customElements.define('nde-progress-bar', ProgressBarComponent); customElements.define('nde-popup', PopupComponent); +customElements.define('nde-paginator', PaginatorComponent); diff --git a/packages/solid-crs-core/package.json b/packages/solid-crs-core/package.json index 14e37b6f..498c6ace 100644 --- a/packages/solid-crs-core/package.json +++ b/packages/solid-crs-core/package.json @@ -102,4 +102,4 @@ "preset": "@digita-ai/jest-config", "maxWorkers": 6 } -} \ No newline at end of file +} diff --git a/packages/solid-crs-manage/lib/app.ts b/packages/solid-crs-manage/lib/app.ts index 46e51bc0..b51c075d 100644 --- a/packages/solid-crs-manage/lib/app.ts +++ b/packages/solid-crs-manage/lib/app.ts @@ -1,4 +1,4 @@ -import { AlertComponent, CardComponent, CollectionCardComponent, ContentHeaderComponent, FormElementComponent, LargeCardComponent, ObjectCardComponent, SidebarComponent, SidebarItemComponent, SidebarListComponent, SidebarListItemComponent, ProgressBarComponent } from '@netwerk-digitaal-erfgoed/solid-crs-components'; +import { AlertComponent, CardComponent, CollectionCardComponent, ContentHeaderComponent, FormElementComponent, LargeCardComponent, ObjectCardComponent, SidebarComponent, SidebarItemComponent, SidebarListComponent, SidebarListItemComponent, ProgressBarComponent, PaginatorComponent } from '@netwerk-digitaal-erfgoed/solid-crs-components'; import { inspect } from '@xstate/inspect'; import { SearchRootComponent } from './features/search/search-root.component'; import { AppRootComponent } from './app-root.component'; @@ -44,3 +44,4 @@ customElements.define('nde-sidebar-list', SidebarListComponent); customElements.define('nde-sidebar-item', SidebarItemComponent); customElements.define('nde-progress-bar', ProgressBarComponent); customElements.define('nde-term-search', TermSearchComponent); +customElements.define('nde-paginator', PaginatorComponent); diff --git a/packages/solid-crs-manage/lib/features/collection/collection-root.component.spec.ts b/packages/solid-crs-manage/lib/features/collection/collection-root.component.spec.ts index dc7724e1..2abec38a 100644 --- a/packages/solid-crs-manage/lib/features/collection/collection-root.component.spec.ts +++ b/packages/solid-crs-manage/lib/features/collection/collection-root.component.spec.ts @@ -67,9 +67,7 @@ describe('CollectionRootComponent', () => { component = window.document.createElement('nde-collection-root') as CollectionRootComponent; component.actor = machine; - component.formActor = machine.children.get(FormActors.FORM_MACHINE); - component.translator = new MockTranslator('nl-NL'); }); diff --git a/packages/solid-crs-manage/lib/features/collection/collection-root.component.ts b/packages/solid-crs-manage/lib/features/collection/collection-root.component.ts index 831b1f23..3c86670a 100644 --- a/packages/solid-crs-manage/lib/features/collection/collection-root.component.ts +++ b/packages/solid-crs-manage/lib/features/collection/collection-root.component.ts @@ -75,19 +75,31 @@ export class CollectionRootComponent extends RxLitElement { * Indicates if the form is being submitted. */ @internalProperty() - isSubmitting? = false; + isSubmitting = false; /** * Indicates if if the form validation passed. */ @internalProperty() - isValid? = false; + isValid = false; /** * Indicates if one the form fields has changed. */ @internalProperty() - isDirty? = false; + isDirty = false; + + /** + * Indicates if one the form fields has changed. + */ + @internalProperty() + objectsPerPage = 18; + + /** + * Indicates if one the form fields has changed. + */ + @internalProperty() + pageIndex = 0; /** * The popup component shown when the delete icon is clicked @@ -95,6 +107,12 @@ export class CollectionRootComponent extends RxLitElement { @query('nde-popup#delete-popup') deletePopup: PopupComponent; + /** + * The element containing the grid of collection objects. + */ + @query('.content') + pageContent: HTMLElement; + /** * Hook called on at every update after connection to the DOM. */ @@ -228,9 +246,33 @@ export class CollectionRootComponent extends RxLitElement { : html` ${this.objects?.length ? html` -
- ${this.objects.map((object) => html``)} + + + + +
+ ${this.objects + .slice(this.pageIndex * this.objectsPerPage, this.pageIndex * this.objectsPerPage + this.objectsPerPage) + .map((object) => + html``)}
+ + + ` : html`
@@ -305,6 +347,7 @@ export class CollectionRootComponent extends RxLitElement { overflow-y: auto; display:flex; flex-direction: column; + gap: var(--gap-large); } nde-progress-bar { position: absolute; diff --git a/packages/solid-crs-manage/lib/public/nl-NL.json b/packages/solid-crs-manage/lib/public/nl-NL.json index e0a606b7..1d82b956 100644 --- a/packages/solid-crs-manage/lib/public/nl-NL.json +++ b/packages/solid-crs-manage/lib/public/nl-NL.json @@ -252,6 +252,9 @@ "months-ago": "maanden geleden", "year-ago": "jaar geleden", "years-ago": "jaar geleden" + }, + "paginator": { + "page-counter": "Pagina {CURRENT} van {TOTAL}" } }, "search": { diff --git a/packages/solid-crs-manage/package.json b/packages/solid-crs-manage/package.json index b434e1ba..40b4fc53 100644 --- a/packages/solid-crs-manage/package.json +++ b/packages/solid-crs-manage/package.json @@ -88,10 +88,10 @@ ], "coverageThreshold": { "global": { - "statements": 87.14, + "statements": 86.51, "branches": 83.79, - "lines": 87.95, - "functions": 76.07 + "lines": 87.61, + "functions": 75.21 } }, "automock": false, diff --git a/packages/solid-crs-pods/data/hetlageland/heritage-objects/data-1$.ttl b/packages/solid-crs-pods/data/hetlageland/heritage-objects/data-1$.ttl index bc983cba..44fc6298 100644 --- a/packages/solid-crs-pods/data/hetlageland/heritage-objects/data-1$.ttl +++ b/packages/solid-crs-pods/data/hetlageland/heritage-objects/data-1$.ttl @@ -177,6 +177,798 @@ schema:license ; schema:mainEntity <#object-2> . +<#object-3> + + # IDENTIFICATION + + rdf:type schema:Photograph ; + schema:additionalType ; + schema:identifier "SK-A-1115" ; + schema:name "De Slag bij Waterloo"@nl ; + schema:description "De slag bij Waterloo, 18 juni 1815"@nl ; + schema:isPartOf ; + schema:maintainer ; + + + # CREATION + + schema:creator ; + schema:locationCreated ; + schema:material ; + schema:dateCreated "1824-07-24" ; + + + # REPRESENTATION + + + schema:about <#object-3-subject-03261450-3a78-5427-adf4-026c1285e113> ; + schema:about <#object-3-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> ; + schema:about <#object-3-person-20b74da3-2a23-543a-a44b-867c2e81ae09> ; + schema:about <#object-3-event-99c2df58-1688-5795-9455-6148bee7c8fc> ; + + + # DIMENSIONS + + schema:height <#object-3-height> ; + schema:width <#object-3-width> ; + schema:depth <#object-3-depth> ; + schema:weight <#object-3-weight> ; + + + # OTHER + + schema:mainEntityOfPage <#object-3-digital> . + +<#object-3-subject-03261450-3a78-5427-adf4-026c1285e113> + rdf:type schema:DefinedTerm ; + schema:name "veldslagen" ; + schema:sameAs . + +<#object-3-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> + rdf:type schema:Place ; + schema:name "Delft" ; + schema:sameAs . + +<#object-3-person-20b74da3-2a23-543a-a44b-867c2e81ae09> + rdf:type schema:Person ; + schema:name "Arthur Wellesley of Wellington" ; + schema:sameAs . + +<#object-3-event-99c2df58-1688-5795-9455-6148bee7c8fc> + rdf:type schema:Event ; + schema:name "Slag bij Waterloo" ; + schema:sameAs . + +<#object-3-height> + rdf:type schema:QuantitativeValue ; + schema:value 52.0 ; + schema:unitCode 'CMT' . + +<#object-3-width> + rdf:type schema:QuantitativeValue ; + schema:value 82.0 ; + schema:unitCode 'CMT' . + +<#object-3-depth> + rdf:type schema:QuantitativeValue ; + schema:value 2.0 ; + schema:unitCode 'CMT' . + +<#object-3-weight> + rdf:type schema:QuantitativeValue ; + schema:value 120.0 ; + schema:unitCode 'KGM' . + +<#object-3-digital> + rdf:type schema:ImageObject ; + schema:contentUrl ; + schema:license ; + schema:mainEntity <#object-3> . + +<#object-4> + + # IDENTIFICATION + + rdf:type schema:Photograph ; + schema:additionalType ; + schema:identifier "SK-A-1115" ; + schema:name "De Slag bij Waterloo"@nl ; + schema:description "De slag bij Waterloo, 18 juni 1815"@nl ; + schema:isPartOf ; + schema:maintainer ; + + + # CREATION + + schema:creator ; + schema:locationCreated ; + schema:material ; + schema:dateCreated "1824-07-24" ; + + + # REPRESENTATION + + + schema:about <#object-4-subject-03261450-3a78-5427-adf4-026c1285e113> ; + schema:about <#object-4-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> ; + schema:about <#object-4-person-20b74da3-2a23-543a-a44b-867c2e81ae09> ; + schema:about <#object-4-event-99c2df58-1688-5795-9455-6148bee7c8fc> ; + + + # DIMENSIONS + + schema:height <#object-4-height> ; + schema:width <#object-4-width> ; + schema:depth <#object-4-depth> ; + schema:weight <#object-4-weight> ; + + + # OTHER + + schema:mainEntityOfPage <#object-4-digital> . + +<#object-4-subject-03261450-3a78-5427-adf4-026c1285e113> + rdf:type schema:DefinedTerm ; + schema:name "veldslagen" ; + schema:sameAs . + +<#object-4-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> + rdf:type schema:Place ; + schema:name "Delft" ; + schema:sameAs . + +<#object-4-person-20b74da3-2a23-543a-a44b-867c2e81ae09> + rdf:type schema:Person ; + schema:name "Arthur Wellesley of Wellington" ; + schema:sameAs . + +<#object-4-event-99c2df58-1688-5795-9455-6148bee7c8fc> + rdf:type schema:Event ; + schema:name "Slag bij Waterloo" ; + schema:sameAs . + +<#object-4-height> + rdf:type schema:QuantitativeValue ; + schema:value 52.0 ; + schema:unitCode 'CMT' . + +<#object-4-width> + rdf:type schema:QuantitativeValue ; + schema:value 82.0 ; + schema:unitCode 'CMT' . + +<#object-4-depth> + rdf:type schema:QuantitativeValue ; + schema:value 2.0 ; + schema:unitCode 'CMT' . + +<#object-4-weight> + rdf:type schema:QuantitativeValue ; + schema:value 120.0 ; + schema:unitCode 'KGM' . + +<#object-4-digital> + rdf:type schema:ImageObject ; + schema:contentUrl ; + schema:license ; + schema:mainEntity <#object-4> . + +<#object-5> + + # IDENTIFICATION + + rdf:type schema:Photograph ; + schema:additionalType ; + schema:identifier "SK-A-1115" ; + schema:name "De Slag bij Waterloo"@nl ; + schema:description "De slag bij Waterloo, 18 juni 1815"@nl ; + schema:isPartOf ; + schema:maintainer ; + + + # CREATION + + schema:creator ; + schema:locationCreated ; + schema:material ; + schema:dateCreated "1824-07-24" ; + + + # REPRESENTATION + + + schema:about <#object-5-subject-03261450-3a78-5427-adf4-026c1285e113> ; + schema:about <#object-5-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> ; + schema:about <#object-5-person-20b74da3-2a23-543a-a44b-867c2e81ae09> ; + schema:about <#object-5-event-99c2df58-1688-5795-9455-6148bee7c8fc> ; + + + # DIMENSIONS + + schema:height <#object-5-height> ; + schema:width <#object-5-width> ; + schema:depth <#object-5-depth> ; + schema:weight <#object-5-weight> ; + + + # OTHER + + schema:mainEntityOfPage <#object-5-digital> . + +<#object-5-subject-03261450-3a78-5427-adf4-026c1285e113> + rdf:type schema:DefinedTerm ; + schema:name "veldslagen" ; + schema:sameAs . + +<#object-5-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> + rdf:type schema:Place ; + schema:name "Delft" ; + schema:sameAs . + +<#object-5-person-20b74da3-2a23-543a-a44b-867c2e81ae09> + rdf:type schema:Person ; + schema:name "Arthur Wellesley of Wellington" ; + schema:sameAs . + +<#object-5-event-99c2df58-1688-5795-9455-6148bee7c8fc> + rdf:type schema:Event ; + schema:name "Slag bij Waterloo" ; + schema:sameAs . + +<#object-5-height> + rdf:type schema:QuantitativeValue ; + schema:value 52.0 ; + schema:unitCode 'CMT' . + +<#object-5-width> + rdf:type schema:QuantitativeValue ; + schema:value 82.0 ; + schema:unitCode 'CMT' . + +<#object-5-depth> + rdf:type schema:QuantitativeValue ; + schema:value 2.0 ; + schema:unitCode 'CMT' . + +<#object-5-weight> + rdf:type schema:QuantitativeValue ; + schema:value 120.0 ; + schema:unitCode 'KGM' . + +<#object-5-digital> + rdf:type schema:ImageObject ; + schema:contentUrl ; + schema:license ; + schema:mainEntity <#object-5> . + +<#object-13> + + # IDENTIFICATION + + rdf:type schema:Photograph ; + schema:additionalType ; + schema:identifier "SK-A-1115" ; + schema:name "De Slag bij Waterloo"@nl ; + schema:description "De slag bij Waterloo, 18 juni 1815"@nl ; + schema:isPartOf ; + schema:maintainer ; + + + # CREATION + + schema:creator ; + schema:locationCreated ; + schema:material ; + schema:dateCreated "1824-07-24" ; + + + # REPRESENTATION + + + schema:about <#object-13-subject-03261450-3a78-5427-adf4-026c1285e113> ; + schema:about <#object-13-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> ; + schema:about <#object-13-person-20b74da3-2a23-543a-a44b-867c2e81ae09> ; + schema:about <#object-13-event-99c2df58-1688-5795-9455-6148bee7c8fc> ; + + + # DIMENSIONS + + schema:height <#object-13-height> ; + schema:width <#object-13-width> ; + schema:depth <#object-13-depth> ; + schema:weight <#object-13-weight> ; + + + # OTHER + + schema:mainEntityOfPage <#object-13-digital> . + +<#object-13-subject-03261450-3a78-5427-adf4-026c1285e113> + rdf:type schema:DefinedTerm ; + schema:name "veldslagen" ; + schema:sameAs . + +<#object-13-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> + rdf:type schema:Place ; + schema:name "Delft" ; + schema:sameAs . + +<#object-13-person-20b74da3-2a23-543a-a44b-867c2e81ae09> + rdf:type schema:Person ; + schema:name "Arthur Wellesley of Wellington" ; + schema:sameAs . + +<#object-13-event-99c2df58-1688-5795-9455-6148bee7c8fc> + rdf:type schema:Event ; + schema:name "Slag bij Waterloo" ; + schema:sameAs . + +<#object-13-height> + rdf:type schema:QuantitativeValue ; + schema:value 52.0 ; + schema:unitCode 'CMT' . + +<#object-13-width> + rdf:type schema:QuantitativeValue ; + schema:value 82.0 ; + schema:unitCode 'CMT' . + +<#object-13-depth> + rdf:type schema:QuantitativeValue ; + schema:value 2.0 ; + schema:unitCode 'CMT' . + +<#object-13-weight> + rdf:type schema:QuantitativeValue ; + schema:value 120.0 ; + schema:unitCode 'KGM' . + +<#object-13-digital> + rdf:type schema:ImageObject ; + schema:contentUrl ; + schema:license ; + schema:mainEntity <#object-13> . + +<#object-14> + + # IDENTIFICATION + + rdf:type schema:Photograph ; + schema:additionalType ; + schema:identifier "SK-A-1115" ; + schema:name "De Slag bij Waterloo"@nl ; + schema:description "De slag bij Waterloo, 18 juni 1815"@nl ; + schema:isPartOf ; + schema:maintainer ; + + + # CREATION + + schema:creator ; + schema:locationCreated ; + schema:material ; + schema:dateCreated "1824-07-24" ; + + + # REPRESENTATION + + + schema:about <#object-14-subject-03261450-3a78-5427-adf4-026c1285e113> ; + schema:about <#object-14-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> ; + schema:about <#object-14-person-20b74da3-2a23-543a-a44b-867c2e81ae09> ; + schema:about <#object-14-event-99c2df58-1688-5795-9455-6148bee7c8fc> ; + + + # DIMENSIONS + + schema:height <#object-14-height> ; + schema:width <#object-14-width> ; + schema:depth <#object-14-depth> ; + schema:weight <#object-14-weight> ; + + + # OTHER + + schema:mainEntityOfPage <#object-14-digital> . + +<#object-14-subject-03261450-3a78-5427-adf4-026c1285e113> + rdf:type schema:DefinedTerm ; + schema:name "veldslagen" ; + schema:sameAs . + +<#object-14-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> + rdf:type schema:Place ; + schema:name "Delft" ; + schema:sameAs . + +<#object-14-person-20b74da3-2a23-543a-a44b-867c2e81ae09> + rdf:type schema:Person ; + schema:name "Arthur Wellesley of Wellington" ; + schema:sameAs . + +<#object-14-event-99c2df58-1688-5795-9455-6148bee7c8fc> + rdf:type schema:Event ; + schema:name "Slag bij Waterloo" ; + schema:sameAs . + +<#object-14-height> + rdf:type schema:QuantitativeValue ; + schema:value 52.0 ; + schema:unitCode 'CMT' . + +<#object-14-width> + rdf:type schema:QuantitativeValue ; + schema:value 82.0 ; + schema:unitCode 'CMT' . + +<#object-14-depth> + rdf:type schema:QuantitativeValue ; + schema:value 2.0 ; + schema:unitCode 'CMT' . + +<#object-14-weight> + rdf:type schema:QuantitativeValue ; + schema:value 120.0 ; + schema:unitCode 'KGM' . + +<#object-14-digital> + rdf:type schema:ImageObject ; + schema:contentUrl ; + schema:license ; + schema:mainEntity <#object-14> . + +<#object-15> + + # IDENTIFICATION + + rdf:type schema:Photograph ; + schema:additionalType ; + schema:identifier "SK-A-1115" ; + schema:name "De Slag bij Waterloo"@nl ; + schema:description "De slag bij Waterloo, 18 juni 1815"@nl ; + schema:isPartOf ; + schema:maintainer ; + + + # CREATION + + schema:creator ; + schema:locationCreated ; + schema:material ; + schema:dateCreated "1824-07-24" ; + + + # REPRESENTATION + + + schema:about <#object-15-subject-03261450-3a78-5427-adf4-026c1285e113> ; + schema:about <#object-15-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> ; + schema:about <#object-15-person-20b74da3-2a23-543a-a44b-867c2e81ae09> ; + schema:about <#object-15-event-99c2df58-1688-5795-9455-6148bee7c8fc> ; + + + # DIMENSIONS + + schema:height <#object-15-height> ; + schema:width <#object-15-width> ; + schema:depth <#object-15-depth> ; + schema:weight <#object-15-weight> ; + + + # OTHER + + schema:mainEntityOfPage <#object-15-digital> . + +<#object-15-subject-03261450-3a78-5427-adf4-026c1285e113> + rdf:type schema:DefinedTerm ; + schema:name "veldslagen" ; + schema:sameAs . + +<#object-15-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> + rdf:type schema:Place ; + schema:name "Delft" ; + schema:sameAs . + +<#object-15-person-20b74da3-2a23-543a-a44b-867c2e81ae09> + rdf:type schema:Person ; + schema:name "Arthur Wellesley of Wellington" ; + schema:sameAs . + +<#object-15-event-99c2df58-1688-5795-9455-6148bee7c8fc> + rdf:type schema:Event ; + schema:name "Slag bij Waterloo" ; + schema:sameAs . + +<#object-15-height> + rdf:type schema:QuantitativeValue ; + schema:value 52.0 ; + schema:unitCode 'CMT' . + +<#object-15-width> + rdf:type schema:QuantitativeValue ; + schema:value 82.0 ; + schema:unitCode 'CMT' . + +<#object-15-depth> + rdf:type schema:QuantitativeValue ; + schema:value 2.0 ; + schema:unitCode 'CMT' . + +<#object-15-weight> + rdf:type schema:QuantitativeValue ; + schema:value 120.0 ; + schema:unitCode 'KGM' . + +<#object-15-digital> + rdf:type schema:ImageObject ; + schema:contentUrl ; + schema:license ; + schema:mainEntity <#object-15> . + +<#object-23> + + # IDENTIFICATION + + rdf:type schema:Photograph ; + schema:additionalType ; + schema:identifier "SK-A-1115" ; + schema:name "De Slag bij Waterloo"@nl ; + schema:description "De slag bij Waterloo, 18 juni 1815"@nl ; + schema:isPartOf ; + schema:maintainer ; + + + # CREATION + + schema:creator ; + schema:locationCreated ; + schema:material ; + schema:dateCreated "1824-07-24" ; + + + # REPRESENTATION + + + schema:about <#object-23-subject-03261450-3a78-5427-adf4-026c1285e113> ; + schema:about <#object-23-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> ; + schema:about <#object-23-person-20b74da3-2a23-543a-a44b-867c2e81ae09> ; + schema:about <#object-23-event-99c2df58-1688-5795-9455-6148bee7c8fc> ; + + + # DIMENSIONS + + schema:height <#object-23-height> ; + schema:width <#object-23-width> ; + schema:depth <#object-23-depth> ; + schema:weight <#object-23-weight> ; + + + # OTHER + + schema:mainEntityOfPage <#object-23-digital> . + +<#object-23-subject-03261450-3a78-5427-adf4-026c1285e113> + rdf:type schema:DefinedTerm ; + schema:name "veldslagen" ; + schema:sameAs . + +<#object-23-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> + rdf:type schema:Place ; + schema:name "Delft" ; + schema:sameAs . + +<#object-23-person-20b74da3-2a23-543a-a44b-867c2e81ae09> + rdf:type schema:Person ; + schema:name "Arthur Wellesley of Wellington" ; + schema:sameAs . + +<#object-23-event-99c2df58-1688-5795-9455-6148bee7c8fc> + rdf:type schema:Event ; + schema:name "Slag bij Waterloo" ; + schema:sameAs . + +<#object-23-height> + rdf:type schema:QuantitativeValue ; + schema:value 52.0 ; + schema:unitCode 'CMT' . + +<#object-23-width> + rdf:type schema:QuantitativeValue ; + schema:value 82.0 ; + schema:unitCode 'CMT' . + +<#object-23-depth> + rdf:type schema:QuantitativeValue ; + schema:value 2.0 ; + schema:unitCode 'CMT' . + +<#object-23-weight> + rdf:type schema:QuantitativeValue ; + schema:value 120.0 ; + schema:unitCode 'KGM' . + +<#object-23-digital> + rdf:type schema:ImageObject ; + schema:contentUrl ; + schema:license ; + schema:mainEntity <#object-23> . + +<#object-24> + + # IDENTIFICATION + + rdf:type schema:Photograph ; + schema:additionalType ; + schema:identifier "SK-A-1115" ; + schema:name "De Slag bij Waterloo"@nl ; + schema:description "De slag bij Waterloo, 18 juni 1815"@nl ; + schema:isPartOf ; + schema:maintainer ; + + + # CREATION + + schema:creator ; + schema:locationCreated ; + schema:material ; + schema:dateCreated "1824-07-24" ; + + + # REPRESENTATION + + + schema:about <#object-24-subject-03261450-3a78-5427-adf4-026c1285e113> ; + schema:about <#object-24-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> ; + schema:about <#object-24-person-20b74da3-2a23-543a-a44b-867c2e81ae09> ; + schema:about <#object-24-event-99c2df58-1688-5795-9455-6148bee7c8fc> ; + + + # DIMENSIONS + + schema:height <#object-24-height> ; + schema:width <#object-24-width> ; + schema:depth <#object-24-depth> ; + schema:weight <#object-24-weight> ; + + + # OTHER + + schema:mainEntityOfPage <#object-24-digital> . + +<#object-24-subject-03261450-3a78-5427-adf4-026c1285e113> + rdf:type schema:DefinedTerm ; + schema:name "veldslagen" ; + schema:sameAs . + +<#object-24-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> + rdf:type schema:Place ; + schema:name "Delft" ; + schema:sameAs . + +<#object-24-person-20b74da3-2a23-543a-a44b-867c2e81ae09> + rdf:type schema:Person ; + schema:name "Arthur Wellesley of Wellington" ; + schema:sameAs . + +<#object-24-event-99c2df58-1688-5795-9455-6148bee7c8fc> + rdf:type schema:Event ; + schema:name "Slag bij Waterloo" ; + schema:sameAs . + +<#object-24-height> + rdf:type schema:QuantitativeValue ; + schema:value 52.0 ; + schema:unitCode 'CMT' . + +<#object-24-width> + rdf:type schema:QuantitativeValue ; + schema:value 82.0 ; + schema:unitCode 'CMT' . + +<#object-24-depth> + rdf:type schema:QuantitativeValue ; + schema:value 2.0 ; + schema:unitCode 'CMT' . + +<#object-24-weight> + rdf:type schema:QuantitativeValue ; + schema:value 120.0 ; + schema:unitCode 'KGM' . + +<#object-24-digital> + rdf:type schema:ImageObject ; + schema:contentUrl ; + schema:license ; + schema:mainEntity <#object-24> . + +<#object-25> + + # IDENTIFICATION + + rdf:type schema:Photograph ; + schema:additionalType ; + schema:identifier "SK-A-1115" ; + schema:name "De Slag bij Waterloo"@nl ; + schema:description "De slag bij Waterloo, 18 juni 1815"@nl ; + schema:isPartOf ; + schema:maintainer ; + + + # CREATION + + schema:creator ; + schema:locationCreated ; + schema:material ; + schema:dateCreated "1824-07-24" ; + + + # REPRESENTATION + + + schema:about <#object-25-subject-03261450-3a78-5427-adf4-026c1285e113> ; + schema:about <#object-25-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> ; + schema:about <#object-25-person-20b74da3-2a23-543a-a44b-867c2e81ae09> ; + schema:about <#object-25-event-99c2df58-1688-5795-9455-6148bee7c8fc> ; + + + # DIMENSIONS + + schema:height <#object-25-height> ; + schema:width <#object-25-width> ; + schema:depth <#object-25-depth> ; + schema:weight <#object-25-weight> ; + + + # OTHER + + schema:mainEntityOfPage <#object-25-digital> . + +<#object-25-subject-03261450-3a78-5427-adf4-026c1285e113> + rdf:type schema:DefinedTerm ; + schema:name "veldslagen" ; + schema:sameAs . + +<#object-25-location-e249bb2f-33e0-5b64-a8d0-47144bcf1a86> + rdf:type schema:Place ; + schema:name "Delft" ; + schema:sameAs . + +<#object-25-person-20b74da3-2a23-543a-a44b-867c2e81ae09> + rdf:type schema:Person ; + schema:name "Arthur Wellesley of Wellington" ; + schema:sameAs . + +<#object-25-event-99c2df58-1688-5795-9455-6148bee7c8fc> + rdf:type schema:Event ; + schema:name "Slag bij Waterloo" ; + schema:sameAs . + +<#object-25-height> + rdf:type schema:QuantitativeValue ; + schema:value 52.0 ; + schema:unitCode 'CMT' . + +<#object-25-width> + rdf:type schema:QuantitativeValue ; + schema:value 82.0 ; + schema:unitCode 'CMT' . + +<#object-25-depth> + rdf:type schema:QuantitativeValue ; + schema:value 2.0 ; + schema:unitCode 'CMT' . + +<#object-25-weight> + rdf:type schema:QuantitativeValue ; + schema:value 120.0 ; + schema:unitCode 'KGM' . + +<#object-25-digital> + rdf:type schema:ImageObject ; + schema:contentUrl ; + schema:license ; + schema:mainEntity <#object-25> . + schema:name "bidprentjes". diff --git a/packages/solid-crs-presentation/lib/app.ts b/packages/solid-crs-presentation/lib/app.ts index 8a462584..c56139f9 100644 --- a/packages/solid-crs-presentation/lib/app.ts +++ b/packages/solid-crs-presentation/lib/app.ts @@ -1,4 +1,4 @@ -import { AlertComponent, CardComponent, CollectionCardComponent, ContentHeaderComponent, FormElementComponent, LargeCardComponent, ObjectCardComponent, SidebarComponent, SidebarItemComponent, SidebarListComponent, SidebarListItemComponent, ProgressBarComponent, PopupComponent } from '@netwerk-digitaal-erfgoed/solid-crs-components'; +import { AlertComponent, CardComponent, CollectionCardComponent, ContentHeaderComponent, FormElementComponent, LargeCardComponent, ObjectCardComponent, SidebarComponent, SidebarItemComponent, SidebarListComponent, SidebarListItemComponent, ProgressBarComponent, PopupComponent, PaginatorComponent } from '@netwerk-digitaal-erfgoed/solid-crs-components'; import { inspect } from '@xstate/inspect'; import { SearchRootComponent } from './features/search/search-root.component'; import { AppRootComponent } from './app-root.component'; @@ -41,3 +41,4 @@ customElements.define('nde-sidebar-list', SidebarListComponent); customElements.define('nde-sidebar-item', SidebarItemComponent); customElements.define('nde-progress-bar', ProgressBarComponent); customElements.define('nde-popup', PopupComponent); +customElements.define('nde-paginator', PaginatorComponent); diff --git a/packages/solid-crs-presentation/lib/features/collection/collection-root.component.ts b/packages/solid-crs-presentation/lib/features/collection/collection-root.component.ts index 625b2726..5f55cc05 100644 --- a/packages/solid-crs-presentation/lib/features/collection/collection-root.component.ts +++ b/packages/solid-crs-presentation/lib/features/collection/collection-root.component.ts @@ -1,4 +1,4 @@ -import { html, property, PropertyValues, internalProperty, unsafeCSS, css, TemplateResult, CSSResult } from 'lit-element'; +import { html, property, PropertyValues, internalProperty, unsafeCSS, css, TemplateResult, CSSResult, query } from 'lit-element'; import { ArgumentError, Collection, CollectionObject, Logger, Translator } from '@netwerk-digitaal-erfgoed/solid-crs-core'; import { Alert } from '@netwerk-digitaal-erfgoed/solid-crs-components'; import { map } from 'rxjs/operators'; @@ -58,6 +58,24 @@ export class CollectionRootComponent extends RxLitElement { @internalProperty() objects?: CollectionObject[]; + /** + * Indicates if one the form fields has changed. + */ + @internalProperty() + objectsPerPage = 18; + + /** + * Indicates if one the form fields has changed. + */ + @internalProperty() + pageIndex = 0; + + /** + * The element containing the grid of collection objects. + */ + @query('.content') + pageContent: HTMLElement; + /** * Hook called on at every update after connection to the DOM. */ @@ -143,9 +161,31 @@ export class CollectionRootComponent extends RxLitElement { : html` ${this.objects?.length ? html` + + + +
- ${this.objects.map((object) => html``)} + ${this.objects.slice(this.pageIndex * this.objectsPerPage, this.pageIndex * this.objectsPerPage + this.objectsPerPage) + .map((object) => html``)}
+ + + ` : html`
@@ -191,6 +231,7 @@ export class CollectionRootComponent extends RxLitElement { overflow-y: auto; display: flex; flex-direction: column; + gap: var(--gap-large); } nde-progress-bar { position: absolute; diff --git a/packages/solid-crs-presentation/lib/public/nl-NL.json b/packages/solid-crs-presentation/lib/public/nl-NL.json index 3005f35e..d5d7b550 100644 --- a/packages/solid-crs-presentation/lib/public/nl-NL.json +++ b/packages/solid-crs-presentation/lib/public/nl-NL.json @@ -182,7 +182,10 @@ "KGM": "kg", "GRM": "g" }, - "copied-image-url": "De URL van de afbeelding werd gekopieerd." + "copied-image-url": "De URL van de afbeelding werd gekopieerd.", + "paginator": { + "page-counter": "Pagina {CURRENT} van {TOTAL}" + } }, "search": { "root": { diff --git a/packages/solid-crs-presentation/package.json b/packages/solid-crs-presentation/package.json index 28998e3c..91ffffce 100644 --- a/packages/solid-crs-presentation/package.json +++ b/packages/solid-crs-presentation/package.json @@ -87,10 +87,10 @@ ], "coverageThreshold": { "global": { - "statements": 85.95, + "statements": 84.72, "branches": 83.59, - "lines": 86.98, - "functions": 72.14 + "lines": 86.32, + "functions": 70.87 } }, "automock": false,