@solidstarters/solid-core-ui 1.1.69 → 1.1.71

package/dist/components/core/model/CreateModel.tsx

@@ -0,0 +1,476 @@
+"use client"
+
+import { CancelButton } from "@/components/common/CancelButton";
+import { handleError } from "@/helpers/ToastContainer";
+import { useGetFieldDefaultMetaDataQuery } from "@/redux/api/fieldApi";
+import { useCreatemodelMutation, useDeletemodelMutation, useLazyGetModelsQuery, useUpdatemodelMutation } from "@/redux/api/modelApi";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
+import { usePathname, useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { TabPanel, TabView } from "primereact/tabview";
+import { Toast } from "primereact/toast";
+import qs from "qs";
+import { useEffect, useRef, useState } from "react";
+import FieldMetaData from "./FieldMetaData";
+import ModelMetaData from "./ModelMetaData";
+import { BackButton } from "@/components/common/BackButton";
+import { SolidFormStepper } from "@/components/common/SolidFormStepper";
+import { Dialog } from "primereact/dialog";
+import { Divider } from "primereact/divider";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
+import { SolidFormHeader } from "@/components/common/SolidFormHeader";
+
+interface ErrorResponseData {
+  message: string;
+  statusCode: number;
+  error: string;
+}
+
+const CreateModel = ({ data, params }: any) => {
+
+  const toast = useRef<Toast>(null);
+  const router = useRouter();
+  const pathname = usePathname();
+  const [deleteEntity, setDeleteEntity] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(data ? true : false);
+  const formikModelMetadataRef = useRef<any>();
+  const formikFieldsMetadataRef = useRef();
+
+  const [modelMetaData, setModelMetaData] = useState<any>();
+  const [fieldMetaData, setFieldMetaData] = useState<any>([]);
+
+  const { data: fieldDefaultMetaData, refetch } = useGetFieldDefaultMetaDataQuery(null);
+  const [allModelsNames, setAllModelsNames] = useState([]);
+
+  const [triggerGetModels, { data: allmodels, isLoading: isAllModelsLoaded, error: allModelsError }] =
+    useLazyGetModelsQuery();
+
+
+  const [
+    createModel,
+    { isLoading: isCreateModelLoading, isSuccess: isCreateModelSuccess, isError: isCreateModelError, error: createModelError, data: newModel },
+  ] = useCreatemodelMutation();
+
+  const [
+    updateModel,
+    { isLoading: isUpdatedModelUpdating, isSuccess: isUpdatedModelSuceess, isError: isUpdateModelError, error: updateModelError, data: updatedModel },
+  ] = useUpdatemodelMutation();
+  const [
+    deleteModel,
+    { isLoading: isModelDeleted, isSuccess: isDeleteModelSuceess, isError: isDeleteModelError, error: deleteModelError, data: DeletedModel },
+  ] = useDeletemodelMutation();
+
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+  const [tabErrors, setTabErrors] = useState<{ [key: number]: boolean }>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  const nextTab = () => {
+    setActiveIndex(activeIndex + 1);
+  };
+
+  useEffect(() => {
+    if (data) {
+      const modelData = {
+        ...data, moduleId: data?.module?.id,parentModelId: data?.parentModel
+      }
+
+      setIsLoadingData(false);
+      setModelMetaData(modelData);
+      const fieldData = data.fields.map((f: any) => {
+        const fieldCopy = { ...f }; // Create a shallow copy of the field object
+        fieldCopy.identifier = f.id; // Add the identifier property
+        if (fieldCopy.type == "mediaSingle" || fieldCopy.type == "mediaMultiple") {
+          fieldCopy.mediaMaxSizeKb = f.mediaMaxSizeKb / 1024; // Add the identifier property
+
+        }
+        return fieldCopy;
+      })
+      setFieldMetaData(fieldData.sort((a: any, b: any) => b.id - a.id))
+    }
+  }, [data])
+
+
+  useEffect(() => {
+    const queryData = {
+      offset: 0,
+      limit: 1000,
+    };
+    const queryString = qs.stringify(queryData, {
+      encodeValuesOnly: true
+    });
+    triggerGetModels(queryString);
+  }, [isDeleteModelSuceess]);
+
+  useEffect(() => {
+    if (allmodels) {
+      if (data) {
+        setAllModelsNames(allmodels?.records.filter((i: any) => i.id !== data.id).map((e: any) => e.singularName));
+
+      } else {
+
+        setAllModelsNames(allmodels?.records.map((e: any) => e.singularName));
+      }
+    }
+  }, [allmodels, data]);
+
+
+  const handleSubmit = async () => {
+
+    if (formikModelMetadataRef.current) {
+      await formikModelMetadataRef.current.submitForm(); // Call the handleSubmit function from the formik instance
+
+      // @ts-ignore
+      // formikModelMetadataRef.current.validateForm().then(() => {
+      //   if (Object.keys(formikModelMetadataRef?.current?.errors).length === 0) {
+
+      //     if (fieldMetaData.length > 0) {
+      //       handleFormSubmit();
+      //     } else {
+      //       if (activeIndex === 0) {
+      //         nextTab();
+      //         // showError({ error: "Please add Atleast one field" });
+      //         handleError(["Please add Atleast one field"])
+      //       } else {
+      //         handleError(["Please add Atleast one field"])
+      //         // showError({ error: "Please add Atleast one field" });
+      //       }
+      //     }
+      //   }
+      // });
+
+      formikModelMetadataRef.current.validateForm().then((errors: any) => {
+        let firstErrorTab: number | undefined;
+        if (Object.keys(errors).length > 0) {
+          setFormErrors(errors);
+          const errorMessages = Object.values(errors);
+          errorMessages.forEach((error) => {
+            handleError([error]); // Call handleError for each error separately
+          });
+
+          firstErrorTab = 0; // Model Metadata tab has errors
+        } else {
+          setFormErrors({});
+        }
+
+        if (fieldMetaData.length === 0) {
+          handleError(["Please add at least one field"]);
+          firstErrorTab = firstErrorTab ?? 1; // If no prior error, set to Field tab
+        }
+
+        if (firstErrorTab !== undefined) {
+          setTabErrors({ [firstErrorTab]: true }); // Set error only on the first tab with an issue
+          setActiveIndex(firstErrorTab); // Switch to the tab with an error
+        } else {
+          handleFormSubmit();
+        }
+      });
+    }
+  };
+
+
+  const handleFormSubmit = async () => {
+
+    if (data) {
+      const fieldData = fieldMetaData.map(({ createdAt, updatedAt, deletedAt, mediaStorageProvider, identifier, ...rest }: any) => {
+        if (rest.mediaMaxSizeKb) {
+          rest.mediaMaxSizeKb = rest.mediaMaxSizeKb ? rest.mediaMaxSizeKb * 1024 : 0
+        }
+        return rest
+      });
+      const { module, parentModel,createdAt, updatedAt, id, deletedAt, ...modelData } = modelMetaData;
+      const updateData = { ...modelData, displayName: modelData.displayName.trim(), fields: fieldData };
+      updateModel({ id: data.id, data: updateData });
+    }
+    else {
+      if (modelMetaData) {
+        const fieldData = fieldMetaData.map(({ mediaStorageProvider, identifier, ...rest }: any) => {
+          if (rest.mediaMaxSizeKb) {
+            rest.mediaMaxSizeKb = rest.mediaMaxSizeKb ? rest.mediaMaxSizeKb * 1024 : 0
+          }
+          return rest
+        });
+        const { module, parentModel,...modelData } = modelMetaData;
+        const data = { ...modelData, displayName: modelData.displayName.trim(), fields: fieldData };
+        createModel(data);
+        if (isCreateModelSuccess) {
+
+        }
+      }
+    }
+  };
+
+  const deleteModelFunction = async () => {
+    deleteModel(data?.id);
+  }
+
+  useEffect(() => {
+    if (isCreateModelSuccess == true || isUpdatedModelSuceess == true || isDeleteModelSuceess == true) {
+      // router.push(`/admin/app-builder/model/all`);
+      router.back();
+    }
+  }, [isCreateModelSuccess, isUpdatedModelSuceess, isDeleteModelSuceess])
+
+  const showError = async (errors: any) => {
+    const errorMessages = Object.values(errors);
+
+    if (errorMessages.length > 0) {
+      toast?.current?.show({
+        severity: "error",
+        summary: "Can you send me the report?",
+        // sticky: true,
+        life: 3000,
+        //@ts-ignore
+        content: (props) => (
+          <div
+            className="flex flex-column align-items-left"
+            style={{ flex: "1" }}
+          >
+            {errorMessages.map((m, index) => (
+              <div className="flex align-items-center gap-2" key={index}>
+                <span className="font-bold text-900">{String(m)}</span>
+              </div>
+            ))}
+          </div>
+        ),
+      });
+    }
+  };
+
+  const isFetchBaseQueryErrorWithErrorResponse = (error: any): error is FetchBaseQueryError & { data: ErrorResponseData } => {
+    return error && typeof error === 'object' && 'data' in error && 'message' in error.data;
+  }
+
+  // const handleError = (errorToast: any) => {
+  //   let errorMessage: any = ['An error occurred'];
+
+  //   if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
+  //     errorMessage = errorToast.data.message;
+  //   } else {
+  //     errorMessage = ['Something went wrong'];
+  //   }
+
+  //   toast?.current?.show({
+  //     severity: 'error',
+  //     summary: 'Error',
+  //     detail: errorMessage,
+  //     life: 3000,
+  //     //@ts-ignore
+  //     content: (props) => (
+  //       <div className="flex flex-column align-items-left" style={{ flex: "1" }}>
+  //         {Array.isArray(errorMessage) ? (
+  //           errorMessage.map((message, index) => (
+  //             <div className="flex align-items-center gap-2" key={index}>
+  //               <span className="font-bold text-900">{message.trim()}</span>
+  //             </div>
+  //           ))
+  //         ) : (
+  //           <div className="flex align-items-center gap-2">
+  //             <span className="font-bold text-900">{errorMessage?.trim()}</span>
+  //           </div>
+  //         )}
+  //       </div>
+  //     ),
+  //   });
+  // };
+
+
+  // Error Handler 
+  // Added useEffect to remove active tab class border color if error is there.
+  useEffect(() => {
+    const tabHeaders = document.querySelectorAll(".p-tabview-nav li");
+    if (tabHeaders.length > 0) {
+      if (tabErrors[0]) {
+        tabHeaders[0].classList.remove("p-highlight");
+      }
+      if (tabErrors[1]) {
+        tabHeaders[1].classList.remove("p-highlight");
+      }
+    }
+  }, [tabErrors]);
+
+
+  useEffect(() => {
+    const errors = [
+      { isError: isCreateModelError, error: createModelError },
+      { isError: isDeleteModelError, error: deleteModelError },
+      { isError: isUpdateModelError, error: updateModelError },
+    ];
+    if (errors.length > 0) {
+      // Handle any error
+      errors.forEach(({ isError, error }) => {
+        if (isError && error) {
+          handleError(error); // Call the centralized error handler
+        }
+      });
+    }
+
+  }, [isCreateModelError, isDeleteModelError, isUpdateModelError])
+  const op = useRef(null);
+
+  const formActionDropdown = () => {
+    return (
+      <div>
+        <Button
+          outlined
+          severity="secondary"
+          type="button"
+          icon={'pi pi-cog'}
+          size="small"
+          className="surface-card p-0"
+          style={{
+            height: 33.06,
+            width: 33.06
+          }}
+          onClick={(e) =>
+            // @ts-ignore 
+            op.current.toggle(e)
+          }
+        />
+        <OverlayPanel ref={op} className="solid-custom-overlay">
+          <div className="flex flex-column gap-1 p-1">
+            {/* <Button
+              text
+              type="button"
+              className="w-8rem text-left gap-2 text-color"
+              label="Duplicate"
+              size="small"
+              iconPos="left"
+              icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M6 11.9997C5.63333 11.9997 5.31944 11.8691 5.05833 11.608C4.79722 11.3469 4.66667 11.033 4.66667 10.6663V2.66634C4.66667 2.29967 4.79722 1.98579 5.05833 1.72467C5.31944 1.46356 5.63333 1.33301 6 1.33301H12C12.3667 1.33301 12.6806 1.46356 12.9417 1.72467C13.2028 1.98579 13.3333 2.29967 13.3333 2.66634V10.6663C13.3333 11.033 13.2028 11.3469 12.9417 11.608C12.6806 11.8691 12.3667 11.9997 12 11.9997H6ZM6 10.6663H12V2.66634H6V10.6663ZM3.33333 14.6663C2.96667 14.6663 2.65278 14.5358 2.39167 14.2747C2.13056 14.0136 2 13.6997 2 13.333V3.99967H3.33333V13.333H10.6667V14.6663H3.33333Z" fill="black" fill-opacity="0.88" />
+              </svg>}
+            /> */}
+            <Button
+              text
+              type="button"
+              className="w-8rem text-left gap-2"
+              label="Delete"
+              size="small"
+              iconPos="left"
+              severity="danger"
+              icon={'pi pi-trash'}
+              onClick={() => setDeleteEntity(true)}
+            />
+          </div>
+        </OverlayPanel>
+      </div>
+    )
+  }
+
+  const [isDirty, setIsDirty] = useState(false);
+
+
+  return (
+    <div className="solid-form-wrapper">
+      <Toast ref={toast} />
+      <div style={{ width: '77.5%', borderRight: '1px solid var(--primary-light-color' }}>
+        <div className="solid-form-header">
+          {params.id === "new" ?
+            <>
+              <div className="flex align-items-center gap-3">
+                <BackButton />
+                <div className="form-wrapper-title">Create Model</div>
+              </div>
+              <div className="gap-3 flex">
+                {isDirty &&
+                  <Button label="Save" size="small" onClick={handleSubmit} type="submit" />
+                }
+                <CancelButton />
+              </div>
+            </>
+            :
+            <>
+              <div className="flex align-items-center gap-3">
+                <BackButton />
+                <div className="form-wrapper-title">Edit Model</div>
+              </div>
+              <div className="gap-3 flex">
+                {data?.isSystem !== true &&
+                  <>
+                    <div>
+                      {isDirty &&
+                        <Button label="Save" size="small" type="submit" onClick={handleSubmit} />
+                      }
+                    </div>
+                    {/* <div>
+                      <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => setDeleteEntity(true)} />
+                    </div> */}
+                  </>
+                }
+                <CancelButton />
+                {formActionDropdown()}
+              </div>
+            </>
+          }
+        </div>
+        <SolidFormHeader />
+        {/* <div className="solid-form-stepper">
+          <SolidFormStepper />
+        </div> */}
+        <div className="p-4 solid-form-content">
+          <TabView
+            activeIndex={activeIndex}
+            onTabChange={(e) => {
+              if (activeIndex == 0) {
+                formikModelMetadataRef.current.handleSubmit();
+                setActiveIndex(e.index)
+
+              }
+              if (activeIndex == 1) {
+                setActiveIndex(e.index)
+              }
+
+            }}
+            panelContainerClassName="px-0"
+            className="relative"
+          >
+            <TabPanel header="Model"
+              headerClassName={tabErrors[0] ? "tab-error" : ""}>
+              <ModelMetaData
+                modelMetaData={modelMetaData}
+                setModelMetaData={setModelMetaData}
+                allModelsNames={allModelsNames}
+                deleteModelFunction={deleteModelFunction}
+                nextTab={nextTab}
+                formikModelMetadataRef={formikModelMetadataRef}
+                params={params}
+                formErrors={formErrors}
+                setIsDirty={setIsDirty}
+              ></ModelMetaData>
+            </TabPanel>
+            <TabPanel header="Fields"
+              headerClassName={tabErrors[1] ? "tab-error" : ""}>
+              <FieldMetaData
+                modelMetaData={modelMetaData}
+                fieldMetaData={fieldMetaData}
+                setFieldMetaData={setFieldMetaData}
+                deleteModelFunction={deleteModelFunction}
+                nextTab={nextTab}
+                formikFieldsMetadataRef={formikFieldsMetadataRef}
+                params={params}
+                setIsDirty={setIsDirty}
+              ></FieldMetaData>
+            </TabPanel>
+          </TabView>
+        </div>
+      </div>
+      <div style={{ width: '22.5%' }}>
+      </div>
+      <Dialog header="Delete Field" headerClassName="py-2" contentClassName="px-0 pb-0" visible={deleteEntity} style={{ width: '20vw' }} onHide={() => { if (!deleteEntity) return; setDeleteEntity(false); }}>
+        <Divider className="m-0" />
+        <div className="p-4">
+          <p className="m-0 solid-primary-title" style={{ fontSize: 16 }}>
+            Are you sure you want to delete this Field ?
+          </p>
+          <p className="" style={{ color: 'var{--solid-grey-500}' }}>{modelMetaData?.singularName}</p>
+          <div className="flex align-items-center gap-2 mt-3">
+            <Button label="Delete" size="small" onClick={deleteModelFunction} />
+            <Button label="Cancel" size="small" onClick={() => setDeleteEntity(false)} outlined />
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+export default CreateModel;

package/dist/components/core/model/FieldMetaData.tsx

@@ -0,0 +1,193 @@
+'use client';
+import { usePathname } from "next/navigation";
+import { Button } from "primereact/button";
+import { Column } from "primereact/column";
+import { DataTable } from "primereact/datatable";
+import { Dialog } from "primereact/dialog";
+import { useMountEffect } from "primereact/hooks";
+import { Messages } from "primereact/messages";
+import { Toast } from "primereact/toast";
+import { useRef, useState } from "react";
+import FieldMetaDataForm from "./FieldMetaDataForm";
+
+
+const FieldMetaData = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldMetaData, deleteModelFunction, nextTab, formikFieldsMetadataRef, params }: any) => {
+  const pathname = usePathname();
+  const msgs = useRef<Messages>(null);
+
+  useMountEffect(() => {
+    if (msgs.current) {
+      msgs.current.clear();
+      msgs.current.show({
+        id: '1',
+        sticky: true,
+        severity: 'info',
+        detail: `Please select Module and Datasource from the models Tab.`,
+        closable: false,
+      });
+    }
+  });
+  const toast = useRef<Toast>(null);
+  const [visiblePopup, setVisiblePopup] = useState(false);
+  const [isRequiredPopUp, setIsRequiredPopUp] = useState(false);
+  const [currentPopup, setCurrentPopup] = useState();
+  const [selectedFieldMetaData, setSelectedFieldMetaData] = useState(null);
+  const onRowSelect = (event: any) => {
+    setVisiblePopup(true);
+
+  };
+
+  // Template for the pencil icon column
+  const editTemplate = (rowData: any) => {
+    return (
+      <>
+
+        {rowData.isSystem !== true &&
+          <Button
+            icon="pi pi-pencil"
+            text
+            onClick={() => {
+              setSelectedFieldMetaData(rowData);
+              setVisiblePopup(true);
+            }}
+            size="small"
+          />
+        }
+      </>
+    )
+  };
+
+  // Function to delete a row
+  const deleteRow = (rowData: any) => {
+    setFieldMetaData((prevData: any) => {
+      const updatedData = prevData.filter((item: any) => item.name !== rowData.name);
+      setIsDirty(true); // Ensure dirty state is updated immediately
+      return updatedData;
+    });
+  };
+
+  // Template for the trash (delete) icon column
+  const deleteTemplate = (rowData: any) => {
+    return (
+      <>
+        {(pathname.includes('create') || rowData.isSystem !== true) &&
+          <Button icon="pi pi-trash" text severity="danger" onClick={() => deleteRow(rowData)} size="small" />
+
+        }
+      </>
+    )
+  };
+
+  const showToaster = async (message: any, severity: any) => {
+    const errorMessages = Object.values(message);
+    if (errorMessages.length > 0) {
+      toast?.current?.show({
+        severity: severity,
+        summary: "Can you send me the report?",
+        life: 3000,
+        //@ts-ignore
+        content: (props) => (
+          <div
+            className="flex flex-column align-items-left"
+            style={{ flex: "1" }}
+          >
+            {errorMessages.map((m, index) => (
+              <div className="flex align-items-center gap-2" key={index}>
+                <span className="font-bold text-900">{String(m)}</span>
+              </div>
+            ))}
+          </div>
+        ),
+      });
+    }
+  };
+
+
+
+  return (
+    <>
+
+      {!modelMetaData.moduleId || !modelMetaData.dataSource ?
+        <div className="card flex justify-content-center">
+          <Messages ref={msgs} />
+        </div>
+        :
+        <>
+          <div className="absolute" style={{top: -3, right: 0}}>
+            {/* <h3>All Fields</h3> */}
+            {modelMetaData.isSystem !== true &&
+              <Button
+                label="Add"
+                // icon="pi pi-external-link"
+                onClick={() => {
+                  if (!modelMetaData?.dataSourceType) {
+                    toast.current?.show({
+                      severity: 'error',
+                      summary: 'Error',
+                      detail: 'Orm Type is required!',
+                      life: 3000,
+                    });
+                  } else {
+                    setSelectedFieldMetaData(null);
+                    setVisiblePopup(true)
+                  }
+                }} size="small"
+              />
+            }
+          </div>
+          <DataTable value={fieldMetaData.filter((item: any) => item.isMarkedForRemoval !== true)} dataKey="id"
+            tableStyle={{ minWidth: '50rem' }} size="small">
+            <Column field="displayName" header="Display Name" headerClassName="table-header-fs"></Column>
+            <Column field="name" header="Name" headerClassName="table-header-fs"></Column>
+            <Column field="type" header="Type" headerClassName="table-header-fs"></Column>
+
+            {modelMetaData.isSystem !== true &&
+              <Column body={editTemplate} header="Edit" headerClassName="table-header-fs" style={{ width: '10%' }} />
+            }
+            {modelMetaData.isSystem !== true &&
+              <Column body={deleteTemplate} header="Delete" headerClassName="table-header-fs" style={{ width: '10%' }} />
+            }
+          </DataTable>
+          <Dialog
+            header=""
+            visible={visiblePopup}
+            style={{ width: "40vw" }}
+            className="solid-dialog"
+            onHide={() => {
+              if (!visiblePopup) return;
+
+              setVisiblePopup(false);
+            }}
+            showHeader={false}
+          >
+            <FieldMetaDataForm setIsDirty={setIsDirty} modelMetaData={modelMetaData} fieldMetaData={selectedFieldMetaData} allFields={fieldMetaData} setFieldMetaData={setFieldMetaData} deleteModelFunction={deleteModelFunction} setVisiblePopup={setVisiblePopup} formikFieldsMetadataRef={formikFieldsMetadataRef} params={params} setIsRequiredPopUp={setIsRequiredPopUp} showToaster={showToaster}></FieldMetaDataForm>
+          </Dialog>
+          <Dialog
+            visible={isRequiredPopUp}
+            header={(
+              <div className="flex align-items-center">
+                <i className="pi pi-exclamation-triangle text-yellow-500 text-xl mr-2"></i>
+                <span>Warning</span>
+              </div>
+            )}
+            headerClassName="text-center"
+            modal
+            footer={() => (
+              <div className="flex justify-content-center">
+                <Button label="Ok" className='small-button' onClick={() => setIsRequiredPopUp(false)} />
+              </div>
+            )}
+            onHide={() => setIsRequiredPopUp(false)}
+            className="solid-dialog"
+          >
+            <p>If there is data against this model this operation might not work and manual intervention will be required</p>
+          </Dialog>
+        </>
+      }
+    </>
+
+
+
+  );
+};
+export default FieldMetaData;