@solidxai/core-ui 0.1.9-beta.18 → 0.1.9-beta.19

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

@@ -1,9 +1,6 @@
 
-
 import { useGetFieldDefaultMetaDataQuery } from "../../../redux/api/fieldApi";
-import { useCreatemodelMutation, useDeletemodelMutation, useLazyGetModelsQuery, useUpdatemodelMutation } from "../../../redux/api/modelApi";
-import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
-import { usePathname } from "../../../hooks/usePathname";
+import { useCreatemodelMutation, useLazyGetModelsQuery, useUpdatemodelMutation } from "../../../redux/api/modelApi";
 import { useRouter } from "../../../hooks/useRouter";
 import qs from "qs";
 import { useEffect, useRef, useState } from "react";
@@ -11,69 +8,57 @@ import { useDispatch } from "react-redux";
 import { showToast } from "../../../redux/features/toastSlice";
 import FieldMetaData from "./FieldMetaData";
 import ModelMetaData from "./ModelMetaData";
-import { SolidFormStepper } from "../../../components/common/SolidFormStepper";
-import { SolidBreadcrumb } from "../../../components/common/SolidBreadcrumb";
-import { SolidFormHeader } from "../../../components/common/SolidFormHeader";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
-import { SolidButton, SolidDialog, SolidDivider, SolidPopover, SolidPopoverContent, SolidPopoverTrigger, SolidTabGroup } from "../../shad-cn-ui";
-import { Settings, Trash2 } from "lucide-react";
+import { SolidButton, SolidTabGroup } from "../../shad-cn-ui";
 import { SolidFormFooter } from "../form/SolidFormFooter";
+import { ModuleMetadataExplorer } from "../module/ModuleMetadataExplorer";
+import "./CreateModel.css";
 
-interface ErrorResponseData {
-  message: string;
-  statusCode: number;
-  error: string;
-}
-
-const TABS = ["model", "fields"] as const;
+const TABS = ["model", "fields", "explorer"] as const;
 type TabValue = typeof TABS[number];
 
 const getTabErrorState = (tab?: TabValue): Record<TabValue, boolean> => ({
   model: tab === "model",
   fields: tab === "fields",
+  explorer: false,
 });
 
 const CreateModel = ({ data, params }: any) => {
 
   const dispatch = useDispatch();
   const router = useRouter();
-  const pathname = usePathname();
-  const [deleteEntity, setDeleteEntity] = useState(false);
-  const [isLoadingData, setIsLoadingData] = useState(data ? true : false);
+  const isCreateMode = params.id === "new";
   const formikModelMetadataRef = useRef<any>();
   const formikFieldsMetadataRef = useRef();
 
   const [modelMetaData, setModelMetaData] = useState<any>();
   const [fieldMetaData, setFieldMetaData] = useState<any>([]);
 
-  const { data: fieldDefaultMetaData, refetch } = useGetFieldDefaultMetaDataQuery(null);
+  useGetFieldDefaultMetaDataQuery(null);
   const [allModelsNames, setAllModelsNames] = useState([]);
 
-  const [triggerGetModels, { data: allmodels, isLoading: isAllModelsLoaded, error: allModelsError }] =
+  const [triggerGetModels, { data: allmodels }] =
     useLazyGetModelsQuery();
 
 
   const [
     createModel,
-    { isLoading: isCreateModelLoading, isSuccess: isCreateModelSuccess, isError: isCreateModelError, error: createModelError, data: newModel },
+    { isSuccess: isCreateModelSuccess, isError: isCreateModelError, error: createModelError },
   ] = useCreatemodelMutation();
 
   const [
     updateModel,
-    { isLoading: isUpdatedModelUpdating, isSuccess: isUpdatedModelSuceess, isError: isUpdateModelError, error: updateModelError, data: updatedModel },
+    { isSuccess: isUpdatedModelSuceess, isError: isUpdateModelError, error: updateModelError },
   ] = useUpdatemodelMutation();
-  const [
-    deleteModel,
-    { isLoading: isModelDeleted, isSuccess: isDeleteModelSuceess, isError: isDeleteModelError, error: deleteModelError, data: DeletedModel },
-  ] = useDeletemodelMutation();
-
   const [activeTab, setActiveTab] = useState<TabValue>("model");
   const [tabErrors, setTabErrors] = useState<Record<TabValue, boolean>>(getTabErrorState());
   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const deleteModelFunction = async () => {};
+  const availableTabs: readonly TabValue[] = isCreateMode ? ["model", "fields"] : TABS;
 
   const nextTab = () => {
-    const currentIndex = TABS.indexOf(activeTab);
-    const nextValue = TABS[Math.min(currentIndex + 1, TABS.length - 1)];
+    const currentIndex = availableTabs.indexOf(activeTab as (typeof availableTabs)[number]);
+    const nextValue = availableTabs[Math.min(Math.max(currentIndex, 0) + 1, availableTabs.length - 1)];
     setActiveTab(nextValue);
   };
 
@@ -95,7 +80,6 @@ const CreateModel = ({ data, params }: any) => {
         ...data, moduleId: data?.module?.id, parentModelId: data?.parentModel, isLegacyTable, hasExistingId
       }
 
-      setIsLoadingData(false);
       setModelMetaData(modelData);
       const fieldData = data.fields.map((f: any) => {
         const fieldCopy = { ...f }; // Create a shallow copy of the field object
@@ -120,7 +104,7 @@ const CreateModel = ({ data, params }: any) => {
       encodeValuesOnly: true
     });
     triggerGetModels(queryString);
-  }, [isDeleteModelSuceess]);
+  }, []);
 
   useEffect(() => {
     if (allmodels) {
@@ -242,70 +226,16 @@ const CreateModel = ({ data, params }: any) => {
     }
   };
 
-  const deleteModelFunction = async () => {
-    deleteModel(data?.id);
-  }
-
   useEffect(() => {
-    if (isCreateModelSuccess == true || isUpdatedModelSuceess == true || isDeleteModelSuceess == true) {
+    if (isCreateModelSuccess == true || isUpdatedModelSuceess == 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) {
-      dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.SEND_REPORT, detail: errorMessages.map(String).join(', '), life: 3000 }));
-    }
-  };
-
-  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.
+  }, [isCreateModelSuccess, isUpdatedModelSuceess])
 
   useEffect(() => {
     const errors = [
       { isError: isCreateModelError, error: createModelError },
-      { isError: isDeleteModelError, error: deleteModelError },
       { isError: isUpdateModelError, error: updateModelError },
     ];
     if (errors.length > 0) {
@@ -321,148 +251,106 @@ const CreateModel = ({ data, params }: any) => {
       });
     }
 
-  }, [isCreateModelError, isDeleteModelError, isUpdateModelError])
-  const [formActionsMenuOpen, setFormActionsMenuOpen] = useState(false);
-  const formActionDropdown = () => (
-    <SolidPopover open={formActionsMenuOpen} onOpenChange={setFormActionsMenuOpen}>
-      <SolidPopoverTrigger asChild>
-        <SolidButton
-          variant="ghost"
-          size="sm"
-          className="solid-icon-button"
-          aria-label="Model actions"
-        >
-          <Settings size={16} />
-        </SolidButton>
-      </SolidPopoverTrigger>
-      <SolidPopoverContent
-        side="bottom"
-        align="end"
-        className="solid-form-actions-popover"
-        onClick={(event) => event.stopPropagation()}
-      >
-        <button
-          type="button"
-          className="solid-row-action-button solid-row-action-button-danger"
-          onClick={() => {
-            setFormActionsMenuOpen(false);
-            setDeleteEntity(true);
-          }}
-        >
-          <Trash2 size={14} className="solid-row-action-button-icon" />
-          <span className="solid-row-action-button-label">Delete</span>
-        </button>
-      </SolidPopoverContent>
-    </SolidPopover>
-  );
+  }, [isCreateModelError, isUpdateModelError])
 
   const [isDirty, setIsDirty] = useState(false);
