@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/cms/Form.jsx

@@ -1,476 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import CustomFetch from '../crm/Fetch';
-import Field from './Field';
-import slugify from 'react-slugify';
-import moment from 'moment';
-import Reveal from 'react-reveal/Reveal';
-import parse from 'html-react-parser';
-import { confirmAlert } from 'react-confirm-alert';
-import { toast } from 'react-toastify';
-import { Copy, TrashBin } from 'akar-icons';
-
-import 'react-confirm-alert/src/react-confirm-alert.css';
-
-function Form(props) {
-    const { dataId, navigate, form } = props;
-    const [data, setData] = useState({});
-    const [dataClass, setDataClass] = useState({});
-    const [audit, setAudit] = useState({
-        createdBy: {},
-        created: '',
-        updatedBy: {},
-        updated: '',
-    });
-    const [uploadProgress, setUploadProgress] = useState({});
-
-    const handleChange = (e) => {
-        if (e) {
-            const { name, value } = e.target;
-
-            switch (e.target.name) {
-                case 'title':
-                    setData((prevState) => ({
-                        ...prevState,
-                        [name]: value,
-                    }));
-
-                    setData((prevState) => ({
-                        ...prevState,
-                        slug: slugify(value),
-                    }));
-                    break;
-                case 'name':
-                    setData((prevState) => ({
-                        ...prevState,
-                        [name]: value,
-                    }));
-
-                    setData((prevState) => ({
-                        ...prevState,
-                        slug: slugify(value),
-                    }));
-                    break;
-                default:
-                    if (name) {
-                        setData((prevState) => ({
-                            ...prevState,
-                            [name]: value,
-                        }));
-                    } else {
-                        setData((prevState) => ({
-                            ...prevState,
-                            [e.target.dataset.name]: value,
-                        }));
-                    }
-                    break;
-            }
-        }
-    };
-
-    const handleChangeDate = (date, id) => {
-        setData((prevState) => ({
-            ...prevState,
-            [id]: date,
-        }));
-    };
-
-    const handleChangeSelect = (value, action, id) => {
-        if (value && action && id) {
-            setData((prevState) => ({
-                ...prevState,
-                [id]: value,
-            }));
-        }
-    };
-
-    const handleChangeRicheditor = (e, value, name) => {
-        setData((prevState) => ({
-            ...prevState,
-            [name]: value,
-        }));
-    };
-
-    const handleChangeToggle = (e) => {
-        if (!e) {
-            return;
-        }
-
-        const { name, checked } = e.target;
-
-        setData((prevState) => ({
-            ...prevState,
-            [name]: checked,
-        }));
-    };
-
-    const handleChangeFile = (e) => {
-        if (e) {
-            setData((prevState) => ({
-                ...prevState,
-                [e.target.name]: e.target.files[0],
-            }));
-
-            Vapor.store(e.target.files[0], {
-                progress: (progress) => {
-                    setUploadProgress((prevState) => ({
-                        ...prevState,
-                        [e.target.name]: progress * 100,
-                    }));
-                },
-            }).then((response) => {
-                if (data.hasOwnProperty('files')) {
-                    let _files = data.files;
-                    let _new = true;
-
-                    data.files.forEach((a, b) => {
-                        if (e.target.name === a.field) {
-                            _files[b] = {
-                                field: e.target.name,
-                                uuid: response.uuid,
-                                key: response.key,
-                                bucket: response.bucket,
-                                filename: e.target.files[0].name,
-                                filesize: e.target.files[0].size,
-                                extension: response.extension,
-                            };
-
-                            _new = false;
-                        }
-                    });
-
-                    if (_new === true) {
-                        setData((prevState) => ({
-                            ...prevState,
-                            files: [
-                                ...prevState.files,
-                                {
-                                    field: e.target.name,
-                                    uuid: response.uuid,
-                                    key: response.key,
-                                    bucket: response.bucket,
-                                    filename: e.target.files[0].name,
-                                    filesize: e.target.files[0].size,
-                                    extension: response.extension,
-                                },
-                            ],
-                        }));
-                    } else {
-                        setData((prevState) => ({
-                            ...prevState,
-                            files: _files,
-                        }));
-                    }
-                } else {
-                    setData((prevState) => ({
-                        ...prevState,
-                        files: [
-                            {
-                                field: e.target.name,
-                                uuid: response.uuid,
-                                key: response.key,
-                                bucket: response.bucket,
-                                filename: e.target.files[0].name,
-                                filesize: e.target.files[0].size,
-                                extension: response.extension,
-                            },
-                        ],
-                    }));
-                }
-            });
-        }
-    };
-
-    const handleSubmit = (e) => {
-        if (e) {
-            e.preventDefault();
-
-            let error = '';
-            let url = '';
-            let method = '';
-            let message = '';
-
-            if (data.title === '') {
-                error += 'Please enter a title.<br />';
-            }
-
-            if (data.summary === '') {
-                error += 'Please enter a summary.<br />';
-            }
-
-            if (error === '') {
-                if (dataId === 'create') {
-                    url = form.url;
-                    method = 'POST';
-                    message = 'You have successfully created a new entry.';
-                } else {
-                    url = form.url + '/' + dataId;
-                    method = 'PUT';
-                    message = 'You have successfully updated this entry.';
-                }
-
-                CustomFetch(url, method, data, function (result) {
-                    if (result.error === '') {
-                        let _uploadProgress = uploadProgress;
-
-                        Object.keys(_uploadProgress).forEach((a, b) => {
-                            setUploadProgress((prevState) => ({
-                                ...prevState,
-                                [b]: 0,
-                            }));
-                        });
-
-                        toast.success(message);
-
-                        if (dataId === 'create') {
-                            navigate(
-                                form.url.replace('/ajax', '') +
-                                    '/' +
-                                    result.data.id,
-                                {
-                                    state: {
-                                        form: form,
-                                    },
-                                }
-                            );
-                        }
-                    } else {
-                        toast.error(result.error);
-                    }
-                });
-            } else {
-                toast.error(<div>{parse(error)}</div>);
-            }
-        }
-    };
-
-    const handleDelete = (e) => {
-        if (e) {
-            confirmAlert({
-                title: 'Delete this entry',
-                message: 'Are you sure you want to delete it?',
-                buttons: [
-                    {
-                        label: 'Yes',
-                        onClick: () =>
-                            CustomFetch(
-                                `${form.url}/${dataId}`,
-                                'DELETE',
-                                {},
-                                function (result) {
-                                    if (result.error === '') {
-                                        navigate(form.url.replace('/ajax', ''));
-                                        toast.success(
-                                            'You have successfully deleted this entry.'
-                                        );
-                                    } else {
-                                        toast.error(result.error);
-                                    }
-                                }
-                            ),
-                    },
-                    {
-                        label: 'No',
-                        onClick: () => close(),
-                    },
-                ],
-            });
-        }
-    };
-
-    const fetchData = () => {
-        form.fields.forEach((a) => {
-            setData((prevState) => ({
-                ...prevState,
-                [a.id]: '',
-            }));
-        });
-
-        if (dataId !== 'create') {
-            CustomFetch(
-                `${form.url}/${dataId}`,
-                'GET',
-                {},
-                function (result) {
-                    let now = moment();
-                    let created = moment.duration(
-                        now.diff(result.data.created_at)
-                    );
-                    let updated = moment.duration(
-                        now.diff(result.data.updated_at)
-                    );
-
-                    setData(result.data);
-                    setAudit((prevState) => ({
-                        ...prevState,
-                        createdBy: result.audit_first,
-                        created:
-                            created.hours() > 24
-                                ? created.days() +
-                                  ' Days ' +
-                                  created.hours() +
-                                  ' Hour(s) ' +
-                                  created.minutes() +
-                                  ' Minutes'
-                                : created.hours() +
-                                  ' Hour(s) ' +
-                                  created.minutes() +
-                                  ' Minutes',
-                        updatedBy: result.audit_latest,
-                        updated:
-                            updated.hours() > 24
-                                ? updated.days() +
-                                  ' Days ' +
-                                  updated.hours() +
-                                  ' Hour(s) ' +
-                                  updated.minutes() +
-                                  ' Minutes'
-                                : updated.hours() +
-                                  ' Hour(s) ' +
-                                  updated.minutes() +
-                                  ' Minutes',
-                    }));
-                },
-                function (error) {
-                    navigate('/');
-
-                    toast.error(String(error));
-                }
-            );
-        }
-    };
-
-    useEffect(() => {
-        form.fields.forEach((a) => {
-            if (a.type === 'image') {
-                setUploadProgress((prevState) => ({
-                    ...prevState,
-                    [a.id]: 0,
-                }));
-            }
-
-            setData((prevState) => ({
-                ...prevState,
-                [a.id]: '',
-            }));
-
-            setDataClass((prevState) => ({
-                ...prevState,
-                [a.id]: '',
-            }));
-        });
-
-        fetchData();
-    }, [dataId]);
-
-    return (
-        <Reveal effect="fadeInUp">
-            <div className="grid">
-                <div className="grid__row">
-                    <div className="grid__full cmstitle">
-                        <h1>
-                            {data.title
-                                ? data.title
-                                : dataId !== 'create'
-                                ? form.update.title
-                                : form.create.title}
-                        </h1>
-                        <div className="cmstitle__actions">
-                            <button
-                                className="btn actionbtn"
-                                onClick={handleSubmit}
-                            >
-                                <Copy size={18} strokeWidth={2} />{' '}
-                                {dataId !== 'create' ? 'Save' : 'Create'}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="dynamic">
-                <div className="dynamic__left">
-                    <div className="formcontainer">
-                        <div className="dynamicform">
-                            {form.fields.map((a, b) => (
-                                <Field
-                                    key={
-                                        b +
-                                        '-fields-' +
-                                        (a.hasOwnProperty('key')
-                                            ? a.id + '-' + a.key
-                                            : a.id)
-                                    }
-                                    baseData={data}
-                                    fetchData={fetchData}
-                                    inputClass={dataClass}
-                                    inputValue={
-                                        a.hasOwnProperty('key')
-                                            ? data[a.key]
-                                            : Array.isArray(data[a.id]) &&
-                                              a.type === 'image'
-                                            ? data[a.id].length > 0
-                                                ? data[a.id][0]
-                                                : ''
-                                            : data[a.id]
-                                    }
-                                    onChange={handleChange}
-                                    onChangeDate={handleChangeDate}
-                                    onChangeFile={handleChangeFile}
-                                    onChangeRicheditor={handleChangeRicheditor}
-                                    onChangeSelect={handleChangeSelect}
-                                    onChangeToggle={handleChangeToggle}
-                                    setFormData={setData}
-                                    settings={a}
-                                    uploadProgress={uploadProgress}
-                                />
-                            ))}
-                        </div>
-                    </div>
-                </div>
-                <div className="dynamic__right">
-                    <h1>Information</h1>
-                    <ul>
-                        <li>
-                            Created: <span>{audit.created} Ago</span>
-                        </li>
-                        <li>
-                            By:{' '}
-                            <span>
-                                {audit &&
-                                audit.createdBy &&
-                                audit.createdBy.user
-                                    ? audit.createdBy.user.name
-                                    : null}
-                            </span>
-                        </li>
-                        <li>
-                            Last Update: <span>{audit.updated} Ago</span>
-                        </li>
-                        <li>
-                            by:{' '}
-                            <span>
-                                {audit &&
-                                audit.updatedBy &&
-                                audit.updatedBy.user
-                                    ? audit.updatedBy.user.name
-                                    : null}
-                            </span>
-                        </li>
-                        {dataId !== 'create' ? (
-                            <li>
-                                <button
-                                    className="btn actionbtn deletebtn"
-                                    onClick={handleDelete}
-                                >
-                                    <TrashBin size={14} strokeWidth={2} />{' '}
-                                    Delete Entry
-                                </button>
-                            </li>
-                        ) : null}
-                    </ul>
-                </div>
-            </div>
-        </Reveal>
-    );
-}
-
-export default Form;

