File structure cleanup (#49)

* Organize $lib files into components (svelte components) and utils (library, type and class files) subdirectories

* Delete old static ips (viewer) folder

* Remove unused static files

* Update .env default files

* Fix up remaining changed import paths

* Fix viewer url logic

* Fixup one more path

default.env

@@ -41,18 +41,18 @@ VITE_VERSION_STRING=
 ### Variables with VITE_ prefix will be available to the client
 ###
 
-# SMART on FHIR client id configurations
+# SMART on FHIR client id configurations:
 # Ensure that your development client is registered with the proper redirect uris
 VITE_EPIC_CLIENT_ID=
 VITE_CERNER_CLIENT_ID=
 
-# Bearer auth tokens
-VITE_MEDITECH_BEARER_TOKEN=
-
-# HIMSS 2024 only:
+# SOF for HIMSS 2024 only:
 #VITE_EPIC_HIMSS_CLIENT_ID=
 #VITE_ECW_HIMSS_CLIENT_ID=
 
+# Bearer auth tokens
+VITE_MEDITECH_BEARER_TOKEN=
+
 # SHL Server API endpoint url
 VITE_API_BASE=
 

default.env.development

@@ -1,6 +1,13 @@
 # If overrides to .env values are needed for development
-# VITE_API_BASE=
-# VITE_INTERMEDIATE_FHIR_SERVER_BASE=
 
-# Override vite dev server port
-# DEV_SERVER_PORT=
+# vite dev server port
+DEV_SERVER_PORT=4000
+
+# SHL API endpoint
+VITE_API_BASE=https://smart-health-links-server.cirg.washington.edu/api
+
+# FHIR Server endpoint url
+VITE_INTERMEDIATE_FHIR_SERVER_BASE=https://fhir.ips-demo.dev.cirg.uw.edu/fhir
+
+# SHL Viewer url override
+# VITE_VIEWER_BASE=https://shlips.fl.dlorigan.dev.cirg.uw.edu/ips/index.html

src/lib/AddFile.svelte → src/lib/components/app/AddFile.svelte

@@ -1,21 +1,13 @@
 <script lang="ts">
   import { createEventDispatcher, onMount } from 'svelte';
   import { page } from '$app/stores';
-  import {
-    getResourcesFromIPS,
-    isSHCFile,
-    packageSHC,
-  } from '$lib/util';
   import { goto } from '$app/navigation';
   import { getContext } from 'svelte';
   import { type Writable } from 'svelte/store';
   import {
     Accordion,
     AccordionItem,
     Button,
-    Card,
-    CardBody,
-    CardText,
     Col,
     FormGroup,
     Icon,
@@ -24,23 +16,31 @@
     Row,
     Spinner,
     TabContent,
-    TabPane } from 'sveltestrap';
-  import FetchUrl from './FetchUrl.svelte';
-  import FetchFile from './FetchFile.svelte';
-  import FetchSoF from './FetchSoF.svelte';
-  import FetchAD from './FetchAD.svelte';
-  import FetchTEFCA from './FetchTEFCA.svelte';
-  import ODHForm from './ODHForm.svelte';
-  import { verify } from './shcDecoder.js';
-  import type { SHCFile,
+    TabPane
+  } from 'sveltestrap';
+  import FetchUrl from '$lib/components/app/FetchUrl.svelte';
+  import FetchFile from '$lib/components/app/FetchFile.svelte';
+  import FetchSoF from '$lib/components/app/FetchSoF.svelte';
+  import FetchAD from '$lib/components/app/FetchAD.svelte';
+  import FetchTEFCA from '$lib/components/app/FetchTEFCA.svelte';
+  import ODHForm from '$lib/components/app/ODHForm.svelte';
+  import ResourceSelector from '$lib/components/app/ResourceSelector.svelte';
+  import {
+    getResourcesFromIPS,
+    isSHCFile,
+    packageSHC,
+  } from '$lib/utils/util';
+  import { verify } from '$lib/utils/shcDecoder.js';
+  import type {
+    SHCFile,
     SHCRetrieveEvent,
     ResourceRetrieveEvent,
     IPSRetrieveEvent,
     SHLSubmitEvent, 
-    SOFAuthEvent } from './types';
+    SOFAuthEvent
+  } from '$lib/utils/types';
   import type { Patient } from 'fhir/r4';
-  import { IPSResourceCollection } from './IPSResourceCollection.js';
-  import ResourceSelector from './ResourceSelector.svelte';
+  import { IPSResourceCollection } from '$lib/utils/IPSResourceCollection.js';
  
   export let status = "";
   

src/lib/FetchAD.svelte → src/lib/components/app/FetchAD.svelte

@@ -9,7 +9,7 @@
     Spinner
   } from 'sveltestrap';
   import { createEventDispatcher } from 'svelte';
