@visns-studio/visns-components 1.8.5 → 2.0.1

package/components/crm/generic/GenericDetail.jsx

@@ -0,0 +1,563 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import moment from 'moment';
+import parse from 'html-react-parser';
+import Popup from 'reactjs-popup';
+import { motion } from 'framer-motion';
+import Dropzone from 'react-dropzone';
+import { confirmAlert } from 'react-confirm-alert';
+import { CircleChevronRight, File, TrashCan } from 'akar-icons';
+
+import 'react-confirm-alert/src/react-confirm-alert.css';
+
+import CustomFetch from '../Fetch';
+import Form from '../Form';
+import Table from '../DataGrid';
+import TableFilter from '../TableFilter';
+
+function GenericDetail({ setting, urlParam, userProfile }) {
+    const routeParams = useParams();
+    const { filters, page, tabs } = setting;
+
+    /** Fileupload states */
+    const [files, setFiles] = useState([]);
+    const [loadingProgress, setLoadingProgress] = useState(0);
+
+    /** General States */
+    const [config, setConfig] = useState({});
+    const [data, setData] = useState({});
+    const [dataReload, setDataReload] = useState(0);
+    const [subnav, setSubnav] = useState(() => {
+        return filters.map((f) => {
+            if (
+                f.hasOwnProperty('url') &&
+                f.baseUrl &&
+                f.urlParam &&
+                routeParams[f.urlParam]
+            ) {
+                return {
+                    ...f,
+                    url: `${f.baseUrl}${routeParams[f.urlParam]}`,
+                };
+            } else {
+                return f;
+            }
+        });
+    });
+
+    const [total, setTotal] = useState(0);
+
+    /** General Functions */
+    const handleReload = () => {
+        const min = 0;
+        const max = 999999999;
+        const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
+
+        setDataReload(randomNumber);
+    };
+
+    const getValueFromData = (data, path, id) => {
+        let value =
+            path.reduce(
+                (result, key) =>
+                    result
+                        ? Array.isArray(result[key])
+                            ? result[key][0]
+                            : result[key]
+                        : '',
+                data
+            ) ?? '';
+
+        if (value) {
+            if (Array.isArray(id)) {
+                return id.map((key) => value[key]).join(' ');
+            } else {
+                return value[id];
+            }
+        } else {
+            return '';
+        }
+    };
+
+    const formatDate = (date) => {
+        return date && moment(date).format('DD-MM-YYYY') !== '01-01-1970'
+            ? moment(date).format('DD-MM-YYYY')
+            : '';
+    };
+
+    const renderValue = (item, data) => {
+        const { type, id, relation, size } = item;
+        const value =
+            relation && relation.length > 0
+                ? getValueFromData(data, [...relation], id)
+                : getValueFromData(data, [], id);
+
+        const stringValue = String(value ? value : ''); // Convert value to a string
+
+        switch (type) {
+            case 'date':
+                return formatDate(value);
+            case 'exist':
+                return value ? 'Yes' : 'No';
+            case 'latest_notes':
+                const noteData = data?.[id]?.[0];
+                const name = noteData?.user?.name ?? '';
+                const description = noteData?.description ?? '';
+                const created_at = noteData?.created_at ?? '';
+                const formattedDate = formatDate(created_at);
+
+                if (name !== '' && description !== '' && formattedDate !== '') {
+                    return parse(
+                        `<br /><p>${name} - ${formattedDate}</p><p>${description}</p>`
+                    );
+                } else {
+                    return null;
+                }
+            default:
+                return size === 'full' && stringValue
+                    ? parse(`<br /><p>${stringValue}</p>`)
+                    : stringValue;
+        }
+    };
+
+    const renderContent = () => {
+        if (subnav && subnav.length > 0) {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
+
+                if (activeTabConfig && activeTabConfig.type) {
+                    switch (activeTabConfig.type) {
+                        case 'dropzone':
+                            const downloadFile = (id) => {
+                                window.open(
+                                    `/ajax/file/download/${id}/${activeTabConfig.folder}`
+                                );
+                            };
+
+                            const deleteFile = (e, id, name) => {
+                                if (e) {
+                                    e.stopPropagation();
+
+                                    confirmAlert({
+                                        title: 'Confirm to Delete File',
+                                        message:
+                                            'Are you sure you want to delete ' +
+                                            name,
+                                        buttons: [
+                                            {
+                                                label: 'Yes',
+                                                onClick: () => {
+                                                    CustomFetch(
+                                                        `${activeTabConfig.deleteUrl}/${routeParams[urlParam]}`,
+                                                        'POST',
+                                                        {
+                                                            file_id: id,
+                                                        },
+                                                        function (result) {
+                                                            setFiles(result);
+                                                        }
+                                                    );
+                                                },
+                                            },
+                                            {
+                                                label: 'No',
+                                                onClick: () => close(),
+                                            },
+                                        ],
+                                    });
+                                }
+                            };
+
+                            return (
+                                <div className="gridtxt">
+                                    <div className="gridtxt__header">Files</div>
+                                    <div className="progress">
+                                        <motion.div
+                                            className="progress__bar"
+                                            initial={{ width: '0%' }}
+                                            animate={{
+                                                width: loadingProgress + '%',
+                                            }}
+                                            transition={{
+                                                duration: 2,
+                                                ease: [0.165, 0.84, 0.44, 1.0],
+                                            }}
+                                        />
+                                    </div>
+                                    <Dropzone
+                                        onDrop={(acceptedFiles) => {
+                                            const uploadFile = (file) => {
+                                                Vapor.store(file, {
+                                                    progress: (progress) => {
+                                                        setLoadingProgress(
+                                                            progress * 100
+                                                        );
+                                                    },
+                                                }).then((response) => {
+                                                    setLoadingProgress(0);
+                                                    const requestBody = {
+                                                        uuid: response.uuid,
+                                                        key: response.key,
+                                                        bucket: response.bucket,
+                                                        name: file.name,
+                                                        size: file.size,
+                                                        extension:
+                                                            response.extension,
+                                                    };
+
+                                                    CustomFetch(
+                                                        `${activeTabConfig.url}/${routeParams[urlParam]}`,
+                                                        'PUT',
+                                                        requestBody,
+                                                        (res) => {
+                                                            setFiles(
+                                                                res.data.files
+                                                            );
+                                                        }
+                                                    );
+                                                });
+                                            };
+
+                                            acceptedFiles.forEach((a) => {
+                                                uploadFile(a);
+                                            });
+                                        }}
+                                    >
+                                        {({ getRootProps, getInputProps }) => (
+                                            <section className="dropzone__container">
+                                                <div {...getRootProps()}>
+                                                    <input
+                                                        {...getInputProps()}
+                                                    />
+                                                    <p>
+                                                        Drag 'n' drop some files
+                                                        here, or click to select
+                                                        files
+                                                    </p>
+                                                </div>
+                                                <ul className="dropzone__files">
+                                                    {files.map((a, b) => (
+                                                        <li
+                                                            onClick={() => {
+                                                                downloadFile(
+                                                                    a.id
+                                                                );
+                                                            }}
+                                                            key={'tf-' + b}
+                                                        >
+                                                            <File
+                                                                strokeWidth={2}
+                                                                size={18}
+                                                            />
+                                                            {a.file_name}
+                                                            <button
+                                                                onClick={(
+                                                                    event
+                                                                ) => {
+                                                                    deleteFile(
+                                                                        event,
+                                                                        a.id,
+                                                                        a.file_name
+                                                                    );
+                                                                }}
+                                                            >
+                                                                <TrashCan
+                                                                    strokeWidth={
+                                                                        2
+                                                                    }
+                                                                    size={18}
+                                                                />
+                                                            </button>
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            </section>
+                                        )}
+                                    </Dropzone>
+                                </div>
+                            );
+                        case 'form':
+                            return (
+                                <div className="gridtxt">
+                                    <div className="gridtxt__header">
+                                        <span>{activeTabConfig.title}</span>
+                                    </div>
+                                    <Form
+                                        columnId={routeParams[urlParam]}
+                                        formSettings={activeTabConfig.form}
+                                        formType="update"
+                                        style={
+                                            userProfile?.settings?.style || {}
+                                        }
+                                        updateForm={setFormData}
+                                        type="inline"
+                                    />
+                                </div>
+                            );
+                        case 'overview':
+                            return (
+                                <>
+                                    <div className="gridactions">
+                                        <ul>
+                                            <li>
+                                                <button
+                                                    className="btn"
+                                                    onClick={() =>
+                                                        modalOpen(
+                                                            'update',
+                                                            routeParams[
+                                                                urlParam
+                                                            ]
+                                                        )
+                                                    }
+                                                >
+                                                    Edit
+                                                </button>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div className="gridtxt">
+                                        {activeTabConfig.sections.map(
+                                            (section, sectionIndex) => (
+                                                <React.Fragment
+                                                    key={`section-${activeTabConfig.id}-${sectionIndex}`}
+                                                >
+                                                    <div className="gridtxt__header">
+                                                        <span>
+                                                            {section.title}
+                                                        </span>
+                                                    </div>
+                                                    {section.content &&
+                                                        section.content.length >
+                                                            0 && (
+                                                            <ul className="customer__overview">
+                                                                {section.content.map(
+                                                                    (
+                                                                        item,
+                                                                        itemKey
+                                                                    ) => (
+                                                                        <li
+                                                                            key={`li-${item.id}-${itemKey}`}
+                                                                            className={
+                                                                                item.size ===
+                                                                                'full'
+                                                                                    ? 'fw-grid-item notecolor'
+                                                                                    : null
+                                                                            }
+                                                                        >
+                                                                            <strong>
+                                                                                {
+                                                                                    item.label
+                                                                                }
+
+                                                                                :
+                                                                            </strong>{' '}
+                                                                            {renderValue(
+                                                                                item,
+                                                                                data
+                                                                            )}
+                                                                        </li>
+                                                                    )
+                                                                )}
+                                                            </ul>
+                                                        )}
+                                                </React.Fragment>
+                                            )
+                                        )}
+                                    </div>
+                                </>
+                            );
+                        case 'table':
+                            if (
+                                config.ajaxSetting &&
+                                config.form &&
+                                config.columns &&
+                                config.settings
+                            ) {
+                                return (
+                                    <Table
+                                        {...config}
+                                        setConfig={setConfig}
+                                        setTotal={setTotal}
+                                        style={
+                                            userProfile?.settings?.style || {}
+                                        }
+                                    />
+                                );
+                            } else {
+                                return null;
+                            }
+                        default:
+                            return null;
+                    }
+                }
+            }
+        }
+    };
+
+    /** General Hooks */
+    useEffect(() => {
+        if (tabs && tabs.length > 0) {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
+
+                const applyUrlParamsToData = (data) => {
+                    return data.map((item) => {
+                        return {
+                            ...item,
+                            value:
+                                item.hasOwnProperty('value') &&
+                                item.urlParam &&
+                                routeParams[item.urlParam]
+                                    ? routeParams[item.urlParam]
+                                    : item.value,
+                        };
+                    });
+                };
+
+                if (activeTabConfig) {
+                    switch (activeTabConfig.type) {
+                        case 'table':
+                            if (
+                                activeTabConfig.ajaxSetting &&
+                                activeTabConfig.ajaxSetting.where &&
+                                activeTabConfig.ajaxSetting.where.length > 0
+                            ) {
+                                const updatedAjaxSetting = {
+                                    ...activeTabConfig.ajaxSetting,
+                                    where: applyUrlParamsToData(
+                                        activeTabConfig.ajaxSetting.where
+                                    ),
+                                };
+                                const updatedForm = {
+                                    ...activeTabConfig.form,
+                                    fields: applyUrlParamsToData(
+                                        activeTabConfig.form.fields
+                                    ),
+                                };
+                                setConfig({
+                                    ajaxSetting: updatedAjaxSetting,
+                                    form: updatedForm,
+                                    columns: activeTabConfig.columns,
+                                    settings: activeTabConfig.settings,
+                                });
+                            }
+                            break;
+                        case 'overview':
+                            setConfig({});
+                            if (activeTabConfig.form) {
+                                setFormData(activeTabConfig.form);
+                            }
+                            break;
+                        default:
+                            setConfig({});
+                            break;
+                    }
+                }
+            }
+        }
+    }, [subnav, tabs, routeParams]);
+
+    useEffect(() => {
+        if (routeParams[urlParam] && routeParams[urlParam] > 0) {
+            CustomFetch(
+                `${page.fetchUrl}/${routeParams[urlParam]}`,
+                'GET',
+                {},
+                (res) => {
+                    setData(res);
+
+                    tabs.forEach((tab) => {
+                        if (tab.type && tab.type === 'dropzone') {
+                            if (res.files) {
+                                setFiles(res.files);
+                            }
+                        }
+                    });
+                }
+            );
+        }
+    }, [routeParams, dataReload]);
+
+    /** Modal States */
+    const [formData, setFormData] = useState({});
+    const [formType, setFormType] = useState('');
+    const [formId, setFormId] = useState(0);
+    const [modalShow, setModalShow] = useState(false);
+
+    /** Modal Functions */
+    const modalOpen = (formType, formId) => {
+        setModalShow(true);
+        setFormType(formType);
+        setFormId(formId);
+    };
+
+    const modalClose = () => {
+        setModalShow(false);
+    };
+
+    return (
+        <>
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full crmtitle">
+                        <h1>
+                            <Link
+                                to={
+                                    page && page.previousUrl
+                                        ? page.previousUrl
+                                        : null
+                                }
+                            >
+                                {page && page.title ? page.title : null}
+                            </Link>{' '}
+                            <CircleChevronRight strokeWidth={2} size={18} />{' '}
+                            {data && data[page.titleKey]
+                                ? data[page.titleKey]
+                                : null}
+                        </h1>
+                        {total > 0 && (
+                            <div className="titleInfo">
+                                <span>
+                                    [<strong>{total}</strong> Total]
+                                </span>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <div className="grid">
+                <div className="grid__subrow">
+                    <div className="grid__subnav">
+                        <TableFilter filters={subnav} setFilters={setSubnav} />
+                    </div>
+                    <div className="grid__subcontent">
+                        {config ? renderContent() : null}
+                    </div>
+                </div>
+            </div>
+
+            <Popup
+                open={modalShow}
+                onClose={modalClose}
+                closeOnDocumentClick={false}
+            >
+                <Form
+                    closeModal={modalClose}
+                    columnId={formId}
+                    fetchTable={handleReload}
+                    formSettings={formData}
+                    formType={formType}
+                    style={userProfile?.settings?.style || {}}
+                    updateForm={setFormData}
+                />
+            </Popup>
+        </>
+    );
+}
+
+export default GenericDetail;

package/components/crm/generic/GenericIndex.jsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import Table from '../DataGrid';
+import TableFilter from '../TableFilter';
+
+function GenericIndex({ setting, userProfile }) {
+    const { filters, page, tabs, ajaxSetting, form, columns, settings } =
+        setting;
+
+    const [config, setConfig] = useState({});
+    const [subnav, setSubnav] = useState(filters || []);
+    const [total, setTotal] = useState(0);
+    const pageTitle = page?.title;
+
+    useEffect(() => {
+        if (!tabs || tabs.length === 0) {
+            setConfig(() => ({
+                ajaxSetting,
+                form,
+                columns,
+                settings,
+            }));
+        }
+
+        setSubnav(filters);
+    }, [setting]);
+
+    useEffect(() => {
+        if (tabs && tabs.length > 0) {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
+
+                if (activeTabConfig) {
+                    setConfig(() => ({
+                        ajaxSetting: activeTabConfig.ajaxSetting,
+                        form: activeTabConfig.form,
+                        columns: activeTabConfig.columns,
+                        settings: activeTabConfig.settings,
+                    }));
+                }
+            }
+        }
+    }, [subnav, tabs]);
+
+    return (
+        <>
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full crmtitle">
+                        <h1>{pageTitle}</h1>
+                        <div className="titleInfo">
+                            <span>
+                                [<strong>{total}</strong> Total {pageTitle}]
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {config.ajaxSetting &&
+                config.form &&
+                config.columns &&
+                config.settings && (
+                    <>
+                        <div className="grid">
+                            <div className="grid__row">
+                                {subnav && subnav.length > 0 ? (
+                                    <>
+                                        <div className="grid__subnav">
+                                            <TableFilter
+                                                filters={subnav}
+                                                setFilters={setSubnav}
+                                                setSettings={setConfig}
+                                            />
+                                        </div>
+                                        <div className="grid__subcontent">
+                                            <Table
+                                                {...config}
+                                                setConfig={setConfig}
+                                                setTotal={setTotal}
+                                                style={
+                                                    userProfile?.settings
+                                                        ?.style || {}
+                                                }
+                                            />
+                                        </div>
+                                    </>
+                                ) : (
+                                    <div className="grid__full">
+                                        <Table
+                                            {...config}
+                                            setConfig={setConfig}
+                                            setTotal={setTotal}
+                                            style={
+                                                userProfile?.settings?.style ||
+                                                {}
+                                            }
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        <Outlet />
+                    </>
+                )}
+        </>
+    );
+}
+
+export default GenericIndex;