@visns-studio/visns-components 1.8.4 → 2.0.0

package/components/cms/Form.jsx

@@ -0,0 +1,475 @@
+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, setActiveNav } = 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 = (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();
+        setActiveNav();
+    }, [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
+                                    settings={a}
+                                    key={
+                                        b +
+                                        "-fields-" +
+                                        (a.hasOwnProperty("key")
+                                            ? a.id + "-" + a.key
+                                            : a.id)
+                                    }
+                                    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]
+                                    }
+                                    inputClass={dataClass}
+                                    onChange={handleChange}
+                                    onChangeDate={handleChangeDate}
+                                    onChangeFile={handleChangeFile}
+                                    onChangeRicheditor={handleChangeRicheditor}
+                                    onChangeSelect={handleChangeSelect}
+                                    onChangeToggle={handleChangeToggle}
+                                    setFormData={setData}
+                                    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/sorting/{list.jsx → List.jsx}

@@ -1,6 +1,6 @@
-import React from 'react';
-import VisnsSortableItem from './item';
-import { SortableContainer } from 'react-sortable-hoc';
+import React from "react";
+import VisnsSortableItem from "./Item";
+import { SortableContainer } from "react-sortable-hoc";
 
 const SortableList = (props) => {
     const { items } = props;

package/components/crm/{visns-async-select.jsx → AsyncSelect.jsx}

@@ -1,15 +1,15 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import CustomFetch from './visns-fetch';
-import SelectList from './visns-select-list';
-import AsyncSelect from 'react-select/async';
-import { debounce } from 'lodash';
+import React, { useEffect, useState, useCallback } from "react";
+import CustomFetch from "./Fetch";
+import SelectList from "./SelectList";
+import AsyncSelect from "react-select/async";
+import { debounce } from "lodash";
 
 function VisnsAsyncSelect(props) {
     const { inputValue, onChange, settings, multi } = props;
 
     const loadSuggestedOptions = useCallback(
         debounce((inputValue, callback) => {
-            if (inputValue !== '') {
+            if (inputValue !== "") {
                 loadOptions(inputValue).then((options) => callback(options));
             }
         }, 500),
@@ -17,17 +17,17 @@ function VisnsAsyncSelect(props) {
     );
 
     const loadOptions = (inputValue) => {
-        if (inputValue !== '') {
+        if (inputValue !== "") {
             return new Promise((resolve, reject) => {
                 let data = [];
 
                 CustomFetch(
                     settings.url,
-                    'POST',
+                    "POST",
                     {
                         where: [
                             {
-                                id: 'async',
+                                id: "async",
                                 value: inputValue,
                             },
                         ],