@solidstarters/solid-core-ui 1.1.6 → 1.1.7

package/src/components/core/form/fields/SolidTimeField.tsx

@@ -41,7 +41,7 @@ export class SolidTimeField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
@@ -54,31 +54,26 @@ export class SolidTimeField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
-                </div>
-                <div className="flex-auto">
-                    <Calendar
-                        disabled={formDisabled || fieldDisabled}
-                        ref={calendarRef} // Attach ref to Calendar
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={formik.handleChange}
-                        //@ts-ignore
-                        value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name] : Date()}
-                        // dateFormat="mm/dd/yy"
-                        // placeholder="mm/dd/yyyy hh:mm"
-                        hideOnDateTimeSelect
-                        timeOnly
-                        showTime className=""
-                        hourFormat="24"
-
-                    />
-                </div>
+                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                </label>
+                <Calendar
+                    disabled={formDisabled || fieldDisabled}
+                    ref={calendarRef} // Attach ref to Calendar
+                    id={fieldLayoutInfo.attrs.name}
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    onChange={formik.handleChange}
+                    //@ts-ignore
+                    value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name] : Date()}
+                    // dateFormat="mm/dd/yy"
+                    // placeholder="mm/dd/yyyy hh:mm"
+                    hideOnDateTimeSelect
+                    timeOnly
+                    showTime className=""
+                    hourFormat="24"
 
+                />
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx

