@solidxai/core-ui 0.1.9-beta.7 → 0.1.9

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

@@ -60,20 +60,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
     parentModelId: modelMetaData ? modelMetaData?.parentModel?.id : "",
     parentModel: modelMetaData ? modelMetaData?.parentModel : "",
     isLegacyTable: modelMetaData ? modelMetaData?.isLegacyTable : false,
-    isLegacyTableWithId: modelMetaData ? modelMetaData?.isLegacyTableWithId : false,
-  //   isLegacyTable: modelMetaData 
-  //   ? (modelMetaData.isLegacyTable && modelMetaData.isLegacyTableWithId && params.id !== 'new') 
-  //     ? true  
-  //     : modelMetaData.isLegacyTableWithId 
-  //       ? true  
-  //       : false 
-  //   : false,
-    
-  // isLegacyTableWithId: modelMetaData 
-  //   ? (modelMetaData.isLegacyTable && modelMetaData.isLegacyTableWithId &&  params.id !== 'new') 
-  //     ? true  
-  //     : false  
-  //   : false,
+    hasExistingId: modelMetaData ? modelMetaData?.hasExistingId : false,
   };
 
   const [showTableName, setShowTableName] = useState<any>(false);
@@ -135,7 +122,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
       }
     }),
     isLegacyTable: Yup.boolean(),
-    isLegacyTableWithId: Yup.boolean(),
+    hasExistingId: Yup.boolean(),
   });
 
 
@@ -208,8 +195,8 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
             parentModelId: values.parentModelId,
             parentModel: values.parentModel,
           }),
-          isLegacyTable:values.isLegacyTable === true ? true : false,
-          isLegacyTableWithId:values.isLegacyTableWithId === true ? true :false
+          isLegacyTable: values.isLegacyTable === true ? true : false,
+          hasExistingId: values.hasExistingId === true ? true : false,
            
         };
         setModelMetaData(modelData);
@@ -409,8 +396,8 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
     <>
       <form onSubmit={formik.handleSubmit}>
         <div className="">
-          <div className="grid formgrid">
-            <div className="field col-12 lg:col-6 lg:pr-3">
+          <div className="flex flex-wrap -mx-2 -mt-2">
+            <div className="field w-full px-2 pt-2 lg:w-1/2 lg:pr-4">
               <SolidPanel header={"Basic Info"} className="solid-column-panel">
                 <div className={styles.fieldWrapper}>
                   <label htmlFor="moduleId" className={styles.fieldLabel}>
@@ -532,6 +519,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                 <div className="mt-3">
                   <SolidCheckbox
                     name="enableAuditTracking"
