@solidxai/core-ui 0.1.1 → 0.1.3

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

@@ -1,248 +0,0 @@
-
-import React, { useState, useEffect } from 'react'
-import { SolidChatterHeader } from './SolidChatterHeader'
-import { SolidChatterDateDivider } from './SolidChatterDateDivider'
-import { SolidChatterMessageBox } from './SolidChatterMessageBox'
-import { useLazyGetchatterMessageQuery } from '../../../redux/api/solidChatterMessageApi'
-import qs from "qs";
-import { ERROR_MESSAGES } from '../../../constants/error-messages'
-import { permissionExpression } from '../../../helpers/permissions'
-
-interface FilterState {
-    name: string;
-    startDate: Date | null;
-    endDate: Date | null;
-}
-
-export const SolidChatter = ({ modelSingularName, id, refreshChatterMessage, setRefreshChatterMessage, actionsAllowed=[] }: { modelSingularName: any, id: any, refreshChatterMessage: boolean, setRefreshChatterMessage: (value: boolean) => void , actionsAllowed?:string[]}) => {    
-    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 [limit, setLimit] = useState<number>(25);
-    const [totalRecords, setTotalRecords] = useState<number>(0);
-    const [filters, setFilters] = useState<FilterState>({
-        name: '',
-        startDate: null,
-        endDate: null
-    });
-
-    const [getchatterMessage, { isLoading: isChatterLoading }] = useLazyGetchatterMessageQuery();
-
-    useEffect(() => {
-        if (refreshChatterMessage) {
-            if (id !== 'new') {
-                fetchData();
-                setRefreshChatterMessage(false);
-            }
-        }
-    }, [refreshChatterMessage]);
-
-    useEffect(() => {
-        if (id !== 'new') {
-            fetchData();
-        }
-    }, [filters, limit]);
-
-    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 fetchData = async () => {
-        try {
-            const queryData: any = {
-                populate: ['user', 'chatterMessageDetails'],
-                limit: limit
-            };
-
-            if (filters.name) {
-                queryData.filters = queryData.filters || {};
-                queryData.filters['user'] = { fullName: { $containsi: filters.name }};
-            }
-            if (filters.startDate && filters.endDate) {
-                queryData.filters = queryData.filters || {};
-                queryData.filters.createdAt = {
-                    $between: [filters.startDate.toISOString(), filters.endDate.toISOString()]
-                };
-            } else if (filters.startDate) {
-                queryData.filters = queryData.filters || {};
-                queryData.filters.createdAt = { $gte: filters.startDate.toISOString() };
-            } else if (filters.endDate) {
-                queryData.filters = queryData.filters || {};
-                queryData.filters.createdAt = { $lte: filters.endDate.toISOString() };
-            }
-
-            const queryString = qs.stringify(queryData, {
-                encodeValuesOnly: true,
-            });
-            const response = await getchatterMessage({
-                entityId: id,
-                entityName: modelSingularName,
-                qs: queryString
-            }).unwrap();
-            const processedMessages = response.data.records.map((msg: any) => {
-                if (msg.messageType === 'custom') {
-                    // Custom message
-                    return {
-                        id: msg.id,
-                        user: msg.user?.fullName || "System",
-                        messageType: "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,
-                        messageSubType: msg.messageSubType,
-                        modelDisplayName: msg.modelDisplayName,
-                        modelUserKey: msg.modelUserKey
-                    };
-                } else {
-                    // Audit message
-                    const auditRecord = msg.chatterMessageDetails?.map((detail: any) => ({
-                        field: detail.fieldName,
-                        fieldDisplayName: detail.fieldDisplayName,
-                        previous: detail.oldValueDisplay || detail.oldValue || 'None',
-                        current: detail.newValueDisplay || detail.newValue
-                    })) || [];
-
-                    return {
-                        id: msg.id,
-                        user: msg.user?.fullName || "System",
-                        messageType: "audit",
-                        time: new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-                        auditRecord: auditRecord,
-                        createdAt: msg.createdAt,
-                        date: formatDate(msg.createdAt),
-                        messageSubType: msg.messageSubType,
-                        modelDisplayName: msg.modelDisplayName,
-                        modelUserKey: msg.modelUserKey,
-                        message: msg.messageBody,
-                    };
-                }
-            });
-            setMessages(processedMessages);
-            setTotalRecords(response?.data?.meta?.totalRecords || 0);
-        } catch (error) {
-            console.error(ERROR_MESSAGES.FETCHING_MESSAGE, error);
-        }
-    }
-
-    const handleFilterChange = (newFilters: FilterState) => {
-        setFilters({
-            name: newFilters.name,
-            startDate: newFilters.startDate,
-            endDate: newFilters.endDate
-        });
-        setLimit(25);
-    };
-
-    const handleLoadMore = () => {
-        setLimit(prevLimit => prevLimit + 25);
-    };
-
-    return (
-        <div className='h-full'>
-            <SolidChatterHeader
-                id={id}
-                refetch={fetchData}
-                modelSingularName={modelSingularName}
-                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)',
-            }}>
-                {isChatterLoading ? (
-                    <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>
-                ) : (
-                    <>
-                        {actionsAllowed.includes(`${permissionExpression('chatterMessage', 'findMany')}`) ?
-                            (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}
-                                            messageType={message.messageType}
-                                            message={message.message}
-                                            time={message.time}
-                                            auditRecord={message.auditRecord}
-                                            media={message.media}
-                                            messageSubType={message.messageSubType}
-                                            modelDisplayName={message.modelDisplayName}
-                                            modelUserKey={message.modelUserKey}
-                                        />
-                                    </div>
-                                );
-                            }))
-                            : <div className="p-3">
-                                <div className='p-3 border-round text-red-500 bg-red-50 flex align-items-center gap-3'>
-                                    <i className="pi pi-exclamation-triangle" />
-                                    You do not have permission to view these messages.
-                                </div>
-                            </div>
-                        }
-                        {totalRecords > messages.length && (
-                            <div className='flex justify-content-center mt-3 mb-3'>
-                                <span
-                                    onClick={handleLoadMore}
-                                    className='cursor-pointer text-primary font-medium px-4 py-2'
-                                    style={{
-                                        userSelect: 'none',
-                                        borderRadius: '6px',
-                                        transition: 'all 0.2s ease',
-                                        display: 'inline-block'
-                                    }}
-                                    onMouseEnter={(e) => {
-                                        e.currentTarget.style.backgroundColor = 'rgba(59, 130, 246, 0.1)';
-                                        e.currentTarget.style.transform = 'translateY(-1px)';
-                                    }}
-                                    onMouseLeave={(e) => {
-                                        e.currentTarget.style.backgroundColor = 'transparent';
-                                        e.currentTarget.style.transform = 'translateY(0)';
-                                    }}
-                                >
-                                    Load More...
-                                </span>
-                            </div>
-                        )}
-                    </>
-                )}
-            </div>
-        </div>
-    )
-}

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

@@ -1,35 +0,0 @@
-
-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/src/components/core/chatter/SolidChatterCustomMessage.tsx

@@ -1,46 +0,0 @@
-
-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/src/components/core/chatter/SolidChatterDateDivider.tsx

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

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