-  const isCreateMode = params.id === "new";
-  const headerTitleBase = isCreateMode ? "Create Model" : "Edit Model";
-  const headerTitle = `${headerTitleBase}${modelMetaData?.displayName ? ` - ${modelMetaData.displayName}` : ""}`;
-  const canShowActionsMenu = !isCreateMode && data?.isSystem !== true;
-  const handleCancel = () => router.back();
+  const [fieldDeleted, setFieldDeleted] = useState(false);
+  const explorerModuleName = data?.module?.name ?? modelMetaData?.module?.name ?? "";
+  const explorerModelSingularName = data?.singularName ?? modelMetaData?.singularName ?? "";
+  const isReadOnlyModelExplorer = Boolean(
+    modelMetaData?.isSystem ||
+    data?.isSystem ||
+    explorerModuleName.toLowerCase() === "solid-core"
+  );
+  const shouldShowTabSave = !isCreateMode ? activeTab === "fields" && fieldDeleted : activeTab !== "explorer" && isDirty;
+
+  const modelTabContent = (
+    <div className="solid-model-form-content is-tabbed">
+      <ModelMetaData
+        modelMetaData={modelMetaData}
+        setModelMetaData={setModelMetaData}
+        allModelsNames={allModelsNames}
+        deleteModelFunction={deleteModelFunction}
+        nextTab={nextTab}
+        formikModelMetadataRef={formikModelMetadataRef}
+        params={params}
+        formErrors={formErrors}
+        setIsDirty={setIsDirty}
+      />
+    </div>
+  );
+
+  const fieldsTabContent = (
+    <div className="solid-model-form-content is-tabbed">
+      <FieldMetaData
+        modelMetaData={modelMetaData}
+        fieldMetaData={fieldMetaData}
+        setFieldMetaData={setFieldMetaData}
+        deleteModelFunction={deleteModelFunction}
+        nextTab={nextTab}
+        formikFieldsMetadataRef={formikFieldsMetadataRef}
+        params={params}
+        setIsDirty={setIsDirty}
+        setFieldDeleted={setFieldDeleted}
+      />
+    </div>
+  );
 
 
   return (
     <div className="solid-form-wrapper">
       <div className="solid-form-section" style={{ borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }} >
-        <div>
-          <div className="solid-form-header flex align-items-center justify-content-between gap-3 flex-wrap">
-            <div className="flex flex-column gap-1">
-              {/* <span className="text-sm text-color-secondary uppercase tracking-wider">Model</span>
-            <div className="form-wrapper-title solid-long-text-wrapper m-0">{headerTitle}</div> */}
-            </div>
-            <div className="flex align-items-center gap-2">
-              <SolidButton
-                variant="outline"
-                size="sm"
-                type="button"
-                onClick={handleCancel}
-                className="bg-primary-reverse"
-              >
-                Cancel
-              </SolidButton>
-              {isDirty && (
-                <SolidButton size="sm" type="button" onClick={handleSubmit}>
-                  Save
-                </SolidButton>
-              )}
-              {canShowActionsMenu && formActionDropdown()}
-            </div>
-          </div>
-          {/* <SolidFormHeader /> */}
-          <div className="px-4 py-3 md:p-4 solid-form-content">
+        <div className="solid-model-form-workspace">
           <SolidTabGroup
-            className="relative"
-            panelClassName="px-0"
+            className="solid-model-form-tabs"
+            listClassName="solid-model-form-tablist"
+            panelClassName="solid-model-form-tabpanel"
             tabs={[
               {
                 value: "model",
-                label: <span className={tabErrors.model ? "tab-error-heading" : ""}>Model</span>,
-                content: (
-                  <ModelMetaData
-                    modelMetaData={modelMetaData}
-                    setModelMetaData={setModelMetaData}
-                    allModelsNames={allModelsNames}
-                    deleteModelFunction={deleteModelFunction}
-                    nextTab={nextTab}
-                    formikModelMetadataRef={formikModelMetadataRef}
-                    params={params}
-                    formErrors={formErrors}
-                    setIsDirty={setIsDirty}
-                  ></ModelMetaData>
-                ),
+                label: <span className={`solid-model-form-tab-label ${tabErrors.model ? "tab-error-heading" : ""}`}>Model</span>,
+                content: modelTabContent,
               },
               {
                 value: "fields",
-                label: <span className={tabErrors.fields ? "tab-error-heading" : ""}>Fields</span>,
-                content: (
-                  <FieldMetaData
-                    modelMetaData={modelMetaData}
-                    fieldMetaData={fieldMetaData}
-                    setFieldMetaData={setFieldMetaData}
-                    deleteModelFunction={deleteModelFunction}
-                    nextTab={nextTab}
-                    formikFieldsMetadataRef={formikFieldsMetadataRef}
-                    params={params}
-                    setIsDirty={setIsDirty}
-                  ></FieldMetaData>
-                ),
+                label: <span className={`solid-model-form-tab-label ${tabErrors.fields ? "tab-error-heading" : ""}`}>Fields</span>,
+                content: fieldsTabContent,
               },
+              ...(!isCreateMode
+                ? [
+                    {
+                      value: "explorer",
+                      label: <span className="solid-model-form-tab-label">Explorer</span>,
+                      content: (
+                        <ModuleMetadataExplorer
+                          moduleName={explorerModuleName}
+                          modelSingularName={explorerModelSingularName}
+                          readOnly={isReadOnlyModelExplorer}
+                          allowSeed={false}
+                        />
+                      ),
+                    },
+                  ]
+                : []),
             ]}
             value={activeTab}
             onValueChange={(value) => {
-              const next = TABS.find((tab) => tab === value);
+              const next = availableTabs.find((tab) => tab === value);
               if (next) {
                 handleTabChange(next);
               }
             }}
           />
-          </div>
         </div>
-        <SolidFormFooter params={params}></SolidFormFooter>
-
-      </div>
-      {/* <div style={{ width: '22.5%' }}></div> */}
-      <SolidDialog header="Delete Model" headerClassName="py-2" className="solid-confirm-dialog" contentClassName="px-0 pb-0" visible={deleteEntity} style={{ width: '20vw' }} onHide={() => { if (!deleteEntity) return; setDeleteEntity(false); }}>
-        <SolidDivider 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 Model?
-          </p>
-          <p className="" style={{ color: 'var{--solid-grey-500}' }}>{modelMetaData?.singularName}</p>
-          <div className="flex align-items-center gap-2 mt-3">
-            <SolidButton size="sm" onClick={deleteModelFunction}>
-              Delete
-            </SolidButton>
-            <SolidButton size="sm" variant="outline" onClick={() => setDeleteEntity(false)}>
-              Cancel
+        {shouldShowTabSave && (
+          <div className="solid-model-form-actions">
+            <SolidButton type="button" onClick={handleSubmit}>
+              Save
             </SolidButton>
           </div>
-        </div>
-      </SolidDialog>
-
+        )}
+        <SolidFormFooter params={params}></SolidFormFooter>
+      </div>
     </div>
   );
 };

