@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/chatter/SolidChatterAuditMessage.tsx

@@ -0,0 +1,35 @@
+"use client"
+import React from 'react'
+import { RightArrowSvg } from '../../../components/Svg/RightArrowSvg'
+
+interface AuditRecord {
+    field: string;
+    fieldDisplayName: string;
+    previous: string;
+    current: string;
+}
+
+interface SolidChatterAuditMessageProps {
+    auditRecord: AuditRecord[];
+}
+
+export const SolidChatterAuditMessage: React.FC<SolidChatterAuditMessageProps> = ({ auditRecord }) => {
+    return (
+        <div className='flex flex-column gap-2'>
+            {auditRecord.map((item: AuditRecord, index: number) => (
+                <div key={index} className='flex gap-2'>
+                    <span className='m-0 text-sm'>
+                        {"(" + (item.fieldDisplayName || item.field) + ")"}
+                    </span>
+                    <span className='m-0 text-sm font-bold'>
+                        {item.previous}
+                    </span>
+                    <RightArrowSvg />
+                    <span className='m-0 text-sm font-bold text-primary'>
+                        {item.current}
+                    </span>
+                </div>
+            ))}
+        </div>
+    );
+};

package/dist/components/core/chatter/SolidChatterCustomMessage.tsx

@@ -0,0 +1,46 @@
+"use client"
+import React from 'react'
+import MarkdownViewer from '../../../components/common/MarkdownViewer'
+
+interface SolidChatterCustomMessageProps {
+    message: string;
+}
+
+const isMarkupLanguage = (text: string): boolean => {
+    if (!text || typeof text !== 'string') return false;
+
+    const markdownPatterns = [
+        /^#{1,6}\s+/m,
+        /\*\*.*?\*\*/,
+        /\*.*?\*/,
+        /`.*?`/,
+        /```[\s\S]*?```/,
+        /^\s*[-*+]\s+/m,
+        /^\s*\d+\.\s+/m,
+        /\[.*?\]\(.*?\)/,
+        /^\s*\|.*\|/m,
+        /^\s*>\s+/m,
+    ];
+
+    // Check for HTML tags
+    const htmlPattern = /<\/?[a-z][\s\S]*?>/i;
+
+    return markdownPatterns.some(pattern => pattern.test(text)) || htmlPattern.test(text);
+};
+
+export const SolidChatterCustomMessage: React.FC<SolidChatterCustomMessageProps> = ({ message }) => {
+    const isMarkup = isMarkupLanguage(message);
+    if (isMarkup) {
+        return (
+            <div className="custom-message-wrapper">
+                <MarkdownViewer data={message} />
+            </div>
+        );
+    }
+
+    return (
+        <p className='m-0 text-sm'>
+            {message}
+        </p>
+    );
+};

package/dist/components/core/chatter/SolidChatterDateDivider.tsx

@@ -0,0 +1,16 @@
+"use client"
+import styles from './chatter.module.css';
+
+interface Props {
+    date: string;
+}
+
+export const SolidChatterDateDivider = ({ date }: Props) => {
+    return (
+        <div className={styles.chatterDatetimeDivider}>
+            <div className={`${styles.chatterDividerContent} absolute`}>
+                {date}
+            </div>
+        </div>
+    )
+}

package/dist/components/core/chatter/SolidChatterHeader.tsx

