clqms-shadcn-v1/src/lib/components/dictionary/testmap/page/view-page.svelte

<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";
    import * as Table from "$lib/components/ui/table/index.js";

    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 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">
            {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="flex flex-col px-4 py-2 gap-2">
                    <div class="{section.class} w-full">
                        {#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}