feat(testmap): update test map page and modal components
This commit is contained in:
parent
beb3235470
commit
8f75a1339c
250
AGENTS.md
250
AGENTS.md
@ -1,114 +1,79 @@
|
||||
# AGENTS.md - Coding Guidelines for CLQMS Frontend
|
||||
|
||||
## Project Overview
|
||||
SvelteKit frontend for Clinical Laboratory Quality Management System. Uses Svelte 5 runes, TailwindCSS 4, DaisyUI, and Lucide icons.
|
||||
|
||||
SvelteKit frontend for Clinical Laboratory Quality Management System (CLQMS). Uses Svelte 5 runes, TailwindCSS 4, DaisyUI, and Lucide icons.
|
||||
|
||||
## Build Commands
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
# Development server
|
||||
pnpm run dev
|
||||
|
||||
# Production build
|
||||
pnpm run build
|
||||
|
||||
# Preview production build
|
||||
pnpm run preview
|
||||
|
||||
# Sync SvelteKit (runs automatically on install)
|
||||
pnpm run prepare
|
||||
pnpm run dev # Development server
|
||||
pnpm run build # Production build
|
||||
pnpm run preview # Preview production build
|
||||
pnpm run prepare # Sync SvelteKit
|
||||
```
|
||||
|
||||
## Testing
|
||||
**No test framework yet.** When adding: use Vitest (`vitest run src/path/to/test.js`), Playwright for E2E.
|
||||
|
||||
**No test framework configured yet.** When adding tests:
|
||||
- Use Vitest for unit tests (recommended with SvelteKit)
|
||||
- Use Playwright for E2E tests
|
||||
- Run single test: `vitest run src/path/to/test.js`
|
||||
- Run tests in watch mode: `vitest`
|
||||
## Code Style
|
||||
|
||||
## Code Style Guidelines
|
||||
|
||||
### JavaScript/TypeScript
|
||||
|
||||
- **ES Modules**: Always use `import`/`export` (type: "module" in package.json)
|
||||
- **Semicolons**: Use semicolons consistently
|
||||
- **Quotes**: Use single quotes for strings
|
||||
- **ES Modules**: `import`/`export` (type: "module")
|
||||
- **Semicolons**: Required
|
||||
- **Quotes**: Single quotes
|
||||
- **Indentation**: 2 spaces
|
||||
- **Trailing commas**: Use in multi-line objects/arrays
|
||||
- **JSDoc**: Document all exported functions with JSDoc comments
|
||||
- **Trailing commas**: In multi-line objects/arrays
|
||||
- **JSDoc**: Document all exported functions
|
||||
|
||||
### Svelte Components
|
||||
## Naming Conventions
|
||||
|
||||
- **Components**: PascalCase (`LoginForm.svelte`)
|
||||
- **Files/Routes**: lowercase with hyphens (`+page.svelte`)
|
||||
- **Variables**: camelCase (`isLoading`, `userName`)
|
||||
- **Constants**: UPPER_SNAKE_CASE (`API_URL`)
|
||||
- **Stores**: camelCase (`auth`, `config`)
|
||||
- **Handlers**: prefix with `handle` (`handleSubmit`)
|
||||
- **Form state**: `formLoading`, `formError`
|
||||
|
||||
## Imports Order
|
||||
|
||||
1. Svelte (`svelte`, `$app/*`)
|
||||
2. `$lib/*` (stores, api, components, utils)
|
||||
3. External libraries (`lucide-svelte`)
|
||||
4. Relative imports (minimize, prefer `$lib`)
|
||||
|
||||
## Svelte 5 Components
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
// 1. Imports - Svelte, $app, $lib, external
|
||||
// 1. Imports
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { browser } from '$app/environment';
|
||||
import { auth } from '$lib/stores/auth.js';
|
||||
import { login } from '$lib/api/auth.js';
|
||||
import { User, Lock } from 'lucide-svelte';
|
||||
import { User } from 'lucide-svelte';
|
||||
|
||||
// 2. Props with $bindable for two-way binding
|
||||
let { open = $bindable(false), title = '', children, footer } = $props();
|
||||
// 2. Props with $bindable
|
||||
let { open = $bindable(false), title = '', children } = $props();
|
||||
|
||||
// 3. State
|
||||
let loading = $state(false);
|
||||
let error = $state('');
|
||||
let formData = $state({ name: '' });
|
||||
|
||||
// 4. Derived state (if needed)
|
||||
let isValid = $derived(username.length > 0);
|
||||
// 4. Derived
|
||||
let isValid = $derived(formData.name.length > 0);
|
||||
|
||||
// 5. Effects
|
||||
$effect(() => { /* side effects */ });
|
||||
|
||||
// 6. Functions - prefix handlers with 'handle'
|
||||
function handleSubmit() { /* implementation */ }
|
||||
// 6. Handlers
|
||||
function handleSubmit() { /* impl */ }
|
||||
</script>
|
||||
```
|
||||
|
||||
### Naming Conventions
|
||||
|
||||
- **Components**: PascalCase (`LoginForm.svelte`, `PatientFormModal.svelte`)
|
||||
- **Files/Routes**: lowercase with hyphens (`+page.svelte`, `user-profile/`)
|
||||
- **Variables**: camelCase (`isLoading`, `userName`)
|
||||
- **Constants**: UPPER_SNAKE_CASE (`API_URL`, `STORAGE_KEY`)
|
||||
- **Stores**: camelCase, descriptive (`auth`, `userStore`)
|
||||
- **Event handlers**: prefix with `handle` (`handleSubmit`, `handleClick`)
|
||||
- **Form state**: `formLoading`, `formError`, `deleteConfirmOpen`
|
||||
|
||||
### Imports Order
|
||||
|
||||
1. Svelte imports (`svelte`, `$app/*`)
|
||||
2. $lib aliases (`$lib/stores/*`, `$lib/api/*`, `$lib/components/*`, `$lib/utils/*`)
|
||||
3. External libraries (`lucide-svelte`)
|
||||
4. Relative imports (minimize these, prefer `$lib`)
|
||||
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
src/
|
||||
lib/
|
||||
api/ # API client and endpoints (per feature)
|
||||
stores/ # Svelte stores (auth, config, valuesets)
|
||||
components/ # Reusable components (DataTable, Modal, Sidebar)
|
||||
utils/ # Utilities (toast, helpers)
|
||||
assets/ # Static assets
|
||||
routes/ # SvelteKit routes
|
||||
(app)/ # Route groups (protected)
|
||||
login/
|
||||
dashboard/
|
||||
```
|
||||
|
||||
### API Client Patterns
|
||||
## API Patterns
|
||||
|
||||
```javascript
|
||||
// src/lib/api/client.js - Base client handles auth, 401 redirects
|
||||
import { apiClient, get, post, put, patch, del } from '$lib/api/client.js';
|
||||
// src/lib/api/client.js - Use these helpers
|
||||
import { get, post, put, patch, del } from '$lib/api/client.js';
|
||||
|
||||
// src/lib/api/feature.js - Feature-specific endpoints with JSDoc
|
||||
// Feature endpoints (with JSDoc)
|
||||
export async function fetchItems(params = {}) {
|
||||
const query = new URLSearchParams(params).toString();
|
||||
return get(query ? `/api/items?${query}` : '/api/items');
|
||||
@ -118,8 +83,8 @@ export async function createItem(data) {
|
||||
return post('/api/items', data);
|
||||
}
|
||||
|
||||
export async function updateItem(data) {
|
||||
return patch('/api/items', data);
|
||||
export async function updateItem(id, data) {
|
||||
return patch(`/api/items/${id}`, data);
|
||||
}
|
||||
|
||||
export async function deleteItem(id) {
|
||||
@ -127,45 +92,46 @@ export async function deleteItem(id) {
|
||||
}
|
||||
```
|
||||
|
||||
### Store Patterns
|
||||
## Store Patterns
|
||||
|
||||
```javascript
|
||||
// Use writable for stores with localStorage persistence
|
||||
import { writable } from 'svelte/store';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
function createStore() {
|
||||
const getInitialState = () => {
|
||||
if (!browser) return { data: null };
|
||||
return { data: JSON.parse(localStorage.getItem('key')) };
|
||||
return JSON.parse(localStorage.getItem('key'));
|
||||
};
|
||||
|
||||
const { subscribe, set, update } = writable(getInitialState());
|
||||
const { subscribe, set } = writable(getInitialState());
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
setData: (data) => {
|
||||
if (browser) localStorage.setItem('key', JSON.stringify(data));
|
||||
set({ data });
|
||||
set(data);
|
||||
}
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### Component Patterns
|
||||
## Component Patterns
|
||||
|
||||
```svelte
|
||||
<!-- Use $bindable for two-way props -->
|
||||
let { open = $bindable(false), selected = $bindable(null) } = $props();
|
||||
<!-- Modal with $bindable props -->
|
||||
<Modal bind:open={showModal} title="Edit" size="lg">
|
||||
{#snippet children()}
|
||||
<form>...</form>
|
||||
{/snippet}
|
||||
{#snippet footer()}
|
||||
<button class="btn btn-primary">Save</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<!-- Use snippets for slot content -->
|
||||
{@render children?.()}
|
||||
{@render footer()}
|
||||
|
||||
<!-- Dialog with backdrop handling -->
|
||||
<dialog class="modal" class:modal-open={open}>
|
||||
<!-- Dialog with backdrop -->
|
||||
<dialog class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<button onclick={close}>X</button>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop" onclick={handleBackdropClick}>
|
||||
@ -174,52 +140,22 @@ let { open = $bindable(false), selected = $bindable(null) } = $props();
|
||||
</dialog>
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
## Error Handling
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const result = await api.fetchData();
|
||||
toastSuccess('Operation successful');
|
||||
success('Operation successful');
|
||||
} catch (err) {
|
||||
const message = err.message || 'An unexpected error occurred';
|
||||
toastError(message);
|
||||
error(message);
|
||||
console.error('Operation failed:', err);
|
||||
}
|
||||
```
|
||||
|
||||
### Styling with Tailwind & DaisyUI
|
||||
|
||||
- DaisyUI components: `btn`, `card`, `alert`, `input`, `navbar`, `modal`, `dropdown`, `menu`
|
||||
- Color scheme: `primary` (emerald), `secondary` (dark blue), `accent` (royal blue)
|
||||
- Custom compact classes: `.compact-y`, `.compact-p`, `.compact-input`, `.compact-btn`, `.compact-card`
|
||||
- Size modifiers: `.btn-sm`, `.input-sm`, `.select-sm` for compact forms
|
||||
|
||||
### Authentication Patterns
|
||||
|
||||
- Auth state in `$lib/stores/auth.js` using writable store
|
||||
- Check `$auth.isAuthenticated` in layout `onMount`
|
||||
- Redirect to `/login` if unauthenticated using `goto('/login')`
|
||||
- API client auto-redirects on 401 responses
|
||||
|
||||
### Runtime Config Pattern
|
||||
## Form Patterns
|
||||
|
||||
```javascript
|
||||
// Use runtime config for API URL that can be changed at runtime
|
||||
import { config } from '$lib/stores/config.js';
|
||||
function getApiUrl() {
|
||||
return config.getApiUrl() || import.meta.env.VITE_API_URL || '';
|
||||
}
|
||||
```
|
||||
|
||||
### LocalStorage
|
||||
|
||||
- Only access in browser: check `browser` from `$app/environment`
|
||||
- Use descriptive keys: `clqms_username`, `clqms_remember`, `auth_token`
|
||||
|
||||
### Form Handling Patterns
|
||||
|
||||
```javascript
|
||||
// Form state with validation
|
||||
let formLoading = $state(false);
|
||||
let formError = $state('');
|
||||
let formData = $state({ username: '', password: '' });
|
||||
@ -238,7 +174,7 @@ async function handleSubmit() {
|
||||
formLoading = true;
|
||||
try {
|
||||
await api.submit(formData);
|
||||
toastSuccess('Success');
|
||||
success('Success');
|
||||
} catch (err) {
|
||||
formError = err.message;
|
||||
} finally {
|
||||
@ -247,31 +183,43 @@ async function handleSubmit() {
|
||||
}
|
||||
```
|
||||
|
||||
### Toast/Notification System
|
||||
## Styling (DaisyUI + Tailwind)
|
||||
|
||||
```javascript
|
||||
import { success, error, info, warning } from '$lib/utils/toast.js';
|
||||
- **Components**: `btn`, `card`, `alert`, `input`, `navbar`, `modal`, `dropdown`
|
||||
- **Colors**: `primary` (emerald), `secondary` (dark blue), `accent` (royal blue)
|
||||
- **Sizes**: `btn-sm`, `input-sm`, `select-sm` for compact forms
|
||||
- **Custom**: `.compact-y`, `.compact-p`, `.compact-input`
|
||||
|
||||
## Authentication
|
||||
|
||||
- Check `$auth.isAuthenticated` in layout `onMount`
|
||||
- Redirect to `/login` if unauthenticated using `goto('/login')`
|
||||
- API client auto-redirects on 401
|
||||
|
||||
## LocalStorage
|
||||
|
||||
- Only access in browser: check `browser` from `$app/environment`
|
||||
- Use descriptive keys: `clqms_username`, `auth_token`
|
||||
|
||||
## Project Structure
|
||||
|
||||
// Use toast notifications for user feedback
|
||||
success('Item created successfully');
|
||||
error('Failed to create item');
|
||||
info('New message received');
|
||||
warning('Action requires confirmation');
|
||||
```
|
||||
|
||||
## Proxy Configuration
|
||||
|
||||
API requests to `/api` are proxied to `http://localhost:8000` in dev. See `vite.config.js`.
|
||||
|
||||
## API Documentation
|
||||
|
||||
API Reference (Swagger UI): https://clqms01-api.services-summit.my.id/swagger/
|
||||
src/
|
||||
lib/
|
||||
api/ # API clients per feature
|
||||
stores/ # Svelte stores
|
||||
components/ # Reusable components
|
||||
utils/ # Utilities (toast, helpers)
|
||||
routes/ # SvelteKit routes
|
||||
(app)/ # Route groups (protected)
|
||||
login/
|
||||
dashboard/
|
||||
```
|
||||
|
||||
## Important Notes
|
||||
|
||||
- No ESLint or Prettier configured yet - add if needed
|
||||
- No test framework configured yet
|
||||
- Uses Svelte 5 runes: `$props`, `$state`, `$derived`, `$effect`, `$bindable`
|
||||
- SvelteKit file-based routing with `+page.svelte`, `+layout.svelte`
|
||||
- Uses Svelte 5: `$props`, `$state`, `$derived`, `$effect`, `$bindable`
|
||||
- Static adapter configured for static export
|
||||
- Runtime config allows API URL changes without rebuild
|
||||
- API proxy: `/api` → `http://localhost:8000` (dev)
|
||||
- API Docs: https://clqms01-api.services-summit.my.id/swagger/
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
Monitor,
|
||||
Filter,
|
||||
X,
|
||||
FileText,
|
||||
} from 'lucide-svelte';
|
||||
|
||||
let loading = $state(false);
|
||||
@ -27,9 +28,11 @@
|
||||
let modalOpen = $state(false);
|
||||
let modalMode = $state('create');
|
||||
let modalData = $state(null);
|
||||
let modalGroupData = $state(null);
|
||||
let deleting = $state(false);
|
||||
let deleteConfirmOpen = $state(false);
|
||||
let deleteItem = $state(null);
|
||||
let deleteGroupMode = $state(false);
|
||||
|
||||
// Filter states
|
||||
let filterHostType = $state('');
|
||||
@ -38,28 +41,57 @@
|
||||
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' },
|
||||
{ key: 'HostInfo', label: 'Host System', class: 'w-48' },
|
||||
{ key: 'ClientInfo', label: 'Client System', class: 'w-48' },
|
||||
{ key: 'TestCount', label: 'Tests', class: 'w-24 text-center' },
|
||||
{ key: 'TestPreview', label: 'Test Codes', class: 'flex-1' },
|
||||
{ key: 'actions', label: 'Actions', class: 'w-32 text-center' },
|
||||
];
|
||||
|
||||
// Derived filtered test maps
|
||||
let filteredTestMaps = $derived(
|
||||
testMaps.filter((mapping) => {
|
||||
// Group test mappings by HostType/HostID/ClientType/ClientID
|
||||
let groupedTestMaps = $derived(() => {
|
||||
const groups = new Map();
|
||||
|
||||
testMaps.forEach((mapping) => {
|
||||
const key = `${mapping.HostType || ''}|${mapping.HostID || ''}|${mapping.ClientType || ''}|${mapping.ClientID || ''}`;
|
||||
|
||||
if (!groups.has(key)) {
|
||||
groups.set(key, {
|
||||
key,
|
||||
HostType: mapping.HostType || '',
|
||||
HostID: mapping.HostID || '',
|
||||
ClientType: mapping.ClientType || '',
|
||||
ClientID: mapping.ClientID || '',
|
||||
mappings: [],
|
||||
testCodes: [],
|
||||
});
|
||||
}
|
||||
|
||||
const group = groups.get(key);
|
||||
group.mappings.push(mapping);
|
||||
if (mapping.HostTestCode) {
|
||||
group.testCodes.push(mapping.HostTestCode);
|
||||
}
|
||||
});
|
||||
|
||||
return Array.from(groups.values());
|
||||
});
|
||||
|
||||
// Derived filtered grouped test maps
|
||||
let filteredGroupedTestMaps = $derived(
|
||||
groupedTestMaps().filter((group) => {
|
||||
const matchesHostType =
|
||||
!filterHostType ||
|
||||
(mapping.HostType && mapping.HostType.toLowerCase().includes(filterHostType.toLowerCase()));
|
||||
(group.HostType && group.HostType.toLowerCase().includes(filterHostType.toLowerCase()));
|
||||
const matchesHostID =
|
||||
!filterHostID ||
|
||||
(mapping.HostID && mapping.HostID.toLowerCase().includes(filterHostID.toLowerCase()));
|
||||
(group.HostID && group.HostID.toLowerCase().includes(filterHostID.toLowerCase()));
|
||||
const matchesClientType =
|
||||
!filterClientType ||
|
||||
(mapping.ClientType && mapping.ClientType.toLowerCase().includes(filterClientType.toLowerCase()));
|
||||
(group.ClientType && group.ClientType.toLowerCase().includes(filterClientType.toLowerCase()));
|
||||
const matchesClientID =
|
||||
!filterClientID ||
|
||||
(mapping.ClientID && mapping.ClientID.toLowerCase().includes(filterClientID.toLowerCase()));
|
||||
(group.ClientID && group.ClientID.toLowerCase().includes(filterClientID.toLowerCase()));
|
||||
|
||||
return matchesHostType && matchesHostID && matchesClientType && matchesClientID;
|
||||
})
|
||||
@ -95,12 +127,15 @@
|
||||
function openCreateModal() {
|
||||
modalMode = 'create';
|
||||
modalData = null;
|
||||
modalGroupData = null;
|
||||
modalOpen = true;
|
||||
}
|
||||
|
||||
function openEditModal(row) {
|
||||
function openEditGroupModal(group) {
|
||||
modalMode = 'edit';
|
||||
modalData = row;
|
||||
modalGroupData = group;
|
||||
// Pass the first mapping as initial data, modal will handle the rest
|
||||
modalData = group.mappings[0] || null;
|
||||
modalOpen = true;
|
||||
}
|
||||
|
||||
@ -108,21 +143,33 @@
|
||||
loadTestMaps();
|
||||
}
|
||||
|
||||
function confirmDelete(row) {
|
||||
deleteItem = row;
|
||||
function confirmDeleteGroup(group) {
|
||||
deleteItem = group;
|
||||
deleteGroupMode = true;
|
||||
deleteConfirmOpen = true;
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
deleting = true;
|
||||
try {
|
||||
await deleteTestMap(deleteItem.TestMapID);
|
||||
toastSuccess('Test mapping deleted successfully');
|
||||
if (deleteGroupMode && deleteItem) {
|
||||
// Delete all mappings in the group
|
||||
const deletePromises = deleteItem.mappings.map((mapping) =>
|
||||
deleteTestMap(mapping.TestMapID)
|
||||
);
|
||||
await Promise.all(deletePromises);
|
||||
toastSuccess(`Deleted ${deleteItem.mappings.length} test mapping(s) successfully`);
|
||||
} else if (deleteItem?.TestMapID) {
|
||||
// Delete single mapping (fallback)
|
||||
await deleteTestMap(deleteItem.TestMapID);
|
||||
toastSuccess('Test mapping deleted successfully');
|
||||
}
|
||||
deleteConfirmOpen = false;
|
||||
deleteItem = null;
|
||||
deleteGroupMode = false;
|
||||
await loadTestMaps();
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to delete test mapping');
|
||||
toastError(err.message || 'Failed to delete test mapping(s)');
|
||||
} finally {
|
||||
deleting = false;
|
||||
}
|
||||
@ -134,6 +181,16 @@
|
||||
filterClientType = '';
|
||||
filterClientID = '';
|
||||
}
|
||||
|
||||
function getTestCodesPreview(testCodes, maxCount = 3) {
|
||||
if (!testCodes || testCodes.length === 0) return '-';
|
||||
const displayCodes = testCodes.slice(0, maxCount);
|
||||
const remaining = testCodes.length - maxCount;
|
||||
if (remaining > 0) {
|
||||
return `${displayCodes.join(', ')} +${remaining} more`;
|
||||
}
|
||||
return displayCodes.join(', ');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-4">
|
||||
@ -213,7 +270,7 @@
|
||||
|
||||
<!-- Data Table -->
|
||||
<div class="bg-base-100 rounded-lg shadow border border-base-200">
|
||||
{#if !loading && filteredTestMaps.length === 0}
|
||||
{#if !loading && filteredGroupedTestMaps.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">
|
||||
@ -247,26 +304,55 @@
|
||||
{:else}
|
||||
<DataTable
|
||||
{columns}
|
||||
data={filteredTestMaps}
|
||||
data={filteredGroupedTestMaps}
|
||||
{loading}
|
||||
emptyMessage="No test mappings found"
|
||||
hover={true}
|
||||
bordered={false}
|
||||
>
|
||||
{#snippet cell({ column, row, value })}
|
||||
{#if column.key === 'actions'}
|
||||
{#if column.key === 'HostInfo'}
|
||||
<div class="flex items-center gap-2">
|
||||
<Server class="w-4 h-4 text-primary flex-shrink-0" />
|
||||
<div>
|
||||
<div class="font-medium text-sm">{row.HostType || '-'}</div>
|
||||
<div class="text-xs text-gray-500">{row.HostID || '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if column.key === 'ClientInfo'}
|
||||
<div class="flex items-center gap-2">
|
||||
<Monitor class="w-4 h-4 text-secondary flex-shrink-0" />
|
||||
<div>
|
||||
<div class="font-medium text-sm">{row.ClientType || '-'}</div>
|
||||
<div class="text-xs text-gray-500">{row.ClientID || '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if column.key === 'TestCount'}
|
||||
<div class="flex justify-center">
|
||||
<span class="badge badge-primary badge-sm">
|
||||
{row.mappings.length}
|
||||
</span>
|
||||
</div>
|
||||
{:else if column.key === 'TestPreview'}
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<FileText class="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
<span class="text-gray-600 truncate" title={row.testCodes.join(', ')}>
|
||||
{getTestCodesPreview(row.testCodes)}
|
||||
</span>
|
||||
</div>
|
||||
{:else if column.key === 'actions'}
|
||||
<div class="flex justify-center gap-1">
|
||||
<button
|
||||
class="btn btn-sm btn-ghost"
|
||||
onclick={() => openEditModal(row)}
|
||||
title="Edit mapping"
|
||||
onclick={() => openEditGroupModal(row)}
|
||||
title="Edit all {row.mappings.length} test mapping(s)"
|
||||
>
|
||||
<Edit2 class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-ghost text-error"
|
||||
onclick={() => confirmDelete(row)}
|
||||
title="Delete mapping"
|
||||
onclick={() => confirmDeleteGroup(row)}
|
||||
title="Delete all {row.mappings.length} test mapping(s)"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
@ -285,14 +371,21 @@
|
||||
bind:open={modalOpen}
|
||||
mode={modalMode}
|
||||
initialData={modalData}
|
||||
groupData={modalGroupData}
|
||||
{containers}
|
||||
onSave={handleModalSave}
|
||||
/>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<Modal bind:open={deleteConfirmOpen} title="Confirm Delete Mapping" size="sm">
|
||||
<Modal bind:open={deleteConfirmOpen} title={deleteGroupMode ? 'Confirm Delete Group' : '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>
|
||||
<p class="text-base-content/80">
|
||||
{#if deleteGroupMode}
|
||||
Are you sure you want to delete all {deleteItem?.mappings?.length || 0} test mapping(s) in this group?
|
||||
{:else}
|
||||
Are you sure you want to delete this test mapping?
|
||||
{/if}
|
||||
</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>
|
||||
@ -302,6 +395,12 @@
|
||||
<span class="text-gray-500">Client:</span>
|
||||
<strong class="text-base-content">{deleteItem?.ClientType} / {deleteItem?.ClientID}</strong>
|
||||
</p>
|
||||
{#if deleteGroupMode && deleteItem?.testCodes?.length > 0}
|
||||
<p class="text-sm">
|
||||
<span class="text-gray-500">Tests:</span>
|
||||
<strong class="text-base-content">{deleteItem.testCodes.slice(0, 5).join(', ')}{deleteItem.testCodes.length > 5 ? '...' : ''}</strong>
|
||||
</p>
|
||||
{/if}
|
||||
</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">
|
||||
|
||||
@ -8,9 +8,10 @@
|
||||
Server,
|
||||
Monitor,
|
||||
FlaskConical,
|
||||
AlertCircle,
|
||||
} from 'lucide-svelte';
|
||||
|
||||
let { open = $bindable(false), mode = 'create', initialData = null, containers = [], onSave } = $props();
|
||||
let { open = $bindable(false), mode = 'create', initialData = null, groupData = null, containers = [], onSave } = $props();
|
||||
|
||||
let saving = $state(false);
|
||||
|
||||
@ -41,7 +42,27 @@
|
||||
function initializeModal() {
|
||||
formErrors = {};
|
||||
|
||||
if (mode === 'edit' && initialData) {
|
||||
if (mode === 'edit' && groupData) {
|
||||
// Edit mode with group data - load all mappings in the group
|
||||
modalContext = {
|
||||
HostType: groupData.HostType || '',
|
||||
HostID: groupData.HostID || '',
|
||||
ClientType: groupData.ClientType || '',
|
||||
ClientID: groupData.ClientID || '',
|
||||
};
|
||||
|
||||
// Load all mappings from the group
|
||||
modalRows = groupData.mappings.map((mapping) => ({
|
||||
TestMapID: mapping.TestMapID,
|
||||
HostTestCode: mapping.HostTestCode || '',
|
||||
HostTestName: mapping.HostTestName || '',
|
||||
ConDefID: mapping.ConDefID || null,
|
||||
ClientTestCode: mapping.ClientTestCode || '',
|
||||
ClientTestName: mapping.ClientTestName || '',
|
||||
isNew: false,
|
||||
}));
|
||||
} else if (mode === 'edit' && initialData) {
|
||||
// Legacy edit mode (single mapping)
|
||||
modalContext = {
|
||||
HostType: initialData.HostType || '',
|
||||
HostID: initialData.HostID || '',
|
||||
@ -58,6 +79,7 @@
|
||||
isNew: false,
|
||||
}];
|
||||
} else {
|
||||
// Create mode
|
||||
modalContext = {
|
||||
HostType: '',
|
||||
HostID: '',
|
||||
@ -184,12 +206,25 @@
|
||||
|
||||
<Modal
|
||||
bind:open
|
||||
title={mode === 'create' ? 'Add Test Mapping' : 'Edit Test Mapping'}
|
||||
title={mode === 'create' ? 'Add Test Mapping' : `Edit Test Mapping${groupData ? 's' : ''} (${modalRows.length})`}
|
||||
size="xl"
|
||||
>
|
||||
<div class="space-y-4 max-h-[70vh] overflow-y-auto">
|
||||
<!-- Top Section: Host and Client side-by-side -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b border-base-300 pb-4">
|
||||
<div class="flex flex-col max-h-[70vh]">
|
||||
<!-- Sticky Top Section: Info banner + Host and Client -->
|
||||
<div class="flex-shrink-0 bg-base-100 z-10">
|
||||
<!-- Info banner for group editing -->
|
||||
{#if mode === 'edit' && groupData}
|
||||
<div class="alert alert-info alert-sm mb-4">
|
||||
<AlertCircle class="w-4 h-4" />
|
||||
<div>
|
||||
<span class="font-medium">Editing {modalRows.length} test mapping(s)</span>
|
||||
<span class="text-sm opacity-80">in this host-client group</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Top Section: Host and Client side-by-side -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b border-base-300 pb-4">
|
||||
<!-- Host Section -->
|
||||
<div class="space-y-2">
|
||||
<h3 class="text-xs font-medium text-gray-600 uppercase tracking-wide flex items-center gap-1">
|
||||
@ -289,8 +324,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Middle Section: Editable Table -->
|
||||
<div class="space-y-2">
|
||||
<!-- Scrollable Middle Section: Editable Table -->
|
||||
<div class="flex-1 overflow-y-auto space-y-1 py-2">
|
||||
<h3 class="text-xs font-medium text-gray-600 uppercase tracking-wide flex items-center gap-1">
|
||||
<FlaskConical class="w-3 h-3" />
|
||||
Test Mappings
|
||||
@ -298,40 +333,40 @@
|
||||
</h3>
|
||||
|
||||
<div class="overflow-x-auto border border-base-300 rounded-lg">
|
||||
<table class="table table-compact w-full">
|
||||
<table class="table table-compact w-full [&_td]:py-1 [&_th]:py-1">
|
||||
<thead class="bg-base-200">
|
||||
<tr>
|
||||
<th class="text-xs">Host Test Code</th>
|
||||
<th class="text-xs">Host Test Name</th>
|
||||
<th class="text-xs w-48">Container</th>
|
||||
<th class="text-xs">Client Test Code</th>
|
||||
<th class="text-xs">Client Test Name</th>
|
||||
<th class="text-xs w-10"></th>
|
||||
<th class="text-xs px-2">Host Test Code</th>
|
||||
<th class="text-xs px-2">Host Test Name</th>
|
||||
<th class="text-xs w-48 px-2">Container</th>
|
||||
<th class="text-xs px-2">Client Test Code</th>
|
||||
<th class="text-xs px-2">Client Test Name</th>
|
||||
<th class="text-xs w-10 px-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each modalRows as row, index (index)}
|
||||
<tr class="hover:bg-base-100">
|
||||
<td>
|
||||
<td class="px-2">
|
||||
<input
|
||||
type="text"
|
||||
class="input input-xs input-bordered w-full"
|
||||
class="input input-xs input-bordered w-full m-0"
|
||||
bind:value={row.HostTestCode}
|
||||
placeholder="Code"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<td class="px-2">
|
||||
<input
|
||||
type="text"
|
||||
class="input input-xs input-bordered w-full"
|
||||
class="input input-xs input-bordered w-full m-0"
|
||||
bind:value={row.HostTestName}
|
||||
placeholder="Name"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<td class="px-2">
|
||||
{#if modalContext.ClientType === 'INST'}
|
||||
<select
|
||||
class="select select-xs select-bordered w-full"
|
||||
class="select select-xs select-bordered w-full m-0"
|
||||
bind:value={row.ConDefID}
|
||||
>
|
||||
<option value={null}>Select container...</option>
|
||||
@ -345,32 +380,32 @@
|
||||
<span class="text-xs text-error">{formErrors.rows[index].ConDefID}</span>
|
||||
{/if}
|
||||
{:else}
|
||||
<select class="select select-xs select-bordered w-full" disabled>
|
||||
<select class="select select-xs select-bordered w-full m-0" disabled>
|
||||
<option>Only for INST</option>
|
||||
</select>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<td class="px-2">
|
||||
<input
|
||||
type="text"
|
||||
class="input input-xs input-bordered w-full"
|
||||
class="input input-xs input-bordered w-full m-0"
|
||||
bind:value={row.ClientTestCode}
|
||||
placeholder="Code"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<td class="px-2">
|
||||
<input
|
||||
type="text"
|
||||
class="input input-xs input-bordered w-full"
|
||||
class="input input-xs input-bordered w-full m-0"
|
||||
bind:value={row.ClientTestName}
|
||||
placeholder="Name"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<td class="px-2">
|
||||
<button
|
||||
class="btn btn-ghost btn-xs text-error"
|
||||
onclick={() => removeMappingRow(index)}
|
||||
disabled={modalRows.length === 1}
|
||||
disabled={modalRows.length === 1 && mode === 'edit'}
|
||||
title="Remove row"
|
||||
>
|
||||
<Trash2 class="w-3 h-3" />
|
||||
@ -391,8 +426,8 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Bottom Section: Add Button -->
|
||||
<div class="flex justify-center pt-2 border-t border-base-300">
|
||||
<!-- Sticky Bottom Section: Add Button -->
|
||||
<div class="flex-shrink-0 flex justify-center pt-2 border-t border-base-300 bg-base-100 pb-2">
|
||||
<button class="btn btn-sm btn-outline" onclick={addMappingRow}>
|
||||
<Plus class="w-4 h-4 mr-1" />
|
||||
Add Mapping
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user