Initial conversion mirroring viewer templates

uwcirg · Feb 23, 2024 · 7a16ff1 · 7a16ff1
1 parent 278958a
commit 7a16ff1
Show file tree

Hide file tree

Showing 8 changed files with 284 additions and 0 deletions.
diff --git a/src/lib/ResourceSelector.svelte b/src/lib/ResourceSelector.svelte
@@ -9,9 +9,30 @@
         Row,
         Spinner } from 'sveltestrap';
     import { ResourceHelper, type IPSRetrieveEvent } from './types';
+    import AdvanceDirective from './resource-templates/AdvanceDirective.svelte';
+    import Immunization from './resource-templates/Immunization.svelte';
+    import Medication from './resource-templates/Medication.svelte';
+    import Observation from './resource-templates/Observation.svelte';
+    import Patient from './resource-templates/Patient.svelte';
+    import Problem from './resource-templates/Problem.svelte';
+    import Procedure from './resource-templates/Procedure.svelte';
+    import AllergyIntolerance from './resource-templates/AllergyIntolerance.svelte';
 
     export let newResources: Array<any> | undefined;
 
+    const components = {
+        "AdvanceDirective": AdvanceDirective,
+        "AllergyIntolerance": AllergyIntolerance,
+        "Immunization": Immunization,
+        "Medication": Medication,
+        "MedicationRequest": Medication,
+        "MedicationStatement": Medication,
+        "Observation": Observation,
+        "Patient": Patient,
+        "Problem": Problem,
+        "Procedure": Procedure,
+    };
+
     const ipsDispatch = createEventDispatcher<{ 'ips-retrieved': IPSRetrieveEvent }>();
     let resources:{ [key: string]: ResourceHelper } = {};
     let submitting = false;