package/dist/components/core/model/FieldMetaData.d.ts

@@ -1,3 +1,3 @@
-declare const FieldMetaData: ({ setIsDirty, modelMetaData, fieldMetaData, setFieldMetaData, deleteModelFunction, nextTab, formikFieldsMetadataRef, params }: any) => import("react/jsx-runtime").JSX.Element;
+declare const FieldMetaData: ({ setIsDirty, setFieldDeleted, modelMetaData, fieldMetaData, setFieldMetaData, deleteModelFunction, nextTab, formikFieldsMetadataRef, params }: any) => import("react/jsx-runtime").JSX.Element;
 export default FieldMetaData;
 //# sourceMappingURL=FieldMetaData.d.ts.map

package/dist/components/core/model/FieldMetaData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldMetaData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/FieldMetaData.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,aAAa,kIAAmI,GAAG,4CA8QxJ,CAAC;AACF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FieldMetaData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/model/FieldMetaData.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,aAAa,mJAAoJ,GAAG,4CAuOzK,CAAC;AACF,eAAe,aAAa,CAAC"}

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

@@ -42,10 +42,10 @@ import { useDispatch } from "react-redux";
 import { showToast } from "../../../redux/features/toastSlice";
 import FieldMetaDataForm from "./FieldMetaDataForm";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
