@solidstarters/solid-core-ui 1.1.10 → 1.1.12

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

@@ -15,7 +15,8 @@ import FieldMetaData from "./FieldMetaData";
 import ModelMetaData from "./ModelMetaData";
 import { BackButton } from "@/components/common/BackButton";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
-
+import { Dialog } from "primereact/dialog";
+import { Divider } from "primereact/divider";
 
 interface ErrorResponseData {
   message: string;
@@ -28,6 +29,7 @@ const CreateModel = ({ data, params }: any) => {
   const toast = useRef<Toast>(null);
   const router = useRouter();
   const pathname = usePathname();
+  const [deleteEntity, setDeleteEntity] = useState(false);
   const [isLoadingData, setIsLoadingData] = useState(data ? true : false);
   const formikModelMetadataRef = useRef<any>();
   const formikFieldsMetadataRef = useRef();
@@ -262,95 +264,104 @@ const CreateModel = ({ data, params }: any) => {
 
   }, [isCreateModelError, isDeleteModelError, isUpdateModelError])
 
-
-
-
   return (
     <div className="solid-form-wrapper">
       <Toast ref={toast} />
+      <div style={{ width: '77.5%', borderRight: '1px solid var(--primary-light-color' }}>
+        <div className="solid-form-header">
+          {params.id === "new" ?
+            <>
+              <div className="flex align-items-center gap-3">
+                <BackButton />
+                <div className="form-wrapper-title">Create Model</div>
+              </div>
+              <div className="gap-3 flex">
+                <Button label="Save" size="small" onClick={handleSubmit} type="submit" />
+                <CancelButton />
+              </div>
+            </>
+            :
+            <>
+              <div className="flex align-items-center gap-3">
+                <BackButton />
+                <div className="form-wrapper-title">Edit Model</div>
+              </div>
+              <div className="gap-3 flex">
+                {data?.isSystem !== true &&
+                  <>
+                    <div>
+                      <Button label="Save" size="small" type="submit" onClick={handleSubmit} />
+                    </div>
+                    <div>
+                      <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => setDeleteEntity(true)} />
+                    </div>
+                  </>
+                }
+                <CancelButton />
+              </div>
+            </>
+          }
+        </div>
+        <div className="solid-form-stepper">
+          <SolidFormStepper />
+        </div>
+        <div className="p-4 solid-form-content">
+          <TabView
+            activeIndex={activeIndex}
+            onTabChange={(e) => {
+              if (activeIndex == 0) {
+                formikModelMetadataRef.current.handleSubmit();
+                setActiveIndex(e.index)
 
-      <div className="solid-form-header">
-        {params.id === "new" ?
-          <>
-            <div className="flex align-items-center gap-3">
-              <BackButton />
-              <div className="form-wrapper-title">Create Model</div>
-            </div>
-            <div className="gap-3 flex">
-              <Button label="Save" size="small" onClick={handleSubmit} type="submit" />
-              <CancelButton />
-            </div>
-          </>
-          :
-          <>
-            <div className="flex align-items-center gap-3">
-              <BackButton />
-              <div className="form-wrapper-title">Edit Model</div>
-            </div>
-            <div className="gap-3 flex">
-              {data?.isSystem !== true &&
-                <>
-                  <div>
-                    <Button label="Save" size="small" type="submit" onClick={handleSubmit} />
-                  </div>
-                  <div>
-                    <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={deleteModelFunction} />
-                  </div>
-                </>
               }
-              <CancelButton />
-            </div>
-          </>
-        }
+              if (activeIndex == 1) {
+                setActiveIndex(e.index)
+              }
+
+            }}
+          >
+            <TabPanel header="Model">
+              <ModelMetaData
+                modelMetaData={modelMetaData}
+                setModelMetaData={setModelMetaData}
+                allModelsNames={allModelsNames}
+                deleteModelFunction={deleteModelFunction}
+                nextTab={nextTab}
+                formikModelMetadataRef={formikModelMetadataRef}
+                params={params}
+              ></ModelMetaData>
+            </TabPanel>
+            <TabPanel header="Fields" >
+              <FieldMetaData
+                modelMetaData={modelMetaData}
+                fieldMetaData={fieldMetaData}
+                setFieldMetaData={setFieldMetaData}
+                deleteModelFunction={deleteModelFunction}
+                nextTab={nextTab}
+                formikFieldsMetadataRef={formikFieldsMetadataRef}
+                params={params}
+              ></FieldMetaData>
+            </TabPanel>
+          </TabView>
+        </div>
       </div>
-      <div className="solid-form-stepper">
-        <SolidFormStepper />
+      <div style={{ width: '22.5%' }}>
       </div>
-      <div className="p-4 solid-form-content">
-        <div className="grid">
-          <div className="col-8 mx-auto">
-            <TabView
-              activeIndex={activeIndex}
-              onTabChange={(e) => {
-                if (activeIndex == 0) {
-                  formikModelMetadataRef.current.handleSubmit();
-                  setActiveIndex(e.index)
-
-                }
-                if (activeIndex == 1) {
-                  setActiveIndex(e.index)
-                }
-
-              }}
-            >
-              <TabPanel header="Model">
-                <ModelMetaData
-                  modelMetaData={modelMetaData}
-                  setModelMetaData={setModelMetaData}
-                  allModelsNames={allModelsNames}
-                  deleteModelFunction={deleteModelFunction}
-                  nextTab={nextTab}
-                  formikModelMetadataRef={formikModelMetadataRef}
-                  params={params}
-                ></ModelMetaData>
-              </TabPanel>
-              <TabPanel header="Fields" >
-                <FieldMetaData
-                  modelMetaData={modelMetaData}
-                  fieldMetaData={fieldMetaData}
-                  setFieldMetaData={setFieldMetaData}
-                  deleteModelFunction={deleteModelFunction}
-                  nextTab={nextTab}
-                  formikFieldsMetadataRef={formikFieldsMetadataRef}
-                  params={params}
-                ></FieldMetaData>
-              </TabPanel>
-            </TabView>
+      <Dialog header="Delete Field" headerClassName="py-2" contentClassName="px-0 pb-0" visible={deleteEntity} style={{ width: '20vw' }} onHide={() => { if (!deleteEntity) return; setDeleteEntity(false); }}>
+        <Divider className="m-0" />
+        <div className="p-4">
+          <p className="m-0 solid-primary-title" style={{ fontSize: 16 }}>
+            Are you sure you want to delete this Field ?
+          </p>
+          <p className="" style={{ color: 'var{--solid-grey-500}' }}>{modelMetaData?.singularName}</p>
+          <div className="flex align-items-center gap-2 mt-3">
+            <Button label="Delete" size="small" onClick={deleteModelFunction} />
+            <Button label="Cancel" size="small" onClick={() => setDeleteEntity(false)} outlined />
           </div>
         </div>
-      </div>
-    </div >
+      </Dialog>
+    </div>
   );
 };
 