-  import type { DocumentReferencePOLST, ResourceRetrieveEvent } from './types';
+  import type { DocumentReferencePOLST, ResourceRetrieveEvent } from '$lib/utils/types';
   import type { Attachment, BundleEntry, ServiceRequest } from 'fhir/r4';
 
   export let sectionKey: string = "Advance Directives";

src/lib/FetchFile.svelte → src/lib/components/app/FetchFile.svelte

@@ -7,7 +7,7 @@
         Label,
         Row,
         Spinner } from 'sveltestrap';
-    import type { SHCRetrieveEvent, IPSRetrieveEvent } from './types';
+    import type { SHCRetrieveEvent, IPSRetrieveEvent } from '$lib/utils/types';
     import { createEventDispatcher } from 'svelte';
     
     const shcDispatch = createEventDispatcher<{'shc-retrieved': SHCRetrieveEvent}>();

src/lib/FetchIIS.svelte → src/lib/components/app/FetchIIS.svelte

@@ -14,9 +14,9 @@
     Spinner
   } from 'sveltestrap';
 
-  import type { ResourceRetrieveEvent } from './types';
+  import type { ResourceRetrieveEvent } from '$lib/utils/types';
   import { createEventDispatcher } from 'svelte';
-  import { API_BASE } from './config';
+  import { API_BASE } from '$lib/config';
 
   const resourceDispatch = createEventDispatcher<{ 'update-resources': ResourceRetrieveEvent }>();
 

src/lib/FetchSoF.svelte → src/lib/components/app/FetchSoF.svelte

@@ -8,10 +8,14 @@
     Row,
     Spinner } from 'sveltestrap';
 
-  import { SOF_HOSTS } from './config';
-  import type { ResourceRetrieveEvent, SOFAuthEvent, SOFHost } from './types';
-  import { authorize, getResourcesWithReferences } from './sofClient.js';
+  import { SOF_HOSTS } from '$lib/config';
+  import type { ResourceRetrieveEvent, SOFAuthEvent, SOFHost } from '$lib/utils/types';
+  import { authorize, getResourcesWithReferences } from '$lib/utils/sofClient.js';
   import { createEventDispatcher, onMount } from 'svelte';
+
+  // For "quick sample" in demo
+  import { EXAMPLE_IPS, IPS_DEFAULT } from '$lib/config';
+  import type { IPSRetrieveEvent } from '$lib/utils/types';
   
   const authDispatch = createEventDispatcher<{'sof-auth-init': SOFAuthEvent; 'sof-auth-fail': SOFAuthEvent}>();
   const resourceDispatch = createEventDispatcher<{'update-resources': ResourceRetrieveEvent}>();
@@ -89,8 +93,6 @@
   }
 
   // Demo quick sample loader
-  import { EXAMPLE_IPS, IPS_DEFAULT } from './config';
-  import type { IPSRetrieveEvent } from './types';
   let defaultUrl = EXAMPLE_IPS[IPS_DEFAULT];
   const ipsDispatch = createEventDispatcher<{'ips-retrieved': IPSRetrieveEvent}>();
   let ipsResult: IPSRetrieveEvent = {

src/lib/FetchTEFCA.svelte → src/lib/components/app/FetchTEFCA.svelte

@@ -9,10 +9,10 @@
     Spinner
   } from 'sveltestrap';
 
-  import type { ResourceRetrieveEvent } from './types';
+  import type { ResourceRetrieveEvent } from '$lib/utils/types';
   import { createEventDispatcher } from 'svelte';
-  import { constructResourceUrl } from './sofClient';
-  import { SOF_PATIENT_RESOURCES } from './config';
+  import { constructResourceUrl } from '$lib/utils/sofClient';
+  import { SOF_PATIENT_RESOURCES } from '$lib/config';
 
   const resourceDispatch = createEventDispatcher<{ 'update-resources': ResourceRetrieveEvent }>();
 

src/lib/FetchUrl.svelte → src/lib/components/app/FetchUrl.svelte

@@ -13,8 +13,8 @@
     Row,
     Spinner } from 'sveltestrap';
 
-  import { PATIENT_IPS, EXAMPLE_IPS, IPS_DEFAULT, BEARER_AUTHORIZATION } from './config';
-  import type { SHCRetrieveEvent, IPSRetrieveEvent } from './types';
+  import { PATIENT_IPS, EXAMPLE_IPS, IPS_DEFAULT, BEARER_AUTHORIZATION } from '$lib/config';
+  import type { SHCRetrieveEvent, IPSRetrieveEvent } from '$lib/utils/types';
   import { createEventDispatcher } from 'svelte';
 
   const shcDispatch = createEventDispatcher<{'shc-retrieved': SHCRetrieveEvent}>();

