feat(pos-relations): allow adding a new relation via pos-add-relation

Author: angelo-v

docs/elements/apps/pos-app-generic/readme.md

@@ -34,9 +34,11 @@ graph TD;
   pos-add-literal-value --> pos-select-term
   pos-relations --> pos-predicate
   pos-relations --> pos-rich-link
+  pos-relations --> pos-add-relation
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
   pos-rich-link --> pos-resource
+  pos-add-relation --> pos-select-term
   pos-reverse-relations --> pos-predicate
   pos-reverse-relations --> pos-rich-link
   style pos-app-generic fill:#f9f,stroke:#333,stroke-width:4px

docs/elements/components/pos-relations/readme.md

@@ -22,15 +22,18 @@
 
 - [pos-predicate](../pos-predicate)
 - [pos-rich-link](../pos-rich-link)
+- [pos-add-relation](../pos-add-relation)
 
 ### Graph
 ```mermaid
 graph TD;
   pos-relations --> pos-predicate
   pos-relations --> pos-rich-link
+  pos-relations --> pos-add-relation
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description
   pos-rich-link --> pos-resource
+  pos-add-relation --> pos-select-term
   pos-app-generic --> pos-relations
   style pos-relations fill:#f9f,stroke:#333,stroke-width:4px
 ```

docs/elements/components/pos-select-term/readme.md

@@ -34,12 +34,14 @@
 ### Used by
 
  - [pos-add-literal-value](../pos-add-literal-value)
+ - [pos-add-relation](../pos-add-relation)
  - [pos-new-thing-form](../pos-new-thing-form)
 
 ### Graph
 ```mermaid
 graph TD;
   pos-add-literal-value --> pos-select-term
+  pos-add-relation --> pos-select-term
   pos-new-thing-form --> pos-select-term
   style pos-select-term fill:#f9f,stroke:#333,stroke-width:4px
 ```

elements/CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `@pod-os/elements` now includes a [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest) at `dist/custom-elements.json` that can be used in IDEs to
   enable auto-completion for web components.
 - [pos-add-relation](https://pod-os.org/reference/elements/components/pos-add-relation/): New component to add a relation (link) to a thing
+- [pos-relations](https://pod-os.org/reference/elements/components/pos-relations/): Allows to add a new relation, if resource is editable
 
 ### Fixed
 

elements/src/components.d.ts

@@ -5,10 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Attachment, HttpProblem, LdpContainer, NetworkProblem, PodOS, Problem, SolidFile, Thing } from "@pod-os/core";
+import { Attachment, HttpProblem, LdpContainer, Literal, NetworkProblem, PodOS, Problem, Relation, SolidFile, Thing } from "@pod-os/core";
 import { ToolConfig } from "./components/pos-type-router/selectToolsForTypes";
 import { ResultAsync } from "neverthrow";
-export { Attachment, HttpProblem, LdpContainer, NetworkProblem, PodOS, Problem, SolidFile, Thing } from "@pod-os/core";
+export { Attachment, HttpProblem, LdpContainer, Literal, NetworkProblem, PodOS, Problem, Relation, SolidFile, Thing } from "@pod-os/core";
 export { ToolConfig } from "./components/pos-type-router/selectToolsForTypes";
 export { ResultAsync } from "neverthrow";
 export namespace Components {
@@ -373,6 +373,10 @@ export interface PosAddLiteralValueCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosAddLiteralValueElement;
 }
+export interface PosAddRelationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPosAddRelationElement;
+}
 export interface PosAppCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosAppElement;
