@solidstarters/solid-core-ui 1.1.11 → 1.1.13

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 || 'field col-12 flex flex-column gap-2 mt-3';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -151,7 +151,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 || 'col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
 

package/src/components/core/list/SolidListView.tsx

@@ -31,6 +31,8 @@ import { SolidConfigureLayoutElement } from '../common/SolidConfigureLayoutEleme
 import { FilterIcon } from '../../modelsComponents/filterIcon';
 import { OverlayPanel } from "primereact/overlaypanel";
 import { Toast } from "primereact/toast";
+import { Divider } from "primereact/divider";
+
 const getRandomInt = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
@@ -443,8 +445,12 @@ export const SolidListView = (params: SolidListViewParams) => {
     solidGlobalSearchElementRef.current.clearFilter()
   };
 
-  const [solidsolidViewDataId, setSolidViewDataId] = useState<number | null>()
+  const [solidsolidViewDataId, setSolidViewDataId] = useState<number | null>();
+  const [solidFieldName, setSolidFieldName] = useState<string>("")
+
   const op = useRef(null)
+  const [deleteEntity, setDeleteEntity] = useState(false);
+
 
   // clickable link allowing one to open the detail / form view.
   const detailsBodyTemplate = (solidViewData: any) => {
@@ -458,7 +464,8 @@ export const SolidListView = (params: SolidListViewParams) => {
           // @ts-ignore 
           {
             op.current.toggle(e);
-            setSolidViewDataId(solidViewData.id)
+            setSolidViewDataId(solidViewData.id);
+            setSolidFieldName(solidViewData?.singularName)
           }
           }
 
@@ -497,8 +504,30 @@ export const SolidListView = (params: SolidListViewParams) => {
               icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                 <path d="M4.66666 14C4.29999 14 3.9861 13.8694 3.72499 13.6083C3.46388 13.3472 3.33332 13.0333 3.33332 12.6667V4H2.66666V2.66667H5.99999V2H9.99999V2.66667H13.3333V4H12.6667V12.6667C12.6667 13.0333 12.5361 13.3472 12.275 13.6083C12.0139 13.8694 11.7 14 11.3333 14H4.66666ZM11.3333 4H4.66666V12.6667H11.3333V4ZM5.99999 11.3333H7.33332V5.33333H5.99999V11.3333ZM8.66666 11.3333H9.99999V5.33333H8.66666V11.3333Z" fill="#4B4D52" />
               </svg>}
-              onClick={() => deleteSolidSingleEntiry(solidViewData.id)}
+              onClick={() => setDeleteEntity(true)}
             />
+            {solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons &&
+              solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons.map((rowAction: any) => {
+                return (
+                  <Button
+                    text
+                    size="small"
+                    icon={rowAction?.attrs?.className ? rowAction?.attrs?.className : "pi pi-pencil"}
+                    onClick={() => {
+                      setListRowActionData({
+                        modelName: params.modelName,
+                        moduleName: params.moduleName,
+                        rowAction: rowAction,
+                        rowData: solidViewData,
+                        closeListViewRowActionPopup: closeListViewRowActionPopup
+
+                      });
+                      setListViewRowActionPopupState(true)
+                    }
+                    }
+                  />
+                );
+              })}
           </div>
         </OverlayPanel>
       </div>
@@ -649,7 +678,7 @@ export const SolidListView = (params: SolidListViewParams) => {
   return (
     <>
       <div className="page-header">
-      <Toast ref={toast} />
+        <Toast ref={toast} />
         <div className="flex gap-3 align-items-center">
 
 
@@ -658,10 +687,9 @@ export const SolidListView = (params: SolidListViewParams) => {
             label="Delete"
             size="small"
             onClick={() => setDialogVisible(true)}
-            className="small-button"
             severity="danger"
           />}
-          {isFilterApplied &&
+          {/* {isFilterApplied &&
             <Button
               type="button"
               icon="pi pi-filter-slash"
@@ -671,10 +699,10 @@ export const SolidListView = (params: SolidListViewParams) => {
               onClick={clearFilter}
               className="small-button"
             />
-          }
+          } */}
 
           {solidListViewMetaData?.data?.solidView?.layout?.attrs?.enableGlobalSearch === true && params.embeded === false &&
-            <SolidGlobalSearchElement ref={solidGlobalSearchElementRef} viewData={solidListViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}  setShowArchived={setShowArchived} showArchived={showArchived}></SolidGlobalSearchElement>
+            <SolidGlobalSearchElement filters={filters} clearFilter={clearFilter} ref={solidGlobalSearchElementRef} viewData={solidListViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}></SolidGlobalSearchElement>
           }
         </div>
         <div className="flex align-items-center gap-3">
@@ -684,12 +712,12 @@ export const SolidListView = (params: SolidListViewParams) => {
           }
           {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded == true && params.inlineCreate == true &&
             // < SolidCreateButton url={createButtonUrl} />
-            <Button type="button" icon="pi pi-plus" label="Add" size='small' className='small-button'
+            <Button type="button" icon="pi pi-plus" label="Add" size='small'
               onClick={() => params.handlePopUpOpen(true)}
             ></Button>
           }
-          {showArchived && <Button type="button" icon="pi pi-refresh" label="Recover" size='small' severity="warning"
-              onClick={() => setRecoverDialogVisible(true)}
+          {showArchived && <Button type="button" icon="pi pi-refresh" label="Recover" size='small' severity="secondary"
+            onClick={() => setRecoverDialogVisible(true)}
           ></Button>}
           <SolidLayoutViews
             sizeOptions={sizeOptions}
@@ -700,7 +728,7 @@ export const SolidListView = (params: SolidListViewParams) => {
             view={view}
           />
           {params.embeded === false &&
-            <SolidConfigureLayoutElement></SolidConfigureLayoutElement>
+            <SolidConfigureLayoutElement setShowArchived={setShowArchived} showArchived={showArchived} viewData={solidListViewMetaData}></SolidConfigureLayoutElement>
           }
           {/* {params.embeded === false &&
             <SolidListViewOptions></SolidListViewOptions>
@@ -749,39 +777,15 @@ export const SolidListView = (params: SolidListViewParams) => {
 
           {renderColumnsDynamically(listViewMetaData)}
           {actionsAllowed.includes(`${updatePermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.edit !== false &&
-            <Column body={(rowData) => (
-              rowData.deletedAt ? (
+            <Column frozen alignFrozen="right" body={(rowData) => (
+              rowData?.deletedAt ? (
                 <a onClick={() => recoverById(rowData.id)} className="retrieve-button">
-                  <i className="pi pi-refresh" style={{ fontSize: "1rem" }}/>
+                  <i className="pi pi-refresh" style={{ fontSize: "1rem" }} />
                 </a>
               ) :
                 detailsBodyTemplate(rowData)
             )}></Column>
           }
-          {solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons &&
-            solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons.map((rowAction: any) => {
-              return (
-                <Column
-                  key={rowAction}
-                  body={(rowData) => (
-                    <a onClick={() => {
-                      setListRowActionData({
-                        modelName: params.modelName,
-                        moduleName: params.moduleName,
-                        rowAction: rowAction,
-                        rowData: rowData,
-                        closeListViewRowActionPopup: closeListViewRowActionPopup
-
-                      });
-                      setListViewRowActionPopupState(true)
-                    }
-                    }>
-                      <i className={rowAction?.attrs?.className ? rowAction?.attrs?.className : "pi pi-pencil"} /> {/* PrimeIcons pencil icon */}
-                    </a>
-                  )}
-                />
-              );
-            })}
         </DataTable>
       </div>
       <Dialog
