@visns-studio/visns-components 5.0.1-8.1 → 5.0.2

package/src/components/crm/generic/GenericEditableTable.jsx

@@ -1,407 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import debounce from 'lodash.debounce';
-import { toast } from 'react-toastify';
-import Popup from 'reactjs-popup';
-import { confirmAlert } from 'react-confirm-alert';
-import { TrashCan, ArrowUp, ArrowDown } from 'akar-icons';
-
-import CustomFetch from '../Fetch';
-import Form from '../Form';
-import MultiSelect from '../MultiSelect';
-
-import 'react-confirm-alert/src/react-confirm-alert.css';
-import styles from './styles/GenericEditableTable.module.scss';
-
-const GenericEditableTable = ({
-    schedulingConfig,
-    data,
-    dataId,
-    modalOpen,
-    preloadedOptions,
-}) => {
-    const { columns, rows, form } = schedulingConfig;
-
-    const [localData, setLocalData] = useState([]);
-    const [groupedCategories, setGroupedCategories] = useState([]);
-
-    useEffect(() => {
-        const enrichedData = data[rows.key]?.map((entry, index) => ({
-            ...entry,
-            sort_order: entry.sort_order ?? index + 1,
-        }));
-        setLocalData(enrichedData || []);
-    }, [data, rows.key]);
-
-    const debouncedUpdate = useMemo(
-        () =>
-            debounce(async (updatedData) => {
-                try {
-                    const res = await CustomFetch(
-                        `${form.url}/${dataId}`,
-                        'PUT',
-                        updatedData
-                    );
-                    if (!res.error) {
-                        toast.success('Template updated successfully');
-                    } else {
-                        toast.error(res.error);
-                    }
-                } catch (error) {
-                    console.error('Error updating field:', error);
-                }
-            }, 1000),
-        []
-    );
-
-    const groupCategoriesByType = (data) => {
-        const grouped = {};
-
-        data.forEach((category, categoryKey) => {
-            const categoryType =
-                category[rows.categoryKey.id]?.[rows.categoryKey.label] || null;
-
-            const categoryId = category[rows.categoryKey.id]?.id || null;
-
-            const groupKey = categoryId || 'no_category';
-
-            if (!grouped[groupKey]) {
-                grouped[groupKey] = {
-                    id: categoryId || 'no_category',
-                    category: categoryType || '',
-                    entries: [],
-                };
-            }
-            grouped[groupKey].entries.push({
-                ...category,
-                keyCounter: categoryKey,
-            });
-        });
-
-        Object.values(grouped).forEach((group) => {
-            group.entries.sort((a, b) => a.sort_order - b.sort_order);
-        });
-
-        // Ensure 'no_category' group is at the top
-        const groupedArray = Object.values(grouped);
-        return groupedArray.sort((a, b) =>
-            a.id === 'no_category' ? -1 : b.id === 'no_category' ? 1 : 0
-        );
-    };
-
-    const handleFieldChange = (value, fieldId, keyCounter) => {
-        setLocalData((prev) => {
-            const updatedDetail = [...prev];
-            updatedDetail[keyCounter] = {
-                ...updatedDetail[keyCounter],
-                [fieldId]: value,
-            };
-
-            debouncedUpdate({ [rows.key]: updatedDetail });
-
-            return updatedDetail;
-        });
-    };
-
-    const handleSortChange = (groupId, entryId, direction) => {
-        setLocalData((prev) => {
-            const updatedDetail = [...prev];
-            const group = groupCategoriesByType(updatedDetail).find(
-                (group) => group.id === groupId
-            );
-
-            if (group) {
-                const index = group.entries.findIndex(
-                    (entry) => entry.id === entryId
-                );
-
-                if (
-                    (direction === 'up' && index > 0) ||
-                    (direction === 'down' && index < group.entries.length - 1)
-                ) {
-                    const swapIndex =
-                        direction === 'up' ? index - 1 : index + 1;
-                    [
-                        group.entries[index].sort_order,
-                        group.entries[swapIndex].sort_order,
-                    ] = [
-                        group.entries[swapIndex].sort_order,
-                        group.entries[index].sort_order,
-                    ];
-
-                    const reordered = updatedDetail.map((item) => {
-                        const entry = group.entries.find(
-                            (e) => e.id === item.id
-                        );
-                        return entry
-                            ? { ...item, sort_order: entry.sort_order }
-                            : item;
-                    });
-
-                    debouncedUpdate({ [rows.key]: reordered });
-                    return reordered;
-                }
-            }
-
-            return updatedDetail;
-        });
-    };
-
-    const handleDeleteRow = (entry) => {
-        confirmAlert({
-            title: 'Confirm to Delete',
-            message: 'Are you sure you want to delete this entry?',
-            buttons: [
-                {
-                    label: 'Yes',
-                    onClick: async () => {
-                        setLocalData((prev) => {
-                            const updatedDetail = prev.filter(
-                                (item) => item.id !== entry.id
-                            );
-                            debouncedUpdate({ [rows.key]: updatedDetail });
-                            return updatedDetail;
-                        });
-                    },
-                },
-                {
-                    label: 'No',
-                },
-            ],
-        });
-    };
-
-    const renderScheduledTableField = (entry, column, keyCounter) => {
-        if (!entry || !column) return null;
-
-        switch (column.type) {
-            case 'currency':
-            case 'number':
-                return (
-                    <input
-                        type="text"
-                        value={entry[column.id] || ''}
-                        onChange={(e) =>
-                            handleFieldChange(
-                                e.target.value,
-                                column.id,
-                                keyCounter
-                            )
-                        }
-                        style={{ textAlign: 'right' }}
-                    />
-                );
-            case 'date':
-                return (
-                    <input
-                        type="date"
-                        value={entry[column.id] || ''}
-                        onChange={(e) =>
-                            handleFieldChange(
-                                e.target.value,
-                                column.id,
-                                keyCounter
-                            )
-                        }
-                        style={{ textAlign: 'right' }}
-                    />
-                );
-            case 'dropdown':
-                return (
-                    <select
-                        value={entry[column.id] || ''}
-                        onChange={(e) =>
-                            handleFieldChange(
-                                e.target.value,
-                                column.id,
-                                keyCounter
-                            )
-                        }
-                    >
-                        {column.options.map((option) => (
-                            <option key={option.id} value={option.id}>
-                                {option.label}
-                            </option>
-                        ))}
-                    </select>
-                );
-            case 'dropdown-ajax':
-                const options = preloadedOptions[column.id] || [];
-                return (
-                    <select
-                        value={entry[column.id] || ''}
-                        onChange={(e) =>
-                            handleFieldChange(
-                                e.target.value,
-                                column.id,
-                                keyCounter
-                            )
-                        }
-                    >
-                        <option>Select an Option</option>
-                        {options.map((option) => (
-                            <option key={option.id} value={option.id}>
-                                {option.label}
-                            </option>
-                        ))}
-                    </select>
-                );
-            case 'multi-dropdown-ajax':
-                const multiOptions = preloadedOptions[column.id] || [];
-                return (
-                    <MultiSelect
-                        settings={{
-                            id: column.id,
-                        }}
-                        className={styles.selectFullWidth}
-                        multi={false}
-                        onChange={(value) =>
-                            handleFieldChange(value, column.id, keyCounter)
-                        }
-                        inputValue={entry[column.id] || ''}
-                        options={multiOptions}
-                    />
-                );
-            default:
-                return (
-                    <input
-                        type="text"
-                        defaultValue={entry[column.id] || ''}
-                        onChange={(e) =>
-                            handleFieldChange(
-                                e.target.value,
-                                column.id,
-                                keyCounter
-                            )
-                        }
-                    />
-                );
-        }
-    };
-
-    useEffect(() => {
-        setGroupedCategories(groupCategoriesByType(localData));
-    }, [localData]);
-
-    return (
-        <div className={styles.gridtxt}>
-            <div className={styles.gridtxt__header}>
-                <span>{schedulingConfig.title || 'Estimation Schedule'}</span>
-            </div>
-            {groupedCategories.length > 0 ? (
-                <table className={styles.schedulingTable}>
-                    <thead>
-                        <tr>
-                            {columns.map((column) => (
-                                <th
-                                    key={column.id}
-                                    style={{ width: column.width || 'auto' }}
-                                >
-                                    {column.label}
-                                </th>
-                            ))}
-                            <th style={{ width: '5%' }}></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {groupedCategories.map((group) => (
-                            <React.Fragment key={group.id}>
-                                <tr className={styles.categoryRow}>
-                                    <td colSpan={columns.length + 1}>
-                                        {group.category}
-                                    </td>
-                                </tr>
-                                {group.entries.map((entry, idx) => (
-                                    <tr key={entry.id}>
-                                        {columns.map((column) => (
-                                            <td
-                                                key={column.id}
-                                                style={{
-                                                    width:
-                                                        column.width || 'auto',
-                                                    textAlign:
-                                                        column.type ===
-                                                        'currency'
-                                                            ? 'right'
-                                                            : 'left',
-                                                }}
-                                            >
-                                                {renderScheduledTableField(
-                                                    entry,
-                                                    column,
-                                                    entry.keyCounter
-                                                )}
-                                            </td>
-                                        ))}
-                                        <td>
-                                            <div className={styles.tdactions}>
-                                                {idx > 0 && (
-                                                    <ArrowUp
-                                                        size={18}
-                                                        onClick={() =>
-                                                            handleSortChange(
-                                                                group.id,
-                                                                entry.id,
-                                                                'up'
-                                                            )
-                                                        }
-                                                        style={{
-                                                            cursor: 'pointer',
-                                                        }}
-                                                    />
-                                                )}
-                                                {idx <
-                                                    group.entries.length -
-                                                        1 && (
-                                                    <ArrowDown
-                                                        size={18}
-                                                        onClick={() =>
-                                                            handleSortChange(
-                                                                group.id,
-                                                                entry.id,
-                                                                'down'
-                                                            )
-                                                        }
-                                                        style={{
-                                                            cursor: 'pointer',
-                                                        }}
-                                                    />
-                                                )}
-                                                <TrashCan
-                                                    size={18}
-                                                    onClick={() =>
-                                                        handleDeleteRow(entry)
-                                                    }
-                                                    style={{
-                                                        cursor: 'pointer',
-                                                    }}
-                                                />
-                                            </div>
-                                        </td>
-                                    </tr>
-                                ))}
-                            </React.Fragment>
-                        ))}
-                    </tbody>
-                </table>
-            ) : (
-                <div className={styles.noDataMessage}>
-                    No data available. Please check your filters or try
-                    reloading the data.
-                </div>
-            )}
-
-            <div className={styles.polActions}>
-                <button
-                    className={styles.btn}
-                    onClick={() => {
-                        modalOpen('create', 0);
-                    }}
-                >
-                    Add
-                </button>
-            </div>
-        </div>
-    );
-};
-
-export default GenericEditableTable;

