@solidstarters/solid-core-ui 1.1.18 → 1.1.20

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

@@ -11,6 +11,10 @@ import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { FileReaderExt } from "@/components/common/FileReaderExt";
 import { ProgressBar } from "primereact/progressbar";
+import Link from "next/link";
+import getAcceptedFileTypes from "@/helpers/getAcceptedFileTypes";
+import { downloadMediaFile } from "@/helpers/downloadMediaFile";
+
 export class SolidMediaSingleField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -79,15 +83,15 @@ export class SolidMediaSingleField implements ISolidField {
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
 
         const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
         const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
-        const [imagesPreview, setImagesPreview] = useState<string | ArrayBuffer | null>(null);
-        const [uploadProgress, setUploadProgress] = useState<number>(0);
         const [uploadCompleted, setUploadCompleted] = useState<boolean>(false);
-        const [fileDetails, setFileDetails] = useState<{ name: string; type: string } | null>(null);
-        const [uploadedSize, setUploadedSize] = useState<string>("0 MB");
+        const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string } | null>(null);
         const [totalSize, setTotalSize] = useState<string>("0 KB");
+        const [isReplaceImageDialogVisible, setReplaceImageDialogVisible] = useState(false);
+        const [newFileToUpload, setNewFileToUpload] = useState<any>(null);
 
         const formatFileSize = (size: number) => {
             return size >= 1024 * 1024
@@ -95,145 +99,110 @@ export class SolidMediaSingleField implements ISolidField {
                 : `${(size / 1024).toFixed(1)} KB`;
         };
 
-        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
-        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-
         const [
             deleteMedia,
             { isLoading: isMediaDeleted, isSuccess: isDeleteMediaSuceess, isError: isMediaDeleteError, error: mediaDeleteError, data: DeletedMedia },
         ] = useDeleteMediaMutation();
 
-        const handleDelete = () => {
-            imageToBeDeletedData.e.stopPropagation();
-            if (imageToBeDeletedData.imagesPreview.id) {
-                deleteMedia(imageToBeDeletedData.imagesPreview.id);
-            }
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
-            setDeleteImageDialogVisible(false);
-        };
         const handleCancelUpload = (e: React.MouseEvent) => {
             e.stopPropagation();
             if (imageToBeDeletedData) {
                 deleteMedia(imageToBeDeletedData);
             }
             e.stopPropagation();
-            setUploadProgress(0);
             setUploadCompleted(false);
             setFileDetails(null);
             formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
             setDeleteImageDialogVisible(false);
         };
 
-        const handleDropImage = (acceptedFiles: File[]) => {
-            // const file = acceptedFiles[0];
-            // if (file) {
-            //     formik.setFieldValue(fieldLayoutInfo.attrs.name, file);
-            // } else {
-            //     console.error("No file was accepted");
-            // }
+        const handleDropImage = (acceptedFiles: any[]) => {
             const file = acceptedFiles[0];
             if (!file) return;
+            if (fileDetails) {
+                // If a file is already uploaded, show the confirmation dialog
+                setNewFileToUpload(file);
+                setReplaceImageDialogVisible(true);
+            } else {
+                // If no file is present, proceed with upload
+                uploadFile(file);
+            }
+        };
 
+        const uploadFile = (file: any) => {
             setUploadCompleted(false);
-            setUploadProgress(0);
             setTotalSize(formatFileSize(file.size));
-            setUploadedSize("0 KB");
-            setFileDetails({ name: file.name, type: file.type });
+            setFileDetails({ name: file.name, type: file.type, fileUrl: file.fileUrl });
 
             const reader = new FileReader();
-
-            reader.onloadstart = () => {
-                setUploadProgress(0);
-                setUploadedSize("0 KB");
-            };
-            reader.onprogress = (event) => {
-                if (event.loaded && event.total) {
-                    const percent = Math.round((event.loaded / event.total) * 100);
-                    setUploadProgress(percent);
-                    setUploadedSize(formatFileSize(event.loaded));
-                }
-            };
-
             reader.onloadend = () => {
-                setUploadProgress(100);
                 setUploadCompleted(true);
-                setUploadedSize(totalSize); // Set uploaded size to total size after completion
             };
-
             reader.readAsDataURL(file);
             formik.setFieldValue(fieldLayoutInfo.attrs.name, file);
         };
+        const handleReplaceFile = () => {
+            // Delete the existing file first
+            if (imageToBeDeletedData) {
+                deleteMedia(imageToBeDeletedData);
+            }
 
-        // useEffect(() => {
-        //     const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+            setUploadCompleted(false);
+            setFileDetails(null);
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
 
-        //     if (fieldValue instanceof File) {
-        //         setImagesPreview(URL.createObjectURL(fieldValue)); // Generate preview URL for file
-        //     }
-        //     if (typeof fieldValue === 'object') {
-        //         setImagesPreview(fieldValue); // Generate preview URL for file
-        //     }
-        //     if (!fieldValue) {
-        //         setImagesPreview(null);
-        //     }
-        // }, [formik.values, fieldLayoutInfo.attrs.name]);
+            // Proceed with uploading new file
+            if (newFileToUpload) {
+                uploadFile(newFileToUpload);
+                setNewFileToUpload(null);
+            }
+
+            setReplaceImageDialogVisible(false);
+        };
         useEffect(() => {
             const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
 
             if (fieldValue && typeof fieldValue === "object") {
-                const fileUrl = fieldValue._full_url;
-                if (typeof fileUrl === "string" && fileUrl.length > 0) {
-                    const fileName = fileUrl.split("/").pop(); // Extract filename from URL
-                    setFileDetails({ name: fileName || "Unknown File", type: "Uploaded File" });
-
-                    // Set upload progress
-                    setUploadProgress(100);
-                    setUploadCompleted(true);
-                    setImageToBeDeletedData(fieldValue.id)
-                    // Ensure Formik has the existing file URL
-                    formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
+                let fileUrl = "";
+                let fileName = "Unknown File";
+
+                if (fieldValue instanceof File) {
+                    // Handle new file upload
+                    fileUrl = fieldValue.name;
+                    fileName = fileUrl;
+                } else if (fieldValue._full_url) {
+                    // Handle updated file from backend
+                    fileUrl = fieldValue._full_url;
+                    fileName = fieldValue.relativeUri?.split("/").pop() || "Unknown File";
                 }
+
+                setFileDetails({ name: fileName, type: "Uploaded File", fileUrl });
+
+                // Set upload progress
+                setUploadCompleted(true);
+                setImageToBeDeletedData(fieldValue.id);
+                formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
             }
         }, [formik.values, fieldLayoutInfo.attrs.name]);
 
-
         const {
             getRootProps: getRootProps,
             getInputProps: getInputProps,
             isDragActive: isDragActive,
         } = useDropzone({
             onDrop: handleDropImage,
-            accept: {
-                "image/jpeg": [],
-                "image/png": [],
-            },
-            maxSize: 2 * 1024 * 1024, // 2MB
+            accept: getAcceptedFileTypes(fieldMetadata.mediaTypes),
+            maxSize: fieldMetadata.mediaMaxSizeKb * 1024,
         });
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
-        const imageFormatHandler = (preview: any) => {
-            if (typeof preview === 'string') {
-                return preview; // Existing URLs
-            }
-            if (preview instanceof File) {
-                return URL.createObjectURL(preview); // Generate preview URL for File
-            }
-            if (typeof preview === 'object') {
-                return preview._full_url
-            }
-            return ""; // Fallback for invalid cases
-        }
-
         return (
-            <div className={className}>
+            <div className={className} style={readOnlyPermission === true ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}}>
                 <div className="flex flex-column gap-2 mt-4">
                     {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">({fieldDescription}) </span>} */}
                         </label>
                     }
                     <div
@@ -241,7 +210,10 @@ export class SolidMediaSingleField implements ISolidField {
                         className="solid-dropzone-wrapper"
                     >
                         <input {...getInputProps()} />
-                        <DropzonePlaceholder />
+                        <DropzonePlaceholder
+                            mediaTypes={fieldMetadata.mediaTypes}
+                            mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
+                        />
                     </div>
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
@@ -251,46 +223,47 @@ export class SolidMediaSingleField implements ISolidField {
                             <div className="flex align-items-center gap-2">
                                 <FileReaderExt fileDetails={fileDetails} />
                                 <div className="w-full flex flex-column gap-1">
-                                    <div className="flex align-items-center justify-content-between">
-                                        <div className="font-bold">{fileDetails.name}</div>
-                                        <div className="cancel-upload-button" onClick={() => setDeleteImageDialogVisible(true)}>
-                                            <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" />
-                                            </svg>
+                                    <div className="flex align-items-start justify-content-between">
+                                        <Link className="font-normal w-9" href={process.env.NEXT_PUBLIC_BACKEND_API_URL + `/${fileDetails?.fileUrl}`} target="_blank">{fileDetails.name}</Link>
+                                        <div className="flex align-items-center gap-2">
+                                            <div>
+                                                <Button
+                                                    text
+                                                    icon={"pi pi-download"}
+                                                    size="small"
+                                                    severity="secondary"
+                                                    // className="p-2"
+                                                    style={{
+                                                        height: 16,
+                                                        width: 16
+                                                    }}
+                                                    onClick={() => downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name)}
+                                                />
+                                            </div>
+                                            <div>
+                                                <Button
+                                                    text
+                                                    icon={"pi pi-times"}
+                                                    size="small"
+                                                    severity="secondary"
+                                                    // className="p-2"
+                                                    style={{
+                                                        height: 16,
+                                                        width: 16
+                                                    }}
+                                                    onClick={() => setDeleteImageDialogVisible(true)}
+                                                />
+                                            </div>
                                         </div>
                                     </div>
                                     {
-                                        uploadCompleted ?
-                                            <div className="flex align-items-center gap-2 text-sm">
-                                                {totalSize} of {totalSize}
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
-                                                    <circle cx="2" cy="2" r="2" fill="#C1C1C1" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                                                    <mask id="mask0_2480_8635" style={{ maskType: 'alpha' }} maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
-                                                        <rect width="20" height="20" fill="#D9D9D9" />
-                                                    </mask>
-                                                    <g mask="url(#mask0_2480_8635)">
-                                                        <path d="M9.16 12.76L13.39 8.53L12.55 7.69L9.16 11.08L7.45 9.37L6.61 10.21L9.16 12.76ZM10 16C9.17 16 8.39 15.8424 7.66 15.5272C6.93 15.2124 6.295 14.785 5.755 14.245C5.215 13.705 4.7876 13.07 4.4728 12.34C4.1576 11.61 4 10.83 4 10C4 9.17 4.1576 8.39 4.4728 7.66C4.7876 6.93 5.215 6.295 5.755 5.755C6.295 5.215 6.93 4.7874 7.66 4.4722C8.39 4.1574 9.17 4 10 4C10.83 4 11.61 4.1574 12.34 4.4722C13.07 4.7874 13.705 5.215 14.245 5.755C14.785 6.295 15.2124 6.93 15.5272 7.66C15.8424 8.39 16 9.17 16 10C16 10.83 15.8424 11.61 15.5272 12.34C15.2124 13.07 14.785 13.705 14.245 14.245C13.705 14.785 13.07 15.2124 12.34 15.5272C11.61 15.8424 10.83 16 10 16Z" fill="#722ED1" />
-                                                    </g>
-                                                </svg>
-                                                Completed
-                                            </div>
-                                            :
-                                            <div className="flex align-items-center gap-2 text-sm">
-                                                {uploadedSize} of {totalSize}
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
-                                                    <circle cx="2" cy="2" r="2" fill="#C1C1C1" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                                    <path d="M7.375 10.5V5.40625L5.75 7.03125L4.875 6.125L8 3L11.125 6.125L10.25 7.03125L8.625 5.40625V10.5H7.375ZM4.25 13C3.90625 13 3.61198 12.8776 3.36719 12.6328C3.1224 12.388 3 12.0938 3 11.75V9.875H4.25V11.75H11.75V9.875H13V11.75C13 12.0938 12.8776 12.388 12.6328 12.6328C12.388 12.8776 12.0938 13 11.75 13H4.25Z" fill="black" />
-                                                </svg>
-                                                Uploading ${uploadProgress}% Completed
-                                            </div>
+                                        uploadCompleted &&
+                                        <div className="flex align-items-center gap-2 text-sm">
+                                            {totalSize}
+                                        </div>
                                     }
                                 </div>
                             </div>
-                            <ProgressBar value={uploadProgress} showValue={false} style={{ height: 4 }} className="mt-2" />
                         </div>
                     )}
                 </div>
@@ -306,7 +279,21 @@ export class SolidMediaSingleField implements ISolidField {
                     )}
                     onHide={() => setDeleteImageDialogVisible(false)}
                 >
-                    <p>Are you sure you want to delete image?</p>
+                    <p>Are you sure you want to delete media?</p>
+                </Dialog>
+                <Dialog
+                    visible={isReplaceImageDialogVisible}
+                    header="Replace Image"
+                    modal
+                    footer={() => (
+                        <div className="flex justify-content-center">
+                            <Button label="Yes, Replace" icon="pi pi-check" className='small-button' severity="danger" onClick={handleReplaceFile} />
+                            <Button label="Cancel" icon="pi pi-times" className='small-button' onClick={() => setReplaceImageDialogVisible(false)} />
+                        </div>
+                    )}
+                    onHide={() => setReplaceImageDialogVisible(false)}
+                >
+                    <p>An media is already uploaded. Do you want to delete it and upload a new one?</p>
                 </Dialog>
             </div>
         );

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

