@solidstarters/solid-core-ui 1.1.70 → 1.1.72

package/src/redux/api/solidSettingsApi.tsx

@@ -32,6 +32,13 @@ export const solidSettingsApi = createApi({
                 body: data,
             }),
         }),
+        bulkUpdateSolidSettings: builder.mutation({
+            query: ({ data }) => ({
+                url: `/setting/bulk-update`,
+                method: 'POST',
+                body: data,
+            }),
+        }),
     })
 });
 
@@ -44,4 +51,5 @@ export const {
     useLazyGetSolidSettingsQuery,
     useLazyGetSolidSettingsByIdQuery,
     useUpdateSolidSettingsMutation,
+    useBulkUpdateSolidSettingsMutation
 } = solidSettingsApi;

package/src/resources/globals.css

@@ -1673,6 +1673,44 @@ li.header-li-px {
   overflow-y: auto;
 }
 
+
+.chatter-collapse-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: -18px;
+  z-index: 10;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+
+.chatter-section {
+  width: 380px;
+  flex-shrink: 0;
+  transition: width 0.3s ease, padding 0.3s ease;
+  overflow: hidden;
+  min-height: 100%;
+  transition: width 0.3s ease, padding 0.3s ease;
+}
+
+.chatter-section.collapsed {
+  width: 45px !important;
+}
+
+.chatter-collapsed-content {
+  font-size: 0.875rem;
+  background-color: #eff1f4;
+  color: var(--secondary-dark-color);
+  white-space: nowrap;
+  padding: 0.75rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid var(--primary-light-color);
+  display: inline-block;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  width: 30px;
+}
+
 .solid-form-header {
   padding: 15px 14px 15px 24px;
   display: flex;
@@ -2810,6 +2848,10 @@ li.header-li-px {
     left: 71% !important;
     top: 17% !important;
   }
+
+  .chatter-section {
+    width: 360px;
+  }
 }
 
 /* 1500px - 1599px */
@@ -2832,6 +2874,10 @@ li.header-li-px {
     left: 69% !important;
     top: 17.3% !important;
   }
+
+  .chatter-section {
+    width: 345px;
+  }
 }
 
 /* 1400px - 1499px */
@@ -2854,6 +2900,11 @@ li.header-li-px {
     left: 67% !important;
     top: 17.5% !important;
   }
+
+
+  .chatter-section {
+    width: 330px;
+  }
 }
 
 /* 1300px - 1399px */
@@ -2876,6 +2927,10 @@ li.header-li-px {
     left: 63.5% !important;
     top: 15% !important;
   }
+
+  .chatter-section {
+    width: 310px;
+  }
 }
 
 /* 1200px - 1299px */
@@ -2898,6 +2953,10 @@ li.header-li-px {
     left: 61% !important;
     top: 15% !important;
   }
+
+  .chatter-section {
+    width: 300px;
+  }
 }
 
 /* 1024px - 1199px */

package/src/types/solid-core.d.ts

@@ -68,6 +68,7 @@ export type LayoutAttribute = {
     className?: string;
     inlineCreate?: string;
     renderMode?: string;
+    widget?: string;
 };
 
 // Generic representation of any node in our layout 
@@ -105,27 +106,34 @@ export type SolidFormWidgetProps = {
     fieldsMetadata: FieldsMetadata;
 };
 
-export type SolidRelationManyToManyFieldWidgetProps = {
+export type SolidFormFieldWidgetProps = {
     formik: any;
     fieldContext?: SolidFieldProps;
-};
+}
+export type SolidListFieldWidgetProps = {
+    rowData: any;
+    solidListViewMetaData: any
+    fieldMetadata: FieldMetadata;
+    column: any;
+}
 
-export type SolidBooleanFieldWidgetProps = {
-    formik: any;
-    fieldContext?: SolidFieldProps;
-};
-export type SolidSelectionStaticFieldWidgetProps = {
-    formik: any;
-    fieldContext?: SolidFieldProps;
-};
 