package/src/components/crm/generic/styles/GenericEditableTable.module.scss

@@ -1,178 +0,0 @@
-.schedulingTable {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1em 0;
-
-    th,
-    td {
-        padding: 0.75rem;
-        text-align: left;
-        border: 1px solid rgba(var(--primary-rgb), 0.1);
-    }
-
-    th {
-        background-color: var(--secondary-color);
-        color: var(--item-color);
-        font-weight: bold;
-    }
-
-    td {
-        background-color: rgba(var(--primary-rgb), 0.05);
-    }
-}
-
-.categoryRow {
-    background-color: rgba(var(--primary-rgb), 0.1);
-    text-align: left;
-    font-weight: bold;
-    font-size: 1.2rem;
-    color: var(--primary-color);
-}
-
-.totalRow {
-    background-color: rgba(var(--primary-rgb), 0.05);
-    font-weight: bold;
-    text-align: right;
-}
-
-.noDataMessage {
-    text-align: center;
-    color: var(--secondary-color);
-    font-size: 1.125em;
-    padding: 1.5em;
-    margin: 2em auto;
-    background: #f9f9f9;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    max-width: 600px;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-    font-style: italic;
-}
-
-.polActions {
-    position: fixed;
-    bottom: 15px;
-    right: 20px;
-    width: auto;
-
-    button {
-        display: block;
-        padding: 0.35em 1em;
-        margin: 0 0.15em;
-    }
-}
-
-.gridtxt {
-    &__header {
-        width: 100%;
-        display: block;
-        background: rgba(var(--primary-rgb), 0.05);
-        box-sizing: border-box;
-        padding: 10px 20px;
-        border-radius: var(--br);
-        margin-bottom: 0;
-        font-weight: 700;
-        text-align: center;
-        color: var(--paragraph-color);
-
-        span {
-            font-weight: 700;
-        }
-    }
-
-    > ul {
-        width: 100%;
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        list-style: none;
-        padding: 0.85rem;
-        margin: 0;
-
-        li {
-            flex: 0 0 calc(50% - 10px);
-            padding: 0.65rem;
-            border: 1px solid rgba(var(--primary-rgb), 0.095);
-            color: var(--paragraph-color);
-            background: rgba(var(--primary-rgb), 0.015);
-            margin: 3px;
-            border-radius: var(--br);
-            line-height: 1.45;
-            font-size: 0.85rem;
-
-            &.fw-grid-item {
-                flex: 0 0 calc(100% - 10px);
-            }
-
-            &.notecolor {
-                border: 1px solid var(--secondary-color);
-            }
-        }
-    }
-}
-
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
-}
-
-.btn:hover {
-    color: var(--primary-color);
-    background: var(--highlight-color);
-    border: 1px solid rgba(var(--highlight-rgb), 1.05);
-}
-
-.tdactions {
-    width: 100%;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 0.1rem;
-
-    span {
-        display: flex;
-        align-items: center;
-        position: relative;
-        width: 18px;
-        height: 18px;
-
-        svg {
-            width: 18px;
-            height: 18px;
-        }
-    }
-}
-
-.noDataMessage {
-    text-align: center;
-    color: var(--primary-color);
-    font-size: 1rem;
-    padding: 2rem;
-    margin: 2rem auto;
-    background-color: var(--secondary-bg-color, #f8f8f8);
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
-    border-radius: 6px;
-    max-width: 80%;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-    font-weight: 500;
-    font-family: var(--font-family, Arial, sans-serif);
-}
-
-.noDataMessage:hover {
-    background-color: rgba(var(--primary-rgb), 0.05);
-    border-color: rgba(var(--primary-rgb), 0.2);
-}