faiztyanirh/clqms-shadcn-v1
1
0
Fork 0
mirror of https://github.com/faiztyanirh/clqms-shadcn-v1.git synced 2026-04-24 01:58:07 +07:00
Code Issues Packages Projects Releases Wiki Activity

continue dict test map done

Browse Source
This commit is contained in:
faiztyanirh 2026-02-26 14:40:36 +07:00
parent 44c9f29f09
commit 5817f74ace
4 changed files with 234 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/dictionary/test/config/test-form-config.js
View File

@ -122,7 +122,6 @@ export const refTxtSchema = z.object({
const start = toDays(data.AgeStart);
const end = toDays(data.AgeEnd);
// if (start !== null && start > 0 && end !== null && end <= start) {
if (start !== null && end !== null && end <= start) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
@ -136,6 +135,23 @@ export const testMapSchema = z.object({
HostID: z.string().optional(),
ClientID: z.string().optional(),
})
.superRefine((data, ctx) => {
const hostID = data.HostID;
const clientID = data.ClientID;
if (hostID && clientID && hostID === clientID) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "ClientID must be different from HostID",
path: ["ClientID"],
});
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "HostID must be different from ClientID",
path: ["HostID"],
});
}
})
export const testInitialForm = {
TestSiteID: "",
@ -851,12 +867,14 @@ export const testMapFormFields = [
label: "Host ID",
required: false,
type: "text",
validateOn: ["input"]
},
{
key: "ClientID",
label: "Client ID",
required: false,
type: "text",
validateOn: ["input"]
}
]
},

105
src/lib/components/dictionary/test/page/create-page.svelte
View File

