Skip to content

Commit

Permalink
Merge branch 'main' into vib-demo-updates
Browse files Browse the repository at this point in the history
  • Loading branch information
daniellrgn committed Jan 22, 2025
2 parents 789739a + 0eaa826 commit 5509b27
Show file tree
Hide file tree
Showing 29 changed files with 883 additions and 299 deletions.
4 changes: 1 addition & 3 deletions src/app.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
<link rel="preload" as="font" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/fonts/bootstrap-icons.woff2?8d200481aa7f02a2d63a331fc782cfaf" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="image" href="/img/doh_logo_doh-black.png" />
<link rel="preload" as="image" href="/img/waverifypluslogo.png" />
<link rel="preload" as="image" href="/img/qr-banner-top.png" />
<link rel="preload" as="image" href="/img/qr-banner-bottom.png" />
<link rel="preload" as="image" href="/img/waverifypluslogo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

%sveltekit.head%
Expand Down
9 changes: 6 additions & 3 deletions src/lib/components/app/FetchAD.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,13 @@
phone = '';
gender = '';
if (selectedSource === 'AD Vault') {
last = "Smith-Johnson";
first = "Betsy";
last = "Mosley";
//last = "Smith-Johnson";
first = "Jenny";
//first = "Betsy";
gender = "Female";
dob = "1950-11-15";
dob = "1955-10-03";
//dob = "1950-11-15";
} else if (selectedSource === 'WA Verify+ Demo Server') {
last = "Gravitate";
first = "Maria SEATTLE";
Expand Down
62 changes: 56 additions & 6 deletions src/lib/components/app/ResourceSelector.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
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';
import QuestionnaireResponse from '$lib/components/resource-templates/QuestionnaireResponse.svelte';
export let submitting: boolean;
export let resourceCollection: IPSResourceCollection;
Expand All @@ -62,7 +63,8 @@
"Practitioner": Practitioner,
"Procedure": Procedure,
"Occupational Data": OccupationalData,
"Advance Directives": AdvanceDirective
"Advance Directives": AdvanceDirective,
"QuestionnaireResponse": QuestionnaireResponse
};
const ipsDispatch = createEventDispatcher<{ 'ips-retrieved': IPSRetrieveEvent }>();
Expand Down Expand Up @@ -281,9 +283,10 @@
<Button
size="sm"
color="secondary"
outline
on:click={() => setJson($resourcesByTypeStore[resourceType][key])}
>
JSON
View
</Button>
</Col>
{/if}
Expand All @@ -292,16 +295,20 @@
<Label style="width: 100%">
<CardBody>
<Row style="overflow:hidden">
<Col xs=auto class="d-flex align-items-center pe-0">
<Col xs=auto class="d-flex align-items-top pt-4 pe-0">
{#if resourceType === "Patient"}
<Input id={key} type="radio" bind:group={selectedPatient} value={key} />
{:else}
<Input id={key} type="checkbox" bind:checked={$resourcesByTypeStore[resourceType][key].include} value={key} />
{/if}
</Col>
<Col>
<Col class="justify-content-center align-items-center">
{#if resourceType in components}
<svelte:component this={components[resourceType]} resource={$resourcesByTypeStore[resourceType][key].resource} />
<svelte:component
this={components[resourceType]}
content={{
resource: $resourcesByTypeStore[resourceType][key].resource,
entries: resourceCollection.flattenResources($resourcesByTypeStore)}} />
<!-- ResourceType: {resourceType}
Resource: {JSON.stringify($resourcesByTypeStore[resourceType][key].resource)} -->
{:else if $resourcesByTypeStore[resourceType][key].resource.text?.div}
Expand All @@ -325,6 +332,49 @@
</AccordionItem>

<style>
/* Table styling */
:global(table) {
border-collapse: collapse !important;
width: 100% !important;
}
:global(th) {
border: 1px solid lightgray !important;
padding: 0 7px !important;
text-align: center !important;
}
:global(td) {
margin-left: 2em !important;
}
:global(thead) {
background-color: #0c63e4;
color: white;
}
/* Alternating table row coloring */
:global(tbody tr:nth-child(odd)) {
background-color: #fff;
border: 1px solid lightgray;
}
:global(tbody tr:nth-child(even)) {
background-color: #e7f1ff;
border: 1px solid lightgray;
}
/* Sticky table header */
:global(th) {
background: #0c63e4;
position: sticky;
top: -17px;
}
/* First column of generated table is usually most important */
:global(td:first-child) {
font-weight: bold;
}
.code {
overflow:auto;
margin: 0;
Expand All @@ -339,4 +389,4 @@
:global(div.offcanvas-body) {
overflow-y: hidden !important;
}
</style>
</style>
6 changes: 4 additions & 2 deletions src/lib/components/resource-templates/AdvanceDirective.svelte
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<script lang="ts">
import { base64toBlob } from '$lib/utils/util';
import type { DocumentReferencePOLST } from '$lib/utils/types';
import type { DocumentReferencePOLST, ResourceTemplateParams } from '$lib/utils/types';
export let content: ResourceTemplateParams<DocumentReferencePOLST>; // Define a prop to pass the data to the component
export let resource: DocumentReferencePOLST; // Define a prop to pass the data to the component
let resource: DocumentReferencePOLST = content.resource;
/** Determine if any extension has the revoked status
let isRevoked = false;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
<script lang="ts">
import { Badge } from 'sveltestrap';
import type { AllergyIntolerance } from 'fhir/r4';
import type { ResourceTemplateParams } from '$lib/utils/types';
export let content: ResourceTemplateParams<AllergyIntolerance>; // Define a prop to pass the data to the component
export let resource: AllergyIntolerance; // Define a prop to pass the data to the component
let resource: AllergyIntolerance = content.resource;
function badgeColor(criticality: string) {
if (criticality) {
Expand Down
14 changes: 10 additions & 4 deletions src/lib/components/resource-templates/Condition.svelte
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
<script lang="ts">
import { Badge } from 'sveltestrap';
import type { Condition } from 'fhir/r4';
import type { ResourceTemplateParams } from '$lib/utils/types';
export let resource : Condition; // Define a prop to pass the data to the component
export let content: ResourceTemplateParams<Condition>; // Define a prop to pass the data to the component
let resource: Condition = content.resource;
function badgeColor(severity: string) {
if (severity) {
Expand Down Expand Up @@ -57,9 +60,12 @@
<strong>{resource.code.text}</strong><br>
{/if}
{/if}
{#if resource.bodySite}
Site: {resource.bodySite}<br>
{#if resource.bodySite?.[0]?.coding?.[0]?.display}
Site: {resource.bodySite[0]?.coding?.[0]?.display}<br>
{/if}
{#if resource.onsetDateTime}
Since {resource.onsetDateTime.split("T")[0]}<br>
Since: {resource.onsetDateTime.split("T")[0]}<br>
{/if}
{#if resource.recordedDate}
Recorded: {resource.recordedDate.split("T")[0]}<br>
{/if}
31 changes: 31 additions & 0 deletions src/lib/components/resource-templates/Consent.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script lang="ts">
import { Badge } from 'sveltestrap';
import type { Consent } from 'fhir/r4';
import type { ResourceTemplateParams } from '$lib/utils/types';
export let content: ResourceTemplateParams<Consent>; // Define a prop to pass the data to the component
let resource: Consent = content.resource;
</script>
{#if resource.text?.div}
{@html resource.text.div}
<br>
{/if}
{#if resource.category?.[0]}
{#if resource.category[0].coding}
<Badge color="primary">{resource.category[0].coding[0].system} : {resource.category[0].coding[0].code}</Badge>
<br />
{#if resource.category[0].coding[0].display}
<strong>{resource.category[0].coding[0].display}</strong>
{:else if resource.category[0].text}
<strong>{resource.category[0].text}</strong>
{/if}
<br>
{:else if resource.category[0].text}
<strong>{resource.category[0].text}</strong>
<br>
{/if}
{/if}
{#if resource.provision?.code?.[0].coding}
Intent: {resource.provision?.code?.[0].coding[0].display}
{/if}
89 changes: 69 additions & 20 deletions src/lib/components/resource-templates/DiagnosticReport.svelte
Original file line number Diff line number Diff line change
@@ -1,42 +1,91 @@
<script lang="ts">
import { Badge } from 'sveltestrap';
import type { DiagnosticReport } from 'fhir/r4';
import type { BundleEntry, DiagnosticReport, Observation } from 'fhir/r4';
import ObservationTemplate from './Observation.svelte';
import type { ResourceTemplateParams } from '$lib/utils/types';
import { getEntry } from '$lib/utils/util';
export let resource: DiagnosticReport; // Define a prop to pass the data to the component
export let content: ResourceTemplateParams<DiagnosticReport>; // Define a prop to pass the data to the component
let resource: DiagnosticReport = content.resource;
let results: Observation[] | undefined = [];
$: {
if (resource) {
if (resource.result) {
for (let result of resource.result) {
if (result.reference) {
let resultResource;
if (resource.contained?.[0]?.resourceType === 'Observation') {
// If the result observation is contained in the resource
resultResource = resource.contained[0];
} else {
// If the result observation is referenced
resultResource = getEntry(
content.entries as BundleEntry[],
result.reference
) as Observation;
}
if (resultResource) {
results.push(resultResource);
}
}
}
}
}
}
</script>

{#if resource.category?.[0].coding}
<Badge color="primary">{resource.category[0].coding[0].display ?? resource.category[0].coding[0].code}</Badge>
{/if}
{#if resource.code}
{#if resource.code.coding}
<Badge color="primary">{resource.code.coding[0].system} : {resource.code.coding[0].code}</Badge>
<br />
{#if resource.code.coding[0].display}
<strong>{resource.code.coding[0].display}</strong><br>
<strong>{resource.code.coding[0].display}</strong>
{:else if resource.code.text}
<strong>{resource.code.text}</strong><br>
<strong>{resource.code.text}</strong>
{/if}
{:else if resource.code.text}
<strong>{resource.code.text}</strong><br>
<br><strong>{resource.code.text}</strong>
{/if}
{/if}
{#if resource.effectivePeriod?.start}
Effective {resource.effectivePeriod.start}{resource.effectivePeriod.end
<br>
{#if resource.effectivePeriod}
Effective: {resource.effectivePeriod.start ? resource.effectivePeriod.start : ''}{resource
.effectivePeriod.end
? ` - ${resource.effectivePeriod.end}`
: ''}
{:else if resource.effectiveDateTime}
Date: {resource.effectiveDateTime.split("T")[0]}
Date: {resource.effectiveDateTime.split('T')[0]}
{/if}
<br>
{#if resource.result}
<table class="table table-bordered table-sm">
<thead>
<tr><th colspan="5">Result(s)</th></tr>
</thead>
{#each resource.result as result}
{#if result.display}
<tr>
<td>{result.display}</td>
</tr>
{/if}
{/each}
</table>
<table class="table table-bordered table-sm">
<thead>
<tr><th>Result(s)</th></tr>
</thead>
<tbody>
{#each results as result}
<tr>
<div class="ml-4">
<ObservationTemplate
content={{ resource: result, entries: content.entries }}
contained={resource.effectiveDateTime !== undefined || resource.effectivePeriod !== undefined}
/>
</div>
</tr>
{/each}
{#each resource.result as result}
{#if result.display}
<tr>
<td>{result.display}</td>
</tr>
{/if}
{/each}
</tbody>
</table>
{/if}
37 changes: 20 additions & 17 deletions src/lib/components/resource-templates/Dosage.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
</script>

{#if dosage}
{#if dosage.text}
Dosage: {dosage.text}
{:else if dosage.asNeededBoolean}
Dosage: as needed
{:else}
<span class="text-muted">No dosage information</span>
{/if}
{#if dosage.route?.coding || dosage.doseAndRate || dosage.timing?.repeat}
<table class="table table-bordered table-sm">
<thead>
Expand All @@ -17,24 +24,20 @@
<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>
<tbody>
<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>
</tbody>
</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>
Expand Down
Loading

0 comments on commit 5509b27

Please sign in to comment.