mahdahar
f0f5889df4
- Create TestModal component with tabbed interface for test creation/editing - Add BasicInfoForm for test metadata (name, code, category, etc.) - Implement multiple reference range types: * NumericRefRange for numeric value ranges * TextRefRange for qualitative results * ThresholdRefRange for threshold-based results * ValueSetRefRange for predefined value sets - Add ReferenceRangeSection to manage all reference range types - Create config store for application configuration management - Add static config.json for environment settings - Update DataTable styling - Refactor tests page to integrate new TestModal - Add reference range utility functions - Include comprehensive test types documentation
104 lines
3.6 KiB
Svelte
104 lines
3.6 KiB
Svelte
<script>
|
|
import { PlusCircle, FileText, X } from 'lucide-svelte';
|
|
import { sexOptions } from './refRangeConstants.js';
|
|
|
|
/**
|
|
* @typedef {Object} Props
|
|
* @property {Array} reftxt - Text reference ranges array
|
|
* @property {(reftxt: Array) => void} onupdateReftxt - Update handler
|
|
*/
|
|
|
|
/** @type {Props} */
|
|
let {
|
|
reftxt = [],
|
|
onupdateReftxt = () => {}
|
|
} = $props();
|
|
|
|
function addRefRange() {
|
|
const newRef = {
|
|
Sex: '2',
|
|
AgeStart: 0,
|
|
AgeEnd: 120,
|
|
RefTxt: '',
|
|
Flag: 'N'
|
|
};
|
|
onupdateReftxt([...reftxt, newRef]);
|
|
}
|
|
|
|
function removeRefRange(index) {
|
|
onupdateReftxt(reftxt.filter((_, i) => i !== index));
|
|
}
|
|
</script>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-2">
|
|
<FileText class="w-5 h-5 text-primary" />
|
|
<h3 class="font-semibold">Text Reference Ranges</h3>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-primary" onclick={addRefRange}>
|
|
<PlusCircle class="w-4 h-4 mr-1" />
|
|
Add Range
|
|
</button>
|
|
</div>
|
|
|
|
{#if reftxt?.length === 0}
|
|
<div class="text-center py-8 bg-base-200 rounded-lg border-2 border-dashed border-base-300">
|
|
<FileText class="w-12 h-12 mx-auto text-gray-400 mb-2" />
|
|
<p class="text-gray-500">No text ranges defined</p>
|
|
<button type="button" class="btn btn-sm btn-outline mt-2" onclick={addRefRange}>
|
|
<PlusCircle class="w-4 h-4 mr-1" />
|
|
Add First Range
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
{#each reftxt || [] as ref, index (index)}
|
|
<div class="card bg-base-100 border-2 border-base-200 hover:border-primary/50 transition-colors">
|
|
<div class="card-body p-4">
|
|
<div class="flex justify-between items-center mb-4 pb-3 border-b border-base-200">
|
|
<span class="badge badge-primary badge-lg">Range {index + 1}</span>
|
|
<button type="button" class="btn btn-sm btn-ghost text-error" onclick={() => removeRefRange(index)}>
|
|
<X class="w-4 h-4" />
|
|
Remove
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
|
<div class="form-control">
|
|
<span class="label-text text-xs mb-1">Sex</span>
|
|
<select class="select select-sm select-bordered w-full" bind:value={ref.Sex}>
|
|
{#each sexOptions as option (option.value)}
|
|
<option value={option.value}>{option.label}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<span class="label-text text-xs mb-1">Age From</span>
|
|
<input type="number" min="0" max="120" class="input input-sm input-bordered w-full" bind:value={ref.AgeStart} placeholder="0" />
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<span class="label-text text-xs mb-1">Age To</span>
|
|
<input type="number" min="0" max="120" class="input input-sm input-bordered w-full" bind:value={ref.AgeEnd} placeholder="120" />
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<span class="label-text text-xs mb-1">Flag</span>
|
|
<select class="select select-sm select-bordered w-full" bind:value={ref.Flag}>
|
|
<option value="N">N - Normal</option>
|
|
<option value="A">A - Abnormal</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-control mt-3">
|
|
<span class="label-text text-xs mb-1">Reference Text</span>
|
|
<textarea class="textarea textarea-bordered w-full" rows="2" bind:value={ref.RefTxt} placeholder="e.g., Negative for glucose"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|