@ -170,25 +170,100 @@
return refTxtFormFields.map(group => ({
...group,
rows: group.rows.map(row => ({
...row,
columns: row.columns.map(col => {
if (col.key !== "RefTxt") return col;
...row,
columns: row.columns.map(col => {
if (col.key !== "RefTxt") return col;
if (formState.form.ResultType !== "VSET" || !formState.form.VSet) {
return {
...col,
type: "textarea",
optionsEndpoint: undefined
};
}
if (formState.form.ResultType !== "VSET" || !formState.form.VSet) {
return {
...col,
type: "textarea",
optionsEndpoint: undefined
type: "select",
optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/${formState.form.VSet}`,
fullWidth: false
};
}
})
}))
}));
});
return {
...col,
type: "select",
optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/${formState.form.VSet}`,
fullWidth: false
};
})
const testMapFormFieldsTransformed = $derived.by(() => {
return testMapFormFields.map(group => ({
...group,
rows: group.rows.map(row => ({
...row,
columns: row.columns.map(col => {
if (col.key === "HostID") {
if (mapFormState.form.HostType === "SITE") {
return {
...col,
type: "select",
optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
valueKey: "SiteID",
labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`,
};
}
return col;
}
if (col.key === "ClientID") {
if (mapFormState.form.ClientType === "SITE") {
return {
...col,
type: "select",
optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
valueKey: "SiteID",
labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`,
};
}
return col;
}
if (col.key === "HostTestCode" || col.key === "HostTestName") {
if (mapFormState.form.HostType === "SITE" && mapFormState.form.HostID) {
return {
...col,
type: "select",
optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.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 (mapFormState.form.ClientType === "SITE" && mapFormState.form.ClientID) {
return {
...col,
type: "select",
optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.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;
})
}))
}));
});
@ -343,7 +418,7 @@
group
</Tabs.Content>
<Tabs.Content value="map">
<Map {mapFormState} {testMapFormFields} bind:resetMap={resetMap}/>
<Map {mapFormState} testMapFormFields={testMapFormFieldsTransformed} bind:resetMap={resetMap}/>
</Tabs.Content>
<Tabs.Content value="reference">
<div class="w-full h-full flex items-start">

105
src/lib/components/dictionary/test/page/tabs/map.svelte
View File

@ -5,6 +5,7 @@
import * as Table from "$lib/components/ui/table/index.js";
import PencilIcon from "@lucide/svelte/icons/pencil";
import Trash2Icon from "@lucide/svelte/icons/trash-2";
import { untrack } from "svelte";
let { resetMap = $bindable(), ...props } = $props()
@ -15,6 +16,94 @@
resetMap = () => {
tempMap = [];
};
function snapshotForm() {
return untrack(() => {
const f = props.mapFormState.form;
const options = {};
for (const key in props.mapFormState.selectOptions) {
options[key] = [...props.mapFormState.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() {
props.mapFormState.reset?.();
editingId = null;
}
function handleInsert() {
const row = {
id: ++idCounter,
...snapshotForm()
};
tempMap = [...tempMap, row];
resetForm();
}
async function handleEdit(row) {
editingId = row.id;
untrack(() => {
const f = props.mapFormState.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) {
props.mapFormState.selectOptions[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();
}
function getLabel(fieldKey, value, rowId) {
const row = tempMap.find(r => r.id === rowId);
if (row && row.options) {
const opts = row.options[fieldKey] ?? [];
const found = opts.find((o) => o.value == value);
return found ? found.label : value;
}
return value;
}
</script>
<div class="flex flex-col gap-4 w-full">
@ -25,14 +114,14 @@
/>
<div class="flex gap-2 mt-1 ms-2">
{#if editingId !== null}
<Button size="sm" class="cursor-pointer">
<Button size="sm" class="cursor-pointer" onclick={handleUpdate}>
Update
</Button>
<Button size="sm" variant="outline" class="cursor-pointer">
<Button size="sm" variant="outline" class="cursor-pointer" onclick={handleCancelEdit}>
Cancel
</Button>
{:else}
<Button size="sm" class="cursor-pointer">
<Button size="sm" class="cursor-pointer" onclick={handleInsert}>
Insert
</Button>
{/if}
@ -74,16 +163,17 @@
<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>{row.ClientID ? getLabel("ClientID", row.ClientID, row.id) : "-"}</Table.Cell>
<Table.Cell>{row.ClientTestCode ? getLabel("ClientTestCode", row.ClientTestCode, row.id) : "-"}</Table.Cell>
<Table.Cell>{row.ClientTestName ? getLabel("ClientTestName", row.ClientTestName, row.id) : "-"}</Table.Cell>
<Table.Cell>{row.ConDefID ? getLabel("ConDefID", row.ConDefID, row.id) : "-"}</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>
@ -91,6 +181,7 @@
size="icon"
variant="ghost"
class="h-7 w-7 cursor-pointer"
onclick={() => handleRemove(row.id)}
>
<Trash2Icon class="h-3.5 w-3.5" />
</Button>

84
src/lib/components/reusable/form/dictionary-form-renderer.svelte
View File

@ -67,11 +67,6 @@
formState.form[field.key] = field.defaultValue;
}
}
// function hasExactKeyword(input, keyword) {
// const regex = new RegExp(`\\b${keyword}\\b`, 'i');
// return regex.test(input);
// }
</script>
{#snippet Fieldset({ key, label, required, type, optionsEndpoint, options, validateOn, dependsOn, endpointParamKey, valueKey, labelKey, txtKey })}
@ -81,9 +76,6 @@
{#if required}
<span class="text-destructive text-xl leading-none h-3.5">*</span>
{/if}
<!-- {#if required || dynamicRequiredFields.includes(key)}
<span class="text-destructive text-xl leading-none h-3.5">*</span>
{/if} -->
</div>
<div class="relative flex flex-col items-center w-full">
@ -177,6 +169,32 @@
if (key === "RefType") {
handleRefTypeChange(val);
}
if (key === "HostType") {
formState.form.HostID = "";
formState.form.HostTestCode = "";
formState.form.HostTestName = "";
formState.selectOptions.HostTestCode = [];
formState.selectOptions.HostTestName = [];
}
if (key === "HostID") {
formState.form.HostTestCode = "";
formState.form.HostTestName = "";
formState.selectOptions.HostTestCode = [];
formState.selectOptions.HostTestName = [];
}
if (key === "ClientType") {
formState.form.ClientID = "";
formState.form.ClientTestCode = "";
formState.form.ClientTestName = "";
formState.selectOptions.ClientTestCode = [];
formState.selectOptions.ClientTestName = [];
}
if (key === "ClientID") {
formState.form.ClientTestCode = "";
formState.form.ClientTestName = "";
formState.selectOptions.ClientTestCode = [];
formState.selectOptions.ClientTestName = [];
}
}}
onOpenChange={(open) => {
if (open && optionsEndpoint) {
@ -305,7 +323,6 @@
<InputGroup.Input type="number" bind:value={joinFields[key].YY}
oninput={() => {
if (validateOn?.includes("input")) {
console.log('object');
// formState.validateField(key, formState.form[key], false);
formState.validateField("AgeStart");
formState.validateField("AgeEnd");
@ -357,19 +374,10 @@
key === 'FormulaCode' ? 'top-20' : 'top-8'
}`}
>
<!-- {#if formState.errors[key] || dynamicRequiredFields.includes(key)}
<span class="text-destructive text-sm leading-none">
{formState.errors[key]}
</span>
{/if} -->
{#if formState.errors[key] || formState.errors[txtKey]}
<span class="text-destructive text-sm leading-none">
{formState.errors[key] ?? formState.errors[txtKey]}
</span>
<!-- {:else if dynamicRequiredFields.includes(key)}
<span class="text-destructive text-sm leading-none">
Required
</span> -->
{/if}
</div>
</div>
@ -420,42 +428,4 @@
{/each}
</div>
{/each}
</div>
<!-- <div class="p-2 space-y-6">
{#each formFields as group}
<div class="space-y-6">
{#if group.title}
<div class="text-md 2xl:text-lg font-semibold italic">
<span class="border-b-2 border-primary">{group.title}</span>
</div>
{/if}
{#each group.rows as row}
<div
class="grid grid-cols-1 space-y-2 gap-6 md:gap-4"
class:md:grid-cols-1={row.columns.length === 1 && row.columns[0].fullWidth !== false}
class:md:grid-cols-2={row.columns.length === 2 || (row.columns.length === 1 && row.columns[0].fullWidth === false)}
class:md:grid-cols-3={row.columns.length === 3}
>
{#each row.columns as col}
{#if col.type === "group"}
<div
class="grid grid-cols-1 gap-6 md:gap-2"
class:md:grid-cols-1={col.columns.length === 1 && col.columns[0].fullWidth !== false}
class:md:grid-cols-2={col.columns.length === 2 || (col.columns.length === 1 && col.columns[0].fullWidth === false)}
class:md:grid-cols-3={col.columns.length === 3}
>
{#each col.columns as child}
{@render Fieldset(child)}
{/each}
</div>
{:else}
{@render Fieldset(col)}
{/if}
{/each}
</div>
{/each}
</div>
{/each}
</div> -->
</div>