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

<script>
	import { locationColumns } from "$lib/components/dictionary/location/table/location-columns";
	import { getLocations, getLocation } from "$lib/components/dictionary/location/api/location-api";
    import { useSearch } from "$lib/components/composable/use-search.svelte";
    import { searchFields, locationActions } from "$lib/components/dictionary/location/config/location-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 MapPinXIcon from "@lucide/svelte/icons/map-pin-x";

    let props = $props();

    const search = useSearch(searchFields, getLocations);
    const initialForm = props.masterDetail.formState.form;
    const actions = locationActions(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}/>
{/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-center gap-4 tracking-widest font-semibold select-none">
                {#each "LOCATION".split("") as c}
                    <span class="leading-none">{c}</span>
                {/each}
            </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={columns} handleRowClick={props.masterDetail.select} {activeRowId} rowIdKey="InternalPID"/>
                    {:else}
                        <div class="flex h-full">
                            <ReusableEmpty icon={MapPinXIcon} desc="Try searching from search parameters"/>
                        </div>
                    {/if}
                </div>
            </div>
        {/if}
    </div>
</div>