@plusscommunities/pluss-feature-builder-web-d 1.0.2-beta.7 → 1.0.2-beta.9

package/src/screens/FormFieldsStep.jsx

@@ -5,18 +5,14 @@ import { SidebarLayout } from "../components/SidebarLayout.jsx";
 import { values } from "../values.config.js";
 import { PlussCore } from "../feature.config";
 import styles from "./Form.module.css";
-import fieldStyles from "../components/Fields.module.css";
 import { Field } from "../components/Fields.jsx";
 import { iconImports } from "../components/iconImports";
 import {
 	Text,
 	LoadingState,
-	SkeletonLoader,
-	DropdownInput,
 	Button,
 	ErrorBoundary,
 	Popup,
-	CenteredContainer,
 } from "../components";
 
 import ToastContainer from "../components/ToastContainer.jsx";
@@ -31,7 +27,6 @@ import {
 	selectIsEditMode,
 	selectIsStepValid,
 	selectStepErrors,
-	selectCurrentStep,
 	selectFormIsSubmitting,
 	selectFormSubmitError,
 	selectFormSubmitSuccess,
@@ -122,28 +117,20 @@ const FormFieldsStepInner = (props) => {
 		},
 	];
 
-	// Use custom hook to handle definition loading
 	const { definition, definitionIsLoading, reloadDefinition } =
 		useFeatureDefinitionLoader();
 
-	// Get form state for display name
 	const formDisplayName = useSelector(selectFormDisplayName);
 
-	// Get wizard state
 	const isCreateMode = useSelector(selectIsCreateMode);
 	const isEditMode = useSelector(selectIsEditMode);
-
-	// Get validation state
 	const isStepValid = useSelector(selectIsStepValid("fields"));
 	const stepErrors = useSelector(selectStepErrors("fields"));
 	const showWarnings = !isStepValid && Object.keys(stepErrors).length > 0;
-
-	// Get submission state
 	const isSubmitting = useSelector(selectFormIsSubmitting);
 	const submitError = useSelector(selectFormSubmitError);
 	const submitSuccess = useSelector(selectFormSubmitSuccess);
 
-	// Toast management functions
 	const addToast = (type, message) => {
 		const id = Date.now();
 		setToasts((prev) => [...prev, { id, type, message, isVisible: true }]);
@@ -153,9 +140,6 @@ const FormFieldsStepInner = (props) => {
 		setToasts((prev) => prev.filter((toast) => toast.id !== id));
 	};
 
-	// Note: Removed automatic redirect after successful save in edit mode
-	// User should stay on the current step until they manually navigate
-
 	// Handle successful submission with optimistic update and redirect
 	React.useEffect(() => {
 		if (submitSuccess && !isSubmitting) {
@@ -163,14 +147,11 @@ const FormFieldsStepInner = (props) => {
 				addToast("success", "Changes saved");
 				dispatch(clearFormSubmissionState());
 			} else {
-				// In create mode, show success toast and redirect immediately
 				addToast("success", "Feature created successfully");
-
-				// Clear submission state and redirect to overview step
 				dispatch(clearFormSubmissionState());
 				setTimeout(() => {
 					history.push(values.routeFormOverviewStep);
-				}, 1000); // Brief delay to show toast
+				}, 1000);
 			}
 		}
 	}, [submitSuccess, isEditMode, isSubmitting, dispatch, history]);
@@ -185,7 +166,6 @@ const FormFieldsStepInner = (props) => {
 		}
 	}, [submitError]);
 
