@visns-studio/visns-components 1.0.18 → 1.0.20

package/components/crm/visns-autocomplete.jsx

@@ -1,147 +1,147 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import AwesomeDebouncePromise from 'awesome-debounce-promise';
-import { ToggleOffFill, ToggleOnFill } from 'akar-icons';
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import AwesomeDebouncePromise from "awesome-debounce-promise";
+import { ToggleOffFill, ToggleOnFill } from "akar-icons";
 
 const VisnsAutocomplete = (props) => {
-    const { api, country, onSelect, setFormData, field, inputValue } = props;
-    const [search, setSearch] = useState('');
-    const [results, setResults] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [overwrite, setOverwrite] = useState(false);
-
-    const performSearch = (id, value) => {
-        if (id > 0) {
-            if (value === '') {
-                setResults([]);
-                setIsLoading(false);
-            } else {
-                let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
-
-                if (country && country !== '') {
-                    url += `&country=${country}`;
-                }
-
-                if (import.meta.env.hasOwnProperty('VITE_MAPBOX_PROXIMITY')) {
-                    url += `&proximity=${
-                        import.meta.env.VITE_MAPBOX_PROXIMITY
-                    }`;
-                }
-
-                axios
-                    .get(url)
-                    .then((response) => {
-                        setResults(response.data.features);
-                        setIsLoading(false);
-                    })
-                    .catch(function (error) {
-                        console.log(error);
-                    });
-            }
-        }
-    };
-
-    const handleSearchChange = async (e) => {
-        if (e) {
-            setSearch(e.target.value);
-            setFormData((prevState) => ({
-                ...prevState,
-                [field]: e.target.value,
-            }));
-
-            if (overwrite === false) {
-                setIsLoading(true);
-            }
-
-            if (overwrite === false) {
-                await performSearchDebounced(1, e.target.value);
-            }
-        }
-    };
-
-    const performSearchDebounced = AwesomeDebouncePromise(performSearch, 500, {
-        key: (id, value) => id,
-    });
-
-    const handleItemClicked = (place) => {
-        setSearch(place.address + ' ' + place.text);
-        setResults([]);
-        onSelect(place, field);
-    };
-
-    const handleOverwrite = () => {
-        if (overwrite === false) {
-            setOverwrite(true);
-            setResults([]);
-        } else {
-            setOverwrite(false);
-        }
-    };
-
-    useEffect(() => {
-        if (overwrite === false) {
-            if (search !== '') {
-                performSearch();
-            }
-        }
-    }, [overwrite]);
-
-    useEffect(() => {
-        setSearch(inputValue);
-    }, [inputValue]);
-
-    return (
-        <>
-            <div className="AutocompletePlace">
-                <input
-                    className="AutocompletePlace-input"
-                    style={{ height: '53px' }}
-                    type="text"
-                    value={search || ''}
-                    onChange={handleSearchChange}
-                    placeholder="Type an address"
-                    autoComplete="off"
-                />
-                {overwrite === false ? (
-                    <ToggleOffFill
-                        data-tooltip-id="system-tooltip"
-                        data-tooltip-content="Disable Autocomplete"
-                        strokeWidth={2}
-                        size={24}
-                        onClick={handleOverwrite}
-                    />
-                ) : (
-                    <ToggleOnFill
-                        data-tooltip-id="system-tooltip"
-                        data-tooltip-content="Enable Autocomplete"
-                        strokeWidth={2}
-                        size={24}
-                        onClick={handleOverwrite}
-                        className="toggleActive"
-                    />
-                )}
-                {results.length > 0 ? (
-                    <ul className="AutocompletePlace-results">
-                        {results.map((place) => (
-                            <li
-                                key={place.id}
-                                className="AutocompletePlace-items"
-                                onClick={() => handleItemClicked(place)}
-                            >
-                                {place.place_name}
-                            </li>
-                        ))}
-
-                        {isLoading && (
-                            <li className="AutocompletePlace-items">
-                                Loading...
-                            </li>
-                        )}
-                    </ul>
-                ) : null}
-            </div>
-        </>
-    );
+	const { api, country, onSelect, setFormData, field, inputValue } = props;
+	const [search, setSearch] = useState("");
+	const [results, setResults] = useState([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [overwrite, setOverwrite] = useState(false);
+
+	const performSearch = (id, value) => {
+		if (id > 0) {
+			if (value === "") {
+				setResults([]);
+				setIsLoading(false);
+			} 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 (import.meta.env.hasOwnProperty("VITE_MAPBOX_PROXIMITY")) {
+					url += `&proximity=${
+						import.meta.env.VITE_MAPBOX_PROXIMITY
+					}`;
+				}
+
+				axios
+					.get(url)
+					.then((response) => {
+						setResults(response.data.features);
+						setIsLoading(false);
+					})
+					.catch(function (error) {
+						console.log(error);
+					});
+			}
+		}
+	};
+
+	const handleSearchChange = async (e) => {
+		if (e) {
+			setSearch(e.target.value);
+			setFormData((prevState) => ({
+				...prevState,
+				[field]: e.target.value,
+			}));
+
+			if (overwrite === false) {
+				setIsLoading(true);
+			}
+
+			if (overwrite === false) {
+				await performSearchDebounced(1, e.target.value);
+			}
+		}
+	};
+
+	const performSearchDebounced = AwesomeDebouncePromise(performSearch, 500, {
+		key: (id, value) => id,
+	});
+
+	const handleItemClicked = (place) => {
+		setSearch(place.address + " " + place.text);
+		setResults([]);
+		onSelect(place, field);
+	};
+
+	const handleOverwrite = () => {
+		if (overwrite === false) {
+			setOverwrite(true);
+			setResults([]);
+		} else {
+			setOverwrite(false);
+		}
+	};
+
+	useEffect(() => {
+		if (overwrite === false) {
+			if (search !== "") {
+				performSearch();
+			}
+		}
+	}, [overwrite]);
+
+	useEffect(() => {
+		setSearch(inputValue);
+	}, [inputValue]);
+
+	return (
+		<>
+			<div className="AutocompletePlace">
+				<input
+					className="AutocompletePlace-input"
+					style={{ height: "53px" }}
+					type="text"
+					value={search || ""}
+					onChange={handleSearchChange}
+					placeholder="Type an address"
+					autoComplete="off"
+				/>
+				{overwrite === false ? (
+					<ToggleOffFill
+						data-tooltip-id="system-tooltip"
+						data-tooltip-content="Disable Autocomplete"
+						strokeWidth={2}
+						size={24}
+						onClick={handleOverwrite}
+					/>
+				) : (
+					<ToggleOnFill
+						data-tooltip-id="system-tooltip"
+						data-tooltip-content="Enable Autocomplete"
+						strokeWidth={2}
+						size={24}
+						onClick={handleOverwrite}
+						className="toggleActive"
+					/>
+				)}
+				{results.length > 0 ? (
+					<ul className="AutocompletePlace-results">
+						{results.map((place) => (
+							<li
+								key={place.id}
+								className="AutocompletePlace-items"
+								onClick={() => handleItemClicked(place)}
+							>
+								{place.place_name}
+							</li>
+						))}
+
+						{isLoading && (
+							<li className="AutocompletePlace-items">
+								Loading...
+							</li>
+						)}
+					</ul>
+				) : null}
+			</div>
+		</>
+	);
 };
 
 export default VisnsAutocomplete;

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

@@ -349,34 +349,18 @@ const DataGrid = (props) => {
 	}, []);
 
 	useEffect(() => {
-		let relationName;
-
 		const renderColumn = (column) => {
+			let nameFrom;
+
 			switch (column.type) {
 				case "created_by":
-					 relationName = column.id.reduce(
-						(acc, id) => acc + `${id}.`,
-						""
-					);
-					relationName += column.nameFrom;
-
 					return {
-						name: relationName,
+						name: "audits.name",
 						header: column.label,
 						defaultFlex: 1,
 						link: column.link ? column.link : {},
 						render: ({ data }) => {
-							let value = column.id.reduce((acc, id) => {
-								if (acc === "") {
-									return data[id];
-								} else {
-									return acc[id];
-								}
-							}, "");
-
-							if (value && value.name) {
-								value = value.name
-							}
+							let value = data.audits[0].user.name;
 
 							return <span>{value}</span>;
 						},
@@ -452,14 +436,39 @@ const DataGrid = (props) => {
 							}
 						},
 					};
-					case "number":
-						return {
-							name: column.id,
-							header: column.label,
-							defaultFlex: 1,
-							link: column.link ? column.link : {},
-							type: "number",
-						};
+				case "icons":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						render: ({ data }) => {
+							let icons = [];
+
+							if (column.icons && column.icons.length > 0) {
+								column.icons.forEach((icon) => {
+									icons.push(
+										<img
+											src={icon.url}
+											alt={icon.name}
+											data-tooltip-id="system-tooltip"
+											data-tooltip-content={icon.name}
+										/>
+									);
+								});
+							}
+
+							return <span>{icons}</span>;
+						},
+					};
+				case "number":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						type: "number",
+					};
 				case "option":
 					return {
 						name: column.id,
@@ -473,8 +482,18 @@ const DataGrid = (props) => {
 							return <span>{data}</span>;
 						},
 					};
+				case "placeholder":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						render: ({ data }) => {
+							return <span>{column.placeholder}</span>;
+						},
+					};
 				case "relation":
-					 relationName = column.id.reduce(
+					let relationName = column.id.reduce(
 						(acc, id) => acc + `${id}.`,
 						""
 					);
@@ -495,7 +514,18 @@ const DataGrid = (props) => {
 							}, "");
 
 							if (value) {
-								value = value[column.nameFrom];
+								if (Array.isArray(column.nameFrom)) {
+									let nameFrom = column.nameFrom.reduce(
+										(acc, id) => {
+											return acc[id];
+										},
+										""
+									);
+
+									value = value[nameFrom];
+								} else {
+									value = value[column.nameFrom];
+								}
 							}
 
 							return <span>{value}</span>;
@@ -534,6 +564,22 @@ const DataGrid = (props) => {
 							return <span>{data}</span>;
 						},
 					};
+				case "url":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						render: ({ data }) => {
+							return (
+								<span>
+									<a href={data} target="_blank">
+										Link
+									</a>
+								</span>
+							);
+						},
+					};
 				default:
 					return {
 						name: column.id,

package/package.json

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