@@ -62,6 +62,7 @@ export class SolidRichTextField implements ISolidField {
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
 
         const [text, setText] = useState();
 
@@ -78,11 +79,11 @@ export class SolidRichTextField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {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">({fieldDescription}) </span>} */}
                         </label>
                     }
                     <Editor
-                        readOnly={formReadonly || fieldReadonly}
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
                         disabled={formDisabled || fieldDisabled}
                         key={fieldLayoutInfo.attrs.name}  // React will re-render the component whenever this value changes
                         id={fieldLayoutInfo.attrs.name}

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

@@ -56,6 +56,7 @@ export class SolidSelectionDynamicField implements ISolidField {
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
@@ -97,11 +98,11 @@ export class SolidSelectionDynamicField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {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">({fieldDescription}) </span>} */}
                         </label>
                     }
                     <AutoComplete
-                        readOnly={formReadonly || fieldReadonly}
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
                         disabled={formDisabled || fieldDisabled}
                         {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
                         id={fieldLayoutInfo.attrs.name}

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

@@ -77,6 +77,7 @@ export class SolidSelectionStaticField implements ISolidField {
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
@@ -102,11 +103,11 @@ export class SolidSelectionStaticField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {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">({fieldDescription}) </span>} */}
                         </label>
                     }
                     <AutoComplete
-                        readOnly={formReadonly || fieldReadonly}
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
                         disabled={formDisabled || fieldDisabled}
                         {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
                         id={fieldLayoutInfo.attrs.name}

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

@@ -69,6 +69,7 @@ export class SolidShortTextField implements ISolidField {
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -83,13 +84,13 @@ export class SolidShortTextField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {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">({fieldDescription}) </span>} */}
 
                             {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
                         </label>
                     }
                     <InputText
-                        readOnly={formReadonly || fieldReadonly}
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
                         disabled={formDisabled || fieldDisabled}
                         id={fieldLayoutInfo.attrs.name}
                         aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}

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

@@ -52,6 +52,7 @@ export class SolidTimeField implements ISolidField {
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
         
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -64,11 +65,11 @@ export class SolidTimeField implements ISolidField {
                     {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">({fieldDescription}) </span>} */}
                         </label>
                     }
                     <Calendar
-                        disabled={formDisabled || fieldDisabled}
+                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
                         ref={calendarRef} // Attach ref to Calendar
                         id={fieldLayoutInfo.attrs.name}
                         aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}

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

@@ -13,6 +13,7 @@ import * as Yup from 'yup';
 import { Schema } from "yup";
 import SolidFormView from "../../SolidFormView";
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import { useRouter } from "next/router";
 
 
 
@@ -137,9 +138,13 @@ export class SolidRelationManyToManyField implements ISolidField {
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const router = useRouter();
+        
+        const readOnlyPermission = this.fieldContext.readOnly;
+
 
         // auto complete specific code. 
-        const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
+        const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
         const { useLazyGetSolidEntitiesQuery } = entityApi;
         const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
 
@@ -273,6 +278,7 @@ export class SolidRelationManyToManyField implements ISolidField {
                             return (
                                 <div key={a.label} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
                                     <Checkbox
+                                        readOnly={readOnlyPermission}
                                         inputId={a.label}
                                         checked={formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.label === a.label)}
                                         onChange={() => handleCheckboxChange(a)}
@@ -295,9 +301,10 @@ export class SolidRelationManyToManyField implements ISolidField {
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
 
         // auto complete specific code. 
-        const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
+        const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
         const { useLazyGetSolidEntitiesQuery } = entityApi;
         const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
 
@@ -369,20 +376,20 @@ export class SolidRelationManyToManyField implements ISolidField {
                 }
                 <div className="flex align-items-center gap-3">
                     <AutoComplete
-                        readOnly={readOnly}
-                        disabled={disabled}
+                        readOnly={readOnly || readOnlyPermission}
+                        disabled={disabled || readOnlyPermission}
                         multiple
                         {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
                         id={fieldLayoutInfo.attrs.name}
                         field="label"
                         value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        dropdown
+                        dropdown={!readOnlyPermission}
                         suggestions={autoCompleteItems}
                         completeMethod={autoCompleteSearch}
                         onChange={formik.handleChange}
                         className="solid-standard-autocomplete w-full"
                     />
-                    {fieldLayoutInfo.attrs.inlineCreate === "true" &&
+                    {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false && 
                         this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
                     }
                 </div>
@@ -410,7 +417,7 @@ export class SolidRelationManyToManyField implements ISolidField {
             handlePopupClose: (() => {
                 setvisibleCreateRelationEntity(false);
             }),
-            modelName: camelCase(this.fieldContext.fieldMetadata.relationModelSingularName)
+            modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName)
         }
 
         return (

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

@@ -64,10 +64,11 @@ export class SolidRelationManyToOneField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
         const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
 
         // auto complete specific code. 
-        const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
+        const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
         const { useLazyGetSolidEntitiesQuery } = entityApi;
         const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
 
@@ -117,8 +118,6 @@ export class SolidRelationManyToOneField implements ISolidField {
 
 
 
-        const disabled = fieldLayoutInfo.attrs?.disabled;
-        const readOnly = fieldLayoutInfo.attrs?.readOnly;
 
 
         const customCreateHandler = (values: any) => {
@@ -145,19 +144,20 @@ export class SolidRelationManyToOneField implements ISolidField {
                         </label>
                     }
                     <AutoComplete
-                        readOnly={formReadonly || fieldReadonly}
-                        disabled={formDisabled || fieldDisabled}
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
                         {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
                         id={fieldLayoutInfo.attrs.name}
                         field="label"
                         value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        dropdown
+                        dropdown={!readOnlyPermission}
                         suggestions={autoCompleteItems}
                         completeMethod={autoCompleteSearch}
                         onChange={formik.handleChange}
+                        onFocus={(e) => e.target.select()}
                         className="w-full solid-standard-autocomplete"
                     />
-                    {fieldLayoutInfo.attrs.inlineCreate === "true" &&
+                    {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
                         this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
                     }
                 </div>