@solidstarters/solid-core-ui 1.1.74 → 1.1.75

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

@@ -1,476 +0,0 @@
-"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/src/components/core/model/FieldMetaData.tsx

@@ -1,193 +0,0 @@
-'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;