mirror of
https://github.com/faiztyanirh/clqms-shadcn-v1.git
synced 2026-04-25 10:32:06 +07:00
continue testmap view
This commit is contained in:
parent
18bb82ac19
commit
d824a757ac
@ -26,12 +26,11 @@ export const detailSections = [
|
||||
{
|
||||
class: "grid grid-cols-2 gap-4 items-center",
|
||||
fields: [
|
||||
{ key: "HostType", label: "Host Type" },
|
||||
{ key: "HostTypeLabel", label: "Host Type" },
|
||||
{ key: "ClientTypeLabel", label: "Client Type" },
|
||||
{ key: "HostID", label: "Host ID" },
|
||||
{ key: "HostName", label: "Host Name" },
|
||||
{ key: "ClientType", label: "Client Type" },
|
||||
{ key: "ClientID", label: "Client ID" },
|
||||
{ key: "ClientName", label: "Client Name" },
|
||||
{ key: "details", label: "Details", fullWidth: true },
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
123
src/lib/components/dictionary/testmap/page/view-page copy.svelte
Normal file
123
src/lib/components/dictionary/testmap/page/view-page copy.svelte
Normal file
@ -0,0 +1,123 @@
|
||||
<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";
|
||||
|
||||
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">
|
||||
<dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
||||
{label}
|
||||
</dt>
|
||||
<dd>
|
||||
{#if value && Array.isArray(value) && value.length > 0}
|
||||
<table class="w-full text-sm border border-border rounded-md overflow-hidden">
|
||||
<thead class="bg-muted text-muted-foreground">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Host Test Code</th>
|
||||
<th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Host Test Name</th>
|
||||
<th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Client Test Code</th>
|
||||
<th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Client Test Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each value as row, i}
|
||||
<tr class={i % 2 === 0 ? 'bg-background' : 'bg-muted/30'}>
|
||||
<td class="px-3 py-2">{row.HostTestCode ?? '-'}</td>
|
||||
<td class="px-3 py-2">{row.HostTestName ?? '-'}</td>
|
||||
<td class="px-3 py-2">{row.ClientTestCode ?? '-'}</td>
|
||||
<td class="px-3 py-2">{row.ClientTestName ?? '-'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{: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="p-4">
|
||||
<div class={section.class}>
|
||||
{#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}
|
||||
@ -4,12 +4,14 @@
|
||||
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 test = $derived(masterDetail?.selectedItem?.data);
|
||||
let testMap = $derived(masterDetail?.selectedItem?.data);
|
||||
$inspect(testMap)
|
||||
|
||||
const handlers = {
|
||||
editTest: () => masterDetail.enterEdit("data"),
|
||||
@ -18,19 +20,57 @@
|
||||
const actions = viewActions(handlers);
|
||||
|
||||
function getFieldValue(field) {
|
||||
if (!test) return "-";
|
||||
if (!testMap) return "-";
|
||||
|
||||
if (field.keys) {
|
||||
return field.keys
|
||||
.map(k => field.parentKey ? test[field.parentKey]?.[k] : test[k])
|
||||
.map(k => field.parentKey ? testMap[field.parentKey]?.[k] : testMap[k])
|
||||
.filter(val => val && val.trim() !== "")
|
||||
.join(" / ");
|
||||
}
|
||||
|
||||
return field.parentKey ? test[field.parentKey]?.[field.key] : test[field.key];
|
||||
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">
|
||||
@ -49,43 +89,40 @@
|
||||
{#if masterDetail.selectedItem}
|
||||
<div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
|
||||
<TopbarWrapper
|
||||
title={masterDetail.selectedItem?.data?.TestSiteName}
|
||||
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="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 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>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class={section.class}>
|
||||
{#each section.fields as field}
|
||||
{: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
|
||||
})}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<ReusableEmpty icon={MapIcon} desc="Select a test to see details"/>
|
||||
<ReusableEmpty icon={MapIcon} desc="Select a test map to see details"/>
|
||||
{/if}
|
||||
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { Separator } from "$lib/components/ui/separator/index.js";
|
||||
import { useMasterDetail } from "$lib/components/composable/use-master-detail.svelte";
|
||||
import { getTestMaps, createTestMap, editTestMap } from "$lib/components/dictionary/testmap/api/testmap-api";
|
||||
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";
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
const masterDetail = useMasterDetail({
|
||||
onSelect: async (row) => {
|
||||
return await getTestMaps(row.TestMapID);
|
||||
return await getTestMap(row.TestMapID);
|
||||
},
|
||||
formConfig: {
|
||||
schema: testMapSchema,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user