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

move function in calculation in child component

Browse Source
This commit is contained in:
faiztyanirh 2026-03-09 10:33:19 +07:00
parent ec5ebba12e
commit 4f5ba718e8
5 changed files with 133 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -794,39 +794,6 @@ export const refNumFormFields = [
} }
] ]
} }
// {
// title: "Flag & Interpretation",
// rows: [
// {
// type: "row",
// columns: [
// {
// key: "Flag",
// label: "Flag",
// required: false,
// type: "text",
// },
// {
// key: "Interpretation",
// label: "Interpretation",
// required: false,
// type: "text",
// },
// ]
// },
// {
// type: "row",
// columns: [
// {
// key: "Notes",
// label: "Notes",
// required: false,
// type: "textarea",
// },
// ]
// },
// ]
// },
]; ];
export const refTxtFormFields = [ export const refTxtFormFields = [
@ -1055,24 +1022,6 @@ export function getTestFormActions(handlers) {
]; ];
} }
// export function buildTestPayload({ mainForm, calForm, refForm, testType }) {
// let payload = {
// ...mainForm
// };
// if (testType === 'CALC') {
// payload.calculation = {
// ...calForm
// }
// } else if (testType === 'TEST' || testType === 'PARAM') {
// payload.reference = {
// ...refForm
// };
// }
// return cleanEmptyStrings(payload);
// }
export function buildTestPayload({ mainForm, activeFormStates, testType, refNumData, refTxtData }) { export function buildTestPayload({ mainForm, activeFormStates, testType, refNumData, refTxtData }) {
let payload = { let payload = {
...mainForm ...mainForm

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

@ -81,22 +81,6 @@
modeOpt: 'cascade' 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(() => { const activeFormStates = $derived.by(() => {
const testType = formState.form.TestType ?? ''; const testType = formState.form.TestType ?? '';
const refType = formState.form.RefType ?? ''; const refType = formState.form.RefType ?? '';

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

@ -9,11 +9,113 @@
import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte'; import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
let props = $props(); let props = $props();
const operators = ['+', '-', '*', '/', '^', '(', ')'];
let expression = $state('');
let cursorPosition = $state(0);
function unselectAll(key) {
props.calFormState.form[key] = [];
props.calFormState.validateField?.(key, [], false);
}
function getErrorStatus(formulaCode = '') {
const selected = props.calFormState.form.FormulaInput;
if (!Array.isArray(selected)) return [];
return selected.map((item) => ({
value: item.value,
done: new RegExp(`\\b${item.value}\\b`, 'i').test(formulaCode)
}));
}
function addToExpression(text) {
const before = expression.slice(0, cursorPosition);
const after = expression.slice(cursorPosition);
expression = before + text + after;
cursorPosition += text.length;
}
function addOperator(op) {
addToExpression(op);
props.calFormState.form.FormulaCode = expression;
props.calFormState.validateField?.('FormulaCode', expression, false);
}
function addValue(val) {
addToExpression(val);
props.calFormState.form.FormulaCode = expression;
props.calFormState.validateField?.('FormulaCode', expression, false);
}
// function handleInput(e) {
// expression = e.target.value;
// cursorPosition = e.target.selectionStart;
// formState.form.FormulaCode = expression;
// formState.validateField?.('FormulaCode', expression, false);
// }
// function handleClick(e) {
// cursorPosition = e.target.selectionStart;
// }
function handleContainerClick(e) {
const rect = e.currentTarget.getBoundingClientRect();
const text = expression;
const charWidth = 8.5;
const padding = 12;
const clickX = e.clientX - rect.left - padding;
let newPos = Math.floor(clickX / charWidth);
newPos = Math.max(0, Math.min(newPos, text.length));
cursorPosition = newPos;
}
function moveCursorLeft() {
if (cursorPosition > 0) {
cursorPosition -= 1;
}
}
function moveCursorRight() {
if (cursorPosition < expression.length) {
cursorPosition += 1;
}
}
function deleteChar() {
if (cursorPosition > 0) {
const before = expression.slice(0, cursorPosition - 1);
const after = expression.slice(cursorPosition);
expression = before + after;
cursorPosition -= 1;
props.calFormState.form.FormulaCode = expression;
props.calFormState.validateField?.('FormulaCode', expression, false);
}
}
function clearExpression() {
expression = '';
cursorPosition = 0;
props.calFormState.form.FormulaCode = expression;
props.calFormState.validateField?.('FormulaCode', expression, false);
}
</script> </script>
<div class="flex flex-col gap-4 w-full"> <div class="flex flex-col gap-4 w-full">
<DictionaryFormRenderer formState={props.calFormState} formFields={props.testCalFormFields}/> <DictionaryFormRenderer
formState={props.calFormState}
formFields={props.testCalFormFields}
operators={operators}
expression={expression}
cursorPosition={cursorPosition}
onUnselectAll={unselectAll}
onGetErrorStatus={getErrorStatus}
onAddOperator={addOperator}
onAddValue={addValue}
onHandleContainerClick={handleContainerClick}
onMoveCursorLeft={moveCursorLeft}
onMoveCursorRight={moveCursorRight}
onDeleteChar={deleteChar}
onClearExpression={clearExpression}
/>
</div> </div>

8
src/lib/components/dictionary/test/page/tabs/group.svelte
View File

@ -3,10 +3,6 @@
let props = $props(); let props = $props();
// function addMember() {
// members = [...members, { id: Date.now(), value: '' }];
// }
function addMember() { function addMember() {
props.groupFormState.form.Members = [ props.groupFormState.form.Members = [
...(props.groupFormState.form.Members ?? []), ...(props.groupFormState.form.Members ?? []),
@ -14,10 +10,6 @@
]; ];
} }
// function removeMember(id) {
// members = members.filter((m) => m.id !== id);
// }
// $inspect(props.groupFormState.form.Members)
function removeMember(id) { function removeMember(id) {
props.groupFormState.form.Members = props.groupFormState.form.Members.filter((m) => m.id !== id); props.groupFormState.form.Members = props.groupFormState.form.Members.filter((m) => m.id !== id);
props.groupFormState.validateField?.("Members", props.groupFormState.form.Members, false); props.groupFormState.validateField?.("Members", props.groupFormState.form.Members, false);

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

@ -31,32 +31,25 @@
handleResultTypeChange, handleResultTypeChange,
handleRefTypeChange, handleRefTypeChange,
onAddMember, onAddMember,
onRemoveMember onRemoveMember,
operators,
expression,
cursorPosition,
onUnselectAll,
onGetErrorStatus,
onAddOperator,
onAddValue,
onHandleContainerClick,
onMoveCursorLeft,
onMoveCursorRight,
onDeleteChar,
onClearExpression,
} = $props(); } = $props();
// $effect(() => {
// if (!formFields) return;
// const hasMembersField = formFields.some((group) =>
// group.rows?.some((row) => row.columns?.some((col) => col.type === 'members'))
// );
// if (hasMembersField) {
// if (members.length > 0) {
// formState.form.Member = members.map((m) => m.value).filter((v) => v);
// } else {
// formState.form.Member = '';
// }
// }
// });
const operators = ['+', '-', '*', '/', '^', '(', ')'];
let searchQuery = $state({}); let searchQuery = $state({});
let dropdownOpen = $state({}); let dropdownOpen = $state({});
let expression = $state('');
let cursorPosition = $state(0);
// $inspect(expression)
function getFilteredOptions(key) { function getFilteredOptions(key) {
const query = searchQuery[key] || ''; const query = searchQuery[key] || '';
if (!query) return formState.selectOptions?.[key] ?? []; if (!query) return formState.selectOptions?.[key] ?? [];
@ -66,10 +59,6 @@
); );
} }
$effect(() => {
initializeDefaultValues();
});
async function initializeDefaultValues() { async function initializeDefaultValues() {
for (const group of formFields) { for (const group of formFields) {
for (const row of group.rows) { for (const row of group.rows) {
@ -96,90 +85,9 @@
} }
} }
function unselectAll(key) { $effect(() => {
formState.form[key] = []; initializeDefaultValues();
formState.validateField?.(key, [], false); });
}
function getErrorStatus(formulaCode = '') {
const selected = formState.form.FormulaInput;
if (!Array.isArray(selected)) return [];
return selected.map((item) => ({
value: item.value,
done: new RegExp(`\\b${item.value}\\b`, 'i').test(formulaCode)
}));
}
function addToExpression(text) {
const before = expression.slice(0, cursorPosition);
const after = expression.slice(cursorPosition);
expression = before + text + after;
cursorPosition += text.length;
}
function addOperator(op) {
addToExpression(op);
formState.form.FormulaCode = expression;
formState.validateField?.('FormulaCode', expression, false);
}
function addValue(val) {
addToExpression(val);
formState.form.FormulaCode = expression;
formState.validateField?.('FormulaCode', expression, false);
}
function handleInput(e) {
expression = e.target.value;
cursorPosition = e.target.selectionStart;
formState.form.FormulaCode = expression;
formState.validateField?.('FormulaCode', expression, false);
}
function handleClick(e) {
cursorPosition = e.target.selectionStart;
}
function handleContainerClick(e) {
const rect = e.currentTarget.getBoundingClientRect();
const text = expression;
const charWidth = 8.5;
const padding = 12;
const clickX = e.clientX - rect.left - padding;
let newPos = Math.floor(clickX / charWidth);
newPos = Math.max(0, Math.min(newPos, text.length));
cursorPosition = newPos;
}
function moveCursorLeft() {
if (cursorPosition > 0) {
cursorPosition -= 1;
}
}
function moveCursorRight() {
if (cursorPosition < expression.length) {
cursorPosition += 1;
}
}
function deleteChar() {
if (cursorPosition > 0) {
const before = expression.slice(0, cursorPosition - 1);
const after = expression.slice(cursorPosition);
expression = before + after;
cursorPosition -= 1;
formState.form.FormulaCode = expression;
formState.validateField?.('FormulaCode', expression, false);
}
}
function clearExpression() {
expression = '';
cursorPosition = 0;
formState.form.FormulaCode = expression;
formState.validateField?.('FormulaCode', expression, false);
}
</script> </script>
{#snippet Fieldset({ {#snippet Fieldset({
@ -210,7 +118,6 @@
type="text" type="text"
bind:value={formState.form[key]} bind:value={formState.form[key]}
oninput={() => { oninput={() => {
// console.log(`key: ${key}, form: ${formState.form[key]}`);
if (validateOn?.includes('input')) { if (validateOn?.includes('input')) {
formState.validateField(key, formState.form[key], false); formState.validateField(key, formState.form[key], false);
} }
@ -415,7 +322,7 @@
<Select.Separator /> <Select.Separator />
<button <button
class="w-full px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground" class="w-full px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground"
onclick={() => unselectAll(key)} onclick={() => onUnselectAll?.(key)}
> >
Unselect All Unselect All
</button> </button>
@ -517,7 +424,6 @@
bind:value={joinFields[key].YY} bind:value={joinFields[key].YY}
oninput={() => { oninput={() => {
if (validateOn?.includes('input')) { if (validateOn?.includes('input')) {
// formState.validateField(key, formState.form[key], false);
formState.validateField('AgeStart'); formState.validateField('AgeStart');
formState.validateField('AgeEnd'); formState.validateField('AgeEnd');
} }
@ -533,7 +439,6 @@
bind:value={joinFields[key].MM} bind:value={joinFields[key].MM}
oninput={() => { oninput={() => {
if (validateOn?.includes('input')) { if (validateOn?.includes('input')) {
// formState.validateField(key, formState.form[key], false);
formState.validateField('AgeStart'); formState.validateField('AgeStart');
formState.validateField('AgeEnd'); formState.validateField('AgeEnd');
} }
@ -549,7 +454,6 @@
bind:value={joinFields[key].DD} bind:value={joinFields[key].DD}
oninput={() => { oninput={() => {
if (validateOn?.includes('input')) { if (validateOn?.includes('input')) {
// formState.validateField(key, formState.form[key], false);
formState.validateField('AgeStart'); formState.validateField('AgeStart');
formState.validateField('AgeEnd'); formState.validateField('AgeEnd');
} }
@ -563,7 +467,7 @@
{:else if type === 'formulabuilder'} {:else if type === 'formulabuilder'}
<div class="flex flex-col gap-8 w-full"> <div class="flex flex-col gap-8 w-full">
<div class="flex gap-1 w-full"> <div class="flex gap-1 w-full">
<Button type="button" variant="outline" size="icon" onclick={moveCursorLeft}> <Button type="button" variant="outline" size="icon" onclick={onMoveCursorLeft}>
<MoveLeftIcon class="w-4 h-4" /> <MoveLeftIcon class="w-4 h-4" />
</Button> </Button>
<div class="relative flex-1"> <div class="relative flex-1">
@ -571,7 +475,7 @@
class="flex flex-1 h-9 w-full min-w-0 items-center rounded-md border bg-background px-3 py-2 font-mono text-sm whitespace-nowrap" class="flex flex-1 h-9 w-full min-w-0 items-center rounded-md border bg-background px-3 py-2 font-mono text-sm whitespace-nowrap"
role="textbox" role="textbox"
tabindex="0" tabindex="0"
onclick={handleContainerClick} onclick={onHandleContainerClick}
> >
{#each expression.split('') as char, i} {#each expression.split('') as char, i}
{#if i === cursorPosition} {#if i === cursorPosition}
@ -584,14 +488,14 @@
{/if} {/if}
</button> </button>
</div> </div>
<Button type="button" variant="outline" size="icon" onclick={moveCursorRight}> <Button type="button" variant="outline" size="icon" onclick={onMoveCursorRight}>
<MoveRightIcon class="w-4 h-4" /> <MoveRightIcon class="w-4 h-4" />
</Button> </Button>
<Button type="button" variant="outline" size="icon" onclick={deleteChar}> <Button type="button" variant="outline" size="icon" onclick={onDeleteChar}>
<DeleteIcon class="w-4 h-4" /> <DeleteIcon class="w-4 h-4" />
</Button> </Button>
<Button type="button" variant="outline" size="icon" onclick={clearExpression}> <Button type="button" variant="outline" size="icon" onclick={onClearExpression}>
<BrushCleaningIcon class="w-4 h-4" /> <BrushCleaningIcon class="w-4 h-4" />
</Button> </Button>
</div> </div>
@ -605,7 +509,7 @@
type="button" type="button"
variant="outline" variant="outline"
class="h-auto w-auto p-2" class="h-auto w-auto p-2"
onclick={() => addValue(item.value)} onclick={() => onAddValue?.(item.value)}
> >
{item.value} {item.value}
</Button> </Button>
@ -619,7 +523,7 @@
type="button" type="button"
variant="outline" variant="outline"
size="icon" size="icon"
onclick={() => addOperator(op)} onclick={() => onAddOperator?.(op)}
> >
{op} {op}
</Button> </Button>
@ -655,7 +559,6 @@
} }
}} }}
onValueChange={() => { onValueChange={() => {
console.log(key);
if (validateOn?.includes('input')) { if (validateOn?.includes('input')) {
formState.validateField?.(key, formState.form[key], false); formState.validateField?.(key, formState.form[key], false);
} }
@ -719,7 +622,7 @@
</div> </div>
{/if} {/if}
{#if key === 'FormulaCode' && formState.form.FormulaInput?.length} {#if key === 'FormulaCode' && formState.form.FormulaInput?.length}
{@const inputStatus = getErrorStatus(expression)} {@const inputStatus = onGetErrorStatus?.(expression)}
<div class="flex items-center gap-2 text-sm text-destructive"> <div class="flex items-center gap-2 text-sm text-destructive">
<span>Must included :</span> <span>Must included :</span>