390 lines
11 KiB
Svelte
390 lines
11 KiB
Svelte
|
<script>
|
||
|
|
import { onMount } from 'svelte';
|
||
|
|
import { fetchTests, createTest, updateTest } from '$lib/api/tests.js';
|
||
|
|
import { fetchDisciplines, fetchDepartments } from '$lib/api/organization.js';
|
||
|
|
import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
|
||
|
|
import DataTable from '$lib/components/DataTable.svelte';
|
||
|
|
import Modal from '$lib/components/Modal.svelte';
|
||
|
|
import SelectDropdown from '$lib/components/SelectDropdown.svelte';
|
||
|
|
import { Plus, Edit2, ArrowLeft, Filter } from 'lucide-svelte';
|
||
|
|
|
||
|
|
let loading = $state(false);
|
||
|
|
let tests = $state([]);
|
||
|
|
let disciplines = $state([]);
|
||
|
|
let departments = $state([]);
|
||
|
|
let modalOpen = $state(false);
|
||
|
|
let modalMode = $state('create');
|
||
|
|
let saving = $state(false);
|
||
|
|
|
||
|
|
// Filter states
|
||
|
|
let selectedType = $state('');
|
||
|
|
let searchQuery = $state('');
|
||
|
|
|
||
|
|
let formData = $state({
|
||
|
|
TestSiteID: null,
|
||
|
|
TestSiteCode: '',
|
||
|
|
TestSiteName: '',
|
||
|
|
TestType: 'TEST',
|
||
|
|
DisciplineID: null,
|
||
|
|
DepartmentID: null,
|
||
|
|
SeqScr: '0',
|
||
|
|
SeqRpt: '0',
|
||
|
|
VisibleScr: '1',
|
||
|
|
VisibleRpt: '1'
|
||
|
|
});
|
||
|
|
|
||
|
|
const testTypeLabels = {
|
||
|
|
TEST: 'Test',
|
||
|
|
PARAM: 'Param',
|
||
|
|
CALC: 'Calc',
|
||
|
|
GROUP: 'Panel',
|
||
|
|
TITLE: 'Title'
|
||
|
|
};
|
||
|
|
|
||
|
|
const testTypeBadges = {
|
||
|
|
TEST: 'badge-primary',
|
||
|
|
PARAM: 'badge-secondary',
|
||
|
|
CALC: 'badge-accent',
|
||
|
|
GROUP: 'badge-info',
|
||
|
|
TITLE: 'badge-ghost'
|
||
|
|
};
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{ key: 'TestSiteCode', label: 'Code', class: 'font-medium' },
|
||
|
|
{ key: 'TestSiteName', label: 'Name' },
|
||
|
|
{ key: 'TestType', label: 'Type', class: 'w-32' },
|
||
|
|
{ key: 'DisciplineName', label: 'Discipline' },
|
||
|
|
{ key: 'DepartmentName', label: 'Department' },
|
||
|
|
{ key: 'SeqScr', label: 'Seq', class: 'w-16 text-center' },
|
||
|
|
{ key: 'actions', label: 'Actions', class: 'w-24 text-center' },
|
||
|
|
];
|
||
|
|
|
||
|
|
onMount(async () => {
|
||
|
|
await Promise.all([
|
||
|
|
loadTests(),
|
||
|
|
loadDisciplines(),
|
||
|
|
loadDepartments()
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
|
||
|
|
async function loadTests() {
|
||
|
|
loading = true;
|
||
|
|
try {
|
||
|
|
const params = {};
|
||
|
|
if (selectedType) params.TestType = selectedType;
|
||
|
|
if (searchQuery) params.TestSiteName = searchQuery;
|
||
|
|
|
||
|
|
const response = await fetchTests(params);
|
||
|
|
tests = Array.isArray(response.data) ? response.data : [];
|
||
|
|
} catch (err) {
|
||
|
|
toastError(err.message || 'Failed to load tests');
|
||
|
|
tests = [];
|
||
|
|
} finally {
|
||
|
|
loading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadDisciplines() {
|
||
|
|
try {
|
||
|
|
const response = await fetchDisciplines();
|
||
|
|
disciplines = Array.isArray(response.data) ? response.data : [];
|
||
|
|
} catch (err) {
|
||
|
|
disciplines = [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadDepartments() {
|
||
|
|
try {
|
||
|
|
const response = await fetchDepartments();
|
||
|
|
departments = Array.isArray(response.data) ? response.data : [];
|
||
|
|
} catch (err) {
|
||
|
|
departments = [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function openCreateModal() {
|
||
|
|
modalMode = 'create';
|
||
|
|
formData = {
|
||
|
|
TestSiteID: null,
|
||
|
|
TestSiteCode: '',
|
||
|
|
TestSiteName: '',
|
||
|
|
TestType: 'TEST',
|
||
|
|
DisciplineID: null,
|
||
|
|
DepartmentID: null,
|
||
|
|
SeqScr: '0',
|
||
|
|
SeqRpt: '0',
|
||
|
|
VisibleScr: '1',
|
||
|
|
VisibleRpt: '1'
|
||
|
|
};
|
||
|
|
modalOpen = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function openEditModal(row) {
|
||
|
|
modalMode = 'edit';
|
||
|
|
formData = {
|
||
|
|
TestSiteID: row.TestSiteID,
|
||
|
|
TestSiteCode: row.TestSiteCode,
|
||
|
|
TestSiteName: row.TestSiteName,
|
||
|
|
TestType: row.TestType,
|
||
|
|
DisciplineID: row.DisciplineID,
|
||
|
|
DepartmentID: row.DepartmentID,
|
||
|
|
SeqScr: row.SeqScr || '0',
|
||
|
|
SeqRpt: row.SeqRpt || '0',
|
||
|
|
VisibleScr: row.VisibleScr || '1',
|
||
|
|
VisibleRpt: row.VisibleRpt || '1'
|
||
|
|
};
|
||
|
|
modalOpen = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleSave() {
|
||
|
|
saving = true;
|
||
|
|
try {
|
||
|
|
if (modalMode === 'create') {
|
||
|
|
await createTest(formData);
|
||
|
|
toastSuccess('Test created successfully');
|
||
|
|
} else {
|
||
|
|
await updateTest(formData);
|
||
|
|
toastSuccess('Test updated successfully');
|
||
|
|
}
|
||
|
|
modalOpen = false;
|
||
|
|
await loadTests();
|
||
|
|
} catch (err) {
|
||
|
|
toastError(err.message || 'Failed to save test');
|
||
|
|
} finally {
|
||
|
|
saving = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleFilter() {
|
||
|
|
loadTests();
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleSearchKeydown(event) {
|
||
|
|
if (event.key === 'Enter') {
|
||
|
|
loadTests();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const disciplineOptions = $derived(
|
||
|
|
disciplines.map(d => ({ value: d.DisciplineID, label: d.DisciplineName }))
|
||
|
|
);
|
||
|
|
|
||
|
|
const departmentOptions = $derived(
|
||
|
|
departments.map(d => ({ value: d.DepartmentID, label: d.DepartmentName }))
|
||
|
|
);
|
||
|
|
|
||
|
|
const filteredDepartments = $derived(
|
||
|
|
formData.DisciplineID
|
||
|
|
? departments.filter(d => d.DisciplineID === formData.DisciplineID)
|
||
|
|
: departments
|
||
|
|
);
|
||
|
|
|
||
|
|
const filteredDepartmentOptions = $derived(
|
||
|
|
filteredDepartments.map(d => ({ value: d.DepartmentID, label: d.DepartmentName }))
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="p-6">
|
||
|
|
<div class="flex items-center gap-4 mb-6">
|
||
|
|
<a href="/master-data" class="btn btn-ghost btn-circle">
|
||
|
|
<ArrowLeft class="w-5 h-5" />
|
||
|
|
</a>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h1 class="text-3xl font-bold text-gray-800">Test Definitions</h1>
|
||
|
|
<p class="text-gray-600">Manage laboratory tests and panels</p>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-primary" onclick={openCreateModal}>
|
||
|
|
<Plus class="w-4 h-4 mr-2" />
|
||
|
|
Add Test
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Filters -->
|
||
|
|
<div class="bg-base-100 rounded-lg shadow border border-base-200 p-4 mb-4">
|
||
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
||
|
|
<div class="flex-1">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Search by code or name..."
|
||
|
|
class="input input-bordered w-full"
|
||
|
|
bind:value={searchQuery}
|
||
|
|
onkeydown={handleSearchKeydown}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="w-full sm:w-48">
|
||
|
|
<select
|
||
|
|
class="select select-bordered w-full"
|
||
|
|
bind:value={selectedType}
|
||
|
|
onchange={handleFilter}
|
||
|
|
>
|
||
|
|
<option value="">All Types</option>
|
||
|
|
<option value="TEST">Technical Test</option>
|
||
|
|
<option value="PARAM">Parameter</option>
|
||
|
|
<option value="CALC">Calculated</option>
|
||
|
|
<option value="GROUP">Panel/Profile</option>
|
||
|
|
<option value="TITLE">Section Header</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-outline" onclick={handleFilter}>
|
||
|
|
<Filter class="w-4 h-4 mr-2" />
|
||
|
|
Filter
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bg-base-100 rounded-lg shadow border border-base-200">
|
||
|
|
<DataTable
|
||
|
|
{columns}
|
||
|
|
data={tests.map(t => ({
|
||
|
|
...t,
|
||
|
|
DisciplineName: disciplines.find(d => d.DisciplineID === t.DisciplineID)?.DisciplineName || '-',
|
||
|
|
DepartmentName: departments.find(d => d.DepartmentID === t.DepartmentID)?.DepartmentName || '-'
|
||
|
|
}))}
|
||
|
|
{loading}
|
||
|
|
emptyMessage="No tests found"
|
||
|
|
hover={true}
|
||
|
|
bordered={false}
|
||
|
|
>
|
||
|
|
{#snippet cell({ column, row, value })}
|
||
|
|
{#if column.key === 'TestType'}
|
||
|
|
<span class="badge {testTypeBadges[value] || 'badge-ghost'}">
|
||
|
|
{testTypeLabels[value] || value}
|
||
|
|
</span>
|
||
|
|
{:else if column.key === 'actions'}
|
||
|
|
<div class="flex justify-center gap-2">
|
||
|
|
<button class="btn btn-sm btn-ghost" onclick={() => openEditModal(row)}>
|
||
|
|
<Edit2 class="w-4 h-4" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{:else}
|
||
|
|
{value || '-'}
|
||
|
|
{/if}
|
||
|
|
{/snippet}
|
||
|
|
</DataTable>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Modal bind:open={modalOpen} title={modalMode === 'create' ? 'Add Test' : 'Edit Test'} size="lg">
|
||
|
|
<form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSave(); }}>
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
<div class="form-control">
|
||
|
|
<label class="label" for="testCode">
|
||
|
|
<span class="label-text font-medium">Test Code</span>
|
||
|
|
<span class="label-text-alt text-error">*</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="testCode"
|
||
|
|
type="text"
|
||
|
|
class="input input-bordered w-full"
|
||
|
|
bind:value={formData.TestSiteCode}
|
||
|
|
placeholder="e.g., GLU"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="form-control">
|
||
|
|
<label class="label" for="testName">
|
||
|
|
<span class="label-text font-medium">Test Name</span>
|
||
|
|
<span class="label-text-alt text-error">*</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="testName"
|
||
|
|
type="text"
|
||
|
|
class="input input-bordered w-full"
|
||
|
|
bind:value={formData.TestSiteName}
|
||
|
|
placeholder="e.g., Glucose"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
<div class="form-control">
|
||
|
|
<label class="label" for="testType">
|
||
|
|
<span class="label-text font-medium">Test Type</span>
|
||
|
|
<span class="label-text-alt text-error">*</span>
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
id="testType"
|
||
|
|
class="select select-bordered w-full"
|
||
|
|
bind:value={formData.TestType}
|
||
|
|
required
|
||
|
|
>
|
||
|
|
<option value="TEST">Technical Test</option>
|
||
|
|
<option value="PARAM">Parameter</option>
|
||
|
|
<option value="CALC">Calculated</option>
|
||
|
|
<option value="GROUP">Panel/Profile</option>
|
||
|
|
<option value="TITLE">Section Header</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-control">
|
||
|
|
<label class="label" for="seqScr">
|
||
|
|
<span class="label-text font-medium">Screen Sequence</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="seqScr"
|
||
|
|
type="number"
|
||
|
|
class="input input-bordered w-full"
|
||
|
|
bind:value={formData.SeqScr}
|
||
|
|
placeholder="0"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
<SelectDropdown
|
||
|
|
label="Discipline"
|
||
|
|
name="discipline"
|
||
|
|
bind:value={formData.DisciplineID}
|
||
|
|
options={disciplineOptions}
|
||
|
|
placeholder="Select discipline..."
|
||
|
|
/>
|
||
|
|
<SelectDropdown
|
||
|
|
label="Department"
|
||
|
|
name="department"
|
||
|
|
bind:value={formData.DepartmentID}
|
||
|
|
options={filteredDepartmentOptions}
|
||
|
|
placeholder="Select department..."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
<div class="form-control">
|
||
|
|
<label class="label" for="seqRpt">
|
||
|
|
<span class="label-text font-medium">Report Sequence</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="seqRpt"
|
||
|
|
type="number"
|
||
|
|
class="input input-bordered w-full"
|
||
|
|
bind:value={formData.SeqRpt}
|
||
|
|
placeholder="0"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="form-control">
|
||
|
|
<label class="label">
|
||
|
|
<span class="label-text font-medium">Visibility</span>
|
||
|
|
</label>
|
||
|
|
<div class="flex gap-4 mt-2">
|
||
|
|
<label class="label cursor-pointer gap-2">
|
||
|
|
<input type="checkbox" class="checkbox" bind:checked={formData.VisibleScr} value="1" />
|
||
|
|
<span class="label-text">Screen</span>
|
||
|
|
</label>
|
||
|
|
<label class="label cursor-pointer gap-2">
|
||
|
|
<input type="checkbox" class="checkbox" bind:checked={formData.VisibleRpt} value="1" />
|
||
|
|
<span class="label-text">Report</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
{#snippet footer()}
|
||
|
|
<button class="btn btn-ghost" onclick={() => (modalOpen = false)} 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>
|