@solidstarters/solid-core-ui 1.1.69 → 1.1.71

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

@@ -0,0 +1,252 @@
+"use client"
+import React, { useState, useEffect } from 'react'
+import { SolidChatterHeader } from './SolidChatterHeader'
+import { SolidChatterDateDivider } from './SolidChatterDateDivider'
+import { SolidChatterMessageBox } from './SolidChatterMessageBox'
+import { useLazyGetchatterMessageQuery, useLazyGetchatterMessageDetailQuery } from '@/redux/api/solidChatterMessageApi'
+import qs from "qs";
+
+interface FilterState {
+    name: string;
+    startDate: Date | null;
+    endDate: Date | null;
+}
+
+export const SolidChatter = ({ solidFormViewMetaData, id, refreshChatterMessage, setRefreshChatterMessage }: { solidFormViewMetaData: any, id: string, refreshChatterMessage: boolean, setRefreshChatterMessage: (value: boolean) => void }) => {
+    const [activeTab, setActiveTab] = useState<'email-message' | 'log' | null>('email-message');
+    const [visibleBox, setVisibleBox] = useState<'email-message' | 'log' | null>(null);
+    const [messages, setMessages] = useState<any[]>([]);
+    const [filters, setFilters] = useState<FilterState>({
+        name: '',
+        startDate: null,
+        endDate: null
+    });
+
+    const queryDataChatterMessage = {
+        filters: {
+            messageType: {
+                $eqi: 'custom'
+            },
+            coModelName: {
+                $eq: solidFormViewMetaData?.data?.solidView?.model?.singularName
+            },
+            coModelEntityId: {
+                $eq: id
+            }
+        }
+    };
+
+    const queryStringChatterMessage = qs.stringify(queryDataChatterMessage, {
+        encodeValuesOnly: true,
+    });
+
+    const queryDataChatterMessageDetail = {
+        populate: ['chatterMessage', 'chatterMessage.user'],
+        filters: {
+            chatterMessage: {
+                coModelName: {
+                    $eq: solidFormViewMetaData?.data?.solidView?.model?.singularName
+                },
+                coModelEntityId: {
+                    $eq: id
+                }
+            }
+        }
+    };
+
+    const queryStringChatterMessageDetail = qs.stringify(queryDataChatterMessageDetail, {
+        encodeValuesOnly: true,
+    });
+
+    const [getchatterMessage, { data: chatterMessageData, isLoading: isCustomLoading, isError: isCustomError }] = useLazyGetchatterMessageQuery();
+    const [getchatterMessageDetail, { data: auditMessageData, isLoading: isAuditLoading, isError: isAuditError }] = useLazyGetchatterMessageDetailQuery();
+
+    useEffect(() => {
+        if (refreshChatterMessage) {
+            fetchData();
+            setRefreshChatterMessage(false);
+        }
+    }, [refreshChatterMessage]);
+
+    useEffect(() => {
+        fetchData();
+    }, [filters]);
+
+    const handleTabClick = (tab: 'email-message' | 'log') => {
+        setActiveTab(tab);
+        setVisibleBox(prev => (prev === tab ? null : tab));
+    }
+
+    const formatDate = (dateString: string) => {
+        const date = new Date(dateString);
+        const today = new Date();
+        const yesterday = new Date(today);
+        yesterday.setDate(yesterday.getDate() - 1);
+
+        if (date.toDateString() === today.toDateString()) {
+            return 'Today';
+        } else if (date.toDateString() === yesterday.toDateString()) {
+            return 'Yesterday';
+        } else {
+            return date.toLocaleDateString('en-US', { 
+                year: 'numeric', 
+                month: 'long', 
+                day: 'numeric' 
+            });
+        }
+    };
+
+    const groupAuditMessages = (messages: any[]) => {
+        const groupedMessages: any[] = [];
+        const timeMap = new Map();
+
+        messages.forEach((msg) => {
+            if (msg.auditType === 'audit') {
+                const timeKey = msg.time;
+                if (timeMap.has(timeKey)) {
+                    const existingMsg = timeMap.get(timeKey);
+                    existingMsg.auditRecord.push(...msg.auditRecord);
+                } else {
+                    timeMap.set(timeKey, { ...msg });
+                    groupedMessages.push(timeMap.get(timeKey));
+                }
+            } else {
+                groupedMessages.push(msg);
+            }
+        });
+
+        return groupedMessages;
+    };
+
+    const filterMessages = (messages: any[]) => {
+        console.log("Current filters:", filters);
+        return messages.filter(msg => {
+            if (filters.name && !msg.user.toLowerCase().includes(filters.name.toLowerCase())) {
+                return false;
+            }
+
+            const messageDate = new Date(msg.createdAt);
+            if (filters.startDate) {
+                const startDate = new Date(filters.startDate);
+                startDate.setHours(0, 0, 0, 0);
+                if (messageDate < startDate) {
+                    return false;
+                }
+            }
+            if (filters.endDate) {
+                const endDate = new Date(filters.endDate);
+                endDate.setHours(23, 59, 59, 999);
+                if (messageDate > endDate) {
+                    return false;
+                }
+            }
+
+            return true;
+        });
+    };
+
+    const fetchData = async () => {
+        try {
+            const customResponse = await getchatterMessage(queryStringChatterMessage).unwrap();
+            const customMessages = customResponse.data.records.map((msg: any) => ({
+                id: msg.id,
+                user: msg.user?.fullName || "System",
+                auditType: "custom",
+                message: msg.messageBody,
+                time: new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+                createdAt: msg.createdAt,
+                date: formatDate(msg.createdAt),
+                media: msg._media
+            }));
+
+            const auditResponse = await getchatterMessageDetail(queryStringChatterMessageDetail).unwrap();
+            const auditMessages = auditResponse.data.records.map((msg: any) => ({
+                id: msg.id,
+                user: msg.chatterMessage.user?.fullName || "System",
+                auditType: "audit",
+                time: new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+                auditRecord: [{
+                    field: msg.fieldName,
+                    previous: msg.oldValueDisplay || msg.oldValue || 'None',
+                    current: msg.newValueDisplay || msg.newValue
+                }],
+                createdAt: msg.createdAt,
+                date: formatDate(msg.createdAt)
+            }));
+
+            const allMessages = [...customMessages, ...auditMessages].sort((a, b) => 
+                new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+            );
+
+            const groupedMessages = groupAuditMessages(allMessages);
+            const filteredMessages = filterMessages(groupedMessages);
+            setMessages(filteredMessages);
+        } catch (error) {
+            console.error('Error fetching messages:', error);
+        }
+    }
+
+    const handleFilterChange = (newFilters: FilterState) => {
+        console.log("New filters received:", newFilters);
+        setFilters(prev => {
+            console.log("Previous filters:", prev);
+            const updatedFilters = {
+                name: newFilters.name,
+                startDate: newFilters.startDate,
+                endDate: newFilters.endDate
+            };
+            console.log("Updated filters:", updatedFilters);
+            return updatedFilters;
+        });
+    };
+
+    return (
+        <div className='h-full'>
+            <SolidChatterHeader 
+                id={id} 
+                refetch={fetchData} 
+                solidFormViewMetaData={solidFormViewMetaData} 
+                activeTab={activeTab} 
+                handleTabClick={handleTabClick} 
+                visibleBox={visibleBox}
+                onFilterChange={handleFilterChange}
+            />
+            <div className='p-3' style={{
+                overflowY: 'scroll',
+                height:
+                    visibleBox === 'email-message'
+                        ? 'calc(100vh - 196px)'
+                        : visibleBox === 'log'
+                            ? 'calc(100vh - 172px)'
+                            : 'calc(100vh - 65px)',
+            }}>
+                {(isCustomLoading || isAuditLoading) ? (
+                    <div className='flex align-items-center justify-content-center h-full font-medium'>
+                        Loading...
+                    </div>
+                ) : messages.length === 0 ? (
+                    <div className='flex align-items-center justify-content-center h-full font-medium'>
+                        No Data Available
+                    </div>
+                ) : (
+                    messages.map((message, index) => {
+                        const showDateDivider = index === 0 || message.date !== messages[index - 1].date;
+                        return (
+                            <div key={message.id}>
+                                {showDateDivider && <SolidChatterDateDivider date={message.date} />}
+                                <SolidChatterMessageBox
+                                    user={message.user}
+                                    auditType={message.auditType}
+                                    message={message.message}
+                                    time={message.time}
+                                    auditRecord={message.auditRecord}
+                                    media={message.media}
+                                />
+                            </div>
+                        );
+                    })
+                )}
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,16 @@
+import React from 'react'
+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/src/components/core/chatter/SolidChatterHeader.tsx

@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react'
+import { SolidMessageComposer } from './SolidMessageComposer'
+import { Button } from 'primereact/button'
+import { Dialog } from 'primereact/dialog'
+import { Calendar } from 'primereact/calendar'
+import styles from './chatter.module.css'
+
+interface FilterState {
+    name: string;
+    startDate: Date | null;
+    endDate: Date | null;
+}
+
+interface Props {
+    activeTab: any,
+    handleTabClick: any,
+    visibleBox: any,
+    solidFormViewMetaData: any,
+    refetch: any,
+    id: any,
+    onFilterChange?: (filters: FilterState) => void;
+}
+
+export const SolidChatterHeader = (props: Props) => {
+    const { activeTab, visibleBox, handleTabClick, solidFormViewMetaData, refetch, id, onFilterChange } = props;
+    const [showFilterDialog, setShowFilterDialog] = useState(false);
+    const [filters, setFilters] = useState<FilterState>({
+        name: '',
+        startDate: null,
+        endDate: null
+    });
+    const [hasActiveFilters, setHasActiveFilters] = useState(false);
+
+    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);
+    };
+
+    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}
+                    />
+                </div>
+            </div>
+            {visibleBox &&
+                <div className='mt-4'>
+                    {visibleBox === "email-message" &&
+                        <SolidMessageComposer id={id} refetch={refetch} solidFormViewMetaData={solidFormViewMetaData} type={"email"} />
+                    }
+
+                    {visibleBox === "log" &&
+                        <SolidMessageComposer id={id} refetch={refetch} solidFormViewMetaData={solidFormViewMetaData} />
+                    }
+                </div>
+            }
+            <Dialog 
+                header="Filter Messages" 
+                visible={showFilterDialog} 
+                style={{ width: 500 }} 
+                onHide={() => setShowFilterDialog(false)}
+            >
+                <div className="p-fluid">
+                    <div className="flex flex-column gap-2">
+                        <label htmlFor="name">Name:</label>
+                        <input
+                            type="text"
+                            id="name"
+                            name="name"
+                            placeholder="Filter By User"
+                            className="p-inputtext p-inputtext-sm p-component"
+                            value={filters.name}
+                            onChange={(e) => setFilters(prev => ({ ...prev, name: e.target.value }))}
+                        />
+                    </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/src/components/core/chatter/SolidChatterMessageBox.tsx

