Skip to content

Commit

Permalink
Fix up patient template, shl view and max viewport size
Browse files Browse the repository at this point in the history
  • Loading branch information
@daniellrgn
daniellrgn committed Jan 16, 2025
1 parent cb82f95 commit 7d55c46
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 118 deletions.
243 changes: 129 additions & 114 deletions src/lib/components/resource-templates/Patient.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<script lang="ts">
import { Badge } from 'sveltestrap';
import type { Patient } from "fhir/r4";
import type { ResourceTemplateParams } from '$lib/utils/types';
export let content: ResourceTemplateParams<Patient>; // Define a prop to pass the data to the component
let resource: Patient = content.resource;
import { Badge, Button, Icon } from 'sveltestrap';
import type { Patient } from "fhir/r4";
import type { ResourceTemplateParams } from '$lib/utils/types';
export let content: ResourceTemplateParams<Patient>; // Define a prop to pass the data to the component
let resource: Patient = content.resource;
let showContact = false;
</script>

{#if resource.name}
Expand All @@ -23,121 +25,134 @@
</strong>
<br>
{/if}

{#if resource.birthDate}
Birth Date: {resource.birthDate}<br>
{/if}
{#if resource.gender}
Gender: {resource.gender ?? ""}<br>
{/if}
{#if resource.telecom}
<table class="table table-bordered table-sm">
<thead>
<tr><th colspan="3">Contact Information</th></tr>
</thead>
{#each resource.telecom as telecom}
<tr>
<td>{telecom.system ?? ""}</td>
<td>{telecom.use ?? ""}</td>
<td>{telecom.value ?? ""}</td>
</tr>
{/each}
</table>
{/if}
{#if resource.address}
<table class="table table-bordered table-sm">
<thead>
<tr>
<th scope="col">Use</th>
<th scope="col">Address</th>
</tr>
<tr></tr>
</thead>
{#each resource.address as address}
<tr>
<td>{address.use ?? ""}</td>
<td>
{#if address.line}
{#each address.line as line}
{line}<br />
{#if resource.telecom || resource.address || resource.contact}
<Button
class="my-1"
size="sm"
color={!showContact ? "secondary" : "primary"}
outline
on:click={() => showContact = !showContact}>
{showContact ? 'Hide' : 'Show'} contact information <Icon style="font-size: x-small;"name={!showContact ? "caret-down" : "caret-up"} />
</Button>
{#if showContact}
{#if resource.telecom}
<table class="table table-bordered table-sm">
<thead>
<tr><th colspan="3">Contact Information</th></tr>
</thead>
{#each resource.telecom as telecom}
<tr>
<td>{telecom.system ?? ""}</td>
<td>{telecom.use ?? ""}</td>
<td>{telecom.value ?? ""}</td>
</tr>
{/each}
{/if}
{address.city ?? "[Unknown City]"}{
address.state
? `, ${address.state}`
: ''
}{address.country
? `, ${address.country}`
: ''}
{address.postalCode ?? ""}
</td>
</tr>
{/each}
</table>
{/if}
{#if resource.contact}
{#each resource.contact as contact}
<strong>Emergency Contact:</strong><br>
{#if contact.relationship}
{#each contact.relationship as relationship}
{#if relationship.coding && relationship.coding[0].display}
<Badge color="secondary">{relationship.coding[0].display}</Badge>
{/if}
{/each}
<br>
{/if}
{#if contact.name}
<strong>
{contact.name.prefix ?? ""}
{contact.name.given ? contact.name.given.join(' ') : ""}
{contact.name.family ?? ""}
</strong>
<br>
{/if}
{#if contact.gender}
Gender: {contact.gender ?? ""}<br>
{/if}
{#if contact.telecom}
<table class="table table-bordered table-sm">
<thead>
<tr><th colspan="3">Contact Information</th></tr>
</thead>
{#each contact.telecom as telecom}
<tr>
<td>{telecom.system ?? ""}</td>
<td>{telecom.use ?? ""}</td>
<td>{telecom.value ?? ""}</td>
</tr>
{/each}
</table>
{/if}
{#if contact.address}
<table class="table table-bordered table-sm">
<thead>
<tr>
<th scope="col">Use</th>
<th scope="col">Address</th>
</tr>
<tr></tr>
</thead>
<tr>
<td>{contact.address.use ?? ""}</td>
<td>
{#if contact.address.line}
{#each contact.address.line as line}
{line}<br />
</table>
{/if}
{#if resource.address}
<table class="table table-bordered table-sm">
<thead>
<tr>
<th scope="col">Use</th>
<th scope="col">Address</th>
</tr>
<tr></tr>
</thead>
{#each resource.address as address}
<tr>
<td>{address.use ?? ""}</td>
<td>
{#if address.line}
{#each address.line as line}
{line}<br />
{/each}
{/if}
{address.city ?? "[Unknown City]"}{
address.state
? `, ${address.state}`
: ''
}{address.country
? `, ${address.country}`
: ''}
{address.postalCode ?? ""}
</td>
</tr>
{/each}
</table>
{/if}
{#if resource.contact}
{#each resource.contact as contact}
<strong>Emergency Contact:</strong><br>
{#if contact.relationship}
{#each contact.relationship as relationship}
{#if relationship.coding && relationship.coding[0].display}
<Badge color="secondary">{relationship.coding[0].display}</Badge>
{/if}
{/each}
<br>
{/if}
{#if contact.name}
<strong>
{contact.name.prefix ?? ""}
{contact.name.given ? contact.name.given.join(' ') : ""}
{contact.name.family ?? ""}
</strong>
<br>
{/if}
{#if contact.gender}
Gender: {contact.gender ?? ""}<br>
{/if}
{#if contact.telecom}
<table class="table table-bordered table-sm">
<thead>
<tr><th colspan="3">Contact Information</th></tr>
</thead>
{#each contact.telecom as telecom}
<tr>
<td>{telecom.system ?? ""}</td>
<td>{telecom.use ?? ""}</td>
<td>{telecom.value ?? ""}</td>
</tr>
{/each}
{/if}
{contact.address.city ?? "[Unknown City]"}{
contact.address.state
? `, ${contact.address.state}`
: ''
}{contact.address.country
? `, ${contact.address.country}`
: ''}
{contact.address.postalCode ?? ""}
</td>
</tr>
</table>
</table>
{/if}
{#if contact.address}
<table class="table table-bordered table-sm">
<thead>
<tr>
<th scope="col">Use</th>
<th scope="col">Address</th>
</tr>
<tr></tr>
</thead>
<tr>
<td>{contact.address.use ?? ""}</td>
<td>
{#if contact.address.line}
{#each contact.address.line as line}
{line}<br />
{/each}
{/if}
{contact.address.city ?? "[Unknown City]"}{
contact.address.state
? `, ${contact.address.state}`
: ''
}{contact.address.country
? `, ${contact.address.country}`
: ''}
{contact.address.postalCode ?? ""}
</td>
</tr>
</table>
{/if}
{/each}
{/if}
{/if}
{/each}
{/if}
2 changes: 1 addition & 1 deletion src/lib/components/viewer/IPSContent.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@
/* Limit height for section content window */
:global(.ips-section > .accordion-collapse > .accordion-body) {
overflow: auto !important;
max-height: 40rem !important;
max-height: 50rem !important;
}
.code {
Expand Down
6 changes: 3 additions & 3 deletions src/routes/(viewer)/ips/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,19 +230,19 @@
{#each shlContents as contents, index}
<TabPane class={`ips${index}`} tabId={`ips${index}`} active={index === 0} style="padding-top:10px">
<span class="smart-tab" slot="tab">{getTabLabel(contents)}</span>
<IPSContent content={contents} mode={$displayMode} />
<IPSContent bundle={contents} mode={$displayMode} />
</TabPane>
{/each}
{#if SHOW_VIEWER_DEMO}
<TabPane tabId="demo" active={shlContents.length === 0} style="padding-top:10px">
<span class="demo-tab" slot="tab">IPS Demo</span>
<Demo content={shlContents[0]} mode={$displayMode} />
<Demo bundle={shlContents[0]} mode={$displayMode} />
</TabPane>
{/if}
</TabContent>
{:else}
<!-- Single tab view -->
<IPSContent content={shlContents[0]} mode={$displayMode} />
<IPSContent bundle={shlContents[0]} mode={$displayMode} />
{/if}

<style lang="css">
Expand Down

0 comments on commit 7d55c46

Please sign in to comment.