chore: various minor improvements

packages/nde-erfgoed-components/lib/collections/nde-card.component.ts → packages/nde-erfgoed-components/lib/collections/card.component.ts

@@ -1,7 +1,10 @@
 import { css, html, property, LitElement, unsafeCSS } from 'lit-element';
 import { Theme } from '@digita-ai/nde-erfgoed-theme';
 
-export class NDECard extends LitElement {
+/**
+ * A cad component
+ */
+export class CardComponent extends LitElement {
 
   @property({})
   public image: string = undefined;
@@ -11,11 +14,11 @@ export class NDECard extends LitElement {
     return [
       unsafeCSS(Theme),
       css`
-        .nde-card:hover {
+        .card:hover {
           cursor: pointer;
           transform: scale(1.1);
         }
-        .nde-card {
+        .card {
           height: 100%;
           width: 100%;
           display: flex;
@@ -55,7 +58,7 @@ export class NDECard extends LitElement {
   render() {
 
     return html`
-      <div class='nde-card'>
+      <div class='card'>
         <img src='${this.image && this.image !== 'undefined' ? this.image : 'data:image/png;base64,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'}' alt='card image'/>
         <div class='information-pane'>
 
@@ -74,4 +77,4 @@ export class NDECard extends LitElement {
 
 }
 
-export default NDECard;
+export default CardComponent;

packages/nde-erfgoed-components/lib/collections/collection-card.component.ts

@@ -1,5 +1,5 @@
 import { css, html, property, LitElement, unsafeCSS } from 'lit-element';
-import { Collection, getFormattedTimeAgo, Translator } from '@digita-ai/nde-erfgoed-core';
+import { Collection, Translator } from '@digita-ai/nde-erfgoed-core';
 import { Theme } from '@digita-ai/nde-erfgoed-theme';
 
 /**

packages/nde-erfgoed-components/lib/collections/collection-object-card.component.spec.ts → packages/nde-erfgoed-components/lib/collections/object-card.component.spec.ts

@@ -1,10 +1,10 @@
 import { CollectionObject, MemoryTranslator } from '@digita-ai/nde-erfgoed-core';
-import { CollectionObjectCardComponent } from './collection-object-card.component';
+import { ObjectCardComponent } from './object-card.component';
 
-describe('CollectionObjectCardComponent', () => {
+describe('ObjectCardComponent', () => {
 
-  let component: CollectionObjectCardComponent;
-  const tag = 'nde-collection-object-card';
+  let component: ObjectCardComponent;
+  const tag = 'nde-object-card';
 
   const testObject = {
     uri: 'test uri',
@@ -17,7 +17,7 @@ describe('CollectionObjectCardComponent', () => {
 
   beforeEach(() => {
 
-    component = window.document.createElement('nde-collection-object-card') as CollectionObjectCardComponent;
+    component = window.document.createElement('nde-object-card') as ObjectCardComponent;
 
     component.translator = new MemoryTranslator([
       {

packages/nde-erfgoed-components/lib/collections/collection-object-card.component.ts → packages/nde-erfgoed-components/lib/collections/object-card.component.ts

@@ -5,7 +5,7 @@ import { Theme } from '@digita-ai/nde-erfgoed-theme';
 /**
  * A component which shows the details of a single collection object.
  */
-export class CollectionObjectCardComponent extends LitElement {
+export class ObjectCardComponent extends LitElement {
 
   /** The object which will be rendered by the component */
   @property({ type: Object })
@@ -58,4 +58,4 @@ export class CollectionObjectCardComponent extends LitElement {
 
 }
 
-export default CollectionObjectCardComponent;
+export default ObjectCardComponent;

packages/nde-erfgoed-components/lib/demo.ts

@@ -4,23 +4,23 @@ import { CollectionComponent } from './collections/collection.component';
 import { CollectionsComponent } from './collections/collections.component';
 import { AlertComponent } from './alerts/alert.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
-import { CollectionObjectCardComponent } from './collections/collection-object-card.component';
+import { ObjectCardComponent } from './collections/object-card.component';
 import { SidebarListItemComponent } from './sidebar/sidebar-list-item.component';
 import { SidebarListComponent } from './sidebar/sidebar-list.component';
 import { DemoSidebarListComponent } from './demo/demo-sidebar-list.component';
 import { ContentHeaderComponent } from './header/content-header.component';
 import { DemoContentHeaderComponent } from './demo/demo-content-header.component';
-import { DemoNDECardComponent } from './demo/demo-nde-card.component';
-import { NDECard } from './collections/nde-card.component';
+import { DemoNDECardComponent } from './demo/demo-card.component';
+import { CardComponent } from './collections/card.component';
 import { CollectionCardComponent } from './collections/collection-card.component';
 
 /**
  * Register tags for components.
  */
-customElements.define('nde-card', NDECard);
+customElements.define('nde-card', CardComponent);
 customElements.define('nde-collection', CollectionComponent);
 customElements.define('nde-collections', CollectionsComponent);
-customElements.define('nde-collection-object-card', CollectionObjectCardComponent);
+customElements.define('nde-object-card', ObjectCardComponent);
 customElements.define('nde-collection-card', CollectionCardComponent);
 customElements.define('nde-demo-nde-card', DemoNDECardComponent);
 customElements.define('nde-form-element', FormElementComponent);

packages/nde-erfgoed-components/lib/demo/demo-nde-card.component.ts → packages/nde-erfgoed-components/lib/demo/demo-card.component.ts

@@ -97,18 +97,18 @@ export class DemoNDECardComponent extends LitElement {
     return html`
       <p>Collection Objects</p>
       <div class='grid'>
-        <nde-collection-object-card .translator=${translator} .object=${obj1}
-        ></nde-collection-object-card>
-        <nde-collection-object-card .translator=${translator} .object=${obj2}
-        ></nde-collection-object-card>
-        <nde-collection-object-card .translator=${translator} .object=${obj3}
-        ></nde-collection-object-card>
-        <nde-collection-object-card .translator=${translator} .object=${obj4}
-        ></nde-collection-object-card>
-        <nde-collection-object-card .translator=${translator} .object=${obj1}
-        ></nde-collection-object-card>
-        <nde-collection-object-card .translator=${translator} .object=${obj5}
-        ></nde-collection-object-card>
+        <nde-object-card .translator=${translator} .object=${obj1}
+        ></nde-object-card>
+        <nde-object-card .translator=${translator} .object=${obj2}
+        ></nde-object-card>
+        <nde-object-card .translator=${translator} .object=${obj3}
+        ></nde-object-card>
+        <nde-object-card .translator=${translator} .object=${obj4}
+        ></nde-object-card>
+        <nde-object-card .translator=${translator} .object=${obj1}
+        ></nde-object-card>
+        <nde-object-card .translator=${translator} .object=${obj5}
+        ></nde-object-card>
       </div>
 
       <p>Collections</p>
@@ -134,7 +134,7 @@ export class DemoNDECardComponent extends LitElement {
         grid-template-columns: repeat(3, 1fr);
         grid-gap: var(--gap-normal);
       }
-      nde-collection-object-card, nde-collection-card {
+      nde-object-card, nde-collection-card {
         height: 227px;
       }
     ` ];

packages/nde-erfgoed-components/lib/index.ts

@@ -4,10 +4,10 @@
 export * from './alerts/alert';
 export * from './alerts/alert.component';
 export * from './alerts/alert.component';
-export * from './collections/nde-card.component';
+export * from './collections/card.component';
 export * from './collections/collection.component';
 export * from './collections/collections.component';
-export * from './collections/collection-object-card.component';
+export * from './collections/object-card.component';
 export * from './collections/collection-card.component';
 export * from './forms/form-element.component';
 export * from './forms/form-submitter';

packages/nde-erfgoed-components/tests/setup.ts

@@ -6,9 +6,9 @@ import { SidebarListItemComponent } from '../lib/sidebar/sidebar-list-item.compo
 import { SidebarListComponent } from '../lib/sidebar/sidebar-list.component';
 import { DemoSidebarListComponent } from '../lib/demo/demo-sidebar-list.component';
 import { ContentHeaderComponent } from '../lib/header/content-header.component';
-import { NDECard } from '../lib/collections/nde-card.component';
+import { CardComponent } from '../lib/collections/card.component';
 import { CollectionCardComponent } from '../lib/collections/collection-card.component';
-import { CollectionObjectCardComponent } from '../lib/collections/collection-object-card.component';
+import { ObjectCardComponent } from '../lib/collections/object-card.component';
 import { SidebarComponent } from '../lib/sidebar/sidebar.component';
 
 /**
@@ -23,6 +23,6 @@ customElements.define('nde-sidebar-list', SidebarListComponent);
 customElements.define('nde-sidebar', SidebarComponent);
 customElements.define('nde-demo-sidebar-list', DemoSidebarListComponent);
 customElements.define('nde-content-header', ContentHeaderComponent);
-customElements.define('nde-collection-object-card', CollectionObjectCardComponent);
+customElements.define('nde-object-card', ObjectCardComponent);
 customElements.define('nde-collection-card', CollectionCardComponent);
-customElements.define('nde-card', NDECard);
+customElements.define('nde-card', CardComponent);

packages/nde-erfgoed-core/lib/utils/date-parser.spec.ts

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { ArgumentError } from '../errors/argument-error';
 import { getFormattedTimeAgo } from './date-parser';
 
 describe('getFormattedTimeAgo()', () => {
@@ -14,6 +15,12 @@ describe('getFormattedTimeAgo()', () => {
 
   });
 
+  it('should throw error when no translator is given', () => {
+
+    expect(() => getFormattedTimeAgo(+moment(new Date()), null)).toThrow(ArgumentError);
+
+  });
+
   it('x minutes ago', () => {
 
     const minutes = 5;

packages/nde-erfgoed-core/lib/utils/date-parser.ts

@@ -1,14 +1,33 @@
 import moment from 'moment';
+import { ArgumentError } from '../errors/argument-error';
 import { Translator } from '../i8n/translator';
 
+/**
+ * Formats a label which describes the time between the given timestamp and now.
+ *
+ * @param timestamp The unix time stamp to format.
+ * @param translator A translator, which is used to translate the formatted time ago label.
+ * @returns A formatted label of the time ago.
+ */
 export const getFormattedTimeAgo = (timestamp: number, translator: Translator): string => {
 
+  if (!translator) {
+
+    throw new ArgumentError('Argument translator should be set.', translator);
+
+  }
+
+  // Gets the current date and time.
   const now = moment(new Date());
-  const duration = moment.duration(now.diff(timestamp));
-  const minutes = Math.round(duration.asMinutes());
+
+  // Difference between now and the given timestamp.
+  const difference = moment.duration(now.diff(timestamp));
+  const minutes = Math.round(difference.asMinutes());
 
   if (minutes < 60) {
 
+    // Less than an hour ago.
+
     if (minutes < 2) {
 
       return translator.translate('nde.common.date.just-now');
@@ -21,37 +40,47 @@ export const getFormattedTimeAgo = (timestamp: number, translator: Translator):
 
   } else {
 
-    const hours = Math.round(duration.asHours());
+    // More than an hour ago.
+
+    const hours = Math.round(difference.asHours());
 
     if (hours < 24) {
 
+      // Less than a day ago.
+
       return `${hours} ${hours === 1
         ? translator.translate('nde.common.date.hour-ago')
         : translator.translate('nde.common.date.hours-ago')}`;
 
     } else {
 
-      const days = Math.round(duration.asDays());
+      const days = Math.round(difference.asDays());
 
       if (days < 31) {
 
+        // Less than a month ago.
+
         return `${days} ${days === 1
           ? translator.translate('nde.common.date.day-ago')
           : translator.translate('nde.common.date.days-ago')}`;
 
       } else {
 
-        const months = Math.round(duration.asMonths());
+        const months = Math.round(difference.asMonths());
 
         if (months < 12) {
 
+          // Less than a year ago.
+
           return `${months} ${months === 1
             ? translator.translate('nde.common.date.month-ago')
             : translator.translate('nde.common.date.months-ago')}`;
 
         } else {
 
-          const years = Math.round(duration.asYears());
+          // More than a year ago.
+
+          const years = Math.round(difference.asYears());
 
           return `${years} ${years === 1
             ? translator.translate('nde.common.date.year-ago')

packages/nde-erfgoed-core/package.json

@@ -56,10 +56,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "branches": 77.03,
+        "branches": 77.63,
         "functions": 70,
-        "lines": 76.8,
-        "statements": 76.56
+        "lines": 77.34,
+        "statements": 77.1
       }
     },
     "coveragePathIgnorePatterns": [

packages/nde-erfgoed-theme/lib/index.ts

@@ -8,6 +8,7 @@ export { default as Login } from './icons/Login.svg?raw';
 export { default as Logout } from './icons/Logout.svg?raw';
 export { default as NdeLogoInverse } from './icons/NdeLogoInverse.svg?raw';
 export { default as Loading } from './icons/Loading.svg?raw';
+export { default as Picture } from './icons/Picture.svg?raw';
 
 /**
  * Export theme

specifications/pages/technical/create-collection-overview-page.adoc

@@ -39,9 +39,9 @@ image::../../assets/collections/collection-root.svg[CollectionRootComponent]
 
 Create in '@digita-ai/nde-erfgoed-manage' package under 'lib/collections/pages/collection-root.component'. (might already exist)
 
-The component contains a `ContentHeaderComponent` at the top, followed by a https://css-tricks.com/snippets/css/complete-guide-grid/[grid] of `CollectionObjectCardComponents`. The header contains the title and description of the current component. These should be made so that, when the edit action icon is clicked, they can be edited with input fields. The value of these input fields can be saved by clicked the save action on the right, which replaces the edit icon. When editing (`CollectionsState.EDITING`), a new cancel icon is shown as well, to leave the editing state. The other two action icons in the header, create and delete, should fire the `CollectionsEvents.CLICKED_CREATE_OBJECT` and `CollectionsEvents.CLICKED_DELETE` events, respectively.
+The component contains a `ContentHeaderComponent` at the top, followed by a https://css-tricks.com/snippets/css/complete-guide-grid/[grid] of `ObjectCardComponents`. The header contains the title and description of the current component. These should be made so that, when the edit action icon is clicked, they can be edited with input fields. The value of these input fields can be saved by clicked the save action on the right, which replaces the edit icon. When editing (`CollectionsState.EDITING`), a new cancel icon is shown as well, to leave the editing state. The other two action icons in the header, create and delete, should fire the `CollectionsEvents.CLICKED_CREATE_OBJECT` and `CollectionsEvents.CLICKED_DELETE` events, respectively.
 
-Every `CollectionObject` in the current `Collection` should be displayed using a grid of `CollectionObjectCardComponents`. Clicking these should not do anything, yet. Try to adjust the grid dimensions based on window width. With default view widths, three cards should be displayed next to eachother.
+Every `CollectionObject` in the current `Collection` should be displayed using a grid of `ObjectCardComponents`. Clicking these should not do anything, yet. Try to adjust the grid dimensions based on window width. With default view widths, three cards should be displayed next to eachother.
 
 image::../../assets/collections/collection-root-no-objects.svg[CollectionRootComponent without CollectionObjects]