@visns-studio/visns-components 1.4.12 → 1.4.14

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

@@ -318,12 +318,14 @@ const DataGrid = ({
 	}, []);
 
 	const sortTrigger = () => {
-		let _url = form.url.replace("/ajax", "");
+		const url = form.url.replace("/ajax", "");
+		console.info(url);
+		const newState = {
+			form: form,
+		};
 
-		navigate(_url + "/sort", {
-			state: {
-				form: form,
-			},
+		navigate(`${url}/sort`, {
+			state: newState,
 		});
 	};
 
@@ -420,8 +422,8 @@ const DataGrid = ({
 			let date;
 			let filterEditor = null;
 			let filterEditorProps = null;
+			let fileUrl = null;
 			let icons = [];
-			let match;
 			let relationName;
 			let selectedDataSource = null;
 			let stage;
@@ -702,6 +704,30 @@ const DataGrid = ({
 							}
 						},
 					};
+				case "image":
+					return {
+						...commonProps,
+						name: column.id,
+						render: ({ data }) => {
+							if (data && data[column.id]) {
+								const fileUrl =
+									data[column.id][0]?.file_url ||
+									data[column.id]?.file_url;
+
+								if (fileUrl) {
+									return (
+										<span>
+											{parse(
+												`<img width="150" src="${fileUrl}" />`
+											)}
+										</span>
+									);
+								}
+							}
+
+							return null;
+						},
+					};
 				case "json":
 					return {
 						...commonProps,

package/components/cms/visns-field.jsx

@@ -1,17 +1,62 @@
 import React, { useState, useEffect, useRef } from "react";
-import CustomFetch from "../crm/visns-fetch";
-import Select from "../crm/visns-select";
-import MultiSelect from "../crm/visns-multi-select";
-import VisnsAutocomplete from "../crm/visns-autocomplete";
 import DatePicker from "react-datepicker";
 import _ from "lodash";
-import ReactQuill from "react-quill";
+import ReactQuill, { Quill } from "react-quill";
+import ImageUploader from "quill-image-uploader";
 import Toggle from "react-toggle";
 import { NumericFormat, PatternFormat } from "react-number-format";
 import { motion } from "framer-motion";
+import { toast } from "react-toastify";
+
 import "react-toggle/style.css";
 import "react-quill/dist/quill.snow.css";
 import "react-datepicker/dist/react-datepicker.css";
+import "quill-image-uploader/dist/quill.imageUploader.min.css";
+
+import CustomFetch from "../crm/visns-fetch";
+import Select from "../crm/visns-select";
+import MultiSelect from "../crm/visns-multi-select";
+import VisnsAutocomplete from "../crm/visns-autocomplete";
+
+Quill.register("modules/imageUploader", ImageUploader);
+
+const modules = {
+	toolbar: {
+		container: [
+			[{ header: [1, 2, false] }],
+			["bold", "italic", "underline", "strike", "blockquote"],
+			[{ list: "ordered" }, { list: "bullet" }],
+			["link", "image"],
+			["clean"],
+		],
+	},
+	imageUploader: {
+		upload: async (file) => {
+			return new Promise((resolve, reject) => {
+				Vapor.store(file, {
+					progress: (progress) => {
+						console.info(progress * 100);
+					},
+				}).then((response) => {
+					CustomFetch(
+						"/ajax/file/upload",
+						"POST",
+						response,
+						function (res) {
+							if (res.error === "") {
+								resolve(res.path);
+							} else {
+								toast.error(
+									res.error !== undefined ? res.error : ""
+								);
+							}
+						}
+					);
+				});
+			});
+		},
+	},
+};
 
 const Field = ({
 	settings,
@@ -25,41 +70,11 @@ const Field = ({
 	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 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) {
@@ -624,12 +639,6 @@ const Field = ({
 					case "richeditor":
 						htmlContainer = (
 							<>
-								<input
-									type="file"
-									style={{ display: "none" }}
-									ref={quillFileInputRef}
-									onChange={handleImageUpload}
-								/>
 								<ReactQuill
 									theme="snow"
 									name={settings.id}

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

@@ -569,8 +569,8 @@ const DataGrid = forwardRef(
 				let date;
 				let filterEditor = null;
 				let filterEditorProps = null;
+				let fileUrl = null;
 				let icons = [];
-				let match;
 				let relationName;
 				let selectedDataSource = null;
 				let stage;
@@ -868,6 +868,30 @@ const DataGrid = forwardRef(
 								}
 							},
 						};
+					case "image":
+						return {
+							...commonProps,
+							name: column.id,
+							render: ({ data }) => {
+								if (data && data[column.id]) {
+									const fileUrl =
+										data[column.id][0]?.file_url ||
+										data[column.id]?.file_url;
+
+									if (fileUrl) {
+										return (
+											<span>
+												{parse(
+													`<img width="150" src="${fileUrl}" />`
+												)}
+											</span>
+										);
+									}
+								}
+
+								return null;
+							},
+						};
 					case "json":
 						return {
 							...commonProps,

package/package.json

@@ -10,6 +10,7 @@
 		"lodash": "^4.17.21",
 		"moment": "^2.29.4",
 		"numeral": "^2.0.6",
+		"quill-image-uploader": "^1.3.0",
 		"react-confirm-alert": "^3.0.6",
 		"react-datepicker": "^4.14.0",
 		"react-dropzone": "^14.2.3",
@@ -34,7 +35,7 @@
 		"react-dom": "^17.0.1"
 	},
 	"name": "@visns-studio/visns-components",
-	"version": "1.4.12",
+	"version": "1.4.14",
 	"description": "Various packages to assist in the development of our Custom Applications.",
 	"main": "index.js",
 	"devDependencies": {},