mirror of
https://github.com/faiztyanirh/clqms-shadcn-v1.git
synced 2026-04-22 09:35:34 +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,21 +1049,25 @@ export function getTestFormActions(handlers) {
|
||||
// return cleanEmptyStrings(payload);
|
||||
// }
|
||||
|
||||
export function buildTestPayload({ mainForm, activeFormStates, testType }) {
|
||||
let payload = {
|
||||
...mainForm
|
||||
};
|
||||
export function buildTestPayload({ mainForm, activeFormStates, testType, refNumData, refTxtData }) {
|
||||
let payload = {
|
||||
...mainForm
|
||||
};
|
||||
|
||||
for (const key in activeFormStates) {
|
||||
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);
|
||||
return cleanEmptyStrings(payload);
|
||||
}
|
||||
|
||||
@ -1,502 +1,524 @@
|
||||
<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 props = $props();
|
||||
|
||||
let resetRefNum = $state();
|
||||
let resetRefTxt = $state();
|
||||
let resetMap = $state();
|
||||
let resetRefNum = $state();
|
||||
let resetRefTxt = $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;
|
||||
|
||||
const { formState } = masterDetail;
|
||||
const { formState } = masterDetail;
|
||||
|
||||
const calFormState = useForm({
|
||||
schema: testCalSchema,
|
||||
initialForm: testCalInitialForm,
|
||||
defaultErrors: testCalDefaultErrors,
|
||||
const calFormState = useForm({
|
||||
schema: testCalSchema,
|
||||
initialForm: testCalInitialForm,
|
||||
defaultErrors: testCalDefaultErrors
|
||||
});
|
||||
|
||||
const groupFormState = useForm({
|
||||
schema: testGroupSchema,
|
||||
initialForm: testGroupInitialForm,
|
||||
defaultErrors: testGroupDefaultErrors,
|
||||
});
|
||||
|
||||
const refNumState = useForm({
|
||||
schema: refNumSchema,
|
||||
initialForm: refNumInitialForm,
|
||||
defaultErrors: refNumDefaultErrors,
|
||||
});
|
||||
const refNumState = useForm({
|
||||
schema: refNumSchema,
|
||||
initialForm: refNumInitialForm,
|
||||
defaultErrors: refNumDefaultErrors
|
||||
});
|
||||
|
||||
const refTxtState = useForm({
|
||||
schema: refTxtSchema,
|
||||
initialForm: refTxtInitialForm,
|
||||
defaultErrors: refTxtDefaultErrors,
|
||||
});
|
||||
const refTxtState = useForm({
|
||||
schema: refTxtSchema,
|
||||
initialForm: refTxtInitialForm,
|
||||
defaultErrors: refTxtDefaultErrors
|
||||
});
|
||||
|
||||
const mapFormState = useForm({
|
||||
schema: testMapSchema,
|
||||
initialForm: testMapInitialForm,
|
||||
defaultErrors: testMapDefaultErrors,
|
||||
modeOpt: 'cascade'
|
||||
})
|
||||
const mapFormState = useForm({
|
||||
schema: testMapSchema,
|
||||
initialForm: testMapInitialForm,
|
||||
defaultErrors: testMapDefaultErrors,
|
||||
modeOpt: 'cascade'
|
||||
});
|
||||
|
||||
// const activeFormStates = $derived.by(() => {
|
||||
// switch (formState.form.TestType) {
|
||||
// case "TEST":
|
||||
// case "PARAM":
|
||||
// return [refNumState, refTxtState, mapFormState];
|
||||
// case "CALC":
|
||||
// return [calFormState, refNumState, refTxtState, mapFormState];
|
||||
// case "GROUP":
|
||||
// return [];
|
||||
// case "TITLE":
|
||||
// return [];
|
||||
// default:
|
||||
// return [];
|
||||
// }
|
||||
// });
|
||||
// const activeFormStates = $derived.by(() => {
|
||||
// switch (formState.form.TestType) {
|
||||
// case "TEST":
|
||||
// case "PARAM":
|
||||
// return [refNumState, refTxtState, mapFormState];
|
||||
// case "CALC":
|
||||
// return [calFormState, refNumState, refTxtState, mapFormState];
|
||||
// case "GROUP":
|
||||
// return [];
|
||||
// case "TITLE":
|
||||
// return [];
|
||||
// default:
|
||||
// return [];
|
||||
// }
|
||||
// });
|
||||
|
||||
const activeFormStates = $derived.by(() => {
|
||||
const testType = formState.form.TestType ?? "";
|
||||
const refType = formState.form.RefType ?? "";
|
||||
const activeFormStates = $derived.by(() => {
|
||||
const testType = formState.form.TestType ?? '';
|
||||
const refType = formState.form.RefType ?? '';
|
||||
|
||||
let refState = {};
|
||||
let refState = {};
|
||||
|
||||
if (refType === "RANGE" || refType === "THOLD") {
|
||||
refState = { refNum: refNumState };
|
||||
} else if (refType === "TEXT" || refType === "VSET") {
|
||||
refState = { refTxt: refTxtState };
|
||||
}
|
||||
if (refType === 'RANGE' || refType === 'THOLD') {
|
||||
refState = { refNum: refNumState };
|
||||
} else if (refType === 'TEXT' || refType === 'VSET') {
|
||||
refState = { refTxt: refTxtState };
|
||||
}
|
||||
|
||||
switch (testType) {
|
||||
case "TEST":
|
||||
case "PARAM":
|
||||
return {
|
||||
...refState,
|
||||
map: mapFormState
|
||||
};
|
||||
case "CALC":
|
||||
return {
|
||||
cal: calFormState,
|
||||
...refState,
|
||||
map: mapFormState
|
||||
};
|
||||
case "GROUP":
|
||||
case "TITLE":
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
});
|
||||
switch (testType) {
|
||||
case 'TEST':
|
||||
case 'PARAM':
|
||||
return {
|
||||
...refState,
|
||||
map: mapFormState
|
||||
};
|
||||
case 'CALC':
|
||||
return {
|
||||
cal: calFormState,
|
||||
...refState,
|
||||
map: mapFormState
|
||||
};
|
||||
case 'GROUP':
|
||||
case 'TITLE':
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
});
|
||||
|
||||
// const helpers = useDictionaryForm(formState);
|
||||
const helpers = useDictionaryForm(formState, () => activeFormStates);
|
||||
// const helpers = useDictionaryForm(formState);
|
||||
const helpers = useDictionaryForm(formState, () => activeFormStates);
|
||||
|
||||
const handlers = {
|
||||
clearForm: () => {
|
||||
formState.reset();
|
||||
}
|
||||
};
|
||||
const handlers = {
|
||||
clearForm: () => {
|
||||
formState.reset();
|
||||
}
|
||||
};
|
||||
|
||||
const actions = formActions(handlers);
|
||||
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);
|
||||
let showConfirm = $state(false);
|
||||
|
||||
async function handleSave() {
|
||||
const mainForm = masterDetail.formState.form;
|
||||
const testType = mainForm.TestType;
|
||||
async function handleSave() {
|
||||
const mainForm = masterDetail.formState.form;
|
||||
const testType = mainForm.TestType;
|
||||
|
||||
const payload = buildTestPayload({
|
||||
mainForm,
|
||||
activeFormStates,
|
||||
testType: testType
|
||||
});
|
||||
console.log(payload);
|
||||
// const result = await formState.save(masterDetail.mode);
|
||||
const payload = buildTestPayload({
|
||||
mainForm,
|
||||
activeFormStates,
|
||||
testType: testType,
|
||||
refNumData: refNumData,
|
||||
refTxtData: refTxtData
|
||||
});
|
||||
console.log(payload);
|
||||
// const result = await formState.save(masterDetail.mode);
|
||||
|
||||
// toast('Test Created!');
|
||||
// masterDetail?.exitForm(true);
|
||||
}
|
||||
// toast('Test Created!');
|
||||
// masterDetail?.exitForm(true);
|
||||
}
|
||||
|
||||
const primaryAction = $derived({
|
||||
label: 'Save',
|
||||
onClick: handleSave,
|
||||
disabled: helpers.hasErrors || formState.isSaving.current,
|
||||
loading: formState.isSaving.current
|
||||
});
|
||||
const primaryAction = $derived({
|
||||
label: 'Save',
|
||||
onClick: handleSave,
|
||||
disabled: helpers.hasErrors || formState.isSaving.current,
|
||||
loading: formState.isSaving.current
|
||||
});
|
||||
|
||||
const secondaryActions = [];
|
||||
const secondaryActions = [];
|
||||
|
||||
// ==================================================================
|
||||
|
||||
let availableTabs = $derived.by(() => {
|
||||
const testType = formState?.form?.TestType;
|
||||
|
||||
switch(testType) {
|
||||
case 'TEST':
|
||||
case 'PARAM':
|
||||
return ['definition', 'map', 'reference'];
|
||||
case 'CALC':
|
||||
return ['definition', 'calculation', 'map', 'reference'];
|
||||
case 'GROUP':
|
||||
return ['definition', 'group'];
|
||||
default:
|
||||
return ['definition'];
|
||||
}
|
||||
});
|
||||
// ==================================================================
|
||||
|
||||
let disabledResultTypes = $derived.by(() => {
|
||||
const testType = formState?.form?.TestType;
|
||||
|
||||
switch(testType) {
|
||||
case 'TEST':
|
||||
case 'PARAM':
|
||||
return [];
|
||||
case 'CALC':
|
||||
return ['RANGE', 'TEXT', 'VSET', 'NORES'];
|
||||
case 'GROUP':
|
||||
return ['NMRIC', 'RANGE', 'TEXT', 'VSET', 'NORES'];
|
||||
case 'TITLE':
|
||||
return ['NMRIC', 'RANGE', 'TEXT', 'VSET', 'NORES'];
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
});
|
||||
let availableTabs = $derived.by(() => {
|
||||
const testType = formState?.form?.TestType;
|
||||
|
||||
let disabledReferenceTypes = $derived.by(() => {
|
||||
const resultType = formState?.form?.ResultType;
|
||||
|
||||
switch(resultType) {
|
||||
case 'NMRIC':
|
||||
return ['TEXT', 'VSET', 'NOREF'];
|
||||
case 'RANGE':
|
||||
return ['TEXT', 'VSET', 'NOREF'];
|
||||
case 'TEXT':
|
||||
return ['RANGE', 'THOLD', 'VSET', 'NOREF'];
|
||||
case 'VSET':
|
||||
return ['RANGE', 'THOLD', 'TEXT', 'NOREF'];
|
||||
case 'NORES':
|
||||
return ['RANGE', 'THOLD', 'TEXT', 'VSET'];
|
||||
default:
|
||||
return ['RANGE', 'THOLD', 'TEXT', 'VSET', 'NOREF'];
|
||||
}
|
||||
});
|
||||
switch (testType) {
|
||||
case 'TEST':
|
||||
case 'PARAM':
|
||||
return ['definition', 'map', 'reference'];
|
||||
case 'CALC':
|
||||
return ['definition', 'calculation', 'map', 'reference'];
|
||||
case 'GROUP':
|
||||
return ['definition', 'group'];
|
||||
default:
|
||||
return ['definition'];
|
||||
}
|
||||
});
|
||||
|
||||
let hiddenFields = $derived.by(() => {
|
||||
const resultType = formState?.form?.ResultType;
|
||||
return resultType !== "VSET" ? ["VSet"] : [];
|
||||
});
|
||||
let disabledResultTypes = $derived.by(() => {
|
||||
const testType = formState?.form?.TestType;
|
||||
|
||||
let refComponent = $derived.by(() => {
|
||||
const refType = formState.form.RefType;
|
||||
if (refType === 'RANGE' || refType === 'THOLD') return 'numeric';
|
||||
if (refType === 'TEXT' || refType === 'VSET') return 'text';
|
||||
return null;
|
||||
});
|
||||
switch (testType) {
|
||||
case 'TEST':
|
||||
case 'PARAM':
|
||||
return [];
|
||||
case 'CALC':
|
||||
return ['RANGE', 'TEXT', 'VSET', 'NORES'];
|
||||
case 'GROUP':
|
||||
return ['NMRIC', 'RANGE', 'TEXT', 'VSET', 'NORES'];
|
||||
case 'TITLE':
|
||||
return ['NMRIC', 'RANGE', 'TEXT', 'VSET', 'NORES'];
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
});
|
||||
|
||||
const refTxtFormFieldsTransformed = $derived.by(() => {
|
||||
return refTxtFormFields.map(group => ({
|
||||
...group,
|
||||
rows: group.rows.map(row => ({
|
||||
...row,
|
||||
columns: row.columns.map(col => {
|
||||
if (col.key !== "RefTxt") return col;
|
||||
let disabledReferenceTypes = $derived.by(() => {
|
||||
const resultType = formState?.form?.ResultType;
|
||||
|
||||
if (formState.form.ResultType !== "VSET" || !formState.form.VSet) {
|
||||
return {
|
||||
...col,
|
||||
type: "textarea",
|
||||
optionsEndpoint: undefined
|
||||
};
|
||||
}
|
||||
switch (resultType) {
|
||||
case 'NMRIC':
|
||||
return ['TEXT', 'VSET', 'NOREF'];
|
||||
case 'RANGE':
|
||||
return ['TEXT', 'VSET', 'NOREF'];
|
||||
case 'TEXT':
|
||||
return ['RANGE', 'THOLD', 'VSET', 'NOREF'];
|
||||
case 'VSET':
|
||||
return ['RANGE', 'THOLD', 'TEXT', 'NOREF'];
|
||||
case 'NORES':
|
||||
return ['RANGE', 'THOLD', 'TEXT', 'VSET'];
|
||||
default:
|
||||
return ['RANGE', 'THOLD', 'TEXT', 'VSET', 'NOREF'];
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
...col,
|
||||
type: "select",
|
||||
optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/${formState.form.VSet}`,
|
||||
fullWidth: false
|
||||
};
|
||||
})
|
||||
}))
|
||||
}));
|
||||
});
|
||||
let hiddenFields = $derived.by(() => {
|
||||
const resultType = formState?.form?.ResultType;
|
||||
return resultType !== 'VSET' ? ['VSet'] : [];
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
let refComponent = $derived.by(() => {
|
||||
const refType = formState.form.RefType;
|
||||
if (refType === 'RANGE' || refType === 'THOLD') return 'numeric';
|
||||
if (refType === 'TEXT' || refType === 'VSET') return 'text';
|
||||
return null;
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
const refTxtFormFieldsTransformed = $derived.by(() => {
|
||||
return refTxtFormFields.map((group) => ({
|
||||
...group,
|
||||
rows: group.rows.map((row) => ({
|
||||
...row,
|
||||
columns: row.columns.map((col) => {
|
||||
if (col.key !== 'RefTxt') 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 (formState.form.ResultType !== 'VSET' || !formState.form.VSet) {
|
||||
return {
|
||||
...col,
|
||||
type: 'textarea',
|
||||
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,
|
||||
type: 'select',
|
||||
optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/${formState.form.VSet}`,
|
||||
fullWidth: false
|
||||
};
|
||||
})
|
||||
}))
|
||||
}));
|
||||
});
|
||||
|
||||
return col;
|
||||
})
|
||||
}))
|
||||
}));
|
||||
});
|
||||
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;
|
||||
}
|
||||
|
||||
// $inspect(activeFormState.errors)
|
||||
let activeTab = $state('definition');
|
||||
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;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (!availableTabs.includes(activeTab)) {
|
||||
activeTab = availableTabs[0];
|
||||
}
|
||||
});
|
||||
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
|
||||
};
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
for (const key of hiddenFields) {
|
||||
formState.form[key] = "";
|
||||
}
|
||||
});
|
||||
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
|
||||
};
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (formState.form.Factor && !formState.form.Unit2) {
|
||||
formState.errors.Unit2 = "Required";
|
||||
} else {
|
||||
formState.errors.Unit2 = null;
|
||||
}
|
||||
});
|
||||
return col;
|
||||
})
|
||||
}))
|
||||
}));
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const allColumns = formFields.flatMap(
|
||||
(section) => section.rows.flatMap(
|
||||
(row) => row.columns ?? []
|
||||
)
|
||||
);
|
||||
|
||||
untrack(() => {
|
||||
for (const col of allColumns) {
|
||||
if (!col.optionsEndpoint) continue;
|
||||
if (!col.optionsEndpoint || col.autoFetch === false) continue;
|
||||
|
||||
formState.fetchOptions?.(
|
||||
{
|
||||
key: col.key,
|
||||
optionsEndpoint: col.optionsEndpoint,
|
||||
valueKey: col.valueKey,
|
||||
labelKey: col.labelKey,
|
||||
},
|
||||
formState.form
|
||||
);
|
||||
}
|
||||
})
|
||||
});
|
||||
// $inspect(activeFormState.errors)
|
||||
let activeTab = $state('definition');
|
||||
|
||||
function handleTestTypeChange(value) {
|
||||
formState.form.TestType = value;
|
||||
$effect(() => {
|
||||
if (!availableTabs.includes(activeTab)) {
|
||||
activeTab = availableTabs[0];
|
||||
}
|
||||
});
|
||||
|
||||
formState.form.ResultType = "";
|
||||
formState.errors.ResultType = null;
|
||||
formState.form.RefType = "";
|
||||
formState.errors.RefType = null;
|
||||
$effect(() => {
|
||||
for (const key of hiddenFields) {
|
||||
formState.form[key] = '';
|
||||
}
|
||||
});
|
||||
|
||||
calFormState.reset();
|
||||
refNumState.reset();
|
||||
refTxtState.reset();
|
||||
$effect(() => {
|
||||
if (formState.form.Factor && !formState.form.Unit2) {
|
||||
formState.errors.Unit2 = 'Required';
|
||||
} else {
|
||||
formState.errors.Unit2 = null;
|
||||
}
|
||||
});
|
||||
|
||||
resetRefNum?.();
|
||||
resetRefTxt?.();
|
||||
}
|
||||
$effect(() => {
|
||||
const allColumns = formFields.flatMap((section) =>
|
||||
section.rows.flatMap((row) => row.columns ?? [])
|
||||
);
|
||||
|
||||
function handleResultTypeChange(value) {
|
||||
formState.form.ResultType = value;
|
||||
untrack(() => {
|
||||
for (const col of allColumns) {
|
||||
if (!col.optionsEndpoint) continue;
|
||||
if (!col.optionsEndpoint || col.autoFetch === false) continue;
|
||||
|
||||
formState.form.RefType = "";
|
||||
formState.errors.RefType = null;
|
||||
formState.fetchOptions?.(
|
||||
{
|
||||
key: col.key,
|
||||
optionsEndpoint: col.optionsEndpoint,
|
||||
valueKey: col.valueKey,
|
||||
labelKey: col.labelKey
|
||||
},
|
||||
formState.form
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
calFormState.reset();
|
||||
refNumState.reset();
|
||||
refTxtState.reset();
|
||||
function handleTestTypeChange(value) {
|
||||
formState.form.TestType = value;
|
||||
|
||||
resetRefNum?.();
|
||||
resetRefTxt?.();
|
||||
formState.form.ResultType = '';
|
||||
formState.errors.ResultType = null;
|
||||
formState.form.RefType = '';
|
||||
formState.errors.RefType = null;
|
||||
|
||||
let newRefType = "";
|
||||
if (value === 'TEXT') {
|
||||
newRefType = 'TEXT';
|
||||
}
|
||||
if (value === 'VSET') {
|
||||
newRefType = 'VSET';
|
||||
}
|
||||
if (value === 'NORES') {
|
||||
newRefType = 'NOREF';
|
||||
}
|
||||
|
||||
if (newRefType) {
|
||||
formState.form.RefType = newRefType;
|
||||
handleRefTypeChange(newRefType);
|
||||
}
|
||||
}
|
||||
calFormState.reset();
|
||||
refNumState.reset();
|
||||
refTxtState.reset();
|
||||
|
||||
function handleRefTypeChange(value) {
|
||||
formState.form.RefType = value;
|
||||
resetRefNum?.();
|
||||
resetRefTxt?.();
|
||||
}
|
||||
|
||||
refNumState.reset();
|
||||
refTxtState.reset();
|
||||
function handleResultTypeChange(value) {
|
||||
formState.form.ResultType = value;
|
||||
|
||||
resetRefNum?.();
|
||||
resetRefTxt?.();
|
||||
formState.form.RefType = '';
|
||||
formState.errors.RefType = null;
|
||||
|
||||
if (value === 'RANGE' || value === 'THOLD') {
|
||||
refNumState.form.NumRefType = value;
|
||||
}
|
||||
if (value === 'TEXT' || value === 'VSET') {
|
||||
refTxtState.form.TxtRefType = value;
|
||||
}
|
||||
}
|
||||
calFormState.reset();
|
||||
refNumState.reset();
|
||||
refTxtState.reset();
|
||||
|
||||
// $inspect({
|
||||
// definition: formState.errors,
|
||||
// active: activeFormStates.map(fs => fs.errors)
|
||||
// });
|
||||
resetRefNum?.();
|
||||
resetRefTxt?.();
|
||||
|
||||
// $inspect({
|
||||
// definition: formState.errors,
|
||||
// active: Object.values(activeFormStates).map(fs => fs.errors)
|
||||
// });
|
||||
let newRefType = '';
|
||||
if (value === 'TEXT') {
|
||||
newRefType = 'TEXT';
|
||||
}
|
||||
if (value === 'VSET') {
|
||||
newRefType = 'VSET';
|
||||
}
|
||||
if (value === 'NORES') {
|
||||
newRefType = 'NOREF';
|
||||
}
|
||||
|
||||
if (newRefType) {
|
||||
formState.form.RefType = newRefType;
|
||||
handleRefTypeChange(newRefType);
|
||||
}
|
||||
}
|
||||
|
||||
function handleRefTypeChange(value) {
|
||||
formState.form.RefType = value;
|
||||
|
||||
refNumState.reset();
|
||||
refTxtState.reset();
|
||||
|
||||
resetRefNum?.();
|
||||
resetRefTxt?.();
|
||||
|
||||
if (value === 'RANGE' || value === 'THOLD') {
|
||||
refNumState.form.NumRefType = value;
|
||||
}
|
||||
if (value === 'TEXT' || value === 'VSET') {
|
||||
refTxtState.form.TxtRefType = value;
|
||||
}
|
||||
}
|
||||
|
||||
// $inspect({
|
||||
// definition: formState.errors,
|
||||
// active: activeFormStates.map(fs => fs.errors)
|
||||
// });
|
||||
|
||||
// $inspect({
|
||||
// definition: formState.errors,
|
||||
// active: Object.values(activeFormStates).map(fs => fs.errors)
|
||||
// });
|
||||
</script>
|
||||
|
||||
<FormPageContainer title="Create Test" {primaryAction} {secondaryActions} {actions}>
|
||||
<Tabs.Root bind:value={activeTab} class="w-full h-full">
|
||||
<Tabs.List>
|
||||
{#if availableTabs.includes('definition')}
|
||||
<Tabs.Trigger value="definition">Definition</Tabs.Trigger>
|
||||
{/if}
|
||||
{#if availableTabs.includes('calculation')}
|
||||
<Tabs.Trigger value="calculation">Calculation</Tabs.Trigger>
|
||||
{/if}
|
||||
{#if availableTabs.includes('group')}
|
||||
<Tabs.Trigger value="group">Group</Tabs.Trigger>
|
||||
{/if}
|
||||
{#if availableTabs.includes('reference')}
|
||||
<Tabs.Trigger value="reference">Reference</Tabs.Trigger>
|
||||
{/if}
|
||||
{#if availableTabs.includes('map')}
|
||||
<Tabs.Trigger value="map">Map</Tabs.Trigger>
|
||||
{/if}
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="definition">
|
||||
<DictionaryFormRenderer
|
||||
{formState}
|
||||
formFields={formFields}
|
||||
mode="create"
|
||||
{disabledResultTypes}
|
||||
{disabledReferenceTypes}
|
||||
{hiddenFields}
|
||||
{handleTestTypeChange}
|
||||
{handleResultTypeChange}
|
||||
{handleRefTypeChange}
|
||||
/>
|
||||
<Tabs.Root bind:value={activeTab} class="w-full h-full">
|
||||
<Tabs.List>
|
||||
{#if availableTabs.includes('definition')}
|
||||
<Tabs.Trigger value="definition">Definition</Tabs.Trigger>
|
||||
{/if}
|
||||
{#if availableTabs.includes('calculation')}
|
||||
<Tabs.Trigger value="calculation">Calculation</Tabs.Trigger>
|
||||
{/if}
|
||||
{#if availableTabs.includes('group')}
|
||||
<Tabs.Trigger value="group">Group</Tabs.Trigger>
|
||||
{/if}
|
||||
{#if availableTabs.includes('reference')}
|
||||
<Tabs.Trigger value="reference">Reference</Tabs.Trigger>
|
||||
{/if}
|
||||
{#if availableTabs.includes('map')}
|
||||
<Tabs.Trigger value="map">Map</Tabs.Trigger>
|
||||
{/if}
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="definition">
|
||||
<DictionaryFormRenderer
|
||||
{formState}
|
||||
{formFields}
|
||||
mode="create"
|
||||
{disabledResultTypes}
|
||||
{disabledReferenceTypes}
|
||||
{hiddenFields}
|
||||
{handleTestTypeChange}
|
||||
{handleResultTypeChange}
|
||||
{handleRefTypeChange}
|
||||
/>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="calculation">
|
||||
<Calculation {calFormState} {testCalFormFields} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="group">
|
||||
<Group {groupFormState} {testGroupFormFields} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="calculation">
|
||||
<Calculation {calFormState} {testCalFormFields} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="group">
|
||||
group
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="map">
|
||||
<Map {mapFormState} testMapFormFields={testMapFormFieldsTransformed} bind:resetMap={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}/>
|
||||
{:else if refComponent === 'text'}
|
||||
<RefTxt {refTxtState} refTxtFormFields={refTxtFormFieldsTransformed} bind:resetRefTxt={resetRefTxt} />
|
||||
{:else}
|
||||
<div class="h-full w-full flex items-center">
|
||||
<ReusableEmpty desc="Select a Reference Type" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
|
||||
<Tabs.Content value="map">
|
||||
<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:tempNumeric={refNumData} bind:resetRefNum />
|
||||
{:else if refComponent === 'text'}
|
||||
<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" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
</FormPageContainer>
|
||||
|
||||
<ReusableAlertDialog
|
||||
bind:open={masterDetail.showExitConfirm}
|
||||
onConfirm={masterDetail.confirmExit}
|
||||
/>
|
||||
bind:open={masterDetail.showExitConfirm}
|
||||
onConfirm={masterDetail.confirmExit}
|
||||
/>
|
||||
|
||||
@ -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,307 +1,301 @@
|
||||
<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);
|
||||
let editingId = $state(null);
|
||||
let idCounter = $state(0);
|
||||
|
||||
resetRefNum = () => {
|
||||
tempNumeric = [];
|
||||
};
|
||||
resetRefNum = () => {
|
||||
tempNumeric = [];
|
||||
};
|
||||
|
||||
let joinFields = $state({
|
||||
AgeStart: { DD: "", MM: "", YY: "" },
|
||||
AgeEnd: { DD: "", MM: "", YY: "" },
|
||||
});
|
||||
let joinFields = $state({
|
||||
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;
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
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 ?? "",
|
||||
};
|
||||
}
|
||||
let disabledSign = $derived.by(() => {
|
||||
const refType = props.refNumState.form.NumRefType;
|
||||
|
||||
function resetForm() {
|
||||
props.refNumState.reset?.();
|
||||
joinFields = {
|
||||
AgeStart: { DD: "", MM: "", YY: "" },
|
||||
AgeEnd: { DD: "", MM: "", YY: "" },
|
||||
};
|
||||
editingId = null;
|
||||
}
|
||||
if (refType === 'RANGE') return true;
|
||||
if (refType === 'THOLD') return false;
|
||||
|
||||
function handleInsert() {
|
||||
// console.log(props.refNumState.form);
|
||||
// const low = Number(props.refNumState.form.Low);
|
||||
// const high = Number(props.refNumState.form.High);
|
||||
const newStart = toDays(props.refNumState.form.AgeStart);
|
||||
const newEnd = toDays(props.refNumState.form.AgeEnd);
|
||||
// const row = { id: ++idCounter, ...snapshotForm() };
|
||||
// tempNumeric = [...tempNumeric, row];
|
||||
// resetForm();
|
||||
return false;
|
||||
});
|
||||
|
||||
const isOverlap = tempNumeric.some(row => {
|
||||
const existingStart = toDays(row.AgeStart);
|
||||
const existingEnd = toDays(row.AgeEnd);
|
||||
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 ?? ''
|
||||
};
|
||||
}
|
||||
|
||||
if (existingStart == null || existingEnd == null) return false;
|
||||
function resetForm() {
|
||||
props.refNumState.reset?.();
|
||||
joinFields = {
|
||||
AgeStart: { DD: '', MM: '', YY: '' },
|
||||
AgeEnd: { DD: '', MM: '', YY: '' }
|
||||
};
|
||||
editingId = null;
|
||||
}
|
||||
|
||||
return !(newEnd < existingStart || newStart > existingEnd);
|
||||
});
|
||||
function handleInsert() {
|
||||
// console.log(props.refNumState.form);
|
||||
// const low = Number(props.refNumState.form.Low);
|
||||
// const high = Number(props.refNumState.form.High);
|
||||
const newStart = toDays(props.refNumState.form.AgeStart);
|
||||
const newEnd = toDays(props.refNumState.form.AgeEnd);
|
||||
// const row = { id: ++idCounter, ...snapshotForm() };
|
||||
// tempNumeric = [...tempNumeric, row];
|
||||
// resetForm();
|
||||
|
||||
if (isOverlap) {
|
||||
props.refNumState.errors.AgeEnd =
|
||||
"Age range overlaps with existing data";
|
||||
return;
|
||||
}
|
||||
const isOverlap = tempNumeric.some((row) => {
|
||||
const existingStart = toDays(row.AgeStart);
|
||||
const existingEnd = toDays(row.AgeEnd);
|
||||
|
||||
const row = {
|
||||
id: ++idCounter,
|
||||
...snapshotForm()
|
||||
};
|
||||
if (existingStart == null || existingEnd == null) return false;
|
||||
|
||||
tempNumeric = [...tempNumeric, row];
|
||||
return !(newEnd < existingStart || newStart > existingEnd);
|
||||
});
|
||||
|
||||
resetForm();
|
||||
}
|
||||
if (isOverlap) {
|
||||
props.refNumState.errors.AgeEnd = 'Age range overlaps with existing data';
|
||||
return;
|
||||
}
|
||||
|
||||
function handleEdit(row) {
|
||||
editingId = row.id;
|
||||
const row = {
|
||||
id: ++idCounter,
|
||||
...snapshotForm()
|
||||
};
|
||||
|
||||
const f = props.refNumState.form;
|
||||
f.SpcType = row.SpcType;
|
||||
f.Sex = row.Sex;
|
||||
f.AgeStart = row.AgeStart;
|
||||
f.AgeEnd = row.AgeEnd;
|
||||
f.NumRefType = row.NumRefType;
|
||||
f.RangeType = row.RangeType;
|
||||
f.LowSign = row.LowSign;
|
||||
f.Low = row.Low;
|
||||
f.HighSign = row.HighSign;
|
||||
f.High = row.High;
|
||||
f.Display = row.Display;
|
||||
f.Flag = row.Flag;
|
||||
f.Interpretation = row.Interpretation;
|
||||
f.Notes = row.Notes;
|
||||
tempNumeric = [...tempNumeric, row];
|
||||
|
||||
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: "" };
|
||||
}
|
||||
}
|
||||
resetForm();
|
||||
}
|
||||
|
||||
function handleUpdate() {
|
||||
tempNumeric = tempNumeric.map((row) =>
|
||||
row.id === editingId ? { id: row.id, ...snapshotForm() } : row
|
||||
);
|
||||
resetForm();
|
||||
}
|
||||
function handleEdit(row) {
|
||||
editingId = row.id;
|
||||
|
||||
function handleCancelEdit() {
|
||||
resetForm();
|
||||
}
|
||||
const f = props.refNumState.form;
|
||||
f.SpcType = row.SpcType;
|
||||
f.Sex = row.Sex;
|
||||
f.AgeStart = row.AgeStart;
|
||||
f.AgeEnd = row.AgeEnd;
|
||||
f.NumRefType = row.NumRefType;
|
||||
f.RangeType = row.RangeType;
|
||||
f.LowSign = row.LowSign;
|
||||
f.Low = row.Low;
|
||||
f.HighSign = row.HighSign;
|
||||
f.High = row.High;
|
||||
f.Display = row.Display;
|
||||
f.Flag = row.Flag;
|
||||
f.Interpretation = row.Interpretation;
|
||||
f.Notes = row.Notes;
|
||||
|
||||
function handleRemove(id) {
|
||||
tempNumeric = tempNumeric.filter((row) => row.id !== id);
|
||||
if (editingId === id) resetForm();
|
||||
}
|
||||
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: '' };
|
||||
}
|
||||
}
|
||||
|
||||
function getLabel(fieldKey, value) {
|
||||
const opts = props.refNumState.selectOptions[fieldKey] ?? [];
|
||||
const found = opts.find((o) => o.value == value);
|
||||
return found ? found.label : value;
|
||||
}
|
||||
function handleUpdate() {
|
||||
tempNumeric = tempNumeric.map((row) =>
|
||||
row.id === editingId ? { id: row.id, ...snapshotForm() } : row
|
||||
);
|
||||
resetForm();
|
||||
}
|
||||
|
||||
function getCode(fieldKey, value) {
|
||||
const opts = props.refNumState.selectOptions[fieldKey] ?? [];
|
||||
const found = opts.find((o) => o.value == value);
|
||||
return found ? found.code : value;
|
||||
}
|
||||
function handleCancelEdit() {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
const rangeTypeBadge = (type) => ({ REF: "REF", CRTC: "CRTC" }[type] ?? null);
|
||||
const numRefTypeBadge = (type) => ({ RANGE: "R", THOLD: "T" }[type] ?? null);;
|
||||
function handleRemove(id) {
|
||||
tempNumeric = tempNumeric.filter((row) => row.id !== id);
|
||||
if (editingId === id) resetForm();
|
||||
}
|
||||
|
||||
const rangeDisplay = (row) => {
|
||||
if (row.NumRefType === "RANGE") return `${row.LowValue} - ${row.HighValue}`;
|
||||
if (row.NumRefType === "THOLD") return row.TholdValue;
|
||||
return "-";
|
||||
};
|
||||
function getLabel(fieldKey, value) {
|
||||
const opts = props.refNumState.selectOptions[fieldKey] ?? [];
|
||||
const found = opts.find((o) => o.value == value);
|
||||
return found ? found.label : value;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
for (const key of ["AgeStart", "AgeEnd"]) {
|
||||
props.refNumState.form[key] =
|
||||
buildAgeText(joinFields[key]);
|
||||
}
|
||||
});
|
||||
function getCode(fieldKey, value) {
|
||||
const opts = props.refNumState.selectOptions[fieldKey] ?? [];
|
||||
const found = opts.find((o) => o.value == value);
|
||||
return found ? found.code : value;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const allColumns = props.refNumFormFields.flatMap(
|
||||
(section) => section.rows.flatMap(
|
||||
(row) => row.columns ?? []
|
||||
)
|
||||
);
|
||||
|
||||
untrack(() => {
|
||||
for (const col of allColumns) {
|
||||
if (!col.optionsEndpoint) continue;
|
||||
|
||||
props.refNumState.fetchOptions?.(
|
||||
{
|
||||
key: col.key,
|
||||
optionsEndpoint: col.optionsEndpoint,
|
||||
valueKey: col.valueKey,
|
||||
labelKey: col.labelKey,
|
||||
},
|
||||
props.refNumState.form
|
||||
);
|
||||
}
|
||||
})
|
||||
});
|
||||
const rangeTypeBadge = (type) => ({ REF: 'REF', CRTC: 'CRTC' })[type] ?? null;
|
||||
const numRefTypeBadge = (type) => ({ RANGE: 'R', THOLD: 'T' })[type] ?? null;
|
||||
|
||||
$effect(() => {
|
||||
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 = "";
|
||||
}
|
||||
});
|
||||
const rangeDisplay = (row) => {
|
||||
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]);
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const allColumns = props.refNumFormFields.flatMap((section) =>
|
||||
section.rows.flatMap((row) => row.columns ?? [])
|
||||
);
|
||||
|
||||
untrack(() => {
|
||||
for (const col of allColumns) {
|
||||
if (!col.optionsEndpoint) continue;
|
||||
|
||||
props.refNumState.fetchOptions?.(
|
||||
{
|
||||
key: col.key,
|
||||
optionsEndpoint: col.optionsEndpoint,
|
||||
valueKey: col.valueKey,
|
||||
labelKey: col.labelKey
|
||||
},
|
||||
props.refNumState.form
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
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 = '';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-4 w-full">
|
||||
<div>
|
||||
<DictionaryFormRenderer
|
||||
formState={props.refNumState}
|
||||
formFields={props.refNumFormFields}
|
||||
{disabledSign}
|
||||
bind:joinFields
|
||||
/>
|
||||
<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>
|
||||
<div>
|
||||
<DictionaryFormRenderer
|
||||
formState={props.refNumState}
|
||||
formFields={props.refNumFormFields}
|
||||
{disabledSign}
|
||||
bind:joinFields
|
||||
/>
|
||||
<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 />
|
||||
<Separator />
|
||||
|
||||
<div>
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row class="hover:bg-transparent">
|
||||
<Table.Head>Specimen Type</Table.Head>
|
||||
<Table.Head>Sex</Table.Head>
|
||||
<Table.Head>Age Range</Table.Head>
|
||||
<Table.Head>Type</Table.Head>
|
||||
<Table.Head>Range/Threshold</Table.Head>
|
||||
<Table.Head>Flag</Table.Head>
|
||||
<Table.Head>Interpretation</Table.Head>
|
||||
<Table.Head>Notes</Table.Head>
|
||||
<Table.Head class="w-[80px]"></Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#if tempNumeric.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 tempNumeric as row (row.id)}
|
||||
<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.AgeStart} – {row.AgeEnd}</Table.Cell>
|
||||
<Table.Cell>
|
||||
{#if rangeTypeBadge(row.RangeType)}
|
||||
<Badge>{rangeTypeBadge(row.RangeType)}</Badge>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
</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"}
|
||||
</div>
|
||||
<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>
|
||||
<Table.Cell class="font-medium">{row.Notes}</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>
|
||||
<div>
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row class="hover:bg-transparent">
|
||||
<Table.Head>Specimen Type</Table.Head>
|
||||
<Table.Head>Sex</Table.Head>
|
||||
<Table.Head>Age Range</Table.Head>
|
||||
<Table.Head>Type</Table.Head>
|
||||
<Table.Head>Range/Threshold</Table.Head>
|
||||
<Table.Head>Flag</Table.Head>
|
||||
<Table.Head>Interpretation</Table.Head>
|
||||
<Table.Head>Notes</Table.Head>
|
||||
<Table.Head class="w-[80px]"></Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#if tempNumeric.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 tempNumeric as row (row.id)}
|
||||
<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.AgeStart} – {row.AgeEnd}</Table.Cell>
|
||||
<Table.Cell>
|
||||
{#if rangeTypeBadge(row.RangeType)}
|
||||
<Badge>{rangeTypeBadge(row.RangeType)}</Badge>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
</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'}
|
||||
</div>
|
||||
<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>
|
||||
<Table.Cell class="font-medium">{row.Notes}</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>
|
||||
|
||||
@ -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