-import { AlertTriangle, Info, Pencil, Plus, Trash2 } from "lucide-react";
+import { AlertTriangle, Info, Trash2 } from "lucide-react";
 import { SolidButton, SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, } from "../../shad-cn-ui";
 var FieldMetaData = function (_a) {
-    var setIsDirty = _a.setIsDirty, modelMetaData = _a.modelMetaData, fieldMetaData = _a.fieldMetaData, setFieldMetaData = _a.setFieldMetaData, deleteModelFunction = _a.deleteModelFunction, nextTab = _a.nextTab, formikFieldsMetadataRef = _a.formikFieldsMetadataRef, params = _a.params;
+    var setIsDirty = _a.setIsDirty, setFieldDeleted = _a.setFieldDeleted, modelMetaData = _a.modelMetaData, fieldMetaData = _a.fieldMetaData, setFieldMetaData = _a.setFieldMetaData, deleteModelFunction = _a.deleteModelFunction, nextTab = _a.nextTab, formikFieldsMetadataRef = _a.formikFieldsMetadataRef, params = _a.params;
     var pathname = usePathname();
     var dispatch = useDispatch();
     var _b = useState(false), visiblePopup = _b[0], setVisiblePopup = _b[1];
@@ -57,14 +57,6 @@ var FieldMetaData = function (_a) {
     var onRowSelect = function (event) {
         setVisiblePopup(true);
     };
-    // Template for the pencil icon column
-    var editTemplate = function (rowData) {
-        return (_jsx(_Fragment, { children: rowData.isSystem !== true && rowData.isMarkedForRemoval !== true &&
-                _jsx(SolidButton, { variant: "ghost", size: "sm", className: "solid-icon-button", "aria-label": "Edit field", leftIcon: _jsx(Pencil, { size: 14 }), onClick: function () {
-                        setSelectedFieldMetaData(rowData);
-                        setVisiblePopup(true);
-                    } }) }));
-    };
     var bodyTemplate = function (rowData) {
         return (_jsx(_Fragment, { children: rowData.displayName &&
                 _jsx(_Fragment, { children: _jsxs("p", { children: [rowData.displayName, rowData.isMarkedForRemoval === true &&
@@ -76,6 +68,8 @@ var FieldMetaData = function (_a) {
         setFieldMetaData(function (prevData) {
             var updatedData = prevData.filter(function (item) { return item.name !== rowData.name; });
             setIsDirty(true); // Ensure dirty state is updated immediately
+            if (setFieldDeleted)
+                setFieldDeleted(true);
             return updatedData;
         });
     };
@@ -103,17 +97,7 @@ var FieldMetaData = function (_a) {
     return (_jsx(_Fragment, { children: needsModelSetup ?
             _jsx("div", { className: "solid-placeholder-card-wrapper", children: _jsxs("div", { className: "solid-placeholder-card", children: [_jsx("div", { className: "solid-placeholder-card-icon", children: _jsx(Info, { size: 18 }) }), _jsxs("div", { className: "solid-placeholder-card-body", children: [_jsx("p", { className: "solid-placeholder-card-title", children: "Model setup incomplete" }), _jsx("p", { className: "solid-placeholder-card-text", children: "Please select Module and Datasource from the models tab before managing fields." })] })] }) })
             :
-                _jsxs(_Fragment, { children: [_jsx("div", { className: "absolute", style: { top: -3, right: 0 }, children: modelMetaData.isSystem !== true &&
-                                _jsx(SolidButton, { size: "sm", leftIcon: _jsx(Plus, { size: 14 }), onClick: function () {
-                                        if (!(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.dataSourceType)) {
-                                            dispatch(showToast({ severity: 'error', summary: ERROR_MESSAGES.ERROR, detail: ERROR_MESSAGES.ORM_TYPE_REQUIRED }));
-                                        }
-                                        else {
-                                            setSelectedFieldMetaData(null);
-                                            setVisiblePopup(true);
-                                        }
-                                    }, children: "Add" }) }), _jsx("div", { className: "solid-datatable-wrapper solid-list-table-area flex-1 min-h-0 overflow-hidden", children: _jsxs(DataTable, { value: fieldMetaData, dataKey: "id", size: "small", emptyMessage: "No fields configured", rowClassName: function (rowData) { return rowData.isMarkedForRemoval === true ? "greyed-out-row" : ""; }, children: [_jsx(Column, { field: "displayName", header: "Display Name", body: bodyTemplate }), _jsx(Column, { field: "name", header: "Name" }), _jsx(Column, { field: "type", header: "Type" }), modelMetaData.isSystem !== true &&
-                                        _jsx(Column, { body: editTemplate, header: "Edit", style: { width: '80px' } }), modelMetaData.isSystem !== true &&
+                _jsxs(_Fragment, { children: [_jsx("div", { className: "solid-datatable-wrapper solid-list-table-area flex-1 min-h-0 overflow-hidden", children: _jsxs(DataTable, { value: fieldMetaData, dataKey: "id", size: "small", emptyMessage: "No fields configured", rowClassName: function (rowData) { return rowData.isMarkedForRemoval === true ? "greyed-out-row" : ""; }, children: [_jsx(Column, { field: "displayName", header: "Display Name", body: bodyTemplate }), _jsx(Column, { field: "name", header: "Name" }), _jsx(Column, { field: "type", header: "Type" }), modelMetaData.isSystem !== true &&
                                         _jsx(Column, { body: deleteTemplate, header: "Delete", style: { width: '90px' } })] }) }), _jsx(SolidDialog, { open: visiblePopup, onOpenChange: function (open) {
                                 if (!open) {
                                     setVisiblePopup(false);
@@ -127,7 +111,7 @@ var FieldMetaData = function (_a) {
                                     setDeleteAlertPopup(false);
                                     setRowToDelete(null);
                                 }
-                            }, className: "solid-shadcn-confirm-dialog solid-field-delete-flow-dialog", style: { width: "min(560px, calc(100vw - 2rem))" }, children: [_jsxs(SolidDialogHeader, { className: "solid-shadcn-dialog-head solid-field-delete-flow-head", children: [_jsx(SolidDialogTitle, { children: _jsxs("span", { className: "flex align-items-center gap-2 justify-content-center", children: [_jsx(AlertTriangle, { size: 18, className: "text-yellow-500" }), _jsx("span", { children: "Remove Field" })] }) }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, { className: "solid-shadcn-dialog-sep" }), _jsxs(SolidDialogBody, { className: "solid-shadcn-dialog-body solid-field-delete-flow-body", children: [_jsx("p", { className: "solid-shadcn-dialog-text solid-field-delete-flow-intro", children: "Removing a field is a 2 step process." }), _jsxs("ol", { className: "solid-field-delete-flow-list", children: [_jsxs("li", { children: ["Delete the field and save the model form.", _jsx("span", { children: "This marks the field for removal." })] }), _jsxs("li", { children: ["Generate code for this model.", _jsx("span", { children: "This removes the field from generated code, metadata tables, and JSON." })] })] })] }), _jsxs(SolidDialogFooter, { className: "solid-shadcn-dialog-actions solid-field-delete-flow-actions", children: [_jsx(SolidButton, { size: "sm", onClick: function () {
+                            }, className: "solid-shadcn-confirm-dialog solid-field-delete-flow-dialog", style: { width: "min(560px, calc(100vw - 2rem))" }, children: [_jsxs(SolidDialogHeader, { className: "solid-shadcn-dialog-head solid-field-delete-flow-head", children: [_jsx(SolidDialogTitle, { children: _jsxs("span", { className: "flex align-items-center gap-2", children: [_jsx(AlertTriangle, { size: 18, className: "text-yellow-500" }), _jsx("span", { children: "Remove Field" })] }) }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, { className: "solid-shadcn-dialog-sep" }), _jsxs(SolidDialogBody, { className: "solid-shadcn-dialog-body solid-field-delete-flow-body", children: [_jsx("p", { className: "solid-shadcn-dialog-text solid-field-delete-flow-intro", children: "Removing a field is a 2 step process." }), _jsxs("ol", { className: "solid-field-delete-flow-list", children: [_jsxs("li", { children: ["Delete the field and save the model form.", _jsx("span", { children: "This marks the field for removal." })] }), _jsxs("li", { children: ["Generate code for this model.", _jsx("span", { children: "This removes the field from generated code, metadata tables, and JSON." })] })] })] }), _jsxs(SolidDialogFooter, { className: "solid-shadcn-dialog-actions solid-field-delete-flow-actions", children: [_jsx(SolidButton, { size: "sm", onClick: function () {
                                                 if (rowToDelete) {
                                                     deleteRow(rowToDelete);
                                                 }

package/dist/components/core/model/FieldMetaData.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldMetaData.js","sourceRoot":"","sources":["../../../../src/components/core/model/FieldMetaData.tsx"],"names":[],"mappings":"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","sourcesContent":["import { usePathname } from \"../../../hooks/usePathname\";\nimport { SolidDataTable as DataTable, Column } from \"../list/SolidDataTable\";\nimport { useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { showToast } from \"../../../redux/features/toastSlice\";\nimport FieldMetaDataForm from \"./FieldMetaDataForm\";\nimport { ERROR_MESSAGES } from \"../../../constants/error-messages\";\nimport { AlertTriangle, Info, Pencil, Plus, Trash2 } from \"lucide-react\";\nimport {\n  SolidButton,\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogClose,\n  SolidDialogFooter,\n  SolidDialogHeader,\n  SolidDialogSeparator,\n  SolidDialogTitle,\n} from \"../../shad-cn-ui\";\n\n\nconst FieldMetaData = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldMetaData, deleteModelFunction, nextTab, formikFieldsMetadataRef, params }: any) => {\n  const pathname = usePathname();\n  const dispatch = useDispatch();\n  const [visiblePopup, setVisiblePopup] = useState(false);\n  const [isRequiredPopUp, setIsRequiredPopUp] = useState(false);\n  const [currentPopup, setCurrentPopup] = useState();\n  const [selectedFieldMetaData, setSelectedFieldMetaData] = useState(null);\n  const [deleteAlertPopup, setDeleteAlertPopup] = useState(false);\n  const [rowToDelete, setRowToDelete] = useState<any>(null);\n  const onRowSelect = (event: any) => {\n    setVisiblePopup(true);\n\n  };\n\n  // Template for the pencil icon column\n  const editTemplate = (rowData: any) => {\n    return (\n      <>\n\n        {rowData.isSystem !== true && rowData.isMarkedForRemoval !== true &&\n          <SolidButton\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"solid-icon-button\"\n            aria-label=\"Edit field\"\n            leftIcon={<Pencil size={14} />}\n            onClick={() => {\n              setSelectedFieldMetaData(rowData);\n              setVisiblePopup(true);\n            }}\n          />\n        }\n      </>\n    )\n  };\n  const bodyTemplate = (rowData: any) => {\n    return (\n      <>\n\n        {rowData.displayName &&\n          <>\n            <p>{rowData.displayName}\n              {rowData.isMarkedForRemoval === true &&\n                <>\n                  <br></br>  <span style={{ fontSize: '11px', color: 'red' }}>This field will be removed next time you generate code for this model.</span>\n                </>\n              }\n            </p>\n          </>\n        }\n      </>\n    )\n  };\n\n\n  // Function to delete a row\n  const deleteRow = (rowData: any) => {\n    //show dialog bbefore deletion & which will have to option ok and cancel\n    setFieldMetaData((prevData: any) => {\n      const updatedData = prevData.filter((item: any) => item.name !== rowData.name);\n      setIsDirty(true); // Ensure dirty state is updated immediately\n      return updatedData;\n    });\n  };\n\n  // Template for the trash (delete) icon column\n  const deleteTemplate = (rowData: any) => {\n    return (\n      <>\n        {(pathname.includes('create') || (rowData.isSystem !== true && rowData.isMarkedForRemoval !== true)) &&\n          <SolidButton\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"solid-icon-button\"\n            style={{ color: \"var(--solid-danger, #ef4444)\" }}\n            aria-label=\"Delete field\"\n            leftIcon={<Trash2 size={14} />}\n            onClick={() => { setRowToDelete(rowData); setDeleteAlertPopup(true) }}\n          />\n\n        }\n      </>\n    )\n  };\n\n  const showToaster = async (message: any, severity: any) => {\n    const errorMessages = Object.values(message);\n    if (errorMessages.length > 0) {\n      dispatch(showToast({ severity, summary: ERROR_MESSAGES.SEND_REPORT, detail: errorMessages.map(String).join(', '), life: 3000 }));\n    }\n  };\n\n\n  // const rowClass = (data: any) => {\n  //   return {\n  //     'bg-red-row': data.isMarkedForRemoval === true\n  //   };\n  // };\n\n\n  const needsModelSetup = !modelMetaData.moduleId || !modelMetaData.dataSource;\n\n  return (\n    <>\n\n      {needsModelSetup ?\n        <div className=\"solid-placeholder-card-wrapper\">\n          <div className=\"solid-placeholder-card\">\n            <div className=\"solid-placeholder-card-icon\">\n              <Info size={18} />\n            </div>\n            <div className=\"solid-placeholder-card-body\">\n              <p className=\"solid-placeholder-card-title\">Model setup incomplete</p>\n              <p className=\"solid-placeholder-card-text\">Please select Module and Datasource from the models tab before managing fields.</p>\n            </div>\n          </div>\n        </div>\n        :\n        <>\n          <div className=\"absolute\" style={{ top: -3, right: 0 }}>\n            {/* <h3>All Fields</h3> */}\n            {modelMetaData.isSystem !== true &&\n              <SolidButton\n                size=\"sm\"\n                leftIcon={<Plus size={14} />}\n                onClick={() => {\n                  if (!modelMetaData?.dataSourceType) {\n                    dispatch(showToast({ severity: 'error', summary: ERROR_MESSAGES.ERROR, detail: ERROR_MESSAGES.ORM_TYPE_REQUIRED }));\n                  } else {\n                    setSelectedFieldMetaData(null);\n                    setVisiblePopup(true)\n                  }\n                }}\n              >\n                Add\n              </SolidButton>\n            }\n          </div>\n          <div className=\"solid-datatable-wrapper solid-list-table-area flex-1 min-h-0 overflow-hidden\">\n            <DataTable\n              value={fieldMetaData}\n              dataKey=\"id\"\n              size=\"small\"\n              emptyMessage=\"No fields configured\"\n              rowClassName={(rowData) => rowData.isMarkedForRemoval === true ? \"greyed-out-row\" : \"\"}\n            >\n              <Column field=\"displayName\" header=\"Display Name\" body={bodyTemplate}></Column>\n              <Column field=\"name\" header=\"Name\"></Column>\n              <Column field=\"type\" header=\"Type\"></Column>\n\n              {modelMetaData.isSystem !== true &&\n                <Column body={editTemplate} header=\"Edit\" style={{ width: '80px' }} />\n              }\n              {modelMetaData.isSystem !== true &&\n                <Column body={deleteTemplate} header=\"Delete\" style={{ width: '90px' }} />\n              }\n            </DataTable>\n          </div>\n          <SolidDialog\n            open={visiblePopup}\n            onOpenChange={(open) => {\n              if (!open) {\n                setVisiblePopup(false);\n              }\n            }}\n            className=\"solid-dialog solid-field-dialog\"\n            style={{ width: \"30vw\" }}\n            showHeader={false}\n          >\n            <SolidDialogBody className=\"solid-dialog-body-flush\">\n              <FieldMetaDataForm setIsDirty={setIsDirty} modelMetaData={modelMetaData} fieldMetaData={selectedFieldMetaData} allFields={fieldMetaData} setFieldMetaData={setFieldMetaData} deleteModelFunction={deleteModelFunction} setVisiblePopup={setVisiblePopup} formikFieldsMetadataRef={formikFieldsMetadataRef} params={params} setIsRequiredPopUp={setIsRequiredPopUp} showToaster={showToaster}></FieldMetaDataForm>\n            </SolidDialogBody>\n          </SolidDialog>\n          <SolidDialog\n            open={isRequiredPopUp}\n            onOpenChange={(open) => {\n              if (!open) {\n                setIsRequiredPopUp(false);\n              }\n            }}\n            className=\"solid-dialog solid-confirm-dialog solid-field-confirm-dialog\"\n            style={{ width: \"min(420px, calc(100vw - 2rem))\" }}\n          >\n            <SolidDialogHeader className=\"solid-field-confirm-header\">\n              <SolidDialogTitle>\n                <span className=\"flex align-items-center gap-2\">\n                  <AlertTriangle size={18} className=\"text-yellow-500\" />\n                  <span>Warning</span>\n                </span>\n              </SolidDialogTitle>\n              <SolidDialogClose />\n            </SolidDialogHeader>\n            <SolidDialogBody className=\"solid-field-confirm-dialog-body\">\n              <p className=\"solid-field-confirm-message\">If there is data against this model this operation might not work and manual intervention will be required.</p>\n            </SolidDialogBody>\n            <SolidDialogFooter className=\"solid-field-confirm-actions\">\n              <SolidButton size=\"sm\" onClick={() => setIsRequiredPopUp(false)}>\n                Ok\n              </SolidButton>\n            </SolidDialogFooter>\n          </SolidDialog>\n          <SolidDialog\n            open={deleteAlertPopup}\n            onOpenChange={(open) => {\n              if (!open) {\n                setDeleteAlertPopup(false);\n                setRowToDelete(null);\n              }\n            }}\n            className=\"solid-shadcn-confirm-dialog solid-field-delete-flow-dialog\"\n            style={{ width: \"min(560px, calc(100vw - 2rem))\" }}\n          >\n            <SolidDialogHeader className=\"solid-shadcn-dialog-head solid-field-delete-flow-head\">\n              <SolidDialogTitle>\n                <span className=\"flex align-items-center gap-2 justify-content-center\">\n                  <AlertTriangle size={18} className=\"text-yellow-500\" />\n                  <span>Remove Field</span>\n                </span>\n              </SolidDialogTitle>\n              <SolidDialogClose />\n            </SolidDialogHeader>\n            <SolidDialogSeparator className=\"solid-shadcn-dialog-sep\" />\n            <SolidDialogBody className=\"solid-shadcn-dialog-body solid-field-delete-flow-body\">\n              <p className=\"solid-shadcn-dialog-text solid-field-delete-flow-intro\">\n                Removing a field is a 2 step process.\n              </p>\n              <ol className=\"solid-field-delete-flow-list\">\n                <li>\n                  Delete the field and save the model form.\n                  <span>This marks the field for removal.</span>\n                </li>\n                <li>\n                  Generate code for this model.\n                  <span>This removes the field from generated code, metadata tables, and JSON.</span>\n                </li>\n              </ol>\n            </SolidDialogBody>\n            <SolidDialogFooter className=\"solid-shadcn-dialog-actions solid-field-delete-flow-actions\">\n              <SolidButton\n                size=\"sm\"\n                onClick={() => {\n                  if (rowToDelete) {\n                    deleteRow(rowToDelete);\n                  }\n                  setDeleteAlertPopup(false);\n                  setRowToDelete(null);\n                }}\n              >\n                Ok\n              </SolidButton>\n              <SolidButton\n                size=\"sm\"\n                variant=\"outline\"\n                onClick={() => {\n                  setDeleteAlertPopup(false);\n                  setRowToDelete(null);\n                }}\n              >\n                Cancel\n              </SolidButton>\n            </SolidDialogFooter>\n          </SolidDialog>\n\n        </>\n      }\n    </>\n\n\n\n  );\n};\nexport default FieldMetaData;\n"]}
+{"version":3,"file":"FieldMetaData.js","sourceRoot":"","sources":["../../../../src/components/core/model/FieldMetaData.tsx"],"names":[],"mappings":"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","sourcesContent":["import { usePathname } from \"../../../hooks/usePathname\";\nimport { SolidDataTable as DataTable, Column } from \"../list/SolidDataTable\";\nimport { useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { showToast } from \"../../../redux/features/toastSlice\";\nimport FieldMetaDataForm from \"./FieldMetaDataForm\";\nimport { ERROR_MESSAGES } from \"../../../constants/error-messages\";\nimport { AlertTriangle, Info, Trash2 } from \"lucide-react\";\nimport {\n  SolidButton,\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogClose,\n  SolidDialogFooter,\n  SolidDialogHeader,\n  SolidDialogSeparator,\n  SolidDialogTitle,\n} from \"../../shad-cn-ui\";\n\n\nconst FieldMetaData = ({ setIsDirty, setFieldDeleted, modelMetaData, fieldMetaData, setFieldMetaData, deleteModelFunction, nextTab, formikFieldsMetadataRef, params }: any) => {\n  const pathname = usePathname();\n  const dispatch = useDispatch();\n  const [visiblePopup, setVisiblePopup] = useState(false);\n  const [isRequiredPopUp, setIsRequiredPopUp] = useState(false);\n  const [currentPopup, setCurrentPopup] = useState();\n  const [selectedFieldMetaData, setSelectedFieldMetaData] = useState(null);\n  const [deleteAlertPopup, setDeleteAlertPopup] = useState(false);\n  const [rowToDelete, setRowToDelete] = useState<any>(null);\n  const onRowSelect = (event: any) => {\n    setVisiblePopup(true);\n\n  };\n\n\n  const bodyTemplate = (rowData: any) => {\n    return (\n      <>\n\n        {rowData.displayName &&\n          <>\n            <p>{rowData.displayName}\n              {rowData.isMarkedForRemoval === true &&\n                <>\n                  <br></br>  <span style={{ fontSize: '11px', color: 'red' }}>This field will be removed next time you generate code for this model.</span>\n                </>\n              }\n            </p>\n          </>\n        }\n      </>\n    )\n  };\n\n\n  // Function to delete a row\n  const deleteRow = (rowData: any) => {\n    //show dialog bbefore deletion & which will have to option ok and cancel\n    setFieldMetaData((prevData: any) => {\n      const updatedData = prevData.filter((item: any) => item.name !== rowData.name);\n      setIsDirty(true); // Ensure dirty state is updated immediately\n      if (setFieldDeleted) setFieldDeleted(true);\n      return updatedData;\n    });\n  };\n\n  // Template for the trash (delete) icon column\n  const deleteTemplate = (rowData: any) => {\n    return (\n      <>\n        {(pathname.includes('create') || (rowData.isSystem !== true && rowData.isMarkedForRemoval !== true)) &&\n          <SolidButton\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"solid-icon-button\"\n            style={{ color: \"var(--solid-danger, #ef4444)\" }}\n            aria-label=\"Delete field\"\n            leftIcon={<Trash2 size={14} />}\n            onClick={() => { setRowToDelete(rowData); setDeleteAlertPopup(true) }}\n          />\n\n        }\n      </>\n    )\n  };\n\n  const showToaster = async (message: any, severity: any) => {\n    const errorMessages = Object.values(message);\n    if (errorMessages.length > 0) {\n      dispatch(showToast({ severity, summary: ERROR_MESSAGES.SEND_REPORT, detail: errorMessages.map(String).join(', '), life: 3000 }));\n    }\n  };\n\n\n  // const rowClass = (data: any) => {\n  //   return {\n  //     'bg-red-row': data.isMarkedForRemoval === true\n  //   };\n  // };\n\n\n  const needsModelSetup = !modelMetaData.moduleId || !modelMetaData.dataSource;\n\n  return (\n    <>\n\n      {needsModelSetup ?\n        <div className=\"solid-placeholder-card-wrapper\">\n          <div className=\"solid-placeholder-card\">\n            <div className=\"solid-placeholder-card-icon\">\n              <Info size={18} />\n            </div>\n            <div className=\"solid-placeholder-card-body\">\n              <p className=\"solid-placeholder-card-title\">Model setup incomplete</p>\n              <p className=\"solid-placeholder-card-text\">Please select Module and Datasource from the models tab before managing fields.</p>\n            </div>\n          </div>\n        </div>\n        :\n        <>\n\n          <div className=\"solid-datatable-wrapper solid-list-table-area flex-1 min-h-0 overflow-hidden\">\n            <DataTable\n              value={fieldMetaData}\n              dataKey=\"id\"\n              size=\"small\"\n              emptyMessage=\"No fields configured\"\n              rowClassName={(rowData) => rowData.isMarkedForRemoval === true ? \"greyed-out-row\" : \"\"}\n            >\n              <Column field=\"displayName\" header=\"Display Name\" body={bodyTemplate}></Column>\n              <Column field=\"name\" header=\"Name\"></Column>\n              <Column field=\"type\" header=\"Type\"></Column>\n\n\n              {modelMetaData.isSystem !== true &&\n                <Column body={deleteTemplate} header=\"Delete\" style={{ width: '90px' }} />\n              }\n            </DataTable>\n          </div>\n          <SolidDialog\n            open={visiblePopup}\n            onOpenChange={(open) => {\n              if (!open) {\n                setVisiblePopup(false);\n              }\n            }}\n            className=\"solid-dialog solid-field-dialog\"\n            style={{ width: \"30vw\" }}\n            showHeader={false}\n          >\n            <SolidDialogBody className=\"solid-dialog-body-flush\">\n              <FieldMetaDataForm setIsDirty={setIsDirty} modelMetaData={modelMetaData} fieldMetaData={selectedFieldMetaData} allFields={fieldMetaData} setFieldMetaData={setFieldMetaData} deleteModelFunction={deleteModelFunction} setVisiblePopup={setVisiblePopup} formikFieldsMetadataRef={formikFieldsMetadataRef} params={params} setIsRequiredPopUp={setIsRequiredPopUp} showToaster={showToaster}></FieldMetaDataForm>\n            </SolidDialogBody>\n          </SolidDialog>\n          <SolidDialog\n            open={isRequiredPopUp}\n            onOpenChange={(open) => {\n              if (!open) {\n                setIsRequiredPopUp(false);\n              }\n            }}\n            className=\"solid-dialog solid-confirm-dialog solid-field-confirm-dialog\"\n            style={{ width: \"min(420px, calc(100vw - 2rem))\" }}\n          >\n            <SolidDialogHeader className=\"solid-field-confirm-header\">\n              <SolidDialogTitle>\n                <span className=\"flex align-items-center gap-2\">\n                  <AlertTriangle size={18} className=\"text-yellow-500\" />\n                  <span>Warning</span>\n                </span>\n              </SolidDialogTitle>\n              <SolidDialogClose />\n            </SolidDialogHeader>\n            <SolidDialogBody className=\"solid-field-confirm-dialog-body\">\n              <p className=\"solid-field-confirm-message\">If there is data against this model this operation might not work and manual intervention will be required.</p>\n            </SolidDialogBody>\n            <SolidDialogFooter className=\"solid-field-confirm-actions\">\n              <SolidButton size=\"sm\" onClick={() => setIsRequiredPopUp(false)}>\n                Ok\n              </SolidButton>\n            </SolidDialogFooter>\n          </SolidDialog>\n          <SolidDialog\n            open={deleteAlertPopup}\n            onOpenChange={(open) => {\n              if (!open) {\n                setDeleteAlertPopup(false);\n                setRowToDelete(null);\n              }\n            }}\n            className=\"solid-shadcn-confirm-dialog solid-field-delete-flow-dialog\"\n            style={{ width: \"min(560px, calc(100vw - 2rem))\" }}\n          >\n            <SolidDialogHeader className=\"solid-shadcn-dialog-head solid-field-delete-flow-head\">\n              <SolidDialogTitle>\n                <span className=\"flex align-items-center gap-2\">\n                  <AlertTriangle size={18} className=\"text-yellow-500\" />\n                  <span>Remove Field</span>\n                </span>\n              </SolidDialogTitle>\n              <SolidDialogClose />\n            </SolidDialogHeader>\n            <SolidDialogSeparator className=\"solid-shadcn-dialog-sep\" />\n            <SolidDialogBody className=\"solid-shadcn-dialog-body solid-field-delete-flow-body\">\n              <p className=\"solid-shadcn-dialog-text solid-field-delete-flow-intro\">\n                Removing a field is a 2 step process.\n              </p>\n              <ol className=\"solid-field-delete-flow-list\">\n                <li>\n                  Delete the field and save the model form.\n                  <span>This marks the field for removal.</span>\n                </li>\n                <li>\n                  Generate code for this model.\n                  <span>This removes the field from generated code, metadata tables, and JSON.</span>\n                </li>\n              </ol>\n            </SolidDialogBody>\n            <SolidDialogFooter className=\"solid-shadcn-dialog-actions solid-field-delete-flow-actions\">\n              <SolidButton\n                size=\"sm\"\n                onClick={() => {\n                  if (rowToDelete) {\n                    deleteRow(rowToDelete);\n                  }\n                  setDeleteAlertPopup(false);\n                  setRowToDelete(null);\n                }}\n              >\n                Ok\n              </SolidButton>\n              <SolidButton\n                size=\"sm\"\n                variant=\"outline\"\n                onClick={() => {\n                  setDeleteAlertPopup(false);\n                  setRowToDelete(null);\n                }}\n              >\n                Cancel\n              </SolidButton>\n            </SolidDialogFooter>\n          </SolidDialog>\n\n        </>\n      }\n    </>\n\n\n\n  );\n};\nexport default FieldMetaData;\n"]}