@solidstarters/solid-core-ui 1.1.70 → 1.1.72

package/src/components/core/chatter/SolidMessageComposer.tsx

@@ -0,0 +1,145 @@
+"use client"
+import { InputText } from 'primereact/inputtext'
+import styles from './chatter.module.css'
+import { Button } from 'primereact/button'
+import { useCreateChatterMessageMutation } from '@/redux/api/solidChatterMessageApi'
+import { useEffect, useState, useRef } from 'react'
+import { useGetSolidViewLayoutQuery } from '@/redux/api/solidViewApi'
+import { useSelector } from 'react-redux'
+import { FileUpload } from 'primereact/fileupload';
+
+export const SolidMessageComposer = ({ type, solidFormViewMetaData, refetch, id }: { type?: string, solidFormViewMetaData?: any, refetch?: any, id?: any }) => {
+    const [message, setMessage] = useState('');
+    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+    const { user } = useSelector((state: any) => state.auth);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    // const { data: viewLayoutData } = useGetSolidViewLayoutQuery(null);
+    const [createChatterMessage, { isLoading, isSuccess, isError }] = useCreateChatterMessageMutation();
+
+    const tempEmails = [
+        "johndoe@gmal.com",
+        "tempmail@gmail.com",
+        "example@mail.com"
+    ]
+
+    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files) {
+            const files = Array.from(event.target.files);
+            setSelectedFiles(prev => [...prev, ...files]);
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!message.trim() && selectedFiles.length === 0) return;
+
+        try {
+            const formData = new FormData();
+            formData.append('messageType', "custom");
+            formData.append('messageSubType', "audit_insert");
+            formData.append('messageBody', message);
+            formData.append('coModelEntityId', id);
+            formData.append('coModelName', solidFormViewMetaData?.data?.solidView?.model?.singularName);
+            formData.append('userId', user?.user?.id);
+
+            selectedFiles.forEach((file, index) => {
+                formData.append(`messageAttachments`, file);
+            });
+
+            await createChatterMessage(formData).unwrap();
+            setMessage('');
+            setSelectedFiles([]);
+        } catch (error) {
+            console.error('Error creating message:', error);
+        }
+    };
+
+    useEffect(() => {
+        if (isSuccess) {
+            refetch()
+        }
+    }, [isSuccess]);
+
+    return (
+        <form className={styles.chatterMessageComposer} onSubmit={handleSubmit}>
+            {/* {type === 'email' &&
+                <div className='flex align-items-center gap-1 text-sm mb-2'>
+                    <span className='font-bold'>To:</span>
+                    <div className={styles.chatterEmails}>
+                        {tempEmails.map((mail, index) => (
+                            <span key={index}>
+                                {mail}
+                            </span>
+                        ))}
+                    </div>
+                    <div className={`pi pi-sort-down-fill text-primary ${styles.emailTooltipIcon}`} style={{ fontSize: 8 }}>
+                        <div className={styles.emailsTooltip}>
+                            {tempEmails.map((mail, index) => (
+                                <span key={index} className='text-color text-sm'>
+                                    {mail}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            } */}
+            <div className='flex align-items-center gap-2'>
+                <InputText
+                    type="text"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder={type === 'email' ? 'Send a message to followers' : 'Log an internal note...'}
+                    className={`p-inputtext-sm w-full p-2 ${styles.chatterMessageInput}`}
+                />
+                <input
+                    type="file"
+                    ref={fileInputRef}
+                    onChange={handleFileSelect}
+                    multiple
+                    style={{ display: 'none' }}
+                />
+                <Button
+                    icon="pi pi-plus"
+                    className="p-button-rounded p-button-text"
+                    onClick={() => fileInputRef.current?.click()}
+                    tooltip="Attach files"
+                    tooltipOptions={{ position: 'top' }}
+                />
+            </div>
+            {selectedFiles.length > 0 && (
+                <div className='flex flex-wrap gap-2 mt-2'>
+                    {selectedFiles.map((file, index) => (
+                        <div key={index} className='flex align-items-center gap-2 bg-gray-100 p-2 rounded'>
+                            <span className='text-sm'>{file.name}</span>
+                            <Button
+                                icon="pi pi-times"
+                                className="p-button-rounded p-button-text p-button-sm"
+                                onClick={() => setSelectedFiles(prev => prev.filter((_, i) => i !== index))}
+                            />
+                        </div>
+                    ))}
+                </div>
+            )}
+            <div className='mt-3 flex align-items-center gap-2'>
+                <Button
+                    label={type === 'email' ? 'Send' : 'Log'}
+                    size='small'
+                    type='submit'
+                    loading={isLoading}
+                />
+                <Button
+                    label='Cancel'
+                    size='small'
+                    type='button'
+                    text
+                    severity='contrast'
+                    onClick={() => {
+                        setMessage('');
+                        setSelectedFiles([]);
+                    }}
+                />
+            </div>
+        </form>
+    )
+}

