675 lines
21 KiB
Svelte
675 lines
21 KiB
Svelte
|
<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>
|