-export default CreateModel;
+export default CreateModel;

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

@@ -515,7 +515,6 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
   const pathname = usePathname();
 
   const toast = useRef<Toast>(null);
-
   const { data: fieldDefaultMetaData, isLoading, error, refetch } = useGetFieldDefaultMetaDataQuery(null);
   const [currentFields, setCurrentFields] = useState(
     fetchCurrentFields(fieldMetaData && fieldMetaData.type, fieldDefaultMetaData)
@@ -887,8 +886,8 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
     mediaEmbedded: fieldMetaData ? (fieldMetaData?.mediaEmbedded && fieldMetaData?.mediaEmbedded.toString()) : "true",
     relationType: fieldMetaData ? fieldMetaData?.relationType : null,
     relationModelSingularName: fieldMetaData ? fieldMetaData?.relationModelSingularName : null,
-    relationModelFieldName: fieldMetaData ? fieldMetaData?.relationModelFieldName : '',
-    relationCreateInverse: fieldMetaData && fieldMetaData.relationCreateInverse === false ? "false" : "true",
+    relationModelFieldName: fieldMetaData ? fieldMetaData?.relationModelFieldName : modelMetaData.pluralName || '',
+    relationCreateInverse: fieldMetaData ? fieldMetaData?.relationCreateInverse : false,
     relationCascade: fieldMetaData ? fieldMetaData?.relationCascade : 'cascade',
     relationModelModuleName: fieldMetaData ? fieldMetaData?.relationModelModuleName : modelMetaData?.module.name,
     selectionDynamicProvider: fieldMetaData ? fieldMetaData?.selectionDynamicProvider : null,
@@ -902,7 +901,10 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
     // externalIdProviderCtxt: fieldMetaData ? fieldMetaData?.externalIdProviderCtxt : "",
     isSystem: fieldMetaData ? fieldMetaData?.isSystem : false,
     columnName: fieldMetaData ? fieldMetaData?.columnName : null,
-    isUserKey: fieldMetaData ? fieldMetaData?.isUserKey : false
+    isUserKey: fieldMetaData ? fieldMetaData?.isUserKey : false,
+    relationJoinColumnName: fieldMetaData ? fieldMetaData?.relationJoinColumnName : null,
+    joinColumnName: fieldMetaData ? fieldMetaData?.joinColumnName : null,
+    relationJoinTableName: fieldMetaData ? fieldMetaData?.relationJoinTableName : null
   };
 
 
