@visns-studio/visns-components 4.7.1 → 4.7.3

package/src/components/cms/Form.jsx

@@ -0,0 +1,476 @@
+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/src/components/cms/generic/CmsDetail.jsx

@@ -0,0 +1,36 @@
+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/src/components/cms/generic/CmsIndex.jsx

@@ -0,0 +1,73 @@
+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;