mirror of
https://github.com/faiztyanirh/clqms-shadcn-v1.git
synced 2026-04-29 18:18:02 +07:00
fix dynamic payload refnum & reftxt
This commit is contained in:
parent
104b6eff88
commit
3573b1b2dc
@ -73,6 +73,10 @@ export const testCalSchema = z
|
||||
}
|
||||
});
|
||||
|
||||
export const testGroupSchema = z.object({
|
||||
Member: z.string().optional()
|
||||
});
|
||||
|
||||
export const refNumSchema = z
|
||||
.object({
|
||||
AgeStart: z.string().optional(),
|
||||
@ -212,6 +216,12 @@ export const testCalInitialForm = {
|
||||
FormulaCode: ''
|
||||
};
|
||||
|
||||
export const testGroupInitialForm = {
|
||||
TestGrpID: '',
|
||||
TestSiteID: '',
|
||||
Member: '',
|
||||
}
|
||||
|
||||
export const refNumInitialForm = {
|
||||
RefNumID: '',
|
||||
SiteID: '',
|
||||
@ -270,9 +280,13 @@ export const testDefaultErrors = {
|
||||
|
||||
export const testCalDefaultErrors = {
|
||||
FormulaInput: 'Required',
|
||||
FormulaCode: null
|
||||
FormulaCode: null,
|
||||
};
|
||||
|
||||
export const testGroupDefaultErrors = {
|
||||
Member: null,
|
||||
}
|
||||
|
||||
export const refNumDefaultErrors = {
|
||||
AgeStart: 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 = [
|
||||
{
|
||||
rows: [
|
||||
@ -1013,7 +1049,7 @@ export function getTestFormActions(handlers) {
|
||||
// return cleanEmptyStrings(payload);
|
||||
// }
|
||||
|
||||
export function buildTestPayload({ mainForm, activeFormStates, testType }) {
|
||||
export function buildTestPayload({ mainForm, activeFormStates, testType, refNumData, refTxtData }) {
|
||||
let payload = {
|
||||
...mainForm
|
||||
};
|
||||
@ -1021,13 +1057,17 @@ export function buildTestPayload({ mainForm, activeFormStates, testType }) {
|
||||
for (const key in activeFormStates) {
|
||||
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] = {
|
||||
...state.form
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return cleanEmptyStrings(payload);
|
||||
}
|
||||
|
||||
@ -1,30 +1,50 @@
|
||||
<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 * as Tabs from "$lib/components/ui/tabs/index.js";
|
||||
import { useForm } from "$lib/components/composable/use-form.svelte";
|
||||
import { buildTestPayload,
|
||||
testCalSchema, testCalInitialForm, testCalDefaultErrors, testCalFormFields,
|
||||
refNumSchema, refNumDefaultErrors, refNumInitialForm, refNumFormFields,
|
||||
refTxtSchema, refTxtDefaultErrors, refTxtInitialForm, refTxtFormFields,
|
||||
testMapSchema, testMapInitialForm, testMapDefaultErrors, testMapFormFields
|
||||
} 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 { API } from "$lib/config/api";
|
||||
import { untrack } from "svelte";
|
||||
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 * as Tabs from '$lib/components/ui/tabs/index.js';
|
||||
import { useForm } from '$lib/components/composable/use-form.svelte';
|
||||
import {
|
||||
buildTestPayload,
|
||||
testCalSchema,
|
||||
testCalInitialForm,
|
||||
testCalDefaultErrors,
|
||||
testCalFormFields,
|
||||
refNumSchema,
|
||||
refNumDefaultErrors,
|
||||
refNumInitialForm,
|
||||
refNumFormFields,
|
||||
refTxtSchema,
|
||||
refTxtDefaultErrors,
|
||||
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 resetRefNum = $state();
|
||||
let resetRefTxt = $state();
|
||||
let resetMap = $state();
|
||||
let refNumData = $state([]);
|
||||
let refTxtData = $state([]);
|
||||
|
||||
const { masterDetail, formFields, formActions, schema, initialForm } = props.context;
|
||||
|
||||
@ -33,19 +53,25 @@
|
||||
const calFormState = useForm({
|
||||
schema: testCalSchema,
|
||||
initialForm: testCalInitialForm,
|
||||
defaultErrors: testCalDefaultErrors,
|
||||
defaultErrors: testCalDefaultErrors
|
||||
});
|
||||
|
||||
const groupFormState = useForm({
|
||||
schema: testGroupSchema,
|
||||
initialForm: testGroupInitialForm,
|
||||
defaultErrors: testGroupDefaultErrors,
|
||||
});
|
||||
|
||||
const refNumState = useForm({
|
||||
schema: refNumSchema,
|
||||
initialForm: refNumInitialForm,
|
||||
defaultErrors: refNumDefaultErrors,
|
||||
defaultErrors: refNumDefaultErrors
|
||||
});
|
||||
|
||||
const refTxtState = useForm({
|
||||
schema: refTxtSchema,
|
||||
initialForm: refTxtInitialForm,
|
||||
defaultErrors: refTxtDefaultErrors,
|
||||
defaultErrors: refTxtDefaultErrors
|
||||
});
|
||||
|
||||
const mapFormState = useForm({
|
||||
@ -53,7 +79,7 @@
|
||||
initialForm: testMapInitialForm,
|
||||
defaultErrors: testMapDefaultErrors,
|
||||
modeOpt: 'cascade'
|
||||
})
|
||||
});
|
||||
|
||||
// const activeFormStates = $derived.by(() => {
|
||||
// switch (formState.form.TestType) {
|
||||
@ -72,32 +98,32 @@
|
||||
// });
|
||||
|
||||
const activeFormStates = $derived.by(() => {
|
||||
const testType = formState.form.TestType ?? "";
|
||||
const refType = formState.form.RefType ?? "";
|
||||
const testType = formState.form.TestType ?? '';
|
||||
const refType = formState.form.RefType ?? '';
|
||||
|
||||
let refState = {};
|
||||
|
||||
if (refType === "RANGE" || refType === "THOLD") {
|
||||
if (refType === 'RANGE' || refType === 'THOLD') {
|
||||
refState = { refNum: refNumState };
|
||||
} else if (refType === "TEXT" || refType === "VSET") {
|
||||
} else if (refType === 'TEXT' || refType === 'VSET') {
|
||||
refState = { refTxt: refTxtState };
|
||||
}
|
||||
|
||||
switch (testType) {
|
||||
case "TEST":
|
||||
case "PARAM":
|
||||
case 'TEST':
|
||||
case 'PARAM':
|
||||
return {
|
||||
...refState,
|
||||
map: mapFormState
|
||||
};
|
||||
case "CALC":
|
||||
case 'CALC':
|
||||
return {
|
||||
cal: calFormState,
|
||||
...refState,
|
||||
map: mapFormState
|
||||
};
|
||||
case "GROUP":
|
||||
case "TITLE":
|
||||
case 'GROUP':
|
||||
case 'TITLE':
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
@ -114,10 +140,8 @@
|
||||
|
||||
const actions = formActions(handlers);
|
||||
|
||||
const allColumns = formFields.flatMap(
|
||||
(section) => section.rows.flatMap(
|
||||
(row) => row.columns ?? []
|
||||
)
|
||||
const allColumns = formFields.flatMap((section) =>
|
||||
section.rows.flatMap((row) => row.columns ?? [])
|
||||
);
|
||||
|
||||
let showConfirm = $state(false);
|
||||
@ -129,7 +153,9 @@
|
||||
const payload = buildTestPayload({
|
||||
mainForm,
|
||||
activeFormStates,
|
||||
testType: testType
|
||||
testType: testType,
|
||||
refNumData: refNumData,
|
||||
refTxtData: refTxtData
|
||||
});
|
||||
console.log(payload);
|
||||
// const result = await formState.save(masterDetail.mode);
|
||||
@ -152,7 +178,7 @@
|
||||
let availableTabs = $derived.by(() => {
|
||||
const testType = formState?.form?.TestType;
|
||||
|
||||
switch(testType) {
|
||||
switch (testType) {
|
||||
case 'TEST':
|
||||
case 'PARAM':
|
||||
return ['definition', 'map', 'reference'];
|
||||
@ -168,7 +194,7 @@
|
||||
let disabledResultTypes = $derived.by(() => {
|
||||
const testType = formState?.form?.TestType;
|
||||
|
||||
switch(testType) {
|
||||
switch (testType) {
|
||||
case 'TEST':
|
||||
case 'PARAM':
|
||||
return [];
|
||||
@ -186,7 +212,7 @@
|
||||
let disabledReferenceTypes = $derived.by(() => {
|
||||
const resultType = formState?.form?.ResultType;
|
||||
|
||||
switch(resultType) {
|
||||
switch (resultType) {
|
||||
case 'NMRIC':
|
||||
return ['TEXT', 'VSET', 'NOREF'];
|
||||
case 'RANGE':
|
||||
@ -204,7 +230,7 @@
|
||||
|
||||
let hiddenFields = $derived.by(() => {
|
||||
const resultType = formState?.form?.ResultType;
|
||||
return resultType !== "VSET" ? ["VSet"] : [];
|
||||
return resultType !== 'VSET' ? ['VSet'] : [];
|
||||
});
|
||||
|
||||
let refComponent = $derived.by(() => {
|
||||
@ -215,24 +241,24 @@
|
||||
});
|
||||
|
||||
const refTxtFormFieldsTransformed = $derived.by(() => {
|
||||
return refTxtFormFields.map(group => ({
|
||||
return refTxtFormFields.map((group) => ({
|
||||
...group,
|
||||
rows: group.rows.map(row => ({
|
||||
rows: group.rows.map((row) => ({
|
||||
...row,
|
||||
columns: row.columns.map(col => {
|
||||
if (col.key !== "RefTxt") return col;
|
||||
columns: row.columns.map((col) => {
|
||||
if (col.key !== 'RefTxt') return col;
|
||||
|
||||
if (formState.form.ResultType !== "VSET" || !formState.form.VSet) {
|
||||
if (formState.form.ResultType !== 'VSET' || !formState.form.VSet) {
|
||||
return {
|
||||
...col,
|
||||
type: "textarea",
|
||||
type: 'textarea',
|
||||
optionsEndpoint: undefined
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...col,
|
||||
type: "select",
|
||||
type: 'select',
|
||||
optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/${formState.form.VSet}`,
|
||||
fullWidth: false
|
||||
};
|
||||
@ -242,70 +268,69 @@
|
||||
});
|
||||
|
||||
const testMapFormFieldsTransformed = $derived.by(() => {
|
||||
return testMapFormFields.map(group => ({
|
||||
return testMapFormFields.map((group) => ({
|
||||
...group,
|
||||
rows: group.rows.map(row => ({
|
||||
rows: group.rows.map((row) => ({
|
||||
...row,
|
||||
columns: row.columns.map(col => {
|
||||
|
||||
if (col.key === "HostID") {
|
||||
if (mapFormState.form.HostType === "SITE") {
|
||||
columns: row.columns.map((col) => {
|
||||
if (col.key === 'HostID') {
|
||||
if (mapFormState.form.HostType === 'SITE') {
|
||||
return {
|
||||
...col,
|
||||
type: "select",
|
||||
type: 'select',
|
||||
optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
|
||||
valueKey: "SiteID",
|
||||
labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`,
|
||||
valueKey: 'SiteID',
|
||||
labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
|
||||
};
|
||||
}
|
||||
return col;
|
||||
}
|
||||
|
||||
if (col.key === "ClientID") {
|
||||
if (mapFormState.form.ClientType === "SITE") {
|
||||
if (col.key === 'ClientID') {
|
||||
if (mapFormState.form.ClientType === 'SITE') {
|
||||
return {
|
||||
...col,
|
||||
type: "select",
|
||||
type: 'select',
|
||||
optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
|
||||
valueKey: "SiteID",
|
||||
labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`,
|
||||
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) {
|
||||
if (col.key === 'HostTestCode' || col.key === 'HostTestName') {
|
||||
if (mapFormState.form.HostType === 'SITE' && mapFormState.form.HostID) {
|
||||
return {
|
||||
...col,
|
||||
type: "select",
|
||||
type: 'select',
|
||||
optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.form.HostID}`,
|
||||
valueKey: "TestSiteID",
|
||||
labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`,
|
||||
valueKey: 'TestSiteID',
|
||||
labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`
|
||||
};
|
||||
}
|
||||
// kalau belum pilih HostID, kembalikan default (misal input biasa)
|
||||
return {
|
||||
...col,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
optionsEndpoint: undefined
|
||||
};
|
||||
}
|
||||
|
||||
if (col.key === "ClientTestCode" || col.key === "ClientTestName") {
|
||||
if (mapFormState.form.ClientType === "SITE" && mapFormState.form.ClientID) {
|
||||
if (col.key === 'ClientTestCode' || col.key === 'ClientTestName') {
|
||||
if (mapFormState.form.ClientType === 'SITE' && mapFormState.form.ClientID) {
|
||||
return {
|
||||
...col,
|
||||
type: "select",
|
||||
type: 'select',
|
||||
optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.form.ClientID}`,
|
||||
valueKey: "TestSiteID",
|
||||
labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`,
|
||||
valueKey: 'TestSiteID',
|
||||
labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`
|
||||
};
|
||||
}
|
||||
// kalau belum pilih HostID, kembalikan default (misal input biasa)
|
||||
return {
|
||||
...col,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
optionsEndpoint: undefined
|
||||
};
|
||||
}
|
||||
@ -316,7 +341,7 @@
|
||||
}));
|
||||
});
|
||||
|
||||
// $inspect(activeFormState.errors)
|
||||
// $inspect(activeFormState.errors)
|
||||
let activeTab = $state('definition');
|
||||
|
||||
$effect(() => {
|
||||
@ -327,23 +352,21 @@
|
||||
|
||||
$effect(() => {
|
||||
for (const key of hiddenFields) {
|
||||
formState.form[key] = "";
|
||||
formState.form[key] = '';
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (formState.form.Factor && !formState.form.Unit2) {
|
||||
formState.errors.Unit2 = "Required";
|
||||
formState.errors.Unit2 = 'Required';
|
||||
} else {
|
||||
formState.errors.Unit2 = null;
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const allColumns = formFields.flatMap(
|
||||
(section) => section.rows.flatMap(
|
||||
(row) => row.columns ?? []
|
||||
)
|
||||
const allColumns = formFields.flatMap((section) =>
|
||||
section.rows.flatMap((row) => row.columns ?? [])
|
||||
);
|
||||
|
||||
untrack(() => {
|
||||
@ -356,20 +379,20 @@
|
||||
key: col.key,
|
||||
optionsEndpoint: col.optionsEndpoint,
|
||||
valueKey: col.valueKey,
|
||||
labelKey: col.labelKey,
|
||||
labelKey: col.labelKey
|
||||
},
|
||||
formState.form
|
||||
);
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
function handleTestTypeChange(value) {
|
||||
formState.form.TestType = value;
|
||||
|
||||
formState.form.ResultType = "";
|
||||
formState.form.ResultType = '';
|
||||
formState.errors.ResultType = null;
|
||||
formState.form.RefType = "";
|
||||
formState.form.RefType = '';
|
||||
formState.errors.RefType = null;
|
||||
|
||||
calFormState.reset();
|
||||
@ -383,7 +406,7 @@
|
||||
function handleResultTypeChange(value) {
|
||||
formState.form.ResultType = value;
|
||||
|
||||
formState.form.RefType = "";
|
||||
formState.form.RefType = '';
|
||||
formState.errors.RefType = null;
|
||||
|
||||
calFormState.reset();
|
||||
@ -393,7 +416,7 @@
|
||||
resetRefNum?.();
|
||||
resetRefTxt?.();
|
||||
|
||||
let newRefType = "";
|
||||
let newRefType = '';
|
||||
if (value === 'TEXT') {
|
||||
newRefType = 'TEXT';
|
||||
}
|
||||
@ -460,7 +483,7 @@
|
||||
<Tabs.Content value="definition">
|
||||
<DictionaryFormRenderer
|
||||
{formState}
|
||||
formFields={formFields}
|
||||
{formFields}
|
||||
mode="create"
|
||||
{disabledResultTypes}
|
||||
{disabledReferenceTypes}
|
||||
@ -474,17 +497,17 @@
|
||||
<Calculation {calFormState} {testCalFormFields} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="group">
|
||||
group
|
||||
<Group {groupFormState} {testGroupFormFields} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="map">
|
||||
<Map {mapFormState} testMapFormFields={testMapFormFieldsTransformed} bind:resetMap={resetMap}/>
|
||||
<Map {mapFormState} testMapFormFields={testMapFormFieldsTransformed} bind:resetMap />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="reference">
|
||||
<div class="w-full h-full flex items-start">
|
||||
{#if refComponent === 'numeric'}
|
||||
<RefNum {refNumState} {refNumFormFields} bind:resetRefNum={resetRefNum}/>
|
||||
<RefNum {refNumState} {refNumFormFields} bind:tempNumeric={refNumData} bind:resetRefNum />
|
||||
{:else if refComponent === 'text'}
|
||||
<RefTxt {refTxtState} refTxtFormFields={refTxtFormFieldsTransformed} bind:resetRefTxt={resetRefTxt} />
|
||||
<RefTxt {refTxtState} refTxtFormFields={refTxtFormFieldsTransformed} bind:tempTxt={refTxtData} bind:resetRefTxt />
|
||||
{:else}
|
||||
<div class="h-full w-full flex items-center">
|
||||
<ReusableEmpty desc="Select a Reference Type" />
|
||||
@ -493,7 +516,6 @@
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
|
||||
</FormPageContainer>
|
||||
|
||||
<ReusableAlertDialog
|
||||
|
||||
@ -9,154 +9,11 @@
|
||||
import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
|
||||
|
||||
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>
|
||||
|
||||
<div class="flex flex-col gap-4 w-full">
|
||||
<DictionaryFormRenderer formState={props.calFormState} formFields={props.testCalFormFields}/>
|
||||
</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
25
src/lib/components/dictionary/test/page/tabs/group.svelte
Normal 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>
|
||||
@ -1,18 +1,17 @@
|
||||
<script>
|
||||
import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
|
||||
import { Separator } from "$lib/components/ui/separator/index.js";
|
||||
import * as Table from "$lib/components/ui/table/index.js";
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
import { Badge } from "$lib/components/ui/badge/index.js";
|
||||
import { buildAgeText } from "$lib/utils/ageUtils";
|
||||
import PencilIcon from "@lucide/svelte/icons/pencil";
|
||||
import Trash2Icon from "@lucide/svelte/icons/trash-2";
|
||||
import { untrack } from "svelte";
|
||||
import { toDays } from "$lib/utils/ageUtils";
|
||||
import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
|
||||
import { Separator } from '$lib/components/ui/separator/index.js';
|
||||
import * as Table from '$lib/components/ui/table/index.js';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import { Badge } from '$lib/components/ui/badge/index.js';
|
||||
import { buildAgeText } from '$lib/utils/ageUtils';
|
||||
import PencilIcon from '@lucide/svelte/icons/pencil';
|
||||
import Trash2Icon from '@lucide/svelte/icons/trash-2';
|
||||
import { untrack } from 'svelte';
|
||||
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 idCounter = $state(0);
|
||||
|
||||
@ -21,15 +20,15 @@
|
||||
};
|
||||
|
||||
let joinFields = $state({
|
||||
AgeStart: { DD: "", MM: "", YY: "" },
|
||||
AgeEnd: { DD: "", MM: "", YY: "" },
|
||||
AgeStart: { DD: '', MM: '', YY: '' },
|
||||
AgeEnd: { DD: '', MM: '', YY: '' }
|
||||
});
|
||||
|
||||
let disabledSign = $derived.by(() => {
|
||||
const refType = props.refNumState.form.NumRefType;
|
||||
|
||||
if (refType === "RANGE") return true;
|
||||
if (refType === "THOLD") return false;
|
||||
if (refType === 'RANGE') return true;
|
||||
if (refType === 'THOLD') return false;
|
||||
|
||||
return false;
|
||||
});
|
||||
@ -37,28 +36,28 @@
|
||||
function snapshotForm() {
|
||||
const f = props.refNumState.form;
|
||||
return {
|
||||
SpcType: f.SpcType ?? "",
|
||||
Sex: f.Sex ?? "",
|
||||
AgeStart: f.AgeStart ?? "",
|
||||
AgeEnd: f.AgeEnd ?? "",
|
||||
NumRefType: f.NumRefType ?? "",
|
||||
RangeType: f.RangeType ?? "",
|
||||
LowSign: f.LowSign ?? "",
|
||||
Low: f.Low ?? "",
|
||||
HighSign: f.HighSign ?? "",
|
||||
High: f.High ?? "",
|
||||
Display: f.Display ?? "",
|
||||
Flag: f.Flag ?? "",
|
||||
Interpretation: f.Interpretation ?? "",
|
||||
Notes: f.Notes ?? "",
|
||||
SpcType: f.SpcType ?? '',
|
||||
Sex: f.Sex ?? '',
|
||||
AgeStart: f.AgeStart ?? '',
|
||||
AgeEnd: f.AgeEnd ?? '',
|
||||
NumRefType: f.NumRefType ?? '',
|
||||
RangeType: f.RangeType ?? '',
|
||||
LowSign: f.LowSign ?? '',
|
||||
Low: f.Low ?? '',
|
||||
HighSign: f.HighSign ?? '',
|
||||
High: f.High ?? '',
|
||||
Display: f.Display ?? '',
|
||||
Flag: f.Flag ?? '',
|
||||
Interpretation: f.Interpretation ?? '',
|
||||
Notes: f.Notes ?? ''
|
||||
};
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
props.refNumState.reset?.();
|
||||
joinFields = {
|
||||
AgeStart: { DD: "", MM: "", YY: "" },
|
||||
AgeEnd: { DD: "", MM: "", YY: "" },
|
||||
AgeStart: { DD: '', MM: '', YY: '' },
|
||||
AgeEnd: { DD: '', MM: '', YY: '' }
|
||||
};
|
||||
editingId = null;
|
||||
}
|
||||
@ -73,7 +72,7 @@
|
||||
// tempNumeric = [...tempNumeric, row];
|
||||
// resetForm();
|
||||
|
||||
const isOverlap = tempNumeric.some(row => {
|
||||
const isOverlap = tempNumeric.some((row) => {
|
||||
const existingStart = toDays(row.AgeStart);
|
||||
const existingEnd = toDays(row.AgeEnd);
|
||||
|
||||
@ -83,8 +82,7 @@
|
||||
});
|
||||
|
||||
if (isOverlap) {
|
||||
props.refNumState.errors.AgeEnd =
|
||||
"Age range overlaps with existing data";
|
||||
props.refNumState.errors.AgeEnd = 'Age range overlaps with existing data';
|
||||
return;
|
||||
}
|
||||
|
||||
@ -117,12 +115,12 @@
|
||||
f.Interpretation = row.Interpretation;
|
||||
f.Notes = row.Notes;
|
||||
|
||||
for (const key of ["AgeStart", "AgeEnd"]) {
|
||||
const val = row[key] ?? "";
|
||||
for (const key of ['AgeStart', 'AgeEnd']) {
|
||||
const val = row[key] ?? '';
|
||||
const match = val.match(/(\d+)Y\s*(\d+)M\s*(\d+)D/);
|
||||
joinFields[key] = match
|
||||
? { YY: match[1], MM: match[2], DD: match[3] }
|
||||
: { DD: "", MM: "", YY: "" };
|
||||
: { DD: '', MM: '', YY: '' };
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,27 +152,24 @@
|
||||
return found ? found.code : value;
|
||||
}
|
||||
|
||||
const rangeTypeBadge = (type) => ({ REF: "REF", CRTC: "CRTC" }[type] ?? null);
|
||||
const numRefTypeBadge = (type) => ({ RANGE: "R", THOLD: "T" }[type] ?? null);;
|
||||
const rangeTypeBadge = (type) => ({ REF: 'REF', CRTC: 'CRTC' })[type] ?? null;
|
||||
const numRefTypeBadge = (type) => ({ RANGE: 'R', THOLD: 'T' })[type] ?? null;
|
||||
|
||||
const rangeDisplay = (row) => {
|
||||
if (row.NumRefType === "RANGE") return `${row.LowValue} - ${row.HighValue}`;
|
||||
if (row.NumRefType === "THOLD") return row.TholdValue;
|
||||
return "-";
|
||||
if (row.NumRefType === 'RANGE') return `${row.LowValue} - ${row.HighValue}`;
|
||||
if (row.NumRefType === 'THOLD') return row.TholdValue;
|
||||
return '-';
|
||||
};
|
||||
|
||||
$effect(() => {
|
||||
for (const key of ["AgeStart", "AgeEnd"]) {
|
||||
props.refNumState.form[key] =
|
||||
buildAgeText(joinFields[key]);
|
||||
for (const key of ['AgeStart', 'AgeEnd']) {
|
||||
props.refNumState.form[key] = buildAgeText(joinFields[key]);
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const allColumns = props.refNumFormFields.flatMap(
|
||||
(section) => section.rows.flatMap(
|
||||
(row) => row.columns ?? []
|
||||
)
|
||||
const allColumns = props.refNumFormFields.flatMap((section) =>
|
||||
section.rows.flatMap((row) => row.columns ?? [])
|
||||
);
|
||||
|
||||
untrack(() => {
|
||||
@ -186,21 +181,21 @@
|
||||
key: col.key,
|
||||
optionsEndpoint: col.optionsEndpoint,
|
||||
valueKey: col.valueKey,
|
||||
labelKey: col.labelKey,
|
||||
labelKey: col.labelKey
|
||||
},
|
||||
props.refNumState.form
|
||||
);
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (!props.refNumState.form.Low || props.refNumState.form.Low === "") {
|
||||
props.refNumState.form.LowSign = "";
|
||||
if (!props.refNumState.form.Low || props.refNumState.form.Low === '') {
|
||||
props.refNumState.form.LowSign = '';
|
||||
}
|
||||
|
||||
if (!props.refNumState.form.High || props.refNumState.form.High === "") {
|
||||
props.refNumState.form.HighSign = "";
|
||||
if (!props.refNumState.form.High || props.refNumState.form.High === '') {
|
||||
props.refNumState.form.HighSign = '';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -215,16 +210,12 @@
|
||||
/>
|
||||
<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" 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>
|
||||
<Button size="sm" class="cursor-pointer" onclick={handleInsert}>Insert</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@ -255,11 +246,10 @@
|
||||
</Table.Row>
|
||||
{:else}
|
||||
{#each tempNumeric as row (row.id)}
|
||||
<Table.Row
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
<Table.Row 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} – {row.AgeEnd}</Table.Cell>
|
||||
<Table.Cell>
|
||||
{#if rangeTypeBadge(row.RangeType)}
|
||||
@ -270,10 +260,14 @@
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-medium flex justify-between">
|
||||
<div>
|
||||
{row.LowSign ? row.LowSign : ""} {row.Low || "null"} –
|
||||
{row.HighSign ? row.HighSign : ""} {row.High || "null"}
|
||||
{row.LowSign ? row.LowSign : ''}
|
||||
{row.Low || 'null'} –
|
||||
{row.HighSign ? row.HighSign : ''}
|
||||
{row.High || 'null'}
|
||||
</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 class="font-medium">{row.Flag}</Table.Cell>
|
||||
<Table.Cell class="font-medium">{row.Interpretation}</Table.Cell>
|
||||
|
||||
@ -10,9 +10,8 @@
|
||||
import { untrack } from "svelte";
|
||||
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 idCounter = $state(0);
|
||||
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
import MoveRightIcon from '@lucide/svelte/icons/move-right';
|
||||
import BrushCleaningIcon from '@lucide/svelte/icons/brush-cleaning';
|
||||
import DeleteIcon from '@lucide/svelte/icons/delete';
|
||||
import Trash2Icon from '@lucide/svelte/icons/trash-2';
|
||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||
|
||||
let {
|
||||
formState,
|
||||
@ -27,7 +29,10 @@
|
||||
hiddenFields,
|
||||
handleTestTypeChange,
|
||||
handleResultTypeChange,
|
||||
handleRefTypeChange
|
||||
handleRefTypeChange,
|
||||
members = [],
|
||||
onAddMember,
|
||||
onRemoveMember,
|
||||
} = $props();
|
||||
|
||||
const operators = ['+', '-', '*', '/', '^', '(', ')'];
|
||||
@ -610,6 +615,69 @@
|
||||
</div>
|
||||
{/if}
|
||||
</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}
|
||||
<Input
|
||||
type="text"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user