continue testmap view

src/lib/components/dictionary/testmap/config/testmap-config.js

@@ -26,12 +26,11 @@ export const detailSections = [
     {
         class: "grid grid-cols-2 gap-4 items-center",
         fields: [
-            { key: "HostType", label: "Host Type" },
+            { key: "HostTypeLabel", label: "Host Type" },
+            { key: "ClientTypeLabel", label: "Client Type" },
             { key: "HostID", label: "Host ID" },
-            { key: "HostName", label: "Host Name" },
-            { key: "ClientType", label: "Client Type" },
             { key: "ClientID", label: "Client ID" },
-            { key: "ClientName", label: "Client Name" },
+            { key: "details", label: "Details", fullWidth: true },
         ]
     },
 ];

src/lib/components/dictionary/testmap/page/view-page copy.svelte

@@ -0,0 +1,123 @@
+<script>
+    import { formatUTCDate } from "$lib/utils/formatUTCDate";
+    import { detailSections, viewActions } from "$lib/components/dictionary/testmap/config/testmap-config";
+    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
+    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
+    import MapIcon from "@lucide/svelte/icons/map";
+
+    let props = $props();
+
+    const { masterDetail, formFields, formActions, schema } = props.context;
+
+    let testMap = $derived(masterDetail?.selectedItem?.data);
+    $inspect(testMap)
+
+    const handlers = {
+        editTest: () => masterDetail.enterEdit("data"),
+    };
+
+    const actions = viewActions(handlers);
+
+    function getFieldValue(field) {
+        if (!testMap) return "-";
+
+        if (field.keys) {
+            return field.keys
+                .map(k => field.parentKey ? testMap[field.parentKey]?.[k] : testMap[k])
+                .filter(val => val && val.trim() !== "")
+                .join(" / ");
+        }
+
+        return field.parentKey ? testMap[field.parentKey]?.[field.key] : testMap[field.key];
+    }
+</script>
+
+{#snippet DetailsTable({ value, label })}
+    <div class="space-y-1.5">
+        <dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            {label}
+        </dt>
+        <dd>
+            {#if value && Array.isArray(value) && value.length > 0}
+                <table class="w-full text-sm border border-border rounded-md overflow-hidden">
+                    <thead class="bg-muted text-muted-foreground">
+                        <tr>
+                            <th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Host Test Code</th>
+                            <th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Host Test Name</th>
+                            <th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Client Test Code</th>
+                            <th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Client Test Name</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {#each value as row, i}
+                            <tr class={i % 2 === 0 ? 'bg-background' : 'bg-muted/30'}>
+                                <td class="px-3 py-2">{row.HostTestCode ?? '-'}</td>
+                                <td class="px-3 py-2">{row.HostTestName ?? '-'}</td>
+                                <td class="px-3 py-2">{row.ClientTestCode ?? '-'}</td>
+                                <td class="px-3 py-2">{row.ClientTestName ?? '-'}</td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            {:else}
+                <span class="text-sm font-medium">-</span>
+            {/if}
+        </dd>
+    </div>
+{/snippet}
+
+{#snippet Fieldset({ value, label, isUTCDate = false })}
+    <div class="space-y-1.5">
+        <dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            {label}
+        </dt>
+        <dd class="text-sm font-medium">
+            {#if isUTCDate}
+                {formatUTCDate(value)}
+            {:else}
+                {value ?? "-"}
+            {/if}
+        </dd>
+    </div>
+{/snippet}
+
+{#if masterDetail.selectedItem}
+    <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
+        <TopbarWrapper 
+            title={masterDetail.selectedItem?.data?.HostType}
+            {actions} 
+        />
+        <div class="flex-1 min-h-0 overflow-y-auto space-y-4">
+            {#each detailSections as section}
+                <div class="p-4">
+                    <div class={section.class}>
+                        {#each section.fields as field}
+                            {#if field.fullWidth}
+                                <div class="col-span-2">
+                                    {#if field.key === "details"}
+                                        {@render DetailsTable({ label: field.label, value: getFieldValue(field) })}
+                                    {:else}
+                                        {@render Fieldset({ label: field.label, value: getFieldValue(field), isUTCDate: field.isUTCDate })}
+                                    {/if}
+                                </div>
+                            {:else if field.key === "details"}
+                                {@render DetailsTable({
+                                    label: field.label,
+                                    value: getFieldValue(field),
+                                })}
+                            {:else}
+                                {@render Fieldset({
+                                    label: field.label,
+                                    value: getFieldValue(field),
+                                    isUTCDate: field.isUTCDate
+                                })}
+                            {/if}
+                        {/each}
+                    </div>
+                </div>
+            {/each}
+        </div>
+    </div>
+{:else}
+    <ReusableEmpty icon={MapIcon} desc="Select a test map to see details"/>
+{/if}

src/lib/components/dictionary/testmap/page/view-page.svelte

@@ -4,12 +4,14 @@
     import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import MapIcon from "@lucide/svelte/icons/map";
+    import * as Table from "$lib/components/ui/table/index.js";
 
     let props = $props();
 
     const { masterDetail, formFields, formActions, schema } = props.context;
 
-    let test = $derived(masterDetail?.selectedItem?.data);
+    let testMap = $derived(masterDetail?.selectedItem?.data);
+    $inspect(testMap)
 
     const handlers = {
         editTest: () => masterDetail.enterEdit("data"),
@@ -18,19 +20,57 @@
     const actions = viewActions(handlers);
 
     function getFieldValue(field) {
-        if (!test) return "-";
+        if (!testMap) return "-";
 
         if (field.keys) {
             return field.keys
-                .map(k => field.parentKey ? test[field.parentKey]?.[k] : test[k])
+                .map(k => field.parentKey ? testMap[field.parentKey]?.[k] : testMap[k])
                 .filter(val => val && val.trim() !== "")
                 .join(" / ");
         }
 
-        return field.parentKey ? test[field.parentKey]?.[field.key] : test[field.key];
+        return field.parentKey ? testMap[field.parentKey]?.[field.key] : testMap[field.key];
     }
 </script>
 
+{#snippet DetailsTable({ value, label })}
+    <div class="space-y-1.5 w-full">
+        <dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            {label}
+        </dt>
+        <dd>
+            {#if value && Array.isArray(value) && value.length > 0}
+                <div class="border rounded-md">
+                    <Table.Root>
+                         <Table.Header>
+                            <Table.Row>
+                                <Table.Head>Host Test Code</Table.Head>
+                                <Table.Head>Host Test Name</Table.Head>
+                                <Table.Head>Client Test Code</Table.Head>
+                                <Table.Head>Client Test Name</Table.Head>
+                                <Table.Head>Container</Table.Head>
+                            </Table.Row>
+                         </Table.Header>
+                         <Table.Body>
+                            {#each value as row, i}
+                                <Table.Row>
+                                    <Table.Cell>{row.HostTestCode ?? '-'}</Table.Cell>
+                                    <Table.Cell>{row.HostTestName ?? '-'}</Table.Cell>
+                                    <Table.Cell>{row.ClientTestCode ?? '-'}</Table.Cell>
+                                    <Table.Cell>{row.ClientTestName ?? '-'}</Table.Cell>
+                                    <Table.Cell>{row.ConDefID ?? '-'}</Table.Cell>
+                                </Table.Row>
+                            {/each}
+                         </Table.Body>
+                    </Table.Root>
+                </div>
+            {:else}
+                <span class="text-sm font-medium">-</span>
+            {/if}
+        </dd>
+    </div>
+{/snippet}
+
 {#snippet Fieldset({ value, label, isUTCDate = false })}
     <div class="space-y-1.5">
         <dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
@@ -49,43 +89,40 @@
 {#if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
-            title={masterDetail.selectedItem?.data?.TestSiteName} 
+            title={masterDetail.selectedItem?.data?.HostType}
             {actions} 
         />
         <div class="flex-1 min-h-0 overflow-y-auto space-y-4">
             {#each detailSections as section}
-                <div class="p-4">
+                <div class="flex flex-col px-4 py-2 gap-2">
-                    {#if section.groups}
+                    <div class="{section.class} w-full">
-                        <div class={section.class}>
-                            {#each section.groups as group}
-                                <div>
-                                    <div class={group.class}>
-                                        {#each group.fields as field}
-                                            {@render Fieldset({
-                                                label: field.label,
-                                                value: getFieldValue(field),
-                                                isUTCDate: field.isUTCDate
-                                            })}
-                                        {/each}
-                                    </div>
-                                </div>
-                            {/each}
-                        </div>
-                    {:else}
-                        <div class={section.class}>
                         {#each section.fields as field}
+                            {#if field.fullWidth}
+                                <div class="col-span-2">
+                                    {#if field.key === "details"}
+                                        {@render DetailsTable({ label: field.label, value: getFieldValue(field) })}
+                                    {:else}
+                                        {@render Fieldset({ label: field.label, value: getFieldValue(field), isUTCDate: field.isUTCDate })}
+                                    {/if}
+                                </div>
+                            {:else if field.key === "details"}
+                                {@render DetailsTable({
+                                    label: field.label,
+                                    value: getFieldValue(field),
+                                })}
+                            {:else}
                                 {@render Fieldset({
                                     label: field.label,
                                     value: getFieldValue(field),
                                     isUTCDate: field.isUTCDate
                                 })}
+                            {/if}
                         {/each}
                     </div>
-                    {/if}
                 </div>
             {/each}
         </div>
     </div>
 {:else}
-    <ReusableEmpty icon={MapIcon} desc="Select a test to see details"/>
+    <ReusableEmpty icon={MapIcon} desc="Select a test map to see details"/>
 {/if}

src/routes/dictionary/testmap/+page.svelte

@@ -1,7 +1,7 @@
 <script>
     import { Separator } from "$lib/components/ui/separator/index.js";
 	import { useMasterDetail } from "$lib/components/composable/use-master-detail.svelte";
-	import { getTestMaps, createTestMap, editTestMap } from "$lib/components/dictionary/testmap/api/testmap-api";
+	import { getTestMap, createTestMap, editTestMap } from "$lib/components/dictionary/testmap/api/testmap-api";
 	import MasterPage from "$lib/components/dictionary/testmap/page/master-page.svelte";
 	import ViewPage from "$lib/components/dictionary/testmap/page/view-page.svelte";
 	import CreatePage from "$lib/components/dictionary/testmap/page/create-page.svelte";
@@ -10,7 +10,7 @@
 
 	const masterDetail = useMasterDetail({
         onSelect: async (row) => {
-			return await getTestMaps(row.TestMapID);
+			return await getTestMap(row.TestMapID);
 		},
 		formConfig: {
 			schema: testMapSchema,