398 lines
14 KiB
Svelte
398 lines
14 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { fetchContainers, createContainer, updateContainer, deleteContainer } from '$lib/api/containers.js';
|
|
import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
|
|
import { valueSets } from '$lib/stores/valuesets.js';
|
|
import DataTable from '$lib/components/DataTable.svelte';
|
|
import Modal from '$lib/components/Modal.svelte';
|
|
import SelectDropdown from '$lib/components/SelectDropdown.svelte';
|
|
import HelpTooltip from '$lib/components/HelpTooltip.svelte';
|
|
import { Plus, Edit2, Trash2, ArrowLeft, Filter, Search, FlaskConical } from 'lucide-svelte';
|
|
|
|
let loading = $state(false);
|
|
let containers = $state([]);
|
|
let modalOpen = $state(false);
|
|
let modalMode = $state('create');
|
|
let saving = $state(false);
|
|
let deleting = $state(false);
|
|
let formData = $state({ ConDefID: null, ConCode: '', ConName: '', ConDesc: '', ConClass: '', Additive: '', Color: '' });
|
|
let deleteConfirmOpen = $state(false);
|
|
let deleteItem = $state(null);
|
|
|
|
// Search and filter states
|
|
let searchQuery = $state('');
|
|
|
|
const columns = [
|
|
{ key: 'ConCode', label: 'Code', class: 'font-medium' },
|
|
{ key: 'ConName', label: 'Name' },
|
|
{ key: 'ConDesc', label: 'Description' },
|
|
{ key: 'ConClass', label: 'Class' },
|
|
{ key: 'Additive', label: 'Additive' },
|
|
{ key: 'Color', label: 'Color' },
|
|
{ key: 'actions', label: 'Actions', class: 'w-32 text-center' },
|
|
];
|
|
|
|
function getValueSetLabel(key, value) {
|
|
if (!value) return '-';
|
|
const items = valueSets.getSync(key);
|
|
const item = items.find((i) => String(i.value || i.Value || i.code || i.Code || i.ItemCode) === String(value));
|
|
return item?.label || item?.Label || item?.description || item?.Description || item?.name || item?.Name || value;
|
|
}
|
|
|
|
// Derived filtered containers based on search query
|
|
let filteredContainers = $derived(
|
|
searchQuery.trim()
|
|
? containers.filter(container => {
|
|
const query = searchQuery.toLowerCase().trim();
|
|
return (
|
|
(container.ConCode && container.ConCode.toLowerCase().includes(query)) ||
|
|
(container.ConName && container.ConName.toLowerCase().includes(query))
|
|
);
|
|
})
|
|
: containers
|
|
);
|
|
|
|
onMount(async () => {
|
|
// Preload valuesets for dropdowns
|
|
await Promise.all([
|
|
valueSets.load('container_class'),
|
|
valueSets.load('additive'),
|
|
valueSets.load('container_cap_color'),
|
|
]);
|
|
await loadContainers();
|
|
});
|
|
|
|
async function loadContainers() {
|
|
loading = true;
|
|
try {
|
|
const response = await fetchContainers();
|
|
containers = Array.isArray(response.data) ? response.data : [];
|
|
} catch (err) {
|
|
toastError(err.message || 'Failed to load containers');
|
|
containers = [];
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
function handleSearchKeydown(event) {
|
|
if (event.key === 'Enter') {
|
|
// Search is reactive via $effect, but this allows for future server-side search
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
function handleFilter() {
|
|
// Filter is reactive via $effect, but this allows for future enhancements
|
|
}
|
|
|
|
function openCreateModal() {
|
|
modalMode = 'create';
|
|
formData = { ConDefID: null, ConCode: '', ConName: '', ConDesc: '', ConClass: '', Additive: '', Color: '' };
|
|
modalOpen = true;
|
|
}
|
|
|
|
function openEditModal(row) {
|
|
modalMode = 'edit';
|
|
formData = {
|
|
ConDefID: row.ConDefID,
|
|
ConCode: row.ConCode,
|
|
ConName: row.ConName,
|
|
ConDesc: row.ConDesc || '',
|
|
ConClass: row.ConClass || '',
|
|
Additive: row.Additive || '',
|
|
Color: row.Color || '',
|
|
};
|
|
modalOpen = true;
|
|
}
|
|
|
|
async function handleSave() {
|
|
saving = true;
|
|
try {
|
|
if (modalMode === 'create') {
|
|
await createContainer(formData);
|
|
toastSuccess('Container created successfully');
|
|
} else {
|
|
await updateContainer(formData);
|
|
toastSuccess('Container updated successfully');
|
|
}
|
|
modalOpen = false;
|
|
await loadContainers();
|
|
} catch (err) {
|
|
toastError(err.message || 'Failed to save container');
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
function confirmDelete(row) {
|
|
deleteItem = row;
|
|
deleteConfirmOpen = true;
|
|
}
|
|
|
|
async function handleDelete() {
|
|
deleting = true;
|
|
try {
|
|
await deleteContainer(deleteItem.ConDefID);
|
|
toastSuccess('Container deleted successfully');
|
|
deleteConfirmOpen = false;
|
|
deleteItem = null;
|
|
await loadContainers();
|
|
} catch (err) {
|
|
toastError(err.message || 'Failed to delete container');
|
|
} finally {
|
|
deleting = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="p-4">
|
|
<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">Containers</h1>
|
|
<p class="text-sm text-gray-600">Manage specimen containers and tubes</p>
|
|
</div>
|
|
<button class="btn btn-primary" onclick={openCreateModal}>
|
|
<Plus class="w-4 h-4 mr-2" />
|
|
Add Container
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Search and Filter -->
|
|
<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 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 by code or name..."
|
|
class="input input-bordered w-full pl-10"
|
|
bind:value={searchQuery}
|
|
onkeydown={handleSearchKeydown}
|
|
/>
|
|
</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">
|
|
{#if !loading && filteredContainers.length === 0}
|
|
<!-- Empty State -->
|
|
<div class="flex flex-col items-center justify-center py-16 px-4">
|
|
<div class="bg-base-200 rounded-full p-6 mb-4">
|
|
<FlaskConical class="w-12 h-12 text-gray-400" />
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-700 mb-2">
|
|
{searchQuery.trim() ? 'No containers match your search' : 'No containers found'}
|
|
</h3>
|
|
<p class="text-xs text-gray-500 text-center max-w-md mb-6">
|
|
{searchQuery.trim()
|
|
? `No containers found matching "${searchQuery}". Try a different search term or clear the filter.`
|
|
: 'Get started by adding your first specimen container or tube to the system.'}
|
|
</p>
|
|
{#if searchQuery.trim()}
|
|
<button class="btn btn-outline" onclick={() => searchQuery = ''}>
|
|
Clear Search
|
|
</button>
|
|
{:else}
|
|
<button class="btn btn-primary" onclick={openCreateModal}>
|
|
<Plus class="w-4 h-4 mr-2" />
|
|
Add Container
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<DataTable
|
|
{columns}
|
|
data={filteredContainers}
|
|
{loading}
|
|
emptyMessage="No containers found"
|
|
hover={true}
|
|
bordered={false}
|
|
>
|
|
{#snippet cell({ column, row, value })}
|
|
{#if column.key === 'actions'}
|
|
<div class="flex justify-center gap-2">
|
|
<button class="btn btn-sm btn-ghost" onclick={() => openEditModal(row)} title="Edit container">
|
|
<Edit2 class="w-4 h-4" />
|
|
</button>
|
|
<button class="btn btn-sm btn-ghost text-error" onclick={() => confirmDelete(row)} title="Delete container">
|
|
<Trash2 class="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
{:else if column.key === 'ConClass'}
|
|
{getValueSetLabel('container_class', value)}
|
|
{:else if column.key === 'Additive'}
|
|
{getValueSetLabel('additive', value)}
|
|
{:else if column.key === 'Color'}
|
|
{#if value}
|
|
<span class="inline-flex items-center gap-2">
|
|
<span class="w-4 h-4 rounded-full border border-gray-300" style="background-color: {value.toLowerCase()};"></span>
|
|
{getValueSetLabel('container_cap_color', value)}
|
|
</span>
|
|
{:else}
|
|
-
|
|
{/if}
|
|
{:else}
|
|
{value || '-'}
|
|
{/if}
|
|
{/snippet}
|
|
</DataTable>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<Modal bind:open={modalOpen} title={modalMode === 'create' ? 'Add Container' : 'Edit Container'} size="md">
|
|
<form class="space-y-3" 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="code">
|
|
<span class="label-text text-sm font-medium">Container Code</span>
|
|
<span class="label-text-alt text-xs text-error">*</span>
|
|
</label>
|
|
<input
|
|
id="code"
|
|
type="text"
|
|
class="input input-sm input-bordered w-full"
|
|
bind:value={formData.ConCode}
|
|
placeholder="e.g., SST, EDTA, HEP"
|
|
required
|
|
/>
|
|
<span class="label-text-alt text-xs text-gray-500">Unique identifier for this container type</span>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label" for="name">
|
|
<span class="label-text text-sm font-medium">Container Name</span>
|
|
<span class="label-text-alt text-xs text-error">*</span>
|
|
</label>
|
|
<input
|
|
id="name"
|
|
type="text"
|
|
class="input input-sm input-bordered w-full"
|
|
bind:value={formData.ConName}
|
|
placeholder="e.g., Serum Separator Tube"
|
|
required
|
|
/>
|
|
<span class="label-text-alt text-xs text-gray-500">Descriptive name displayed in the system</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label" for="desc">
|
|
<span class="label-text text-sm font-medium">Description</span>
|
|
</label>
|
|
<input
|
|
id="desc"
|
|
type="text"
|
|
class="input input-sm input-bordered w-full"
|
|
bind:value={formData.ConDesc}
|
|
placeholder="e.g., Evacuated blood collection tube with gel separator"
|
|
/>
|
|
<span class="label-text-alt text-xs text-gray-500">Optional detailed description of the container</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="form-control">
|
|
<label class="label" for="class">
|
|
<span class="label-text text-sm font-medium flex items-center gap-2">
|
|
Container Class
|
|
<HelpTooltip
|
|
text="The general category of this container. Examples: Tube (for blood collection tubes), Cup (for urine or fluid cups), Swab (for specimen swabs)."
|
|
title="Container Class Help"
|
|
/>
|
|
</span>
|
|
</label>
|
|
<SelectDropdown
|
|
name="class"
|
|
valueSetKey="container_class"
|
|
bind:value={formData.ConClass}
|
|
placeholder="Select class..."
|
|
/>
|
|
<span class="label-text-alt text-xs text-gray-500">Category of container</span>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label" for="additive">
|
|
<span class="label-text text-sm font-medium flex items-center gap-2">
|
|
Additive
|
|
<HelpTooltip
|
|
text="Any chemical additive present in the container. Examples: EDTA (anticoagulant for CBC), Heparin (anticoagulant for chemistry), SST (Serum Separator Tube with gel), None (plain tube)."
|
|
title="Additive Help"
|
|
/>
|
|
</span>
|
|
</label>
|
|
<SelectDropdown
|
|
name="additive"
|
|
valueSetKey="additive"
|
|
bind:value={formData.Additive}
|
|
placeholder="Select additive..."
|
|
/>
|
|
<span class="label-text-alt text-xs text-gray-500">Chemical additive inside</span>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label" for="color">
|
|
<span class="label-text text-sm font-medium flex items-center gap-2">
|
|
Cap Color
|
|
<HelpTooltip
|
|
text="The color of the container cap or closure. This is an industry standard for identifying container types at a glance (e.g., Lavender = EDTA, Red = Plain serum, Green = Heparin)."
|
|
title="Cap Color Help"
|
|
/>
|
|
</span>
|
|
</label>
|
|
<SelectDropdown
|
|
name="color"
|
|
valueSetKey="container_cap_color"
|
|
bind:value={formData.Color}
|
|
placeholder="Select color..."
|
|
/>
|
|
<span class="label-text-alt text-xs text-gray-500">Visual identification color</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{#snippet footer()}
|
|
<button class="btn btn-ghost" onclick={() => (modalOpen = false)} type="button" disabled={saving}>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>
|
|
|
|
<Modal bind:open={deleteConfirmOpen} title="Confirm Delete Container" size="sm">
|
|
<div class="py-2">
|
|
<p class="text-base-content/80">
|
|
Are you sure you want to delete this container?
|
|
</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">{deleteItem?.ConCode}</strong>
|
|
</p>
|
|
<p class="text-sm mt-1">
|
|
<span class="text-gray-500">Name:</span>
|
|
<strong class="text-base-content">{deleteItem?.ConName}</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={() => (deleteConfirmOpen = false)} type="button" disabled={deleting}>Cancel</button>
|
|
<button class="btn btn-error" onclick={handleDelete} disabled={deleting} type="button">
|
|
{#if deleting}
|
|
<span class="loading loading-spinner loading-sm mr-2"></span>
|
|
{/if}
|
|
{deleting ? 'Deleting...' : 'Delete'}
|
|
</button>
|
|
{/snippet}
|
|
</Modal>
|