+                    disabled={params.id !== "new"}
                     checked={!!formik.values.enableAuditTracking}
                     onChange={(event) => {
                       formik.setFieldValue("enableAuditTracking", event.currentTarget.checked);
@@ -544,6 +532,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                 <div className="mt-3">
                   <SolidCheckbox
                     name="internationalisation"
+                    disabled={params.id !== "new"}
                     checked={!!formik.values.internationalisation}
                     onChange={(event) => {
                       formik.setFieldValue("internationalisation", event.currentTarget.checked);
@@ -555,6 +544,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                 <div className="mt-3">
                   <SolidCheckbox
                     name="draftPublishWorkflow"
+                    disabled={params.id !== "new"}
                     checked={!!formik.values.draftPublishWorkflow}
                     onChange={(event) => {
                       formik.setFieldValue("draftPublishWorkflow", event.currentTarget.checked);
@@ -566,12 +556,13 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                 <div className="mt-3">
                   <SolidCheckbox
                     name="isLegacyTable"
+                    disabled={params.id !== "new"}
                     checked={!!formik.values.isLegacyTable}
                     onChange={(event) => {
                       const isChecked = event.currentTarget.checked;
                       formik.setFieldValue("isLegacyTable", isChecked);
                       if (!isChecked) {
-                        formik.setFieldValue("isLegacyTableWithId", false);
+                        formik.setFieldValue("hasExistingId", false);
                       }
                     }}
                     label="Is Legacy Table"
@@ -582,10 +573,11 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                   <>
                     <div className="ml-4 mt-2">
                       <SolidCheckbox
-                        name="isLegacyTableWithId"
-                        checked={!!formik.values.isLegacyTableWithId}
+                        name="hasExistingId"
+                        disabled={params.id !== "new"}
+                        checked={!!formik.values.hasExistingId}
                         onChange={(event) => {
-                          formik.setFieldValue("isLegacyTableWithId", event.currentTarget.checked);
+                          formik.setFieldValue("hasExistingId", event.currentTarget.checked);
                         }}
                         label="Has existing Id"
                       />
@@ -597,7 +589,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                 )}
               </SolidPanel>
             </div>
-            <div className="field col-12 lg:col-6 lg:pl-3">
+            <div className="field w-full px-2 pt-2 lg:w-1/2 lg:pl-4">
               <SolidPanel header={"Basic Settings"} className="solid-column-panel">
                 <div className={styles.fieldWrapper}>
                   <label htmlFor="displayName" className={styles.fieldLabel}>
@@ -609,6 +601,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                     name="displayName"
                     className={styles.fieldInput}
                     value={formik.values.displayName}
+                    disabled={params.id !== "new"}
                     onChange={(e) => {
                       formik.handleChange(e);
                       const { toCamelCase, toSnakeCase, toPluralCamelCase } = getSingularAndPlural(e.target.value);
@@ -680,67 +673,13 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                     className={styles.fieldTextarea}
                     value={formik.values.description}
                     rows={5}
+                    disabled={params.id !== "new"}
                     onChange={formik.handleChange}
                   />
                   {renderFieldError("description")}
                 </div>
               </SolidPanel>
             </div>
-
-            {/* <div className="md:col-6 sm:col-12">
-                  <div className="field">
-                    <label htmlFor="pluralName" className="form-label form-field-label">
-                      Plural Name
-                    </label>
-                    <InputText
-                      type="text"
-                      id="pluralName"
-                      name="pluralName"
-                      onChange={formik.handleChange}
-                      value={formik.values.pluralName}
-                      className={cx("p-inputtext-sm w-full small-input", {
-                        "p-invalid": isFormFieldValid(formik, "pluralName"),
-                      })}
-                    />
-                    {isFormFieldValid(formik, "pluralName") && (
-                      <Message severity="error" text={formik?.errors?.pluralName?.toString()} />
-                    )}
-                  </div>
-                </div> */}
-
-
-            {/* <div className="md:col-6 sm:col-12">
-                  <div className="field form-dropdown-select">
-                    <label htmlFor="dataSourceType" className="form-labe form-field-label">
-                      Data Source
-                    </label>
-                    <Dropdown
-                      id="dataSourceType"
-                      name="dataSourceType"
-                      value={formik.values.dataSourceType}
-                      options={dataSourceTypes}
-                      onChange={(e) => {
-                        formik.setFieldValue("dataSourceType", e.value);
-                        // if (e.value == "mariadb") {
-                        //   formik.setFieldValue("dataSourceType", "mongodb");
-                        // }
-                        // else {
-                        //   formik.setFieldValue("dataSourceType", "rdbms");
-                        // }
-                      }
-                      }
-                      placeholder="Select a Data Source"
-                      className={cx("p-inputtext-sm w-full", {
-                        "p-invalid": isFormFieldValid(formik, "dataSource"),
-                      })}
-                    />
-                    {isFormFieldValid(formik, "dataSource") && (
-                      <Message severity="error" text={formik?.errors?.dataSource?.toString()} />
-                    )}
-                  </div>
-                </div> */}
-
-
           </div>
         </div>
       </form>

package/dist/components/core/module/CreateModule.css

@@ -0,0 +1,44 @@
+.solid-module-form-workspace {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.solid-module-form-workspace .solid-module-form-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.solid-module-form-workspace .solid-module-form-tablist {
+  width: 100% !important;
+  padding: 0 0.25rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+}
+
+.solid-module-form-workspace .solid-module-form-tabpanel {
+  padding-top: 0.65rem;
+}
+
+.solid-module-form-tab-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  white-space: nowrap;
+}
+
+.solid-module-form-workspace .solid-module-form-tablist .solid-notebook-tab-trigger {
+  padding: 0.9rem 0.95rem 0.8rem;
+}
+
+.solid-module-general-info-content.is-tabbed {
+  padding: 0 0.9rem 1rem;
+}
+
+.solid-module-general-info-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}

package/dist/components/core/module/CreateModule.d.ts

@@ -1,3 +1,4 @@
+import "./CreateModule.css";
 declare const CreateModule: ({ params, data }: any) => import("react/jsx-runtime").JSX.Element;
 export default CreateModule;
 //# sourceMappingURL=CreateModule.d.ts.map

package/dist/components/core/module/CreateModule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateModule.d.ts","sourceRoot":"","sources":["../../../../src/components/core/module/CreateModule.tsx"],"names":[],"mappings":"AAqCA,QAAA,MAAM,YAAY,qBAAsB,GAAG,4CAqhB1C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CreateModule.d.ts","sourceRoot":"","sources":["../../../../src/components/core/module/CreateModule.tsx"],"names":[],"mappings":"AA+BA,OAAO,oBAAoB,CAAC;AAK5B,QAAA,MAAM,YAAY,qBAAsB,GAAG,4CAogB1C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/core/module/CreateModule.js

@@ -52,7 +52,7 @@ import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { getSingularAndPlural } from "../../../helpers/helpers";
 import { useGetFieldDefaultMetaDataQuery } from "../../../redux/api/fieldApi";
 import { useDeleteMediaMutation } from "../../../redux/api/mediaApi";
-import { useCreatemoduleMutation, useDeletemoduleMutation, useUpdatemoduleMutation } from "../../../redux/api/moduleApi";
+import { useCreatemoduleMutation, useUpdatemoduleMutation } from "../../../redux/api/moduleApi";
 import { useFormik } from "formik";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
@@ -63,35 +63,32 @@ import { useDropzone } from "react-dropzone";
 import * as Yup from "yup";
 import { env } from "../../../adapters/env";
 import styles from "../form/fields/solidFields.module.css";
-import { SolidAutocomplete, SolidButton, SolidInput, SolidMessage, SolidPanel, SolidPopover, SolidPopoverContent, SolidPopoverTrigger, SolidProgressBar, SolidTextarea, SolidIcon, } from "../../shad-cn-ui";
+import { SolidAutocomplete, SolidButton, SolidInput, SolidMessage, SolidPanel, SolidProgressBar, SolidTabGroup, SolidTextarea, SolidIcon, } from "../../shad-cn-ui";
 import { useSolidAutocompleteField } from "../../../hooks/useSolidAutocompleteField";
-import { Settings, Trash2 } from "lucide-react";
 import { SolidFormFooter } from "../form/SolidFormFooter";
+import { ModuleMetadataExplorer } from "./ModuleMetadataExplorer";
+import "./CreateModule.css";
 var CreateModule = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var params = _a.params, data = _a.data;
     var dispatch = useDispatch();
     var router = useRouter();
     var pathname = usePathname();
-    var _p = useState(false), isDialogVisible = _p[0], setDialogVisible = _p[1];
-    var _q = useState(false), isImageDialogVisible = _q[0], setImageDialogVisible = _q[1];
-    var _r = useState(data ? true : false), isLoadingData = _r[0], setIsLoadingData = _r[1];
-    var _s = useState(null), menuIconPreview = _s[0], setmenuIconPreview = _s[1];
-    var _t = useState(0), uploadProgress = _t[0], setUploadProgress = _t[1];
-    var _u = useState(false), uploadCompleted = _u[0], setUploadCompleted = _u[1];
-    var _v = useState(null), fileDetails = _v[0], setFileDetails = _v[1];
-    var _w = useState("0 MB"), uploadedSize = _w[0], setUploadedSize = _w[1];
-    var _x = useState("0 KB"), totalSize = _x[0], setTotalSize = _x[1];
+    var _p = useState(null), menuIconPreview = _p[0], setmenuIconPreview = _p[1];
+    var _q = useState(0), uploadProgress = _q[0], setUploadProgress = _q[1];
+    var _r = useState(false), uploadCompleted = _r[0], setUploadCompleted = _r[1];
+    var _s = useState(null), fileDetails = _s[0], setFileDetails = _s[1];
+    var _t = useState("0 MB"), uploadedSize = _t[0], setUploadedSize = _t[1];
+    var _u = useState("0 KB"), totalSize = _u[0], setTotalSize = _u[1];
     var formatFileSize = function (size) {
         return size >= 1024 * 1024
             ? "".concat((size / (1024 * 1024)).toFixed(1), " MB")
             : "".concat((size / 1024).toFixed(1), " KB");
     };
-    var _y = useCreatemoduleMutation(), CreateModule = _y[0], _z = _y[1], isLoading = _z.isLoading, isSuccess = _z.isSuccess, isError = _z.isError, error = _z.error, newModule = _z.data;
-    var _0 = useUpdatemoduleMutation(), UpdateModule = _0[0], _1 = _0[1], isModuleUpdateLoading = _1.isLoading, isModuleUpdateSuccess = _1.isSuccess, isModuleUpdateError = _1.isError, updateModuleError = _1.error, updatedModule = _1.data;
-    var _2 = useGetFieldDefaultMetaDataQuery(null), fieldDefaultMetaData = _2.data, isFieldDefaultMetaDataLoading = _2.isLoading, FieldDefaultMetaDataError = _2.error, fieldDefaultMetaDataRefech = _2.refetch;
-    var _3 = useDeletemoduleMutation(), deleteModule = _3[0], _4 = _3[1], isModuleDeleted = _4.isLoading, isDeleteModuleSuceess = _4.isSuccess, isModuleDeleteError = _4.isError, ModuleDeleteError = _4.error, DeletedModule = _4.data;
-    var _5 = useDeleteMediaMutation(), deleteMedia = _5[0], _6 = _5[1], isMediaDeleted = _6.isLoading, isDeleteMediaSuceess = _6.isSuccess, isMediaDeleteError = _6.isError, mediaDeleteError = _6.error, DeletedMedia = _6.data;
+    var _v = useCreatemoduleMutation(), CreateModule = _v[0], _w = _v[1], isLoading = _w.isLoading, isSuccess = _w.isSuccess, isError = _w.isError, error = _w.error, newModule = _w.data;
+    var _x = useUpdatemoduleMutation(), UpdateModule = _x[0], _y = _x[1], isModuleUpdateLoading = _y.isLoading, isModuleUpdateSuccess = _y.isSuccess, isModuleUpdateError = _y.isError, updateModuleError = _y.error, updatedModule = _y.data;
+    var _z = useGetFieldDefaultMetaDataQuery(null), fieldDefaultMetaData = _z.data, isFieldDefaultMetaDataLoading = _z.isLoading, FieldDefaultMetaDataError = _z.error, fieldDefaultMetaDataRefech = _z.refetch;
+    var _0 = useDeleteMediaMutation(), deleteMedia = _0[0], _1 = _0[1], isMediaDeleted = _1.isLoading, isDeleteMediaSuceess = _1.isSuccess, isMediaDeleteError = _1.isError, mediaDeleteError = _1.error, DeletedMedia = _1.data;
     var initialValues = {
         name: data ? data.name : "",
         displayName: data ? data.displayName : "",
@@ -191,7 +188,7 @@ var CreateModule = function (_a) {
         reader.readAsDataURL(file);
         formik.setFieldValue("menuIconUrl", file);
     };
-    var _7 = useDropzone({
+    var _2 = useDropzone({
         onDrop: handleDropmenuIcon,
         accept: {
             'image/jpeg': [],
@@ -199,7 +196,7 @@ var CreateModule = function (_a) {
             'image/svg+xml': ['.svg']
         },
         maxSize: 2 * 1024 * 1024, // 2MB
-    }), getRootPropsmenuIcon = _7.getRootProps, getInputPropsmenuIcon = _7.getInputProps, isDragActivemenuIcon = _7.isDragActive;
+    }), getRootPropsmenuIcon = _2.getRootProps, getInputPropsmenuIcon = _2.getInputProps, isDragActivemenuIcon = _2.isDragActive;
     useEffect(function () {
         var _a;
         if (data) {
@@ -220,12 +217,6 @@ var CreateModule = function (_a) {
         setFileDetails(null);
         formik.setFieldValue("menuIconUrl", null);
     };
-    var deteleAction = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            deleteModule(data.id);
-            return [2 /*return*/];
-        });
-    }); };
     var showError = function () { return __awaiter(void 0, void 0, void 0, function () {
         var errors, errorMessages, detail;
         return __generator(this, function (_a) {
@@ -237,20 +228,6 @@ var CreateModule = function (_a) {
                     if (errorMessages.length > 0) {
                         detail = Array.isArray(errorMessages) ? errorMessages.join(', ') : String(errorMessages);
                         dispatch(showToast({ severity: 'error', summary: 'Error', detail: detail }));
-                        // toast.current.show({
-                        //   severity: "success",
-                        //   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: any, index) => (
-                        //         <div className="flex align-items-center gap-2" key={index}>
-                        //           <span className="font-bold text-900">{m}</span>
                         //         </div>
                         //       ))}
                         //     </div>
@@ -270,10 +247,10 @@ var CreateModule = function (_a) {
         });
     }); };
     useEffect(function () {
-        if (isSuccess == true || isDeleteModuleSuceess == true || isModuleUpdateSuccess == true) {
+        if (isSuccess == true || isModuleUpdateSuccess == true) {
             router.push("/admin/core/solid-core/module-metadata/list");
         }
-    }, [isSuccess, isDeleteModuleSuceess, isModuleUpdateSuccess]);
+    }, [isSuccess, isModuleUpdateSuccess]);
     var serachDDefaultDataSource = function (event) { return __awaiter(void 0, void 0, void 0, function () {
         var query, filterredData, transformedData;
         return __generator(this, function (_a) {
@@ -303,7 +280,6 @@ var CreateModule = function (_a) {
         var errors = [
             { isError: isError, error: error },
             { isError: isModuleUpdateError, error: updateModuleError },
-            { isError: isModuleDeleteError, error: ModuleDeleteError },
             { isError: isMediaDeleteError, error: mediaDeleteError },
         ];
         // Handle any error
@@ -317,25 +293,32 @@ var CreateModule = function (_a) {
                 dispatch(showToast({ severity: 'error', summary: 'Error', detail: detail }));
             }
         });
-    }, [isError, isModuleUpdateError, isModuleDeleteError, isMediaDeleteError]);
-    var _8 = useState(false), formActionsMenuOpen = _8[0], setFormActionsMenuOpen = _8[1];
+    }, [isError, isModuleUpdateError, isMediaDeleteError]);
+    var _3 = useState("general"), activeWorkspaceTab = _3[0], setActiveWorkspaceTab = _3[1];
     var isCreateMode = pathname.includes('new');
-    var headerTitle = isCreateMode ? "Create Module" : "Edit Module";
-    var canShowActionsMenu = !isCreateMode && (data === null || data === void 0 ? void 0 : data.isSystem) !== true;
+    var shouldShowGeneralSave = isCreateMode || activeWorkspaceTab === "general";
     var handleCancel = function () {
         router.back();
     };
-    var formActionDropdown = function () { return (_jsxs(SolidPopover, { open: formActionsMenuOpen, onOpenChange: setFormActionsMenuOpen, children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx(SolidButton, { variant: "ghost", size: "sm", className: "solid-icon-button", "aria-label": "Module actions", children: _jsx(Settings, { size: 16 }) }) }), _jsx(SolidPopoverContent, { side: "bottom", align: "end", className: "solid-form-actions-popover", onClick: function (event) { return event.stopPropagation(); }, children: _jsxs("button", { type: "button", className: "solid-row-action-button solid-row-action-button-danger", onClick: function () {
-                        setFormActionsMenuOpen(false);
-                        deteleAction();
-                    }, children: [_jsx(Trash2, { size: 14, className: "solid-row-action-button-icon" }), _jsx("span", { className: "solid-row-action-button-label", children: "Delete" })] }) })] })); };
-    return (_jsx("div", { className: "solid-form-wrapper", children: _jsxs("div", { className: "solid-form-section", style: { borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }, children: [_jsxs("form", { style: { width: '100%', background: "#fff" }, onSubmit: formik.handleSubmit, children: [_jsxs("div", { className: "solid-form-header flex align-items-center justify-content-between gap-3 flex-wrap", children: [_jsx("div", { className: "flex flex-column gap-1" }), _jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(SolidButton, { variant: "outline", size: "sm", type: "button", onClick: handleCancel, className: "bg-primary-reverse", children: "Cancel" }), formik.dirty && (_jsx(SolidButton, { size: "sm", type: "submit", onClick: function () { return showError(); }, children: "Save" })), canShowActionsMenu && formActionDropdown()] })] }), _jsxs("div", { className: "solid-form-content", children: [_jsxs(SolidPanel, { header: "Basic Info", className: "solid-column-panel", children: [_jsxs("div", { className: "formgrid grid mt-3", children: [_jsx("div", { className: "field col-12 pb-3 lg:pb-0 lg:col-6", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsxs("label", { htmlFor: "displayName", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Display Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(SolidInput, { disabled: !!data, type: "text", id: "displayName", name: "displayName", onChange: function (e) {
-                                                                    formik.handleChange(e);
-                                                                    var toKebabCase = getSingularAndPlural(e.target.value).toKebabCase;
-                                                                    if (pathname.includes('new')) {
-                                                                        formik.setFieldValue("name", toKebabCase);
-                                                                    }
-                                                                }, value: formik.values.displayName, className: styles.fieldInput }), isFormFieldValid(formik, "displayName") && (_jsx("p", { className: styles.fieldError, children: (_c = (_b = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _b === void 0 ? void 0 : _b.displayName) === null || _c === void 0 ? void 0 : _c.toString() }))] }) }), _jsx("div", { className: "field col-12 lg:col-6", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsxs("label", { htmlFor: "name", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(SolidInput, { disabled: true, type: "text", id: "name", name: "name", onChange: formik.handleChange, value: formik.values.name, className: styles.fieldInput }), isFormFieldValid(formik, "name") && (_jsx("p", { className: styles.fieldError, children: (_e = (_d = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.toString() }))] }) })] }), _jsxs("div", { className: "formgrid grid mt-4", children: [_jsx("div", { className: "field col-12 pb-3 ld:pb-0 lg:col-6", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsx("label", { htmlFor: "menuSequenceNumber", className: "".concat(styles.fieldLabel, " form-field-label"), children: "Menu Sequence Number" }), _jsx(SolidInput, { id: "menuSequenceNumber", type: "number", onChange: formik.handleChange, min: 0, value: formik.values.menuSequenceNumber, className: styles.fieldInput }), isFormFieldValid(formik, "menuSequenceNumber") && (_jsx("p", { className: styles.fieldError, children: (_g = (_f = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _f === void 0 ? void 0 : _f.menuSequenceNumber) === null || _g === void 0 ? void 0 : _g.toString() }))] }) }), _jsx("div", { className: "field col-12 lg:col-6", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsxs("label", { htmlFor: "description", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Description ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(SolidTextarea, { id: "description", name: "description", onChange: formik.handleChange, value: formik.values.description, className: styles.fieldTextarea, rows: 5, cols: 30 }), isFormFieldValid(formik, "description") && (_jsx("p", { className: styles.fieldError, children: (_j = (_h = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _h === void 0 ? void 0 : _h.description) === null || _j === void 0 ? void 0 : _j.toString() }))] }) })] })] }), _jsx(SolidPanel, { header: "Configurations", className: "solid-column-panel mt-4", children: _jsxs("div", { className: "formgrid grid mt-3", children: [_jsx("div", { className: "field col-12 pb-3 lg:pb-0 lg:col-6", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsx("label", { htmlFor: "defaultDataSource", className: "".concat(styles.fieldLabel, " form-field-label"), children: "Default Data Source" }), _jsx("div", { className: "solid-standard-autocomplete w-full", children: _jsx(SolidAutocomplete, { disabled: !!data, value: defaultDataSourceField.selectedItem, suggestions: defaultDataSourceField.filteredItems, completeMethod: defaultDataSourceField.searchItems, onChange: defaultDataSourceField.handleChange, dropdown: true, field: "label", className: "w-full" }) }), isFormFieldValid(formik, "defaultDataSource") && (_jsx("p", { className: styles.fieldError, children: (_l = (_k = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _k === void 0 ? void 0 : _k.defaultDataSource) === null || _l === void 0 ? void 0 : _l.toString() }))] }) }), _jsx("div", { className: "field col-12 lg:col-6", children: _jsxs("div", { className: "".concat(styles.fieldWrapper, " relative"), children: [_jsxs("label", { htmlFor: "menuIconUrl", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Menu Icon ", _jsx("small", { className: "text-red-500 helper-text", children: "(only svg, png and jpeg are allowed)" })] }), _jsxs("div", __assign({}, getRootPropsmenuIcon(), { className: "solid-dropzone-wrapper", children: [_jsx("input", __assign({}, getInputPropsmenuIcon())), _jsx(DropzonePlaceholder, {})] })), isFormFieldValid(formik, "menuIconUrl") && (_jsx(SolidMessage, { severity: "error", text: (_o = (_m = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _m === void 0 ? void 0 : _m.menuIconUrl) === null || _o === void 0 ? void 0 : _o.toString(), className: "mt-2" })), fileDetails && (_jsxs("div", { className: "solid-file-upload-wrapper mt-4", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx("div", { className: "font-bold solid-module-mobile-text-wrapper", children: fileDetails.name }), _jsx("button", { type: "button", className: "solid-file-icon-btn is-danger", onClick: handleCancelUpload, children: _jsx(SolidIcon, { name: "si-times", "aria-hidden": true }) })] }), uploadCompleted ? (_jsxs("div", { className: "flex align-items-center gap-2 text-sm", children: [totalSize, " of ", totalSize, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none", children: _jsx("circle", { cx: "2", cy: "2", r: "2", fill: "#C1C1C1" }) }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx("mask", { id: "mask0_2480_8635", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20", children: _jsx("rect", { width: "20", height: "20", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask0_2480_8635)", children: _jsx("path", { d: "M9.16 12.76L13.39 8.53L12.55 7.69L9.16 11.08L7.45 9.37L6.61 10.21L9.16 12.76ZM10 16C9.17 16 8.39 15.8424 7.66 15.5272C6.93 15.2124 6.295 14.785 5.755 14.245C5.215 13.705 4.7876 13.07 4.4728 12.34C4.1576 11.61 4 10.83 4 10C4 9.17 4.1576 8.39 4.4728 7.66C4.7876 6.93 5.215 5.215 5.755 5.755C6.295 5.215 6.93 4.7874 7.66 4.4722C8.39 4.1574 9.17 4 10 4C10.83 4 11.61 4.1574 12.34 4.4722C13.07 4.7874 13.705 5.215 14.245 5.755C14.785 6.295 15.2124 6.93 15.5272 7.66C15.8424 8.39 16 9.17 16 10C16 10.83 15.8424 11.61 15.5272 12.34C15.2124 13.07 14.785 13.705 14.245 14.245C13.705 14.785 13.07 15.2124 12.34 15.5272C11.61 15.8424 10.83 16 10 16Z", fill: "var(--primary-color, var(--primary))" }) })] }), "Completed"] })) : (_jsxs("div", { className: "flex align-items-center gap-2 text-sm", children: [uploadedSize, " of ", totalSize, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none", children: _jsx("circle", { cx: "2", cy: "2", r: "2", fill: "#C1C1C1" }) }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M7.375 10.5V5.40625L5.75 7.03125L4.875 6.125L8 3L11.125 6.125L10.25 7.03125L8.625 5.40625V10.5H7.375ZM4.25 13C3.90625 13 3.61198 12.8776 3.36719 12.6328C3.1224 12.388 3 12.0938 3 11.75V9.875H4.25V11.75H11.75V9.875H13V11.75C13 12.0938 12.8776 12.388 12.6328 12.6328C12.388 12.8776 12.0938 13 11.75 13H4.25Z", fill: "black" }) }), "Uploading $", uploadProgress, "% Completed"] }))] })] }), _jsx(SolidProgressBar, { value: uploadProgress, showValue: false, style: { height: 4 }, className: "mt-2" })] }))] }) })] }) })] })] }), _jsx(SolidFormFooter, { params: params })] }) }));
+    var generalInfoContent = (_jsxs("div", { className: "solid-module-general-info-content ".concat(!isCreateMode ? "is-tabbed" : ""), children: [!isCreateMode && shouldShowGeneralSave && formik.dirty && (_jsx("div", { className: "solid-module-general-info-actions", children: _jsx(SolidButton, { size: "sm", type: "submit", form: "module-general-info-form", onClick: function () { return showError(); }, children: "Save" }) })), _jsx("form", { id: "module-general-info-form", style: { width: '100%', background: "#fff" }, onSubmit: formik.handleSubmit, children: _jsxs("div", { className: "solid-form-content", children: [_jsxs(SolidPanel, { header: "Basic Info", className: "solid-column-panel", children: [_jsxs("div", { className: "mt-3 flex flex-wrap -mx-2 -mt-2", children: [_jsx("div", { className: "field w-full px-2 pt-2 pb-3 lg:w-1/2 lg:pb-0", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsxs("label", { htmlFor: "displayName", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Display Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(SolidInput, { disabled: !!data, type: "text", id: "displayName", name: "displayName", onChange: function (e) {
+                                                            formik.handleChange(e);
+                                                            var toKebabCase = getSingularAndPlural(e.target.value).toKebabCase;
+                                                            if (pathname.includes('new')) {
+                                                                formik.setFieldValue("name", toKebabCase);
+                                                            }
+                                                        }, value: formik.values.displayName, className: styles.fieldInput }), isFormFieldValid(formik, "displayName") && (_jsx("p", { className: styles.fieldError, children: (_c = (_b = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _b === void 0 ? void 0 : _b.displayName) === null || _c === void 0 ? void 0 : _c.toString() }))] }) }), _jsx("div", { className: "field w-full px-2 pt-2 lg:w-1/2", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsxs("label", { htmlFor: "name", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(SolidInput, { disabled: true, type: "text", id: "name", name: "name", onChange: formik.handleChange, value: formik.values.name, className: styles.fieldInput }), isFormFieldValid(formik, "name") && (_jsx("p", { className: styles.fieldError, children: (_e = (_d = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.toString() }))] }) })] }), _jsxs("div", { className: "mt-4 flex flex-wrap -mx-2 -mt-2", children: [_jsx("div", { className: "field w-full px-2 pt-2 pb-3 lg:w-1/2 lg:pb-0", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsx("label", { htmlFor: "menuSequenceNumber", className: "".concat(styles.fieldLabel, " form-field-label"), children: "Menu Sequence Number" }), _jsx(SolidInput, { id: "menuSequenceNumber", type: "number", onChange: formik.handleChange, min: 0, value: formik.values.menuSequenceNumber, className: styles.fieldInput }), isFormFieldValid(formik, "menuSequenceNumber") && (_jsx("p", { className: styles.fieldError, children: (_g = (_f = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _f === void 0 ? void 0 : _f.menuSequenceNumber) === null || _g === void 0 ? void 0 : _g.toString() }))] }) }), _jsx("div", { className: "field w-full px-2 pt-2 lg:w-1/2", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsxs("label", { htmlFor: "description", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Description ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(SolidTextarea, { id: "description", name: "description", onChange: formik.handleChange, value: formik.values.description, className: styles.fieldTextarea, rows: 5, cols: 30 }), isFormFieldValid(formik, "description") && (_jsx("p", { className: styles.fieldError, children: (_j = (_h = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _h === void 0 ? void 0 : _h.description) === null || _j === void 0 ? void 0 : _j.toString() }))] }) })] })] }), _jsx(SolidPanel, { header: "Configurations", className: "solid-column-panel mt-4", children: _jsxs("div", { className: "mt-3 flex flex-wrap -mx-2 -mt-2", children: [_jsx("div", { className: "field w-full px-2 pt-2 pb-3 lg:w-1/2 lg:pb-0", children: _jsxs("div", { className: styles.fieldWrapper, children: [_jsx("label", { htmlFor: "defaultDataSource", className: "".concat(styles.fieldLabel, " form-field-label"), children: "Default Data Source" }), _jsx("div", { className: "solid-standard-autocomplete w-full", children: _jsx(SolidAutocomplete, { disabled: !!data, value: defaultDataSourceField.selectedItem, suggestions: defaultDataSourceField.filteredItems, completeMethod: defaultDataSourceField.searchItems, onChange: defaultDataSourceField.handleChange, dropdown: true, field: "label", className: "w-full" }) }), isFormFieldValid(formik, "defaultDataSource") && (_jsx("p", { className: styles.fieldError, children: (_l = (_k = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _k === void 0 ? void 0 : _k.defaultDataSource) === null || _l === void 0 ? void 0 : _l.toString() }))] }) }), _jsx("div", { className: "field w-full px-2 pt-2 lg:w-1/2", children: _jsxs("div", { className: "".concat(styles.fieldWrapper, " relative"), children: [_jsxs("label", { htmlFor: "menuIconUrl", className: "".concat(styles.fieldLabel, " form-field-label"), children: ["Menu Icon ", _jsx("small", { className: "text-red-500 helper-text", children: "(only svg, png and jpeg are allowed)" })] }), _jsxs("div", __assign({}, getRootPropsmenuIcon(), { className: "solid-dropzone-wrapper", children: [_jsx("input", __assign({}, getInputPropsmenuIcon())), _jsx(DropzonePlaceholder, {})] })), isFormFieldValid(formik, "menuIconUrl") && (_jsx(SolidMessage, { severity: "error", text: (_o = (_m = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _m === void 0 ? void 0 : _m.menuIconUrl) === null || _o === void 0 ? void 0 : _o.toString(), className: "mt-2" })), fileDetails && (_jsxs("div", { className: "solid-file-upload-wrapper mt-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails }), _jsxs("div", { className: "flex w-full flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-bold solid-module-mobile-text-wrapper", children: fileDetails.name }), _jsx("button", { type: "button", className: "solid-file-icon-btn is-danger", onClick: handleCancelUpload, children: _jsx(SolidIcon, { name: "si-times", "aria-hidden": true }) })] }), uploadCompleted ? (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [totalSize, " of ", totalSize, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none", children: _jsx("circle", { cx: "2", cy: "2", r: "2", fill: "#C1C1C1" }) }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx("mask", { id: "mask0_2480_8635", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20", children: _jsx("rect", { width: "20", height: "20", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask0_2480_8635)", children: _jsx("path", { d: "M9.16 12.76L13.39 8.53L12.55 7.69L9.16 11.08L7.45 9.37L6.61 10.21L9.16 12.76ZM10 16C9.17 16 8.39 15.8424 7.66 15.5272C6.93 15.2124 6.295 14.785 5.755 14.245C5.215 13.705 4.7876 13.07 4.4728 12.34C4.1576 11.61 4 10.83 4 10C4 9.17 4.1576 8.39 4.4728 7.66C4.7876 6.93 5.215 5.215 5.755 5.755C6.295 5.215 6.93 4.7874 7.66 4.4722C8.39 4.1574 9.17 4 10 4C10.83 4 11.61 4.1574 12.34 4.4722C13.07 4.7874 13.705 5.215 14.245 5.755C14.785 6.295 15.2124 6.93 15.5272 7.66C15.8424 8.39 16 9.17 16 10C16 10.83 15.8424 11.61 15.5272 12.34C15.2124 13.07 14.785 13.705 14.245 14.245C13.705 14.785 13.07 15.2124 12.34 15.5272C11.61 15.8424 10.83 16 10 16Z", fill: "var(--primary-color, var(--primary))" }) })] }), "Completed"] })) : (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [uploadedSize, " of ", totalSize, _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none", children: _jsx("circle", { cx: "2", cy: "2", r: "2", fill: "#C1C1C1" }) }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M7.375 10.5V5.40625L5.75 7.03125L4.875 6.125L8 3L11.125 6.125L10.25 7.03125L8.625 5.40625V10.5H7.375ZM4.25 13C3.90625 13 3.61198 12.8776 3.36719 12.6328C3.1224 12.388 3 12.0938 3 11.75V9.875H4.25V11.75H11.75V9.875H13V11.75C13 12.0938 12.8776 12.388 12.6328 12.6328C12.388 12.8776 12.0938 13 11.75 13H4.25Z", fill: "black" }) }), "Uploading $", uploadProgress, "% Completed"] }))] })] }), _jsx(SolidProgressBar, { value: uploadProgress, showValue: false, style: { height: 4 }, className: "mt-2" })] }))] }) })] }) })] }) }), _jsx(SolidFormFooter, { params: params })] }));
+    return (_jsx("div", { className: "solid-form-wrapper", children: _jsxs("div", { className: "solid-form-section", style: { borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }, children: [isCreateMode && (_jsxs("div", { className: "solid-form-header flex flex-wrap items-center justify-between gap-3", children: [_jsx("div", { className: "flex flex-col gap-1" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SolidButton, { variant: "outline", size: "sm", type: "button", onClick: handleCancel, className: "bg-[var(--primary-color-text)]", children: "Cancel" }), shouldShowGeneralSave && formik.dirty && (_jsx(SolidButton, { size: "sm", type: "submit", form: "module-general-info-form", onClick: function () { return showError(); }, children: "Save" }))] })] })), isCreateMode ? (generalInfoContent) : (_jsx("div", { className: "solid-module-form-workspace", children: _jsx(SolidTabGroup, { value: activeWorkspaceTab, onValueChange: setActiveWorkspaceTab, className: "solid-module-form-tabs", listClassName: "solid-module-form-tablist", panelClassName: "solid-module-form-tabpanel", tabs: [
+                            {
+                                value: "general",
+                                label: _jsx("span", { className: "solid-module-form-tab-label", children: "General Info" }),
+                                content: generalInfoContent,
+                            },
+                            {
+                                value: "explorer",
+                                label: _jsx("span", { className: "solid-module-form-tab-label", children: "Explorer" }),
+                                content: _jsx(ModuleMetadataExplorer, { moduleName: data === null || data === void 0 ? void 0 : data.name, moduleId: data === null || data === void 0 ? void 0 : data.id }),
+                            },
+                        ] }) }))] }) }));
 };
 export default CreateModule;
 //# sourceMappingURL=CreateModule.js.map