-export type SolidShortTextImageRenderModeWidgetProps = {
-    data: string;
+
+export type SolidMediaListFieldWidgetProps = SolidListFieldWidgetProps & {
+    setLightboxUrls?: any,
+    setOpenLightbox?: any
 }
 
-export type SolidMediaSingleFieldWidgetProps = {
-    formik: any;
-    fieldContext?: SolidFieldProps;
+
+
+
+export type SolidMediaFormFieldWidgetProps = SolidFormFieldWidgetProps & {
     setLightboxUrls?: any,
     setOpenLightbox?: any
-};
+}
+
+
+
+export type SolidShortTextImageRenderModeWidgetProps = {
+    data: string;
+}

package/src/components/core/form/fields/relations/widgets/SolidRelationManyToManyAutocompleteWidget.tsx

@@ -1,74 +0,0 @@
-"use client";
-import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
-import { AutoComplete } from "primereact/autocomplete";
-import { useState } from "react";
-import { Button } from "primereact/button";
-import { useRelationEntityHandler } from "./helpers/useRelationEntityHandler";
-import { InlineRelationEntityDialog } from "./helpers/InlineRelationEntityDialog";
-
-export const SolidRelationManyToManyAutocompleteWidget = ({ formik, fieldContext }: SolidRelationManyToManyFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-    const disabled = fieldLayoutInfo.attrs?.disabled;
-    const readOnly = fieldLayoutInfo.attrs?.readOnly;
-
-    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
-    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
-  
-    const onChange = (e: any) => {
-      formik.setFieldValue(fieldContext.field.attrs.name, e.value);
-    };
-
-    return (
-        <div className={className}>
-            <div className="mt-4">
-                {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={readOnly || readOnlyPermission}
-                        disabled={disabled || readOnlyPermission}
-                        multiple
-                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                        id={fieldLayoutInfo.attrs.name}
-                        field="label"
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        dropdown={!readOnlyPermission}
-                        suggestions={autoCompleteItems}
-                        completeMethod={(e) => fetchRelationEntities(e.query)}
-                        onChange={onChange}
-                        className="solid-standard-autocomplete w-full"
-                    />
-                    {fieldContext.field.attrs.inlineCreate && (
-                        <>
-                         <Button
-                            icon="pi pi-plus"
-                            rounded
-                            outlined
-                            aria-label="Filter"
-                            type="button"
-                            size="small"
-                            onClick={() => setVisibleCreateDialog(true)}
-                            className="custom-add-button"
-                        />
-                        <InlineRelationEntityDialog
-                            visible={visibleCreateDialog}
-                            setVisible={setVisibleCreateDialog}
-                            fieldContext={fieldContext}
-                            onCreate={addNewRelation}
-                        />
-                        </>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-}

package/src/components/core/form/fields/relations/widgets/SolidRelationManyToManyCheckboxWidget.tsx

@@ -1,103 +0,0 @@
-"use client";
-import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
-import { capitalize } from "lodash";
-import { Checkbox } from "primereact/checkbox";
-import { Panel } from "primereact/panel";
-import { useEffect, useState } from "react";
-import { Button } from "primereact/button";
-import { useRelationEntityHandler } from "./helpers/useRelationEntityHandler";
-import { InlineRelationEntityDialog } from "./helpers/InlineRelationEntityDialog";
-
-export const SolidRelationManyToManyCheckboxWidget = ({formik, fieldContext }: SolidRelationManyToManyFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-
-    const readOnlyPermission = fieldContext.readOnly;
-    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
-    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
-  
-    useEffect(() => {
-      fetchRelationEntities();
-    }, []);
-
-    const handleCheckboxChange = (e: any) => {
-        if (formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === e.value)) {
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, formik.values[fieldLayoutInfo.attrs.name].filter((s: any) => s.value !== e.value));
-        } else {
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, [...formik.values[fieldLayoutInfo.attrs.name], e]);
-        }
-    };
-
-    const headerTemplate = (options: any) => {
-        const className = `${options.className} justify-content-space-between`;
-
-        return (
-            <div className={className}>
-                <div className="flex align-items-center gap-3">
-                    {showFieldLabel != false &&
-                        <label className="form-field-label">
-                            {capitalize(fieldLayoutInfo.attrs.name)}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        </label>
-                    }
-                    {fieldContext.field.attrs.inlineCreate && (
-                        <>
-                        <Button
-                            icon="pi pi-plus"
-                            rounded
-                            outlined
-                            aria-label="Filter"
-                            type="button"
-                            size="small"
-                            onClick={() => setVisibleCreateDialog(true)}
-                            className="custom-add-button"
-                        />
-                        <InlineRelationEntityDialog
-                            visible={visibleCreateDialog}
-                            setVisible={setVisibleCreateDialog}
-                            fieldContext={fieldContext}
-                            onCreate={addNewRelation}
-                        />
-                        </>
-                    )}
-                    {/* <div className="many-to-many-add" >
-                        <Button icon="pi pi-plus"
-                            rounded
-                            outlined
-                            aria-label="Filter"
-                            type="button"
-                            onClick={() => autoCompleteSearch()}
-                        />
-                    </div> */}
-                </div>
-                <div>
-                    {options.togglerElement}
-                </div>
-            </div>
-        );
-    };
-    return (
-        <div>
-
-            <Panel toggleable headerTemplate={headerTemplate}>
-                <div className="formgrid grid">
-                    {autoCompleteItems && autoCompleteItems.map((a: any, i: number) => {
-                        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)}
-                                />
-                                <label htmlFor={a.label} className="form-field-label m-0"> {a.label}</label>
-                            </div>
-                        )
-                    })}
-                </div>
-            </Panel>
-        </div>
-    )
-        
-}

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

