feat(organization): add CRUD operations for disciplines and departments
This commit is contained in:
parent
52d4fc7322
commit
3b8a935b46
@ -10,6 +10,29 @@ export async function fetchDiscipline(id) {
|
||||
return get(`/api/organization/discipline/${id}`);
|
||||
}
|
||||
|
||||
export async function createDiscipline(data) {
|
||||
const payload = {
|
||||
DisciplineCode: data.DisciplineCode,
|
||||
DisciplineName: data.DisciplineName,
|
||||
Parent: data.Parent || null,
|
||||
};
|
||||
return post('/api/organization/discipline', payload);
|
||||
}
|
||||
|
||||
export async function updateDiscipline(data) {
|
||||
const payload = {
|
||||
id: data.DisciplineID,
|
||||
DisciplineCode: data.DisciplineCode,
|
||||
DisciplineName: data.DisciplineName,
|
||||
Parent: data.Parent || null,
|
||||
};
|
||||
return patch('/api/organization/discipline', payload);
|
||||
}
|
||||
|
||||
export async function deleteDiscipline(id) {
|
||||
return del('/api/organization/discipline', { id });
|
||||
}
|
||||
|
||||
// Departments
|
||||
export async function fetchDepartments(params = {}) {
|
||||
const query = new URLSearchParams(params).toString();
|
||||
@ -19,3 +42,26 @@ export async function fetchDepartments(params = {}) {
|
||||
export async function fetchDepartment(id) {
|
||||
return get(`/api/organization/department/${id}`);
|
||||
}
|
||||
|
||||
export async function createDepartment(data) {
|
||||
const payload = {
|
||||
DepartmentCode: data.DepartmentCode,
|
||||
DepartmentName: data.DepartmentName,
|
||||
DisciplineID: data.DisciplineID,
|
||||
};
|
||||
return post('/api/organization/department', payload);
|
||||
}
|
||||
|
||||
export async function updateDepartment(data) {
|
||||
const payload = {
|
||||
id: data.DepartmentID,
|
||||
DepartmentCode: data.DepartmentCode,
|
||||
DepartmentName: data.DepartmentName,
|
||||
DisciplineID: data.DisciplineID,
|
||||
};
|
||||
return patch('/api/organization/department', payload);
|
||||
}
|
||||
|
||||
export async function deleteDepartment(id) {
|
||||
return del('/api/organization/department', { id });
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Database,
|
||||
FileText,
|
||||
Printer,
|
||||
Users,
|
||||
ClipboardList,
|
||||
@ -18,7 +17,10 @@
|
||||
Hash,
|
||||
Globe,
|
||||
ChevronDown,
|
||||
TestTube
|
||||
TestTube,
|
||||
ShieldCheck,
|
||||
FileText,
|
||||
X
|
||||
} from 'lucide-svelte';
|
||||
import { auth } from '$lib/stores/auth.js';
|
||||
import { goto } from '$app/navigation';
|
||||
@ -27,8 +29,9 @@
|
||||
let { isOpen = $bindable(false) } = $props();
|
||||
|
||||
// Collapsible section states - default collapsed
|
||||
let masterDataExpanded = $state(false);
|
||||
let laboratoryExpanded = $state(false);
|
||||
let qualityControlExpanded = $state(false);
|
||||
let masterDataExpanded = $state(false);
|
||||
let administrationExpanded = $state(false);
|
||||
|
||||
// Load states from localStorage on mount
|
||||
@ -38,8 +41,9 @@
|
||||
if (savedStates) {
|
||||
try {
|
||||
const parsed = JSON.parse(savedStates);
|
||||
masterDataExpanded = parsed.masterData ?? false;
|
||||
laboratoryExpanded = parsed.laboratory ?? false;
|
||||
qualityControlExpanded = parsed.qualityControl ?? false;
|
||||
masterDataExpanded = parsed.masterData ?? false;
|
||||
administrationExpanded = parsed.administration ?? false;
|
||||
} catch (e) {
|
||||
// Keep defaults if parsing fails
|
||||
@ -52,8 +56,9 @@
|
||||
$effect(() => {
|
||||
if (browser) {
|
||||
localStorage.setItem('sidebar_section_states', JSON.stringify({
|
||||
masterData: masterDataExpanded,
|
||||
laboratory: laboratoryExpanded,
|
||||
qualityControl: qualityControlExpanded,
|
||||
masterData: masterDataExpanded,
|
||||
administration: administrationExpanded
|
||||
}));
|
||||
}
|
||||
@ -62,8 +67,9 @@
|
||||
// Close all sections when sidebar collapses
|
||||
$effect(() => {
|
||||
if (!isOpen) {
|
||||
masterDataExpanded = false;
|
||||
laboratoryExpanded = false;
|
||||
qualityControlExpanded = false;
|
||||
masterDataExpanded = false;
|
||||
administrationExpanded = false;
|
||||
}
|
||||
});
|
||||
@ -73,18 +79,16 @@
|
||||
isOpen = true;
|
||||
}
|
||||
|
||||
// Function to close sidebar (for mobile)
|
||||
function closeSidebar() {
|
||||
isOpen = false;
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
auth.logout();
|
||||
goto('/login');
|
||||
}
|
||||
|
||||
function toggleMasterData() {
|
||||
if (!isOpen) {
|
||||
expandSidebar();
|
||||
}
|
||||
masterDataExpanded = !masterDataExpanded;
|
||||
}
|
||||
|
||||
function toggleLaboratory() {
|
||||
if (!isOpen) {
|
||||
expandSidebar();
|
||||
@ -92,6 +96,20 @@
|
||||
laboratoryExpanded = !laboratoryExpanded;
|
||||
}
|
||||
|
||||
function toggleQualityControl() {
|
||||
if (!isOpen) {
|
||||
expandSidebar();
|
||||
}
|
||||
qualityControlExpanded = !qualityControlExpanded;
|
||||
}
|
||||
|
||||
function toggleMasterData() {
|
||||
if (!isOpen) {
|
||||
expandSidebar();
|
||||
}
|
||||
masterDataExpanded = !masterDataExpanded;
|
||||
}
|
||||
|
||||
function toggleAdministration() {
|
||||
if (!isOpen) {
|
||||
expandSidebar();
|
||||
@ -100,18 +118,40 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Mobile Overlay Backdrop -->
|
||||
{#if isOpen}
|
||||
<div
|
||||
class="sidebar-backdrop lg:hidden"
|
||||
onclick={closeSidebar}
|
||||
role="button"
|
||||
aria-label="Close sidebar"
|
||||
></div>
|
||||
{/if}
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
class="sidebar-container fixed lg:sticky left-0 top-0 h-screen max-h-screen z-40 bg-base-200 border-r border-base-300 transition-all duration-300 ease-out"
|
||||
class:sidebar-expanded={isOpen}
|
||||
class:sidebar-collapsed={!isOpen}
|
||||
class:sidebar-hidden-mobile={!isOpen}
|
||||
>
|
||||
<div class="h-screen overflow-y-auto flex flex-col sidebar-content" class:expanded={isOpen} class:collapsed={!isOpen}>
|
||||
<!-- Mobile Close Button -->
|
||||
<div class="lg:hidden flex justify-end p-2">
|
||||
<button
|
||||
onclick={closeSidebar}
|
||||
class="btn btn-sm btn-ghost btn-square"
|
||||
aria-label="Close sidebar"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- Navigation Menu -->
|
||||
<ul class="menu w-full gap-1" class:menu-collapsed={!isOpen}>
|
||||
{#if isOpen}
|
||||
<li class="menu-title uppercase font-bold text-xs text-secondary/70 mt-2">Main</li>
|
||||
<li class="menu-title uppercase font-bold text-xs text-secondary/70 mt-2">Operations</li>
|
||||
{/if}
|
||||
|
||||
<!-- Dashboard -->
|
||||
@ -129,66 +169,6 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Master Data -->
|
||||
<li class="nav-group" class:collapsed={!isOpen}>
|
||||
<button
|
||||
onclick={toggleMasterData}
|
||||
class="nav-link"
|
||||
class:centered={!isOpen}
|
||||
title={!isOpen ? 'Master Data' : ''}
|
||||
>
|
||||
<Database size={20} class="text-secondary flex-shrink-0" />
|
||||
{#if isOpen}
|
||||
<span class="nav-text">Master Data</span>
|
||||
<ChevronDown size={16} class="chevron {masterDataExpanded ? 'expanded' : ''}" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if isOpen && masterDataExpanded}
|
||||
<ul class="submenu">
|
||||
<li><a href="/master-data/containers" class="submenu-link"><FlaskConical size={16} /> Containers</a></li>
|
||||
<li><a href="/master-data/tests" class="submenu-link"><TestTube size={16} /> Test Definitions</a></li>
|
||||
<li><a href="/master-data/valuesets" class="submenu-link"><List size={16} /> ValueSets</a></li>
|
||||
<li><a href="/master-data/locations" class="submenu-link"><MapPin size={16} /> Locations</a></li>
|
||||
<li><a href="/master-data/contacts" class="submenu-link"><Users size={16} /> Contacts</a></li>
|
||||
<li><a href="/master-data/specialties" class="submenu-link"><Stethoscope size={16} /> Specialties</a></li>
|
||||
<li><a href="/master-data/occupations" class="submenu-link"><Briefcase size={16} /> Occupations</a></li>
|
||||
<li><a href="/master-data/counters" class="submenu-link"><Hash size={16} /> Counters</a></li>
|
||||
<li><a href="/master-data/geography" class="submenu-link"><Globe size={16} /> Geography</a></li>
|
||||
</ul>
|
||||
{/if}
|
||||
</li>
|
||||
|
||||
<!-- Result Entry -->
|
||||
<li>
|
||||
<a
|
||||
href="/result-entry"
|
||||
class="nav-link"
|
||||
class:centered={!isOpen}
|
||||
title={!isOpen ? 'Result Entry' : ''}
|
||||
>
|
||||
<FileText size={20} class="text-secondary flex-shrink-0" />
|
||||
{#if isOpen}
|
||||
<span class="nav-text">Result Entry</span>
|
||||
{/if}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Reports -->
|
||||
<li>
|
||||
<a
|
||||
href="/reports"
|
||||
class="nav-link"
|
||||
class:centered={!isOpen}
|
||||
title={!isOpen ? 'Reports' : ''}
|
||||
>
|
||||
<Printer size={20} class="text-secondary flex-shrink-0" />
|
||||
{#if isOpen}
|
||||
<span class="nav-text">Reports</span>
|
||||
{/if}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Laboratory -->
|
||||
<li class="nav-group" class:collapsed={!isOpen}>
|
||||
<button
|
||||
@ -209,11 +189,86 @@
|
||||
<li><a href="/patients" class="submenu-link"><Users size={16} /> Patients</a></li>
|
||||
<li><a href="/orders" class="submenu-link"><ClipboardList size={16} /> Orders</a></li>
|
||||
<li><a href="/specimens" class="submenu-link"><FlaskConical size={16} /> Specimens</a></li>
|
||||
<li><a href="/result-entry" class="submenu-link"><FileText size={16} /> Result Entry</a></li>
|
||||
<li><a href="/results" class="submenu-link"><CheckCircle2 size={16} /> Results</a></li>
|
||||
</ul>
|
||||
{/if}
|
||||
</li>
|
||||
|
||||
<!-- Quality Control -->
|
||||
<li class="nav-group" class:collapsed={!isOpen}>
|
||||
<button
|
||||
onclick={toggleQualityControl}
|
||||
class="nav-link"
|
||||
class:centered={!isOpen}
|
||||
title={!isOpen ? 'Quality Control' : ''}
|
||||
>
|
||||
<ShieldCheck size={20} class="text-secondary flex-shrink-0" />
|
||||
{#if isOpen}
|
||||
<span class="nav-text">Quality Control</span>
|
||||
<ChevronDown size={16} class="chevron {qualityControlExpanded ? 'expanded' : ''}" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if isOpen && qualityControlExpanded}
|
||||
<ul class="submenu">
|
||||
<li><a href="/master-data/tests" class="submenu-link"><TestTube size={16} /> Test Definitions</a></li>
|
||||
</ul>
|
||||
{/if}
|
||||
</li>
|
||||
|
||||
{#if isOpen}
|
||||
<li class="menu-title uppercase font-bold text-xs text-secondary/70 mt-4">Analytics</li>
|
||||
{/if}
|
||||
|
||||
<!-- Reports -->
|
||||
<li>
|
||||
<a
|
||||
href="/reports"
|
||||
class="nav-link"
|
||||
class:centered={!isOpen}
|
||||
title={!isOpen ? 'Reports' : ''}
|
||||
>
|
||||
<Printer size={20} class="text-secondary flex-shrink-0" />
|
||||
{#if isOpen}
|
||||
<span class="nav-text">Reports</span>
|
||||
{/if}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{#if isOpen}
|
||||
<li class="menu-title uppercase font-bold text-xs text-secondary/70 mt-4">Configuration</li>
|
||||
{/if}
|
||||
|
||||
<!-- Master Data -->
|
||||
<li class="nav-group" class:collapsed={!isOpen}>
|
||||
<button
|
||||
onclick={toggleMasterData}
|
||||
class="nav-link"
|
||||
class:centered={!isOpen}
|
||||
title={!isOpen ? 'Master Data' : ''}
|
||||
>
|
||||
<Database size={20} class="text-secondary flex-shrink-0" />
|
||||
{#if isOpen}
|
||||
<span class="nav-text">Master Data</span>
|
||||
<ChevronDown size={16} class="chevron {masterDataExpanded ? 'expanded' : ''}" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if isOpen && masterDataExpanded}
|
||||
<ul class="submenu">
|
||||
<li><a href="/master-data/organization" class="submenu-link"><Building2 size={16} /> Organization</a></li>
|
||||
<li><a href="/master-data/containers" class="submenu-link"><FlaskConical size={16} /> Containers</a></li>
|
||||
<li><a href="/master-data/valuesets" class="submenu-link"><List size={16} /> ValueSets</a></li>
|
||||
<li><a href="/master-data/locations" class="submenu-link"><MapPin size={16} /> Locations</a></li>
|
||||
<li><a href="/master-data/contacts" class="submenu-link"><Users size={16} /> Contacts</a></li>
|
||||
<li><a href="/master-data/specialties" class="submenu-link"><Stethoscope size={16} /> Specialties</a></li>
|
||||
<li><a href="/master-data/occupations" class="submenu-link"><Briefcase size={16} /> Occupations</a></li>
|
||||
<li><a href="/master-data/geography" class="submenu-link"><Globe size={16} /> Geography</a></li>
|
||||
</ul>
|
||||
{/if}
|
||||
</li>
|
||||
|
||||
<!-- Administration -->
|
||||
<li class="nav-group" class:collapsed={!isOpen}>
|
||||
<button
|
||||
@ -233,6 +288,7 @@
|
||||
<ul class="submenu">
|
||||
<li><a href="/organization" class="submenu-link"><Building2 size={16} /> Organization</a></li>
|
||||
<li><a href="/users" class="submenu-link"><UserCircle size={16} /> Users</a></li>
|
||||
<li><a href="/master-data/counters" class="submenu-link"><Hash size={16} /> Counters</a></li>
|
||||
</ul>
|
||||
{/if}
|
||||
</li>
|
||||
@ -262,7 +318,7 @@
|
||||
<style>
|
||||
.sidebar-container {
|
||||
overflow: visible;
|
||||
transition: width 300ms ease-out;
|
||||
transition: width 300ms ease-out, transform 300ms ease-out;
|
||||
}
|
||||
|
||||
.sidebar-expanded {
|
||||
@ -273,6 +329,32 @@
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
/* Mobile: Hide sidebar completely when collapsed */
|
||||
@media (max-width: 1023px) {
|
||||
.sidebar-hidden-mobile {
|
||||
width: 0;
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar-expanded {
|
||||
width: 16rem;
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile backdrop overlay */
|
||||
.sidebar-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 30;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
transition: width 300ms ease-out;
|
||||
}
|
||||
|
||||
@ -2,11 +2,13 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { auth } from '$lib/stores/auth.js';
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import Sidebar from '$lib/components/Sidebar.svelte';
|
||||
import { Menu, BarChart3, User, Settings, LogOut } from 'lucide-svelte';
|
||||
|
||||
let { children } = $props();
|
||||
let checking = $state(true);
|
||||
// Start closed on mobile, open on desktop
|
||||
let sidebarOpen = $state(true);
|
||||
|
||||
onMount(() => {
|
||||
@ -16,6 +18,11 @@
|
||||
} else {
|
||||
checking = false;
|
||||
}
|
||||
|
||||
// On mobile, start with sidebar closed
|
||||
if (browser && window.innerWidth < 1024) {
|
||||
sidebarOpen = false;
|
||||
}
|
||||
});
|
||||
|
||||
function toggleSidebar() {
|
||||
@ -35,7 +42,7 @@
|
||||
{:else}
|
||||
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-emerald-50/20 flex">
|
||||
<!-- Sidebar - Fixed on mobile, sticky on desktop -->
|
||||
<div class="lg:sticky lg:top-0 lg:h-screen lg:self-start flex-shrink-0">
|
||||
<div class="lg:sticky lg:top-0 lg:h-screen lg:self-start flex-shrink-0 overflow-visible w-0 lg:w-auto">
|
||||
<Sidebar bind:isOpen={sidebarOpen} />
|
||||
</div>
|
||||
|
||||
|
||||
@ -9,10 +9,18 @@
|
||||
Globe,
|
||||
ChevronRight,
|
||||
FlaskConical,
|
||||
TestTube
|
||||
TestTube,
|
||||
Building2
|
||||
} from 'lucide-svelte';
|
||||
|
||||
const modules = [
|
||||
{
|
||||
title: 'Organization',
|
||||
description: 'Manage disciplines and departments structure',
|
||||
icon: Building2,
|
||||
href: '/master-data/organization',
|
||||
color: 'bg-indigo-500',
|
||||
},
|
||||
{
|
||||
title: 'Containers',
|
||||
description: 'Manage specimen containers and tubes',
|
||||
|
||||
674
src/routes/(app)/master-data/organization/+page.svelte
Normal file
674
src/routes/(app)/master-data/organization/+page.svelte
Normal file
@ -0,0 +1,674 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
fetchDisciplines,
|
||||
createDiscipline,
|
||||
updateDiscipline,
|
||||
deleteDiscipline,
|
||||
fetchDepartments,
|
||||
createDepartment,
|
||||
updateDepartment,
|
||||
deleteDepartment,
|
||||
} 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 { Plus, Edit2, Trash2, ArrowLeft, Search, Building2, Users } from 'lucide-svelte';
|
||||
|
||||
// Active tab state
|
||||
let activeTab = $state('disciplines');
|
||||
|
||||
// Loading states
|
||||
let loadingDisciplines = $state(false);
|
||||
let loadingDepartments = $state(false);
|
||||
|
||||
// Data states
|
||||
let disciplines = $state([]);
|
||||
let departments = $state([]);
|
||||
|
||||
// Modal states - Disciplines
|
||||
let disciplineModalOpen = $state(false);
|
||||
let disciplineModalMode = $state('create');
|
||||
let disciplineFormData = $state({
|
||||
DisciplineID: null,
|
||||
DisciplineCode: '',
|
||||
DisciplineName: '',
|
||||
Parent: null,
|
||||
});
|
||||
let savingDiscipline = $state(false);
|
||||
let deleteDisciplineConfirmOpen = $state(false);
|
||||
let deleteDisciplineItem = $state(null);
|
||||
let deletingDiscipline = $state(false);
|
||||
|
||||
// Modal states - Departments
|
||||
let departmentModalOpen = $state(false);
|
||||
let departmentModalMode = $state('create');
|
||||
let departmentFormData = $state({
|
||||
DepartmentID: null,
|
||||
DepartmentCode: '',
|
||||
DepartmentName: '',
|
||||
DisciplineID: null,
|
||||
});
|
||||
let savingDepartment = $state(false);
|
||||
let deleteDepartmentConfirmOpen = $state(false);
|
||||
let deleteDepartmentItem = $state(null);
|
||||
let deletingDepartment = $state(false);
|
||||
|
||||
// Search states
|
||||
let disciplineSearch = $state('');
|
||||
let departmentSearch = $state('');
|
||||
|
||||
// Table columns
|
||||
const disciplineColumns = [
|
||||
{ key: 'DisciplineCode', label: 'Code', class: 'font-medium w-32' },
|
||||
{ key: 'DisciplineName', label: 'Name' },
|
||||
{ key: 'ParentName', label: 'Parent Discipline', class: 'w-48' },
|
||||
{ key: 'actions', label: 'Actions', class: 'w-24 text-center' },
|
||||
];
|
||||
|
||||
const departmentColumns = [
|
||||
{ key: 'DepartmentCode', label: 'Code', class: 'font-medium w-32' },
|
||||
{ key: 'DepartmentName', label: 'Name' },
|
||||
{ key: 'DisciplineName', label: 'Discipline', class: 'w-48' },
|
||||
{ key: 'actions', label: 'Actions', class: 'w-24 text-center' },
|
||||
];
|
||||
|
||||
// Derived data with computed fields
|
||||
let disciplinesWithParentName = $derived(
|
||||
disciplines.map((d) => ({
|
||||
...d,
|
||||
ParentName: d.Parent
|
||||
? disciplines.find((p) => p.DisciplineID === d.Parent)?.DisciplineName || '-'
|
||||
: '-',
|
||||
}))
|
||||
);
|
||||
|
||||
let departmentsWithDisciplineName = $derived(
|
||||
departments.map((d) => ({
|
||||
...d,
|
||||
DisciplineName:
|
||||
disciplines.find((disc) => disc.DisciplineID === d.DisciplineID)?.DisciplineName || '-',
|
||||
}))
|
||||
);
|
||||
|
||||
// Filtered data
|
||||
let filteredDisciplines = $derived(
|
||||
disciplineSearch.trim()
|
||||
? disciplinesWithParentName.filter(
|
||||
(d) =>
|
||||
d.DisciplineCode?.toLowerCase().includes(disciplineSearch.toLowerCase()) ||
|
||||
d.DisciplineName?.toLowerCase().includes(disciplineSearch.toLowerCase())
|
||||
)
|
||||
: disciplinesWithParentName
|
||||
);
|
||||
|
||||
let filteredDepartments = $derived(
|
||||
departmentSearch.trim()
|
||||
? departmentsWithDisciplineName.filter(
|
||||
(d) =>
|
||||
d.DepartmentCode?.toLowerCase().includes(departmentSearch.toLowerCase()) ||
|
||||
d.DepartmentName?.toLowerCase().includes(departmentSearch.toLowerCase())
|
||||
)
|
||||
: departmentsWithDisciplineName
|
||||
);
|
||||
|
||||
onMount(async () => {
|
||||
await loadDisciplines();
|
||||
await loadDepartments();
|
||||
});
|
||||
|
||||
async function loadDisciplines() {
|
||||
loadingDisciplines = true;
|
||||
try {
|
||||
const response = await fetchDisciplines();
|
||||
disciplines = Array.isArray(response.data) ? response.data : [];
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to load disciplines');
|
||||
disciplines = [];
|
||||
} finally {
|
||||
loadingDisciplines = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDepartments() {
|
||||
loadingDepartments = true;
|
||||
try {
|
||||
const response = await fetchDepartments();
|
||||
departments = Array.isArray(response.data) ? response.data : [];
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to load departments');
|
||||
departments = [];
|
||||
} finally {
|
||||
loadingDepartments = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Discipline handlers
|
||||
function openCreateDisciplineModal() {
|
||||
disciplineModalMode = 'create';
|
||||
disciplineFormData = {
|
||||
DisciplineID: null,
|
||||
DisciplineCode: '',
|
||||
DisciplineName: '',
|
||||
Parent: null,
|
||||
};
|
||||
disciplineModalOpen = true;
|
||||
}
|
||||
|
||||
function openEditDisciplineModal(row) {
|
||||
disciplineModalMode = 'edit';
|
||||
disciplineFormData = {
|
||||
DisciplineID: row.DisciplineID,
|
||||
DisciplineCode: row.DisciplineCode,
|
||||
DisciplineName: row.DisciplineName,
|
||||
Parent: row.Parent || null,
|
||||
};
|
||||
disciplineModalOpen = true;
|
||||
}
|
||||
|
||||
async function handleSaveDiscipline() {
|
||||
savingDiscipline = true;
|
||||
try {
|
||||
if (disciplineModalMode === 'create') {
|
||||
await createDiscipline(disciplineFormData);
|
||||
toastSuccess('Discipline created successfully');
|
||||
} else {
|
||||
await updateDiscipline(disciplineFormData);
|
||||
toastSuccess('Discipline updated successfully');
|
||||
}
|
||||
disciplineModalOpen = false;
|
||||
await loadDisciplines();
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to save discipline');
|
||||
} finally {
|
||||
savingDiscipline = false;
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDeleteDiscipline(row) {
|
||||
deleteDisciplineItem = row;
|
||||
deleteDisciplineConfirmOpen = true;
|
||||
}
|
||||
|
||||
async function handleDeleteDiscipline() {
|
||||
deletingDiscipline = true;
|
||||
try {
|
||||
await deleteDiscipline(deleteDisciplineItem.DisciplineID);
|
||||
toastSuccess('Discipline deleted successfully');
|
||||
deleteDisciplineConfirmOpen = false;
|
||||
deleteDisciplineItem = null;
|
||||
await loadDisciplines();
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to delete discipline');
|
||||
} finally {
|
||||
deletingDiscipline = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Department handlers
|
||||
function openCreateDepartmentModal() {
|
||||
departmentModalMode = 'create';
|
||||
departmentFormData = {
|
||||
DepartmentID: null,
|
||||
DepartmentCode: '',
|
||||
DepartmentName: '',
|
||||
DisciplineID: null,
|
||||
};
|
||||
departmentModalOpen = true;
|
||||
}
|
||||
|
||||
function openEditDepartmentModal(row) {
|
||||
departmentModalMode = 'edit';
|
||||
departmentFormData = {
|
||||
DepartmentID: row.DepartmentID,
|
||||
DepartmentCode: row.DepartmentCode,
|
||||
DepartmentName: row.DepartmentName,
|
||||
DisciplineID: row.DisciplineID,
|
||||
};
|
||||
departmentModalOpen = true;
|
||||
}
|
||||
|
||||
async function handleSaveDepartment() {
|
||||
savingDepartment = true;
|
||||
try {
|
||||
if (departmentModalMode === 'create') {
|
||||
await createDepartment(departmentFormData);
|
||||
toastSuccess('Department created successfully');
|
||||
} else {
|
||||
await updateDepartment(departmentFormData);
|
||||
toastSuccess('Department updated successfully');
|
||||
}
|
||||
departmentModalOpen = false;
|
||||
await loadDepartments();
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to save department');
|
||||
} finally {
|
||||
savingDepartment = false;
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDeleteDepartment(row) {
|
||||
deleteDepartmentItem = row;
|
||||
deleteDepartmentConfirmOpen = true;
|
||||
}
|
||||
|
||||
async function handleDeleteDepartment() {
|
||||
deletingDepartment = true;
|
||||
try {
|
||||
await deleteDepartment(deleteDepartmentItem.DepartmentID);
|
||||
toastSuccess('Department deleted successfully');
|
||||
deleteDepartmentConfirmOpen = false;
|
||||
deleteDepartmentItem = null;
|
||||
await loadDepartments();
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to delete department');
|
||||
} finally {
|
||||
deletingDepartment = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-4">
|
||||
<!-- Header -->
|
||||
<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-xl font-bold text-gray-800">Organization Structure</h1>
|
||||
<p class="text-sm text-gray-600">Manage disciplines and departments</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs tabs-boxed bg-base-200 mb-4">
|
||||
<button
|
||||
class="tab gap-2 {activeTab === 'disciplines' ? 'tab-active' : ''}"
|
||||
onclick={() => (activeTab = 'disciplines')}
|
||||
>
|
||||
<Building2 class="w-4 h-4" />
|
||||
Disciplines
|
||||
<span class="badge badge-sm">{disciplines.length}</span>
|
||||
</button>
|
||||
<button
|
||||
class="tab gap-2 {activeTab === 'departments' ? 'tab-active' : ''}"
|
||||
onclick={() => (activeTab = 'departments')}
|
||||
>
|
||||
<Users class="w-4 h-4" />
|
||||
Departments
|
||||
<span class="badge badge-sm">{departments.length}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Disciplines Tab -->
|
||||
{#if activeTab === 'disciplines'}
|
||||
<div class="space-y-4">
|
||||
<!-- Search and Add -->
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<Search class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search disciplines by code or name..."
|
||||
class="input input-bordered w-full pl-10"
|
||||
bind:value={disciplineSearch}
|
||||
/>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick={openCreateDisciplineModal}>
|
||||
<Plus class="w-4 h-4 mr-2" />
|
||||
Add Discipline
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Disciplines Table -->
|
||||
<div class="bg-base-100 rounded-lg shadow border border-base-200">
|
||||
<DataTable
|
||||
columns={disciplineColumns}
|
||||
data={filteredDisciplines}
|
||||
loading={loadingDisciplines}
|
||||
emptyMessage="No disciplines found"
|
||||
hover={true}
|
||||
bordered={false}
|
||||
>
|
||||
{#snippet cell({ column, row })}
|
||||
{#if column.key === 'actions'}
|
||||
<div class="flex justify-center gap-2">
|
||||
<button
|
||||
class="btn btn-sm btn-ghost"
|
||||
onclick={() => openEditDisciplineModal(row)}
|
||||
title="Edit discipline"
|
||||
>
|
||||
<Edit2 class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-ghost text-error"
|
||||
onclick={() => confirmDeleteDiscipline(row)}
|
||||
title="Delete discipline"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
{row[column.key] || '-'}
|
||||
{/if}
|
||||
{/snippet}
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Departments Tab -->
|
||||
{#if activeTab === 'departments'}
|
||||
<div class="space-y-4">
|
||||
<!-- Search and Add -->
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<Search class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search departments by code or name..."
|
||||
class="input input-bordered w-full pl-10"
|
||||
bind:value={departmentSearch}
|
||||
/>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick={openCreateDepartmentModal}>
|
||||
<Plus class="w-4 h-4 mr-2" />
|
||||
Add Department
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Departments Table -->
|
||||
<div class="bg-base-100 rounded-lg shadow border border-base-200">
|
||||
<DataTable
|
||||
columns={departmentColumns}
|
||||
data={filteredDepartments}
|
||||
loading={loadingDepartments}
|
||||
emptyMessage="No departments found"
|
||||
hover={true}
|
||||
bordered={false}
|
||||
>
|
||||
{#snippet cell({ column, row })}
|
||||
{#if column.key === 'actions'}
|
||||
<div class="flex justify-center gap-2">
|
||||
<button
|
||||
class="btn btn-sm btn-ghost"
|
||||
onclick={() => openEditDepartmentModal(row)}
|
||||
title="Edit department"
|
||||
>
|
||||
<Edit2 class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-ghost text-error"
|
||||
onclick={() => confirmDeleteDepartment(row)}
|
||||
title="Delete department"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
{row[column.key] || '-'}
|
||||
{/if}
|
||||
{/snippet}
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Discipline Modal -->
|
||||
<Modal
|
||||
bind:open={disciplineModalOpen}
|
||||
title={disciplineModalMode === 'create' ? 'Add Discipline' : 'Edit Discipline'}
|
||||
size="md"
|
||||
>
|
||||
<form class="space-y-4" onsubmit={(e) => { e.preventDefault(); handleSaveDiscipline(); }}>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="disciplineCode">
|
||||
<span class="label-text text-sm font-medium">Discipline Code</span>
|
||||
<span class="label-text-alt text-xs text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="disciplineCode"
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
bind:value={disciplineFormData.DisciplineCode}
|
||||
placeholder="e.g., HEM, CHEM"
|
||||
required
|
||||
/>
|
||||
<span class="label-text-alt text-xs text-gray-500">Unique code for this discipline</span>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="disciplineName">
|
||||
<span class="label-text text-sm font-medium">Discipline Name</span>
|
||||
<span class="label-text-alt text-xs text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="disciplineName"
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
bind:value={disciplineFormData.DisciplineName}
|
||||
placeholder="e.g., Hematology"
|
||||
required
|
||||
/>
|
||||
<span class="label-text-alt text-xs text-gray-500">Display name</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="parentDiscipline">
|
||||
<span class="label-text text-sm font-medium">Parent Discipline</span>
|
||||
</label>
|
||||
<select
|
||||
id="parentDiscipline"
|
||||
class="select select-sm select-bordered w-full"
|
||||
bind:value={disciplineFormData.Parent}
|
||||
>
|
||||
<option value={null}>None (Top-level discipline)</option>
|
||||
{#each disciplines.filter((d) => d.DisciplineID !== disciplineFormData.DisciplineID) as discipline}
|
||||
<option value={discipline.DisciplineID}>{discipline.DisciplineName}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<span class="label-text-alt text-xs text-gray-500">Optional parent for hierarchical structure</span>
|
||||
</div>
|
||||
</form>
|
||||
{#snippet footer()}
|
||||
<button
|
||||
class="btn btn-ghost"
|
||||
onclick={() => (disciplineModalOpen = false)}
|
||||
type="button"
|
||||
disabled={savingDiscipline}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
onclick={handleSaveDiscipline}
|
||||
disabled={savingDiscipline}
|
||||
type="button"
|
||||
>
|
||||
{#if savingDiscipline}
|
||||
<span class="loading loading-spinner loading-sm mr-2"></span>
|
||||
{/if}
|
||||
{savingDiscipline ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<!-- Department Modal -->
|
||||
<Modal
|
||||
bind:open={departmentModalOpen}
|
||||
title={departmentModalMode === 'create' ? 'Add Department' : 'Edit Department'}
|
||||
size="md"
|
||||
>
|
||||
<form class="space-y-4" onsubmit={(e) => { e.preventDefault(); handleSaveDepartment(); }}>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="departmentCode">
|
||||
<span class="label-text text-sm font-medium">Department Code</span>
|
||||
<span class="label-text-alt text-xs text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="departmentCode"
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
bind:value={departmentFormData.DepartmentCode}
|
||||
placeholder="e.g., HEM-OUT"
|
||||
required
|
||||
/>
|
||||
<span class="label-text-alt text-xs text-gray-500">Unique code for this department</span>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="departmentName">
|
||||
<span class="label-text text-sm font-medium">Department Name</span>
|
||||
<span class="label-text-alt text-xs text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="departmentName"
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
bind:value={departmentFormData.DepartmentName}
|
||||
placeholder="e.g., Outpatient Hematology"
|
||||
required
|
||||
/>
|
||||
<span class="label-text-alt text-xs text-gray-500">Display name</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="discipline">
|
||||
<span class="label-text text-sm font-medium">Discipline</span>
|
||||
<span class="label-text-alt text-xs text-error">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="discipline"
|
||||
class="select select-sm select-bordered w-full"
|
||||
bind:value={departmentFormData.DisciplineID}
|
||||
required
|
||||
>
|
||||
<option value={null}>Select discipline...</option>
|
||||
{#each disciplines as discipline}
|
||||
<option value={discipline.DisciplineID}>{discipline.DisciplineName}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<span class="label-text-alt text-xs text-gray-500">The discipline this department belongs to</span>
|
||||
</div>
|
||||
</form>
|
||||
{#snippet footer()}
|
||||
<button
|
||||
class="btn btn-ghost"
|
||||
onclick={() => (departmentModalOpen = false)}
|
||||
type="button"
|
||||
disabled={savingDepartment}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
onclick={handleSaveDepartment}
|
||||
disabled={savingDepartment}
|
||||
type="button"
|
||||
>
|
||||
{#if savingDepartment}
|
||||
<span class="loading loading-spinner loading-sm mr-2"></span>
|
||||
{/if}
|
||||
{savingDepartment ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<!-- Delete Discipline Confirmation -->
|
||||
<Modal bind:open={deleteDisciplineConfirmOpen} title="Confirm Delete Discipline" size="sm">
|
||||
<div class="py-2">
|
||||
<p class="text-base-content/80">Are you sure you want to delete this discipline?</p>
|
||||
<div class="bg-base-200 rounded-lg p-3 mt-3">
|
||||
<p class="text-sm">
|
||||
<span class="text-gray-500">Code:</span>
|
||||
<strong class="text-base-content font-mono">{deleteDisciplineItem?.DisciplineCode}</strong>
|
||||
</p>
|
||||
<p class="text-sm mt-1">
|
||||
<span class="text-gray-500">Name:</span>
|
||||
<strong class="text-base-content">{deleteDisciplineItem?.DisciplineName}</strong>
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-error mt-3 flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
/>
|
||||
</svg>
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
{#snippet footer()}
|
||||
<button
|
||||
class="btn btn-ghost"
|
||||
onclick={() => (deleteDisciplineConfirmOpen = false)}
|
||||
type="button"
|
||||
disabled={deletingDiscipline}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-error"
|
||||
onclick={handleDeleteDiscipline}
|
||||
disabled={deletingDiscipline}
|
||||
type="button"
|
||||
>
|
||||
{#if deletingDiscipline}
|
||||
<span class="loading loading-spinner loading-sm mr-2"></span>
|
||||
{/if}
|
||||
{deletingDiscipline ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<!-- Delete Department Confirmation -->
|
||||
<Modal bind:open={deleteDepartmentConfirmOpen} title="Confirm Delete Department" size="sm">
|
||||
<div class="py-2">
|
||||
<p class="text-base-content/80">Are you sure you want to delete this department?</p>
|
||||
<div class="bg-base-200 rounded-lg p-3 mt-3">
|
||||
<p class="text-sm">
|
||||
<span class="text-gray-500">Code:</span>
|
||||
<strong class="text-base-content font-mono">{deleteDepartmentItem?.DepartmentCode}</strong>
|
||||
</p>
|
||||
<p class="text-sm mt-1">
|
||||
<span class="text-gray-500">Name:</span>
|
||||
<strong class="text-base-content">{deleteDepartmentItem?.DepartmentName}</strong>
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-error mt-3 flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
/>
|
||||
</svg>
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
{#snippet footer()}
|
||||
<button
|
||||
class="btn btn-ghost"
|
||||
onclick={() => (deleteDepartmentConfirmOpen = false)}
|
||||
type="button"
|
||||
disabled={deletingDepartment}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-error"
|
||||
onclick={handleDeleteDepartment}
|
||||
disabled={deletingDepartment}
|
||||
type="button"
|
||||
>
|
||||
{#if deletingDepartment}
|
||||
<span class="loading loading-spinner loading-sm mr-2"></span>
|
||||
{/if}
|
||||
{deletingDepartment ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
@ -38,9 +38,9 @@
|
||||
];
|
||||
|
||||
const visibleTabs = $derived.by(() => {
|
||||
const type = formData.TestType;
|
||||
const resultType = formData.details?.ResultType;
|
||||
const refType = formData.details?.RefType;
|
||||
const type = formData?.TestType;
|
||||
const resultType = formData?.details?.ResultType;
|
||||
const refType = formData?.details?.RefType;
|
||||
|
||||
return tabConfig.filter(tab => {
|
||||
if (tab.id === 'basic' || tab.id === 'mappings') return true;
|
||||
@ -186,6 +186,12 @@
|
||||
testmap: test.testmap || []
|
||||
};
|
||||
|
||||
// Set defaults for CALC tests
|
||||
if (formData.TestType === 'CALC') {
|
||||
formData.details.ResultType = 'NMRIC';
|
||||
formData.details.RefType = 'RANGE';
|
||||
}
|
||||
|
||||
lastLoadedTestId = testId;
|
||||
currentTab = 'basic';
|
||||
isDirty = false;
|
||||
@ -345,6 +351,17 @@
|
||||
bind:isDirty
|
||||
onSwitchTab={handleTabChange}
|
||||
/>
|
||||
{:else if currentTab === 'calc'}
|
||||
<CalcDetailsTab
|
||||
bind:formData
|
||||
bind:isDirty
|
||||
/>
|
||||
{:else if currentTab === 'group'}
|
||||
<GroupMembersTab
|
||||
bind:formData
|
||||
{tests}
|
||||
bind:isDirty
|
||||
/>
|
||||
{:else if currentTab === 'calc'}
|
||||
<CalcDetailsTab
|
||||
bind:formData
|
||||
|
||||
@ -1,13 +1,5 @@
|
||||
<script>
|
||||
let { formData = $bindable(), disciplines = [], departments = [], isDirty = $bindable(false) } = $props();
|
||||
|
||||
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 refTypeOptions = [
|
||||
{ value: 'RANGE', label: 'Range' },
|
||||
{ value: 'THOLD', label: 'Threshold' }
|
||||
];
|
||||
let { formData = $bindable(), isDirty = $bindable(false) } = $props();
|
||||
|
||||
function handleFieldChange() {
|
||||
isDirty = true;
|
||||
@ -55,15 +47,15 @@
|
||||
id="formulaCode"
|
||||
class="textarea textarea-sm textarea-bordered w-full font-mono text-sm"
|
||||
bind:value={formData.details.FormulaCode}
|
||||
placeholder="e.g., {HGB} + {MCV} + {MCHC}"
|
||||
placeholder="e.g., {'{HGB}'} + {'{MCV}'} + {'{MCHC}'}"
|
||||
rows="3"
|
||||
oninput={handleFieldChange}
|
||||
required
|
||||
></textarea>
|
||||
<span class="text-xs">
|
||||
{#if formData.details.FormulaCode && validateFormula(formData.details.FormulaCode)}
|
||||
{#if formData?.details?.FormulaCode && validateFormula(formData.details.FormulaCode)}
|
||||
<span class="text-success">Valid formula syntax</span>
|
||||
{:else if formData.details.FormulaCode}
|
||||
{:else if formData?.details?.FormulaCode}
|
||||
<span class="text-warning">No test references found</span>
|
||||
{:else}
|
||||
<span class="text-gray-500">Enter formula with test code references</span>
|
||||
@ -72,126 +64,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Categorization -->
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">Categorization</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label for="calcDiscipline" class="block text-sm font-medium text-gray-700">Discipline</label>
|
||||
<select
|
||||
id="calcDiscipline"
|
||||
class="select select-sm select-bordered w-full"
|
||||
bind:value={formData.details.DisciplineID}
|
||||
onchange={handleFieldChange}
|
||||
>
|
||||
<option value="">Select discipline...</option>
|
||||
{#each disciplineOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label for="calcDepartment" class="block text-sm font-medium text-gray-700">Department</label>
|
||||
<select
|
||||
id="calcDepartment"
|
||||
class="select select-sm select-bordered w-full"
|
||||
bind:value={formData.details.DepartmentID}
|
||||
onchange={handleFieldChange}
|
||||
>
|
||||
<option value="">Select department...</option>
|
||||
{#each departmentOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Method -->
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">Method</h3>
|
||||
<div class="space-y-1">
|
||||
<label for="calcMethod" class="block text-sm font-medium text-gray-700">Calculation Method</label>
|
||||
<input
|
||||
id="calcMethod"
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
bind:value={formData.details.Method}
|
||||
placeholder="e.g., Calculated from components"
|
||||
oninput={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result Configuration -->
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">Result Configuration</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label for="calcUnit1" class="block text-sm font-medium text-gray-700">Unit 1</label>
|
||||
<input
|
||||
id="calcUnit1"
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
bind:value={formData.details.Unit1}
|
||||
placeholder="e.g., g/dL"
|
||||
oninput={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label for="calcFactor" class="block text-sm font-medium text-gray-700">Factor</label>
|
||||
<input
|
||||
id="calcFactor"
|
||||
type="number"
|
||||
step="0.01"
|
||||
class="input input-sm input-bordered w-full"
|
||||
bind:value={formData.details.Factor}
|
||||
placeholder="1.0"
|
||||
oninput={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label for="calcUnit2" class="block text-sm font-medium text-gray-700">Unit 2</label>
|
||||
<input
|
||||
id="calcUnit2"
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
bind:value={formData.details.Unit2}
|
||||
placeholder="e.g., g/L"
|
||||
oninput={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label for="calcDecimal" class="block text-sm font-medium text-gray-700">Decimal</label>
|
||||
<input
|
||||
id="calcDecimal"
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
bind:value={formData.details.Decimal}
|
||||
min="0"
|
||||
max="6"
|
||||
oninput={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-1">
|
||||
<label for="calcRefType" class="block text-sm font-medium text-gray-700">Reference Type</label>
|
||||
<select
|
||||
id="calcRefType"
|
||||
class="select select-sm select-bordered w-full md:w-1/2"
|
||||
bind:value={formData.details.RefType}
|
||||
onchange={handleFieldChange}
|
||||
>
|
||||
{#each refTypeOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -257,71 +257,75 @@
|
||||
|
||||
<!-- Optional: Range Type, Sex and Age (collapsed by default) -->
|
||||
<div class="border-t pt-3">
|
||||
<details>
|
||||
<details class="w-full">
|
||||
<summary class="text-sm text-gray-600 cursor-pointer hover:text-gray-800">
|
||||
Advanced Options (Range Type, Sex, Age)
|
||||
Advanced Options
|
||||
</summary>
|
||||
<div class="mt-3 space-y-3">
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700">Range Type</label>
|
||||
<select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.RangeType}>
|
||||
<div class="mt-2 flex flex-wrap items-end gap-2 justify-between">
|
||||
<div class="flex flex-wrap items-end gap-2">
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">Type</label>
|
||||
<select class="select select-xs select-bordered w-20" bind:value={simpleRefNum.RangeType}>
|
||||
<option value="RANGE">Range</option>
|
||||
<option value="THOLD">Threshold</option>
|
||||
<option value="THOLD">Thold</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700">Sex</label>
|
||||
<select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.Sex}>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">Sex</label>
|
||||
<select class="select select-xs select-bordered w-16" bind:value={simpleRefNum.Sex}>
|
||||
{#each sexOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700">Age Unit</label>
|
||||
<select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.AgeUnit}>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">Age Unit</label>
|
||||
<select class="select select-xs select-bordered w-16" bind:value={simpleRefNum.AgeUnit}>
|
||||
{#each ageUnits as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label.substring(0,1)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">From</label>
|
||||
<input
|
||||
type="number"
|
||||
class="input input-xs input-bordered w-16"
|
||||
bind:value={simpleRefNum.AgeStart}
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">To</label>
|
||||
<input
|
||||
type="number"
|
||||
class="input input-xs input-bordered w-16"
|
||||
bind:value={simpleRefNum.AgeEnd}
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Low/High signs for THOLD -->
|
||||
{#if simpleRefNum.RangeType === 'THOLD'}
|
||||
<div class="flex flex-wrap items-end gap-2">
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">Low Sign</label>
|
||||
<select class="select select-xs select-bordered w-14" bind:value={simpleRefNum.LowSign}>
|
||||
{#each signOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">High Sign</label>
|
||||
<select class="select select-xs select-bordered w-14" bind:value={simpleRefNum.HighSign}>
|
||||
{#each signOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700">From</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
class="input input-sm input-bordered flex-1"
|
||||
bind:value={simpleRefNum.AgeStart}
|
||||
min="0"
|
||||
/>
|
||||
<span class="text-sm text-gray-600 whitespace-nowrap">{simpleRefNum.AgeUnit}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-gray-700">To</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
class="input input-sm input-bordered flex-1"
|
||||
bind:value={simpleRefNum.AgeEnd}
|
||||
min="0"
|
||||
/>
|
||||
<span class="text-sm text-gray-600 whitespace-nowrap">{simpleRefNum.AgeUnit}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Presets -->
|
||||
<div class="pt-1">
|
||||
<span class="text-xs text-gray-500 block mb-1">Quick presets:</span>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<button class="btn btn-xs btn-ghost" onclick={() => { simpleRefNum.AgeStart = ''; simpleRefNum.AgeEnd = ''; }}>All ages</button>
|
||||
<button class="btn btn-xs btn-ghost" onclick={() => { simpleRefNum.AgeStart = 0; simpleRefNum.AgeEnd = 18; simpleRefNum.AgeUnit = 'years'; }}>0-18 years</button>
|
||||
<button class="btn btn-xs btn-ghost" onclick={() => { simpleRefNum.AgeStart = 18; simpleRefNum.AgeEnd = 150; simpleRefNum.AgeUnit = 'years'; }}>18+ years</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
@ -447,47 +451,70 @@
|
||||
</div>
|
||||
|
||||
<!-- Optional: Range Type and Age -->
|
||||
<details class="mt-2">
|
||||
<details class="mt-2 w-full">
|
||||
<summary class="text-xs text-gray-600 cursor-pointer hover:text-gray-800">
|
||||
Advanced (Range Type, Age)
|
||||
Advanced
|
||||
</summary>
|
||||
<div class="mt-2 grid grid-cols-4 gap-2">
|
||||
<div>
|
||||
<label class="block text-xs text-gray-600 mb-1">Range Type</label>
|
||||
<select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.RangeType}>
|
||||
<div class="mt-2 flex flex-wrap items-end gap-2 justify-between">
|
||||
<div class="flex flex-wrap items-end gap-2">
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">Type</label>
|
||||
<select class="select select-xs select-bordered w-20" bind:value={simpleRefNum.RangeType}>
|
||||
<option value="RANGE">Range</option>
|
||||
<option value="THOLD">Threshold</option>
|
||||
<option value="THOLD">Thold</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-gray-600 mb-1">Age Unit</label>
|
||||
<select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.AgeUnit}>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">Age Unit</label>
|
||||
<select class="select select-xs select-bordered w-16" bind:value={simpleRefNum.AgeUnit}>
|
||||
{#each ageUnits as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
<option value={opt.value}>{opt.label.substring(0,1)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-gray-600 mb-1">From</label>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">From</label>
|
||||
<input
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
class="input input-xs input-bordered w-16"
|
||||
bind:value={simpleRefNum.AgeStart}
|
||||
placeholder="0"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-gray-600 mb-1">To</label>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">To</label>
|
||||
<input
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
class="input input-xs input-bordered w-16"
|
||||
bind:value={simpleRefNum.AgeEnd}
|
||||
placeholder="150"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Low/High signs for THOLD -->
|
||||
{#if simpleRefNum.RangeType === 'THOLD'}
|
||||
<div class="flex flex-wrap items-end gap-2">
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">Low Sign</label>
|
||||
<select class="select select-xs select-bordered w-14" bind:value={simpleRefNum.LowSign}>
|
||||
{#each signOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs text-gray-600 mb-0.5">High Sign</label>
|
||||
<select class="select select-xs select-bordered w-14" bind:value={simpleRefNum.HighSign}>
|
||||
{#each signOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -342,6 +342,12 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label for="resultType" class="block text-sm font-medium text-gray-700">Result Type</label>
|
||||
{#if formData.TestType === 'CALC'}
|
||||
<div class="input input-sm input-bordered w-full bg-base-200 text-gray-600 flex items-center">
|
||||
Numeric
|
||||
</div>
|
||||
<input type="hidden" bind:value={formData.details.ResultType} />
|
||||
{:else}
|
||||
<select
|
||||
id="resultType"
|
||||
class="select select-sm select-bordered w-full"
|
||||
@ -353,8 +359,6 @@
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if formData.TestType === 'CALC'}
|
||||
<span class="text-xs text-gray-500">CALC type always uses Numeric Reference</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -454,7 +458,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sample Requirements -->
|
||||
<!-- Sample Requirements (hidden for CALC tests) -->
|
||||
{#if formData.TestType !== 'CALC'}
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">Sample Requirements</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
@ -497,6 +502,7 @@
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Method & TAT -->
|
||||
<div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user