Add CodeSystem $lookup operation to Frontend UI

modules/frontend/src/lib/fhir.ts

@@ -43,6 +43,25 @@ export function parameter(concept: Parameters, name: string): ParametersParamete
   return concept.parameter?.filter((c) => c.name == name)[0];
 }
 
+export function parameterParts(
+  concept: Parameters,
+  name: string
+): ParametersParameter[] | undefined {
+  return concept.parameter?.filter((c) => c.name == name);
+}
+
+export function parameterValue(
+  parameter: ParametersParameter
+): Coding | string | number | boolean | undefined {
+  if ('valueCode' in parameter) return parameter.valueCode;
+  if ('valueCoding' in parameter) return parameter.valueCoding;
+  if ('valueString' in parameter) return parameter.valueString;
+  if ('valueInteger' in parameter) return parameter.valueInteger;
+  if ('valueBoolean' in parameter) return parameter.valueBoolean;
+  if ('valueDateTime' in parameter) return parameter.valueDateTime;
+  if ('valueDecimal' in parameter) return parameter.valueDecimal;
+}
+
 export type HttpMethod = 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
 
 export type SearchMode = 'match' | 'include' | 'outcome';

modules/frontend/src/routes/CodeSystem/$lookup/+page.server.ts

@@ -0,0 +1,78 @@
+import type { Actions } from './$types';
+import type { OperationOutcome, Parameters, ParametersParameter } from 'fhir/r4';
+import { resolve } from '$app/paths';
+import { fail } from '@sveltejs/kit';
+
+export const actions = {
+  default: async ({ request, fetch }) => {
+    const data = await request.formData();
+    const system = data.get('system') as string;
+    const version = data.get('version') as string;
+    const code = data.get('code') as string;
+    const display = data.get('display') as string;
+    const displayLanguage = data.get('displayLanguage') as string;
+
+    const parameters: ParametersParameter[] = [
+      {
+        name: 'system',
+        valueUri: system
+      },
+      {
+        name: 'code',
+        valueCode: code
+      }
+    ];
+
+    if (version !== '') {
+      parameters.push({
+        name: 'version',
+        valueString: version
+      });
+    }
+
+    if (display !== '') {
+      parameters.push({
+        name: 'display',
+        valueString: display
+      });
+    }
+
+    if (displayLanguage !== '') {
+      parameters.push({
+        name: 'displayLanguage',
+        valueCode: displayLanguage
+      });
+    }
+
+    const res = await fetch(resolve('/CodeSystem/$lookup'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/fhir+json', Accept: 'application/fhir+json' },
+      body: JSON.stringify({
+        resourceType: 'Parameters',
+        parameter: parameters
+      })
+    });
+
+    if (!res.ok) {
+      const error: OperationOutcome = await res.json();
+      return fail(400, {
+        system,
+        version,
+        code,
+        display,
+        displayLanguage,
+        incorrect: true,
+        msg: error.issue[0]?.diagnostics ?? error.issue[0]?.details?.text
+      });
+    }
+
+    return {
+      system,
+      version,
+      code,
+      display,
+      displayLanguage,
+      result: (await res.json()) as Parameters
+    };
+  }
+} satisfies Actions;

