@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/crm/generic/GenericIndex.jsx

@@ -1,376 +0,0 @@
-import '../../styles/global.css';
-
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Outlet } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { saveAs } from 'file-saver';
-import _ from 'lodash';
-
-import CustomFetch from '../Fetch';
-import Download from '../Download';
-import Field from '../Field';
-import Table from '../DataGrid';
-import TableFilter from '../TableFilter';
-
-import styles from './styles/GenericIndex.module.css';
-
-function useWindowHeight() {
-    const [windowHeight, setWindowHeight] = useState(window.innerHeight);
-
-    useEffect(() => {
-        const handleResize = () => setWindowHeight(window.innerHeight);
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-
-    return windowHeight;
-}
-
-function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
-    const [config, setConfig] = useState({});
-    const [subnav, setSubnav] = useState(filters || []);
-
-    useEffect(() => {
-        setConfig({
-            ajaxSetting: setting.ajaxSetting,
-            form: setting.form,
-            columns: setting.columns,
-            setRowsSelected,
-            settings: setting.settings,
-            tableSetting,
-            type: setting.type ? setting.type : 'table',
-        });
-        setSubnav(filters);
-    }, [setting, filters, setRowsSelected, tableSetting]);
-
-    useEffect(() => {
-        if (tabs?.length > 0 && subnav) {
-            const activeTab = subnav.find((s) => s.show);
-            const activeTabConfig = tabs.find((t) => t.id === activeTab?.id);
-
-            if (activeTabConfig) {
-                setConfig((currentConfig) => ({
-                    ...currentConfig,
-                    id: activeTabConfig.id,
-                    ajaxSetting: activeTabConfig.ajaxSetting,
-                    form: activeTabConfig.form,
-                    columns: activeTabConfig.columns,
-                    settings: activeTabConfig.settings,
-                    type: activeTabConfig.type ? activeTabConfig.type : 'table',
-                }));
-            }
-        }
-    }, [subnav, tabs]);
-
-    return { config, setConfig, subnav, setSubnav };
-}
-
-const ReportForm = ({ config, userProfile }) => {
-    const [formData, setFormData] = useState({});
-
-    const handleChange = (e) => {
-        const {
-            value,
-            dataset: { name },
-        } = e.target;
-
-        setFormData((prevData) => ({ ...prevData, [name]: value }));
-    };
-
-    const handleChangeDate = (date, id) => {
-        setFormData((prevData) => ({ ...prevData, [id]: date }));
-    };
-
-    const handleChangeSelect = (inputValue, action, id) => {
-        setFormData((prevData) => ({ ...prevData, [id]: inputValue }));
-    };
-
-    const handleExport = async (e) => {
-        try {
-            if (e) {
-                e.preventDefault();
-            }
-
-            const missingFields = config.form.filters
-                .filter(
-                    (item) => item.required === true && formData[item.id] === ''
-                )
-                .map((item) => item.label);
-
-            if (missingFields.length > 0) {
-                const fieldNames = missingFields.join(', ');
-                const errorMessage = `Please fill in a value for the following field(s): ${fieldNames}.`;
-                toast.error(errorMessage);
-            } else {
-                const res = await Download(
-                    config.form.url,
-                    config.form.method,
-                    formData
-                );
-
-                if (res.data.error) {
-                    toast.error(res.data.error);
-                } else {
-                    // Assuming the response contains a Blob or similar data
-                    if (res.data && res.data instanceof Blob) {
-                        const fileName = `${config.form.filename}`;
-                        saveAs(res.data, fileName);
-                    } else {
-                        // Handle the case where the response is not a Blob
-                        toast.error('Invalid file format received.');
-                    }
-                }
-            }
-        } catch (err) {
-            console.error(err);
-        }
-    };
-
-    useEffect(() => {
-        const tmpForm = config.form?.filters.reduce((acc, item) => {
-            acc[item.id] = '';
-            return acc;
-        }, {});
-        setFormData(tmpForm);
-    }, [config.form?.filters]);
-
-    return (
-        <div className="formcontainer">
-            <form className="modalForm">
-                {config.form?.filters.map((item, key) => (
-                    <Field
-                        api={userProfile.settings.api}
-                        autocompleteCallback={() => {}}
-                        childDropdownCallback={() => {}}
-                        fetchData={() => {}}
-                        formData={formData}
-                        inputClass={''}
-                        inputValue={formData[item.id]}
-                        key={`filter-fields-${key}`}
-                        mapbox={{}}
-                        onChange={handleChange}
-                        onChangeCheckbox={() => {}}
-                        onChangeDate={handleChangeDate}
-                        onChangeNumberFormat={() => {}}
-                        onChangeRicheditor={() => {}}
-                        onChangeSelect={handleChangeSelect}
-                        onChangeToggle={() => {}}
-                        settings={item}
-                        setFormData={setFormData}
-                        style={userProfile.settings.style}
-                        uploadProgress={0}
-                        userProfile={userProfile}
-                    />
-                ))}
-                <div className="formItem fwItem lastItem">
-                    <button className="btn modalsave" onClick={handleExport}>
-                        Export
-                    </button>
-                </div>
-            </form>
-        </div>
-    );
-};
-
-function GenericIndex({ layout = 'full', setting, userProfile }) {
-    const gridRef = useRef(null);
-    const [rowsSelected, setRowsSelected] = useState({});
-    const [total, setTotal] = useState(0);
-    const windowHeight = useWindowHeight();
-    const { config, setConfig, subnav, setSubnav } = useConfig(
-        setting,
-        setting.tabs,
-        setting.filters,
-        setRowsSelected,
-        setting.tableSetting
-    );
-
-    const handleCheckboxUpdate = useCallback(async () => {
-        try {
-            const { data, method, message, url } = setting?.functions
-                ?.checkboxUpdate
-                ? setting.functions.checkboxUpdate
-                : config.form.functions.checkboxUpdate;
-            if (!Object.keys(rowsSelected).length) {
-                toast.warning(message.warning);
-                return;
-            }
-            const res = await CustomFetch(url, method, {
-                ...data,
-                rows: rowsSelected,
-            });
-            if (res.data.error === '') {
-                toast.success(message.success);
-                gridRef.current.reload();
-            } else {
-                toast.error(message.error);
-            }
-        } catch (error) {
-            console.error(error);
-        }
-    }, [rowsSelected, setting?.functions?.checkboxUpdate]);
-
-    const renderTable = useCallback(() => {
-        const isConfigValid = (config) => {
-            return (
-                config.ajaxSetting &&
-                config.form &&
-                config.columns &&
-                config.settings
-            );
-        };
-
-        const renderTableComponent = () => (
-            <Table
-                {...config}
-                ref={gridRef}
-                gridHeight={windowHeight * 0.65}
-                setConfig={setConfig}
-                setTotal={setTotal}
-                style={userProfile?.settings?.style || {}}
-                userProfile={userProfile}
-            />
-        );
-
-        if (subnav) {
-            // Find the active subnav item with show: true
-            const activeSubnav = subnav.find((item) => item.show === true);
-
-            // Check if the config.id matches the active subnav id
-            if (
-                activeSubnav &&
-                activeSubnav.id === config.id &&
-                isConfigValid(config)
-            ) {
-                return renderTableComponent();
-            }
-
-            // Check for active alternative subnav
-            const activeAltSubNav = subnav.find(
-                (item) =>
-                    item.class === 'subactive' || item.class === 'activetab'
-            );
-
-            const activeTabExist =
-                config.ajaxSetting?.where?.some(
-                    (w) =>
-                        w.id === activeAltSubNav?.id &&
-                        parseInt(w.value) === parseInt(activeAltSubNav?.value)
-                ) || false;
-
-            if (isConfigValid(config) && activeTabExist) {
-                return renderTableComponent();
-            }
-        } else if (isConfigValid(config)) {
-            return renderTableComponent();
-        }
-
-        return null;
-    }, [config, subnav, windowHeight, userProfile, setConfig, setTotal]);
-
-    const renderContentBasedOnType = useCallback(() => {
-        switch (config.type) {
-            case 'table':
-                return renderTable();
-            case 'report':
-                return <ReportForm config={config} userProfile={userProfile} />;
-            default:
-                return renderTable(); // Fallback to table if no type is specified or recognized
-        }
-    }, [config, renderTable]);
-
-    const renderContent = useCallback(() => {
-        if (subnav?.length > 0) {
-            return (
-                <div className={styles.grid__subrow}>
-                    {layout === 'simple' ? (
-                        <div className={styles.grid__full}>
-                            <div className={styles.tabcontent}>
-                                <div className={styles.tabcontent__menu}>
-                                    <TableFilter
-                                        filters={subnav}
-                                        setFilters={setSubnav}
-                                        setSettings={setConfig}
-                                        type={layout}
-                                    />
-                                </div>
-                                <div className={styles.tabcontent__main}>
-                                    {renderContentBasedOnType()}
-                                </div>
-                            </div>
-                        </div>
-                    ) : (
-                        <>
-                            <div className={styles.grid__subnav}>
-                                <TableFilter
-                                    filters={subnav}
-                                    setFilters={setSubnav}
-                                    setSettings={setConfig}
-                                    type={layout}
-                                />
-                            </div>
-                            <div className={styles.grid__subcontent}>
-                                {renderContentBasedOnType()}
-                            </div>
-                        </>
-                    )}
-                </div>
-            );
-        } else {
-            return (
-                <div className={styles.grid__full}>
-                    {renderContentBasedOnType()}
-                </div>
-            );
-        }
-    }, [layout, subnav, setSubnav, setConfig, renderTable]);
-
-    return (
-        <>
-            <div className={styles.grid}>
-                <div className={styles.grid__row}>
-                    <div
-                        className={`${styles.grid__full} ${
-                            layout === 'full'
-                                ? styles.crmtitle
-                                : styles.crmtitleSimple
-                        }`}
-                    >
-                        <h1>{setting.page?.title}</h1>
-                        <div className={styles.titleInfo}>
-                            <span>
-                                [<strong>{total}</strong> Total{' '}
-                                {setting.page?.title}]
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div className={styles.grid}>{renderContent()}</div>
-            <Outlet />
-            {setting.functions?.checkboxUpdate && (
-                <div className={styles.polActions}>
-                    <button
-                        className={styles.btn}
-                        onClick={handleCheckboxUpdate}
-                    >
-                        {setting.functions.checkboxUpdate.label || 'Update'}
-                    </button>
-                </div>
-            )}
-            {config?.form?.functions?.checkboxUpdate && (
-                <div className={styles.polActions}>
-                    <button
-                        className={styles.btn}
-                        onClick={handleCheckboxUpdate}
-                    >
-                        {config.form.functions.checkboxUpdate.label || 'Update'}
-                    </button>
-                </div>
-            )}
-        </>
-    );
-}
-
-export default GenericIndex;

package/components/crm/generic/GenericMain.jsx

@@ -1,129 +0,0 @@
-import '../../styles/global.css';
-
-import React, { useState } from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
-
-import Call from '../Call';
-import Loader from '../Loader';
-import Navigation from '../Navigation';
-
-import styles from './styles/GenericMain.module.css';
-
-const GenericMain = ({
-    layout = 'full',
-    logo,
-    navigation,
-    routeConfig,
-    setSystemAuth,
-    setUserProfile,
-    themeType,
-    userProfile,
-}) => {
-    const [incomingCallData, setIncomingCallData] = useState({});
-
-    // Function to extract route parameters
-    const extractRouteParams = (path) => {
-        const params = path.match(/:\w+/g) || [];
-        return params.map((param) => param.substring(1));
-    };
-
-    // Recursive function to render routes
-    const renderRoutes = (routes) => {
-        return routes.map((route, index) => {
-            let elementProps = {
-                userProfile: userProfile,
-                setUserProfile: setUserProfile,
-            };
-
-            const routeParams = extractRouteParams(route.path);
-            const extraParams = routeParams.filter(
-                (param) => param !== 'dataId'
-            );
-
-            if (routeParams.includes('dataId')) {
-                elementProps.urlParam = 'dataId';
-            }
-
-            if (extraParams.length > 0) {
-                elementProps.extraUrlParam = extraParams;
-            }
-
-            let element = route.element
-                ? React.cloneElement(route.element, elementProps)
-                : null;
-
-            if (route.children && route.children.length > 0) {
-                // If the route has children, render them recursively
-                return (
-                    <Route key={index} path={route.path}>
-                        {renderRoutes(route.children)}
-                    </Route>
-                );
-            } else {
-                return (
-                    <Route key={index} path={route.path} element={element} />
-                );
-            }
-        });
-    };
-
-    return layout === 'full' ? (
-        <div>
-            <header
-                className={
-                    themeType === 'alternate'
-                        ? styles.headerAlternate
-                        : styles.header
-                }
-            >
-                <Navigation
-                    layout={layout}
-                    logo={logo}
-                    navConfig={navigation}
-                    setSystemAuth={setSystemAuth}
-                    themeType={themeType}
-                    userProfile={userProfile}
-                />
-            </header>
-            <main className={styles.content}>
-                <div className={styles['content-main']} id="app">
-                    <div className={styles.padding}>
-                        <Routes>
-                            {renderRoutes(routeConfig)}
-                            {/* Add a wildcard route for handling unknown paths */}
-                            <Route
-                                path="*"
-                                element={<Navigate to="/" replace />}
-                            />
-                        </Routes>
-                    </div>
-                    <Call incomingCallData={incomingCallData} />
-                    <Loader />
-                </div>
-            </main>
-        </div>
-    ) : (
-        <Navigation
-            layout={layout}
-            logo={logo}
-            navConfig={navigation}
-            setSystemAuth={setSystemAuth}
-            themeType={themeType}
-            userProfile={userProfile}
-        >
-            <div className={styles['content-main']} id="app">
-                <div className={styles.paddingSimple}>
-                    <Routes>
-                        {renderRoutes(routeConfig)}
-                        {/* Add a wildcard route for handling unknown paths */}
-                        <Route path="*" element={<Navigate to="/" replace />} />
-                    </Routes>
-                </div>
-                <Call incomingCallData={incomingCallData} />
-                <Loader />
-            </div>
-        </Navigation>
-    );
-};
-
-export default GenericMain;

package/components/crm/generic/GenericSort.jsx

@@ -1,188 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
-import { arrayMoveImmutable } from 'array-move';
-import { toast } from 'react-toastify';
-import CustomFetch from '../../crm/Fetch';
-import SortableList from '../sorting/List';
-import Breadcrumb from '../Breadcrumb';
-import styles from './styles/GenericSort.module.css';
-
-// Utility function to convert camelCase to space-separated words with uppercase first letters
-function camelCaseToUcFirst(str) {
-    return str
-        .replace(/([A-Z])/g, ' $1') // Add a space before each uppercase letter
-        .replace(/^./, function (str) {
-            return str.toUpperCase();
-        }) // Capitalize the first letter
-        .trim(); // Remove leading and trailing whitespace
-}
-
-const ChildSort = ({ item, url }) => {
-    const [data, setData] = useState(item.child);
-
-    const onSortEnd = ({ oldIndex, newIndex }) => {
-        setData((prevItem) => arrayMoveImmutable(prevItem, oldIndex, newIndex));
-    };
-
-    useEffect(() => {
-        if (data.length > 0) {
-            CustomFetch(
-                `${url}/sort_update`,
-                'POST',
-                {
-                    list: data,
-                },
-                function (result) {
-                    if (result.error === '') {
-                        toast.success('Sort updated successfully');
-                    } else {
-                        toast.error(String(result.error));
-                    }
-                }
-            );
-        }
-    }, [data]);
-
-    return (
-        <>
-            <h1>{item.label}</h1>
-            <SortableList
-                items={data}
-                onSortEnd={onSortEnd}
-                axis="xy"
-                helperClass="dragitem"
-                transitionDuration={250}
-                useDragHandle
-            />
-        </>
-    );
-};
-
-const GenericSort = ({ category = false, layout = 'full' }) => {
-    const location = useLocation();
-    const routeParams = useParams();
-    const {
-        form,
-        page = {}, // Provide a default empty object for page
-        paramValue,
-    } = location.state || {}; // Safely access location.state
-
-    const [sortData, setSortData] = useState([]);
-    const url = form?.url;
-    const data = page?.data || {}; // Safely access data from page, default to an empty object
-
-    const onSortEnd = ({ oldIndex, newIndex }) => {
-        setSortData((prevItem) =>
-            arrayMoveImmutable(prevItem, oldIndex, newIndex)
-        );
-    };
-
-    const sortList = async () => {
-        try {
-            let fetchUrl = url;
-            let payload = {};
-
-            if (form?.json) {
-                fetchUrl = fetchUrl + '/jsonSortList';
-                payload.id = paramValue;
-            } else {
-                fetchUrl = fetchUrl + '/sort_list';
-            }
-
-            const res = await CustomFetch(fetchUrl, 'POST', payload);
-            setSortData(res.data);
-        } catch (err) {
-            console.log(err);
-        }
-    };
-
-    const sortUpdate = async () => {
-        try {
-            let fetchUrl = url;
-            let payload = {
-                list: sortData,
-            };
-
-            if (form?.json) {
-                fetchUrl = fetchUrl + '/jsonSortUpdate';
-                payload.id = paramValue;
-            } else {
-                fetchUrl = fetchUrl + '/sort_update';
-            }
-
-            if (category === false) {
-                if (sortData.length > 0) {
-                    const res = await CustomFetch(fetchUrl, 'POST', payload);
-
-                    if (res.data.error !== '') {
-                        toast.error(String(res.data.error));
-                    }
-                }
-            }
-        } catch (err) {
-            console.log(err);
-        }
-    };
-
-    useEffect(() => {
-        sortUpdate();
-    }, [sortData]);
-
-    useEffect(() => {
-        sortList();
-    }, []);
-
-    return (
-        <>
-            <div className={styles.grid}>
-                <div className={styles.grid__row}>
-                    <div
-                        className={`${styles.grid__full} ${
-                            layout === 'full'
-                                ? styles.crmtitle
-                                : styles.crmtitleSimple
-                        }`}
-                    >
-                        <Breadcrumb
-                            data={{
-                                label: camelCaseToUcFirst(routeParams.dataId),
-                            }} // Use utility function here
-                            page={{
-                                parentTitle: 'Settings',
-                                parentUrl: '/settings',
-                                titleKey: 'label',
-                            }}
-                        />
-                    </div>
-                </div>
-            </div>
-            <div className={styles.grid}>
-                <div className={styles.grid__row}>
-                    <div className={styles.grid__full}>
-                        {category === false ? (
-                            <SortableList
-                                items={sortData}
-                                onSortEnd={onSortEnd}
-                                axis="xy"
-                                helperClass={styles.dragitem}
-                                transitionDuration={250}
-                                useDragHandle
-                            />
-                        ) : (
-                            sortData.length > 0 &&
-                            sortData.map((item) => (
-                                <ChildSort
-                                    key={`category-${item.id}`}
-                                    item={item}
-                                    url={url}
-                                />
-                            ))
-                        )}
-                    </div>
-                </div>
-            </div>
-        </>
-    );
-};
-
-export default GenericSort;