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

<script>
    import { formatUTCDate } from "$lib/utils/formatUTCDate";
    import { detailSections, viewActions } from "$lib/components/dictionary/occupation/config/occupation-config";
    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
    import FolderXIcon from "@lucide/svelte/icons/folder-x";

    let props = $props();

    const { masterDetail, formFields, formActions, schema } = props.context;

    let occupation = $derived(masterDetail?.selectedItem?.data);

    const handlers = {
        editOccupation: () => masterDetail.enterEdit("data"),
    };

    const actions = viewActions(handlers);

    function getFieldValue(field) {
        if (!occupation) return "-";

        if (field.keys) {
            return field.keys
                .map(k => field.parentKey ? occupation[field.parentKey]?.[k] : occupation[k])
                .filter(val => val && val.trim() !== "")
                .join(" / ");
        }

        return field.parentKey ? occupation[field.parentKey]?.[field.key] : occupation[field.key];
    }
</script>

{#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.OccText} 
            {actions} 
        />
        <div class="flex-1 min-h-0 overflow-y-auto space-y-4">
            {#each detailSections as section}
                <div class="p-4">
                    {#if section.groups}
                        <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}
                                {@render Fieldset({
                                    label: field.label,
                                    value: getFieldValue(field),
                                    isUTCDate: field.isUTCDate
                                })}
                            {/each}
                        </div>
                    {/if}
                </div>
            {/each}
        </div>
    </div>
{:else}
    <ReusableEmpty icon={FolderXIcon} desc="Select an occupation to see details"/>
{/if}