@visns-studio/visns-components 1.8.5 → 2.0.0

package/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 80
+}

package/components/cms/{visns-data-grid.jsx → DataGrid.jsx}

@@ -35,8 +35,8 @@ import "@inovua/reactdatagrid-community/index.css";
 import "react-confirm-alert/src/react-confirm-alert.css";
 import "react-toggle/style.css";
 
-import CustomFetch from "../crm/visns-fetch";
-import Form from "./visns-form";
+import CustomFetch from "../crm/Fetch";
+import Form from "./Form";
 
 const loadData = async (
 	{ skip, limit, sortInfo, currentData, filterValue, groupBy },

package/components/cms/DropZone.jsx

@@ -0,0 +1,161 @@
+import React, { useState, useCallback } from "react";
+import { motion } from "framer-motion";
+import { useDropzone } from "react-dropzone";
+import { confirmAlert } from "react-confirm-alert";
+import { File, TrashCan } from "akar-icons";
+import { toast } from "react-toastify";
+
+import "react-confirm-alert/src/react-confirm-alert.css";
+
+import CustomFetch from "../crm/Fetch";
+
+function VisnsDropZone(props) {
+    const { fetchData, files, settings } = props;
+    const [loadingProgress, setLoadingProgress] = useState(0);
+
+    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 === "") {
+                            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) {
+            window.open(`/ajax/file/download/${id}/${settings.model}`);
+        } else {
+            toast.warning("Issue with downloading the selected file.");
+        }
+    };
+
+    const handleDelete = (e, id, name) => {
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            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/file/delete`,
+                                    "POST",
+                                    {
+                                        file_id: id,
+                                    },
+                                    function (result) {
+                                        if (result.error === "") {
+                                            fetchData();
+                                        }
+                                    }
+                                );
+                            },
+                        },
+                        {
+                            label: "No",
+                            onClick: () => close(),
+                        },
+                    ],
+                });
+            } else {
+                toast.error("Issue with deleting the selected file.");
+            }
+        }
+    };
+
+    return (
+        <>
+            <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>
+                <ul className="dropzone__files">
+                    {files && files.length > 0
+                        ? files.map((a, b) => (
+                              <li
+                                  onClick={() => {
+                                      handleDownload(a.id);
+                                  }}
+                                  key={"tf-" + b}
+                              >
+                                  <File strokeWidth={2} size={18} />
+                                  {a.file_name}
+                                  <button
+                                      onClick={(event) => {
+                                          handleDelete(
+                                              event,
+                                              a.id,
+                                              a.file_name
+                                          );
+                                      }}
+                                  >
+                                      <TrashCan strokeWidth={2} size={18} />
+                                  </button>
+                              </li>
+                          ))
+                        : null}
+                </ul>
+            </section>
+        </>
+    );
+}
+
+export default VisnsDropZone;