package/components/cms/generic/CmsDetail.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
-import Reveal from 'react-reveal/Reveal';
-import { ToastContainer } from 'react-toastify';
-import CmsForm from '../Form';
-
-import 'react-confirm-alert/src/react-confirm-alert.css';
-
-function CmsDetail({ setting }) {
-    const { dataId } = useParams();
-    const navigate = useNavigate();
-    const { form } = setting;
-
-    return (
-        <Reveal effect="fadeInUp">
-            <div className="grid">
-                <div className="grid__row">
-                    <div className="grid__full">
-                        <CmsForm
-                            dataId={dataId}
-                            navigate={navigate}
-                            form={form}
-                        />
-                    </div>
-                </div>
-            </div>
-            <ToastContainer
-                theme="light"
-                position="bottom-center"
-                style={{ width: '600px' }}
-            />
-        </Reveal>
-    );
-}
-
-export default CmsDetail;

package/components/cms/generic/CmsIndex.jsx

@@ -1,73 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Outlet } from 'react-router-dom';
-import Reveal from 'react-reveal/Reveal';
-import DataGrid from '../DataGrid';
-
-function CmsIndex({ setting, userProfile }) {
-    const { ajaxSetting, columns, form, filters, page, settings } = setting;
-
-    const [config, setConfig] = useState({});
-    const [windowHeight, setWindowHeight] = useState(window.innerHeight);
-    const pageTitle = page?.title;
-
-    useEffect(() => {
-        setConfig(() => ({
-            ajaxSetting,
-            form,
-            columns,
-            settings,
-        }));
-    }, [setting]);
-
-    useEffect(() => {
-        const handleResize = () => {
-            setWindowHeight(window.innerHeight);
-        };
-
-        window.addEventListener('resize', handleResize);
-
-        // Clean up the event listener
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-
-    return (
-        <>
-            <Reveal effect="fadeInUp">
-                <>
-                    <div className="grid">
-                        <div className="grid__row">
-                            <div className="grid__full cmstitle">
-                                <h1>{pageTitle}</h1>
-                            </div>
-                        </div>
-                    </div>
-                    {config.ajaxSetting &&
-                        config.form &&
-                        config.columns &&
-                        config.settings && (
-                            <div className="grid">
-                                <div className="grid__row">
-                                    <div className="grid__full">
-                                        <DataGrid
-                                            {...config}
-                                            gridHeight={windowHeight * 0.65}
-                                            setConfig={setConfig}
-                                            style={
-                                                userProfile?.settings?.style ||
-                                                {}
-                                            }
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                        )}
-                    <Outlet />
-                </>
-            </Reveal>
-        </>
-    );
-}
-
-export default CmsIndex;