@@ -972,11 +974,10 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
 
 
 
-  const handleTypeSelect = (e: any) => {
-
+  const handleTypeSelect = (e: any, label: string) => {
 
     setShowTypeFilter(false);
-    setSelectedType({ label: e, value: e });
+    setSelectedType({ label: label, value: e });
     formik.setFieldValue("type", e);
     if (e == "email") {
       formik.setFieldValue("regexPattern", "/^[a-zA-Z0-9. _%+-]+@[a-zA-Z0-9. -]+\\. [a-zA-Z]{2,}$/");
@@ -1117,7 +1118,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
               <div className="p-d-flex p-jc-center creat-field-for form-dem">
                 <div className="p-fluid" style={{ position: 'relative' }}>
                   <div className="mb-3">
-                    <div className="form-wrapper-title">{fieldMetaData ? `Edit ${capitalize(selectedType.value)} Field` : `Add a new ${capitalize(selectedType.value)} Field`}</div>
+                    <div className="form-wrapper-title">{fieldMetaData ? `Edit ${capitalize(selectedType.label)} Field` : `Add a new ${capitalize(selectedType.label)} Field`}</div>
                   </div>
 
 
@@ -1228,9 +1229,11 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                   if (pathname.includes('create')) {
                                     formik.setFieldValue("columnName", toSnakeCase);
                                   }
+                                } else {
+                                  formik.setFieldValue("columnName", null);
                                 }
 
-                              }} checked={showColumnName}></Checkbox>
+                              }} checked={showColumnName} disabled={fieldMetaData?.id}></Checkbox>
                               <label htmlFor="ingredient1" className="form-field-label">
                                 Set Column Name
                               </label>
@@ -1714,86 +1717,13 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             </div>
                           )}
 