@@ -1,79 +0,0 @@
-"use client";
-import { SolidBooleanFieldWidgetProps } from "@/types/solid-core";
-import { useEffect, useState } from "react";
-import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
-import { Message } from "primereact/message";
-import { classNames } from "primereact/utils";
-
-export const SolidBooleanFieldCheckboxWidget = ({ formik, fieldContext }: SolidBooleanFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || "field col-12";
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-
-    // Set default value to false on mount
-    useEffect(() => {
-        if (formik.values[fieldLayoutInfo.attrs.name] === undefined) {
-            console.log("Setting default value:", false);
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, false);
-        }
-    }, []);
-
-    const handleChange = (e: CheckboxChangeEvent) => {
-        const newValue = e.checked; // This returns `true` or `false`
-        console.log(`${fieldLayoutInfo.attrs.name}, new value:`, newValue);
-        
-        formik.setFieldValue(fieldLayoutInfo.attrs.name, newValue === true ? 'true' : 'false');
-        formik.setTouched({ ...formik.touched, [fieldLayoutInfo.attrs.name]: true }); // Ensure Formik registers the change
-        // ✅ Check if Formik updated the value correctly
-    setTimeout(() => {
-        console.log("Formik values after update:", formik.values);
-    }, 0);
-    };
-
-    const isFormFieldValid = (formik:any, fieldName:any) => 
-        formik.touched[fieldName] && formik.errors[fieldName];
-
-    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;
-
-    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 font-medium">
-                            {fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        </label>
-                    )}
-
-                    <div className="flex align-items-center">
-                        <Checkbox
-                            id={fieldLayoutInfo.attrs.name}
-                            checked={formik.values[fieldLayoutInfo.attrs.name] === 'true' || formik.initialValues[fieldLayoutInfo.attrs.name] === 'true'}
-                            onChange={handleChange}
-                            disabled={formDisabled || fieldDisabled}
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            className={classNames("", {
-                                "p-invalid": isFormFieldValid(formik, fieldLayoutInfo.attrs.name),
-                            })}
-                        />
-                        <span className="ml-2">{fieldLabel || "Yes"}</span>
-                    </div>
-                </div>
-
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}

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

@@ -1,68 +0,0 @@
-"use client";
-import { SolidBooleanFieldWidgetProps } from "@/types/solid-core";
-import { useEffect, useState } from "react";
-import { Message } from "primereact/message";
-import { classNames } from "primereact/utils";
-import { SelectButton } from "primereact/selectbutton";
-
-export const SolidBooleanFieldSelectWidget = ({ formik, fieldContext }: SolidBooleanFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
-    const booleanOptions = ["false", "true"];
-    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-
-    useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
-
-    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-    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;
-
-    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 font-medium">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    {/* <InputText
-                    id={fieldLayoutInfo.attrs.name}
-                    className="small-input"
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={formik.handleChange}
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                /> */}
-                    <SelectButton
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled}
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={(e) => {formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value); console.log("value is",e.value)}} // Custom handling for boolean input
-                        value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name].toString() : "false"}
-                        options={booleanOptions}
-                        className={classNames("", {
-                            "p-invalid": isFormFieldValid(formik, "defaultValue"),
-                        })}
-
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}

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

@@ -1,23 +0,0 @@
-
-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

@@ -1,13 +0,0 @@
-
-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

@@ -1,23 +0,0 @@
-"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

@@ -1,32 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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>
-    );
-};
-