modules/frontend/src/routes/CodeSystem/$lookup/+page.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { PageProps } from './$types';
+
+  import Breadcrumb from '$lib/breadcrumb.svelte';
+  import BreadcrumbEntryHome from '$lib/breadcrumb/home.svelte';
+  import BreadcrumbEntryType from '$lib/breadcrumb/type.svelte';
+  import BreadcrumbEntry from '$lib/breadcrumb/entry.svelte';
+  import Form from '$lib/tailwind/form.svelte';
+  import Section from '$lib/tailwind/form/section.svelte';
+  import TextField from '$lib/tailwind/form/text-field.svelte';
+  import SubmitButton from '$lib/tailwind/form/button-submit.svelte';
+  import ResultList from './result-list.svelte';
+
+  let { form }: PageProps = $props();
+</script>
+
+<svelte:head>
+  <title>$lookup - CodeSystem - Blaze</title>
+</svelte:head>
+
+<header class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+  <Breadcrumb>
+    <BreadcrumbEntryHome />
+    <BreadcrumbEntryType type="CodeSystem" />
+    <BreadcrumbEntry>
+      <span class="ml-4 text-sm font-medium text-gray-500 dark:text-gray-400">$lookup</span>
+    </BreadcrumbEntry>
+  </Breadcrumb>
+</header>
+
+<main class="mx-auto max-w-7xl py-4 sm:px-6 lg:px-8 flex flex-col gap-4">
+  <Form class="mt-4">
+    <Section name="Parameters">
+      <TextField id="system" label="System" value={form?.system} />
+      <TextField id="version" label="Version" value={form?.version} />
+      <TextField id="code" label="Code" value={form?.code} />
+      <TextField id="display" label="Display" value={form?.display} />
+      <TextField id="displayLanguage" label="Display Language" value={form?.displayLanguage} />
+    </Section>
+    {#snippet buttons()}
+      <SubmitButton name="Submit" />
+    {/snippet}
+  </Form>
+
+  {#if form?.incorrect}
+    <p class="text-red-600 dark:text-red-400">{form.msg}</p>
+  {/if}
+
+  {#if form?.result}
+    <ResultList parameters={form?.result} />
+  {/if}
+</main>

modules/frontend/src/routes/CodeSystem/$lookup/result-list.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Parameters } from 'fhir/r4';
+
+  import { parameter, parameterParts, parameterValue } from '$lib/fhir';
+  import DescriptionList from '$lib/tailwind/description/left-aligned/list.svelte';
+  import Row from '$lib/tailwind/description/left-aligned/row-3-2.svelte';
+
+  interface Props {
+    parameters: Parameters;
+  }
+
+  let { parameters }: Props = $props();
+</script>
+
+<DescriptionList>
+  <Row title="Name">
+    {parameter(parameters, 'name')?.valueString}
+  </Row>
+  {@const version = parameter(parameters, 'version')?.valueString}
+  {#if version}
+    <Row title="Version">
+      {version}
+    </Row>
+  {/if}
+  {@const display = parameter(parameters, 'display')?.valueString}
+  {#if display}
+    <Row title="Display">
+      {display}
+    </Row>
+  {/if}
+  {@const definition = parameter(parameters, 'definition')?.valueString}
+  {#if definition}
+    <Row title="Definition">
+      {definition}
+    </Row>
+  {/if}
+  {@const properties = parameterParts(parameters, 'property')}
+  {#if properties}
+    {#each properties as property, i}
+      <Row title={'Property[' + i + ']'}>
+        <DescriptionList>
+          {#each property.part as part}
+            <Row title={part.name}>{parameterValue(part)}</Row>
+          {/each}
+        </DescriptionList>
+      </Row>
+    {/each}
+  {/if}
+  {@const designations = parameterParts(parameters, 'designation')}
+  {#if designations}
+    {#each designations as designation, i}
+      <Row title={'Designation[' + i + ']'}>
+        <DescriptionList>
+          {#each designation.part as part}
+            <Row title={part.name}>{parameterValue(part)}</Row>
+          {/each}
+        </DescriptionList>
+      </Row>
+    {/each}
+  {/if}
+</DescriptionList>

modules/frontend/src/routes/CodeSystem/$validate-code/+page.svelte

@@ -9,7 +9,7 @@
   import Section from '$lib/tailwind/form/section.svelte';
   import TextField from '$lib/tailwind/form/text-field.svelte';
   import SubmitButton from '$lib/tailwind/form/button-submit.svelte';
-  import ResultList from '../result-list.svelte';
+  import ResultList from './result-list.svelte';
 
   let { form }: PageProps = $props();
 </script>

modules/frontend/src/routes/CodeSystem/[id=id]/$lookup/+page.server.ts

@@ -0,0 +1,56 @@
+import type { Actions } from './$types';
+import type { OperationOutcome, Parameters, ParametersParameter } from 'fhir/r4';
+import { resolve } from '$app/paths';
+import { fail } from '@sveltejs/kit';
+
+export const actions = {
+  default: async ({ request, fetch, params }) => {
+    const data = await request.formData();
+    const code = data.get('code') as string;
+    const display = data.get('display') as string;
+    const displayLanguage = data.get('displayLanguage') as string;
+
+    const parameters: ParametersParameter[] = [
+      {
+        name: 'code',
+        valueCode: code
+      }
+    ];
+
+    if (display !== '') {
+      parameters.push({
+        name: 'display',
+        valueString: display
+      });
+    }
+
+    if (displayLanguage !== '') {
+      parameters.push({
+        name: 'displayLanguage',
+        valueCode: displayLanguage
+      });
+    }
+
+    const res = await fetch(resolve('/CodeSystem/[id=id]/$lookup', params), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/fhir+json', Accept: 'application/fhir+json' },
+      body: JSON.stringify({
+        resourceType: 'Parameters',
+        parameter: parameters
+      })
+    });
+
+    if (!res.ok) {
+      const error: OperationOutcome = await res.json();
+      return fail(400, {
+        code,
+        display,
+        displayLanguage,
+        incorrect: true,
+        msg: error.issue[0]?.diagnostics ?? error.issue[0]?.details?.text
+      });
+    }
+
+    return { code, display, displayLanguage, result: (await res.json()) as Parameters };
+  }
+} satisfies Actions;

modules/frontend/src/routes/CodeSystem/[id=id]/$lookup/+page.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { PageProps } from './$types';
+
+  import Breadcrumb from '$lib/breadcrumb.svelte';
+  import BreadcrumbEntryHome from '$lib/breadcrumb/home.svelte';
+  import BreadcrumbEntryType from '$lib/breadcrumb/type.svelte';
+  import BreadcrumbEntryResource from '$lib/breadcrumb/resource.svelte';
+  import BreadcrumbEntry from '$lib/breadcrumb/entry.svelte';
+  import Form from '$lib/tailwind/form.svelte';
+  import Section from '$lib/tailwind/form/section.svelte';
+  import TextField from '$lib/tailwind/form/text-field.svelte';
+  import SubmitButton from '$lib/tailwind/form/button-submit.svelte';
+  import ResultList from '../../$lookup/result-list.svelte';
+
+  import { title } from '$lib/resource.js';
+
+  let { data, form, params }: PageProps = $props();
+</script>
+
+<svelte:head>
+  <title>$lookup - {title(data.codeSystem)} - Blaze</title>
+</svelte:head>
+
+<header class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+  <Breadcrumb>
+    <BreadcrumbEntryHome />
+    <BreadcrumbEntryType type="CodeSystem" />
+    <BreadcrumbEntryResource type="CodeSystem" {...params} resource={data.codeSystem} />
+    <BreadcrumbEntry>
+      <span class="ml-4 text-sm font-medium text-gray-500 dark:text-gray-400">$lookup</span>
+    </BreadcrumbEntry>
+  </Breadcrumb>
+</header>
+
+<main class="mx-auto max-w-7xl py-4 sm:px-6 lg:px-8 flex flex-col gap-4">
+  <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-100">
+    {title(data.codeSystem)}
+  </h2>
+  {#if data.codeSystem.description}
+    <p class="mt-1 max-w-2xl text-sm/6 text-gray-600">{data.codeSystem.description}</p>
+  {/if}
+
+  <Form class="mt-4">
+    <Section name="Parameters">
+      <TextField id="code" label="Code" value={form?.code} />
+      <TextField id="display" label="Display" value={form?.display} />
+      <TextField id="displayLanguage" label="Display Language" value={form?.displayLanguage} />
+    </Section>
+    {#snippet buttons()}
+      <SubmitButton name="Submit" />
+    {/snippet}
+  </Form>
+
+  {#if form?.incorrect}
+    <p class="text-red-600 dark:text-red-400">{form.msg}</p>
+  {/if}
+
+  {#if form?.result}
+    <ResultList parameters={form?.result} />
+  {/if}
+</main>

modules/frontend/src/routes/CodeSystem/[id=id]/$lookup/+page.ts

@@ -0,0 +1,34 @@
+import type { PageLoad } from './$types';
+import type { Bundle, CodeSystem } from 'fhir/r4';
+
+import { resolve } from '$app/paths';
+import { error, type NumericRange } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ fetch, params }) => {
+  const res = await fetch(
+    `${resolve('/CodeSystem')}?_id=${params.id}&_elements=version,title,description`,
+    {
+      headers: {
+        Accept: 'application/fhir+json'
+      }
+    }
+  );
+
+  if (!res.ok) {
+    error(res.status as NumericRange<400, 599>, {
+      short: res.status == 404 ? 'Not Found' : res.status == 410 ? 'Gone' : undefined,
+      message:
+        res.status == 404
+          ? `The CodeSystem with ID ${params.id} was not found.`
+          : res.status == 410
+            ? `The CodeSystem with ID ${params.id} was deleted. Please look into the history.`
+            : `An error happened while loading the CodeSystem with ID ${params.id}. Please try again later.`
+    });
+  }
+
+  const bundle: Bundle = await res.json();
+
+  return {
+    codeSystem: bundle.entry?.[0].resource as CodeSystem
+  };
+};

modules/frontend/src/routes/CodeSystem/[id=id]/$validate-code/+page.svelte

@@ -10,7 +10,7 @@
   import Section from '$lib/tailwind/form/section.svelte';
   import TextField from '$lib/tailwind/form/text-field.svelte';
   import SubmitButton from '$lib/tailwind/form/button-submit.svelte';
-  import ResultList from '../../result-list.svelte';
+  import ResultList from '../../$validate-code/result-list.svelte';
 
   import { title } from '$lib/resource.js';
 

modules/frontend/src/routes/CodeSystem/operation-dropdown.svelte

@@ -6,5 +6,6 @@
 </script>
 
 <Dropdown name="Operations">
+  <DropdownItem name="$lookup" url={resolve('/CodeSystem/$lookup')} />
   <DropdownItem name="$validate-code" url={resolve('/CodeSystem/$validate-code')} />
 </Dropdown>