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

<script>
	import { testMapColumns } from "$lib/components/dictionary/testmap/table/testmap-columns";
	import { getTestMap, getTestMaps } from "$lib/components/dictionary/testmap/api/testmap-api";
    import { useSearch } from "$lib/components/composable/use-search.svelte";
    import { searchFields, testMapActions } from "$lib/components/dictionary/testmap/config/testmap-config";
    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
    import ReusableSearchParam from "$lib/components/reusable/reusable-search-param.svelte";
    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
    import MapIcon from "@lucide/svelte/icons/map";
    import MoveLeftIcon from "@lucide/svelte/icons/move-left";

    let props = $props();

    const search = useSearch(searchFields, getTestMaps);
    const initialForm = props.masterDetail.formState.form;
    const actions = testMapActions(props.masterDetail, initialForm)
    actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;

	let activeRowId = $state(null);
</script>

{#snippet searchParamSnippet()} 
	<ReusableSearchParam {searchFields} 
        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
        selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
    />
{/snippet}

<div 
    role="button"
    tabindex="0"
    onclick={() => props.masterDetail.isFormMode && props.masterDetail.exitForm()}
    onkeydown={(e) => e.key === 'Enter' && props.masterDetail.isFormMode && props.masterDetail.exitForm()}
    class={`
        ${props.masterDetail.isMobile ? "w-full" : props.masterDetail.isFormMode ? "w-[3%] cursor-pointer" : "w-[35%]"} 
        transition-all duration-300 flex flex-col items-center p-2 h-full overflow-y-auto
    `}
>
    <div class={`flex w-full ${props.masterDetail.isFormMode ? "flex-col justify-center h-full items-center" : "flex-col justify-start h-full"}`} >
        {#if props.masterDetail.isFormMode}
            <span class="flex flex-col items-center justify-start gap-4 tracking-widest font-semibold select-none h-full">
                <MoveLeftIcon />
                <div class="flex flex-col items-center justify-center flex-grow gap-4">
                    {#each "BACK TO TEST MAP".split("") as c}
                        <span class="leading-none">{c}</span>
                    {/each}
                </div>
            </span>
        {/if}

        {#if !props.masterDetail.isFormMode}
            <div role="button" tabindex="0" class="flex flex-1 flex-col" onclick={(e) => e.stopPropagation()} onkeydown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                e.stopPropagation();
                }
            }}> 
                <TopbarWrapper {actions}/>
                <div class="flex-1 w-full h-full">
                    {#if search.searchData.length > 0}
                        <ReusableDataTable data={search.searchData} columns={testMapColumns} handleRowClick={props.masterDetail.select} {activeRowId} rowIdKey="TestMapID"/>
                    {:else}
                        <div class="flex h-full">
                            <ReusableEmpty icon={MapIcon} desc="Try searching from search parameters"/>
                        </div>
                    {/if}
                </div>
            </div>
        {/if}
    </div>
</div>