@visns-studio/visns-components 5.11.21 → 5.12.0

package/src/components/cms/Form.jsx

@@ -1,475 +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 { toast } from 'react-toastify';
-import { Copy, Trash2 as TrashBin } from 'lucide-react';
-import { confirmDialog } from '../utils/ConfirmDialog';
-
-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) {
-            confirmDialog({
-                title: 'Delete this entry',
-                message: 'Are you sure you want to delete it?',
-                data: data, // Pass the data object for context
-                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/sorting/Item.jsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import { SortableElement, sortableHandle } from 'react-sortable-hoc';
-import { GripVertical as ChevronVertical, Edit as Pencil, Trash2 as TrashCan } from 'lucide-react';
-
-import styles from './styles/Item.module.scss';
-
-const DragHandle = sortableHandle(() => (
-    <ChevronVertical className="drag-handle" strokeWidth={1} size={26} />
-));
-
-// Utility function to truncate text
-const truncateText = (text, maxLength) => {
-    if (text && text.length > maxLength) {
-        return `${text.substring(0, maxLength)}...`;
-    }
-    return text;
-};
-
-const SortableItem = ({
-    containerIndex,
-    handleClick,
-    handleEdit,
-    handleDelete,
-    showImage,
-    value,
-}) => {
-    const renderImage = (d) => {
-        let htmlContainer = '';
-
-        if (showImage) {
-            const imageUrl = d.image_url || d.file_url;
-            htmlContainer = imageUrl ? (
-                <div className="sortimg">
-                    <img src={imageUrl} alt="" />
-                </div>
-            ) : (
-                <div className="sortimg">
-                    {/* Placeholder image */}
-                    <img
-                        src="data:image/png;base64,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"
-                        alt="Placeholder"
-                    />
-                </div>
-            );
-        }
-
-        return htmlContainer;
-    };
-
-    const renderEditButton = () => {
-        if (!handleEdit) return null;
-
-        if (showImage) {
-            if (
-                value.hasOwnProperty('file_title') &&
-                value.hasOwnProperty('file_description')
-            ) {
-                return <EditButton />;
-            }
-            return null;
-        }
-
-        return <EditButton />;
-    };
-
-    const EditButton = () => (
-        <Pencil
-            className="pencil-edit"
-            strokeWidth={2}
-            size={24}
-            onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleEdit(value);
-            }}
-        />
-    );
-
-    return (
-        <li
-            onClick={(e) => {
-                e.preventDefault();
-                if (handleClick) {
-                    handleClick(containerIndex);
-                }
-            }}
-        >
-            <DragHandle />
-            {truncateText(
-                value.label || value.file_title || value.file_name,
-                30
-            )}
-
-            {renderImage(value)}
-
-            {(handleEdit || handleDelete) && (
-                <div className={styles.actionIcons}>
-                    {renderEditButton()}
-
-                    {handleDelete && (
-                        <TrashCan
-                            className="delete"
-                            strokeWidth={2}
-                            size={24}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                handleDelete(
-                                    value.id || containerIndex,
-                                    value.label || value.file_name
-                                );
-                            }}
-                        />
-                    )}
-                </div>
-            )}
-        </li>
-    );
-};
-
-export default SortableElement(SortableItem);

package/src/components/cms/sorting/List.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import VisnsSortableItem from './Item';
-import { SortableContainer } from 'react-sortable-hoc';
-
-import styles from './styles/List.module.scss';
-
-const SortableList = ({
-    handleClick,
-    handleDelete,
-    handleEdit,
-    items,
-    showImage,
-}) => {
-    return (
-        <ul className={styles.sortlist}>
-            {items.map((value, index) => (
-                <VisnsSortableItem
-                    key={`item-${index}`}
-                    containerIndex={index}
-                    index={index}
-                    handleClick={handleClick}
-                    handleDelete={handleDelete}
-                    handleEdit={handleEdit}
-                    showImage={showImage}
-                    value={value}
-                />
-            ))}
-        </ul>
-    );
-};
-
-export default SortableContainer(SortableList);

package/src/components/cms/sorting/styles/Item.module.scss

@@ -1,38 +0,0 @@
-.actionIcons {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    z-index: 10;
-}
-
-:global {
-    .delete {
-        width: 32px;
-        height: 32px;
-        color: #fff;
-        transition: color 0.2s ease;
-        cursor: pointer;
-        display: block;
-
-        &:hover {
-            color: #d32f2f;
-        }
-    }
-
-    .pencil-edit {
-        width: 32px;
-        height: 32px;
-        color: var(--primary-color);
-        transition: color 0.2s ease;
-        cursor: pointer;
-        display: block;
-
-        &:hover {
-            color: var(--secondary-color);
-        }
-    }
-}