List things of a specific type, with a custom display

core/src/Store.spec.ts

@@ -1,5 +1,5 @@
 import { when } from "jest-when";
-import { sym } from "rdflib";
+import { quad, sym } from "rdflib";
 import { Parser as SparqlParser, Update } from "sparqljs";
 import { AuthenticatedFetch, PodOsSession } from "./authentication";
 import { Store } from "./Store";
@@ -450,6 +450,32 @@ describe("Store", () => {
       );
     });
   });
+
+  describe("findMembers", () => {
+    it("finds instances of classes and subclasses", () => {
+      const store = new Store({} as PodOsSession);
+      store.graph.addAll([
+        quad(
+          sym("http://recipe.test/1"),
+          sym("http://www.w3.org/1999/02/22-rdf-syntax-ns#type"),
+          sym("http://schema.org/Recipe"),
+        ),
+        quad(
+          sym("http://recipe.test/RecipeClass"),
+          sym("http://www.w3.org/2000/01/rdf-schema#subClassOf"),
+          sym("http://schema.org/Recipe"),
+        ),
+        quad(
+          sym("http://recipe.test/2"),
+          sym("http://www.w3.org/1999/02/22-rdf-syntax-ns#type"),
+          sym("http://recipe.test/RecipeClass"),
+        ),
+      ]);
+      const members = store.findMembers("http://schema.org/Recipe");
+      expect(members).toContain("http://recipe.test/1");
+      expect(members).toContain("http://recipe.test/2");
+    });
+  });
 });
 
 export function thenSparqlUpdateIsSentToUrl(

core/src/Store.ts

@@ -133,4 +133,12 @@ export class Store {
   async executeUpdate(operation: UpdateOperation) {
     await executeUpdate(this.fetcher, this.updater, operation);
   }
+
+  /**
+   * Finds instances of the given class or its sub-classes
+   * @param classUri
+   */
+  findMembers(classUri: string): string[] {
+    return Object.keys(this.graph.findMemberURIs(sym(classUri)));
+  }
 }

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

@@ -1,5 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { PosList } from './pos-list';
+import { when } from 'jest-when';
 
 describe('pos-list', () => {
   it('contains only template initially', async () => {
@@ -70,6 +71,29 @@ describe('pos-list', () => {
     expect(el.querySelectorAll('pos-resource')).toHaveLength(2);
   });
 
+  it('renders if-typeof objects', async () => {
+    const page = await newSpecPage({
+      components: [PosList],
+      html: `
+      <pos-list if-typeof="http://schema.org/Recipe">
+        <template>
+          Test
+        </template>
+      </pos-list>`,
+    });
+    const os = {
+      store: {
+        findMembers: jest.fn(),
+      },
+    };
+    when(os.store.findMembers).calledWith('http://schema.org/Recipe').mockReturnValue(['https://recipe.test/1']);
+    await page.rootInstance.receivePodOs(os);
+    await page.waitForChanges();
+
+    const el: HTMLElement = page.root as unknown as HTMLElement;
+    expect(el.querySelector('pos-resource')?.getAttribute('about')).toEqual('https://recipe.test/1');
+  });
+
   it('displays error on missing template', async () => {
     const page = await newSpecPage({
       components: [PosList],

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

@@ -1,32 +1,41 @@
-import { Thing } from '@pod-os/core';
+import { PodOS, Thing } from '@pod-os/core';
 import { Component, Element, Event, h, Prop, State } from '@stencil/core';
 import { ResourceAware, ResourceEventEmitter, subscribeResource } from '../events/ResourceAware';
+import { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';
 
 @Component({
   tag: 'pos-list',
   shadow: false,
 })
-export class PosList implements ResourceAware {
+export class PosList implements PodOsAware, ResourceAware {
   /**
    * URI of the predicate to follow
    */
   @Prop() rel: string;
+  /**
+   * URI of a class for which instances will be listed
+   */
+  @Prop() ifTypeof: string;
   /**
    * Whether listed resources should be fetched before being displayed
    */
   @Prop() fetch: boolean = false;
 
   @Element() host: HTMLElement;
   @State() error: string = null;
+  @State() os: PodOS;
   @State() resource: Thing;
   @State() items: string[] = [];
   @State() templateString: string;
 
   @Event({ eventName: 'pod-os:resource' })
   subscribeResource: ResourceEventEmitter;
+  @Event({ eventName: 'pod-os:init' })
+  subscribePodOs: PodOsEventEmitter;
 
   componentWillLoad() {
-    subscribeResource(this);
+    if (this.rel) subscribeResource(this);
+    if (this.ifTypeof) subscribePodOs(this);
     const templateElement = this.host.querySelector('template');
     if (templateElement == null) {
       this.error = 'No template element found';
@@ -36,10 +45,14 @@ export class PosList implements ResourceAware {
   }
 
   receiveResource = (resource: Thing) => {
-    this.items = [];
     if (this.rel) this.items = resource.relations(this.rel).flatMap(relation => relation.uris);
   };
 
+  receivePodOs = async (os: PodOS) => {
+    this.os = os;
+    this.items = os.store.findMembers(this.ifTypeof);
+  };
+
   render() {
     if (this.error) return this.error;
     const elems = this.items.map(it => (