@solidstarters/solid-core-ui 1.1.46 → 1.1.49

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

@@ -4,6 +4,7 @@ import { Message } from "primereact/message";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { getExtensionComponent } from "@/helpers/registry";
 
 export class SolidShortTextField implements ISolidField {
 
@@ -78,59 +79,74 @@ export class SolidShortTextField implements ISolidField {
 
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
         return (
             <>
-                {includeWrapper === 'yes' && <div className={className}>
-                    <div className="relative">
-                        <div className="flex flex-column gap-2 mt-4">
-                            {showFieldLabel != false &&
-                                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                    {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                                </label>
-                            }
-                            <InputText
-                                readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                                disabled={formDisabled || fieldDisabled}
-                                id={fieldLayoutInfo.attrs.name}
-                                name={fieldMetadata.name}
-                                aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                                // onChange={formik.handleChange}
-                                onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                                onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
-                                value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                            />
-                        </div>
-                        {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                            <div className="absolute mt-1">
-                                <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                            </div>
-                        )}
+                {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </div>
-                </div>}
-                {includeWrapper === 'no' &&
+                }
+                {viewMode === "edit" &&
                     <>
-                        {showFieldLabel != false &&
-                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
+                        {includeWrapper === 'yes' && <div className={className}>
+                            <div className="relative">
+                                <div className="flex flex-column gap-2 mt-4">
+                                    {showFieldLabel != false &&
+                                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                        </label>
+                                    }
+                                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                                    <InputText
+                                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                                        disabled={formDisabled || fieldDisabled}
+                                        id={fieldLayoutInfo.attrs.name}
+                                        name={fieldMetadata.name}
+                                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                                        // onChange={formik.handleChange}
+                                        onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
+                                        onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
+                                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                                    />
+                                </div>
+                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                    <div className="absolute mt-1">
+                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                    </div>
+                                )}
+                            </div>
+                        </div>}
+                        {includeWrapper === 'no' &&
+                            <>
+                                {showFieldLabel != false &&
+                                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                    </label>
+                                }
+                                <InputText
+                                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                                    disabled={formDisabled || fieldDisabled}
+                                    id={fieldLayoutInfo.attrs.name}
+                                    name={fieldMetadata.name}
+                                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                                    // onChange={formik.handleChange}
+                                    onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
+                                    onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
+                                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                                />
+                            </>
                         }
-                        <InputText
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            disabled={formDisabled || fieldDisabled}
-                            id={fieldLayoutInfo.attrs.name}
-                            name={fieldMetadata.name}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            // onChange={formik.handleChange}
-                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                            onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        />
-                    </>
-                }
+                    </>}
             </>
+
         );
     }
 }

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

@@ -5,6 +5,7 @@ import { useRef } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { getExtensionComponent } from "@/helpers/registry";
 
 export class SolidTimeField implements ISolidField {
 
@@ -59,40 +60,56 @@ export class SolidTimeField implements ISolidField {
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
 
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
         return (
-            <div className={className}>
-                <div className="relative">
-                    <div className="flex flex-column gap-2 mt-4">
-                        {showFieldLabel != false &&
-                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <Calendar
-                            disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                            ref={calendarRef} // Attach ref to Calendar
-                            id={fieldLayoutInfo.attrs.name}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            onChange={formik.handleChange}
-                            //@ts-ignore
-                            value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name] : Date()}
-                            // dateFormat="mm/dd/yy"
-                            // placeholder="mm/dd/yyyy hh:mm"
-                            hideOnDateTimeSelect
-                            timeOnly
-                            showTime className=""
-                            hourFormat="24"
 
-                        />
+            <>
+               {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                }
+                {viewMode === "edit" && (
+                    <div className={className}>
+                        <div className="relative">
+                            <div className="flex flex-column gap-2 mt-4">
+                                {showFieldLabel != false &&
+                                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                    </label>
+                                }
+                                <Calendar
+                                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                                    ref={calendarRef} // Attach ref to Calendar
+                                    id={fieldLayoutInfo.attrs.name}
+                                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                                    onChange={formik.handleChange}
+                                    //@ts-ignore
+                                    value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name] : Date()}
+                                    // dateFormat="mm/dd/yy"
+                                    // placeholder="mm/dd/yyyy hh:mm"
+                                    hideOnDateTimeSelect
+                                    timeOnly
+                                    showTime className=""
+                                    hourFormat="24"
+
+                                />
+                            </div>
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
                         </div>
-                    )}
-                </div>
-            </div>
+                    </div>
+                )}
+            </>
         );
     }
 }

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

@@ -83,30 +83,52 @@ export class SolidRelationManyToManyField implements ISolidField {
     }
 
     render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
         const [visibleCreateRelationEntity, setVisibleCreateRelationEntity] = useState(false);
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
         let renderMode = fieldLayoutInfo.attrs.renderMode;
         if (!renderMode) {
             renderMode = 'autocomplete';
         }
