52 lines
2.0 KiB
Svelte

<script>
import { Separator } from "$lib/components/ui/separator/index.js";
import { useMasterDetail } from "$lib/components/composable/use-master-detail.svelte";
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";
import EditPage from "$lib/components/dictionary/testmap/page/edit-page.svelte";
import { testMapSchema, testMapInitialForm, testMapDefaultErrors, testMapFormFields, getTestMapFormActions } from "$lib/components/dictionary/testmap/config/testmap-form-config";
const masterDetail = useMasterDetail({
onSelect: async (row) => {
return await getTestMap(row.TestMapID);
},
formConfig: {
schema: testMapSchema,
initialForm: testMapInitialForm,
defaultErrors: testMapDefaultErrors,
mode: 'create',
modeOpt: 'default',
saveEndpoint: createTestMap,
editEndpoint: editTestMap,
idKey: 'TestMapID',
}
});
const pageContext = {
masterDetail,
formFields: testMapFormFields,
formActions: getTestMapFormActions,
schema: testMapSchema,
initialForm: testMapInitialForm,
}
</script>
<div class="flex w-full h-full overflow-hidden">
{#if masterDetail.showMaster}
<MasterPage {masterDetail} />
{/if}
<Separator orientation="vertical"/>
{#if masterDetail.showDetail}
<main class={`${masterDetail.isMobile ? 'w-full' : masterDetail.isFormMode ? 'w-[97%] flex flex-col items-start' : 'w-[65%]'} h-full overflow-y-auto flex flex-col items-center transition-all duration-300`}>
{#if masterDetail.mode === "view"}
<ViewPage context={pageContext}/>
{:else if masterDetail.mode === "create"}
<CreatePage context={pageContext}/>
{:else if masterDetail.mode === "edit"}
<EditPage context={pageContext}/>
{/if}
</main>
{/if}
</div>