mirror of
https://github.com/faiztyanirh/clqms-shadcn-v1.git
synced 2026-04-22 09:35:34 +07:00
continue create page testmap
This commit is contained in:
parent
d824a757ac
commit
13d9e0e7cc
@ -126,10 +126,9 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
|
||||
<div>
|
||||
<Separator />
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row class="hover:bg-transparent">
|
||||
|
||||
@ -46,7 +46,6 @@ export const testMapDefaultErrors = {
|
||||
|
||||
export const testMapFormFields = [
|
||||
{
|
||||
title: 'Host & Client Information',
|
||||
rows: [
|
||||
{
|
||||
type: 'row',
|
||||
|
||||
@ -1 +1,305 @@
|
||||
cr
|
||||
<script>
|
||||
import { useDictionaryForm } from "$lib/components/composable/use-dictionary-form.svelte";
|
||||
import FormPageContainer from "$lib/components/reusable/form/form-page-container.svelte";
|
||||
import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
|
||||
import { toast } from "svelte-sonner";
|
||||
import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte";
|
||||
import { Separator } from "$lib/components/ui/separator/index.js";
|
||||
import PencilIcon from "@lucide/svelte/icons/pencil";
|
||||
import Trash2Icon from "@lucide/svelte/icons/trash-2";
|
||||
import * as Table from "$lib/components/ui/table/index.js";
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
import { untrack } from "svelte";
|
||||
import { API } from '$lib/config/api';
|
||||
|
||||
let props = $props();
|
||||
|
||||
let editingId = $state(null);
|
||||
let idCounter = $state(0);
|
||||
let tempMap = $state([]);
|
||||
|
||||
const { masterDetail, formFields, formActions, schema } = props.context;
|
||||
|
||||
const { formState } = masterDetail;
|
||||
|
||||
const helpers = useDictionaryForm(formState);
|
||||
|
||||
const handlers = {
|
||||
clearForm: () => {
|
||||
formState.reset();
|
||||
}
|
||||
};
|
||||
|
||||
const actions = formActions(handlers);
|
||||
|
||||
let showConfirm = $state(false);
|
||||
|
||||
function snapshotForm() {
|
||||
return untrack(() => {
|
||||
const f = formState.form;
|
||||
// const options = {};
|
||||
// for (const key in masterDetail.formState.selectOptions) {
|
||||
// options[key] = [...masterDetail.formState.selectOptions[key]];
|
||||
// }
|
||||
return {
|
||||
HostType: f.HostType ?? "",
|
||||
HostID: f.HostID ?? "",
|
||||
HostTestCode: f.HostTestCode ?? "",
|
||||
HostTestName: f.HostTestName ?? "",
|
||||
ClientType: f.ClientType ?? "",
|
||||
ClientID: f.ClientID ?? "",
|
||||
ClientTestCode: f.ClientTestCode ?? "",
|
||||
ClientTestName: f.ClientTestName ?? "",
|
||||
ConDefID: f.ConDefID ?? "",
|
||||
// options: options
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
formState.reset();
|
||||
editingId = null;
|
||||
}
|
||||
|
||||
function handleInsert() {
|
||||
const row = {
|
||||
id: ++idCounter,
|
||||
...snapshotForm()
|
||||
};
|
||||
|
||||
tempMap = [...tempMap, row];
|
||||
|
||||
resetForm();
|
||||
}
|
||||
|
||||
async function handleEdit(row) {
|
||||
editingId = row.id;
|
||||
|
||||
untrack(() => {
|
||||
const f = formState.form;
|
||||
console.log(row);
|
||||
f.HostType = row.HostType;
|
||||
f.HostID = row.HostID;
|
||||
f.HostTestCode = row.HostTestCode;
|
||||
f.HostTestName = row.HostTestName;
|
||||
f.ClientType = row.ClientType;
|
||||
f.ClientID = row.ClientID;
|
||||
f.ClientTestCode = row.ClientTestCode;
|
||||
f.ClientTestName = row.ClientTestName;
|
||||
f.ConDefID = row.ConDefID;
|
||||
|
||||
// if (row.options) {
|
||||
// for (const key in row.options) {
|
||||
// masterDetail.formState.selectOption[key] = row.options[key];
|
||||
// }
|
||||
// }
|
||||
});
|
||||
}
|
||||
|
||||
function handleUpdate() {
|
||||
tempMap = tempMap.map((row) =>
|
||||
row.id === editingId ? { id: row.id, ...snapshotForm() } : row
|
||||
);
|
||||
resetForm();
|
||||
}
|
||||
|
||||
function handleCancelEdit() {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
function handleRemove(id) {
|
||||
tempMap = tempMap.filter((row) => row.id !== id);
|
||||
if (editingId === id) {
|
||||
resetForm();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const result = await formState.save(masterDetail.mode);
|
||||
|
||||
toast('Test Map Created!');
|
||||
masterDetail?.exitForm(true);
|
||||
}
|
||||
|
||||
const primaryAction = $derived({
|
||||
label: 'Save',
|
||||
onClick: handleSave,
|
||||
disabled: helpers.hasErrors || formState.isSaving.current,
|
||||
loading: formState.isSaving.current
|
||||
});
|
||||
|
||||
const secondaryActions = [];
|
||||
|
||||
const mapFormFieldsTransformed = $derived.by(() => {
|
||||
return formFields.map((group) => ({
|
||||
...group,
|
||||
rows: group.rows.map((row) => ({
|
||||
...row,
|
||||
columns: row.columns.map((col) => {
|
||||
if (col.key === 'HostID') {
|
||||
if (formState.form.HostType === 'SITE') {
|
||||
console.log('ini jalan kok');
|
||||
return {
|
||||
...col,
|
||||
type: 'select',
|
||||
optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
|
||||
valueKey: 'SiteID',
|
||||
labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
|
||||
};
|
||||
|
||||
}
|
||||
return { ...col, type: 'text', optionsEndpoint: undefined };
|
||||
}
|
||||
|
||||
if (col.key === 'ClientID') {
|
||||
if (formState.form.ClientType === 'SITE') {
|
||||
return {
|
||||
...col,
|
||||
type: 'select',
|
||||
optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
|
||||
valueKey: 'SiteID',
|
||||
labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
|
||||
};
|
||||
}
|
||||
return { ...col, type: 'text', optionsEndpoint: undefined };
|
||||
}
|
||||
|
||||
if (col.key === 'HostTestCode' || col.key === 'HostTestName') {
|
||||
if (formState.form.HostType === 'SITE' && formState.form.HostID) {
|
||||
return {
|
||||
...col,
|
||||
type: 'select',
|
||||
optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${formState.form.HostID}`,
|
||||
valueKey: 'TestSiteID',
|
||||
labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`
|
||||
};
|
||||
}
|
||||
// kalau belum pilih HostID, kembalikan default (misal input biasa)
|
||||
return {
|
||||
...col,
|
||||
type: 'text',
|
||||
optionsEndpoint: undefined
|
||||
};
|
||||
}
|
||||
|
||||
if (col.key === 'ClientTestCode' || col.key === 'ClientTestName') {
|
||||
if (formState.form.ClientType === 'SITE' && formState.form.ClientID) {
|
||||
return {
|
||||
...col,
|
||||
type: 'select',
|
||||
optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${formState.form.ClientID}`,
|
||||
valueKey: 'TestSiteID',
|
||||
labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`
|
||||
};
|
||||
}
|
||||
// kalau belum pilih HostID, kembalikan default (misal input biasa)
|
||||
return {
|
||||
...col,
|
||||
type: 'text',
|
||||
optionsEndpoint: undefined
|
||||
};
|
||||
}
|
||||
|
||||
return col;
|
||||
|
||||
return col;
|
||||
})
|
||||
}))
|
||||
}));
|
||||
});
|
||||
$inspect(mapFormFieldsTransformed)
|
||||
</script>
|
||||
|
||||
<FormPageContainer title="Create Test Map" {primaryAction} {secondaryActions} {actions}>
|
||||
<DictionaryFormRenderer
|
||||
{formState}
|
||||
formFields={mapFormFieldsTransformed}
|
||||
mode="create"
|
||||
/>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex gap-2 mt-1 ms-2">
|
||||
{#if editingId !== null}
|
||||
<Button size="sm" class="cursor-pointer" onclick={handleUpdate}>
|
||||
Update
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" class="cursor-pointer" onclick={handleCancelEdit}>
|
||||
Cancel
|
||||
</Button>
|
||||
{:else}
|
||||
<Button size="sm" class="cursor-pointer" onclick={handleInsert}>
|
||||
Insert
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Separator />
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row class="hover:bg-transparent">
|
||||
<Table.Head>Host Type</Table.Head>
|
||||
<Table.Head>Host ID</Table.Head>
|
||||
<Table.Head>Host Test Code</Table.Head>
|
||||
<Table.Head>Host Test Name</Table.Head>
|
||||
<Table.Head>Client Type</Table.Head>
|
||||
<Table.Head>Client ID</Table.Head>
|
||||
<Table.Head>Client Test Code</Table.Head>
|
||||
<Table.Head>Client Test Name</Table.Head>
|
||||
<Table.Head>Container</Table.Head>
|
||||
<Table.Head class="w-[80px]"></Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#if tempMap.length === 0}
|
||||
<Table.Row>
|
||||
<Table.Cell colspan={9} class="text-center text-muted-foreground py-6">
|
||||
No data. Fill the form above and click Insert.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{:else}
|
||||
{#each tempMap as row (row.id)}
|
||||
<Table.Row
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
>
|
||||
<Table.Cell>{row.HostType}</Table.Cell>
|
||||
<Table.Cell>{row.HostID}</Table.Cell>
|
||||
<Table.Cell>{row.HostTestCode}</Table.Cell>
|
||||
<Table.Cell>{row.HostTestName}</Table.Cell>
|
||||
<Table.Cell>{row.ClientType}</Table.Cell>
|
||||
<Table.Cell>{row.ClientID}</Table.Cell>
|
||||
<Table.Cell>{row.ClientTestCode}</Table.Cell>
|
||||
<Table.Cell>{row.ClientTestName}</Table.Cell>
|
||||
<Table.Cell>{row.ConDefID}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<div class="flex gap-1">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
class="h-7 w-7 cursor-pointer"
|
||||
onclick={() => handleEdit(row)}
|
||||
>
|
||||
<PencilIcon class="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
class="h-7 w-7 cursor-pointer"
|
||||
onclick={() => handleRemove(row.id)}
|
||||
>
|
||||
<Trash2Icon class="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
{/if}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
</div>
|
||||
</FormPageContainer>
|
||||
|
||||
<ReusableAlertDialog
|
||||
bind:open={masterDetail.showExitConfirm}
|
||||
onConfirm={masterDetail.confirmExit}
|
||||
/>
|
||||
@ -11,7 +11,6 @@
|
||||
const { masterDetail, formFields, formActions, schema } = props.context;
|
||||
|
||||
let testMap = $derived(masterDetail?.selectedItem?.data);
|
||||
$inspect(testMap)
|
||||
|
||||
const handlers = {
|
||||
editTest: () => masterDetail.enterEdit("data"),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user