feat: update presentation object page (#418)

* feat: first implementation of new object overview page WIP

* feat: created PopupComponent WIP

* fix: updated styling for image popup WIP

* test: updated tests

* feat: added menu items to object root page

* test: updated tests

packages/solid-crs-components/lib/alerts/popup.component.spec.ts

@@ -0,0 +1,86 @@
+import { PopupComponent } from './popup.component';
+
+describe('PopupComponent', () => {
+
+  let component: PopupComponent;
+
+  beforeEach(() => {
+
+    component = window.document.createElement('nde-popup') as PopupComponent;
+
+  });
+
+  afterEach(() => {
+
+    document.getElementsByTagName('html')[0].innerHTML = '';
+
+  });
+
+  it('should be correctly instantiated', () => {
+
+    expect(component).toBeTruthy();
+
+  });
+
+  it('should add correct class when this.dark is set', async () => {
+
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const div = window.document.body.getElementsByTagName('nde-popup')[0].shadowRoot.querySelector<HTMLDivElement>('div.overlay');
+    expect(div.className).not.toMatch('dark');
+
+    component.dark = true;
+    await component.updateComplete;
+    expect(div.className).toMatch('dark');
+
+  });
+
+  it('should hide the component when the background is clicked', async () => {
+
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+    component.show();
+    expect(component.hidden).toBeFalsy();
+
+    const div = window.document.body.getElementsByTagName('nde-popup')[0].shadowRoot.querySelector<HTMLDivElement>('div.overlay');
+    div.click();
+
+    await component.updateComplete;
+    expect(component.hidden).toBeTruthy();
+
+  });
+
+  it('should not hide the component when the content is clicked', async () => {
+
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+    component.show();
+    expect(component.hidden).toBeFalsy();
+
+    const content = window.document.body.getElementsByTagName('nde-popup')[0].shadowRoot.querySelector<HTMLSlotElement>('slot');
+    content.click();
+
+    await component.updateComplete;
+    expect(component.hidden).toBeFalsy();
+
+  });
+
+  describe('toggle', () => {
+
+    it('should toggle this.hidden', async () => {
+
+      window.document.body.appendChild(component);
+      await component.updateComplete;
+
+      expect(component.hidden).toEqual(true);
+      component.toggle();
+      expect(component.hidden).toEqual(false);
+      component.toggle();
+      expect(component.hidden).toEqual(true);
+
+    });
+
+  });
+
+});

packages/solid-crs-components/lib/alerts/popup.component.ts

@@ -0,0 +1,102 @@
+
+import { css, CSSResult, html, property, query, TemplateResult, unsafeCSS } from 'lit-element';
+import { Theme } from '@netwerk-digitaal-erfgoed/solid-crs-theme';
+import { RxLitElement } from 'rx-lit';
+
+/**
+ * A component that displays any content over the whole webpage
+ * Hide by toggling this.hidden
+ */
+export class PopupComponent extends RxLitElement {
+
+  /**
+   * The content element of this component
+   */
+  @query('slot[name="content"]')
+  content: HTMLSlotElement;
+
+  /**
+   * Decides whether the component has a dark background
+   */
+  @property({ type: Boolean })
+  public dark = false;
+
+  /**
+   * Hides/shows the component
+   */
+  toggle(): void {
+
+    this.hidden ? this.show() : this.hide();
+
+  }
+
+  /**
+   * Shows the component
+   */
+  show(): void {
+
+    this.hidden = false;
+
+  }
+
+  /**
+   * Hides the component
+   */
+  hide(): void {
+
+    this.hidden = true;
+
+  }
+
+  /**
+   * Renders the component as HTML.
+   *
+   * @returns The rendered HTML of the component.
+   */
+  render(): TemplateResult {
+
+    // initially, always hide the component
+    this.hide();
+
+    return html`
+    <div class="overlay${ this.dark ? ' dark' : ''}" @click="${ () => this.hide() }">
+      <slot name="content" @click="${ (event: MouseEvent) => event.stopPropagation() }"></slot>
+    </div>
+  `;
+
+  }
+
+  /**
+   * The styles associated with the component.
+   */
+  static get styles(): CSSResult[] {
+
+    return [
+      unsafeCSS(Theme),
+      css`
+        :host {
+          height: 100%;
+          width: 100%;
+          top: 0;
+          left: 0;
+          position: fixed;
+        }
+        .overlay {
+          height: 100%;
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+        .dark {
+          background-color: rgba(0, 0, 0, 0.8);
+        }
+      `,
+    ];
+
+  }
+
+}
+
+export default PopupComponent;

packages/solid-crs-components/lib/demo.ts

@@ -16,6 +16,7 @@ import { SidebarItemComponent } from './sidebar/sidebar-item.component';
 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';
 
 /**
  * Register tags for components.
@@ -38,3 +39,4 @@ customElements.define('nde-demo-content-header', DemoContentHeaderComponent);
 customElements.define('nde-demo-svg', DemoSVGComponent);
 customElements.define('nde-sidebar-item', SidebarItemComponent);
 customElements.define('nde-progress-bar', ProgressBarComponent);
+customElements.define('nde-popup', PopupComponent);

packages/solid-crs-components/lib/index.ts

@@ -4,6 +4,7 @@
 export * from './alerts/alert';
 export * from './alerts/alert.component';
 export * from './alerts/alert.component';
+export * from './alerts/popup.component';
 export * from './collections/card.component';
 export * from './collections/large-card.component';
 export * from './collections/object-card.component';

packages/solid-crs-components/package.json

@@ -74,10 +74,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 92.99,
-        "functions": 98.85,
+        "branches": 93.17,
+        "functions": 98.95,
         "lines": 100,
-        "statements": 99.66
+        "statements": 99.68
       }
     },
     "coveragePathIgnorePatterns": [
@@ -97,4 +97,4 @@
       }
     }
   }
-}
+}

packages/solid-crs-components/tests/setup.ts

@@ -11,6 +11,7 @@ import { SidebarComponent } from '../lib/sidebar/sidebar.component';
 import { SidebarItemComponent } from '../lib/sidebar/sidebar-item.component';
 import { LargeCardComponent } from '../lib/collections/large-card.component';
 import { ProgressBarComponent } from '../lib/loading/progress-bar-component';
+import { PopupComponent } from '../lib/alerts/popup.component';
 
 /**
  * Register tags for components.
@@ -28,3 +29,4 @@ customElements.define('nde-collection-card', CollectionCardComponent);
 customElements.define('nde-card', CardComponent);
 customElements.define('nde-large-card', LargeCardComponent);
 customElements.define('nde-progress-bar', ProgressBarComponent);
+customElements.define('nde-popup', PopupComponent);

packages/solid-crs-presentation/lib/app.machine.ts

@@ -137,7 +137,9 @@ export const appMachine = (
     },
     [AppEvents.NAVIGATE]: {
       target: `#${AppRouterStates.NAVIGATING}`,
-      actions: assign({ path: (context, event) => event.path||window.location.pathname }),
+      actions: assign({
+        path: (context, event) => event.path||window.location.pathname,
+      }),
     },
     [AppEvents.CLICKED_HOME]: {
       actions: assign({ selected: (context) => undefined }),

packages/solid-crs-presentation/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, PopupComponent } 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';
@@ -40,3 +40,4 @@ customElements.define('nde-sidebar-list-item', SidebarListItemComponent);
 customElements.define('nde-sidebar-list', SidebarListComponent);
 customElements.define('nde-sidebar-item', SidebarItemComponent);
 customElements.define('nde-progress-bar', ProgressBarComponent);
+customElements.define('nde-popup', PopupComponent);

packages/solid-crs-presentation/lib/features/about/about-root.component.spec.ts

@@ -1,12 +1,13 @@
-import { Alert } from '@netwerk-digitaal-erfgoed/solid-crs-components';
+import { Alert, LargeCardComponent } from '@netwerk-digitaal-erfgoed/solid-crs-components';
 import { ArgumentError, Collection, CollectionMemoryStore, CollectionObject, CollectionObjectMemoryStore, ConsoleLogger, LoggerLevel, MemoryTranslator } from '@netwerk-digitaal-erfgoed/solid-crs-core';
 import { interpret, Interpreter } from 'xstate';
 import { AppEvents, DismissAlertEvent } from '../../app.events';
 import { AppContext, appMachine } from '../../app.machine';
 import { SolidMockService } from '../../common/solid/solid-mock.service';
+import { CollectionEvents } from '../collection/collection.events';
 import { AboutRootComponent } from './about-root.component';
 
-describe('SearchRootComponent', () => {
+describe('AboutRootComponent', () => {
 
   let component: AboutRootComponent;
   let machine: Interpreter<AppContext>;
@@ -51,6 +52,7 @@ describe('SearchRootComponent', () => {
 
     component = window.document.createElement('nde-about-root') as AboutRootComponent;
     component.actor = machine;
+    component.collections = [ collection1, collection2 ];
     component.translator = new MemoryTranslator([], 'nl-NL');
 
   });
@@ -147,4 +149,26 @@ describe('SearchRootComponent', () => {
 
   });
 
+  it('should send SelectedCollectionEvent when collection is clicked', async (done) => {
+
+    machine.onEvent((event) => {
+
+      if (event.type === CollectionEvents.SELECTED_COLLECTION) {
+
+        done();
+
+      }
+
+    });
+
+    machine.start();
+
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    const largeCard = window.document.body.getElementsByTagName('nde-about-root')[0].shadowRoot.querySelector<LargeCardComponent>('nde-large-card.collection');
+    largeCard.click();
+
+  });
+
 });

packages/solid-crs-presentation/lib/features/about/about-root.component.ts

@@ -123,13 +123,13 @@ export class AboutRootComponent extends RxLitElement {
       </nde-content-header>
 
       <div class="content">
+            
+        ${ alerts }
 
         <nde-large-card
         .showImage="${false}"
         .showHeader="${false}">
           <div slot="content">
-            
-            ${ alerts }
 
             <p>${ this.profile?.name }</p>
             ${ this.profile?.description ? html`<p>${ this.profile?.description }</p>` : ''}
@@ -182,6 +182,9 @@ export class AboutRootComponent extends RxLitElement {
           flex-direction: column;
           height: 100%;
         }
+        nde-alert {
+          margin-bottom: var(--gap-large);
+        }
         .content {
           margin: 0 var(--gap-large);
           margin-top: 41px;

packages/solid-crs-presentation/lib/features/collection/collection-root.component.ts

@@ -184,11 +184,16 @@ export class CollectionRootComponent extends RxLitElement {
           flex-direction: column;
           height: 100%;
         }
+        nde-alert {
+          margin-bottom: var(--gap-large);
+        }
         .content {
           margin-top: 1px;
           padding: var(--gap-large);
           height: 100%;
           overflow-y: auto;
+          display: flex;
+          flex-direction: column;
         }
         nde-progress-bar {
           position: absolute;