src/lib/HealthLink.svelte → src/lib/components/app/HealthLink.svelte

@@ -26,7 +26,7 @@
   import mergeImages from 'merge-images';
   import { goto } from '$app/navigation';
   import type { Writable } from 'svelte/store';
-  import type { SHLAdminParams, SHLClient } from './managementClient';
+  import type { SHLAdminParams, SHLClient } from '$lib/utils/managementClient';
 
   export let shl: SHLAdminParams;
   let shlControlled: SHLAdminParams;

src/lib/HealthLinkOverview.svelte → src/lib/components/app/HealthLinkOverview.svelte

@@ -2,28 +2,12 @@
     import { getContext } from 'svelte';
     import {
         Button,
-        Card,
-        CardBody,
-        CardFooter,
-        CardHeader,
-        CardSubtitle,
-        CardText,
-        CardTitle,
         Col,
-        FormGroup,
-        Icon,
-        Input,
-        Label,
         Row,
-        Styles,
-
-        Table
-
+        Styles
     } from 'sveltestrap';
-
-    import { goto } from '$app/navigation';
     import type { Writable } from 'svelte/store';
-    import type { SHLAdminParams, SHLClient } from './managementClient';
+    import type { SHLAdminParams } from '$lib/utils/managementClient';
 
     let shlStore: Writable<SHLAdminParams[]> = getContext('shlStore');
     let mode: Writable<string> = getContext('mode');
