330 lines
10 KiB
Svelte
330 lines
10 KiB
Svelte
|
<script>
|
||
|
|
import { onMount } from 'svelte';
|
||
|
|
import {
|
||
|
|
fetchTestMaps,
|
||
|
|
deleteTestMap,
|
||
|
|
} from '$lib/api/testmap.js';
|
||
|
|
import { fetchContainers } from '$lib/api/containers.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 TestMapModal from './TestMapModal.svelte';
|
||
|
|
import {
|
||
|
|
Plus,
|
||
|
|
Edit2,
|
||
|
|
Trash2,
|
||
|
|
ArrowLeft,
|
||
|
|
Link,
|
||
|
|
Server,
|
||
|
|
Monitor,
|
||
|
|
Filter,
|
||
|
|
X,
|
||
|
|
} from 'lucide-svelte';
|
||
|
|
|
||
|
|
let loading = $state(false);
|
||
|
|
let testMaps = $state([]);
|
||
|
|
let containers = $state([]);
|
||
|
|
let modalOpen = $state(false);
|
||
|
|
let modalMode = $state('create');
|
||
|
|
let modalData = $state(null);
|
||
|
|
let deleting = $state(false);
|
||
|
|
let deleteConfirmOpen = $state(false);
|
||
|
|
let deleteItem = $state(null);
|
||
|
|
|
||
|
|
// Filter states
|
||
|
|
let filterHostType = $state('');
|
||
|
|
let filterHostID = $state('');
|
||
|
|
let filterClientType = $state('');
|
||
|
|
let filterClientID = $state('');
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{ key: 'HostType', label: 'Host Type', class: 'w-20' },
|
||
|
|
{ key: 'HostID', label: 'Host ID', class: 'w-32' },
|
||
|
|
{ key: 'ClientType', label: 'Client Type', class: 'w-24' },
|
||
|
|
{ key: 'ClientID', label: 'Client ID', class: 'w-32' },
|
||
|
|
{ key: 'actions', label: 'Actions', class: 'w-24 text-center' },
|
||
|
|
];
|
||
|
|
|
||
|
|
// Derived filtered test maps
|
||
|
|
let filteredTestMaps = $derived(
|
||
|
|
testMaps.filter((mapping) => {
|
||
|
|
const matchesHostType =
|
||
|
|
!filterHostType ||
|
||
|
|
(mapping.HostType && mapping.HostType.toLowerCase().includes(filterHostType.toLowerCase()));
|
||
|
|
const matchesHostID =
|
||
|
|
!filterHostID ||
|
||
|
|
(mapping.HostID && mapping.HostID.toLowerCase().includes(filterHostID.toLowerCase()));
|
||
|
|
const matchesClientType =
|
||
|
|
!filterClientType ||
|
||
|
|
(mapping.ClientType && mapping.ClientType.toLowerCase().includes(filterClientType.toLowerCase()));
|
||
|
|
const matchesClientID =
|
||
|
|
!filterClientID ||
|
||
|
|
(mapping.ClientID && mapping.ClientID.toLowerCase().includes(filterClientID.toLowerCase()));
|
||
|
|
|
||
|
|
return matchesHostType && matchesHostID && matchesClientType && matchesClientID;
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
onMount(async () => {
|
||
|
|
await Promise.all([loadTestMaps(), loadContainers()]);
|
||
|
|
});
|
||
|
|
|
||
|
|
async function loadTestMaps() {
|
||
|
|
loading = true;
|
||
|
|
try {
|
||
|
|
const response = await fetchTestMaps();
|
||
|
|
testMaps = Array.isArray(response.data) ? response.data : [];
|
||
|
|
} catch (err) {
|
||
|
|
toastError(err.message || 'Failed to load test mappings');
|
||
|
|
testMaps = [];
|
||
|
|
} finally {
|
||
|
|
loading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadContainers() {
|
||
|
|
try {
|
||
|
|
const response = await fetchContainers();
|
||
|
|
containers = Array.isArray(response.data) ? response.data : [];
|
||
|
|
} catch (err) {
|
||
|
|
console.error('Failed to load containers:', err);
|
||
|
|
containers = [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function openCreateModal() {
|
||
|
|
modalMode = 'create';
|
||
|
|
modalData = null;
|
||
|
|
modalOpen = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function openEditModal(row) {
|
||
|
|
modalMode = 'edit';
|
||
|
|
modalData = row;
|
||
|
|
modalOpen = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleModalSave() {
|
||
|
|
loadTestMaps();
|
||
|
|
}
|
||
|
|
|
||
|
|
function confirmDelete(row) {
|
||
|
|
deleteItem = row;
|
||
|
|
deleteConfirmOpen = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleDelete() {
|
||
|
|
deleting = true;
|
||
|
|
try {
|
||
|
|
await deleteTestMap(deleteItem.TestMapID);
|
||
|
|
toastSuccess('Test mapping deleted successfully');
|
||
|
|
deleteConfirmOpen = false;
|
||
|
|
deleteItem = null;
|
||
|
|
await loadTestMaps();
|
||
|
|
} catch (err) {
|
||
|
|
toastError(err.message || 'Failed to delete test mapping');
|
||
|
|
} finally {
|
||
|
|
deleting = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearFilters() {
|
||
|
|
filterHostType = '';
|
||
|
|
filterHostID = '';
|
||
|
|
filterClientType = '';
|
||
|
|
filterClientID = '';
|
||
|
|
}
|
||
|
|
</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">Test Mapping</h1>
|
||
|
|
<p class="text-sm text-gray-600">
|
||
|
|
Manage test mappings between host and client systems
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-primary" onclick={openCreateModal}>
|
||
|
|
<Plus class="w-4 h-4 mr-2" />
|
||
|
|
Add Mapping
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Filters -->
|
||
|
|
<div class="bg-base-100 rounded-lg shadow border border-base-200 p-4 mb-4">
|
||
|
|
<div class="flex items-center justify-between mb-3">
|
||
|
|
<h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
|
||
|
|
<Filter class="w-4 h-4" />
|
||
|
|
Filters
|
||
|
|
</h3>
|
||
|
|
<button class="btn btn-sm btn-ghost" onclick={clearFilters}>
|
||
|
|
<X class="w-3 h-3 mr-1" />
|
||
|
|
Clear
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
|
|
<!-- Host Filters -->
|
||
|
|
<div class="space-y-3">
|
||
|
|
<h4 class="text-xs font-medium text-gray-500 uppercase flex items-center gap-2">
|
||
|
|
<Server class="w-3 h-3" />
|
||
|
|
Host
|
||
|
|
</h4>
|
||
|
|
<div class="grid grid-cols-2 gap-3">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Type"
|
||
|
|
class="input input-sm input-bordered w-full"
|
||
|
|
bind:value={filterHostType}
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="ID"
|
||
|
|
class="input input-sm input-bordered w-full"
|
||
|
|
bind:value={filterHostID}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Client Filters -->
|
||
|
|
<div class="space-y-3">
|
||
|
|
<h4 class="text-xs font-medium text-gray-500 uppercase flex items-center gap-2">
|
||
|
|
<Monitor class="w-3 h-3" />
|
||
|
|
Client
|
||
|
|
</h4>
|
||
|
|
<div class="grid grid-cols-2 gap-3">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Type"
|
||
|
|
class="input input-sm input-bordered w-full"
|
||
|
|
bind:value={filterClientType}
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="ID"
|
||
|
|
class="input input-sm input-bordered w-full"
|
||
|
|
bind:value={filterClientID}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Data Table -->
|
||
|
|
<div class="bg-base-100 rounded-lg shadow border border-base-200">
|
||
|
|
{#if !loading && filteredTestMaps.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">
|
||
|
|
<Link class="w-12 h-12 text-gray-400" />
|
||
|
|
</div>
|
||
|
|
<h3 class="text-base font-semibold text-gray-700 mb-2">
|
||
|
|
{#if filterHostType || filterHostID || filterClientType || filterClientID}
|
||
|
|
No mappings match your filters
|
||
|
|
{:else}
|
||
|
|
No test mappings found
|
||
|
|
{/if}
|
||
|
|
</h3>
|
||
|
|
<p class="text-xs text-gray-500 text-center max-w-md mb-6">
|
||
|
|
{#if filterHostType || filterHostID || filterClientType || filterClientID}
|
||
|
|
Try adjusting your filter criteria or clear the filters to see all mappings.
|
||
|
|
{:else}
|
||
|
|
Test mappings connect tests between host systems (like HIS) and client systems. Add your first mapping to get started.
|
||
|
|
{/if}
|
||
|
|
</p>
|
||
|
|
{#if filterHostType || filterHostID || filterClientType || filterClientID}
|
||
|
|
<button class="btn btn-outline" onclick={clearFilters}>
|
||
|
|
Clear Filters
|
||
|
|
</button>
|
||
|
|
{:else}
|
||
|
|
<button class="btn btn-primary" onclick={openCreateModal}>
|
||
|
|
<Plus class="w-4 h-4 mr-2" />
|
||
|
|
Add Mapping
|
||
|
|
</button>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
{:else}
|
||
|
|
<DataTable
|
||
|
|
{columns}
|
||
|
|
data={filteredTestMaps}
|
||
|
|
{loading}
|
||
|
|
emptyMessage="No test mappings found"
|
||
|
|
hover={true}
|
||
|
|
bordered={false}
|
||
|
|
>
|
||
|
|
{#snippet cell({ column, row, value })}
|
||
|
|
{#if column.key === 'actions'}
|
||
|
|
<div class="flex justify-center gap-1">
|
||
|
|
<button
|
||
|
|
class="btn btn-sm btn-ghost"
|
||
|
|
onclick={() => openEditModal(row)}
|
||
|
|
title="Edit mapping"
|
||
|
|
>
|
||
|
|
<Edit2 class="w-4 h-4" />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="btn btn-sm btn-ghost text-error"
|
||
|
|
onclick={() => confirmDelete(row)}
|
||
|
|
title="Delete mapping"
|
||
|
|
>
|
||
|
|
<Trash2 class="w-4 h-4" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{:else}
|
||
|
|
{value || '-'}
|
||
|
|
{/if}
|
||
|
|
{/snippet}
|
||
|
|
</DataTable>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Test Mapping Modal -->
|
||
|
|
<TestMapModal
|
||
|
|
bind:open={modalOpen}
|
||
|
|
mode={modalMode}
|
||
|
|
initialData={modalData}
|
||
|
|
{containers}
|
||
|
|
onSave={handleModalSave}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- Delete Confirmation Modal -->
|
||
|
|
<Modal bind:open={deleteConfirmOpen} title="Confirm Delete Mapping" size="sm">
|
||
|
|
<div class="py-2">
|
||
|
|
<p class="text-base-content/80">Are you sure you want to delete this test mapping?</p>
|
||
|
|
<div class="bg-base-200 rounded-lg p-3 mt-3 space-y-1">
|
||
|
|
<p class="text-sm">
|
||
|
|
<span class="text-gray-500">Host:</span>
|
||
|
|
<strong class="text-base-content">{deleteItem?.HostType} / {deleteItem?.HostID}</strong>
|
||
|
|
</p>
|
||
|
|
<p class="text-sm">
|
||
|
|
<span class="text-gray-500">Client:</span>
|
||
|
|
<strong class="text-base-content">{deleteItem?.ClientType} / {deleteItem?.ClientID}</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>
|