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

fix dynamic payload refnum & reftxt

Browse Source
This commit is contained in:
faiztyanirh 2026-03-07 16:01:15 +07:00
parent 104b6eff88
commit 3573b1b2dc
7 changed files with 871 additions and 866 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,6 +73,10 @@ export const testCalSchema = z
} }
}); });
export const testGroupSchema = z.object({
Member: z.string().optional()
});
export const refNumSchema = z export const refNumSchema = z
.object({ .object({
AgeStart: z.string().optional(), AgeStart: z.string().optional(),
@ -212,6 +216,12 @@ export const testCalInitialForm = {
FormulaCode: '' FormulaCode: ''
}; };
export const testGroupInitialForm = {
TestGrpID: '',
TestSiteID: '',
Member: '',
}
export const refNumInitialForm = { export const refNumInitialForm = {
RefNumID: '', RefNumID: '',
SiteID: '', SiteID: '',
@ -270,9 +280,13 @@ export const testDefaultErrors = {
export const testCalDefaultErrors = { export const testCalDefaultErrors = {
FormulaInput: 'Required', FormulaInput: 'Required',
FormulaCode: null FormulaCode: null,
}; };
export const testGroupDefaultErrors = {
Member: null,
}
export const refNumDefaultErrors = { export const refNumDefaultErrors = {
AgeStart: null, AgeStart: null,
AgeEnd: null, AgeEnd: null,
@ -597,6 +611,28 @@ export const testCalFormFields = [
} }
]; ];
export const testGroupFormFields = [
{
rows: [
{
type: 'row',
columns: [
{
key: 'Member',
label: 'Member Test',
required: false,
type: 'members',
optionsEndpoint: `${API.BASE_URL}${API.TEST}`,
valueKey: 'TestSiteCode',
labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`,
validateOn: ['input']
}
]
},
]
}
];
export const refNumFormFields = [ export const refNumFormFields = [
{ {
rows: [ rows: [
@ -1013,7 +1049,7 @@ export function getTestFormActions(handlers) {
// return cleanEmptyStrings(payload); // return cleanEmptyStrings(payload);
// } // }
export function buildTestPayload({ mainForm, activeFormStates, testType }) { export function buildTestPayload({ mainForm, activeFormStates, testType, refNumData, refTxtData }) {
let payload = { let payload = {
...mainForm ...mainForm
}; };
@ -1021,13 +1057,17 @@ export function buildTestPayload({ mainForm, activeFormStates, testType }) {
for (const key in activeFormStates) { for (const key in activeFormStates) {
const state = activeFormStates[key]; const state = activeFormStates[key];
if (state?.form) { if (key === 'refNum' && refNumData?.length > 0) {
payload[key] = refNumData;
} else if (key === 'refTxt' && refTxtData?.length > 0) {
payload[key] = refTxtData;
} else if (state?.form) {
payload[key] = { payload[key] = {
...state.form ...state.form
}; };
} }
} }
return cleanEmptyStrings(payload); return cleanEmptyStrings(payload);
} }

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

@ -1,30 +1,50 @@
<script> <script>
import { useDictionaryForm } from "$lib/components/composable/use-dictionary-form.svelte"; import { useDictionaryForm } from '$lib/components/composable/use-dictionary-form.svelte';
import FormPageContainer from "$lib/components/reusable/form/form-page-container.svelte"; import FormPageContainer from '$lib/components/reusable/form/form-page-container.svelte';
import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte"; import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
import { toast } from "svelte-sonner"; import { toast } from 'svelte-sonner';
import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte"; import ReusableAlertDialog from '$lib/components/reusable/reusable-alert-dialog.svelte';
import * as Tabs from "$lib/components/ui/tabs/index.js"; import * as Tabs from '$lib/components/ui/tabs/index.js';
import { useForm } from "$lib/components/composable/use-form.svelte"; import { useForm } from '$lib/components/composable/use-form.svelte';
import { buildTestPayload, import {
testCalSchema, testCalInitialForm, testCalDefaultErrors, testCalFormFields, buildTestPayload,
refNumSchema, refNumDefaultErrors, refNumInitialForm, refNumFormFields, testCalSchema,
refTxtSchema, refTxtDefaultErrors, refTxtInitialForm, refTxtFormFields, testCalInitialForm,
testMapSchema, testMapInitialForm, testMapDefaultErrors, testMapFormFields testCalDefaultErrors,
} from "$lib/components/dictionary/test/config/test-form-config"; testCalFormFields,
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte"; refNumSchema,
import RefNum from "./tabs/ref-num.svelte"; refNumDefaultErrors,
import RefTxt from "./tabs/ref-txt.svelte"; refNumInitialForm,
import Calculation from "./tabs/calculation.svelte"; refNumFormFields,
import Map from "./tabs/map.svelte"; refTxtSchema,
import { API } from "$lib/config/api"; refTxtDefaultErrors,
import { untrack } from "svelte"; refTxtInitialForm,
refTxtFormFields,
testMapSchema,
testMapInitialForm,
testMapDefaultErrors,
testMapFormFields,
testGroupSchema,
testGroupInitialForm,
testGroupDefaultErrors,
testGroupFormFields
} from '$lib/components/dictionary/test/config/test-form-config';
import ReusableEmpty from '$lib/components/reusable/reusable-empty.svelte';
import RefNum from './tabs/ref-num.svelte';
import RefTxt from './tabs/ref-txt.svelte';
import Calculation from './tabs/calculation.svelte';
import Map from './tabs/map.svelte';
import Group from './tabs/group.svelte';
import { API } from '$lib/config/api';
import { untrack } from 'svelte';
let props = $props(); let props = $props();
let resetRefNum = $state(); let resetRefNum = $state();
let resetRefTxt = $state(); let resetRefTxt = $state();
let resetMap = $state(); let resetMap = $state();
let refNumData = $state([]);
let refTxtData = $state([]);
const { masterDetail, formFields, formActions, schema, initialForm } = props.context; const { masterDetail, formFields, formActions, schema, initialForm } = props.context;
@ -33,19 +53,25 @@
const calFormState = useForm({ const calFormState = useForm({
schema: testCalSchema, schema: testCalSchema,
initialForm: testCalInitialForm, initialForm: testCalInitialForm,
defaultErrors: testCalDefaultErrors, defaultErrors: testCalDefaultErrors
});
const groupFormState = useForm({
schema: testGroupSchema,
initialForm: testGroupInitialForm,
defaultErrors: testGroupDefaultErrors,
}); });
const refNumState = useForm({ const refNumState = useForm({
schema: refNumSchema, schema: refNumSchema,
initialForm: refNumInitialForm, initialForm: refNumInitialForm,
defaultErrors: refNumDefaultErrors, defaultErrors: refNumDefaultErrors
}); });
const refTxtState = useForm({ const refTxtState = useForm({
schema: refTxtSchema, schema: refTxtSchema,
initialForm: refTxtInitialForm, initialForm: refTxtInitialForm,
defaultErrors: refTxtDefaultErrors, defaultErrors: refTxtDefaultErrors
}); });
const mapFormState = useForm({ const mapFormState = useForm({
@ -53,7 +79,7 @@
initialForm: testMapInitialForm, initialForm: testMapInitialForm,
defaultErrors: testMapDefaultErrors, defaultErrors: testMapDefaultErrors,
modeOpt: 'cascade' modeOpt: 'cascade'
}) });
// const activeFormStates = $derived.by(() => { // const activeFormStates = $derived.by(() => {
// switch (formState.form.TestType) { // switch (formState.form.TestType) {
@ -72,32 +98,32 @@
// }); // });
const activeFormStates = $derived.by(() => { const activeFormStates = $derived.by(() => {
const testType = formState.form.TestType ?? ""; const testType = formState.form.TestType ?? '';
const refType = formState.form.RefType ?? ""; const refType = formState.form.RefType ?? '';
let refState = {}; let refState = {};
if (refType === "RANGE" || refType === "THOLD") { if (refType === 'RANGE' || refType === 'THOLD') {
refState = { refNum: refNumState }; refState = { refNum: refNumState };
} else if (refType === "TEXT" || refType === "VSET") { } else if (refType === 'TEXT' || refType === 'VSET') {
refState = { refTxt: refTxtState }; refState = { refTxt: refTxtState };
} }
switch (testType) { switch (testType) {
case "TEST": case 'TEST':
case "PARAM": case 'PARAM':
return { return {
...refState, ...refState,
map: mapFormState map: mapFormState
}; };
case "CALC": case 'CALC':
return { return {
cal: calFormState, cal: calFormState,
...refState, ...refState,
map: mapFormState map: mapFormState
}; };
case "GROUP": case 'GROUP':
case "TITLE": case 'TITLE':
default: default:
return {}; return {};
} }
@ -114,10 +140,8 @@
const actions = formActions(handlers); const actions = formActions(handlers);
const allColumns = formFields.flatMap( const allColumns = formFields.flatMap((section) =>
(section) => section.rows.flatMap( section.rows.flatMap((row) => row.columns ?? [])
(row) => row.columns ?? []
)
); );
let showConfirm = $state(false); let showConfirm = $state(false);
@ -129,7 +153,9 @@
const payload = buildTestPayload({ const payload = buildTestPayload({
mainForm, mainForm,
activeFormStates, activeFormStates,
testType: testType testType: testType,
refNumData: refNumData,
refTxtData: refTxtData
}); });
console.log(payload); console.log(payload);
// const result = await formState.save(masterDetail.mode); // const result = await formState.save(masterDetail.mode);
@ -152,7 +178,7 @@
let availableTabs = $derived.by(() => { let availableTabs = $derived.by(() => {
const testType = formState?.form?.TestType; const testType = formState?.form?.TestType;
switch(testType) { switch (testType) {
case 'TEST': case 'TEST':
case 'PARAM': case 'PARAM':
return ['definition', 'map', 'reference']; return ['definition', 'map', 'reference'];
@ -168,7 +194,7 @@
let disabledResultTypes = $derived.by(() => { let disabledResultTypes = $derived.by(() => {
const testType = formState?.form?.TestType; const testType = formState?.form?.TestType;
switch(testType) { switch (testType) {
case 'TEST': case 'TEST':
case 'PARAM': case 'PARAM':
return []; return [];
@ -186,7 +212,7 @@
let disabledReferenceTypes = $derived.by(() => { let disabledReferenceTypes = $derived.by(() => {
const resultType = formState?.form?.ResultType; const resultType = formState?.form?.ResultType;
switch(resultType) { switch (resultType) {
case 'NMRIC': case 'NMRIC':
return ['TEXT', 'VSET', 'NOREF']; return ['TEXT', 'VSET', 'NOREF'];
case 'RANGE': case 'RANGE':
@ -204,7 +230,7 @@
let hiddenFields = $derived.by(() => { let hiddenFields = $derived.by(() => {
const resultType = formState?.form?.ResultType; const resultType = formState?.form?.ResultType;
return resultType !== "VSET" ? ["VSet"] : []; return resultType !== 'VSET' ? ['VSet'] : [];
}); });
let refComponent = $derived.by(() => { let refComponent = $derived.by(() => {
@ -215,24 +241,24 @@
}); });
const refTxtFormFieldsTransformed = $derived.by(() => { const refTxtFormFieldsTransformed = $derived.by(() => {
return refTxtFormFields.map(group => ({ return refTxtFormFields.map((group) => ({
...group, ...group,
rows: group.rows.map(row => ({ rows: group.rows.map((row) => ({
...row, ...row,
columns: row.columns.map(col => { columns: row.columns.map((col) => {
if (col.key !== "RefTxt") return col; if (col.key !== 'RefTxt') return col;
if (formState.form.ResultType !== "VSET" || !formState.form.VSet) { if (formState.form.ResultType !== 'VSET' || !formState.form.VSet) {
return { return {
...col, ...col,
type: "textarea", type: 'textarea',
optionsEndpoint: undefined optionsEndpoint: undefined
}; };
} }
return { return {
...col, ...col,
type: "select", type: 'select',
optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/${formState.form.VSet}`, optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/${formState.form.VSet}`,
fullWidth: false fullWidth: false
}; };
@ -242,70 +268,69 @@
}); });
const testMapFormFieldsTransformed = $derived.by(() => { const testMapFormFieldsTransformed = $derived.by(() => {
return testMapFormFields.map(group => ({ return testMapFormFields.map((group) => ({
...group, ...group,
rows: group.rows.map(row => ({ rows: group.rows.map((row) => ({
...row, ...row,
columns: row.columns.map(col => { columns: row.columns.map((col) => {
if (col.key === 'HostID') {
if (col.key === "HostID") { if (mapFormState.form.HostType === 'SITE') {
if (mapFormState.form.HostType === "SITE") {
return { return {
...col, ...col,
type: "select", type: 'select',
optionsEndpoint: `${API.BASE_URL}${API.SITE}`, optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
valueKey: "SiteID", valueKey: 'SiteID',
labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`, labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
}; };
} }
return col; return col;
} }
if (col.key === "ClientID") { if (col.key === 'ClientID') {
if (mapFormState.form.ClientType === "SITE") { if (mapFormState.form.ClientType === 'SITE') {
return { return {
...col, ...col,
type: "select", type: 'select',
optionsEndpoint: `${API.BASE_URL}${API.SITE}`, optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
valueKey: "SiteID", valueKey: 'SiteID',
labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`, labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
}; };
} }
return col; return col;
} }
if (col.key === "HostTestCode" || col.key === "HostTestName") { if (col.key === 'HostTestCode' || col.key === 'HostTestName') {
if (mapFormState.form.HostType === "SITE" && mapFormState.form.HostID) { if (mapFormState.form.HostType === 'SITE' && mapFormState.form.HostID) {
return { return {
...col, ...col,
type: "select", type: 'select',
optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.form.HostID}`, optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.form.HostID}`,
valueKey: "TestSiteID", valueKey: 'TestSiteID',
labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`, labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`
}; };
} }
// kalau belum pilih HostID, kembalikan default (misal input biasa) // kalau belum pilih HostID, kembalikan default (misal input biasa)
return { return {
...col, ...col,
type: "text", type: 'text',
optionsEndpoint: undefined optionsEndpoint: undefined
}; };
} }
if (col.key === "ClientTestCode" || col.key === "ClientTestName") { if (col.key === 'ClientTestCode' || col.key === 'ClientTestName') {
if (mapFormState.form.ClientType === "SITE" && mapFormState.form.ClientID) { if (mapFormState.form.ClientType === 'SITE' && mapFormState.form.ClientID) {
return { return {
...col, ...col,
type: "select", type: 'select',
optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.form.ClientID}`, optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.form.ClientID}`,
valueKey: "TestSiteID", valueKey: 'TestSiteID',
labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`, labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`
}; };
} }
// kalau belum pilih HostID, kembalikan default (misal input biasa) // kalau belum pilih HostID, kembalikan default (misal input biasa)
return { return {
...col, ...col,
type: "text", type: 'text',
optionsEndpoint: undefined optionsEndpoint: undefined
}; };
} }
@ -316,7 +341,7 @@
})); }));
}); });
// $inspect(activeFormState.errors) // $inspect(activeFormState.errors)
let activeTab = $state('definition'); let activeTab = $state('definition');
$effect(() => { $effect(() => {
@ -327,23 +352,21 @@
$effect(() => { $effect(() => {
for (const key of hiddenFields) { for (const key of hiddenFields) {
formState.form[key] = ""; formState.form[key] = '';
} }
}); });
$effect(() => { $effect(() => {
if (formState.form.Factor && !formState.form.Unit2) { if (formState.form.Factor && !formState.form.Unit2) {
formState.errors.Unit2 = "Required"; formState.errors.Unit2 = 'Required';
} else { } else {
formState.errors.Unit2 = null; formState.errors.Unit2 = null;
} }
}); });
$effect(() => { $effect(() => {
const allColumns = formFields.flatMap( const allColumns = formFields.flatMap((section) =>
(section) => section.rows.flatMap( section.rows.flatMap((row) => row.columns ?? [])
(row) => row.columns ?? []
)
); );
untrack(() => { untrack(() => {
@ -356,20 +379,20 @@
key: col.key, key: col.key,
optionsEndpoint: col.optionsEndpoint, optionsEndpoint: col.optionsEndpoint,
valueKey: col.valueKey, valueKey: col.valueKey,
labelKey: col.labelKey, labelKey: col.labelKey
}, },
formState.form formState.form
); );
} }
}) });
}); });
function handleTestTypeChange(value) { function handleTestTypeChange(value) {
formState.form.TestType = value; formState.form.TestType = value;
formState.form.ResultType = ""; formState.form.ResultType = '';
formState.errors.ResultType = null; formState.errors.ResultType = null;
formState.form.RefType = ""; formState.form.RefType = '';
formState.errors.RefType = null; formState.errors.RefType = null;
calFormState.reset(); calFormState.reset();
@ -383,7 +406,7 @@
function handleResultTypeChange(value) { function handleResultTypeChange(value) {
formState.form.ResultType = value; formState.form.ResultType = value;
formState.form.RefType = ""; formState.form.RefType = '';
formState.errors.RefType = null; formState.errors.RefType = null;
calFormState.reset(); calFormState.reset();
@ -393,7 +416,7 @@
resetRefNum?.(); resetRefNum?.();
resetRefTxt?.(); resetRefTxt?.();
let newRefType = ""; let newRefType = '';
if (value === 'TEXT') { if (value === 'TEXT') {
newRefType = 'TEXT'; newRefType = 'TEXT';
} }
@ -460,7 +483,7 @@
<Tabs.Content value="definition"> <Tabs.Content value="definition">
<DictionaryFormRenderer <DictionaryFormRenderer
{formState} {formState}
formFields={formFields} {formFields}
mode="create" mode="create"
{disabledResultTypes} {disabledResultTypes}
{disabledReferenceTypes} {disabledReferenceTypes}
@ -474,17 +497,17 @@
<Calculation {calFormState} {testCalFormFields} /> <Calculation {calFormState} {testCalFormFields} />
</Tabs.Content> </Tabs.Content>
<Tabs.Content value="group"> <Tabs.Content value="group">
group <Group {groupFormState} {testGroupFormFields} />
</Tabs.Content> </Tabs.Content>
<Tabs.Content value="map"> <Tabs.Content value="map">
<Map {mapFormState} testMapFormFields={testMapFormFieldsTransformed} bind:resetMap={resetMap}/> <Map {mapFormState} testMapFormFields={testMapFormFieldsTransformed} bind:resetMap />
</Tabs.Content> </Tabs.Content>
<Tabs.Content value="reference"> <Tabs.Content value="reference">
<div class="w-full h-full flex items-start"> <div class="w-full h-full flex items-start">
{#if refComponent === 'numeric'} {#if refComponent === 'numeric'}
<RefNum {refNumState} {refNumFormFields} bind:resetRefNum={resetRefNum}/> <RefNum {refNumState} {refNumFormFields} bind:tempNumeric={refNumData} bind:resetRefNum />
{:else if refComponent === 'text'} {:else if refComponent === 'text'}
<RefTxt {refTxtState} refTxtFormFields={refTxtFormFieldsTransformed} bind:resetRefTxt={resetRefTxt} /> <RefTxt {refTxtState} refTxtFormFields={refTxtFormFieldsTransformed} bind:tempTxt={refTxtData} bind:resetRefTxt />
{:else} {:else}
<div class="h-full w-full flex items-center"> <div class="h-full w-full flex items-center">
<ReusableEmpty desc="Select a Reference Type" /> <ReusableEmpty desc="Select a Reference Type" />
@ -493,7 +516,6 @@
</div> </div>
</Tabs.Content> </Tabs.Content>
</Tabs.Root> </Tabs.Root>
</FormPageContainer> </FormPageContainer>
<ReusableAlertDialog <ReusableAlertDialog

143
src/lib/components/dictionary/test/page/tabs/calculation.svelte
View File

@ -9,154 +9,11 @@
import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte'; import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
let props = $props(); let props = $props();
// const formState = props.calFormState;
// let options = $state([]);
// let isLoading = $state(false);
// let errors = $state({});
// function hasExactKeyword(input, keyword) {
// const regex = new RegExp(`\\b${keyword}\\b`, 'i');
// return regex.test(input);
// }
// // 🔹 FETCH OPTIONS
// async function fetchTests() {
// isLoading = true;
// try {
// const res = await fetch(`${API.BASE_URL}${API.TEST}`);
// const data = await res.json();
// console.log(data);
// options = data.data.map((item) => ({
// value: item.TestSiteCode,
// label: `${item.TestSiteCode} - ${item.TestSiteName}`
// }));
// } catch (err) {
// console.error('Failed to fetch tests', err);
// } finally {
// isLoading = false;
// }
// }
// $effect(() => {
// fetchTests();
// });
// // 🔹 VALIDATION
// $effect(() => {
// const result = testCalSchema.safeParse(formState.form);
// if (!result.success) {
// const fieldErrors = {};
// for (const issue of result.error.issues) {
// fieldErrors[issue.path[0]] = issue.message;
// }
// errors = fieldErrors;
// } else {
// errors = {};
// }
// });
// // 🔹 Badge status
// const inputStatus = $derived.by(() => {
// const inputs = formState.form.FormulaInput || [];
// const code = formState.form.FormulaCode || '';
// return inputs.map((v) => ({
// value: v,
// done: hasExactKeyword(code, v)
// }));
// });
// function unselectAll() {
// formState.form.FormulaInput = [];
// errors = {};
// }
</script> </script>
<div class="flex flex-col gap-4 w-full"> <div class="flex flex-col gap-4 w-full">
<DictionaryFormRenderer formState={props.calFormState} formFields={props.testCalFormFields}/> <DictionaryFormRenderer formState={props.calFormState} formFields={props.testCalFormFields}/>
</div> </div>
<!-- <div class="p-2 space-y-6">
<div class="grid grid-cols-1 space-y-2 gap-6 md:gap-4">
<div class="flex w-full flex-col gap-1.5">
<div class="flex justify-between items-center w-full">
<Label>Formula Input</Label>
</div>
<div class="relative flex flex-col items-center w-full">
<Select.Root
type="multiple"
bind:value={formState.form.FormulaInput}
>
<Select.Trigger class="w-full">
{formState.form.FormulaInput?.length
? options
.filter(o => formState.form.FormulaInput.includes(o.value))
.map(o => o.label)
.join(', ')
: 'Select parameters'}
</Select.Trigger>
<Select.Content>
<Select.Group>
{#if isLoading}
<div class="p-2 text-sm text-muted-foreground">
Loading...
</div>
{:else}
{#if formState.form.FormulaInput.length > 0}
<Select.Separator />
<button
class="w-full px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground"
onclick={unselectAll}
>
Unselect All
</button>
{/if}
{#each options as opt (opt.value)}
<Select.Item value={opt.value} label={opt.label}>
{opt.label}
</Select.Item>
{/each}
{/if}
</Select.Group>
</Select.Content>
</Select.Root>
</div>
</div>
<div class="flex w-full flex-col gap-1.5">
<div class="flex justify-between items-center w-full">
<Label>Formula Code</Label>
</div>
<div class="relative flex flex-col items-center w-full">
<Textarea
class="border rounded p-2"
bind:value={formState.form.FormulaCode}
/>
</div>
</div>
</div>
{#if errors.FormulaCode}
<div class="flex flex-col gap-2 text-sm text-destructive">
<span>{errors.FormulaCode}</span>
<div class="flex gap-1">
{#each inputStatus as item (item.value)}
<Badge variant={item.done ? 'default' : 'destructive'}>
{item.value}
</Badge>
{/each}
</div>
</div>
{/if}
</div> -->

25
src/lib/components/dictionary/test/page/tabs/group.svelte Normal file
View File

@ -0,0 +1,25 @@
<script>
import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
let props = $props();
let members = $state([{ id: 1, value: "" }]);
function addMember() {
members = [...members, { id: Date.now(), value: "" }];
}
function removeMember(id) {
members = members.filter(m => m.id !== id);
}
</script>
<div class="flex flex-col gap-4 w-full">
<DictionaryFormRenderer
formState={props.groupFormState}
formFields={props.testGroupFormFields}
{members}
onAddMember={addMember}
onRemoveMember={removeMember}
/>
</div>

132
src/lib/components/dictionary/test/page/tabs/ref-num.svelte
View File

@ -1,18 +1,17 @@
<script> <script>
import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte"; import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
import { Separator } from "$lib/components/ui/separator/index.js"; import { Separator } from '$lib/components/ui/separator/index.js';
import * as Table from "$lib/components/ui/table/index.js"; import * as Table from '$lib/components/ui/table/index.js';
import { Button } from "$lib/components/ui/button/index.js"; import { Button } from '$lib/components/ui/button/index.js';
import { Badge } from "$lib/components/ui/badge/index.js"; import { Badge } from '$lib/components/ui/badge/index.js';
import { buildAgeText } from "$lib/utils/ageUtils"; import { buildAgeText } from '$lib/utils/ageUtils';
import PencilIcon from "@lucide/svelte/icons/pencil"; import PencilIcon from '@lucide/svelte/icons/pencil';
import Trash2Icon from "@lucide/svelte/icons/trash-2"; import Trash2Icon from '@lucide/svelte/icons/trash-2';
import { untrack } from "svelte"; import { untrack } from 'svelte';
import { toDays } from "$lib/utils/ageUtils"; import { toDays } from '$lib/utils/ageUtils';
let { resetRefNum = $bindable(), ...props } = $props() let { tempNumeric = $bindable([]), resetRefNum = $bindable(), ...props } = $props();
let tempNumeric = $state([]);
let editingId = $state(null); let editingId = $state(null);
let idCounter = $state(0); let idCounter = $state(0);
@ -21,15 +20,15 @@
}; };
let joinFields = $state({ let joinFields = $state({
AgeStart: { DD: "", MM: "", YY: "" }, AgeStart: { DD: '', MM: '', YY: '' },
AgeEnd: { DD: "", MM: "", YY: "" }, AgeEnd: { DD: '', MM: '', YY: '' }
}); });
let disabledSign = $derived.by(() => { let disabledSign = $derived.by(() => {
const refType = props.refNumState.form.NumRefType; const refType = props.refNumState.form.NumRefType;
if (refType === "RANGE") return true; if (refType === 'RANGE') return true;
if (refType === "THOLD") return false; if (refType === 'THOLD') return false;
return false; return false;
}); });
@ -37,28 +36,28 @@
function snapshotForm() { function snapshotForm() {
const f = props.refNumState.form; const f = props.refNumState.form;
return { return {
SpcType: f.SpcType ?? "", SpcType: f.SpcType ?? '',
Sex: f.Sex ?? "", Sex: f.Sex ?? '',
AgeStart: f.AgeStart ?? "", AgeStart: f.AgeStart ?? '',
AgeEnd: f.AgeEnd ?? "", AgeEnd: f.AgeEnd ?? '',
NumRefType: f.NumRefType ?? "", NumRefType: f.NumRefType ?? '',
RangeType: f.RangeType ?? "", RangeType: f.RangeType ?? '',
LowSign: f.LowSign ?? "", LowSign: f.LowSign ?? '',
Low: f.Low ?? "", Low: f.Low ?? '',
HighSign: f.HighSign ?? "", HighSign: f.HighSign ?? '',
High: f.High ?? "", High: f.High ?? '',
Display: f.Display ?? "", Display: f.Display ?? '',
Flag: f.Flag ?? "", Flag: f.Flag ?? '',
Interpretation: f.Interpretation ?? "", Interpretation: f.Interpretation ?? '',
Notes: f.Notes ?? "", Notes: f.Notes ?? ''
}; };
} }
function resetForm() { function resetForm() {
props.refNumState.reset?.(); props.refNumState.reset?.();
joinFields = { joinFields = {
AgeStart: { DD: "", MM: "", YY: "" }, AgeStart: { DD: '', MM: '', YY: '' },
AgeEnd: { DD: "", MM: "", YY: "" }, AgeEnd: { DD: '', MM: '', YY: '' }
}; };
editingId = null; editingId = null;
} }
@ -73,7 +72,7 @@
// tempNumeric = [...tempNumeric, row]; // tempNumeric = [...tempNumeric, row];
// resetForm(); // resetForm();
const isOverlap = tempNumeric.some(row => { const isOverlap = tempNumeric.some((row) => {
const existingStart = toDays(row.AgeStart); const existingStart = toDays(row.AgeStart);
const existingEnd = toDays(row.AgeEnd); const existingEnd = toDays(row.AgeEnd);
@ -83,8 +82,7 @@
}); });
if (isOverlap) { if (isOverlap) {
props.refNumState.errors.AgeEnd = props.refNumState.errors.AgeEnd = 'Age range overlaps with existing data';
"Age range overlaps with existing data";
return; return;
} }
@ -117,12 +115,12 @@
f.Interpretation = row.Interpretation; f.Interpretation = row.Interpretation;
f.Notes = row.Notes; f.Notes = row.Notes;
for (const key of ["AgeStart", "AgeEnd"]) { for (const key of ['AgeStart', 'AgeEnd']) {
const val = row[key] ?? ""; const val = row[key] ?? '';
const match = val.match(/(\d+)Y\s*(\d+)M\s*(\d+)D/); const match = val.match(/(\d+)Y\s*(\d+)M\s*(\d+)D/);
joinFields[key] = match joinFields[key] = match
? { YY: match[1], MM: match[2], DD: match[3] } ? { YY: match[1], MM: match[2], DD: match[3] }
: { DD: "", MM: "", YY: "" }; : { DD: '', MM: '', YY: '' };
} }
} }
@ -154,27 +152,24 @@
return found ? found.code : value; return found ? found.code : value;
} }
const rangeTypeBadge = (type) => ({ REF: "REF", CRTC: "CRTC" }[type] ?? null); const rangeTypeBadge = (type) => ({ REF: 'REF', CRTC: 'CRTC' })[type] ?? null;
const numRefTypeBadge = (type) => ({ RANGE: "R", THOLD: "T" }[type] ?? null);; const numRefTypeBadge = (type) => ({ RANGE: 'R', THOLD: 'T' })[type] ?? null;
const rangeDisplay = (row) => { const rangeDisplay = (row) => {
if (row.NumRefType === "RANGE") return `${row.LowValue} - ${row.HighValue}`; if (row.NumRefType === 'RANGE') return `${row.LowValue} - ${row.HighValue}`;
if (row.NumRefType === "THOLD") return row.TholdValue; if (row.NumRefType === 'THOLD') return row.TholdValue;
return "-"; return '-';
}; };
$effect(() => { $effect(() => {
for (const key of ["AgeStart", "AgeEnd"]) { for (const key of ['AgeStart', 'AgeEnd']) {
props.refNumState.form[key] = props.refNumState.form[key] = buildAgeText(joinFields[key]);
buildAgeText(joinFields[key]);
} }
}); });
$effect(() => { $effect(() => {
const allColumns = props.refNumFormFields.flatMap( const allColumns = props.refNumFormFields.flatMap((section) =>
(section) => section.rows.flatMap( section.rows.flatMap((row) => row.columns ?? [])
(row) => row.columns ?? []
)
); );
untrack(() => { untrack(() => {
@ -186,21 +181,21 @@
key: col.key, key: col.key,
optionsEndpoint: col.optionsEndpoint, optionsEndpoint: col.optionsEndpoint,
valueKey: col.valueKey, valueKey: col.valueKey,
labelKey: col.labelKey, labelKey: col.labelKey
}, },
props.refNumState.form props.refNumState.form
); );
} }
}) });
}); });
$effect(() => { $effect(() => {
if (!props.refNumState.form.Low || props.refNumState.form.Low === "") { if (!props.refNumState.form.Low || props.refNumState.form.Low === '') {
props.refNumState.form.LowSign = ""; props.refNumState.form.LowSign = '';
} }
if (!props.refNumState.form.High || props.refNumState.form.High === "") { if (!props.refNumState.form.High || props.refNumState.form.High === '') {
props.refNumState.form.HighSign = ""; props.refNumState.form.HighSign = '';
} }
}); });
</script> </script>
@ -215,16 +210,12 @@
/> />
<div class="flex gap-2 mt-1 ms-2"> <div class="flex gap-2 mt-1 ms-2">
{#if editingId !== null} {#if editingId !== null}
<Button size="sm" class="cursor-pointer" onclick={handleUpdate}> <Button size="sm" class="cursor-pointer" onclick={handleUpdate}>Update</Button>
Update
</Button>
<Button size="sm" variant="outline" class="cursor-pointer" onclick={handleCancelEdit}> <Button size="sm" variant="outline" class="cursor-pointer" onclick={handleCancelEdit}>
Cancel Cancel
</Button> </Button>
{:else} {:else}
<Button size="sm" class="cursor-pointer" onclick={handleInsert}> <Button size="sm" class="cursor-pointer" onclick={handleInsert}>Insert</Button>
Insert
</Button>
{/if} {/if}
</div> </div>
</div> </div>
@ -255,11 +246,10 @@
</Table.Row> </Table.Row>
{:else} {:else}
{#each tempNumeric as row (row.id)} {#each tempNumeric as row (row.id)}
<Table.Row <Table.Row class="cursor-pointer hover:bg-muted/50">
class="cursor-pointer hover:bg-muted/50" <Table.Cell>{row.SpcType ? getLabel('SpcType', row.SpcType) : '-'}</Table.Cell>
<Table.Cell class="font-medium">{row.Sex ? getLabel('Sex', row.Sex) : '-'}</Table.Cell
> >
<Table.Cell>{row.SpcType ? getLabel("SpcType", row.SpcType) : "-"}</Table.Cell>
<Table.Cell class="font-medium">{row.Sex ? getLabel("Sex", row.Sex) : "-"}</Table.Cell>
<Table.Cell>{row.AgeStart} &ndash; {row.AgeEnd}</Table.Cell> <Table.Cell>{row.AgeStart} &ndash; {row.AgeEnd}</Table.Cell>
<Table.Cell> <Table.Cell>
{#if rangeTypeBadge(row.RangeType)} {#if rangeTypeBadge(row.RangeType)}
@ -270,10 +260,14 @@
</Table.Cell> </Table.Cell>
<Table.Cell class="font-medium flex justify-between"> <Table.Cell class="font-medium flex justify-between">
<div> <div>
{row.LowSign ? row.LowSign : ""} {row.Low || "null"} &ndash; {row.LowSign ? row.LowSign : ''}
{row.HighSign ? row.HighSign : ""} {row.High || "null"} {row.Low || 'null'} &ndash;
{row.HighSign ? row.HighSign : ''}
{row.High || 'null'}
</div> </div>
<Badge variant="outline" class="border-dashed border-primary border-2">{numRefTypeBadge(row.NumRefType)}</Badge> <Badge variant="outline" class="border-dashed border-primary border-2"
>{numRefTypeBadge(row.NumRefType)}</Badge
>
</Table.Cell> </Table.Cell>
<Table.Cell class="font-medium">{row.Flag}</Table.Cell> <Table.Cell class="font-medium">{row.Flag}</Table.Cell>
<Table.Cell class="font-medium">{row.Interpretation}</Table.Cell> <Table.Cell class="font-medium">{row.Interpretation}</Table.Cell>

3
src/lib/components/dictionary/test/page/tabs/ref-txt.svelte
View File

@ -10,9 +10,8 @@
import { untrack } from "svelte"; import { untrack } from "svelte";
import { toDays } from "$lib/utils/ageUtils"; import { toDays } from "$lib/utils/ageUtils";
let { resetRefTxt = $bindable(), ...props } = $props() let { tempTxt = $bindable([]), resetRefTxt = $bindable(), ...props } = $props()
let tempTxt = $state([]);
let editingId = $state(null); let editingId = $state(null);
let idCounter = $state(0); let idCounter = $state(0);

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

@ -15,6 +15,8 @@
import MoveRightIcon from '@lucide/svelte/icons/move-right'; import MoveRightIcon from '@lucide/svelte/icons/move-right';
import BrushCleaningIcon from '@lucide/svelte/icons/brush-cleaning'; import BrushCleaningIcon from '@lucide/svelte/icons/brush-cleaning';
import DeleteIcon from '@lucide/svelte/icons/delete'; import DeleteIcon from '@lucide/svelte/icons/delete';
import Trash2Icon from '@lucide/svelte/icons/trash-2';
import PlusIcon from '@lucide/svelte/icons/plus';
let { let {
formState, formState,
@ -27,7 +29,10 @@
hiddenFields, hiddenFields,
handleTestTypeChange, handleTestTypeChange,
handleResultTypeChange, handleResultTypeChange,
handleRefTypeChange handleRefTypeChange,
members = [],
onAddMember,
onRemoveMember,
} = $props(); } = $props();
const operators = ['+', '-', '*', '/', '^', '(', ')']; const operators = ['+', '-', '*', '/', '^', '(', ')'];
@ -610,6 +615,69 @@
</div> </div>
{/if} {/if}
</div> </div>
{:else if type === "members"}
{@const filteredOptions = getFilteredOptions(key)}
<div class="flex flex-col gap-2 w-full">
{#each members as member, index (member.id)}
{@const selectedLabel =
formState.selectOptions?.[key]?.find(
(opt) => opt.value === member.value
)?.label || 'Choose'}
<div class="flex gap-1 w-full">
<Button type="button" variant="outline" size="icon" disabled>
{index + 1}
</Button>
<div class="flex-1">
<Select.Root
type="single"
bind:value={member.value}
onOpenChange={(open) => {
if (open && optionsEndpoint) {
formState.fetchOptions?.(
{ key, optionsEndpoint, dependsOn, endpointParamKey, valueKey, labelKey },
formState.form
);
}
}}
>
<Select.Trigger class="w-full">
{selectedLabel}
</Select.Trigger>
<Select.Content>
<div class="p-2">
<input
type="text"
placeholder="Search..."
class="w-full border rounded px-2 py-1 text-sm"
bind:value={searchQuery[key]}
/>
</div>
{#if formState.loadingOptions?.[key]}
<Select.Item disabled value="loading">Loading...</Select.Item>
{:else}
{#if !required}
<Select.Item value="">- None -</Select.Item>
{/if}
{#each filteredOptions as option}
<Select.Item value={option.value}>
{option.label}
</Select.Item>
{/each}
{/if}
</Select.Content>
</Select.Root>
</div>
<Button type="button" variant="outline" size="icon" onclick={() => onRemoveMember(member.id)}>
<Trash2Icon class="size-4" />
</Button>
</div>
{/each}
<Button variant="outline" onclick={onAddMember}>
<PlusIcon class="size-4" />
Add Test
</Button>
</div>
{:else} {:else}
<Input <Input
type="text" type="text"