@visns-studio/visns-components 4.7.2 → 4.7.3

package/src/components/cms/DropZone.jsx

@@ -0,0 +1,349 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { useDropzone } from 'react-dropzone';
+import { confirmAlert } from 'react-confirm-alert';
+import { CircleX, File, TrashCan } from 'akar-icons';
+import { toast } from 'react-toastify';
+import { arrayMoveImmutable } from 'array-move';
+import Popup from 'reactjs-popup';
+
+import 'react-confirm-alert/src/react-confirm-alert.css';
+
+import CustomFetch from '../crm/Fetch';
+import SortableList from './sorting/List';
+
+function VisnsDropZone({ fetchData, files, settings }) {
+    const [data, setData] = useState(files);
+
+    /** Modal States */
+    const [modalData, setModalData] = useState({
+        id: 0,
+        title: '',
+        description: '',
+    });
+    const [modalShow, setModalShow] = useState(false);
+
+    /** Modal Functions */
+    const modalOpen = () => {
+        setModalShow(true);
+    };
+
+    const modalClose = () => {
+        setModalShow(false);
+    };
+
+    const [loadingProgress, setLoadingProgress] = useState(0);
+
+    const onSortEnd = ({ oldIndex, newIndex }) => {
+        setData((prevItem) => arrayMoveImmutable(prevItem, oldIndex, newIndex));
+    };
+
+    const onDrop = useCallback((acceptedFiles) => {
+        acceptedFiles.forEach((a) => {
+            Vapor.store(a, {
+                progress: (progress) => {
+                    setLoadingProgress(progress * 100);
+                },
+            }).then((response) => {
+                setLoadingProgress(0);
+                CustomFetch(
+                    settings.url,
+                    settings.method,
+                    {
+                        uuid: response.uuid,
+                        key: response.key,
+                        bucket: response.bucket,
+                        filename: a.name,
+                        filesize: a.size,
+                        extension: response.extension,
+                        ...settings.data,
+                    },
+                    function (result) {
+                        if (result.error === '') {
+                            if (typeof fetchData === 'function') {
+                                fetchData();
+
+                                toast.success(
+                                    'File has been successfully uploaded.'
+                                );
+                            }
+                        } else {
+                            toast.error(String(result.error));
+                        }
+                    }
+                );
+            });
+        });
+    }, []);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+    });
+
+    const handleDownload = (id) => {
+        if (id && id > 0 && settings.model && settings.model !== '') {
+            window.open(`/ajax/files/download/${id}/${settings.model}`);
+        } else {
+            toast.warning('Issue with downloading the selected file.');
+        }
+    };
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+
+        setModalData((prevState) => ({
+            ...prevState,
+            [name]: value,
+        }));
+    };
+
+    const handleEdit = async (fileData) => {
+        try {
+            const res = await CustomFetch(
+                `/ajax/files/${fileData.id}`,
+                'GET',
+                {}
+            );
+
+            setModalData((prevState) => ({
+                ...prevState,
+                id: res.data.id,
+                file_name: res.data.file_name,
+                title: res.data.file_title,
+                description: res.data.file_description,
+            }));
+
+            modalOpen();
+        } catch (error) {
+            console.info(error);
+        }
+    };
+
+    const handleDelete = (id, name) => {
+        if (id && id > 0) {
+            confirmAlert({
+                title: 'Confirm to Delete File',
+                message: 'Are you sure you want to delete ' + name,
+                buttons: [
+                    {
+                        label: 'Yes',
+                        onClick: () => {
+                            CustomFetch(
+                                `/ajax/files/delete`,
+                                'POST',
+                                {
+                                    file_id: id,
+                                },
+                                function (result) {
+                                    if (result.error === '') {
+                                        if (typeof fetchData === 'function') {
+                                            fetchData();
+                                        }
+                                    }
+                                }
+                            );
+                        },
+                    },
+                    {
+                        label: 'No',
+                        onClick: () => close(),
+                    },
+                ],
+            });
+        } else {
+            toast.error('Issue with deleting the selected file.');
+        }
+    };
+
+    const handleSubmit = async (e) => {
+        try {
+            if (e) {
+                e.preventDefault();
+            }
+
+            const res = await CustomFetch(
+                `/ajax/files/${modalData.id}`,
+                'PUT',
+                {
+                    file_name: modalData.file_name,
+                    file_title: modalData.title,
+                    file_description: modalData.description,
+                }
+            );
+
+            if (res.data.error === '') {
+                toast.success('File metadata has been successfully updated.');
+                modalClose();
+
+                if (typeof fetchData === 'function') {
+                    fetchData();
+                }
+            } else {
+                toast.error(res.data.error);
+            }
+        } catch (error) {
+            console.info(error);
+        }
+    };
+
+    useEffect(() => {
+        if (data?.length > 0) {
+            CustomFetch(
+                '/ajax/files/sort_update',
+                'POST',
+                {
+                    list: data,
+                },
+                function (result) {
+                    if (result.error === '') {
+                    } else {
+                        toast.error(String(result.error));
+                    }
+                }
+            );
+        }
+    }, [data]);
+
+    useEffect(() => {
+        setData(files);
+    }, [files]);
+
+    return (
+        <>
+            {settings.type === 'gallery' ? (
+                <div className="image-container">
+                    {data && data.length > 0 ? (
+                        <SortableList
+                            items={data}
+                            onSortEnd={onSortEnd}
+                            axis="xy"
+                            helperClass="dragitem"
+                            transitionDuration={250}
+                            handleDelete={handleDelete}
+                            handleEdit={handleEdit}
+                            useDragHandle
+                            showImage={true}
+                        />
+                    ) : null}
+                </div>
+            ) : null}
+            <div className="progress">
+                <motion.div
+                    className="progress__bar"
+                    initial={{ width: '0%' }}
+                    animate={{
+                        width: loadingProgress + '%',
+                    }}
+                    transition={{
+                        duration: 1,
+                        ease: [0.165, 0.84, 0.44, 1.0],
+                    }}
+                />
+            </div>
+            <section className="dropzone__container">
+                <div {...getRootProps()}>
+                    <input {...getInputProps()} />
+                    {isDragActive ? (
+                        <p>Drop the files here ...</p>
+                    ) : (
+                        <p>
+                            Drag 'n' drop some files here, or click to select
+                            files
+                        </p>
+                    )}
+                </div>
+                {settings.type !== 'gallery' ? (
+                    <ul className="dropzone__files">
+                        {data && data.length > 0
+                            ? data.map((a, b) => (
+                                  <li
+                                      onClick={() => {
+                                          handleDownload(a.id);
+                                      }}
+                                      key={'tf-' + b}
+                                  >
+                                      <File strokeWidth={2} size={18} />
+                                      {a.file_name}
+                                      <button
+                                          onClick={(e) => {
+                                              e.preventDefault();
+                                              e.stopPropagation();
+
+                                              handleDelete(a.id, a.file_name);
+                                          }}
+                                      >
+                                          <TrashCan strokeWidth={2} size={18} />
+                                      </button>
+                                  </li>
+                              ))
+                            : null}
+                    </ul>
+                ) : null}
+            </section>
+            <Popup
+                open={modalShow}
+                onClose={modalClose}
+                closeOnDocumentClick={false}
+            >
+                <div className="modalwrap top--modal">
+                    <div className="modal">
+                        <div className="modal__header">
+                            <h1>Update File Metadata</h1>
+                            <button
+                                className="modal__close"
+                                onClick={modalClose}
+                            >
+                                <CircleX strokeWidth={1} size={24} />
+                            </button>
+                        </div>
+                        <div className="modal__content">
+                            <div className="formcontainer">
+                                <form
+                                    className="modalForm"
+                                    onSubmit={handleSubmit}
+                                >
+                                    <div className="formItem fwItem">
+                                        <label className="fi__label">
+                                            <input
+                                                type="text"
+                                                name="title"
+                                                onChange={handleChange}
+                                                value={modalData.title}
+                                            />
+                                            <span className="fi__span">
+                                                Title
+                                            </span>
+                                        </label>
+                                    </div>
+                                    <div className="formItem fwItem">
+                                        <label className="fi__label">
+                                            <textarea
+                                                name="description"
+                                                rows="5"
+                                                onChange={handleChange}
+                                                value={modalData.description}
+                                            ></textarea>
+                                            <span className="fi__span">
+                                                Description
+                                            </span>
+                                        </label>
+                                    </div>
+                                    <div className="formItem fwItem lastItem">
+                                        <button
+                                            className="btn modalsave"
+                                            type="submit"
+                                        >
+                                            Save
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Popup>
+        </>
+    );
+}
+
+export default VisnsDropZone;