package/src/components/core/chatter/chatter.module.css

@@ -0,0 +1,70 @@
+.chatterTitle {
+    padding: 15px;
+    border-bottom: 1px solid #D8E2EA;
+}
+
+.chatterMessageComposer .chatterMessageInput {
+    background-color: #FEFCFF;
+    border: 1px solid #D8E2EA;
+}
+
+.chatterMessageComposer .chatterMessageInput::placeholder {
+    color: rgba(51, 51, 51, 0.20);
+}
+
+.chatterEmails {
+    max-width: 80%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.emailTooltipIcon {
+    position: relative;
+}
+
+.emailsTooltip {
+    visibility: hidden;
+    position: absolute;
+    right: 0px !important;
+    top: 1;
+    background-color: #fff;
+    border: 1px solid #D8E2EA;
+    padding: 8px;
+    border-radius: 8px !important;
+    min-width: 200;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.emailTooltipIcon:hover .emailsTooltip {
+    visibility: visible !important;
+}
+
+.chatterDatetimeDivider {
+    border-top: 1px dashed #00000026;
+    position: relative;
+    margin: 30px 0;
+}
+
+.chatterDividerContent {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 6.25rem;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    background: #FAFAFA;
+    padding: 0.25rem 0.5rem;
+    text-wrap: nowrap;
+    font-size: 0.625rem;
+    font-weight: 600;
+    color: var(--secondary-dark-color);
+}
+
+.solidMessageWrapper {
+    border: 1px solid #D8E2EA;
+    padding: 10px;
+    border-radius: 0.25rem;
+    width: 100%;
+}

package/src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
 import { capitalize } from "lodash";
 import { Panel } from "primereact/panel";
 import { useEffect, useState } from "react";
@@ -8,6 +7,7 @@ import { InputSwitch } from "primereact/inputswitch";
 import { useRelationEntityHandler } from "@/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler";
 import { InlineRelationEntityDialog } from "@/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog";
 import { Checkbox } from "primereact/checkbox";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
 
 const groupByController = (items: any[]) => {
     const grouped: { [key: string]: any[] } = {};
@@ -21,7 +21,7 @@ const groupByController = (items: any[]) => {
     return grouped;
 };
 
-export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidRelationManyToManyFieldWidgetProps) => {
+export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
     const fieldLayoutInfo = fieldContext.field;
 
     const readOnlyPermission = fieldContext.readOnly;

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

@@ -49,6 +49,7 @@ import Counter from "yet-another-react-lightbox/plugins/counter";
 import Download from "yet-another-react-lightbox/plugins/download";
 import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/counter.css";
+import { SolidChatter } from "../chatter/SolidChatter";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -363,6 +364,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const [viewMode, setViewMode] = useState<"view" | "edit">("view");
     const [openLightbox, setOpenLightbox] = useState(false);
     const [lightboxUrls, setLightboxUrls] = useState([]);
+    const [isShowChatter, setShowChatter] = useState(true);
+
     const errorFields: string[] = [];
 
     const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
@@ -453,13 +456,14 @@ const SolidFormView = (params: SolidFormViewProps) => {
         data: solidFormViewMetaData,
         isLoading: solidFormViewMetaDataIsLoading
     } = useGetSolidViewLayoutQuery(formViewMetaDataQs);
-
+    const [refreshChatterMessage, setRefreshChatterMessage] = useState<boolean>(true);
     useEffect(() => {
         if (
             isEntityCreateSuccess == true ||
             isEntityUpdateSuceess == true ||
             isEntityDeleteSuceess == true
         ) {
+            setRefreshChatterMessage(true);
             // Close The pop in case the form is used in embeded form
             if (params.embeded == true) {
                 params.handlePopupClose()
@@ -1103,30 +1107,30 @@ const SolidFormView = (params: SolidFormViewProps) => {
         return (
             <div className="solid-form-wrapper">
                 <Toast ref={toast} />
-
-                <form style={{ width: params.embeded !== true ? '77.5%' : '100%', borderRight: params.embeded !== true ? '1px solid var(--primary-light-color' : '' }} onSubmit={formik.handleSubmit}>
-                    <div className="solid-form-header">
-                        {params.id === "new" ? (
-                            <>
-                                <div className="flex align-items-center gap-3">
-                                    {params.embeded !== true && <BackButton />}
-                                    <div className="form-wrapper-title"> {createHeaderTitle}</div>
-                                </div>
-                                <div className="gap-3 flex">
-                                    {params.embeded !== true &&
-                                        actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
-                                        !formViewLayout.attrs.readonly &&
-                                        formik.dirty &&
-                                        <div>
-                                            <Button
-                                                label="Save"
-                                                size="small"
-                                                onClick={() => showError()}
-                                                type="submit"
-                                            />
-                                        </div>
-                                    }
-                                    {/* {params.embeded !== true &&
+                <div className="solid-form-section" style={{ borderRight: params.embeded !== true ? '1px solid var(--primary-light-color' : '' }} >
+                    <form style={{ width: '100%' }} onSubmit={formik.handleSubmit}>
+                        <div className="solid-form-header">
+                            {params.id === "new" ? (
+                                <>
+                                    <div className="flex align-items-center gap-3">
+                                        {params.embeded !== true && <BackButton />}
+                                        <div className="form-wrapper-title"> {createHeaderTitle}</div>
+                                    </div>
+                                    <div className="gap-3 flex">
+                                        {params.embeded !== true &&
+                                            actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
+                                            !formViewLayout.attrs.readonly &&
+                                            formik.dirty &&
+                                            <div>
+                                                <Button
+                                                    label="Save"
+                                                    size="small"
+                                                    onClick={() => showError()}
+                                                    type="submit"
+                                                />
+                                            </div>
+                                        }
+                                        {/* {params.embeded !== true &&
                                         actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
                                         <div>
@@ -1142,80 +1146,80 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                         </div>
                                     } */}
 
-                                    {/* Inline */}
-                                    {params.embeded == true &&
-                                        actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
-                                        !formViewLayout.attrs.readonly &&
-                                        formik.dirty &&
-                                        <div>
-                                            <Button
-                                                label="Save"
-                                                size="small"
-                                                onClick={() => {
-                                                    setRedirectToList(false);
-                                                    showError()
-                                                }}
-                                                type="submit"
-                                            />
-                                        </div>
-                                    }
-                                    {params.embeded == true &&
-                                        <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
+                                        {/* Inline */}
+                                        {params.embeded == true &&
+                                            actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
+                                            !formViewLayout.attrs.readonly &&
+                                            formik.dirty &&
+                                            <div>
+                                                <Button
+                                                    label="Save"
+                                                    size="small"
+                                                    onClick={() => {
+                                                        setRedirectToList(false);
+                                                        showError()
+                                                    }}
+                                                    type="submit"
+                                                />
+                                            </div>
+                                        }
+                                        {params.embeded == true &&
+                                            <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
 
-                                    }
-                                    {params.embeded !== true &&
-                                        <SolidCancelButton />
-                                    }
-                                    {formActionDropdown()}
-                                </div>
-                            </>
-                        ) : (
-                            <>
-                                <div className="flex align-items-center gap-3">
-                                    {params.embeded !== true && <BackButton />}
-                                    <div className="form-wrapper-title"> {editHeaderTitle}</div>
-                                </div>
-                                <div className="gap-3 flex">
-                                    {params.embeded !== true && viewMode === "view" &&
-                                        <div>
-                                            <Button
-                                                label="Edit"
-                                                size="small"
-                                                onClick={() => updateViewMode("edit")}
-                                                type="button"
-                                            />
-                                        </div>
-                                    }
+                                        }
+                                        {params.embeded !== true &&
+                                            <SolidCancelButton />
+                                        }
+                                        {formActionDropdown()}
+                                    </div>
+                                </>
+                            ) : (
+                                <>
+                                    <div className="flex align-items-center gap-3">
+                                        {params.embeded !== true && <BackButton />}
+                                        <div className="form-wrapper-title"> {editHeaderTitle}</div>
+                                    </div>
+                                    <div className="gap-3 flex">
+                                        {params.embeded !== true && viewMode === "view" &&
+                                            <div>
+                                                <Button
+                                                    label="Edit"
+                                                    size="small"
+                                                    onClick={() => updateViewMode("edit")}
+                                                    type="button"
+                                                />
+                                            </div>
+                                        }
 
-                                    {params.embeded !== true &&
-                                        actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
-                                        !formViewLayout.attrs.readonly &&
-                                        formik.dirty &&
-                                        <div>
-                                            <Button
-                                                label="Save"
-                                                size="small"
-                                                onClick={() => showError()}
-                                                type="submit"
-                                            />
-                                        </div>
-                                    }
+                                        {params.embeded !== true &&
+                                            actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
+                                            !formViewLayout.attrs.readonly &&
+                                            formik.dirty &&
+                                            <div>
+                                                <Button
+                                                    label="Save"
+                                                    size="small"
+                                                    onClick={() => showError()}
+                                                    type="submit"
+                                                />
+                                            </div>
+                                        }
 
-                                    {/* Inline */}
-                                    {params.embeded == true &&
-                                        actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
-                                        !formViewLayout.attrs.readonly &&
-                                        formik.dirty &&
-                                        <div>
-                                            <Button
-                                                label="Save"
-                                                size="small"
-                                                onClick={() => showError()}
-                                                type="submit"
-                                            />
-                                        </div>
-                                    }
-                                    {/* {params.embeded !== true &&
+                                        {/* Inline */}
+                                        {params.embeded == true &&
+                                            actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
+                                            !formViewLayout.attrs.readonly &&
+                                            formik.dirty &&
+                                            <div>
+                                                <Button
+                                                    label="Save"
+                                                    size="small"
+                                                    onClick={() => showError()}
+                                                    type="submit"
+                                                />
+                                            </div>
+                                        }
+                                        {/* {params.embeded !== true &&
                                         actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
                                         <div>
@@ -1230,55 +1234,81 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                             />
                                         </div>
                                     } */}
-                                    {params.embeded == true &&
-                                        actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
-                                        !formViewLayout.attrs.readonly &&
-                                        <div>
-                                            <Button
-                                                size="small"
-                                                type="button"
-                                                label="Delete"
-                                                severity="danger"
-                                                onClick={() => setDeleteDialogVisible(true)}
-                                            />
-                                        </div>
-                                    }
-                                    {params.embeded == true &&
-                                        <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
+                                        {params.embeded == true &&
+                                            actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
+                                            !formViewLayout.attrs.readonly &&
+                                            <div>
+                                                <Button
+                                                    size="small"
+                                                    type="button"
+                                                    label="Delete"
+                                                    severity="danger"
+                                                    onClick={() => setDeleteDialogVisible(true)}
+                                                />
+                                            </div>
+                                        }
+                                        {params.embeded == true &&
+                                            <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
 
-                                    }
-                                    {params.embeded !== true &&
-                                        <SolidCancelButton />
-                                    }
-                                    {formActionDropdown()}
-                                </div>
-                            </>
-                        )}
-                    </div>
-                    {/* {params.embeded !== true &&
+                                        }
+                                        {params.embeded !== true &&
+                                            <SolidCancelButton />
+                                        }
+                                        {formActionDropdown()}
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                        {/* {params.embeded !== true &&
                         <SolidBreadcrumb
                             solidViewData={solidFormViewMetaData?.data?.solidView?.model}
                             initialEntityData={initialEntityData}
                         />
                     } */}
-                    {params.embeded !== true &&
-                        // <div className="solid-form-stepper">
-                        <SolidFormHeader
-                            // solidFormViewMetaData={solidFormViewMetaData?.data?.solidView?.model}
-                            solidFormViewMetaData={solidFormViewMetaData}
-                            initialEntityData={initialEntityData}
-                            modelName={params.modelName}
-                            id={params.id}
+                        {params.embeded !== true &&
+                            // <div className="solid-form-stepper">
+                            <SolidFormHeader
+                                // solidFormViewMetaData={solidFormViewMetaData?.data?.solidView?.model}
+                                solidFormViewMetaData={solidFormViewMetaData}
+                                initialEntityData={initialEntityData}
+                                modelName={params.modelName}
+                                id={params.id}
+                            />
+                            // </div>
+                        }
+                        <div className="p-4 solid-form-content">
+                            {DynamicHeaderComponent && <DynamicHeaderComponent />}
+                            {renderFormDynamically(formViewMetaData)}
+                        </div>
+                    </form>
+                    {params.embeded !== true && isShowChatter === true &&
+                        <Button
+                            icon="pi pi-chevron-right"
+                            size="small"
+                            text
+                            className="chatter-collapse-btn"
+                            style={{ width: 30 }}
+                            onClick={() => setShowChatter(false)}
                         />
-                        // </div>
                     }
-                    <div className="p-4 solid-form-content">
-                        {DynamicHeaderComponent && <DynamicHeaderComponent />}
-                        {renderFormDynamically(formViewMetaData)}
-                    </div>
-                </form>
+                </div>
                 {params.embeded !== true &&
-                    <div style={{ width: '22.5%' }}>
+                    <div className={`chatter-section ${isShowChatter === false ? 'collapsed' : ''}`}>
+                        {isShowChatter === false ?
+                            <div className="flex flex-column gap-2 justify-content-center p-2">
+                                <div className="chatter-collapsed-content">
+                                    Chatter/Audit Trail
+                                </div>
+                                <Button
+                                    icon="pi pi-chevron-left"
+                                    size="small"
+                                    className="px-0"
+                                    style={{ width: 30 }}
+                                    onClick={() => {setShowChatter(true); setRefreshChatterMessage(true);}}
+                                />
+                            </div>
+                            : <SolidChatter solidFormViewMetaData={solidFormViewMetaData} id={params.id} refreshChatterMessage={refreshChatterMessage} setRefreshChatterMessage={setRefreshChatterMessage} />
+                        }
                     </div>
                 }
                 <Dialog