@visns-studio/visns-components 1.0.0 → 1.0.1-2.1

package/components/cms/visns-form.jsx

@@ -0,0 +1,427 @@
+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 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) {
+			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,
+							}));
+						});
+
+						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("/insights");
+
+					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}</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}
+									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/{visns-field.jsx → crm/visns-field.jsx}

@@ -3,7 +3,7 @@ import DatePicker from "react-datepicker";
 import _ from "lodash";
 import ReactQuill from "react-quill";
 import Toggle from "react-toggle";
-import NumberFormat from "react-number-format";
+import { NumericFormat, PatternFormat } from "react-number-format";
 
 import CustomFetch from "./visns-fetch";
 import Select from "./visns-select";
@@ -304,7 +304,7 @@ function Field(props) {
 							break;
 						case "phone":
 							htmlContainer = (
-								<NumberFormat
+								<PatternFormat
 									data-name={settings.id}
 									className={inputClass[settings.id]}
 									onValueChange={(values) => {
@@ -314,6 +314,8 @@ function Field(props) {
 										);
 									}}
 									format="## #### ####"
+									allowEmptyFormatting
+									mask="_"
 									value={
 										inputValue && inputValue !== "null"
 											? inputValue
@@ -324,7 +326,7 @@ function Field(props) {
 							break;
 						case "mobile":
 							htmlContainer = (
-								<NumberFormat
+								<PatternFormat
 									className={inputClass[settings.id]}
 									onValueChange={(values) => {
 										onChangeNumberFormat(
@@ -333,6 +335,8 @@ function Field(props) {
 										);
 									}}
 									format="#### ### ###"
+									allowEmptyFormatting
+									mask="_"
 									value={
 										inputValue && inputValue !== "null"
 											? inputValue
@@ -343,7 +347,7 @@ function Field(props) {
 							break;
 						case "currency":
 							htmlContainer = (
-								<NumberFormat
+								<NumericFormat
 									data-name={settings.id}
 									className={inputClass[settings.id]}
 									onValueChange={(values) => {
@@ -362,6 +366,60 @@ function Field(props) {
 								/>
 							);
 							break;
+						case "number":
+							htmlContainer = (
+								<NumericFormat
+									data-name={settings.id}
+									className={inputClass[settings.id]}
+									onValueChange={(values) => {
+										onChangeNumberFormat(
+											values,
+											settings.id
+										);
+									}}
+									thousandSeparator={
+										settings.hasOwnProperty(
+											"thousandSeperator"
+										)
+											? settings.thousandSeperator
+											: true
+									}
+									value={
+										inputValue && inputValue !== "null"
+											? inputValue
+											: ""
+									}
+								/>
+							);
+							break;
+						case "decimal":
+							htmlContainer = (
+								<NumericFormat
+									data-name={settings.id}
+									className={inputClass[settings.id]}
+									onValueChange={(values) => {
+										onChangeNumberFormat(
+											values,
+											settings.id
+										);
+									}}
+									thousandSeparator={
+										settings.hasOwnProperty(
+											"thousandSeperator"
+										)
+											? settings.thousandSeperator
+											: true
+									}
+									decimalSeparator="."
+									decimalScale={2}
+									value={
+										inputValue && inputValue !== "null"
+											? inputValue
+											: ""
+									}
+								/>
+							);
+							break;
 						case "textarea":
 							htmlContainer = (
 								<textarea

package/components/crm/visns-table-filter.jsx

@@ -0,0 +1,130 @@
+import React from "react";
+
+function TableFilter(props) {
+	const { filters, setFilters, setSettings } = props;
+
+	const filterTable = (e) => {
+		const { id, value, url } = e.target.dataset;
+
+		console.info("a", url);
+
+		if (props.hasOwnProperty("setSettings") === true) {
+			console.info("b");
+			if (url && url !== "") {
+				console.info("c");
+				window.open(url);
+			} else {
+				console.info("d");
+				setSettings((prevState) => {
+					if (prevState.ajaxSetting) {
+						let _where = [];
+
+						prevState.ajaxSetting.where.forEach((a) => {
+							if (a.id === id) {
+								let _push = true;
+
+								_where.forEach((b) => {
+									if (b.id === id) {
+										_push = false;
+									}
+								});
+
+								if (_push === true) {
+									_where.push({
+										id: id,
+										value: value,
+									});
+								}
+							} else {
+								_where.push(a);
+							}
+						});
+
+						let _push = true;
+
+						_where.forEach((a) => {
+							if (a.id === id) {
+								_push = false;
+							}
+						});
+
+						if (_push === true) {
+							_where.push({
+								id: id,
+								value: value,
+							});
+						}
+
+						return {
+							...prevState,
+							ajaxSetting: {
+								...prevState.ajaxSetting,
+								where: _where,
+							},
+						};
+					} else {
+						let w = prevState.where;
+
+						prevState.where.forEach((a, b) => {
+							if (id === a.id) {
+								w[b].value = value;
+							}
+						});
+
+						return { ...prevState, where: w };
+					}
+				});
+			}
+		}
+
+		let tempFilters = filters;
+
+		filters.map((item, index) => {
+			if (
+				e.target.dataset.hasOwnProperty("value") &&
+				parseInt(value) >= 0
+			) {
+				if (parseInt(value) === parseInt(item.value)) {
+					tempFilters[index].class = "subactive";
+					tempFilters[index].show = true;
+				} else {
+					tempFilters[index].class = "";
+					tempFilters[index].show = false;
+				}
+			} else {
+				if (id === item.id) {
+					tempFilters[index].class = "subactive";
+					tempFilters[index].show = true;
+				} else {
+					tempFilters[index].class = "";
+					tempFilters[index].show = false;
+				}
+			}
+		});
+
+		setFilters(tempFilters);
+		setFilters((prevState) => [...prevState]);
+	};
+
+	return (
+		<ul>
+			{filters.map((item, key) => (
+				<li key={"table-filter-" + key}>
+					<a
+						data-id={item.id}
+						data-value={
+							item.hasOwnProperty("value") ? item.value : ""
+						}
+						data-url={item.url || ""}
+						onClick={filterTable}
+						className={item.class}
+					>
+						{item.label}
+					</a>
+				</li>
+			))}
+		</ul>
+	);
+}
+
+export default TableFilter;

package/index.js

@@ -1,12 +1,42 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import DataGrid from "./components/visns-data-grid";
-import Fetch from "./components/visns-fetch";
+/** CMS Components */
+import CmsForm from "./components/cms/visns-form";
+import DataGrid from "./components/cms/visns-data-grid";
+import DropZone from "./components/cms/visns-dropzone";
+import SortableList from "./components/cms/sorting/list";
 
-ReactDOM.render(
-	<React.Fragment>
-		<DataGrid />
-		<Fetch />
-	</React.Fragment>,
-	document.getElementById("root")
-);
+/** 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,
+	DropZone,
+	Field,
+	Form,
+	Loader,
+	MultiSelect,
+	Notification,
+	SelectList,
+	Select,
+	SortableList,
+	Table,
+	TableFilter,
+};