admin_lsac 1.2.8 → 1.2.9

package/src/components/GenericForm.tsx

@@ -1,304 +1,308 @@
-import {
-  Box,
-  Button,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  Select,
-} from "@chakra-ui/react";
-import { Field, Form, Formik, FieldArray, getIn } from "formik";
-import {
-  Action,
-  FormField,
-  SimpleField,
-  DropdownField,
-  RowAction,
-} from "../schema/schema";
-import * as Yup from "yup";
-import Swal from "sweetalert2";
-import { useEffect, useState } from "react";
-
-interface GenericFormProps {
-  action: Action | RowAction;
-  onClose?: () => void;
-  rowId?: number;
-}
-
-function parseValidation(fields: FormField[] | undefined) {
-  if (!fields) {
-    return {};
-  }
-
-  return fields.reduce((acc: any, field) => {
-    if (
-      field.type !== "dropdown" &&
-      field.type !== "object" &&
-      field.type !== "array"
-    ) {
-      acc[field.name] = field.validationSchema;
-    } else if (field.type === "array") {
-      if (field.element.type === "dropdown") {
-        acc[field.name] = Yup.array().of(Yup.string().required());
-      } else if (field.element.type === "object") {
-        acc[field.name] = Yup.array().of(
-          Yup.object(parseValidation(field.element.fields))
-        );
-      } else {
-        acc[field.name] = Yup.array().of(field.element.validationSchema);
-      }
-    } else if (field.type === "object") {
-      acc[field.name] = Yup.object(parseValidation(field.fields));
-    }
-    if (field.type === "dropdown") {
-      acc[field.name] = Yup.string().required();
-    }
-    return acc;
-  }, {});
-}
-
-function generateSingleField(
-  formfield: SimpleField | DropdownField,
-  fieldName: string,
-  key: any
-) {
-  return (
-    <Field name={fieldName} key={key}>
-      {({ field, form }: any) => (
-        <FormControl
-          isInvalid={
-            getIn(form.touched, fieldName) && getIn(form.errors, fieldName)
-          }
-        >
-          <FormLabel marginTop={2}>{formfield.label}</FormLabel>
-
-          {formfield.type === "string" || formfield.type === "number" ? (
-            <Input
-              {...field}
-              type={formfield.type === "number" ? "number" : "text"}
-              placeholder=""
-            />
-          ) : formfield.type === "file" ? (
-            <Input
-              type="file"
-              name={fieldName}
-              onChange={(event) => {
-                if (event.currentTarget.files != null) {
-                  form.setFieldValue(fieldName, event.currentTarget.files[0]);
-                }
-              }}
-            />
-          ) : (
-            <Select {...field} defaultValue="">
-              <option disabled={true} value="">
-                Select an option!
-              </option>
-              {(formfield as DropdownField).options?.map((option, key) => (
-                <option key={key} value={`${option.value}`}>
-                  {option.display}
-                </option>
-              ))}
-            </Select>
-          )}
-
-          <FormErrorMessage>{getIn(form.errors, fieldName)}</FormErrorMessage>
-        </FormControl>
-      )}
-    </Field>
-  );
-}
-
-function parseFields(
-  fields: FormField[] | undefined,
-  previous?: string | undefined
-) {
-  if (!fields) {
-    return [];
-  }
-
-  const computedFields = fields.map((formfield, key) => {
-    let fieldName: string =
-      previous !== undefined ? previous + "." + formfield.name : formfield.name;
-
-    if (formfield.type === "object") {
-      const objectFields = parseFields(formfield.fields, fieldName);
-      return <FormControl key={fieldName}>{objectFields}</FormControl>;
-    } else if (formfield.type === "array") {
-      return (
-        <FieldArray name={fieldName}>
-          {({ remove, push, form }) => (
-            <div>
-              <FormLabel marginTop={2}>{formfield.label}</FormLabel>
-              {getIn(form.values, fieldName).length > 0 &&
-                getIn(form.values, fieldName).map(
-                  (element: any, index: number) => (
-                    <Box paddingLeft={10}>
-                      <h4>
-                        <b>{`${fieldName}.${index}`}</b>
-                      </h4>
-                      <Box paddingLeft={10}>
-                        {formfield.element.type === "object"
-                          ? parseFields(
-                              formfield.element.fields,
-                              `${fieldName}.${index}`
-                            )
-                          : generateSingleField(
-                              formfield.element,
-                              `${fieldName}.${index}`,
-                              key
-                            )}
-                      </Box>
-                      <Button
-                        type="button"
-                        colorScheme="red"
-                        marginY={2}
-                        onClick={() => remove(index)}
-                      >
-                        Remove {`${fieldName}.${index}`}
-                      </Button>
-                    </Box>
-                  )
-                )}
-
-              <Button
-                type="button"
-                marginY={2}
-                colorScheme="blue"
-                onClick={() => {
-                  let value = undefined;
-
-                  if (formfield.element.type === "object") {
-                    value = getCustomInitialValues(formfield.element.fields);
-                  } else {
-                    value = getCustomInitialValues([formfield.element])[0];
-                  }
-
-                  push(value);
-                }}
-              >
-                Add {fieldName}
-              </Button>
-            </div>
-          )}
-        </FieldArray>
-      );
-    } else {
-      return generateSingleField(formfield, fieldName, key);
-    }
-  });
-
-  return computedFields;
-}
-
-function getCustomInitialValues(fields: FormField[] | undefined) {
-  let obj: any = {};
-
-  if (!fields) {
-    return obj;
-  }
-
-  fields.forEach((field) => {
-    if (field.type === "array") obj[field.name] = [];
-    else if (field.type === "object")
-      obj[field.name] = getCustomInitialValues(field.fields);
-    else if (field.type === "string") obj[field.name] = "";
-    else if (field.type === "number") obj[field.name] = 0;
-    else obj[field.name] = null;
-  });
-
-  return obj;
-}
-
-async function getInitialValues(action: Action | RowAction, rowId: number | undefined) {
-  let obj: any = {};
-  if ((action as RowAction).initialise) {
-    obj = await (action as RowAction).initialise(rowId);
-  }
-  const customInitialValues = getCustomInitialValues(action.fields);
-  return Object.assign({}, customInitialValues, obj);
-}
-
-async function setOptions(fields: FormField[] | undefined) {
-  if (!fields) {
-    return;
-  }
-
-  const promises = fields.map(async (field) => {
-    if (field.type === "dropdown") field.options = await field.getOptions();
-    else if (field.type === "array") await setOptions([field.element]);
-    else if (field.type === "object") await setOptions(field.fields);
-  });
-
-  await Promise.all(promises);
-}
-
-export function GenericForm({ action, onClose, rowId }: GenericFormProps) {
-  const [formFields, setFormFields] = useState<any[]>(
-    parseFields(action.fields)
-  );
-  const [initialValues, setInitialValues] = useState<any>(getCustomInitialValues(action.fields));
-  const [validationSchema, setValidationSchema] = useState<any>(parseValidation(action.fields));
-
-  useEffect(() => {
-    setOptions(action.fields).then(() => {
-      setFormFields(parseFields(action.fields));
-    });
-  }, []);
-
-  const handleFormReset = async () => {
-    const newInitialValues = await getInitialValues(action, rowId);
-    console.log(newInitialValues)
-    setInitialValues(newInitialValues);
-  };
-
-  if (!action.fields) return <></>;
-  return (
-    <>
-      <Formik
-        enableReinitialize={true}
-        initialValues={initialValues}
-        validationSchema={Yup.object(validationSchema)}
-        onReset={handleFormReset}
-        onSubmit={async (values) => {
-          try {
-            let res;
-            if (rowId) res = await action.onSubmit(values, rowId);
-            else res = await action.onSubmit(values);
-
-            if (onClose) onClose();
-
-            Swal.fire("Ok");
-          } catch (e: any) {
-            if (onClose) onClose();
-            const err = e.request.response;
-
-            Swal.fire({
-              text: "Error: " + err,
-            });
-          }
-        }}
-      >
-        {({ isSubmitting }) => (
-          <Form>
-            {formFields}
-            <Button
-              mt={4}
-              colorScheme="teal"
-              isLoading={isSubmitting}
-              type="submit"
-            >
-              Submit
-            </Button>
-            <Button
-              mt={4}
-              colorScheme="teal"
-              type="reset"
-            >
-                Initialise Form
-            </Button>
-          </Form>
-        )}
-      </Formik>
-    </>
-  );
-}
+import {
+  Box,
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+} from "@chakra-ui/react";
+import { Field, Form, Formik, FieldArray, getIn } from "formik";
+import {
+  Action,
+  FormField,
+  SimpleField,
+  DropdownField,
+  RowAction,
+} from "../schema/schema";
+import * as Yup from "yup";
+import Swal from "sweetalert2";
+import { useEffect, useState } from "react";
+
+interface RowActionWithInitialise extends RowAction {
+  initialise: (obj: any) => any;
+}
+
+interface GenericFormProps {
+  action: Action | RowAction;
+  onClose?: () => void;
+  rowId?: number;
+}
+
+function parseValidation(fields: FormField[] | undefined) {
+  if (!fields) {
+    return {};
+  }
+
+  return fields.reduce((acc: any, field) => {
+    if (
+      field.type !== "dropdown" &&
+      field.type !== "object" &&
+      field.type !== "array"
+    ) {
+      acc[field.name] = field.validationSchema;
+    } else if (field.type === "array") {
+      if (field.element.type === "dropdown") {
+        acc[field.name] = Yup.array().of(Yup.string().required());
+      } else if (field.element.type === "object") {
+        acc[field.name] = Yup.array().of(
+          Yup.object(parseValidation(field.element.fields))
+        );
+      } else {
+        acc[field.name] = Yup.array().of(field.element.validationSchema);
+      }
+    } else if (field.type === "object") {
+      acc[field.name] = Yup.object(parseValidation(field.fields));
+    }
+    if (field.type === "dropdown") {
+      acc[field.name] = Yup.string().required();
+    }
+    return acc;
+  }, {});
+}
+
+function generateSingleField(
+  formfield: SimpleField | DropdownField,
+  fieldName: string,
+  key: any
+) {
+  return (
+    <Field name={fieldName} key={key}>
+      {({ field, form }: any) => (
+        <FormControl
+          isInvalid={
+            getIn(form.touched, fieldName) && getIn(form.errors, fieldName)
+          }
+        >
+          <FormLabel marginTop={2}>{formfield.label}</FormLabel>
+
+          {formfield.type === "string" || formfield.type === "number" ? (
+            <Input
+              {...field}
+              type={formfield.type === "number" ? "number" : "text"}
+              placeholder=""
+            />
+          ) : formfield.type === "file" ? (
+            <Input
+              type="file"
+              name={fieldName}
+              onChange={(event) => {
+                if (event.currentTarget.files != null) {
+                  form.setFieldValue(fieldName, event.currentTarget.files[0]);
+                }
+              }}
+            />
+          ) : (
+            <Select {...field} defaultValue="">
+              <option disabled={true} value="">
+                Select an option!
+              </option>
+              {(formfield as DropdownField).options?.map((option, key) => (
+                <option key={key} value={`${option.value}`}>
+                  {option.display}
+                </option>
+              ))}
+            </Select>
+          )}
+
+          <FormErrorMessage>{getIn(form.errors, fieldName)}</FormErrorMessage>
+        </FormControl>
+      )}
+    </Field>
+  );
+}
+
+function parseFields(
+  fields: FormField[] | undefined,
+  previous?: string | undefined
+) {
+  if (!fields) {
+    return [];
+  }
+
+  const computedFields = fields.map((formfield, key) => {
+    let fieldName: string =
+      previous !== undefined ? previous + "." + formfield.name : formfield.name;
+
+    if (formfield.type === "object") {
+      const objectFields = parseFields(formfield.fields, fieldName);
+      return <FormControl key={fieldName}>{objectFields}</FormControl>;
+    } else if (formfield.type === "array") {
+      return (
+        <FieldArray name={fieldName}>
+          {({ remove, push, form }) => (
+            <div>
+              <FormLabel marginTop={2}>{formfield.label}</FormLabel>
+              {getIn(form.values, fieldName).length > 0 &&
+                getIn(form.values, fieldName).map(
+                  (element: any, index: number) => (
+                    <Box paddingLeft={10}>
+                      <h4>
+                        <b>{`${fieldName}.${index}`}</b>
+                      </h4>
+                      <Box paddingLeft={10}>
+                        {formfield.element.type === "object"
+                          ? parseFields(
+                              formfield.element.fields,
+                              `${fieldName}.${index}`
+                            )
+                          : generateSingleField(
+                              formfield.element,
+                              `${fieldName}.${index}`,
+                              key
+                            )}
+                      </Box>
+                      <Button
+                        type="button"
+                        colorScheme="red"
+                        marginY={2}
+                        onClick={() => remove(index)}
+                      >
+                        Remove {`${fieldName}.${index}`}
+                      </Button>
+                    </Box>
+                  )
+                )}
+
+              <Button
+                type="button"
+                marginY={2}
+                colorScheme="blue"
+                onClick={() => {
+                  let value = undefined;
+
+                  if (formfield.element.type === "object") {
+                    value = getCustomInitialValues(formfield.element.fields);
+                  } else {
+                    value = getCustomInitialValues([formfield.element])[0];
+                  }
+
+                  push(value);
+                }}
+              >
+                Add {fieldName}
+              </Button>
+            </div>
+          )}
+        </FieldArray>
+      );
+    } else {
+      return generateSingleField(formfield, fieldName, key);
+    }
+  });
+
+  return computedFields;
+}
+
+function getCustomInitialValues(fields: FormField[] | undefined) {
+  let obj: any = {};
+
+  if (!fields) {
+    return obj;
+  }
+
+  fields.forEach((field) => {
+    if (field.type === "array") obj[field.name] = [];
+    else if (field.type === "object")
+      obj[field.name] = getCustomInitialValues(field.fields);
+    else if (field.type === "string") obj[field.name] = "";
+    else if (field.type === "number") obj[field.name] = 0;
+    else obj[field.name] = null;
+  });
+
+  return obj;
+}
+
+async function getInitialValues(action: Action | RowAction, rowId: number | undefined) {
+  let obj: any = {};
+  if ((action as RowAction).initialise) {
+    obj = await (action as RowActionWithInitialise).initialise(rowId);
+  }
+  const customInitialValues = getCustomInitialValues(action.fields);
+  return Object.assign({}, customInitialValues, obj);
+}
+
+async function setOptions(fields: FormField[] | undefined) {
+  if (!fields) {
+    return;
+  }
+
+  const promises = fields.map(async (field) => {
+    if (field.type === "dropdown") field.options = await field.getOptions();
+    else if (field.type === "array") await setOptions([field.element]);
+    else if (field.type === "object") await setOptions(field.fields);
+  });
+
+  await Promise.all(promises);
+}
+
+export function GenericForm({ action, onClose, rowId }: GenericFormProps) {
+  const [formFields, setFormFields] = useState<any[]>(
+    parseFields(action.fields)
+  );
+  const [initialValues, setInitialValues] = useState<any>(getCustomInitialValues(action.fields));
+  const [validationSchema, setValidationSchema] = useState<any>(parseValidation(action.fields));
+
+  useEffect(() => {
+    setOptions(action.fields).then(() => {
+      setFormFields(parseFields(action.fields));
+    });
+  }, []);
+
+  const handleFormReset = async () => {
+    const newInitialValues = await getInitialValues(action, rowId);
+    console.log(newInitialValues)
+    setInitialValues(newInitialValues);
+  };
+
+  if (!action.fields) return <></>;
+  return (
+    <>
+      <Formik
+        enableReinitialize={true}
+        initialValues={initialValues}
+        validationSchema={Yup.object(validationSchema)}
+        onReset={handleFormReset}
+        onSubmit={async (values) => {
+          try {
+            let res;
+            if (rowId) res = await action.onSubmit(values, rowId);
+            else res = await action.onSubmit(values);
+
+            if (onClose) onClose();
+
+            Swal.fire("Ok");
+          } catch (e: any) {
+            if (onClose) onClose();
+            const err = e.request.response;
+
+            Swal.fire({
+              text: "Error: " + err,
+            });
+          }
+        }}
+      >
+        {({ isSubmitting }) => (
+          <Form>
+            {formFields}
+            <Button
+              mt={4}
+              colorScheme="teal"
+              isLoading={isSubmitting}
+              type="submit"
+            >
+              Submit
+            </Button>
+            <Button
+              mt={4}
+              colorScheme="teal"
+              type="reset"
+            >
+                Initialise Form
+            </Button>
+          </Form>
+        )}
+      </Formik>
+    </>
+  );
+}