@@ -517,7 +521,7 @@ declare global {
     interface HTMLPosAddLiteralValueElementEventMap {
         "pod-os:init": any;
         "pod-os:resource": any;
-        "pod-os:added-literal-value": any;
+        "pod-os:added-literal-value": Literal;
         "pod-os:error": any;
     }
     interface HTMLPosAddLiteralValueElement extends Components.PosAddLiteralValue, HTMLStencilElement {
@@ -540,10 +544,22 @@ declare global {
         prototype: HTMLPosAddNewThingElement;
         new (): HTMLPosAddNewThingElement;
     };
+    interface HTMLPosAddRelationElementEventMap {
+        "pod-os:added-relation": Relation;
+        "pod-os:error": any;
+    }
     /**
      * Add a new relation from the current resource to another one
      */
     interface HTMLPosAddRelationElement extends Components.PosAddRelation, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPosAddRelationElementEventMap>(type: K, listener: (this: HTMLPosAddRelationElement, ev: PosAddRelationCustomEvent<HTMLPosAddRelationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPosAddRelationElementEventMap>(type: K, listener: (this: HTMLPosAddRelationElement, ev: PosAddRelationCustomEvent<HTMLPosAddRelationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLPosAddRelationElement: {
         prototype: HTMLPosAddRelationElement;
@@ -1407,7 +1423,7 @@ declare namespace LocalJSX {
         /**
           * The entered literal value has been added to the resource and successfully stored to the Pod.
          */
-        "onPod-os:added-literal-value"?: (event: PosAddLiteralValueCustomEvent<any>) => void;
+        "onPod-os:added-literal-value"?: (event: PosAddLiteralValueCustomEvent<Literal>) => void;
         /**
           * Something went wrong while adding the literal value.
          */
@@ -1422,6 +1438,14 @@ declare namespace LocalJSX {
      * Add a new relation from the current resource to another one
      */
     interface PosAddRelation {
+        /**
+          * The relation has been added to the resource and successfully stored to the Pod.
+         */
+        "onPod-os:added-relation"?: (event: PosAddRelationCustomEvent<Relation>) => void;
+        /**
+          * Something went wrong while adding the relation.
+         */
+        "onPod-os:error"?: (event: PosAddRelationCustomEvent<any>) => void;
     }
     interface PosApp {
         /**

elements/src/components/pos-relations/pos-relations.spec.tsx

@@ -1,8 +1,9 @@
 import { newSpecPage } from '@stencil/core/testing';
 
-import { getByText } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/dom';
 
 import { PosRelations } from './pos-relations';
+import { Relation } from '@pod-os/core';
 
 describe('pos-relations', () => {
   it('are empty initially', async () => {
@@ -12,7 +13,9 @@ describe('pos-relations', () => {
     });
     expect(page.root).toEqualHtml(`
       <pos-relations>
-        <mock:shadow-root></mock:shadow-root>
+        <mock:shadow-root>
+          <pos-add-relation></pos-add-relation>
+        </mock:shadow-root>
       </pos-relations>
   `);
   });
@@ -78,4 +81,82 @@ describe('pos-relations', () => {
     );
     expect(linkToAttachment).not.toBeNull();
   });
+
+  it('adds newly added relation to the list', async () => {
+    // given
+    const page = await newSpecPage({
+      components: [PosRelations],
+      html: `<pos-relations />`,
+      supportsShadowDom: false,
+    });
+    await page.rootInstance.receiveResource({
+      relations: () => [],
+    });
+    await page.waitForChanges();
+
+    // when
+    const input = page.root.querySelector('pos-add-relation');
+    const relation: Relation = {
+      predicate: 'http://xmlns.com/foaf/0.1/knows',
+      label: 'knows',
+      uris: ['https://alice.test/profile/card#me'],
+    };
+    fireEvent(
+      input,
+      new CustomEvent('pod-os:added-relation', {
+        detail: relation,
+      }),
+    );
+
+    await page.waitForChanges();
+
+    const url = page.root.querySelector('pos-predicate[uri="http://xmlns.com/foaf/0.1/knows"]');
+    expect(url).toEqualAttribute('label', 'knows');
+    const linkToAlice = page.root.querySelector('pos-rich-link[uri="https://alice.test/profile/card#me"]');
+    expect(linkToAlice).not.toBeNull();
+  });
+
+  it('adds newly added relation to the existing list without duplicating the predicate', async () => {
+    // given
+    const page = await newSpecPage({
+      components: [PosRelations],
+      html: `<pos-relations />`,
+      supportsShadowDom: false,
+    });
+    await page.rootInstance.receiveResource({
+      relations: () => [
+        {
+          predicate: 'http://xmlns.com/foaf/0.1/knows',
+          label: 'knows',
+          uris: ['https://alice.test/profile/card#me'],
+        },
+      ],
+    });
+    await page.waitForChanges();
+
+    // when
+    const input = page.root.querySelector('pos-add-relation');
+    const relation: Relation = {
+      predicate: 'http://xmlns.com/foaf/0.1/knows',
+      label: 'knows',
+      uris: ['https://bernadette.test/profile/card#me'],
+    };
+    fireEvent(
+      input,
+      new CustomEvent('pod-os:added-relation', {
+        detail: relation,
+      }),
+    );
+
+    await page.waitForChanges();
+
+    // then
+    const knows = page.root.querySelectorAll('pos-predicate[uri="http://xmlns.com/foaf/0.1/knows"]');
+    expect(knows).toHaveLength(1);
+    expect(knows[0]).toEqualAttribute('label', 'knows');
+    const linkToAlice = page.root.querySelector('pos-rich-link[uri="https://alice.test/profile/card#me"]');
+    expect(linkToAlice).not.toBeNull();
+    const linkToBernadette = page.root.querySelector('pos-rich-link[uri="https://bernadette.test/profile/card#me"]');
+    expect(linkToBernadette).not.toBeNull();
+  });
 });

elements/src/components/pos-relations/pos-relations.tsx

@@ -1,5 +1,5 @@
 import { Relation, Thing } from '@pod-os/core';
-import { Component, Event, EventEmitter, h, State } from '@stencil/core';
+import { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';
 import { ResourceAware, subscribeResource } from '../events/ResourceAware';
 
 @Component({
@@ -21,6 +21,24 @@ export class PosRelations implements ResourceAware {
     this.data = resource.relations();
   };
 
+  relationAdded(newRelation: Relation) {
+    const existing = this.data.find(it => it.predicate === newRelation.predicate);
+
+    if (!existing) {
+      this.data = [...this.data, newRelation];
+    } else {
+      this.data = this.data.map(it => {
+        return it.predicate === existing.predicate
+          ? {
+              predicate: existing.predicate,
+              label: existing.label,
+              uris: [...existing.uris, ...newRelation.uris],
+            }
+          : it;
+      });
+    }
+  }
+
   render() {
     const items = this.data.map(it => (
       <div class="predicate-values">
@@ -36,6 +54,11 @@ export class PosRelations implements ResourceAware {
         </div>
       </div>
     ));
-    return this.data.length > 0 ? <dl>{items}</dl> : null;
+    return (
+      <Host>
+        {this.data.length > 0 ? <dl>{items}</dl> : null}
+        <pos-add-relation onPod-os:added-relation={ev => this.relationAdded(ev.detail)}></pos-add-relation>
+      </Host>
+    );
   }
 }