@visns-studio/visns-components 1.4.8 → 1.4.10

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]);
 		}
 	}, []);
 
@@ -544,7 +567,13 @@ const DataGrid = ({
 						filterEditor: filterEditor,
 						filterEditorProps: filterEditorProps,
 						render: ({ data }) => {
-							if (data && data[column.id]) {
+							if (
+								data &&
+								data[column.id] &&
+								moment(data[column.id]).isValid() &&
+								moment(data[column.id]).format("YYYY-MM-DD") !==
+									"1970-01-01"
+							) {
 								const value = moment(data[column.id]).format(
 									column.format || "DD-MM-YYYY"
 								);
@@ -593,7 +622,13 @@ const DataGrid = ({
 						filterEditor: filterEditor,
 						filterEditorProps: filterEditorProps,
 						render: ({ data }) => {
-							if (data && data[column.id]) {
+							if (
+								data &&
+								data[column.id] &&
+								moment(data[column.id]).isValid() &&
+								moment(data[column.id]).format("YYYY-MM-DD") !==
+									"1970-01-01"
+							) {
 								data = moment(data[column.id]).format(
 									column.format
 										? column.format
@@ -986,7 +1021,13 @@ const DataGrid = ({
 						...commonProps,
 						name: column.id,
 						render: ({ data }) => {
-							if (data && data[column.id]) {
+							if (
+								data &&
+								data[column.id] &&
+								moment(data[column.id]).isValid() &&
+								moment(data[column.id]).format("YYYY-MM-DD") !==
+									"1970-01-01"
+							) {
 								data = moment(data[column.id]).format(
 									column.format ? column.format : "hh:mm A"
 								);
@@ -997,6 +1038,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,

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-autocomplete.jsx

@@ -4,7 +4,8 @@ import AwesomeDebouncePromise from "awesome-debounce-promise";
 import { ToggleOffFill, ToggleOnFill } from "akar-icons";
 
 const VisnsAutocomplete = (props) => {
-	const { api, country, onSelect, setFormData, field, inputValue } = props;
+	const { api, country, field, inputValue, onSelect, setFormData, style } =
+		props;
 	const [search, setSearch] = useState("");
 	const [results, setResults] = useState([]);
 	const [isLoading, setIsLoading] = useState(false);
@@ -18,8 +19,8 @@ const VisnsAutocomplete = (props) => {
 			} else {
 				let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
 
-				if (import.meta.env.VITE_MAPBOX_COUNTRY) {
-					url += `&country=${import.meta.env.VITE_MAPBOX_COUNTRY}`;
+				if (country) {
+					url += `&country=${country}`;
 				}
 
 				if (import.meta.env.hasOwnProperty("VITE_MAPBOX_PROXIMITY")) {
@@ -95,7 +96,12 @@ const VisnsAutocomplete = (props) => {
 			<div className="AutocompletePlace">
 				<input
 					className="AutocompletePlace-input"
-					style={{ height: "53px" }}
+					style={{
+						height:
+							style && style.multi_select_height
+								? style.multi_select_height
+								: "52px",
+					}}
 					type="text"
 					value={search || ""}
 					onChange={handleSearchChange}

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 (
@@ -720,7 +741,14 @@ const DataGrid = forwardRef(
 							filterEditor: filterEditor,
 							filterEditorProps: filterEditorProps,
 							render: ({ data }) => {
-								if (data && data[column.id]) {
+								if (
+									data &&
+									data[column.id] &&
+									moment(data[column.id]).isValid() &&
+									moment(data[column.id]).format(
+										"YYYY-MM-DD"
+									) !== "1970-01-01"
+								) {
 									const value = moment(
 										data[column.id]
 									).format(column.format || "DD-MM-YYYY");
@@ -769,7 +797,14 @@ const DataGrid = forwardRef(
 							filterEditor: filterEditor,
 							filterEditorProps: filterEditorProps,
 							render: ({ data }) => {
-								if (data && data[column.id]) {
+								if (
+									data &&
+									data[column.id] &&
+									moment(data[column.id]).isValid() &&
+									moment(data[column.id]).format(
+										"YYYY-MM-DD"
+									) !== "1970-01-01"
+								) {
 									data = moment(data[column.id]).format(
 										column.format
 											? column.format
@@ -1186,7 +1221,14 @@ const DataGrid = forwardRef(
 							...commonProps,
 							name: column.id,
 							render: ({ data }) => {
-								if (data && data[column.id]) {
+								if (
+									data &&
+									data[column.id] &&
+									moment(data[column.id]).isValid() &&
+									moment(data[column.id]).format(
+										"YYYY-MM-DD"
+									) !== "1970-01-01"
+								) {
 									data = moment(data[column.id]).format(
 										column.format
 											? column.format
@@ -1445,6 +1487,7 @@ const DataGrid = forwardRef(
 						updateForm={setFormData}
 						columnId={formId}
 						childDropdownCallback={childDropdownCallback}
+						style={style}
 					/>
 				</Popup>
 			</>

package/components/crm/visns-field.jsx

@@ -15,25 +15,25 @@ import "react-toggle/style.css";
 import "react-quill/dist/quill.snow.css";
 import "react-datepicker/dist/react-datepicker.css";
 
-function Field(props) {
+function Field({
+	childDropdownCallback,
+	inputValue,
+	inputClass,
+	onChange,
+	onChangeDate,
+	onChangeSelect,
+	onChangeRicheditor,
+	onChangeToggle,
+	onChangeNumberFormat,
+	autocompleteCallback,
+	setFormData,
+	settings,
+	style,
+}) {
 	const [options, setOptions] = useState([]);
 	const [dataOptions, setDataOptions] = useState([]);
 	const [formItemStyle, setFormItemStyle] = useState({});
 	const [formItemClass, setFormItemClass] = useState("formItem");
-	const {
-		settings,
-		inputValue,
-		inputClass,
-		childDropdownCallback,
-		onChange,
-		onChangeDate,
-		onChangeSelect,
-		onChangeRicheditor,
-		onChangeToggle,
-		onChangeNumberFormat,
-		autocompleteCallback,
-		setFormData,
-	} = props;
 
 	useEffect(() => {
 		switch (settings.type) {
@@ -426,14 +426,13 @@ function Field(props) {
 						case "address":
 							htmlContainer = (
 								<VisnsAutocomplete
-									onSelect={(place) =>
-										autocompleteCallback(place)
-									}
-									field={settings.id}
-									setFormData={setFormData}
 									api="pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg"
-									inputValue={inputValue}
 									country="AU"
+									field={settings.id}
+									inputValue={inputValue}
+									onSelect={autocompleteCallback}
+									setFormData={setFormData}
+									style={style}
 								/>
 							);
 							break;
@@ -481,6 +480,7 @@ function Field(props) {
 									}
 									options={settings.options}
 									dataOptions={dataOptions}
+									style={style}
 								/>
 							);
 							break;
@@ -500,6 +500,7 @@ function Field(props) {
 									}
 									options={options}
 									dataOptions={dataOptions}
+									style={style}
 								/>
 							);
 							break;
@@ -612,6 +613,7 @@ function Field(props) {
 										? settings.format
 										: "dd-MM-yyyy"
 								}
+								isClearable
 								className={inputClass[settings.id]}
 								selected={inputValue || ""}
 								showMonthDropdown
@@ -631,6 +633,7 @@ function Field(props) {
 										? settings.format
 										: "dd-MM-yyyy hh:mm aa"
 								}
+								isClearable
 								showTimeSelect
 								className={inputClass[settings.id]}
 								selected={inputValue || null}
@@ -652,6 +655,7 @@ function Field(props) {
 										? settings.format
 										: "hh:mm aa"
 								}
+								isClearable
 								showTimeSelect
 								showTimeSelectOnly
 								timeIntervals={15}