mirror of
https://github.com/faiztyanirh/clqms-shadcn-v1.git
synced 2026-04-29 10:07:59 +07:00
add feature dynamic error multitab & continue dict test calc
This commit is contained in:
parent
d3099248b2
commit
c5d2aa6711
@ -1,10 +1,24 @@
|
||||
export function useDictionaryForm(formState) {
|
||||
let uploadErrors = $state({});
|
||||
let isChecking = $state({});
|
||||
// export function useDictionaryForm(formState) {
|
||||
// let uploadErrors = $state({});
|
||||
// let isChecking = $state({});
|
||||
|
||||
let hasErrors = $derived(
|
||||
Object.values(formState.errors).some(value => value !== null)
|
||||
// let hasErrors = $derived(
|
||||
// Object.values(formState.errors).some(value => value !== null)
|
||||
// );
|
||||
|
||||
// return {
|
||||
// get hasErrors() { return hasErrors },
|
||||
// }
|
||||
// }
|
||||
|
||||
export function useDictionaryForm(formState, getActiveFormStates) {
|
||||
let hasErrors = $derived.by(() => {
|
||||
const mainHasError = Object.values(formState.errors).some(v => v !== null);
|
||||
const activeHasError = getActiveFormStates().some(fs =>
|
||||
Object.values(fs.errors).some(v => v !== null)
|
||||
);
|
||||
return mainHasError || activeHasError;
|
||||
});
|
||||
|
||||
return {
|
||||
get hasErrors() { return hasErrors },
|
||||
|
||||
@ -44,6 +44,7 @@ export const testCalSchema = z.object({
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: `Formula must contain all selected input parameters:${data.FormulaInput.join(',')}`,
|
||||
// message: `Formula must contain all selected input parameters:`,
|
||||
path: ['FormulaCode']
|
||||
});
|
||||
}
|
||||
|
||||
@ -55,7 +55,24 @@
|
||||
modeOpt: 'cascade'
|
||||
})
|
||||
|
||||
const helpers = useDictionaryForm(formState);
|
||||
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 helpers = useDictionaryForm(formState);
|
||||
const helpers = useDictionaryForm(formState, () => activeFormStates);
|
||||
|
||||
const handlers = {
|
||||
clearForm: () => {
|
||||
@ -269,18 +286,6 @@
|
||||
}));
|
||||
});
|
||||
|
||||
const activeFormState = $derived.by(() => {
|
||||
switch (formState.form.TestType) {
|
||||
case "TEST":
|
||||
return formState;
|
||||
case "PARAM":
|
||||
return formState;
|
||||
case "CALC":
|
||||
return calFormState;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
// $inspect(activeFormState.errors)
|
||||
let activeTab = $state('definition');
|
||||
|
||||
@ -391,6 +396,11 @@
|
||||
refTxtState.form.TxtRefType = value;
|
||||
}
|
||||
}
|
||||
|
||||
// $inspect({
|
||||
// definition: formState.errors,
|
||||
// active: activeFormStates.map(fs => fs.errors)
|
||||
// });
|
||||
</script>
|
||||
|
||||
<FormPageContainer title="Create Test" {primaryAction} {secondaryActions} {actions}>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<script>
|
||||
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
|
||||
import * as Select from "$lib/components/ui/select/index.js";
|
||||
import { Toggle } from "$lib/components/ui/toggle/index.js";
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
import { Input } from "$lib/components/ui/input/index.js";
|
||||
import { Label } from "$lib/components/ui/label/index.js";
|
||||
import { Spinner } from "$lib/components/ui/spinner/index.js";
|
||||
import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
|
||||
import { Badge } from "$lib/components/ui/badge/index.js";
|
||||
import * as InputGroup from "$lib/components/ui/input-group/index.js";
|
||||
import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
|
||||
import { Textarea } from "$lib/components/ui/textarea/index.js";
|
||||
import MoveLeftIcon from "@lucide/svelte/icons/move-left";
|
||||
import MoveRightIcon from "@lucide/svelte/icons/move-right";
|
||||
import BrushCleaningIcon from "@lucide/svelte/icons/brush-cleaning";
|
||||
import DeleteIcon from "@lucide/svelte/icons/delete";
|
||||
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
|
||||
import * as Select from '$lib/components/ui/select/index.js';
|
||||
import { Toggle } from '$lib/components/ui/toggle/index.js';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import { Input } from '$lib/components/ui/input/index.js';
|
||||
import { Label } from '$lib/components/ui/label/index.js';
|
||||
import { Spinner } from '$lib/components/ui/spinner/index.js';
|
||||
import ReusableCalendar from '$lib/components/reusable/reusable-calendar.svelte';
|
||||
import { Badge } from '$lib/components/ui/badge/index.js';
|
||||
import * as InputGroup from '$lib/components/ui/input-group/index.js';
|
||||
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
|
||||
import { Textarea } from '$lib/components/ui/textarea/index.js';
|
||||
import MoveLeftIcon from '@lucide/svelte/icons/move-left';
|
||||
import MoveRightIcon from '@lucide/svelte/icons/move-right';
|
||||
import BrushCleaningIcon from '@lucide/svelte/icons/brush-cleaning';
|
||||
import DeleteIcon from '@lucide/svelte/icons/delete';
|
||||
|
||||
let {
|
||||
formState,
|
||||
@ -27,7 +27,7 @@
|
||||
hiddenFields,
|
||||
handleTestTypeChange,
|
||||
handleResultTypeChange,
|
||||
handleRefTypeChange,
|
||||
handleRefTypeChange
|
||||
} = $props();
|
||||
|
||||
const operators = ['+', '-', '*', '/', '^', '(', ')'];
|
||||
@ -36,12 +36,12 @@
|
||||
let dropdownOpen = $state({});
|
||||
let expression = $state('');
|
||||
let cursorPosition = $state(0);
|
||||
|
||||
// $inspect(expression)
|
||||
function getFilteredOptions(key) {
|
||||
const query = searchQuery[key] || "";
|
||||
const query = searchQuery[key] || '';
|
||||
if (!query) return formState.selectOptions?.[key] ?? [];
|
||||
|
||||
return (formState.selectOptions?.[key] ?? []).filter(opt =>
|
||||
return (formState.selectOptions?.[key] ?? []).filter((opt) =>
|
||||
opt.label.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
}
|
||||
@ -54,7 +54,7 @@
|
||||
for (const group of formFields) {
|
||||
for (const row of group.rows) {
|
||||
for (const col of row.columns) {
|
||||
if (col.type === "group") {
|
||||
if (col.type === 'group') {
|
||||
for (const child of col.columns) {
|
||||
await handleDefaultValue(child);
|
||||
}
|
||||
@ -81,30 +81,17 @@
|
||||
formState.validateField?.(key, [], false);
|
||||
}
|
||||
|
||||
// function getErrorStatus(key) {
|
||||
// const error = formState.errors[key];
|
||||
// if (!error) return [];
|
||||
|
||||
// const parts = error.split(':');
|
||||
// if (parts.length < 2) return [];
|
||||
|
||||
// const values = parts[1].split(',').map(v => v.trim());
|
||||
// return values.map(v => ({ value: v, done: false }));
|
||||
// }
|
||||
$inspect(formState.form.FormulaInput)
|
||||
|
||||
function getErrorStatus(formulaCode = '') {
|
||||
const selected = formState.form.FormulaInput;
|
||||
if (!Array.isArray(selected)) return [];
|
||||
|
||||
return selected.map(v => ({
|
||||
return selected.map((v) => ({
|
||||
value: v,
|
||||
done: formulaCode.includes(v)
|
||||
done: new RegExp(`\\b${v}\\b`, 'i').test(formulaCode)
|
||||
}));
|
||||
}
|
||||
|
||||
function addToExpression(text) {
|
||||
console.log(text);
|
||||
const before = expression.slice(0, cursorPosition);
|
||||
const after = expression.slice(cursorPosition);
|
||||
expression = before + text + after;
|
||||
@ -113,15 +100,21 @@
|
||||
|
||||
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) {
|
||||
@ -156,16 +149,33 @@
|
||||
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>
|
||||
|
||||
{#snippet Fieldset({ key, label, required, type, optionsEndpoint, options, validateOn, dependsOn, endpointParamKey, valueKey, labelKey, txtKey })}
|
||||
{#snippet Fieldset({
|
||||
key,
|
||||
label,
|
||||
required,
|
||||
type,
|
||||
optionsEndpoint,
|
||||
options,
|
||||
validateOn,
|
||||
dependsOn,
|
||||
endpointParamKey,
|
||||
valueKey,
|
||||
labelKey,
|
||||
txtKey
|
||||
})}
|
||||
<div class="flex w-full flex-col gap-1.5">
|
||||
<div class="flex justify-between items-center w-full">
|
||||
<Label>{label}</Label>
|
||||
@ -175,83 +185,87 @@
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col items-center w-full">
|
||||
{#if type === "text"}
|
||||
{#if type === 'text'}
|
||||
<Input
|
||||
type="text"
|
||||
bind:value={formState.form[key]}
|
||||
oninput={() => {
|
||||
// console.log(`key: ${key}, form: ${formState.form[key]}`);
|
||||
if (validateOn?.includes("input")) {
|
||||
if (validateOn?.includes('input')) {
|
||||
formState.validateField(key, formState.form[key], false);
|
||||
}
|
||||
}}
|
||||
onblur={() => {
|
||||
if (validateOn?.includes("blur")) {
|
||||
if (validateOn?.includes('blur')) {
|
||||
validateFieldAsync(key, mode, originalData?.[key]);
|
||||
}
|
||||
}}
|
||||
readonly={key === "NumRefType" || key === "TxtRefType" || key === "Level"}
|
||||
readonly={key === 'NumRefType' || key === 'TxtRefType' || key === 'Level'}
|
||||
/>
|
||||
{:else if type === "email"}
|
||||
{:else if type === 'email'}
|
||||
<Input
|
||||
type="email"
|
||||
bind:value={formState.form[key]}
|
||||
oninput={() => {
|
||||
if (validateOn?.includes("input")) {
|
||||
if (validateOn?.includes('input')) {
|
||||
formState.validateField(key, formState.form[key], false);
|
||||
}
|
||||
}}
|
||||
onblur={() => {
|
||||
if (validateOn?.includes("blur")) {
|
||||
if (validateOn?.includes('blur')) {
|
||||
formState.validateField(key, formState.form[key], false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{:else if type === "number"}
|
||||
{:else if type === 'number'}
|
||||
<Input
|
||||
type="number"
|
||||
bind:value={formState.form[key]}
|
||||
oninput={() => {
|
||||
if (validateOn?.includes("input")) {
|
||||
if (validateOn?.includes('input')) {
|
||||
formState.validateField(key, formState.form[key], false);
|
||||
}
|
||||
}}
|
||||
onblur={() => {
|
||||
if (validateOn?.includes("blur")) {
|
||||
if (validateOn?.includes('blur')) {
|
||||
formState.validateField(key, formState.form[key], false);
|
||||
}
|
||||
}}
|
||||
onkeydown={(e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault()}
|
||||
/>
|
||||
{:else if type === "textarea"}
|
||||
{:else if type === 'textarea'}
|
||||
<Textarea
|
||||
class="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
||||
oninput={() => {
|
||||
if (validateOn?.includes("input")) {
|
||||
if (validateOn?.includes('input')) {
|
||||
formState.validateField(key, formState.form[key], false);
|
||||
}
|
||||
}}
|
||||
onblur={() => {
|
||||
if (validateOn?.includes("blur")) {
|
||||
if (validateOn?.includes('blur')) {
|
||||
formState.validateField(key, formState.form[key], false);
|
||||
}
|
||||
}}
|
||||
bind:value={formState.form[key]}
|
||||
/>
|
||||
{:else if type === "select"}
|
||||
{@const selectedLabel = formState.selectOptions?.[key]?.find(opt => opt.value === formState.form[key])?.label || "Choose"}
|
||||
{:else if type === 'select'}
|
||||
{@const selectedLabel =
|
||||
formState.selectOptions?.[key]?.find((opt) => opt.value === formState.form[key])?.label ||
|
||||
'Choose'}
|
||||
{@const filteredOptions = getFilteredOptions(key)}
|
||||
<Select.Root type="single" bind:value={formState.form[key]}
|
||||
<Select.Root
|
||||
type="single"
|
||||
bind:value={formState.form[key]}
|
||||
onValueChange={(val) => {
|
||||
formState.form[key] = val;
|
||||
if (validateOn?.includes("input")) {
|
||||
if (validateOn?.includes('input')) {
|
||||
formState.validateField?.(key, formState.form[key], false);
|
||||
}
|
||||
if (key === "TestType") {
|
||||
if (key === 'TestType') {
|
||||
handleTestTypeChange(val);
|
||||
}
|
||||
if (key === "Province") {
|
||||
formState.form.City = "";
|
||||
if (key === 'Province') {
|
||||
formState.form.City = '';
|
||||
if (formState.selectOptions) {
|
||||
formState.selectOptions.City = [];
|
||||
}
|
||||
@ -259,35 +273,35 @@
|
||||
formState.lastFetched.City = null;
|
||||
}
|
||||
}
|
||||
if (key === "ResultType") {
|
||||
if (key === 'ResultType') {
|
||||
handleResultTypeChange(val);
|
||||
}
|
||||
if (key === "RefType") {
|
||||
if (key === 'RefType') {
|
||||
handleRefTypeChange(val);
|
||||
}
|
||||
if (key === "HostType") {
|
||||
formState.form.HostID = "";
|
||||
formState.form.HostTestCode = "";
|
||||
formState.form.HostTestName = "";
|
||||
if (key === 'HostType') {
|
||||
formState.form.HostID = '';
|
||||
formState.form.HostTestCode = '';
|
||||
formState.form.HostTestName = '';
|
||||
formState.selectOptions.HostTestCode = [];
|
||||
formState.selectOptions.HostTestName = [];
|
||||
}
|
||||
if (key === "HostID") {
|
||||
formState.form.HostTestCode = "";
|
||||
formState.form.HostTestName = "";
|
||||
if (key === 'HostID') {
|
||||
formState.form.HostTestCode = '';
|
||||
formState.form.HostTestName = '';
|
||||
formState.selectOptions.HostTestCode = [];
|
||||
formState.selectOptions.HostTestName = [];
|
||||
}
|
||||
if (key === "ClientType") {
|
||||
formState.form.ClientID = "";
|
||||
formState.form.ClientTestCode = "";
|
||||
formState.form.ClientTestName = "";
|
||||
if (key === 'ClientType') {
|
||||
formState.form.ClientID = '';
|
||||
formState.form.ClientTestCode = '';
|
||||
formState.form.ClientTestName = '';
|
||||
formState.selectOptions.ClientTestCode = [];
|
||||
formState.selectOptions.ClientTestName = [];
|
||||
}
|
||||
if (key === "ClientID") {
|
||||
formState.form.ClientTestCode = "";
|
||||
formState.form.ClientTestName = "";
|
||||
if (key === 'ClientID') {
|
||||
formState.form.ClientTestCode = '';
|
||||
formState.form.ClientTestName = '';
|
||||
formState.selectOptions.ClientTestCode = [];
|
||||
formState.selectOptions.ClientTestName = [];
|
||||
}
|
||||
@ -320,9 +334,10 @@
|
||||
<Select.Item value="">- None -</Select.Item>
|
||||
{/if}
|
||||
{#each filteredOptions as option}
|
||||
<Select.Item value={option.value}
|
||||
disabled={key === "ResultType" && disabledResultTypes.includes(option.value) ||
|
||||
key === "RefType" && disabledReferenceTypes.includes(option.value)}
|
||||
<Select.Item
|
||||
value={option.value}
|
||||
disabled={(key === 'ResultType' && disabledResultTypes.includes(option.value)) ||
|
||||
(key === 'RefType' && disabledReferenceTypes.includes(option.value))}
|
||||
>
|
||||
{option.label}
|
||||
</Select.Item>
|
||||
@ -330,16 +345,16 @@
|
||||
{/if}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
{:else if type === "selectmultiple"}
|
||||
{:else if type === 'selectmultiple'}
|
||||
{@const filteredOptions = getFilteredOptions(key)}
|
||||
<Select.Root
|
||||
type="multiple"
|
||||
bind:value={formState.form[key]}
|
||||
onValueChange={(val) => {
|
||||
formState.form[key] = val;
|
||||
if (validateOn?.includes("input")) {
|
||||
if (validateOn?.includes('input')) {
|
||||
formState.validateField?.(key, val, false);
|
||||
formState.validateField?.("FormulaCode", val, false);
|
||||
formState.validateField?.('FormulaCode', expression, false);
|
||||
}
|
||||
}}
|
||||
onOpenChange={(open) => {
|
||||
@ -354,8 +369,8 @@
|
||||
<Select.Trigger class="w-full">
|
||||
{formState.form[key]?.length
|
||||
? (formState.selectOptions?.[key] ?? [])
|
||||
.filter(o => formState.form[key].includes(o.value))
|
||||
.map(o => o.label)
|
||||
.filter((o) => formState.form[key].includes(o.value))
|
||||
.map((o) => o.label)
|
||||
.join(', ')
|
||||
: 'Choose'}
|
||||
</Select.Trigger>
|
||||
@ -370,9 +385,7 @@
|
||||
</div>
|
||||
<Select.Group>
|
||||
{#if formState.loadingOptions?.[key]}
|
||||
<div class="p-2 text-sm text-muted-foreground">
|
||||
Loading...
|
||||
</div>
|
||||
<div class="p-2 text-sm text-muted-foreground">Loading...</div>
|
||||
{:else}
|
||||
{#if formState.form[key].length > 0}
|
||||
<Select.Separator />
|
||||
@ -392,27 +405,27 @@
|
||||
</Select.Group>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
{:else if type === "date"}
|
||||
{:else if type === 'date'}
|
||||
<ReusableCalendar
|
||||
bind:value={formState.form[key]}
|
||||
parentFunction={(dateStr) => {
|
||||
formState.form[key] = dateStr;
|
||||
if (validateOn?.includes("input")) {
|
||||
if (validateOn?.includes('input')) {
|
||||
formState.validateField(key, dateStr, false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{:else if type === "signvalue"}
|
||||
{:else if type === 'signvalue'}
|
||||
<InputGroup.Root>
|
||||
<InputGroup.Input
|
||||
placeholder="Type here"
|
||||
bind:value={formState.form[txtKey]}
|
||||
oninput={() => {
|
||||
if (validateOn?.includes("input")) {
|
||||
formState.validateField("Low", formState.form[txtKey]);
|
||||
formState.validateField("LowSign");
|
||||
formState.validateField("High", formState.form[txtKey]);
|
||||
formState.validateField("HighSign");
|
||||
if (validateOn?.includes('input')) {
|
||||
formState.validateField('Low', formState.form[txtKey]);
|
||||
formState.validateField('LowSign');
|
||||
formState.validateField('High', formState.form[txtKey]);
|
||||
formState.validateField('HighSign');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@ -430,27 +443,24 @@
|
||||
>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<InputGroup.Button
|
||||
{...props}
|
||||
variant="ghost" disabled={disabledSign}
|
||||
>
|
||||
{formState.selectOptions?.[key]?.find(opt => opt.value === formState.form[key])?.label || 'Choose'}
|
||||
<InputGroup.Button {...props} variant="ghost" disabled={disabledSign}>
|
||||
{formState.selectOptions?.[key]?.find(
|
||||
(opt) => opt.value === formState.form[key]
|
||||
)?.label || 'Choose'}
|
||||
<ChevronDownIcon />
|
||||
</InputGroup.Button>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content align="start">
|
||||
{#if formState.loadingOptions?.[key]}
|
||||
<DropdownMenu.Item disabled>
|
||||
Loading...
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item disabled>Loading...</DropdownMenu.Item>
|
||||
{:else}
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => {
|
||||
formState.form[key] = "";
|
||||
formState.form[key] = '';
|
||||
dropdownOpen[key] = false;
|
||||
formState.validateField("LowSign");
|
||||
formState.validateField("HighSign");
|
||||
formState.validateField('LowSign');
|
||||
formState.validateField('HighSign');
|
||||
}}
|
||||
>
|
||||
- None -
|
||||
@ -463,8 +473,8 @@
|
||||
}}
|
||||
onSelect={() => {
|
||||
formState.form[key] = option.value;
|
||||
formState.validateField("LowSign");
|
||||
formState.validateField("HighSign");
|
||||
formState.validateField('LowSign');
|
||||
formState.validateField('HighSign');
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
@ -475,15 +485,17 @@
|
||||
</DropdownMenu.Root>
|
||||
</InputGroup.Addon>
|
||||
</InputGroup.Root>
|
||||
{:else if type === "agejoin"}
|
||||
{:else if type === 'agejoin'}
|
||||
<div class="flex items-center gap-2 w-full">
|
||||
<InputGroup.Root>
|
||||
<InputGroup.Input type="number" bind:value={joinFields[key].YY}
|
||||
<InputGroup.Input
|
||||
type="number"
|
||||
bind:value={joinFields[key].YY}
|
||||
oninput={() => {
|
||||
if (validateOn?.includes("input")) {
|
||||
if (validateOn?.includes('input')) {
|
||||
// formState.validateField(key, formState.form[key], false);
|
||||
formState.validateField("AgeStart");
|
||||
formState.validateField("AgeEnd");
|
||||
formState.validateField('AgeStart');
|
||||
formState.validateField('AgeEnd');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@ -492,12 +504,14 @@
|
||||
</InputGroup.Addon>
|
||||
</InputGroup.Root>
|
||||
<InputGroup.Root>
|
||||
<InputGroup.Input type="number" bind:value={joinFields[key].MM}
|
||||
<InputGroup.Input
|
||||
type="number"
|
||||
bind:value={joinFields[key].MM}
|
||||
oninput={() => {
|
||||
if (validateOn?.includes("input")) {
|
||||
if (validateOn?.includes('input')) {
|
||||
// formState.validateField(key, formState.form[key], false);
|
||||
formState.validateField("AgeStart");
|
||||
formState.validateField("AgeEnd");
|
||||
formState.validateField('AgeStart');
|
||||
formState.validateField('AgeEnd');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@ -506,12 +520,14 @@
|
||||
</InputGroup.Addon>
|
||||
</InputGroup.Root>
|
||||
<InputGroup.Root>
|
||||
<InputGroup.Input type="number" bind:value={joinFields[key].DD}
|
||||
<InputGroup.Input
|
||||
type="number"
|
||||
bind:value={joinFields[key].DD}
|
||||
oninput={() => {
|
||||
if (validateOn?.includes("input")) {
|
||||
if (validateOn?.includes('input')) {
|
||||
// formState.validateField(key, formState.form[key], false);
|
||||
formState.validateField("AgeStart");
|
||||
formState.validateField("AgeEnd");
|
||||
formState.validateField('AgeStart');
|
||||
formState.validateField('AgeEnd');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@ -520,19 +536,14 @@
|
||||
</InputGroup.Addon>
|
||||
</InputGroup.Root>
|
||||
</div>
|
||||
{:else if type === "formulabuilder"}
|
||||
{:else if type === 'formulabuilder'}
|
||||
<div class="flex flex-col gap-8 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={moveCursorLeft}>
|
||||
<MoveLeftIcon class="w-4 h-4" />
|
||||
</Button>
|
||||
<div class="relative flex-1">
|
||||
<div
|
||||
<button
|
||||
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"
|
||||
tabindex="0"
|
||||
@ -547,31 +558,16 @@
|
||||
{#if cursorPosition === expression.length}
|
||||
<span class="animate-cursor inline-block h-6 w-0.5 bg-primary"></span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onclick={moveCursorRight}
|
||||
>
|
||||
<Button type="button" variant="outline" size="icon" onclick={moveCursorRight}>
|
||||
<MoveRightIcon class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onclick={deleteChar}
|
||||
>
|
||||
<Button type="button" variant="outline" size="icon" onclick={deleteChar}>
|
||||
<DeleteIcon class="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onclick={clearExpression}
|
||||
>
|
||||
<Button type="button" variant="outline" size="icon" onclick={clearExpression}>
|
||||
<BrushCleaningIcon class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
@ -584,14 +580,13 @@
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="h-auto w-auto p-2"
|
||||
onclick={() => addValue(item)}
|
||||
>
|
||||
{item}
|
||||
</Button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-sm font-medium">Operators</span>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@ -608,6 +603,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
@ -617,11 +613,7 @@
|
||||
placeholder="Custom field type: {type}"
|
||||
/>
|
||||
{/if}
|
||||
<div
|
||||
class={`absolute min-h-[1rem] w-full ${
|
||||
key === 'FormulaCode' ? 'top-10' : 'top-8'
|
||||
}`}
|
||||
>
|
||||
<div class={`absolute min-h-[1rem] w-full ${key === 'FormulaCode' ? 'top-10' : 'top-10'}`}>
|
||||
{#if key !== 'FormulaCode' && (formState.errors[key] || formState.errors[txtKey])}
|
||||
{@const errorMessage = formState.errors[key] ?? formState.errors[txtKey]}
|
||||
|
||||
@ -633,7 +625,7 @@
|
||||
{@const inputStatus = getErrorStatus(expression)}
|
||||
|
||||
<div class="flex items-center gap-2 text-sm text-destructive">
|
||||
<span>Formula parameters:</span>
|
||||
<span>Must included :</span>
|
||||
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
{#each inputStatus as item (item.value)}
|
||||
@ -659,24 +651,31 @@
|
||||
{/if}
|
||||
|
||||
{#each group.rows as row}
|
||||
{@const visibleColumns = row.columns.filter(col => !hiddenFields?.includes(col.key))}
|
||||
{@const visibleColumns = row.columns.filter((col) => !hiddenFields?.includes(col.key))}
|
||||
|
||||
{#if visibleColumns.length > 0}
|
||||
<div
|
||||
class="grid grid-cols-1 space-y-2 gap-6 md:gap-4"
|
||||
class:md:grid-cols-1={visibleColumns.length === 1 && visibleColumns[0].fullWidth !== false}
|
||||
class:md:grid-cols-2={visibleColumns.length === 2 || (visibleColumns.length === 1 && visibleColumns[0].fullWidth === false)}
|
||||
class:md:grid-cols-1={visibleColumns.length === 1 &&
|
||||
visibleColumns[0].fullWidth !== false}
|
||||
class:md:grid-cols-2={visibleColumns.length === 2 ||
|
||||
(visibleColumns.length === 1 && visibleColumns[0].fullWidth === false)}
|
||||
class:md:grid-cols-3={visibleColumns.length === 3}
|
||||
>
|
||||
{#each visibleColumns as col}
|
||||
{#if col.type === "group"}
|
||||
{@const visibleChildColumns = col.columns.filter(child => !hiddenFields?.includes(child.key))}
|
||||
{#if col.type === 'group'}
|
||||
{@const visibleChildColumns = col.columns.filter(
|
||||
(child) => !hiddenFields?.includes(child.key)
|
||||
)}
|
||||
|
||||
{#if visibleChildColumns.length > 0}
|
||||
<div
|
||||
class="grid grid-cols-1 gap-6 md:gap-2"
|
||||
class:md:grid-cols-1={visibleChildColumns.length === 1 && visibleChildColumns[0].fullWidth !== false}
|
||||
class:md:grid-cols-2={visibleChildColumns.length === 2 || (visibleChildColumns.length === 1 && visibleChildColumns[0].fullWidth === false)}
|
||||
class:md:grid-cols-1={visibleChildColumns.length === 1 &&
|
||||
visibleChildColumns[0].fullWidth !== false}
|
||||
class:md:grid-cols-2={visibleChildColumns.length === 2 ||
|
||||
(visibleChildColumns.length === 1 &&
|
||||
visibleChildColumns[0].fullWidth === false)}
|
||||
class:md:grid-cols-3={visibleChildColumns.length === 3}
|
||||
>
|
||||
{#each visibleChildColumns as child}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user