Allow storing multiple SHLs

Workaround popper.js import bug

Valid GH workflows

Author: jmandel

.github/workflows/deploy.yml

@@ -25,6 +25,9 @@ jobs:
     - name: Install dependencies
       run: npm ci
 
+    - name: Patch per https://github.com/trasherdk/sveltestrap/issues/5
+      run: ./fix-popper.sh
+
     - name: Build SvelteKit
       run: npm run build
 

fix-popper.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+sed -i '/2\.11\.6/a \ \ "type": "module",' node_modules/@popperjs/core/package.json

src/AddFile.svelte

@@ -12,6 +12,7 @@
   let submitting = false;
   let summaryUrl = EXAMPLE_IPS;
   let inputUrl: HTMLFormElement;
+  let label = "SHL from " + new Date().toISOString().slice(0, 10);
 
   onMount(() => {
     inputUrl.getElementsByTagName('input').item(0)?.select();
@@ -49,7 +50,8 @@
           verifiableCredential: [shc]
         },
         patient,
-        content
+        content,
+        label
       });
     } catch (e) {
       console.log('Failed', e);
@@ -85,6 +87,10 @@
     <Label>Bundle <code>.json</code>, or signed <code>.smart-health-card</code></Label>
     <Input width="100%" type="text" bind:value={summaryUrl} />
   </FormGroup>
+  <FormGroup>
+    <Label>Label</Label>
+    <Input width="100%" type="text" bind:value={label} />
+  </FormGroup>
   <Button color="primary" disabled={!summaryUrlValidated || submitting} type="submit">
     {#if !submitting}
       Fetch IPS

src/routes/+layout.svelte

@@ -1,10 +1,34 @@
 <script lang="ts">
-  import 'bootstrap/dist/css/bootstrap.min.css';
-  import { Col, Container, Row } from 'sveltestrap';
-  import { Nav, Navbar, NavbarBrand, NavItem, NavLink } from 'sveltestrap';
+  import { Col, Container, Icon, Row, Styles } from 'sveltestrap';
+  import { browser } from '$app/environment';
   import { setContext } from 'svelte';
-  import { SHLClient } from '../managementClient';
   import { writable } from 'svelte/store';
+  import {
+    ButtonDropdown,
+    DropdownItem,
+    DropdownMenu,
+    DropdownToggle,
+    Navbar,
+    NavbarBrand
+  } from 'sveltestrap';
+  import { SHLClient, type SHLAdminParams } from '../managementClient';
+
+  const LOCAL_STORAGE_KEY = 'shlips_store';
+  let shlStore = writable<SHLAdminParams[]>(
+    browser && window.localStorage[LOCAL_STORAGE_KEY]
+      ? JSON.parse(window.localStorage[LOCAL_STORAGE_KEY])
+      : []
+  );
+
+  let selectedShl = writable<number | undefined>($shlStore.length > 0 ? 0 : undefined);
+  setContext('selectedShl', selectedShl);
+
+  $: {
+    if (browser && $shlStore) window.localStorage[LOCAL_STORAGE_KEY] = JSON.stringify($shlStore);
+  }
+
+  setContext('shlStore', shlStore);
+
   let shlClient = new SHLClient();
   setContext('shlClient', shlClient);
 
@@ -13,19 +37,44 @@
 </script>
 
 <Container class="main" fluid>
+  <Styles />
   <Row>
     <Col>
       <Navbar>
         <NavbarBrand href="/">SMART Health Links for IPS</NavbarBrand>
-        <Nav class="ms-auto" navbar>
-          <NavItem>
-            <NavLink
+        <ButtonDropdown size="sm">
+          <DropdownToggle color="primary" caret>Actions...</DropdownToggle>
+          <DropdownMenu>
+            <DropdownItem on:click={() => ($selectedShl = undefined)}>Add New SHLink</DropdownItem>
+            <DropdownItem on:click={() => $reset++}>Reset Demo</DropdownItem>
+            {#if $shlStore.length > 0}
+              <DropdownItem divider />
+              <DropdownItem header>Stored SHLinks</DropdownItem>
+              {#each $shlStore as shl, i}
+                <DropdownItem
+                  on:click={() => {
+                    if ($selectedShl !== undefined) {
+                      if (i < $selectedShl) {
+                        $selectedShl--;
+                      }
+                    }
+                    const newStore = [...$shlStore];
+                    newStore.splice(i, 1);
+                    $shlStore = newStore;
+                    if ($shlStore.length == 0) {
+                      $selectedShl = undefined;
+                    }
+                  }}><Icon name="trash" /> {shl.label || `SHLink ${i + 1}`}</DropdownItem
+                >
+              {/each}
+            {/if}
+          </DropdownMenu>
+        </ButtonDropdown>
+        <!-- <NavLink
               on:click={() => {
                 $reset++;
               }}>Reset SHL</NavLink
-            >
-          </NavItem>
-        </Nav>
+            > -->
       </Navbar>
     </Col>
   </Row>

src/routes/+page.svelte

@@ -8,33 +8,27 @@
   import type { SHCRetrieveEvent } from '../types';
 
   let shlClient: SHLClient = getContext('shlClient');
-
+  let shlStore: Writable<SHLAdminParams[]> = getContext('shlStore');
+  let selectedShl: Writable<number | undefined> = getContext('selectedShl');
   let reset: Writable<number> = getContext('reset');
 
-  const LOCAL_STORAGE_KEY = 'shlips_store';
-  let shl: SHLAdminParams | undefined =
-    browser && window.localStorage[LOCAL_STORAGE_KEY]
-      ? JSON.parse(window.localStorage[LOCAL_STORAGE_KEY])
-      : undefined;
-
-  $: if ($reset) shl = undefined;
-  $: {
-    if (browser && shl) window.localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(shl);
-  }
+  $: if ($reset) $shlStore = [];
 
   async function newShlFromShc(details: SHCRetrieveEvent) {
     const shlCreated = await shlClient.createShl();
     shlClient.addFile(shlCreated, details.shc, 'application/smart-health-card');
+    shlCreated.label = details.label;
     return shlCreated;
   }
 </script>
 
-{#if shl}
-  <HealthLink {shl} />
+{#if $selectedShl !== undefined}
+  <HealthLink shl={$shlStore[$selectedShl]} />
 {:else if browser}
   <AddFile
     on:shc-retrieved={async ({ detail }) => {
-      shl = await newShlFromShc(detail);
+      $shlStore = [...$shlStore, await newShlFromShc(detail)];
+      $selectedShl = $shlStore.length - 1;
     }}
   />
 {:else}

src/types.ts

@@ -2,6 +2,7 @@
   export interface SHCRetrieveEvent {
     shc: SHCFile;
     patient: string;
+    label?: string;
     content: Bundle;
   }