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
105 lines
3.1 KiB
Svelte
105 lines
3.1 KiB
Svelte
<script>
|
|
import Modal from '$lib/components/Modal.svelte';
|
|
import BasicInfoForm from '$lib/components/test-modal/BasicInfoForm.svelte';
|
|
import ReferenceRangeSection from '$lib/components/test-modal/ReferenceRangeSection.svelte';
|
|
|
|
/**
|
|
* @typedef {Object} Props
|
|
* @property {boolean} open - Whether modal is open
|
|
* @property {string} mode - 'create' or 'edit'
|
|
* @property {Object} formData - Form data object
|
|
* @property {boolean} canHaveRefRange - Whether test can have reference ranges
|
|
* @property {boolean} canHaveFormula - Whether test can have a formula
|
|
* @property {boolean} canHaveUnit - Whether test can have a unit
|
|
* @property {Array<{value: string, label: string}>} disciplineOptions - Discipline dropdown options
|
|
* @property {Array<{value: string, label: string}>} departmentOptions - Department dropdown options
|
|
* @property {boolean} [saving] - Whether save is in progress
|
|
*/
|
|
|
|
/** @type {Props & { onsave?: () => void, oncancel?: () => void, onupdateFormData?: (formData: Object) => void }} */
|
|
let {
|
|
open = $bindable(false),
|
|
mode = 'create',
|
|
formData = $bindable({}),
|
|
canHaveRefRange = false,
|
|
canHaveFormula = false,
|
|
canHaveUnit = false,
|
|
disciplineOptions = [],
|
|
departmentOptions = [],
|
|
saving = false,
|
|
onsave = () => {},
|
|
oncancel = () => {},
|
|
onupdateFormData = () => {}
|
|
} = $props();
|
|
|
|
// Local state
|
|
let activeTab = $state('basic');
|
|
|
|
function handleCancel() {
|
|
activeTab = 'basic';
|
|
oncancel();
|
|
}
|
|
|
|
function handleSave() {
|
|
onsave();
|
|
}
|
|
|
|
// Reactive update when modal opens
|
|
$effect(() => {
|
|
if (open) {
|
|
activeTab = 'basic';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<Modal bind:open title={mode === 'create' ? 'Add Test' : 'Edit Test'} size="xl">
|
|
<!-- Tabs -->
|
|
<div class="tabs tabs-bordered mb-4">
|
|
<button
|
|
type="button"
|
|
class="tab tab-lg {activeTab === 'basic' ? 'tab-active' : ''}"
|
|
onclick={() => activeTab = 'basic'}
|
|
>
|
|
Basic Information
|
|
</button>
|
|
{#if canHaveRefRange}
|
|
<button
|
|
type="button"
|
|
class="tab tab-lg {activeTab === 'refrange' ? 'tab-active' : ''}"
|
|
onclick={() => activeTab = 'refrange'}
|
|
>
|
|
Reference Range
|
|
{#if formData.refnum?.length > 0 || formData.reftxt?.length > 0}
|
|
<span class="badge badge-sm badge-primary ml-2">{(formData.refnum?.length || 0) + (formData.reftxt?.length || 0)}</span>
|
|
{/if}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if activeTab === 'basic'}
|
|
<BasicInfoForm
|
|
bind:formData
|
|
{canHaveFormula}
|
|
{canHaveUnit}
|
|
{disciplineOptions}
|
|
{departmentOptions}
|
|
onsave={handleSave}
|
|
/>
|
|
{:else if activeTab === 'refrange' && canHaveRefRange}
|
|
<ReferenceRangeSection
|
|
bind:formData
|
|
{onupdateFormData}
|
|
/>
|
|
{/if}
|
|
|
|
{#snippet footer()}
|
|
<button class="btn btn-ghost" onclick={handleCancel} type="button">Cancel</button>
|
|
<button class="btn btn-primary" onclick={handleSave} disabled={saving} type="button">
|
|
{#if saving}
|
|
<span class="loading loading-spinner loading-sm mr-2"></span>
|
|
{/if}
|
|
{saving ? 'Saving...' : 'Save'}
|
|
</button>
|
|
{/snippet}
|
|
</Modal>
|