-
-                          {currentFields.includes("relationModelFieldName") && formik.values.relationType === "many-to-many" && (
-                            <div className="field col-6 flex-flex-column gap-2">
-                              <label
-                                htmlFor="relationModelFieldName"
-                                className="form-field-label"
-                              >
-                                Relation Model Field Name
-                              </label>
-                              <InputText
-                                type="text"
-                                id="relationModelFieldName"
-                                name="relationModelFieldName"
-                                onChange={formik.handleChange}
-                                value={formik.values.relationModelFieldName}
-                                className={classNames("", {
-                                  "p-invalid": isFormFieldValid(
-                                    formik,
-                                    "relationModelFieldName"
-                                  ),
-                                })}
-                              />
-                              {isFormFieldValid(formik, "relationModelFieldName") && (
-                                <Message
-                                  severity="error"
-                                  text={formik?.errors?.relationModelFieldName?.toString()}
-                                />
-                              )}
-
-                            </div>
-                          )}
-
-
-                          {currentFields.includes("relationCreateInverse") && formik.values.relationType === "many-to-many" && (
-                            <div className="field col-6 flex-flex-column gap-2">
-                              <label
-                                htmlFor="relationCreateInverse"
-                                className="form-field-label"
-                              >
-                                Relation Create Inverse
-                              </label>
-                              <Dropdown
-                                id="relationCreateInverse"
-                                name="relationCreateInverse"
-                                value={formik.values.relationCreateInverse}
-                                options={relationCreateInverses}
-                                onChange={(e) =>
-                                  formik.setFieldValue(
-                                    "relationCreateInverse",
-                                    e.value
-                                  )
-                                }
-                                placeholder="Select a Data Source"
-                                className={classNames("", {
-                                  "p-invalid": isFormFieldValid(
-                                    formik,
-                                    "relationCreateInverse"
-                                  ),
-                                })}
-                              />
-                              {isFormFieldValid(
-                                formik,
-                                "relationCreateInverse"
-                              ) && (
-                                  <Message
-                                    severity="error"
-                                    text={formik?.errors?.relationCreateInverse?.toString()}
-                                  />
-                                )}
-                            </div>
-                          )}
-
-
                           {currentFields.includes("relationModelModuleName") && (
                             <div className="field col-6 flex-flex-column gap-2">
                               <label
                                 htmlFor="relationModelModuleName"
                                 className="form-field-label"
                               >
-                                Relation Model Module Name
+                                Co-Module Name
                               </label>
 
                               <SingleSelectAutoCompleteField
@@ -1806,7 +1736,12 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                 valueKey="name"
                                 searchData={searchRelationModelModuleNames}
                                 existingData={formik.values.relationModelModuleName}
-                                additionalAction={(e: any) => formik.setFieldValue("relationModelSingularName", "")}
+                                additionalAction={(e: any) => {
+                                  formik.setFieldValue("relationModelSingularName", "");
+                                  formik.setFieldValue("relationJoinColumnName", "");
+                                  formik.setFieldValue("joinColumnName", "");
+                                  formik.setFieldValue("relationJoinTableName", "");
+                                }}
                               />
 
                               {/* <AutoComplete
@@ -1850,7 +1785,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                   htmlFor="relationModelSingularName"
                                   className="form-field-label"
                                 >
-                                  Relation Model Singular Name
+                                  Co-Model Name
                                 </label>
 
 
@@ -1891,6 +1826,150 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                               </div>
                             )}
 
+                          {currentFields.includes("relationCreateInverse") && formik.values.relationType === "many-to-many" && (
+                            <div className="field col-6 flex flex-column gap-2">
+                              <label htmlFor="relationCreateInverse" className="form-field-label">
+                                Relation Create Inverse
+                              </label>
+                              <div className="flex align-items-center">
+                                <Checkbox
+                                  inputId="relationCreateInverse"
+                                  name="relationCreateInverse"
+                                  checked={Boolean(formik.values.relationCreateInverse)}
+                                  onChange={(e) => formik.setFieldValue("relationCreateInverse", e.checked)}
+                                />
+                                <label htmlFor="relationCreateInverse" className="ml-2">Enable</label>
+                              </div>
+                              {isFormFieldValid(formik, "relationCreateInverse") && (
+                                <Message severity="error" text={formik?.errors?.relationCreateInverse?.toString()} />
+                              )}
+                            </div>
+                          )}
+
+                          {currentFields.includes("relationModelFieldName") && formik.values.relationCreateInverse && formik.values.relationType === "many-to-many" && (
+                            <div className="field col-6 flex-flex-column gap-2">
+                              <label
+                                htmlFor="relationModelFieldName"
+                                className="form-field-label"
+                              >
+                                Field Name on Inverse Side
+                              </label>
+                              <InputText
+                                type="text"
+                                id="relationModelFieldName"
+                                name="relationModelFieldName"
+                                onChange={formik.handleChange}
+                                value={formik.values.relationModelFieldName}
+                                className={classNames("", {
+                                  "p-invalid": isFormFieldValid(
+                                    formik,
+                                    "relationModelFieldName"
+                                  ),
+                                })}
+                              />
+                              {isFormFieldValid(formik, "relationModelFieldName") && (
+                                <Message
+                                  severity="error"
+                                  text={formik?.errors?.relationModelFieldName?.toString()}
+                                />
+                              )}
+
+                            </div>
+                          )}
+
+                          {currentFields.includes("relationJoinTableName") && formik.values.relationType === "many-to-many" && (
+                            <div className="field col-6 flex-flex-column gap-2">
+                              <label
+                                htmlFor="relationJoinTableName"
+                                className="form-field-label"
+                              >
+                                Relation Join Table Name
+                              </label>
+                              <InputText
+                                type="text"
+                                id="relationJoinTableName"
+                                name="relationJoinTableName"
+                                onChange={formik.handleChange}
+                                value={formik.values.relationJoinTableName}
+                                className={classNames("", {
+                                  "p-invalid": isFormFieldValid(
+                                    formik,
+                                    "relationJoinTableName"
+                                  ),
+                                })}
+                              />
+                              {isFormFieldValid(formik, "relationJoinTableName") && (
+                                <Message
+                                  severity="error"
+                                  text={formik?.errors?.relationJoinTableName?.toString()}
+                                />
+                              )}
+
+                            </div>
+                          )}
+
+                          {currentFields.includes("joinColumnName") && formik.values.relationType === "many-to-many" && (
+                            <div className="field col-6 flex-flex-column gap-2">
+                              <label
+                                htmlFor="joinColumnName"
+                                className="form-field-label"
+                              >
+                                Join Column Name
+                              </label>
+                              <InputText
+                                type="text"
+                                id="joinColumnName"
+                                name="joinColumnName"
+                                onChange={formik.handleChange}
+                                value={formik.values.joinColumnName}
+                                className={classNames("", {
+                                  "p-invalid": isFormFieldValid(
+                                    formik,
+                                    "joinColumnName"
+                                  ),
+                                })}
+                              />
+                              {isFormFieldValid(formik, "joinColumnName") && (
+                                <Message
+                                  severity="error"
+                                  text={formik?.errors?.joinColumnName?.toString()}
+                                />
+                              )}
+
+                            </div>
+                          )}
+
+                          {currentFields.includes("relationJoinColumnName") && formik.values.relationType === "many-to-many" && (
+                            <div className="field col-6 flex-flex-column gap-2">
+                              <label
+                                htmlFor="relationJoinColumnName"
+                                className="form-field-label"
+                              >
+                                Relation Join Column Name
+                              </label>
+                              <InputText
+                                type="text"
+                                id="relationJoinColumnName"
+                                name="relationJoinColumnName"
+                                onChange={formik.handleChange}
+                                value={formik.values.relationJoinColumnName}
+                                className={classNames("", {
+                                  "p-invalid": isFormFieldValid(
+                                    formik,
+                                    "relationJoinColumnName"
+                                  ),
+                                })}
+                              />
+                              {isFormFieldValid(formik, "relationJoinColumnName") && (
+                                <Message
+                                  severity="error"
+                                  text={formik?.errors?.relationJoinColumnName?.toString()}
+                                />
+                              )}
+
+                            </div>
+                          )}
+
                           {currentFields.includes("selectionDynamicProvider") && (
                             <div className="field col-6 flex-flex-column gap-2">
                               <label
@@ -1953,7 +2032,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                 htmlFor="selectionValueType"
                                 className="form-field-label"
                               >
-                                Selection Value Type
+                                Select Value Type
                               </label>
                               <Dropdown
                                 id="selectionValueType"
@@ -2267,7 +2346,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
 
                         </div>
                       )}
-                      {(currentFields.includes("regexPattern") || currentFields.includes("min") || currentFields.includes("max") || currentFields.includes("ormType")) && ormTypeOptions &&
+                      {(currentFields.includes("regexPattern") || currentFields.includes("min") || currentFields.includes("max") || currentFields.includes("ormType")) && ormTypeOptions && formik.values.relationType !== "many-to-many" &&
                         <>
                           <p className="form-wrapper-heading text-base">Validations</p>
                           <div className="formgrid grid">

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

@@ -45,7 +45,7 @@ const FieldSelector = ({ handleTypeSelect, modelMetaData }: any) => {
                     <div className="field col-6 mt-3" key={index}>
                         <div
                             className={`flex align-items-center gap-3 type-field-card ${selectedField === field.value ? 'selected' : ''}`}
-                            onClick={() => handleTypeSelect(field.value)}
+                            onClick={() => handleTypeSelect(field.value, field.label)}
                         >
                             <i className={`pi ${field.icon}`}></i>
                             <div className=''>

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

@@ -310,17 +310,18 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                     existingData={formik.values.dataSource}
                     additionalAction={(e: any) => formik.setFieldValue("dataSourceType", e.target.value.type)}
                   />
+                  {formik.values.dataSourceType && <p className="form-field-label">Your datasource will connect to a {formik.values.dataSourceType} database</p>}
                   {isFormFieldValid(formik, "dataSource") && (
                     <Message severity="error" text={formik?.errors?.dataSource?.toString()} />
                   )}
                 </div>
 
 
-                <div className="field col-12 flex flex-column gap-2 my-4">
+                {/* <div className="field col-12 flex flex-column gap-2 my-4">
                   <label htmlFor="dataSourceType" className="form-field-label">
                     Data Source Type
                   </label>
-                  {/* <SingleSelectAutoCompleteField
+                  <SingleSelectAutoCompleteField
                             key="dataSourceType"
                             formik={formik}
                             isFormFieldValid={isFormFieldValid}
@@ -331,7 +332,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                             valueKey="value"
                             searchData={serachDataSourceType}
                             existingData={formik.values.dataSourceType}
-                          /> */}
+                          /> 
                   <InputText
                     disabled
                     type="text"
@@ -348,12 +349,12 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                   {isFormFieldValid(formik, "dataSourceType") && (
                     <Message severity="error" text={formik?.errors?.dataSourceType?.toString()} />
                   )}
-                </div>
+                </div>*/}
               </div>
               <Divider />
               <p className="form-wrapper-heading text-base">Configurations</p>
               <div className="grid formgrid">
-                {params.id === 'new' &&
+                {/* {params.id === 'new' &&
 
                   <div className="field col-6">
                     <div className="flex align-items-center gap-2">
@@ -375,7 +376,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                         text={formik?.errors?.isSystem?.toString()}
                       />
                     )}
-                  </div>}
+                  </div>} */}
                 <div className="field col-6">
                   <div className="flex align-items-center gap-2">
                     <Checkbox
@@ -390,7 +391,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                       Enable Soft Delete
                     </label>
                   </div>
-                  {params.id !== 'new' && <p className="form-field-label">Soft Delete is disabled in edit mode</p>}
+                  {params.id !== 'new' && <p className="form-field-label">Soft-delete can only be set during initial creation to maintain data integrity</p>}
                   {isFormFieldValid(formik, "enableSoftDelete") && (
                     <Message
                       severity="error"