+
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldRelationViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
+
         return (
+
             <>
-                {renderMode &&
-                    this.renderExtensionRenderMode(renderMode, formik, visibleCreateRelationEntity, setVisibleCreateRelationEntity) 
-                }
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </div>
-                )}
+                }
+                {viewMode === "edit" &&
+                    (
+                        <>
+                            {renderMode &&
+                                this.renderExtensionRenderMode(renderMode, formik, visibleCreateRelationEntity, setVisibleCreateRelationEntity)
+                            }
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
+                        </>
+                    )}
             </>
         );
     }
 
-    renderExtensionRenderMode(widgetName: string, formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) { 
+    renderExtensionRenderMode(widgetName: string, formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
         let DynamicWidget = getExtensionComponent(widgetName);
         if (!DynamicWidget) {
             DynamicWidget = getExtensionComponent('autocomplete');

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

@@ -13,6 +13,7 @@ import { Checkbox } from "primereact/checkbox";
 import { Dialog } from "primereact/dialog";
 import { Panel } from "primereact/panel";
 import SolidFormView from "../../SolidFormView";
+import { getExtensionComponent } from "@/helpers/registry";
 
 
 export class SolidRelationManyToOneField implements ISolidField {
@@ -135,41 +136,58 @@ export class SolidRelationManyToOneField implements ISolidField {
             formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
 
         }
+
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldRelationViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
         return (
-            <div className={className}>
-                <div className="mt-4 relative">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
-                            {fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        </label>
-                    }
-                    <div className="flex align-items-center gap-3 mt-2">
-                        <AutoComplete
-                            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={!readOnlyPermission}
-                            suggestions={autoCompleteItems}
-                            completeMethod={autoCompleteSearch}
-                            onChange={formik.handleChange}
-                            onFocus={(e) => e.target.select()}
-                            className="w-full solid-standard-autocomplete"
-                        />
-                        {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
-                            this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                        }
+            <>
+                {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                }
+                {viewMode === "edit" &&
+                    (
+                        <div className={className}>
+                            <div className="mt-4 relative">
+                                {showFieldLabel != false &&
+                                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                                        {fieldLabel}
+                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                    </label>
+                                }
+                                <div className="flex align-items-center gap-3 mt-2">
+                                    <AutoComplete
+                                        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={!readOnlyPermission}
+                                        suggestions={autoCompleteItems}
+                                        completeMethod={autoCompleteSearch}
+                                        onChange={formik.handleChange}
+                                        onFocus={(e) => e.target.select()}
+                                        className="w-full solid-standard-autocomplete"
+                                    />
+                                    {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
+                                        this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                                    }
+                                </div>
+                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                    <div className="absolute mt-1">
+                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                    </div>
+                                )}
+                            </div>
                         </div>
                     )}
-                </div>
-            </div>
+            </>
         );
     }
 

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

@@ -7,6 +7,8 @@ import * as Yup from 'yup';
 import { Schema } from "yup";
 import SolidFormView from "../../SolidFormView";
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import { usePathname } from "next/navigation";
+import { getExtensionComponent } from "@/helpers/registry";
 
 
 export class SolidRelationOneToManyField implements ISolidField {
@@ -64,7 +66,8 @@ export class SolidRelationOneToManyField implements ISolidField {
         const [refreshList, setRefreshList] = useState(false); // Added state for rerender
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
         const readOnlyPermission = this.fieldContext.readOnly;
-
+        const pathname = usePathname();
+        const lastPathSegment = pathname.split('/').pop();
 
         const handlePopupOpen = (id: any) => {
             const formviewparams = {
@@ -104,7 +107,7 @@ export class SolidRelationOneToManyField implements ISolidField {
         useEffect(() => {
 
             const customFilter = this.fieldContext.fieldMetadata.relationCoModelFieldName ? this.fieldContext.fieldMetadata.relationCoModelFieldName : `${this.fieldContext.modelName}`
-            const listviewparams = { 
+            const listviewparams = {
                 moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
                 modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName),
                 inlineCreate: readOnlyPermission === false ? true : false,
@@ -138,27 +141,43 @@ export class SolidRelationOneToManyField implements ISolidField {
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldRelationViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
 
         return (
-            <div className={className}>
-                {/* <div className="justify-content-center align-items-center"> */}
-                {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        {/* &nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                    </label>
+            <>
+                {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </div>
                 }
-
-                {/* </div>
+                {viewMode === "edit" &&
+                    (
+                        <div className={className}>
+                            {/* <div className="justify-content-center align-items-center"> */}
+                            {showFieldLabel != false &&
+                                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                    {/* &nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                </label>
+                            }
+
+                            {/* </div>
                 <br></br> */}
-                {listViewParams &&
-                    <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
-                }
-                {readOnlyPermission !== true &&
-                    this.renderSolidFormEmbededView(visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams, handlePopupClose)}
-
-            </div>
+                            {lastPathSegment === 'new' && <p>Please save the {solidFormViewMetaData.data.solidView.model.displayName} to be able to save {fieldMetadata.displayName}</p>}
+                            {listViewParams && lastPathSegment !== 'new' &&
+                                <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
+                            }
+                            {readOnlyPermission !== true &&
+                                this.renderSolidFormEmbededView(visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams, handlePopupClose)}
+
+                        </div>
+                    )}
+            </>
         );
 
     }

package/src/components/core/form/fields/widgets/SolidBooleanCheckboxFieldWidget.tsx

@@ -47,7 +47,7 @@ export const SolidBooleanFieldCheckboxWidget = ({ formik, fieldContext }: SolidB
             <div className="relative">
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel !== false && (
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">
                             {fieldLabel}
                             {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         </label>

package/src/components/core/form/fields/widgets/SolidBooleanSelectFieldWidget.tsx

@@ -31,7 +31,7 @@ export const SolidBooleanFieldSelectWidget = ({ formik, fieldContext }: SolidBoo
             <div className="relative">
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">{fieldLabel}
                             {fieldMetadata.required && <span className="text-red-500"> *</span>}
                             {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                         </label>

package/src/components/core/form/fields/widgets/SolidFormFieldJsonViewModeWidget.tsx

@@ -0,0 +1,23 @@
+
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror'; // Correct import
+
+
+export const SolidFormFieldJsonViewModeWidget = ({ label, value }: any) => {
+    return (
+        <div className="mt-2 flex-column gap-2">
+            <p className="m-0"><span className="form-field-label font-medium">{label}</span></p>
+            <CodeMirror
+                id={label}
+                value={value}
+                height={'300px'}
+                style={{ fontSize: '10px' }}
+                theme={oneDark}
+                readOnly={true}
+                extensions={[javascript(), EditorView.lineWrapping]}
+            />
+        </div>
+    );
+};
+

package/src/components/core/form/fields/widgets/SolidFormFieldMediaViewModeWidget.tsx

@@ -0,0 +1,13 @@
+
+export const SolidFormFieldMediaViewModeWidget = ({ label, value }: any) => {
+    console.log("label", label);
+    console.log("value", value);
+
+    return (
+        <div className="mt-2 flex-column gap-2">
+            <p className="m-0 form-field-label font-medium">{label}</p>
+            <p className="m-0">{value}</p>
+        </div>
+    );
+};
+

package/src/components/core/form/fields/widgets/SolidFormFieldPasswordViewModeWidget.tsx

@@ -0,0 +1,23 @@
+"use client"
+import { useState } from "react";
+
+export const SolidFormFieldPasswordViewModeWidget = ({ label, value }: any) => {
+    const [isText, setIsText] = useState(false)
+    return (
+        <div className="mt-2 flex-column gap-2">
+            <p className="m-0 form-field-label font-medium">{label}</p>
+            <div className="flex align-items-center gap-4">
+                <p className="m-0">
+                    {isText ? value : "••••••••"}
+                </p>
+                <i
+                    className={`pi ${isText ? 'pi-eye' : 'pi-eye-slash'}`}
+                    onClick={() => setIsText(!isText)}
+                    style={{ cursor: 'pointer' }}
+                />
+            </div>
+
+        </div>
+    );
+};
+

package/src/components/core/form/fields/widgets/SolidFormFieldRelationViewModeWidget.tsx

@@ -0,0 +1,32 @@
+import { Chip } from "primereact/chip";
+import { Chips } from "primereact/chips";
+import { useEffect, useState } from "react";
+
+export const SolidFormFieldRelationViewModeWidget = ({ label, value }: any) => {
+    const [fieldValue, setFieldValue] = useState<any>([]);
+    useEffect(() => {
+        if (Array.isArray(value)) {
+
+            if (value.length > 0) {
+                const data = value.map((v: any) => v.label);
+                setFieldValue(data);
+            }
+        }
+        if (value && !Array.isArray(value) && typeof value === "object") {
+            setFieldValue([value.label]);
+        }
+    }, [value]);
+
+
+    return (
+        <div className="mt-2 flex-column">
+            <p className="m-0 form-field-label font-medium">{label}</p>
+            <div className="flex flex-wrap gap-2 mt-2">
+                {fieldValue.map((v: any) => (
+                    <Chip key={v} label={v} className="view-widget-chip" />
+                ))}
+            </div>
+        </div>
+    );
+};
+

package/src/components/core/form/fields/widgets/SolidFormFieldRichTextViewModeWidget.tsx

@@ -0,0 +1,17 @@
+import { Editor } from "primereact/editor";
+
+export const SolidFormFieldRichTextViewModeWidget = ({ label, value }: any) => {
+    return (
+        <div>
+            <Editor
+                readOnly={true}
+                key={label}  // React will re-render the component whenever this value changes
+                id={label}
+                value={value}
+                style={{ height: "320px" }}
+                className="solid-custom-editor"
+            />
+        </div>
+    );
+};
+