-	// Scroll to top when validation errors appear
 	useEffect(() => {
 		if (showWarnings) {
 			// Scroll to top of form to show validation errors
@@ -193,29 +173,18 @@ const FormFieldsStepInner = (props) => {
 		}
 	}, [showWarnings]);
 
-	// Error boundary handlers
 	const handleRefresh = () => {
-		// Refresh current step data
 		dispatch(validateAndUpdateStep("fields"));
 	};
 
-	const handleBack = () => {
-		// Go to overview step
-		history.push(values.routeFormOverviewStep);
-	};
-
 	useEffect(() => {
-		// Set current step when component mounts
 		dispatch(setCurrentStepAndSave("fields"));
 	}, [dispatch]);
 
-	// Add effect to handle definition loading and validation in edit mode
-	// ADD THIS EFFECT: Hydrate form data from definition on refresh
 	useEffect(() => {
 		if (definition && !definitionIsLoading && isFormInitial) {
 			dispatch(setInitialValues(definition));
 
-			// In edit mode, trigger validation after setting initial values
 			if (isEditMode) {
 				setTimeout(() => {
 					dispatch(validateAndUpdateStep("fields"));
@@ -226,9 +195,7 @@ const FormFieldsStepInner = (props) => {
 
 	useEffect(() => {
 		// In edit mode, trigger validation when definition is available
-		// Note: The new effect above handles the data population, this handles re-validation
 		if (isEditMode && definition && !definitionIsLoading && !isFormInitial) {
-			// Only validate if form is NOT initial (meaning it has data)
 			setTimeout(() => {
 				dispatch(validateAndUpdateStep("fields"));
 			}, 100);
@@ -237,16 +204,16 @@ const FormFieldsStepInner = (props) => {
 
 	function handleAddField(fieldType) {
 		dispatch(addField(fieldType));
-		setShowFieldSelector(false); // Close popup after adding field
+		setShowFieldSelector(false);
 	}
 
 	function handleOpenFieldSelector() {
-		setReplacingFieldIndex(null); // Reset to add mode
+		setReplacingFieldIndex(null);
 		setShowFieldSelector(true);
 	}
 
 	function handleCloseFieldSelector() {
-		setReplacingFieldIndex(null); // Reset replacement state
+		setReplacingFieldIndex(null);
 		setShowFieldSelector(false);
 	}
 
@@ -255,7 +222,6 @@ const FormFieldsStepInner = (props) => {
 	}
 
 	function handleReplaceField(fieldIndex) {
-		// Store the field index to replace and open the field selector
 		setReplacingFieldIndex(fieldIndex);
 		setShowFieldSelector(true);
 	}
@@ -263,82 +229,55 @@ const FormFieldsStepInner = (props) => {
 	function handleAddReplacementField(fieldType) {
 		const fieldIndex = replacingFieldIndex;
 		if (fieldIndex !== null) {
-			// Delete the current field at this index
 			const currentField = allFields[fieldIndex];
 			if (currentField && !currentField.isMandatory) {
 				dispatch(deleteField(currentField.id));
 			}
-
-			// Add the new field
 			dispatch(addField(fieldType));
-
-			// Reset replacement state
 			setReplacingFieldIndex(null);
 			setShowFieldSelector(false);
 		}
 	}
 
 	function handleNext() {
-		// Validate before proceeding
 		const validationResult = dispatch(validateAndUpdateStep("fields"));
-
-		// If validation passes, navigate to next step
 		if (validationResult?.isValid) {
-			// Clear form submission state when changing steps
 			dispatch(clearFormSubmissionState());
-
 			if (isCreateMode) {
 				history.push(values.routeFormLayoutStep);
 			} else {
-				// In edit mode, navigate directly
 				history.push(values.routeFormLayoutStep);
 			}
 		}
 		// If validation fails, scroll to top to show error summary
 		else {
-			// Scroll to top of form to show validation errors
 			window.scrollTo({ top: 0, behavior: "smooth" });
 		}
 	}
 
 	function handlePrevious() {
-		// Clear form submission state when changing steps
 		dispatch(clearFormSubmissionState());
-
 		if (isCreateMode) {
 			history.push(values.routeFormOverviewStep);
 		} else {
-			// In edit mode, go back to overview screen
 			history.push(values.routeFormOverviewStep);
 		}
 	}
 
 	function handleSaveStep() {
-		// Validate before saving in edit mode
 		const validationResult = dispatch(validateAndUpdateStep("fields"));
-
-		// If validation passes, save the entire form
 		if (validationResult?.isValid) {
 			dispatch(submitForm());
 		}
 		// If validation fails, scroll to top to show error summary
 		else {
-			// Scroll to top of form to show validation errors
 			window.scrollTo({ top: 0, behavior: "smooth" });
 		}
 	}
 
-	// Get all fields in unified list (base + custom)
 	const allFields = fields || [];
-
-	// Create sorted copy for rendering
 	const sortedFields = allFields.slice().sort((a, b) => a.order - b.order);
 
-	// Filter description fields for summary demo
-	const descriptionFields = allFields.filter(
-		(field) => field.type === "description",
-	);
-
 	// Check for definition management permission
 	if (
 		!PlussCore.Session.validateAccess(
@@ -665,11 +604,9 @@ const useField = (id) => {
 	}
 
 	function setUseAsSummary(value) {
-		// When setting a field as summary, use the new action to ensure only one field is selected
 		if (value) {
 			dispatch(setSummaryField(id));
 		} else {
-			// When unsetting, use regular update to unset this specific field
 			const updatedField = { values: { ...values, useAsSummary: false } };
 			dispatch(updateFieldValuesById(id, updatedField));
 		}