updated lang change and FormDisplay Components

WebServices/client-frontend/src/components/common/FormDisplay/FormDisplay.tsx

@@ -0,0 +1,120 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { CreateComponent } from "./CreateComponent";
+import { UpdateComponent } from "./UpdateComponent";
+import { ViewComponent } from "./ViewComponent";
+import { FormDisplayProps } from "./types";
+
+export function FormDisplay<T>({
+  initialData,
+  mode,
+  refetch,
+  setMode,
+  setSelectedItem,
+  onCancel,
+  lang,
+  translations,
+  formProps = {},
+}: FormDisplayProps<T>) {
+  const [enhancedFormProps, setEnhancedFormProps] = useState(formProps);
+  
+  // Dynamically import schema definitions if provided in formProps
+  useEffect(() => {
+    const loadSchemaDefinitions = async () => {
+      try {
+        // Check if schemaPath is provided in formProps
+        if (formProps.schemaPath) {
+          // Dynamic import of the schema module
+          const schemaModule = await import(formProps.schemaPath);
+          
+          // Get the appropriate field definitions based on mode
+          let fieldDefs;
+          if (schemaModule.fieldDefinitions?.getDefinitionsByMode) {
+            fieldDefs = schemaModule.fieldDefinitions.getDefinitionsByMode(mode);
+          } else if (mode === "create" && schemaModule.createFieldDefinitions) {
+            fieldDefs = schemaModule.createFieldDefinitions;
+          } else if (mode === "update" && schemaModule.updateFieldDefinitions) {
+            fieldDefs = schemaModule.updateFieldDefinitions;
+          } else if (mode === "view" && schemaModule.viewFieldDefinitions) {
+            fieldDefs = schemaModule.viewFieldDefinitions;
+          }
+          
+          // Get the appropriate validation schema based on mode
+          let validationSchema;
+          if (mode === "create" && schemaModule.CreateApplicationSchema) {
+            validationSchema = schemaModule.CreateApplicationSchema;
+          } else if (mode === "update" && schemaModule.UpdateApplicationSchema) {
+            validationSchema = schemaModule.UpdateApplicationSchema;
+          } else if (mode === "view" && schemaModule.ViewApplicationSchema) {
+            validationSchema = schemaModule.ViewApplicationSchema;
+          } else if (schemaModule.ApplicationSchema) {
+            validationSchema = schemaModule.ApplicationSchema;
+          }
+          
+          // Get the grouped field definitions structure if available
+          const groupedFieldDefs = schemaModule.baseFieldDefinitions || {};
+          
+          // Update form props with schema information
+          setEnhancedFormProps({
+            ...formProps,
+            fieldDefinitions: fieldDefs || {},
+            validationSchema,
+            fieldsByMode: schemaModule.fieldsByMode || {},
+            groupedFieldDefinitions: groupedFieldDefs,
+          });
+        }
+      } catch (error) {
+        console.error("Error loading schema definitions:", error);
+      }
+    };
+    
+    loadSchemaDefinitions();
+  }, [formProps, mode, lang]); // Added lang as a dependency to ensure re-fetch when language changes
+  
+  // Render the appropriate component based on the mode
+  switch (mode) {
+    case "create":
+      return (
+        <CreateComponent<T>
+          key={`create-${lang}`} // Add key with lang to force re-render on language change
+          refetch={refetch}
+          setMode={setMode}
+          setSelectedItem={setSelectedItem}
+          onCancel={onCancel}
+          lang={lang}
+          translations={translations}
+          formProps={enhancedFormProps}
+        />
+      );
+    case "update":
+      return initialData ? (
+        <UpdateComponent<T>
+          key={`update-${lang}`} // Add key with lang to force re-render on language change
+          initialData={initialData}
+          refetch={refetch}
+          setMode={setMode}
+          setSelectedItem={setSelectedItem}
+          onCancel={onCancel}
+          lang={lang}
+          translations={translations}
+          formProps={enhancedFormProps}
+        />
+      ) : null;
+    case "view":
+      return initialData ? (
+        <ViewComponent<T>
+          key={`view-${lang}`} // Add key with lang to force re-render on language change
+          initialData={initialData}
+          refetch={refetch}
+          setMode={setMode}
+          setSelectedItem={setSelectedItem}
+          onCancel={onCancel}
+          lang={lang}
+          translations={translations}
+          formProps={enhancedFormProps} // Changed from formProps to enhancedFormProps for consistency
+        />
+      ) : null;
+    default:
+      return null;
+  }
+}