@solidstarters/solid-core-ui 0.1.26

package/src/components/core/list/columns/relations/SolidRelationManyToOneColumn.tsx

@@ -0,0 +1,70 @@
+import { FilterMatchMode } from 'primereact/api';
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { FormEvent } from "primereact/ts-helpers";
+import { SolidListViewColumnParams } from '../../SolidListViewColumn';
+import { InputTypes, SolidVarInputsFilterElement } from "../../SolidVarInputsFilterElement";
+
+const SolidRelationManyToOneColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const filterMatchModeOptions = [
+        { label: 'In', value: FilterMatchMode.IN },
+        { label: 'Not In', value: FilterMatchMode.NOT_IN },
+    ];
+    const columnDataType = undefined;
+    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+
+        return (
+            <SolidVarInputsFilterElement
+                values={options.value}
+                onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}
+                inputType={InputTypes.RelationManyToOne}
+                solidListViewMetaData={solidListViewMetaData}
+                fieldMetadata={fieldMetadata}
+                column={column}
+            >
+            </SolidVarInputsFilterElement>
+        )
+    };
+
+    const bodyTemplate = (rowData: any) => {
+        const manyToOneFieldData = rowData[column.attrs.name];
+
+        // This is the userkey that will be present within the rowData.
+        if (manyToOneFieldData) {
+            // Since this is a many-to-one field, we fetch the user key field of the associated model.
+            const userKeyField = fieldMetadata.relationModel.userKeyField.name;
+
+            const manyToOneColVal = manyToOneFieldData[userKeyField];
+
+            // TODO: change this to use an anchor tag so that on click we open that entity form view. 
+            return <span>{manyToOneColVal}</span>;
+        }
+        else {
+            return <span></span>
+        }
+    };
+    const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    return (
+        <Column
+            key={fieldMetadata.name}
+            field={fieldMetadata.name}
+            header={header}
+            className="text-sm"
+            sortable={column.attrs.sortable}
+            filter={filterable}
+            dataType={columnDataType}
+            showFilterOperator={showFilterOperator}
+            filterMatchModeOptions={filterMatchModeOptions}
+            filterElement={filterTemplate}
+            body={bodyTemplate}
+            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
+            style={{ minWidth: "12rem" }}
+            headerClassName="table-header-fs"
+        ></Column>
+    );
+
+};
+
+export default SolidRelationManyToOneColumn;

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

@@ -0,0 +1,340 @@
+"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";
+
+
+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 [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 nextTab = () => {
+    setActiveIndex(activeIndex + 1);
+  };
+
+  useEffect(() => {
+    if (data) {
+      const modelData = {
+        ...data, moduleId: data?.module?.id
+      }
+
+      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" });
+            }
+          }
+        }
+      });
+    }
+  };
+
+
+  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, 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, ...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 
+
+
+
+  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])
+
+
+
+
+  return (
+    <div className="card relative">
+      <Toast ref={toast} />
+
+      <div className="absolute z-3 right-0 " style={{ top: 5 }}>
+        {params.id === "new" ? <div className="flex gap-3 justify-content-between">
+          <div className="form-wrapper-title"></div>
+          <div className="gap-3 flex">
+            <div>
+              <Button label="Save" size="small" onClick={handleSubmit} type="submit" className="small-button" />
+            </div>
+            <CancelButton />
+          </div>
+        </div> :
+          <div className="flex gap-3 justify-content-between">
+            <h1 className="m-0"></h1>
+            <div className="gap-3 flex">
+              {data?.isSystem !== true &&
+                <>
+                  <div>
+                    <Button label="Save" type="submit" className="small-button" onClick={handleSubmit} />
+                  </div>
+                  <div>
+                    <Button outlined label="Delete" className="small-button" severity="danger" type="button" onClick={deleteModelFunction} />
+                  </div>
+                </>
+              }
+
+              <CancelButton />
+            </div>
+          </div>
+        }
+      </div>
+
+      <TabView
+        activeIndex={activeIndex}
+        onTabChange={(e) => {
+          if (activeIndex == 0) {
+            formikModelMetadataRef.current.handleSubmit();
+            setActiveIndex(e.index)
+
+          }
+          if (activeIndex == 1) {
+            setActiveIndex(e.index)
+          }
+
+        }}
+      >
+        <TabPanel header="Model">
+          <ModelMetaData
+            modelMetaData={modelMetaData}
+            setModelMetaData={setModelMetaData}
+            allModelsNames={allModelsNames}
+            deleteModelFunction={deleteModelFunction}
+            nextTab={nextTab}
+            formikModelMetadataRef={formikModelMetadataRef}
+            params={params}
+          ></ModelMetaData>
+        </TabPanel>
+        <TabPanel header="Fields" >
+          <FieldMetaData
+            modelMetaData={modelMetaData}
+            fieldMetaData={fieldMetaData}
+            setFieldMetaData={setFieldMetaData}
+            deleteModelFunction={deleteModelFunction}
+            nextTab={nextTab}
+            formikFieldsMetadataRef={formikFieldsMetadataRef}
+          ></FieldMetaData>
+        </TabPanel>
+      </TabView>
+    </div >
+  );
+};
+
+export default CreateModel;

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

@@ -0,0 +1,148 @@
+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 = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteModelFunction, nextTab, formikFieldsMetadataRef }: 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 [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"
+            onClick={() => {
+              setSelectedFieldMetaData(rowData);
+              setVisiblePopup(true);
+            }}
+            className="p-button-rounded p-button-text"
+          />
+        }
+      </>
+    )
+  };
+
+  // Function to delete a row
+  const deleteRow = (rowData: any) => {
+    setFieldMetaData((prevData: any) => prevData.filter((item: any) => item.name !== rowData.name)); // Remove the row from the data array
+  };
+
+  // Template for the trash (delete) icon column
+  const deleteTemplate = (rowData: any) => {
+    return (
+      <>
+        {(pathname.includes('create') || rowData.isSystem !== true) &&
+          <Button icon="pi pi-trash" onClick={() => deleteRow(rowData)} className="p-button-rounded p-button-danger p-button-text" />
+
+        }
+      </>
+    )
+  };
+
+
+
+  return (
+    <>
+
+      {!modelMetaData.moduleId ?
+        <div className="card flex justify-content-center">
+          <Messages ref={msgs} />
+        </div>
+        :
+        <div>
+          <div className="flex justify-content-end mb-4">
+            {/* <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"
+                className="small-button"
+              />
+            }
+          </div>
+          <div className="card">
+            <DataTable value={fieldMetaData} dataKey="id"
+              tableStyle={{ minWidth: '50rem' }} size="small" className="custom-table" rowClassName={() => 'custom-row-height'}>
+              <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>
+          </div>
+          <Dialog
+            className="field-poopup-container"
+            header=""
+            visible={visiblePopup}
+            style={{ width: "40vw" }}
+            contentStyle={{ borderRadius: 8 }}
+            onHide={() => {
+              if (!visiblePopup) return;
+
+              setVisiblePopup(false);
+            }}
+            showHeader={false}
+          >
+            <FieldMetaDataForm modelMetaData={modelMetaData} fieldMetaData={selectedFieldMetaData} allFields={fieldMetaData} setFieldMetaData={setFieldMetaData} deleteModelFunction={deleteModelFunction} setVisiblePopup={setVisiblePopup} formikFieldsMetadataRef={formikFieldsMetadataRef} ></FieldMetaDataForm>
+          </Dialog>
+
+        </div >
+      }
+    </>
+
+
+
+  );
+};
+
+export default FieldMetaData;