@@ -790,8 +794,8 @@ export const SolidListView = (params: SolidListViewParams) => {
         modal
         footer={() => (
           <div className="flex justify-content-center">
-            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={deleteBulk} />
-            <Button label="No" icon="pi pi-times" className='small-button' onClick={onDeleteClose} />
+            <Button label="Yes" icon="pi pi-check" severity="danger" autoFocus onClick={deleteBulk} />
+            <Button label="No" icon="pi pi-times" onClick={onDeleteClose} />
           </div>
         )}
         onHide={() => setDialogVisible(false)}
@@ -805,8 +809,8 @@ export const SolidListView = (params: SolidListViewParams) => {
         modal
         footer={() => (
           <div className="flex justify-content-center">
-            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={recoverAll} />
-            <Button label="No" icon="pi pi-times" className='small-button' onClick={() => setRecoverDialogVisible(false)} />
+            <Button label="Yes" icon="pi pi-check" severity="danger" autoFocus onClick={recoverAll} />
+            <Button label="No" icon="pi pi-times" onClick={() => setRecoverDialogVisible(false)} />
           </div>
         )}
         onHide={() => setRecoverDialogVisible(false)}
@@ -823,6 +827,19 @@ export const SolidListView = (params: SolidListViewParams) => {
           <ListViewRowActionPopup context={listViewRowActionData}></ListViewRowActionPopup>
         </Dialog>
       }
+      <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}' }}>{solidFieldName}</p>
+          <div className="flex align-items-center gap-2 mt-3">
+            <Button label="Delete" size="small" onClick={() => { deleteSolidSingleEntiry(solidsolidViewDataId); setDeleteEntity(false); }} />
+            <Button label="Cancel" size="small" onClick={() => setDeleteEntity(false)} outlined />
+          </div>
+        </div>
+      </Dialog>
     </>
   );
 };

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;