@@ -44,22 +28,25 @@
 </Row>
 <br>
 {#if $shlStore.length > 0}
-<Row>
-    <Col>
-        <h4 style="padding-left: 0; padding-bottom: 5px; border-bottom: 1px solid rgb(204, 204, 204); margin-bottom: 0px;">
-            {title}
-        </h4>
-    </Col>
-</Row>
-{#each $shlStore as shl, i}
-<Row style="display:flex; align-items:center; padding: 10px;">
-    <Col>{shl.label || `SHLink ${i + 1}`}</Col>
-    <Col><Button color="primary" style="width:100%" href={'/view/' + shl.id}>View/Manage</Button></Col>
-</Row>
-{/each}
-<table style="width:100%">
-
-</table>
+    <Row>
+        <Col>
+            <h4 style="padding-left: 0; padding-bottom: 5px; border-bottom: 1px solid rgb(204, 204, 204); margin-bottom: 0px;">
+                {title}
+            </h4>
+        </Col>
+    </Row>
+    {#each $shlStore as shl, i}
+        <Row style="display:flex; align-items:center; padding: 10px;">
+            <Col>
+                {shl.label || `SHLink ${i + 1}`}
+            </Col>
+            <Col>
+                <Button color="primary" style="width:100%" href={'/view/' + shl.id}>
+                    View/Manage
+                </Button>
+            </Col>
+        </Row>
+    {/each}
 {/if}
 <br>
 

src/lib/ODHForm.svelte → src/lib/components/app/ODHForm.svelte

@@ -8,7 +8,7 @@
       Input,
       Row } from 'sveltestrap';
     import { createEventDispatcher } from 'svelte';
-    import type { ResourceRetrieveEvent } from './types';
+    import type { ResourceRetrieveEvent } from '$lib/utils/types';
 
     const resourceDispatch = createEventDispatcher<{'update-resources': ResourceRetrieveEvent}>();
 

src/lib/ResourceSelector.svelte → src/lib/components/app/ResourceSelector.svelte

@@ -1,6 +1,6 @@
 <script lang='ts'>
-    import { uploadResources } from './resourceUploader.js';
-    import { download } from './util.js';
+    import { uploadResources } from '$lib/utils/resourceUploader.js';
+    import { download } from '$lib/utils/util.js';
     import { createEventDispatcher, getContext } from 'svelte';
     import { get, type Writable } from 'svelte/store';
     import {
@@ -19,27 +19,27 @@
         Offcanvas,
         Label,
         Row } from 'sveltestrap';
-    import { ResourceHelper } from './ResourceHelper.js';
-    import type { IPSResourceCollection } from './IPSResourceCollection.js';
-    import type { IPSRetrieveEvent } from './types.js';
+    import { ResourceHelper } from '$lib/utils/ResourceHelper.js';
+    import type { IPSResourceCollection } from '$lib/utils/IPSResourceCollection.js';
+    import type { IPSRetrieveEvent } from '$lib/utils/types.js';
     import type { CompositionSection, BundleEntry } from 'fhir/r4';
 
-    import AdvanceDirective from './resource-templates/AdvanceDirective.svelte';
-    import AllergyIntolerance from './resource-templates/AllergyIntolerance.svelte';
-    import Condition from './resource-templates/Condition.svelte';
-    import DiagnosticReport from './resource-templates/DiagnosticReport.svelte';
-    import Encounter from './resource-templates/Encounter.svelte';
-    import Immunization from './resource-templates/Immunization.svelte';
-    import Location from './resource-templates/Location.svelte';
-    import Medication from './resource-templates/Medication.svelte';
-    import MedicationRequest from './resource-templates/MedicationRequest.svelte';
-    import MedicationStatement from './resource-templates/MedicationStatement.svelte';
-    import Observation from './resource-templates/Observation.svelte';
-    import Organization from './resource-templates/Organization.svelte';
-    import Patient from './resource-templates/Patient.svelte';
-    import Practitioner from './resource-templates/Practitioner.svelte';
-    import Procedure from './resource-templates/Procedure.svelte';
-    import OccupationalData from './resource-templates/OccupationalData.svelte';
+    import AdvanceDirective from '$lib/components/resource-templates/AdvanceDirective.svelte';
+    import AllergyIntolerance from '$lib/components/resource-templates/AllergyIntolerance.svelte';
+    import Condition from '$lib/components/resource-templates/Condition.svelte';
+    import DiagnosticReport from '$lib/components/resource-templates/DiagnosticReport.svelte';
+    import Encounter from '$lib/components/resource-templates/Encounter.svelte';
+    import Immunization from '$lib/components/resource-templates/Immunization.svelte';
+    import Location from '$lib/components/resource-templates/Location.svelte';
+    import Medication from '$lib/components/resource-templates/Medication.svelte';
+    import MedicationRequest from '$lib/components/resource-templates/MedicationRequest.svelte';
+    import MedicationStatement from '$lib/components/resource-templates/MedicationStatement.svelte';
+    import Observation from '$lib/components/resource-templates/Observation.svelte';
+    import Organization from '$lib/components/resource-templates/Organization.svelte';
+    import Patient from '$lib/components/resource-templates/Patient.svelte';
+    import Practitioner from '$lib/components/resource-templates/Practitioner.svelte';
+    import Procedure from '$lib/components/resource-templates/Procedure.svelte';
+    import OccupationalData from '$lib/components/resource-templates/OccupationalData.svelte';
 
     export let submitting: boolean;
     export let resourceCollection: IPSResourceCollection;

src/lib/layout/navbar/LanguageMenu.svelte → src/lib/components/layout/LanguageMenu.svelte

@@ -3,7 +3,7 @@
     // import { locale } from 'svelte-i18n'; // TODO
     import { getContext } from 'svelte';
     import type { Writable, Readable } from 'svelte/store';
-    import type { Language } from '$lib/types';
+    import type { Language } from '$lib/utils/types';
 
     let locale: Writable<string> = getContext('locale');
     let locales: Readable<Record<string, Language>> = getContext('locales');

src/lib/resource-templates/AdvanceDirective.svelte → src/lib/components/resource-templates/AdvanceDirective.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { base64toBlob } from '$lib/util';
-  import type { DocumentReferencePOLST } from '$lib/types';
+  import { base64toBlob } from '$lib/utils/util';
+  import type { DocumentReferencePOLST } from '$lib/utils/types';
 
   export let resource: DocumentReferencePOLST; // Define a prop to pass the data to the component
 

src/lib/components/resource-templates/Dosage.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Dosage } from 'fhir/r4';
+
+  export let dosage: Dosage | undefined;
+</script>
+
+{#if dosage}
+  {#if dosage.route?.coding || dosage.doseAndRate || dosage.timing?.repeat}
+    <table class="table table-bordered table-sm">
+      <thead>
+        <tr><th colspan="5">Dosage</th></tr>
+        <tr>
+          <th scope="col">Route</th>
+          <th scope="col">Qty</th>
+          <th scope="col">Unit</th>
+          <th scope="col">Freq. Qty</th>
+          <th scope="col">Freq. Period</th>
+        </tr>
+      </thead>
+      <tr>
+        <td>{dosage.route?.coding?.[0].display ?? ''}</td>
+        <td>{dosage.doseAndRate?.[0].doseQuantity?.value ?? ''}</td>
+        <td>{dosage.doseAndRate?.[0].doseQuantity?.unit ?? ''}</td>
+        <td>{dosage.timing?.repeat?.count ?? ''}</td>
+        <td>
+          {#if dosage.timing?.repeat?.period && dosage.timing?.repeat?.periodUnit}
+            {dosage.timing?.repeat?.period}{dosage.timing?.repeat?.periodUnit}
+          {/if}
+        </td>
+      </tr>
+    </table>
+  {:else if dosage.text}
+    Dosage: {dosage.text}
+  {:else if dosage.asNeededBoolean}
+    Dosage: as needed
+  {:else}
+    <span class="text-muted">No dosage information</span>
+  {/if}
+{:else}
+  <span class="text-muted">No dosage information</span>
+{/if}