@visns-studio/visns-components 4.7.1 → 4.7.3

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

@@ -0,0 +1,376 @@
+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.scss';
+
+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/src/components/crm/generic/GenericMain.jsx

@@ -0,0 +1,129 @@
+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.scss';
+
+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/src/components/crm/generic/GenericSort.jsx

@@ -0,0 +1,188 @@
+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.scss';
+
+// 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;