@@ -97,7 +97,7 @@ export class SolidRelationManyToManyField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -115,24 +115,26 @@ export class SolidRelationManyToManyField implements ISolidField {
 
 
         return (
-            <div className={className}>
-                <div className="s-input">
-                    {fieldLayoutInfo.attrs.renderMode === "checkbox" &&
-                        this.renderCheckBoxMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                    }
-                    {(!fieldLayoutInfo.attrs.renderMode || fieldLayoutInfo.attrs.renderMode === "autocomplete") &&
-                        this.renderAutoCompleteMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                    }
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (<Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />)}
-                </div>
-            </div>
+            <>
+                {/* <div className={className}> */}
+                {fieldLayoutInfo.attrs.renderMode === "checkbox" &&
+                    <div className={className}>
+                        {this.renderCheckBoxMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)}
+                    </div>
+                }
+                {(!fieldLayoutInfo.attrs.renderMode || fieldLayoutInfo.attrs.renderMode === "autocomplete") &&
+                    this.renderAutoCompleteMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                }
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (<Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />)}
+                {/* </div> */}
+            </>
         );
     }
 
     renderCheckBoxMode(formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
         // auto complete specific code. 
@@ -232,8 +234,10 @@ export class SolidRelationManyToManyField implements ISolidField {
 
             return (
                 <div className={className}>
-                    <div className="flex align-items-center gap-2">
-                        {capitalize(fieldLayoutInfo.attrs.name)}
+                    <div className="flex align-items-center gap-3">
+                        <label className="form-field-label">
+                            {capitalize(fieldLayoutInfo.attrs.name)}
+                        </label>
                         {fieldLayoutInfo.attrs.inlineCreate === "true" &&
                             this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
                         }
@@ -259,18 +263,18 @@ export class SolidRelationManyToManyField implements ISolidField {
         return (
             <div>
 
-                <Panel toggleable headerTemplate={headerTemplate} style={{ marginBottom: "30px" }}>
+                <Panel toggleable headerTemplate={headerTemplate}>
 
-                    <div style={{ display: "grid", gridTemplateColumns: "auto auto" }}>
-                        {autoCompleteItems && autoCompleteItems.map((a: any) => {
+                    <div className="formgrid grid">
+                        {autoCompleteItems && autoCompleteItems.map((a: any, i: number) => {
                             return (
-                                <div key={a.label} className="p-field-checkbox many-to-many-checkbox md:col-6 sm:col-12">
+                                <div key={a.label} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
                                     <Checkbox
                                         inputId={a.label}
                                         checked={formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.label === a.label)}
                                         onChange={() => handleCheckboxChange(a)}
                                     />
-                                    <label htmlFor={a.label}> {a.label}</label>
+                                    <label htmlFor={a.label} className="form-field-label m-0"> {a.label}</label>
                                 </div>
                             )
                         })}
@@ -285,7 +289,7 @@ export class SolidRelationManyToManyField implements ISolidField {
     renderAutoCompleteMode(formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
         // auto complete specific code. 
@@ -354,32 +358,24 @@ export class SolidRelationManyToManyField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
-
-                    </label>
-                </div>
-                <div className="s-input">
-                    <div className="flex align-items-center justify-content-center">
-                        <AutoComplete
-                            readOnly={readOnly}
-                            disabled={disabled}
-                            multiple
-                            {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                            id={fieldLayoutInfo.attrs.name}
-                            field="label"
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                            dropdown
-                            className="w-full autocomplete-small-input"
-                            suggestions={autoCompleteItems}
-                            completeMethod={autoCompleteSearch}
-                            onChange={formik.handleChange} />
-                        {fieldLayoutInfo.attrs.inlineCreate === "true" &&
-                            this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                        }
-                    </div>
-
-                </div>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+
+                </label>
+                <AutoComplete
+                    readOnly={readOnly}
+                    disabled={disabled}
+                    multiple
+                    {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                    id={fieldLayoutInfo.attrs.name}
+                    field="label"
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    dropdown
+                    suggestions={autoCompleteItems}
+                    completeMethod={autoCompleteSearch}
+                    onChange={formik.handleChange} />
+                {fieldLayoutInfo.attrs.inlineCreate === "true" &&
+                    this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                }
             </div>
         );
     }
@@ -388,7 +384,7 @@ export class SolidRelationManyToManyField implements ISolidField {
 
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
         const params = {
@@ -406,22 +402,25 @@ export class SolidRelationManyToManyField implements ISolidField {
             }),
             modelName: camelCase(this.fieldContext.fieldMetadata.relationModelSingularName)
         }
+        // console.log("fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ", fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width);
 
         return (
-            <div className="many-to-many-add" >
-                <Button icon="pi pi-plus"
+            <div >
+                <Button
+                    icon="pi pi-plus"
                     rounded
                     outlined
                     aria-label="Filter"
                     type="button"
+                    size="small"
                     onClick={() => setvisibleCreateRelationEntity(true)}
+                    className="custom-add-button"
                 />
                 <Dialog
                     header=""
                     showHeader={false}
                     visible={visibleCreateRelationEntity}
-                    className="many-to-many-creat-form-dialog"
-                    style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "40vw" }}
+                    style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw" }}
                     onHide={() => {
                         if (!visibleCreateRelationEntity) return;
                         setvisibleCreateRelationEntity(false);

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -54,7 +54,7 @@ export class SolidRelationManyToOneField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
 
@@ -103,35 +103,30 @@ export class SolidRelationManyToOneField implements ISolidField {
                 setAutoCompleteItems(autoCompleteItems);
             }
         }
-console.log("formik",formik.values);
+        console.log("formik", formik.values);
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
-
-                    </label>
-                </div>
-                <div className="s-input">
-                    <AutoComplete
-                        readOnly={formReadonly || fieldReadonly}
-                        disabled={formDisabled || fieldDisabled}
-                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                        id={fieldLayoutInfo.attrs.name}
-                        field="label"
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        dropdown
-                        className="w-full small-input"
-                        suggestions={autoCompleteItems}
-                        completeMethod={autoCompleteSearch}
-                        onChange={formik.handleChange} />
-
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
-                </div>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+
+                </label>
+                <AutoComplete
+                    readOnly={formReadonly || fieldReadonly}
+                    disabled={formDisabled || fieldDisabled}
+                    {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                    id={fieldLayoutInfo.attrs.name}
+                    field="label"
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    dropdown
+                    suggestions={autoCompleteItems}
+                    completeMethod={autoCompleteSearch}
+                    onChange={formik.handleChange} />
+
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }

package/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx

@@ -54,7 +54,7 @@ export class SolidRelationOneToManyField implements ISolidField {
         const fieldMetadata = this.fieldContext.fieldMetadata;
 
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12 flex flex-column gap-2 mt-3';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -132,10 +132,10 @@ export class SolidRelationOneToManyField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}&nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}</label>
-                </div>
-                <br></br>
+                {/* <div className="justify-content-center align-items-center"> */}
+                    <label htmlFor={fieldLayoutInfo.attrs.name}  className="form-field-label">{fieldLabel}&nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}</label>
+                {/* </div>
+                <br></br> */}
                 {listViewParams &&
                     <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
                 }
@@ -183,3 +183,4 @@ export class SolidRelationOneToManyField implements ISolidField {
         )
     }
 }
+

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

@@ -13,6 +13,8 @@ import qs from "qs";
 import { useEffect, useRef, useState } from "react";
 import FieldMetaData from "./FieldMetaData";
 import ModelMetaData from "./ModelMetaData";
+import { BackButton } from "@/components/common/BackButton";
+import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 
 
 interface ErrorResponseData {
@@ -264,75 +266,88 @@ const CreateModel = ({ data, params }: any) => {
 
 
   return (
-    <div className="card relative">
+    <div className="solid-form-wrapper">
       <Toast ref={toast} />
 
-      <div className="absolute z-3 right-0 " style={{ top: 5 }}>
-        {params.id === "new" ? <div className="flex gap-3 justify-content-between">
-          <div className="form-wrapper-title"></div>
-          <div className="gap-3 flex">
-            <div>
-              <Button label="Save" size="small" onClick={handleSubmit} type="submit" className="small-button" />
+      <div 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>
-            <CancelButton />
-          </div>
-        </div> :
-          <div className="flex gap-3 justify-content-between">
-            <h1 className="m-0"></h1>
             <div className="gap-3 flex">
               {data?.isSystem !== true &&
                 <>
                   <div>
-                    <Button label="Save" type="submit" className="small-button" onClick={handleSubmit} />
+                    <Button label="Save" size="small" type="submit" onClick={handleSubmit} />
                   </div>
                   <div>
-                    <Button outlined label="Delete" className="small-button" severity="danger" type="button" onClick={deleteModelFunction} />
+                    <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={deleteModelFunction} />
                   </div>
                 </>
               }
-
               <CancelButton />
             </div>
-          </div>
+          </>
         }
       </div>
-
-      <TabView
-        activeIndex={activeIndex}
-        onTabChange={(e) => {
-          if (activeIndex == 0) {
-            formikModelMetadataRef.current.handleSubmit();
-            setActiveIndex(e.index)
-
-          }
-          if (activeIndex == 1) {
-            setActiveIndex(e.index)
-          }
-
-        }}
-      >
-        <TabPanel header="Model">
-          <ModelMetaData
-            modelMetaData={modelMetaData}
-            setModelMetaData={setModelMetaData}
-            allModelsNames={allModelsNames}
-            deleteModelFunction={deleteModelFunction}
-            nextTab={nextTab}
-            formikModelMetadataRef={formikModelMetadataRef}
-            params={params}
-          ></ModelMetaData>
-        </TabPanel>
-        <TabPanel header="Fields" >
-          <FieldMetaData
-            modelMetaData={modelMetaData}
-            fieldMetaData={fieldMetaData}
-            setFieldMetaData={setFieldMetaData}
-            deleteModelFunction={deleteModelFunction}
-            nextTab={nextTab}
-            formikFieldsMetadataRef={formikFieldsMetadataRef}
-          ></FieldMetaData>
-        </TabPanel>
-      </TabView>
+      <div className="solid-form-stepper">
+        <SolidFormStepper />
+      </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}
+                ></FieldMetaData>
+              </TabPanel>
+            </TabView>
+          </div>
+        </div>
+      </div>
     </div >
   );
 };

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

@@ -44,11 +44,12 @@ const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteM
         {rowData.isSystem !== true &&
           <Button
             icon="pi pi-pencil"
+            text
             onClick={() => {
               setSelectedFieldMetaData(rowData);
               setVisiblePopup(true);
             }}
-            className="p-button-rounded p-button-text"
+            size="small"
           />
         }
       </>
@@ -65,7 +66,7 @@ const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteM
     return (
       <>
         {(pathname.includes('create') || rowData.isSystem !== true) &&
-          <Button icon="pi pi-trash" onClick={() => deleteRow(rowData)} className="p-button-rounded p-button-danger p-button-text" />
+          <Button icon="pi pi-trash" text severity="danger" onClick={() => deleteRow(rowData)} size="small" />
 
         }
       </>
@@ -102,31 +103,26 @@ const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteM
                     setVisiblePopup(true)
                   }
                 }} size="small"
-                className="small-button"
               />
             }
           </div>
-          <div className="card">
-            <DataTable value={fieldMetaData} dataKey="id"
-              tableStyle={{ minWidth: '50rem' }} size="small" className="custom-table" rowClassName={() => 'custom-row-height'}>
-              <Column field="displayName" header="Display Name" headerClassName="table-header-fs"></Column>
-              <Column field="name" header="Name" headerClassName="table-header-fs"></Column>
-              <Column field="type" header="Type" headerClassName="table-header-fs"></Column>
-
-              {modelMetaData.isSystem !== true &&
-                <Column body={editTemplate} header="Edit" headerClassName="table-header-fs" style={{ width: '10%' }} />
-              }
-              {modelMetaData.isSystem !== true &&
-                <Column body={deleteTemplate} header="Delete" headerClassName="table-header-fs" style={{ width: '10%' }} />
-              }
-            </DataTable>
-          </div>
+          <DataTable value={fieldMetaData} dataKey="id"
+            tableStyle={{ minWidth: '50rem' }} size="small">
+            <Column field="displayName" header="Display Name" headerClassName="table-header-fs"></Column>
+            <Column field="name" header="Name" headerClassName="table-header-fs"></Column>
+            <Column field="type" header="Type" headerClassName="table-header-fs"></Column>
+
+            {modelMetaData.isSystem !== true &&
+              <Column body={editTemplate} header="Edit" headerClassName="table-header-fs" style={{ width: '10%' }} />
+            }
+            {modelMetaData.isSystem !== true &&
+              <Column body={deleteTemplate} header="Delete" headerClassName="table-header-fs" style={{ width: '10%' }} />
+            }
+          </DataTable>
           <Dialog
-            className="field-poopup-container"
             header=""
             visible={visiblePopup}
             style={{ width: "40vw" }}
-            contentStyle={{ borderRadius: 8 }}
             onHide={() => {
               if (!visiblePopup) return;
 
@@ -145,5 +141,4 @@ const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteM
 
   );
 };
-
 export default FieldMetaData;