@solidstarters/solid-core-ui 1.1.16 → 1.1.18

package/src/components/core/form/SolidFormLayouts.tsx

@@ -0,0 +1,93 @@
+"use client"
+import { useGetmodelByIdQuery } from "@/redux/api/modelApi";
+import { useGetmoduleByIdQuery } from "@/redux/api/moduleApi";
+import { useGetusersByIdQuery } from "@/redux/api/userApi";
+import { useEffect } from "react";
+import CreateModel from "../model/CreateModel";
+import CreateModule from "../module/CreateModule";
+import CreateUser from "../users/CreateUser";
+import SolidFormView from "./SolidFormView";
+import { camelCase } from "change-case";
+
+type SolidViewParams = {
+    params: {
+        moduleName: string;
+        modelName: string;
+        id: string;
+    };
+};
+
+const SolidFormLayouts = ({ params }: any) => {
+
+    const {
+        data: modelData,
+        error,
+        isLoading,
+        isError,
+        refetch
+    } = useGetmodelByIdQuery(params.id);
+    useEffect(() => {
+        refetch();
+    }, [refetch]);
+
+    const {
+        data: moduleData,
+        error: moduleError,
+        isLoading: isModuleLoading,
+        isError: isModuleError,
+        refetch: refetchModule
+    } = useGetmoduleByIdQuery(params.id);
+    useEffect(() => {
+        refetchModule();
+    }, [refetchModule]);
+
+    const {
+        data: userData,
+        error: usererror,
+        isLoading: isuserLoading,
+        isError: isuserError,
+        refetch: refetchuser
+    } = useGetusersByIdQuery(params.id);
+    useEffect(() => {
+        refetchuser();
+    }, [refetchuser]);
+
+    return (
+        <div className="page-parent-wrapper">
+            {params.modelName === "model-metadata" &&
+                // <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+                (params.id === "new" ?
+                    <CreateModel params={params}></CreateModel>
+                    :
+                    <CreateModel params={params} data={modelData?.data}></CreateModel>
+                )
+            }
+            {params.modelName === "module-metadata" &&
+                // <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+                (params.id === "new" ?
+                    <CreateModule params={params}></CreateModule>
+                    :
+                    <CreateModule params={params} data={moduleData?.data}></CreateModule>
+                )
+            }
+
+            {params.modelName === "user" &&
+                // <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+                (params.id === "new" ?
+                    <CreateUser params={params}></CreateUser>
+                    :
+                    <CreateUser params={params} data={userData?.data}></CreateUser>
+                )
+            }
+
+            {params.modelName === "field-metadata" &&
+                <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+            }
+            {params.modelName !== "field-metadata" && params.modelName !== "model-metadata" && params.modelName !== "module-metadata" && params.modelName !== "user" &&
+                <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+            }
+        </div>
+    )
+}
+
+export default SolidFormLayouts

package/src/components/core/form/SolidFormView.tsx

@@ -34,6 +34,7 @@ import { SolidShortTextField } from "./fields/SolidShortTextField";
 import { SolidTimeField } from "./fields/SolidTimeField";
 import { BackButton } from "@/components/common/BackButton";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
+import { OverlayPanel } from "primereact/overlaypanel";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -297,6 +298,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const errorFields: string[] = [];
 
     const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