@@ -0,0 +1,218 @@
+"use client"
+import { Button } from 'primereact/button'
+import { Calendar } from 'primereact/calendar'
+import { Dialog } from 'primereact/dialog'
+import { AutoComplete } from 'primereact/autocomplete'
+import { useEffect, useState } from 'react'
+import styles from './chatter.module.css'
+import { SolidMessageComposer } from './SolidMessageComposer'
+import { useLazyGetusersQuery } from '../../../redux/api/userApi'
+import { ERROR_MESSAGES } from '../../../constants/error-messages'
+interface FilterState {
+    name: string;
+    startDate: Date | null;
+    endDate: Date | null;
+}
+
+interface Props {
+    activeTab: any,
+    handleTabClick: any,
+    visibleBox: any,
+    modelSingularName: any,
+    refetch: any,
+    id: any,
+    onFilterChange?: (filters: FilterState) => void;
+}
+
+export const SolidChatterHeader = (props: Props) => {
+    const { activeTab, visibleBox, handleTabClick, modelSingularName, refetch, id, onFilterChange } = props;
+    const [showFilterDialog, setShowFilterDialog] = useState(false);
+    const [filters, setFilters] = useState<FilterState>({
+        name: '',
+        startDate: null,
+        endDate: null
+    });
+    const [hasActiveFilters, setHasActiveFilters] = useState(false);
+    const [suggestions, setSuggestions] = useState<any[]>([]);
+    const [getUsers] = useLazyGetusersQuery();
+
+    useEffect(() => {
+        const isActive = filters.name !== '' || filters.startDate !== null || filters.endDate !== null;
+        setHasActiveFilters(isActive);
+    }, [filters]);
+
+    const handleFilterClick = () => {
+        setShowFilterDialog(true);
+    };
+
+    const handleApplyFilters = () => {
+        if (onFilterChange) {
+            onFilterChange(filters);
+        }
+        setShowFilterDialog(false);
+    };
+
+    const handleClearFilters = () => {
+        const clearedFilters = {
+            name: '',
+            startDate: null,
+            endDate: null
+        };
+        setFilters(clearedFilters);
+        if (onFilterChange) {
+            onFilterChange(clearedFilters);
+        }
+        setShowFilterDialog(false);
+    };
+
+    const searchUsers = async (event: { query: string }) => {
+        try {
+            const response = await getUsers(`filters[fullName][$containsi]=${event.query}`).unwrap();
+            setSuggestions(response?.data?.records || []);
+        } catch (error) {
+            console.error(ERROR_MESSAGES.FETCHING_USER, error);
+            setSuggestions([]);
+        }
+    };
+
+    const itemTemplate = (item: any) => {
+        return (
+            <div className="flex align-items-center">
+                <div>{item.fullName}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className={styles.chatterTitle}>
+            <div className='flex justify-content-between align-items-center'>
+                <div className="form-wrapper-title ">
+                    Activity
+                </div>
+                <div className='flex align-items-center gap-2'>
+                    {/* <Button
+                        label="Send Message"
+                        size="small"
+                        type="button"
+                        onClick={() => handleTabClick('email-message')}
+                        {...(activeTab !== 'email-message' && {
+                            severity: 'secondary',
+                            outlined: true,
+                        })}
+                    /> */}
+                    <Button
+                        label="Log Note"
+                        size="small"
+                        type="button"
+                        onClick={() => handleTabClick('log')}
+                        {...(activeTab !== 'log' && {
+                            severity: 'secondary',
+                            outlined: true,
+                        }
+                        )}
+                    />
+                    <Button
+                        icon="pi pi-filter-fill"
+                        text
+                        size='small'
+                        severity="secondary"
+                        aria-label="Filter"
+                        style={{
+                            width: 20,
+                            color: hasActiveFilters ? '#722ED1' : undefined
+                        }}
+                        onClick={handleFilterClick}
+                    />
+                    <Button
+                        icon="pi pi-refresh"
+                        text
+                        size='small'
+                        severity="secondary"
+                        aria-label="Refresh"
+                        style={{
+                            width: 20
+                        }}
+                        onClick={refetch}
+                    />
+                </div>
+            </div>
+            {visibleBox &&
+                <div className='mt-4'>
+                    {visibleBox === "email-message" &&
+                        <SolidMessageComposer id={id} refetch={refetch} modelSingularName={modelSingularName} type={"email"} />
+                    }
+
+                    {visibleBox === "log" &&
+                        <SolidMessageComposer id={id} refetch={refetch} modelSingularName={modelSingularName} />
+                    }
+                </div>
+            }
+            <Dialog 
+                header="Filter Messages" 
+                visible={showFilterDialog} 
+                style={{ width: 500 }} 
+                onHide={() => setShowFilterDialog(false)}
+                className='solid-chatter-filter-main'
+            >
+                <div className="p-fluid">
+                    <div className="flex flex-column gap-2">
+                        <label htmlFor="name">Name:</label>
+                        <AutoComplete
+                            id="fullName"
+                            value={filters.name}
+                            suggestions={suggestions}
+                            completeMethod={searchUsers}
+                            field="fullName"
+                            onChange={(e) => setFilters(prev => ({ 
+                                ...prev, 
+                                name: typeof e.value === 'object' ? e.value.fullName : e.value 
+                            }))}
+                            placeholder="Filter By User"
+                            itemTemplate={itemTemplate}
+                            className="w-full"
+                        />
+                    </div>
+                    <div className="flex flex-column gap-2 mt-3">
+                        <label htmlFor="dateRange">Date Range</label>
+                        <div className="flex gap-2">
+                            <div className="flex-1">
+                                <Calendar
+                                    id="startDate"
+                                    value={filters.startDate}
+                                    onChange={(e) => setFilters(prev => ({ ...prev, startDate: e.value as Date }))}
+                                    placeholder="Start Date"
+                                    showIcon
+                                    dateFormat="dd/mm/yy"
+                                    className="w-full"
+                                />
+                            </div>
+                            <div className="flex-1">
+                                <Calendar
+                                    id="endDate"
+                                    value={filters.endDate}
+                                    onChange={(e) => setFilters(prev => ({ ...prev, endDate: e.value as Date }))}
+                                    placeholder="End Date"
+                                    showIcon
+                                    dateFormat="dd/mm/yy"
+                                    className="w-full"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="flex justify-content-end gap-2 mt-4">
+                        <Button 
+                            label="Clear" 
+                            severity="secondary" 
+                            outlined 
+                            onClick={handleClearFilters}
+                        />
+                        <Button 
+                            label="Apply" 
+                            onClick={handleApplyFilters}
+                        />
+                    </div>
+                </div>
+            </Dialog>
+        </div>
+    )
+}

package/dist/components/core/chatter/SolidChatterMessageBox.tsx

@@ -0,0 +1,163 @@
+"use client"
+import { getTextColor, stringToColor } from '../../../helpers/getRandomColors'
+import Image from 'next/image'
+import { Avatar } from 'primereact/avatar'
+import { Dialog } from 'primereact/dialog'
+import { useMemo, useState } from 'react'
+import styles from './chatter.module.css'
+import { SolidChatterCustomMessage } from './SolidChatterCustomMessage'
+import { SolidChatterAuditMessage } from './SolidChatterAuditMessage'
+
+interface Props {
+    user: string,
+    messageType?: string,
+    message?: any,
+    time?: string,
+    auditRecord?: any,
+    messageSubType?: string,
+    modelDisplayName?: string,
+    modelUserKey?: string,
+    media?: {
+        messageAttachments?: Array<{
+            id: number;
+            relativeUri: string;
+            mimeType: string;
+            originalFileName: string;
+            _full_url: string;
+        }>;
+    };
+}
+
+const getFileIcon = (mimeType: string) => {
+    if (mimeType.startsWith('image/')) {
+        return 'pi pi-image';
+    }
+    switch (mimeType) {
+        case 'application/pdf':
+            return 'pi pi-file-pdf';
+        case 'application/vnd.ms-excel':
+        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+            return 'pi pi-file-excel';
+        case 'application/msword':
+        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+            return 'pi pi-file-word';
+        case 'text/plain':
+            return 'pi pi-file';
+        default:
+            return 'pi pi-file';
+    }
+};
+
+export const SolidChatterMessageBox = (props: Props) => {
+    const { user, messageType, message, time, auditRecord, media, messageSubType, modelDisplayName, modelUserKey } = props;
+    const [selectedImage, setSelectedImage] = useState<string | null>(null);
+    const [isImageDialogVisible, setIsImageDialogVisible] = useState(false);
+
+    const avatarStyle = useMemo(() => {
+        const bg = stringToColor(user)
+        const color = getTextColor(bg)
+        return { backgroundColor: bg, color, height: 24, width: 24, fontSize: 10, fontWeight: 600 }
+    }, [user])
+
+    const handleImageClick = (url: string) => {
+        setSelectedImage(url);
+        setIsImageDialogVisible(true);
+    };
+
+    const renderMessageContent = () => {
+        switch (messageType) {
+            case 'audit':
+                return <SolidChatterAuditMessage auditRecord={auditRecord} />;
+            case 'custom':
+            default:
+                return <SolidChatterCustomMessage message={message} />;
+        }
+    };
+
+    return (
+        <div className={styles.solidChatterMessageBox}>
+            <div className='flex align-items-center'>
+                <div style={{ width: 32 }}>
+                    <Avatar label={user.charAt(0).toUpperCase()} style={avatarStyle} shape="circle" />
+                </div>
+                <div className='flex align-items-center justify-content-between' style={{ width: '100%' }}>
+                    <div className='text-sm'>
+                        <span className='font-bold'>{user}</span>
+                        <span className='ml-2' style={{ color: '#949494' }}>
+                            {messageType === 'audit' ? messageSubType === "audit_update"
+                                    ? <>Updated {modelUserKey && <span style={{fontStyle: 'italic', fontWeight: '600'}}>({modelUserKey})</span>}</>
+                                    : messageSubType === "audit_insert"
+                                        ? <>Inserted {modelUserKey && <span style={{fontStyle: 'italic', fontWeight: '600'}}>({modelUserKey})</span>}</>
+                                        : "Custom" : "Custom"}
+                        </span>
+                    </div>
+                    {modelDisplayName && <span style={{fontStyle: 'italic', fontWeight: '600'}}>{modelDisplayName}</span>}
+                </div>
+            </div>
+            <div className='flex align-items-center mt-1'>
+                <div style={{ width: 32 }}>
+                </div>
+                <div style={{ width: '100%' }}>
+                    <p className='mb-1 text-sm font-bold' style={{ color: '#949494' }}>
+                        {time}
+                    </p>
+                    {message && <div className={styles.solidMessageWrapper}>
+                        {renderMessageContent()}
+                    </div>}
+                    {media?.messageAttachments && media.messageAttachments.length > 0 && (
+                        <div className='flex flex-wrap gap-2 mt-2'>
+                            {media.messageAttachments.map((attachment) => {
+                                const isImage = attachment.mimeType.startsWith('image/');
+                                return (
+                                    <div key={attachment.id} className='flex align-items-center gap-2 bg-gray-100 p-2 rounded'>
+                                        {isImage ? (
+                                            <div 
+                                                className='cursor-pointer'
+                                                onClick={() => handleImageClick(attachment._full_url)}
+                                            >
+                                                <Image
+                                                    src={encodeURI(attachment._full_url)}
+                                                    alt={attachment.originalFileName}
+                                                    width={50}
+                                                    height={50}
+                                                    className='rounded'
+                                                    style={{ objectFit: 'cover' }}
+                                                />
+                                            </div>
+                                        ) : (
+                                            <a 
+                                                href={encodeURI(attachment._full_url)}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className='flex align-items-center gap-2 text-decoration-none'
+                                            >
+                                                <i className={getFileIcon(attachment.mimeType)} />
+                                                <span className='text-sm'>{attachment.originalFileName}</span>
+                                            </a>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            </div>
+            <Dialog
+                visible={isImageDialogVisible}
+                onHide={() => setIsImageDialogVisible(false)}
+                className='w-9 '
+                modal
+            >
+                {selectedImage && (
+                    <Image
+                        src={selectedImage}
+                        alt="Preview"
+                        width={800}
+                        height={600}
+                        style={{ width: '100%', height: 'auto' }}
+                    />
+                )}
+            </Dialog>
+        </div>
+    )
+}

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

@@ -0,0 +1,146 @@
+"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';
+import { ERROR_MESSAGES } from '../../../constants/error-messages'
+export const SolidMessageComposer = ({ type, modelSingularName, refetch, id }: { type?: string, modelSingularName?: 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', "custom");
+            formData.append('messageBody', message);
+            formData.append('coModelEntityId', id);
+            formData.append('coModelName', modelSingularName);
+            formData.append('userId', user?.user?.id || 1);
+
+            selectedFiles.forEach((file, index) => {
+                formData.append(`messageAttachments`, file);
+            });
+
+            await createChatterMessage(formData).unwrap();
+            setMessage('');
+            setSelectedFiles([]);
+        } catch (error) {
+            console.error(ERROR_MESSAGES.FETCHING_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' }}
+                    type='button'
+                />
+            </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/dist/components/core/common/AvatarWidget.tsx

@@ -0,0 +1,55 @@
+export const AvatarWidget = ({ value }: any) => {
+    // use "widget": "SolidUserNameAvatarWidget" in the list view field 
+
+
+    const getInitials = (value: string) => {
+        if (value) {
+            const names = value?.trim().split(' ');
+            const initials =
+                names.length === 1
+                    ? names[0][0]
+                    : names[0][0] + names[names.length - 1][0];
+            return initials.toUpperCase();
+        } else {
+            return ""
+        }
+    };
+
+    const getColorFromInitials = (initials: string) => {
+        let hash = 0;
+        for (let i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash) % 360;
+        return `hsl(${hue}, 60%, 60%)`; // nice pastel color
+    };
+
+    const initials = getInitials(value);
+    const bgColor = getColorFromInitials(initials);
+
+    return (
+        <div className="solid-table-row">
+            {value &&
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <div
+                        style={{
+                            width: 20,
+                            height: 20,
+                            borderRadius: '50%',
+                            backgroundColor: bgColor,
+                            color: 'white',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontWeight: 600,
+                            fontSize: 12
+                        }}
+                    >
+                        {initials}
+                    </div>
+                    <span>{value}</span>
+                </div>
+            }
+        </div>
+    );
+};