@@ -0,0 +1,165 @@
+import React, { useMemo, useState } from 'react'
+import styles from './chatter.module.css'
+import { Avatar } from 'primereact/avatar'
+import { stringToColor, getTextColor } from '@/helpers/getRandomColors'
+import { RightArrowSvg } from '@/components/Svg/RightArrowSvg'
+import { Dialog } from 'primereact/dialog';
+import Image from 'next/image';
+
+interface Props {
+    user: string,
+    auditType?: string,
+    message?: any,
+    time?: string,
+    auditRecord?: any,
+    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, auditType, message, time, auditRecord, media } = 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);
+    };
+
+    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' }}>
+                            {auditType === "fieldChange" ? 'Fields changed' : 'Sent message'}
+                        </span>
+                    </div>
+                    <i className='pi pi-ellipsis-v text-xs' />
+                </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>
+                    <div className={styles.solidMessageWrapper}>
+                        {auditType === "audit" ? (
+                            <div className='flex flex-column gap-2'>
+                                {auditRecord.map((item: any, index: number) => (
+                                    <div key={index} className='flex gap-2'>
+                                        <span className='m-0 text-sm'>
+                                            {"(" + 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>
+                        ) : (
+                            <p className='m-0 text-sm'>
+                                {message}
+                            </p>
+                        )}
+                    </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>
+    )
+}