+    const op = useRef(null);
+
     useEffect(() => {
 
         const fetchPermissions = async () => {
@@ -678,6 +681,61 @@ const SolidFormView = (params: SolidFormViewProps) => {
             setDeleteDialogVisible(false);
         }
 
+        const formActionDropdown = () => {
+            return (
+                <div>
+                    <Button
+                        outlined
+                        severity="secondary"
+                        type="button"
+                        icon={
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                                <path d="M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14Z" fill="#4B4D52" />
+                            </svg>
+                        }
+                        size="small"
+                        className="bg-primary-reverse p-0"
+                        style={{
+                            height: 32,
+                            width: 32
+                        }}
+                        onClick={(e) =>
+                            // @ts-ignore 
+                            op.current.toggle(e)
+                        }
+                    />
+                    <OverlayPanel ref={op} className="solid-custom-overlay">
+                        <div className="flex flex-column gap-1 p-1">
+                            <Button
+                                text
+                                type="button"
+                                className="w-8rem text-left gap-2 text-color"
+                                label="Duplicate"
+                                size="small"
+                                iconPos="left"
+                                icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                    <path d="M6 11.9997C5.63333 11.9997 5.31944 11.8691 5.05833 11.608C4.79722 11.3469 4.66667 11.033 4.66667 10.6663V2.66634C4.66667 2.29967 4.79722 1.98579 5.05833 1.72467C5.31944 1.46356 5.63333 1.33301 6 1.33301H12C12.3667 1.33301 12.6806 1.46356 12.9417 1.72467C13.2028 1.98579 13.3333 2.29967 13.3333 2.66634V10.6663C13.3333 11.033 13.2028 11.3469 12.9417 11.608C12.6806 11.8691 12.3667 11.9997 12 11.9997H6ZM6 10.6663H12V2.66634H6V10.6663ZM3.33333 14.6663C2.96667 14.6663 2.65278 14.5358 2.39167 14.2747C2.13056 14.0136 2 13.6997 2 13.333V3.99967H3.33333V13.333H10.6667V14.6663H3.33333Z" fill="black" fill-opacity="0.88" />
+                                </svg>}
+                            />
+                            <Button
+                                text
+                                type="button"
+                                className="w-8rem text-left gap-2 text-color"
+                                label="Delete"
+                                size="small"
+                                iconPos="left"
+                                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={() => setDeleteDialogVisible(true)}
+                            />
+                        </div>
+                    </OverlayPanel>
+                </div>
+            )
+        }
+
         return (
             <div className="solid-form-wrapper">
                 <Toast ref={toast} />
@@ -830,13 +888,16 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                     {params.embeded !== true &&
                                         <SolidCancelButton />
                                     }
+                                    {formActionDropdown()}
                                 </div>
                             </>
                         )}
                     </div>
-                    <div className="solid-form-stepper">
-                        <SolidFormStepper />
-                    </div>
+                    {params.embeded !== true &&
+                        <div className="solid-form-stepper">
+                            <SolidFormStepper />
+                        </div>
+                    }
                     <div className="p-4 solid-form-content">
                         {renderFormDynamically(formViewMetaData)}
                     </div>

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

@@ -69,6 +69,7 @@ export class SolidBooleanField implements ISolidField {
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const booleanOptions = ["false", "true"];
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
 
@@ -83,9 +84,11 @@ export class SolidBooleanField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     {/* <InputText
                         id={fieldLayoutInfo.attrs.name}
                         className="small-input"

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

@@ -52,6 +52,7 @@ export class SolidDateField implements ISolidField {
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         // const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
@@ -62,9 +63,11 @@ export class SolidDateField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <Calendar
                         disabled={formDisabled || fieldDisabled}
                         ref={calendarRef} // Attach ref to Calendar

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

@@ -51,6 +51,7 @@ export class SolidDateTimeField implements ISolidField {
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -60,9 +61,11 @@ export class SolidDateTimeField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <Calendar
                         disabled={formDisabled || fieldDisabled}
                         ref={calendarRef} // Attach ref to Calendar

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

@@ -52,6 +52,7 @@ export class SolidDecimalField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -64,9 +65,11 @@ export class SolidDecimalField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <InputNumber
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -53,6 +53,7 @@ export class SolidIntegerField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -65,9 +66,11 @@ export class SolidIntegerField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <InputNumber
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -47,6 +47,7 @@ export class SolidJsonField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -56,10 +57,12 @@ export class SolidJsonField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <CodeEditor
                         formik={formik}
                         field={fieldLayoutInfo.attrs.name}

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

@@ -65,6 +65,7 @@ export class SolidLongTextField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -77,9 +78,11 @@ export class SolidLongTextField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>}
+                        </label>
+                    }
                     <InputTextarea
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -93,13 +93,14 @@ export class SolidMediaMultipleField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const [imagesPreview, setImagesPreview] = useState<Array<string | ArrayBuffer>>([]);
         const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
         const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
         const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
         const [uploadCompleted, setUploadCompleted] = useState<Record<string, boolean>>({});
-        const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number }[]>([]);
+        const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number, id: number }[]>([]);
         const [uploadedSize, setUploadedSize] = useState<Record<string, string>>({});
         const [totalSize, setTotalSize] = useState<Record<string, string>>({});
         const [selectedFileId, setSelectedFileId] = useState<string | null>(null);
@@ -118,7 +119,7 @@ export class SolidMediaMultipleField implements ISolidField {
             const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
             if (Array.isArray(fieldValue) && fieldValue.length > 0) {
                 const urls: string[] = [];
-                const details: { name: string; type: string; size: number }[] = [];
+                const details: { name: string; type: string; size: number, id: any }[] = [];
                 const progress: Record<string, number> = {};
                 const completed: Record<string, boolean> = {};
 
@@ -126,13 +127,14 @@ export class SolidMediaMultipleField implements ISolidField {
                     if (file instanceof File) {
                         // New file (from local upload)
                         urls.push(URL.createObjectURL(file));
-                        details.push({ name: file.name, type: file.type, size: file.size });
+                        details.push({ name: file.name, type: file.type, size: file.size, id: `${file.name}-${file.size}`, });
                     } else if (typeof file === "object" && file._full_url) {
                         urls.push(file._full_url);
                         details.push({
                             name: file.relativeUri || "Unknown", // Use relativeUri or fallback
                             type: file.mediaStorageProviderMetadata?.type || "Unknown", // Extract type if available
                             size: 0, // API doesn't provide size, set 0 or fetch from metadata if available
+                            id: file.id
                         });
                     }
                 });
@@ -147,7 +149,7 @@ export class SolidMediaMultipleField implements ISolidField {
             }
         }, [formik.values, fieldLayoutInfo.attrs.name]);
 
-        const handleDropImages = (acceptedFiles: File[]) => {
+        const handleDropImages = (acceptedFiles: any[]) => {
             if (!acceptedFiles.length) return;
 
             const newFileDetails = [...fileDetails];
@@ -159,7 +161,7 @@ export class SolidMediaMultipleField implements ISolidField {
             acceptedFiles.forEach((file) => {
                 const fileId = `${file.name}-${file.size}`; // Unique identifier for tracking each file
 
-                newFileDetails.push({ name: file.name, type: file.type, size: file.size });
+                newFileDetails.push({ name: file.name, type: file.type, size: file.size, id: file.id });
                 newUploadProgress[fileId] = 0;
                 newUploadedSize[fileId] = "0 KB";
                 newTotalSize[fileId] = formatFileSize(file.size);
@@ -224,18 +226,22 @@ export class SolidMediaMultipleField implements ISolidField {
             formik.setFieldValue(fieldLayoutInfo.attrs.name, fileDetails.filter((file) => `${file.name}-${file.size}` !== fileId));
         };
 
-        const confirmDeleteFile = (fileId: any) => {
+        const confirmDeleteFile = (fileId: any, deleteId: number) => {
             setSelectedFileId(fileId);
             setDeleteImageDialogVisible(true);
+            setImageToBeDeletedData(deleteId)
         };
 
         const deleteFile = () => {
-            if (selectedFileId) {
+            if (selectedFileId && imageToBeDeletedData) {
                 handleCancelUpload(selectedFileId);
+                deleteMedia(imageToBeDeletedData);
                 setDeleteImageDialogVisible(false);
+                setShowAllFiles(false)
                 setSelectedFileId(null);
             }
         };
+
         const {
             getRootProps,
             getInputProps,
@@ -269,10 +275,12 @@ export class SolidMediaMultipleField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <div
                         {...getRootProps()}
                         className="solid-dropzone-wrapper"
@@ -290,7 +298,7 @@ export class SolidMediaMultipleField implements ISolidField {
                                     <div className="font-bold">{fileDetails[0].name}</div>
                                     <div
                                         className="cancel-upload-button"
-                                        onClick={() => confirmDeleteFile(`${fileDetails[0].name}-${fileDetails[0].size}`)}
+                                        onClick={() => confirmDeleteFile(`${fileDetails[0].name}-${fileDetails[0].size}`, fileDetails[0].id)}
                                     >
                                         <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none">
                                             <path d="M0.6 6L0 5.4L2.4 3L0 0.6L0.6 0L3 2.4L5.4 0L6 0.6L3.6 3L6 5.4L5.4 6L3 3.6L0.6 6Z" fill="#4B4D52" />
@@ -355,7 +363,7 @@ export class SolidMediaMultipleField implements ISolidField {
                                                 <div className="font-bold">{file.name}</div>
                                                 <div
                                                     className="cancel-upload-button"
-                                                    onClick={() => confirmDeleteFile(fileId)}
+                                                    onClick={() => confirmDeleteFile(fileId, file?.id)}
                                                 >
                                                     <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none">
                                                         <path d="M0.6 6L0 5.4L2.4 3L0 0.6L0.6 0L3 2.4L5.4 0L6 0.6L3.6 3L6 5.4L5.4 6L3 3.6L0.6 6Z" fill="#4B4D52" />

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

@@ -78,6 +78,7 @@ export class SolidMediaSingleField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
         const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
@@ -115,8 +116,8 @@ export class SolidMediaSingleField implements ISolidField {
         };
         const handleCancelUpload = (e: React.MouseEvent) => {
             e.stopPropagation();
-            if (imageToBeDeletedData?.imagesPreview.id) {
-                deleteMedia(imageToBeDeletedData.imagesPreview.id);
+            if (imageToBeDeletedData) {
+                deleteMedia(imageToBeDeletedData);
             }
             e.stopPropagation();
             setUploadProgress(0);
@@ -191,7 +192,7 @@ export class SolidMediaSingleField implements ISolidField {
                     // Set upload progress
                     setUploadProgress(100);
                     setUploadCompleted(true);
-
+                    setImageToBeDeletedData(fieldValue.id)
                     // Ensure Formik has the existing file URL
                     formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
                 }
@@ -230,9 +231,11 @@ export class SolidMediaSingleField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <div
                         {...getRootProps()}
                         className="solid-dropzone-wrapper"

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

@@ -61,6 +61,8 @@ export class SolidRichTextField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+
         const [text, setText] = useState();
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
@@ -74,9 +76,11 @@ export class SolidRichTextField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <Editor
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -55,6 +55,7 @@ export class SolidSelectionDynamicField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
@@ -94,9 +95,11 @@ export class SolidSelectionDynamicField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <AutoComplete
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -76,6 +76,7 @@ export class SolidSelectionStaticField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
@@ -99,9 +100,11 @@ export class SolidSelectionStaticField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <AutoComplete
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -68,6 +68,8 @@ export class SolidShortTextField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
@@ -79,11 +81,13 @@ export class SolidShortTextField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
 
-                        {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
-                    </label>
+                            {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
+                        </label>
+                    }
                     <InputText
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}