@visns-studio/visns-components 1.0.3 → 1.0.5

package/components/cms/visns-form.jsx

@@ -0,0 +1,467 @@
+import React, { useState, useEffect } from "react";
+import CustomFetch from "../crm/visns-fetch";
+import Field from "./visns-field";
+import slugify from "react-slugify";
+import moment from "moment";
+import Reveal from "react-reveal/Reveal";
+import { confirmAlert } from "react-confirm-alert";
+import { Copy, Send, TrashBin } from "akar-icons";
+
+import "react-confirm-alert/src/react-confirm-alert.css";
+
+function Form(props) {
+	const { dataId, navigate, form, setActiveNav, alertStateChange } = 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) {
+			switch (e.target.name) {
+				case "title":
+					setData((prevState) => ({
+						...prevState,
+						[e.target.name]: e.target.value,
+					}));
+
+					setData((prevState) => ({
+						...prevState,
+						slug: slugify(e.target.value),
+					}));
+					break;
+				default:
+					setData((prevState) => ({
+						...prevState,
+						[e.target.name]: e.target.value,
+					}));
+					break;
+			}
+		}
+	};
+
+	const handleChangeSelect = (value, action, id) => {
+		if (value && action && id) {
+			setData((prevState) => ({
+				...prevState,
+				[id]: value,
+			}));
+		}
+	};
+
+	const handleChangeRicheditor = (value, name) => {
+		setData((prevState) => ({
+			...prevState,
+			[name]: value,
+		}));
+	};
+
+	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,
+								}));
+							});
+
+							alertStateChange({
+								show: true,
+								alertClass: "dialog success",
+								alertText: message,
+							});
+
+							if (dataId === "create") {
+								navigate(
+									form.url.replace("/ajax", "") +
+										"/" +
+										result.data.id,
+									{
+										state: {
+											form: form,
+										},
+									}
+								);
+							}
+						} else {
+							alertStateChange({
+								show: true,
+								alertClass: "dialog error",
+								alertText: result.error,
+							});
+						}
+					},
+					function (error) {
+						alertStateChange({
+							show: true,
+							alertClass: "dialog error",
+							alertText: String(error),
+						});
+					}
+				);
+			} else {
+				alertStateChange({
+					show: true,
+					alertClass: "dialog error",
+					alertText: error,
+				});
+			}
+		}
+	};
+
+	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", ""));
+										alertStateChange({
+											show: true,
+											alertClass: "dialog success",
+											alertText:
+												"You have successfully deleted this entry.",
+										});
+									} else {
+										alertStateChange({
+											show: true,
+											alertClass: "dialog error",
+											alertText: result.error,
+										});
+									}
+								},
+								function (error) {
+									alertStateChange({
+										show: true,
+										alertClass: "dialog error",
+										alertText: String(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("/insights");
+					alertStateChange({
+						show: true,
+						alertClass: "dialog error",
+						alertText: 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}</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
+									alertStateChange={alertStateChange}
+									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}
+									onChangeFile={handleChangeFile}
+									onChangeRicheditor={handleChangeRicheditor}
+									onChangeSelect={handleChangeSelect}
+									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/crm/visns-download.jsx

@@ -0,0 +1,102 @@
+import _ from 'lodash';
+import axios from 'axios';
+import { trackPromise } from 'react-promise-tracker';
+
+const CustomDownload = (
+    url,
+    method,
+    formData,
+    successCallback,
+    errorCallback
+) => {
+    let baseUrl = '';
+    let fileUpload = false;
+    let body;
+    let headers = {};
+    let options = {};
+
+    if (!_.isEmpty(formData)) {
+        Object.keys(formData).forEach((item) => {
+            if (formData[item] !== undefined) {
+                if (formData[item] instanceof File && formData[item] !== null) {
+                    fileUpload = true;
+                }
+            }
+        });
+    }
+
+    if (method.toUpperCase() === 'PUT' || method.toUpperCase() === 'PATCH') {
+        if (fileUpload === false) {
+            body = {
+                ...body,
+                _method: method,
+            };
+        }
+    }
+
+    if (fileUpload === false) {
+        body = JSON.stringify(formData);
+        headers = {
+            ...headers,
+            'Content-Type': 'application/json',
+        };
+    } else {
+        body = new FormData();
+
+        headers = {
+            ...headers,
+            'Content-Type': 'multipart/form-data',
+            contentType: false,
+            processData: false,
+        };
+
+        if (!_.isEmpty(formData)) {
+            Object.keys(formData).forEach((item) => {
+                body.append(item, formData[item]);
+            });
+        }
+
+        if (
+            method.toUpperCase() === 'PUT' ||
+            method.toUpperCase() === 'PATCH'
+        ) {
+            if (fileUpload === false) {
+            } else {
+                body.append('_method', method);
+                method = 'POST';
+            }
+        }
+    }
+
+    options = {
+        method: method,
+        data: body,
+        headers: headers,
+        url: baseUrl + url,
+        responseType: 'blob',
+    };
+
+    trackPromise(
+        axios(options).then(
+            (result) => {
+                successCallback(result.data);
+            },
+            (error) => {
+                if (
+                    error.response.hasOwnProperty('data') &&
+                    error.response.data.hasOwnProperty('message') &&
+                    error.response.data.message !== ''
+                ) {
+                    if (error.response.data.message === 'Unauthenticated.') {
+                        localStorage.clear();
+                    }
+                    errorCallback(error.response.data.message);
+                } else {
+                    errorCallback(error);
+                }
+            }
+        )
+    );
+};
+
+export default CustomDownload;

package/index.js

@@ -1,25 +1,35 @@
-import AsyncSelect from "./components/visns-async-select";
-import Autocomplete from "./components/visns-autocomplete";
-import Call from "./components/visns-call";
-import DataGrid from "./components/visns-data-grid";
-import Download from "./components/visns-download";
-import Fetch from "./components/visns-fetch";
-import Field from "./components/visns-field";
-import Form from "./components/visns-form";
-import Loader from "./components/visns-loader";
-import MultiSelect from "./components/visns-multi-select";
-import Notification from "./components/visns-notification";
-import SelectList from "./components/visns-select-list";
-import Select from "./components/visns-select";
-import TableFilter from "./components/visns-table-filter";
+/** CMS Components */
+import CmsForm from "./components/cms/visns-form";
+import DataGrid from "./components/cms/visns-data-grid";
+import Download from "./components/cms/visns-download";
+import DropZone from "./components/cms/visns-dropzone";
+import SortableList from "./components/cms/sorting/list";
+
+/** CRM Components */
+import AsyncSelect from "./components/crm/visns-async-select";
+import Autocomplete from "./components/crm/visns-autocomplete";
+import Call from "./components/crm/visns-call";
+import CustomFetch from "./components/crm/visns-fetch";
+import Download from "./components/crm/visns-download";
+import Field from "./components/crm/visns-field";
+import Form from "./components/crm/visns-form";
+import Loader from "./components/crm/visns-loader";
+import MultiSelect from "./components/crm/visns-multi-select";
+import Notification from "./components/crm/visns-notification";
+import SelectList from "./components/crm/visns-select-list";
+import Select from "./components/crm/visns-select";
+import Table from "./components/crm/visns-data-grid";
+import TableFilter from "./components/crm/visns-table-filter";
 
 export {
 	AsyncSelect,
 	Autocomplete,
 	Call,
+	CmsForm,
+	CustomFetch,
 	DataGrid,
 	Download,
-	Fetch,
+	DropZone,
 	Field,
 	Form,
 	Loader,
@@ -27,5 +37,7 @@ export {
 	Notification,
 	SelectList,
 	Select,
+	SortableList,
+	Table,
 	TableFilter,
 };

package/package.json

@@ -30,7 +30,7 @@
 		"react-dom": ">=18.2.0"
 	},
 	"name": "@visns-studio/visns-components",
-	"version": "1.0.3",
+	"version": "1.0.5",
 	"description": "Various packages to assist in the development of our Custom Applications.",
 	"main": "index.js",
 	"devDependencies": {},