@asaleh37/ui-base 1.2.3 → 1.2.5

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormElementField.tsx

@@ -7,6 +7,8 @@ import CheckBox from "./FormFields/CheckBox";
 import { DATE_FORMAT, DATE_TIME_FORMAT } from "../../../../util/constants";
 import { isNumeric } from "../../../../util/AppUtils";
 import { FormElementFieldProps } from "../DataEntryTypes";
+import HtmlEditor from "./FormFields/HtmlEditor";
+import SystemLookupCombobox from "./FormFields/SystemLookupCombobox";
 
 const FormElementField: React.FC<FormElementFieldProps> = (
   element: FormElementFieldProps
@@ -21,8 +23,7 @@ const FormElementField: React.FC<FormElementFieldProps> = (
     if (!(props && formManager && formValues && fieldName && fieldType)) {
       return <></>;
     }
-    return (props?.hidden === undefined || !props?.hidden) &&
-      !element.hiddenFields.includes(fieldName) ? (
+    return !element.hiddenFields.includes(fieldName) ? (
       <Grid2
         size={
           props?.formProps?.fieldSize || {
@@ -38,6 +39,7 @@ const FormElementField: React.FC<FormElementFieldProps> = (
       >
         {fieldType === "text" || fieldType === "number" ? (
           <TemplateTextField
+            {...props.muiTextFieldProps}
             fullWidth
             type={fieldType}
             disabled={
@@ -66,7 +68,15 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 );
               }
             }}
-            sx={props?.formProps?.style}
+            sx={{
+              "& .MuiInputBase-root": {
+                height: `${props?.formProps?.fieldHeight}px` || undefined,
+              },
+              "& .MuiInputBase-input": {
+                height: "100% !important", // forces full height usage
+              },
+              ...props?.formProps?.style,
+            }}
             error={formManager.formState.errors[fieldName] != undefined}
             helperText={formManager?.formState?.errors[
               fieldName
@@ -138,8 +148,8 @@ const FormElementField: React.FC<FormElementFieldProps> = (
               }
             }}
             value={formValues[fieldName]}
-            checkedValue={props?.checkedValue || "true"}
-            unCheckedValue={props?.unCheckedValue || "false"}
+            checkedValue={props?.checkedValue || true}
+            unCheckedValue={props?.unCheckedValue || false}
             disabled={
               props?.disabled || element.disabledFields.includes(fieldName)
                 ? true
@@ -179,6 +189,55 @@ const FormElementField: React.FC<FormElementFieldProps> = (
               fieldName
             ]?.message?.toString()}
           />
+        ) : props?.fieldType === "lookup" ? (
+          <SystemLookupCombobox
+            sx={props?.formProps?.style || { width: "100%" }}
+            label={props?.fieldLabel}
+            disabled={
+              props?.disabled || element.disabledFields.includes(fieldName)
+                ? true
+                : false
+            }
+            onChangeCallBack={(v: any, selectedRecord: any) => {
+              let newValue = null;
+              if (v) {
+                newValue = v + "";
+              }
+              formManager.setValue(fieldName, newValue);
+              if (props?.formProps?.onValueChangeCallBack) {
+                props?.formProps?.onValueChangeCallBack(
+                  newValue,
+                  formManager,
+                  formActions,
+                  selectedRecord
+                );
+              }
+            }}
+            lookupType={props.lookupType}
+            value={formValues[fieldName]}
+            errorMessage={formManager?.formState?.errors[
+              fieldName
+            ]?.message?.toString()}
+          />
+        ) : props?.fieldType === "html" ? (
+          <HtmlEditor
+            label={props.fieldLabel}
+            value={formValues[fieldName] || ""}
+            errorMessage={formManager?.formState?.errors[
+              fieldName
+            ]?.message?.toString()}
+            setValue={(v) => {
+              formManager.setValue(fieldName, v);
+              if (props?.formProps?.onValueChangeCallBack) {
+                props?.formProps?.onValueChangeCallBack(
+                  v,
+                  formManager,
+                  formActions
+                );
+              }
+            }}
+            maxLength={4000}
+          />
         ) : (
           <>Unknown field type</>
         )}

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormElementGroup.tsx

@@ -7,17 +7,25 @@ import {
   FormElementProps,
   RecordAction,
 } from "../DataEntryTypes";
+import { useTranslation } from "react-i18next";
 
 const FormElementGroup: React.FC<FormElementGroupProps> = (
   props: FormElementGroupProps
 ) => {
+  const { t } = useTranslation();
   return (
     <>
       <Grid2 container sx={props?.style} alignItems="flex-start">
         {props?.label ? (
           <Grid2
             size={12}
-            sx={{ padding: 1, fontWeight: "bold", display: "flex" }}
+            sx={{
+              padding: 1,
+              fontWeight: "bold",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+            }}
           >
             {props?.icon ? (
               <>
@@ -25,10 +33,10 @@ const FormElementGroup: React.FC<FormElementGroupProps> = (
                   icon={props.icon}
                   style={{ marginRight: 5, marginLeft: 5 }}
                 />
-                <div>{props.label}</div>
+                <div>{t(props.label)}</div>
               </>
             ) : (
-              <>{props.label}</>
+              <>{t(props.label)}</>
             )}
           </Grid2>
         ) : (

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/CheckBox.tsx

@@ -40,7 +40,7 @@ const CheckBox: React.FC<CheckBoxProps> = (props) => {
                 ) {
                   props.onChangeCallBack(props.checkedValue);
                 } else {
-                  props.onChangeCallBack("true");
+                  props.onChangeCallBack(true);
                 }
               } else {
                 if (
@@ -49,7 +49,7 @@ const CheckBox: React.FC<CheckBoxProps> = (props) => {
                 ) {
                   props.onChangeCallBack(props.unCheckedValue);
                 } else {
-                  props.onChangeCallBack("false");
+                  props.onChangeCallBack(false);
                 }
               }
             }

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/ComboBox.tsx

@@ -1,5 +1,4 @@
 import { useSelector } from "react-redux";
-import { RootState } from "../../../../../redux/store";
 import { Autocomplete, Popper, TextField } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
@@ -17,7 +16,7 @@ interface ComboBoxProps {
 }
 
 const ComboBox: React.FC<ComboBoxProps> = (props) => {
-  const AppLayoutState = useSelector((state: RootState) => state.AppLayout);
+  const AppLayoutState = useSelector((state: any) => state.AppLayout);
   const { t } = useTranslation();
   const getValue = (v: string) => {
     for (let option of props.options) {

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/HtmlEditor.tsx

@@ -0,0 +1,144 @@
+import { EditorState, convertToRaw } from "draft-js";
+import { Editor } from "react-draft-wysiwyg";
+import draftToHtml from "draftjs-to-html";
+import { stateFromHTML } from "draft-js-import-html";
+import { useState } from "react";
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+import { useEffect } from "react";
+import { Box, Paper } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+type HtmlEditorProps = {
+  label?: string;
+  value: string;
+  setValue: (v: any) => void;
+  maxLength: number;
+  errorMessage?: string;
+};
+
+const HtmlEditor: React.FC<HtmlEditorProps> = ({
+  label,
+  errorMessage,
+  value,
+  setValue,
+  maxLength,
+}) => {
+  const { t } = useTranslation();
+  const options = {
+    customInlineFn: (element, { Style }) => {
+      if (element.style.color) {
+        return Style("color-" + element.style.color);
+      }
+    },
+  };
+
+  let contentState = stateFromHTML(value, options);
+
+  const [editorState, setEditorState] = useState(
+    EditorState.createWithContent(contentState)
+  );
+  let onEditorStateChange = (editorState) => {
+    let newData = draftToHtml(convertToRaw(editorState.getCurrentContent()));
+    console.log("Text Length " + newData.length);
+    if (newData.length > maxLength) {
+      let contentState = stateFromHTML(
+        newData.substring(0, maxLength),
+        options
+      );
+      setEditorState(EditorState.createWithContent(contentState));
+      return;
+    } else {
+      setEditorState(editorState);
+    }
+    setValue(draftToHtml(convertToRaw(editorState.getCurrentContent())));
+  };
+  useEffect(() => {
+    if (value != draftToHtml(convertToRaw(editorState.getCurrentContent()))) {
+      setEditorState(
+        EditorState.createWithContent(stateFromHTML(value, options))
+      );
+    }
+  }, [value]);
+  const _getLengthOfSelectedText = () => {
+    const currentSelection = editorState.getSelection();
+    const isCollapsed = currentSelection.isCollapsed();
+
+    let length = 0;
+
+    if (!isCollapsed) {
+      const currentContent = editorState.getCurrentContent();
+      const startKey = currentSelection.getStartKey();
+      const endKey = currentSelection.getEndKey();
+      const startBlock = currentContent.getBlockForKey(startKey);
+      const isStartAndEndBlockAreTheSame = startKey === endKey;
+      const startBlockTextLength = startBlock.getLength();
+      const startSelectedTextLength =
+        startBlockTextLength - currentSelection.getStartOffset();
+      const endSelectedTextLength = currentSelection.getEndOffset();
+      const keyAfterEnd = currentContent.getKeyAfter(endKey);
+      if (isStartAndEndBlockAreTheSame) {
+        length +=
+          currentSelection.getEndOffset() - currentSelection.getStartOffset();
+      } else {
+        let currentKey = startKey;
+
+        while (currentKey && currentKey !== keyAfterEnd) {
+          if (currentKey === startKey) {
+            length += startSelectedTextLength + 1;
+          } else if (currentKey === endKey) {
+            length += endSelectedTextLength;
+          } else {
+            length += currentContent.getBlockForKey(currentKey).getLength() + 1;
+          }
+
+          currentKey = currentContent.getKeyAfter(currentKey);
+        }
+      }
+    }
+
+    return length;
+  };
+  return (
+    <Paper
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        padding: 1,
+      }}
+    >
+      {label ? <Box>{t(label)}</Box> : <></>}
+      <Editor
+        editorState={editorState}
+        onEditorStateChange={onEditorStateChange}
+        handlePastedText={(pastedText) => {
+          const currentContent = editorState.getCurrentContent();
+          const currentContentLength = currentContent.getPlainText("").length;
+          const selectedTextLength = _getLengthOfSelectedText();
+
+          if (
+            currentContentLength + pastedText.length - selectedTextLength >
+            maxLength
+          ) {
+            alert("max text length is " + maxLength);
+            return "handled";
+          }
+        }}
+        editorStyle={{
+          height: "200px", // 👈 set height of content area
+          border: "1px solid #F1F1F1",
+          padding: "10px",
+          overflow: "auto", // scroll if needed
+        }}
+        wrapperStyle={{ marginBottom: "1rem" }}
+        toolbarStyle={{ border: "1px solid #ccc" }}
+      />
+      {errorMessage ? (
+        <Box sx={{ color: "red" }}>{t(errorMessage)}</Box>
+      ) : (
+        <></>
+      )}
+    </Paper>
+  );
+};
+
+export default HtmlEditor;

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/SystemLookupCombobox.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import { useAxios, useSession } from "../../../../../hooks";
+import ComboBox from "./ComboBox";
+import { useSelector } from "react-redux";
+
+type SystemLookupListProps = {
+  lookupType: string;
+  value: any;
+  onChangeCallBack: Function;
+  label: string;
+  disabled?: boolean;
+  required?: boolean;
+  errorMessage?: any;
+  sx?: any;
+};
+
+const SystemLookupCombobox: React.FC<SystemLookupListProps> = (props) => {
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const session = useSession();
+  const [options, setOptions] = useState<Array<any>>([]);
+  const { handleGetRequest } = useAxios();
+
+  const loadLookupOptions = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/dev/system/lookup",
+      showMask: true,
+      parameters: { lookupType: props.lookupType },
+      successCallBkFn: (response: any) => {
+        setOptions(response.data);
+      },
+      failureCallBkFn: () => {
+        setOptions([]);
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (props.lookupType) {
+      loadLookupOptions();
+    }
+  }, [props.lookupType, session.UserSession]);
+
+  return (
+    <ComboBox
+      {...props}
+      options={options}
+      displayField={
+        AppLayout.appDirection === "ltr" ? "lookupEnDisplay" : "lookupArDisplay"
+      }
+      valueField="lookupValue"
+    />
+  );
+};
+
+export default SystemLookupCombobox;

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField.tsx

@@ -1,9 +1,17 @@
 import { TextField, TextFieldProps } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 const TemplateTextField: React.FC<Omit<TextFieldProps, "outlined">> = (
   props
 ) => {
-  return <TextField {...props} slotProps={{ inputLabel: { shrink: true } }} />;
+  const { t } = useTranslation();
+  return (
+    <TextField
+      {...props}
+      slotProps={{ inputLabel: { shrink: true } }}
+      label={<>{props?.label ? t(props.label) : ""}</>}
+    />
+  );
 };
 
 export default TemplateTextField;

package/src/components/templates/DataEntryTemplates/TemplateDataForm/TemplateForm.tsx

@@ -16,17 +16,38 @@ import {
   TemplateFormProps,
 } from "../DataEntryTypes";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useTranslation } from "react-i18next";
 
 const TemplateForm: React.FC<TemplateFormProps> = (
   props: TemplateFormProps
 ) => {
+  const { t } = useTranslation();
   const fields = getAllFields(props.elements);
-  const [hiddenFields, setHiddenFields] = useState<string[]>([]);
+  const initiallyHiddenFields = [];
+  for (const field of fields) {
+    if (field?.hidden) {
+      initiallyHiddenFields.push(field.fieldName);
+    }
+  }
+  const [hiddenFields, setHiddenFields] = useState<string[]>(
+    initiallyHiddenFields
+  );
+  const initialValues: any = {};
+  for (const element of props.elements) {
+    if (
+      element?.type === "field" &&
+      element?.mode === "props" &&
+      element?.props?.defaultValue
+    ) {
+      initialValues[element.props.fieldName] = element.props.defaultValue;
+    }
+  }
   const [disabledFields, setDisabledFields] = useState<string[]>([]);
   const formSchema = z.object(constructValidationSchema(fields));
   type FormData = z.infer<typeof formSchema>;
   const formManager = useForm<FormData>({
     resolver: zodResolver(formSchema),
+    defaultValues: initialValues,
   });
   const formValues = formManager.watch();
   const pathParameters = useParams();
@@ -48,7 +69,23 @@ const TemplateForm: React.FC<TemplateFormProps> = (
       );
       if (retrievedRecord) {
         formManager.reset({ ...retrievedRecord });
+        if (props?.formLoadCallBk) {
+          props?.formLoadCallBk(formActions, formManager, retrievedRecord);
+        }
+        for (const field of fields) {
+          if (
+            field?.fieldType === "combobox" &&
+            retrievedRecord[field.fieldName]
+          ) {
+            formManager.setValue(
+              field.fieldName,
+              retrievedRecord[field.fieldName] + ""
+            );
+          }
+        }
       }
+    } else {
+      formManager.reset({});
     }
   };
 
@@ -118,10 +155,11 @@ const TemplateForm: React.FC<TemplateFormProps> = (
         }}
       >
         <Grid2 sx={{ width: "100%" }} container>
-          {props.elements.map((formElement: FormElementProps) => {
+          {props.elements.map((formElement: FormElementProps, index) => {
             if (formElement.type === "group") {
               return (
                 <FormElementGroup
+                  key={index}
                   {...formElement.props}
                   formManager={formManager}
                   formValues={formValues}
@@ -136,6 +174,7 @@ const TemplateForm: React.FC<TemplateFormProps> = (
             ) {
               return (
                 <FormElementField
+                  key={index}
                   fieldInfo={formElement.props}
                   formManager={formManager}
                   formValues={formValues}
@@ -150,6 +189,7 @@ const TemplateForm: React.FC<TemplateFormProps> = (
             ) {
               return (
                 <Grid2
+                  key={index}
                   size={
                     formElement?.props?.formProps?.fieldSize || {
                       lg: 3,
@@ -220,7 +260,7 @@ const TemplateForm: React.FC<TemplateFormProps> = (
             }
           )}
         >
-          {props?.saveButtonSpecs?.label || "save"}
+          {t(props?.saveButtonSpecs?.label || "SAVE_BTN_LABEL")}
         </Button>
         <Button
           variant={
@@ -243,10 +283,10 @@ const TemplateForm: React.FC<TemplateFormProps> = (
             if (props?.formCloseCallBk) {
               props.formCloseCallBk();
             }
-            formManager.reset({});
+            formManager.reset(initialValues);
           }}
         >
-          {props?.cancelButtonSpecs?.label || "cancel"}
+          {t(props?.cancelButtonSpecs?.label || "CANCEL_BTN_LABEL")}
         </Button>
       </Box>
     </>

package/src/components/templates/DataEntryTemplates/TemplateDataGrid/DataGridColumnsUtil.tsx

@@ -76,6 +76,7 @@ export const generateDateTimeColumn: any = (colDef: TemplateGridColDef) => {
 };
 
 type ComboBoxColumnProps = TemplateGridColDef & {
+  lookupType?: string;
   options: Array<any>;
   displayField: string;
   valueField: string;
@@ -113,9 +114,9 @@ export const generateComboColumn: (
         <ComboBox
           {...params}
           sx={{ width: "100%" }}
-          options={colDef.options}
-          valueField={colDef.valueField}
-          displayField={colDef.displayField}
+          options={params.colDef.options}
+          valueField={params.colDef.valueField}
+          displayField={params.colDef.displayField}
           onChangeCallBack={(v: any, selectedRecord: any) => {
             if (v === null) {
               params.api.setEditCellValue({
@@ -152,7 +153,7 @@ export const generateCheckBoxColumn: (
       if (value == null || value == undefined) {
         return null;
       } else {
-        return value + "";
+        return value;
       }
     },
     renderCell: (parameters: any) => {
@@ -172,13 +173,13 @@ export const generateCheckBoxColumn: (
       return (
         <CheckBox
           {...params}
-          checkedValue={colDef?.checkedValue || "true"}
-          unCheckedValue={colDef?.unCheckedValue || "false"}
+          checkedValue={colDef?.checkedValue || true}
+          unCheckedValue={colDef?.unCheckedValue || false}
           onChangeCallBack={(v: any) => {
             params.api.setEditCellValue({
               id: params.id,
               field: params.field,
-              value: v + "",
+              value: v,
             });
           }}
         />