diff --git a/src/lib/resource-templates/AdvanceDirective.svelte b/src/lib/resource-templates/AdvanceDirective.svelte
@@ -0,0 +1,34 @@
+<script>
+  import {
+    Card,
+    CardBody
+  } from 'sveltestrap';
+
+  export let resource; // Define a prop to pass the data to the component
+</script>
+
+  <Card>
+    <CardBody>
+      Type: {resource.resourceType}
+      <br/>
+      Text: 
+      {#if resource.text && resource.text.div}
+        {resource.text.div}
+      {:else}
+        <i>No text provided in resource</i>
+      {/if}
+      <br />
+      Category:
+      {#if resource.category && resource.category[0] && resource.category[0].coding && resource.category[0].coding[0]}
+        {resource.category[0].coding[0].display}
+      {/if}
+      <br/>
+      Intent:
+      {#if resource.provision && resource.provision.code && resource.provision.code[0] && resource.provision.code[0].coding && resource.provision.code[0].coding[0]}
+        {resource.provision.code[0].coding[0].display}
+      {/if}
+      {#if resource.description && resource.description.text}
+        {resource.description.text}
+      {/if}
+    </CardBody>
+  </Card>  
diff --git a/src/lib/resource-templates/AllergyIntolerance.svelte b/src/lib/resource-templates/AllergyIntolerance.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import {
+    Card,
+    CardBody
+  } from 'sveltestrap';
+  export let resource:any; // Define a prop to pass the data to the component
+
+  function badgeColor(criticality: string | undefined) {
+    if (criticality) {
+      if (criticality == "high") {
+        return "badge-danger";
+      } else {
+        return "badge-primary";
+      }
+    } else {
+      return "badge-secondary";
+    }
+  }
+</script>
+
+<Card>
+  <CardBody>
+    <span class={"badge " + badgeColor(resource.criticality ?? "")}>{resource.type ?? ""} - {resource.category && resource.category.length > 0 ? resource.criticality[0] : ""} - Criticality: {resource.criticality ?? ""}</span>
+    {#if resource.code && resource.code.coding}
+      <br>
+      {resource.code.coding[0].display} ({resource.code.coding[0].code})
+    {/if}
+  </CardBody>
+</Card>
diff --git a/src/lib/resource-templates/Immunization.svelte b/src/lib/resource-templates/Immunization.svelte
@@ -0,0 +1,25 @@
+<script>
+  import {
+    Card,
+    CardBody
+  } from 'sveltestrap';
+    export let resource; // Define a prop to pass the data to the component
+  </script>
+
+  <Card>
+    <CardBody>
+      <span><b>{resource.occurrenceDateTime}</b></span>
+      <br/>
+      <span>
+        {#if resource.vaccineCode.coding[0].display}
+          {resource.vaccineCode.coding[0].display}
+        {:else}
+          {resource.vaccineCode.text}
+        {/if}
+      </span>
+      <br/>
+      <span class="badge badge-primary">{resource.vaccineCode.coding[0].system}</span>{resource.vaccineCode.coding[0].code}
+      <br/>
+    </CardBody>
+  </Card>
+
diff --git a/src/lib/resource-templates/Medication.svelte b/src/lib/resource-templates/Medication.svelte
@@ -0,0 +1,80 @@
+<script>
+    import {
+    Card,
+    CardBody
+  } from 'sveltestrap';
+  export let resource; // Define a prop to pass the data to the component
+</script>
+
+<Card>
+  <CardBody>
+    <!-- {resource.statement.resourceType}  -->
+    <!-- <br /> -->
+    {#if resource.code && resource.code.coding && resource.code.coding.length}
+      {#each resource.code.coding as code}
+        <span class="badge badge-primary">{code.system}</span>
+        <br>
+        {code.display}
+        {#if code.code}
+          ({code.code})
+        {/if}
+        <br>
+      {/each}
+    {:else}
+      <span class="badge badge-secondary">uncoded</span>
+      <br>
+      {#if resource.code && resource.code.text}
+        {resource.code.text}
+      {:else}
+        {resource.statement.resourceReference.display}
+      {/if}
+      <br>
+    {/if}
+    {#if resource.ingredient && resource.ingredient.resourceCodeableConcept}
+      {#each resource.ingredient as ingredient}
+        <table class="table table-bordered table-sm">
+          <thead>
+            <tr><th colspan="5">Composition</th></tr>
+            <tr>
+              <th scope="col">Ingredient</th>
+              <th scope="col">Strength Numerator Qty</th>
+              <th scope="col">Unit</th>
+              <th scope="col">Strength Denominator Qty</th>
+              <th scope="col">Strength Denominator Unit</th>
+            </tr>
+          </thead>
+          <tr>
+            <td>{ingredient.resourceCodeableConcept.coding[0].display}</td>
+            <td>{ingredient.strength.numerator.value}</td>
+            <td>{ingredient.strength.numerator.unit}</td>
+            <td>{ingredient.strength.denominator.value}</td>
+            <td>{ingredient.strength.denominator.unit}</td>
+          </tr>
+        </table>
+      {/each}
+    {/if}
+    {#if resource.statement.dosage && resource.statement.dosage[0].route && resource.statement.dosage[0].route.coding && resource.statement.dosage[0].doseAndRate}
+      <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>{resource.statement.dosage[0].route.coding[0].display}</td>
+          <td>{resource.statement.dosage[0].doseAndRate[0].doseQuantity.value}</td>
+          <td>{resource.statement.dosage[0].doseAndRate[0].doseQuantity.unit}</td>
+          {#if resource.statement.dosage[0].timing && resource.statement.dosage[0].timing.repeat}
+            <td>{resource.statement.dosage[0].timing.repeat.count}</td>
+            <td>{resource.statement.dosage[0].timing.repeat.periodUnit}</td>
+          {/if}
+        </tr>
+      </table>
+    {/if}
+  </CardBody>
+</Card>
diff --git a/src/lib/resource-templates/Observation.svelte b/src/lib/resource-templates/Observation.svelte
@@ -0,0 +1,51 @@
+<script>
+  import {
+    Card,
+    CardBody,
+    Col,
+    Row
+  } from 'sveltestrap';
+  export let resource; // Define a prop to pass the data to the component
+  </script>
+
+  <Card>
+    <CardBody>
+      <Row>
+        <Col>
+          Name: 
+          {#if resource.code && resource.code.coding}
+            {resource.code.coding[0].display}
+            ({resource.code.coding[0].code})
+          {/if}
+          {#if resource.code && resource.code.text}
+            [Uncoded text shown]: {resource.code.text}
+          {/if}
+        </Col>
+        <Col>
+          Date: 
+          {#if resource.effectiveDateTime}
+            {resource.effectiveDateTime}
+          {/if}
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          Value: 
+          {#if resource.valueCodeableConcept}
+            {resource.valueCodeableConcept.coding[0].display}
+          {/if}
+          {#if resource.valueQuantity}
+            {resource.valueQuantity.value} {resource.valueQuantity.unit}
+          {/if}
+          {#if resource.valueString}
+            {resource.valueString}
+          {/if}
+        </Col>
+        {#if resource.category && resource.category[0] && resource.category[0].coding && resource.category[0].coding[0]}
+          <Col>Category: {resource.category[0].coding[0].code}</Col>
+        {/if}
+      </Row>
+    </CardBody>
+  </Card>
+
+
diff --git a/src/lib/resource-templates/Patient.svelte b/src/lib/resource-templates/Patient.svelte
@@ -0,0 +1,20 @@
+<script>
+    import {
+      Card,
+      CardBody,
+      CardText
+    } from "sveltestrap";
+
+    export let resource;
+  </script>
+
+  <Card>
+    <CardBody>
+      <CardText>
+        Name: {resource.name[0].given}, {resource.name[0].family}
+        <br>
+        Birth Date: {resource.birthDate}
+      </CardText>
+    </CardBody>
+  </Card>
+
diff --git a/src/lib/resource-templates/Problem.svelte b/src/lib/resource-templates/Problem.svelte
@@ -0,0 +1,24 @@
+<script>
+  import {
+  Card,
+  CardBody
+} from 'sveltestrap';
+  export let resource; // Define a prop to pass the data to the component
+</script>
+
+<Card>
+  <CardBody>
+    {#if resource.onsetDateTime}
+      <!-- Insert content here if onsetDateTime exists -->
+    {/if}
+    {#if resource.code && resource.code.coding && resource.code.coding[0]}
+      <span class="badge badge-primary">{resource.code.coding[0].system}</span>
+      <br>
+      {resource.code.coding[0].display} ({resource.code.coding[0].code})
+    {/if}
+    {#if resource.code && resource.code.text}
+      [Uncoded text shown]: {resource.code.text}
+    {/if}
+  </CardBody>
+</Card>
+