initial group test & payload group

src/lib/components/dictionary/test/config/test-form-config.js

@@ -74,7 +74,7 @@ export const testCalSchema = z
 	});
 
 export const testGroupSchema = z.object({
-		Member: z.string().optional()
+		Members: z.string().optional()
 	});
 
 export const refNumSchema = z
@@ -219,7 +219,7 @@ export const testCalInitialForm = {
 export const testGroupInitialForm = {
 	TestGrpID: '',
 	TestSiteID: '',
-	Member: '',
+	Members: [],
 }
 
 export const refNumInitialForm = {
@@ -284,7 +284,7 @@ export const testCalDefaultErrors = {
 };
 
 export const testGroupDefaultErrors = {
-	Member: null,
+	Members: 'fdsa',
 }
 
 export const refNumDefaultErrors = {
@@ -1062,6 +1062,11 @@ export function buildTestPayload({ mainForm, activeFormStates, testType, refNumD
 		} else if (key === 'refTxt' && refTxtData?.length > 0) {
 			payload[key] = refTxtData;
 
+		} else if(key === 'group') {
+			payload[key] = {
+				...state.form,
+				Members: state.form?.Members?.map((m) => m.value).filter(Boolean) ?? []
+			};
 		} else if (state?.form) {
 			payload[key] = {
 				...state.form

src/lib/components/dictionary/test/page/create-page.svelte

@@ -123,6 +123,9 @@
 					map: mapFormState
 				};
 			case 'GROUP':
+				return {
+					group: groupFormState
+				}
 			case 'TITLE':
 			default:
 				return {};

src/lib/components/dictionary/test/page/tabs/group.svelte

@@ -1,25 +1,34 @@
 <script>
-    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();
 
-    let members = $state([{ id: 1, value: "" }]);
+	// function addMember() {
+	// 	members = [...members, { id: Date.now(), value: '' }];
+	// }
 
     function addMember() {
-        members = [...members, { id: Date.now(), value: "" }];
+        props.groupFormState.form.Members = [
+            ...(props.groupFormState.form.Members ?? []),
+            { id: Date.now(), value: '' }
+        ];
     }
 
+	// function removeMember(id) {
+	// 	members = members.filter((m) => m.id !== id);
+	// }
+// $inspect(props.groupFormState.form)
     function removeMember(id) {
-        members = members.filter(m => m.id !== id);
+        props.groupFormState.form.Members =
+            props.groupFormState.form.Members.filter((m) => m.id !== id);
     }
 </script>
 
 <div class="flex flex-col gap-4 w-full">
-    <DictionaryFormRenderer 
+	<DictionaryFormRenderer
-        formState={props.groupFormState} 
+		formState={props.groupFormState}
-        formFields={props.testGroupFormFields} 
+		formFields={props.testGroupFormFields}
-        {members}
+		onAddMember={addMember}
-        onAddMember={addMember}
+		onRemoveMember={removeMember}
-        onRemoveMember={removeMember}
+	/>
-    />
 </div>

src/lib/components/reusable/form/dictionary-form-renderer.svelte

@@ -30,11 +30,26 @@
 		handleTestTypeChange,
 		handleResultTypeChange,
 		handleRefTypeChange,
-		members = [],
 		onAddMember,
-		onRemoveMember,
+		onRemoveMember
 	} = $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({});
@@ -615,14 +630,13 @@
 						</div>
 					{/if}
 				</div>
-			{:else if type === "members"}
+			{:else if type === 'members'}
 				{@const filteredOptions = getFilteredOptions(key)}
 				<div class="flex flex-col gap-2 w-full">
-					{#each members as member, index (member.id)}
+					{#each formState.form.Members as member, index (member.id)}
-					{@const selectedLabel =
+						{@const selectedLabel =
-                formState.selectOptions?.[key]?.find(
+							formState.selectOptions?.[key]?.find((opt) => opt.value === member.value)?.label ||
-                    (opt) => opt.value === member.value
+							'Choose'}
-                )?.label || 'Choose'}
 						<div class="flex gap-1 w-full">
 							<Button type="button" variant="outline" size="icon" disabled>
 								{index + 1}
@@ -668,7 +682,12 @@
 									</Select.Content>
 								</Select.Root>
 							</div>
-							<Button type="button" variant="outline" size="icon" onclick={() => onRemoveMember(member.id)}>
+							<Button
+								type="button"
+								variant="outline"
+								size="icon"
+								onclick={() => onRemoveMember(member.id)}
+							>
 								<Trash2Icon class="size-4" />
 							</Button>
 						</div>