@visns-studio/visns-components 1.4.9 → 1.4.11

package/components/cms/visns-data-grid.jsx

@@ -12,6 +12,7 @@ import DateFilter from "@inovua/reactdatagrid-community/DateFilter";
 import ReactDataGrid from "@inovua/reactdatagrid-community";
 import { confirmAlert } from "react-confirm-alert";
 import { toast } from "react-toastify";
+import Toggle from "react-toggle";
 import {
 	Backspace,
 	Check,
@@ -25,11 +26,14 @@ import {
 	Ribbon,
 	Search,
 	ShippingBoxV1,
+	ToggleOff,
+	ToggleOnFill,
 	TriangleAlert,
 } from "akar-icons";
 
 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";
@@ -246,7 +250,11 @@ const DataGrid = ({
 	};
 
 	const handleReload = () => {
-		setDataReload(dataReload + 1);
+		const min = 0;
+		const max = 999999999;
+		const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
+
+		setDataReload(randomNumber);
 	};
 
 	const onRowClick = useCallback((rowProps, event) => {
@@ -255,30 +263,45 @@ const DataGrid = ({
 			cellElement
 		);
 
-		if (
-			rowProps.columns[columnIndex].link &&
-			rowProps.columns[columnIndex].link.url
-		) {
-			if (rowProps.columns[columnIndex].link.folder) {
-				window.location.href =
-					rowProps.columns[columnIndex].link.url +
-					rowProps.data[rowProps.columns[columnIndex].link.key] +
-					"/" +
-					rowProps.columns[columnIndex].link.folder;
+		let proceed = true;
+
+		columns.forEach((a, b) => {
+			if (
+				a.id === rowProps.columns[columnIndex].id &&
+				a.type === "toggle"
+			) {
+				proceed = false;
+			}
+		});
+
+		if (proceed) {
+			if (
+				rowProps.columns[columnIndex].link &&
+				rowProps.columns[columnIndex].link.url
+			) {
+				if (rowProps.columns[columnIndex].link.folder) {
+					window.location.href =
+						rowProps.columns[columnIndex].link.url +
+						rowProps.data[rowProps.columns[columnIndex].link.key] +
+						"/" +
+						rowProps.columns[columnIndex].link.folder;
+				} else {
+					navigate(
+						`${rowProps.columns[columnIndex].link.url}${
+							rowProps.data[
+								rowProps.columns[columnIndex].link.key
+							]
+						}`,
+						{
+							state: {
+								form: form,
+							},
+						}
+					);
+				}
 			} else {
-				navigate(
-					`${rowProps.columns[columnIndex].link.url}${
-						rowProps.data[rowProps.columns[columnIndex].link.key]
-					}`,
-					{
-						state: {
-							form: form,
-						},
-					}
-				);
+				modalOpen("update", rowProps.data[form.primaryKey]);
 			}
-		} else {
-			modalOpen("update", rowProps.data[form.primaryKey]);
 		}
 	}, []);
 
@@ -294,6 +317,16 @@ const DataGrid = ({
 		};
 	}, []);
 
+	const sortTrigger = () => {
+		let _url = form.url.replace("/ajax", "");
+
+		navigate(_url + "/sort", {
+			state: {
+				form: form,
+			},
+		});
+	};
+
 	/** Table Hooks */
 	useEffect(() => {
 		const delayedSetDSearch = debounce(() => {
@@ -1015,6 +1048,40 @@ const DataGrid = ({
 							}
 						},
 					};
+				case "toggle":
+					return {
+						...commonProps,
+						name: column.id,
+						render: ({ data }) => {
+							return (
+								<Toggle
+									name={column.id}
+									checked={
+										data[column.id] === 1 ? true : false
+									}
+									onChange={() => {
+										CustomFetch(
+											`/ajax/projects/toggleFeature/${data.id}`,
+											"POST",
+											{
+												[column.id]:
+													data[column.id] === 1
+														? 0
+														: 1,
+											},
+											(res) => {
+												if (res.error === "") {
+													handleReload();
+												} else {
+													toast.error(res.error);
+												}
+											}
+										);
+									}}
+								/>
+							);
+						},
+					};
 				case "url":
 					return {
 						...commonProps,
@@ -1227,6 +1294,12 @@ const DataGrid = ({
 				/>
 			</div>
 			<div className="filterAction--alt">
+				{form.sort && form.sort.title && (
+					<button className="btn" onClick={sortTrigger}>
+						<div className="icon-plus"></div> Sort Order
+					</button>
+				)}
+
 				<button
 					className="btn"
 					onClick={() => {

package/components/cms/visns-field.jsx

@@ -13,23 +13,53 @@ import "react-toggle/style.css";
 import "react-quill/dist/quill.snow.css";
 import "react-datepicker/dist/react-datepicker.css";
 
-function Field(props) {
+const Field = ({
+	settings,
+	inputValue,
+	inputClass,
+	onChange,
+	onChangeFile,
+	onChangeRicheditor,
+	onChangeSelect,
+	onChangeToggle,
+	setFormData,
+	uploadProgress,
+}) => {
+	const quillFileInputRef = useRef(null);
+	const quillRef = useRef(null);
 	const inputFile = useRef(null);
 	const [options, setOptions] = useState([]);
 	const [dataOptions, setDataOptions] = useState([]);
 	const [formItemStyle, setFormItemStyle] = useState({});
 	const [formItemClass, setFormItemClass] = useState("formItem");
-	const {
-		settings,
-		inputValue,
-		inputClass,
-		onChange,
-		onChangeFile,
-		onChangeRicheditor,
-		onChangeSelect,
-		setFormData,
-		uploadProgress,
-	} = props;
+	const modules = {
+		toolbar: {
+			container: [
+				[{ header: [1, 2, false] }],
+				["bold", "italic", "underline", "strike", "blockquote"],
+				[{ list: "ordered" }, { list: "bullet" }],
+				["link", "image"],
+				["clean"],
+			],
+		},
+	};
+
+	const handleImageUpload = async (e) => {
+		try {
+			const file = e.target.files[0];
+			const reader = new FileReader();
+
+			reader.onload = () => {
+				const dataUrl = reader.result;
+				const range = quillRef.getEditor().getSelection();
+				quillRef.getEditor().insertEmbed(range.index, "image", dataUrl);
+			};
+
+			reader.readAsDataURL(file);
+		} catch (error) {
+			console.error("Error uploading image:", error);
+		}
+	};
 
 	useEffect(() => {
 		switch (settings.type) {
@@ -579,7 +609,7 @@ function Field(props) {
 												? false
 												: inputValue === "on"
 												? false
-												: inputValue
+												: Boolean(inputValue)
 											: false
 									}
 									onChange={onChangeToggle}
@@ -593,14 +623,35 @@ function Field(props) {
 						break;
 					case "richeditor":
 						htmlContainer = (
-							<ReactQuill
-								theme="snow"
-								name={settings.id}
-								onChange={(value) => {
-									onChangeRicheditor(value, settings.id);
-								}}
-								value={inputValue || ""}
-							/>
+							<>
+								<input
+									type="file"
+									style={{ display: "none" }}
+									ref={quillFileInputRef}
+									onChange={handleImageUpload}
+								/>
+								<ReactQuill
+									theme="snow"
+									name={settings.id}
+									onChange={(value) => {
+										onChangeRicheditor(value, settings.id);
+									}}
+									value={inputValue || ""}
+									modules={modules}
+									formats={[
+										"header",
+										"bold",
+										"italic",
+										"underline",
+										"strike",
+										"blockquote",
+										"list",
+										"bullet",
+										"link",
+										"image",
+									]}
+								/>
+							</>
 						);
 						break;
 					case "image":
@@ -668,6 +719,6 @@ function Field(props) {
 			})()}
 		</div>
 	);
-}
+};
 
 export default Field;

package/components/cms/visns-form.jsx

@@ -34,6 +34,17 @@ function Form(props) {
 						[name]: value,
 					}));
 
+					setData((prevState) => ({
+						...prevState,
+						slug: slugify(value),
+					}));
+					break;
+				case "name":
+					setData((prevState) => ({
+						...prevState,
+						[name]: value,
+					}));
+
 					setData((prevState) => ({
 						...prevState,
 						slug: slugify(value),
@@ -72,6 +83,19 @@ function Form(props) {
 		}));
 	};
 
+	const handleChangeToggle = (e) => {
+		if (!e) {
+			return;
+		}
+
+		const { name, checked } = e.target;
+
+		setData((prevState) => ({
+			...prevState,
+			[name]: checked,
+		}));
+	};
+
 	const handleChangeFile = (e) => {
 		if (e) {
 			setData((prevState) => ({
@@ -337,7 +361,13 @@ function Form(props) {
 			<div className="grid">
 				<div className="grid__row">
 					<div className="grid__full cmstitle">
-						<h1>{data.title ? data.title : form.update.title}</h1>
+						<h1>
+							{data.title
+								? data.title
+								: dataId !== "create"
+								? form.update.title
+								: form.create.title}
+						</h1>
 						<div className="cmstitle__actions">
 							<button
 								className="btn actionbtn"
@@ -379,6 +409,7 @@ function Form(props) {
 									onChangeFile={handleChangeFile}
 									onChangeRicheditor={handleChangeRicheditor}
 									onChangeSelect={handleChangeSelect}
+									onChangeToggle={handleChangeToggle}
 									setFormData={setData}
 									uploadProgress={uploadProgress}
 								/>

package/components/crm/visns-data-grid.jsx

@@ -270,7 +270,13 @@ const DataGrid = forwardRef(
 		};
 
 		const handleReload = () => {
-			setDataReload(dataReload + 1);
+			const min = 0;
+			const max = 999999999;
+			const randomNumber = Math.floor(
+				Math.random() * (max - min + 1) + min
+			);
+
+			setDataReload(randomNumber);
 		};
 
 		const onRowClick = useCallback((rowProps, event) => {
@@ -429,7 +435,7 @@ const DataGrid = forwardRef(
 				}
 			};
 
-			c.config.forEach((config) => {
+			c.config.forEach((config, configKey) => {
 				const fieldValue = config.id.reduce((acc, id) => {
 					if (acc === "") {
 						return data[id];
@@ -453,7 +459,7 @@ const DataGrid = forwardRef(
 						iconData.icon ? iconData.icon : null,
 						iconData.alt,
 						iconData.tooltipContent,
-						`coding-${config.id[0]}`
+						`coding-${config.id[0]}-${configKey}`
 					);
 				}
 			});
@@ -609,8 +615,23 @@ const DataGrid = forwardRef(
 							},
 						};
 					case "age":
+						if (column.filter && column.filter.type) {
+							switch (column.filter.type) {
+								case "number":
+									filterEditor = NumberFilter;
+									break;
+								default:
+									filterEditor = null;
+									break;
+							}
+						} else {
+							filterEditor = null;
+						}
+
 						return {
 							...commonProps,
+							type: "number",
+							filterEditor: filterEditor,
 							name: `${column.type}.${column.id}`,
 							render: ({ data }) => {
 								value = column.id.reduce((acc, id) => {
@@ -655,7 +676,7 @@ const DataGrid = forwardRef(
 					case "coding":
 						return {
 							...commonProps,
-							name: "audits.name",
+							name: `${column.type}.${column.id}`,
 							sortable: false,
 							render: ({ data }) => {
 								if (data) {
@@ -668,7 +689,7 @@ const DataGrid = forwardRef(
 					case "created_by":
 						return {
 							...commonProps,
-							name: "audits.name",
+							name: `${column.type}.${column.id}`,
 							sortable: false,
 							render: ({ data }) => {
 								if (

package/components/crm/visns-field.jsx

@@ -613,6 +613,7 @@ function Field({
 										? settings.format
 										: "dd-MM-yyyy"
 								}
+								isClearable
 								className={inputClass[settings.id]}
 								selected={inputValue || ""}
 								showMonthDropdown
@@ -632,6 +633,7 @@ function Field({
 										? settings.format
 										: "dd-MM-yyyy hh:mm aa"
 								}
+								isClearable
 								showTimeSelect
 								className={inputClass[settings.id]}
 								selected={inputValue || null}
@@ -653,6 +655,7 @@ function Field({
 										? settings.format
 										: "hh:mm aa"
 								}
+								isClearable
 								showTimeSelect
 								showTimeSelectOnly
 								timeIntervals={15}

package/package.json

@@ -34,7 +34,7 @@
 		"react-dom": "^17.0.1"
 	},
 	"name": "@visns-studio/visns-components",
-	"version": "1.4.9",
+	"version": "1.4.11",
 	"description": "Various packages to assist in the development of our Custom Applications.",
 	"main": "index.js",
 	"devDependencies": {},