@visns-studio/visns-components 1.0.0

package/components/visns-data-grid.jsx

@@ -0,0 +1,598 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import debounce from "lodash.debounce";
+import moment from "moment";
+import numeral from "numeral";
+import Popup from "reactjs-popup";
+import ReactDataGrid from "@inovua/reactdatagrid-community";
+import { confirmAlert } from "react-confirm-alert";
+import { toast } from "react-toastify";
+import {
+	Backspace,
+	Check,
+	Clock,
+	CloudDownload,
+	Edit,
+	Ribbon,
+	Search,
+} from "akar-icons";
+
+import "@inovua/reactdatagrid-community/index.css";
+import "react-confirm-alert/src/react-confirm-alert.css";
+
+import CustomFetch from "./visns-fetch";
+import Form from "./visns-form";
+
+const loadData = async (
+	{ skip, limit, sortInfo, currentData, filterValue, groupBy },
+	search,
+	ajaxSetting
+) => {
+	const url = ajaxSetting.url;
+
+	let page = Math.floor(skip / limit) + 1;
+	let params = { page, sortInfo, take: limit, search: search };
+
+	if (sortInfo) {
+		params.sortBy = sortInfo.name;
+		params.sort = sortInfo.dir === 1 ? "asc" : "desc";
+	}
+
+	if (ajaxSetting && ajaxSetting.where) {
+		params.where = ajaxSetting.where;
+	}
+
+	try {
+		const response = await axios.post(url, params);
+		const { data, total } = response.data;
+		return { data, count: total };
+	} catch (error) {
+		console.error("Error fetching data:", error);
+		return { data: [], count: 0 };
+	}
+};
+
+const DataGrid = (props) => {
+	const {
+		ajaxSetting,
+		form,
+		columns,
+		settings,
+		tableFilters,
+		historySearch,
+		historyUrl,
+	} = props;
+	const navigate = useNavigate();
+
+	/** Modal States */
+	const [formData, setFormData] = useState(form);
+	const [formType, setFormType] = useState("");
+	const [formId, setFormId] = useState(0);
+	const [modalShow, setModalShow] = useState(false);
+
+	/** Modal Functions */
+	const childDropdownCallback = (data) => {
+		let _form = { ...formData };
+
+		if (formData.fields.length > 0) {
+			formData.fields.forEach((a, b) => {
+				if (a.id === data.id) {
+					_form.fields[b].options = data.data;
+				}
+			});
+		}
+
+		setFormData(_form);
+	};
+
+	const modalOpen = (formType, formId) => {
+		setModalShow(true);
+		setFormType(formType);
+		setFormId(formId);
+	};
+
+	const modalClose = () => {
+		setModalShow(false);
+	};
+
+	/** Table States */
+	const [dataReload, setDataReload] = useState(0);
+	const [dSearch, setDSearch] = useState("");
+	const data = useCallback(
+		(params) => loadData(params, dSearch, ajaxSetting),
+		[ajaxSetting, dataReload, dSearch]
+	);
+	const [gridColumns, setGridColumns] = useState([]);
+	const [gridHeight, setGridHeight] = useState(550);
+	const limit = ajaxSetting.take || 10;
+	const [search, setSearch] = useState("");
+	const sortInfo =
+		ajaxSetting.sortBy && ajaxSetting.sort
+			? {
+					name: ajaxSetting.sortBy,
+					dir: ajaxSetting.sort === "asc" ? 1 : -1,
+			  }
+			: null;
+
+	/** Table Functions */
+	const handleChangeSearch = (e) => {
+		const { value } = e.target;
+		setSearch(value);
+	};
+
+	const handleSettingClick = (s, d) => {
+		switch (s.id) {
+			case "update":
+				modalOpen("update", d.id);
+				break;
+			case "delete":
+				confirmAlert({
+					title: "Delete Item",
+					message: `Are you sure you want to delete ${
+						d.name ? d.name : d.label ? d.label : "this item"
+					}?`,
+					buttons: [
+						{
+							label: "Yes",
+							onClick: () =>
+								CustomFetch(
+									form.url + "/" + d[form.primaryKey],
+									"DELETE",
+									{},
+									(result) => {
+										if (result.error === "") {
+											const min = 0;
+											const max = 999999999;
+											const randomNumber = Math.floor(
+												Math.random() *
+													(max - min + 1) +
+													min
+											);
+
+											setDataReload(randomNumber);
+
+											toast.success(
+												`The selected item has been deleted.`
+											);
+										} else {
+											toast.error(String(result.error));
+										}
+									}
+								),
+						},
+						{
+							label: "No",
+							onClick: () => close(),
+						},
+					],
+				});
+				break;
+			default:
+				confirmAlert({
+					title: s.title,
+					message: "",
+					buttons: [
+						{
+							label: "Yes",
+							onClick: () =>
+								CustomFetch(
+									s.url + "/" + d[form.primaryKey],
+									s.method,
+									{},
+									function (result) {
+										if (result.error === "") {
+											const min = 0;
+											const max = 999999999;
+											const randomNumber = Math.floor(
+												Math.random() *
+													(max - min + 1) +
+													min
+											);
+
+											setDataReload(randomNumber);
+
+											toast.success(String(s.title));
+										} else {
+											toast.error(String(result.error));
+										}
+									}
+								),
+						},
+						{
+							label: "No",
+							onClick: () => close(),
+						},
+					],
+				});
+				break;
+		}
+	};
+
+	const handleReload = () => {
+		setDataReload(dataReload + 1);
+	};
+
+	const onRowClick = useCallback((rowProps, event) => {
+		const cellElement = event.target.closest(".InovuaReactDataGrid__cell");
+		const columnIndex = Array.from(cellElement.parentNode.children).indexOf(
+			cellElement
+		);
+
+		if (columnIndex === rowProps.columns.length - 1) {
+		} else {
+			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
+							]
+						}`
+					);
+				}
+			} else {
+				modalOpen("update", rowProps.data[form.primaryKey]);
+			}
+		}
+	}, []);
+
+	const onRenderRow = useCallback((rowProps) => {
+		// save the original handlers to be called later
+		const { onClick } = rowProps;
+
+		rowProps.onClick = (event) => {
+			onRowClick(rowProps, event);
+			if (onClick) {
+				onClick(event);
+			}
+		};
+
+		// add a CSS class to rowProps
+		rowProps.className = "vs-datagrid--row";
+	}, []);
+
+	/** Table Hooks */
+	useEffect(() => {
+		const delayedSetDSearch = debounce(() => {
+			setDSearch(search);
+		}, 300); // Adjust the delay (in milliseconds) according to your needs
+
+		delayedSetDSearch();
+
+		return delayedSetDSearch.cancel; // Cleanup the debounce timer on unmount
+	}, [search, setDSearch]);
+
+	const renderSetting = (s, d) => {
+		let iconStyle = {};
+
+		if (s.active) {
+			if (
+				d.hasOwnProperty(s.active.id) &&
+				!s.active.hasOwnProperty("type") &&
+				d[s.active.id] === s.active.value
+			) {
+				iconStyle = {
+					color: s.active.colour,
+				};
+			} else if (s.active.hasOwnProperty("type")) {
+				switch (s.active.type) {
+					case "greater":
+						if (d[s.active.id] > s.active.value) {
+							iconStyle = {
+								color: s.active.colour,
+							};
+						}
+						break;
+					case "not null":
+						if (d[s.active.id] !== null) {
+							iconStyle = {
+								color: s.active.colour,
+							};
+						}
+						break;
+					default:
+						break;
+				}
+			}
+		}
+
+		const getIconComponent = (IconComponent) => (
+			<IconComponent
+				data-tooltip-id="system-tooltip"
+				data-tooltip-content={
+					iconStyle && iconStyle.color ? s.active.title : s.title
+				}
+				strokeWidth={2}
+				size={18}
+				className="tdaction"
+				style={iconStyle}
+			/>
+		);
+
+		switch (s.id) {
+			case "complete":
+				return getIconComponent(Check);
+			case "delete":
+				return getIconComponent(Backspace);
+			case "primary":
+				return getIconComponent(Ribbon);
+			case "ssa":
+				return getIconComponent(Clock);
+			case "update":
+				return getIconComponent(Edit);
+			default:
+				return null;
+		}
+	};
+
+	const renderColumnContextMenu = useCallback((menuProps, { cellProps }) => {
+		const filteredItems = menuProps.items
+			.map((item, key) => {
+				if (key >= 6 && key <= 9) {
+					return null; // Skip items with keys 6-9 [lock columns setting]
+				}
+				return item;
+			})
+			.filter(Boolean); // Filter out any null items
+
+		menuProps.items = filteredItems;
+	}, []);
+
+	useEffect(() => {
+		const renderColumn = (column) => {
+			switch (column.type) {
+				case "currency":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						render: ({ data }) => {
+							if (data) {
+								data = numeral(data[column.id]).format(
+									"$0,0.00"
+								);
+							}
+							return <span>{data}</span>;
+						},
+					};
+				case "date":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						render: ({ data }) => {
+							if (data && data[column.id]) {
+								data = moment(data[column.id]).format(
+									column.format ? column.format : "DD-MM-YYYY"
+								);
+							}
+							return <span>{data}</span>;
+						},
+					};
+				case "datetime":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						render: ({ data }) => {
+							if (data && data[column.id]) {
+								data = moment(data[column.id]).format(
+									column.format
+										? column.format
+										: "DD-MM-YYYY hh:mm A"
+								);
+							}
+							return <span>{data}</span>;
+						},
+					};
+				case "file":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						render: ({ data }) => {
+							if (data) {
+								return (
+									<span>
+										<CloudDownload
+											data-tooltip-id="system-tooltip"
+											data-tooltip-content="Download File"
+											strokeWidth={2}
+											size={18}
+											className="tdaction"
+										/>
+									</span>
+								);
+							} else {
+								return null;
+							}
+						},
+					};
+				case "option":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						render: ({ data }) => {
+							if (data) {
+								data = column.options[data[column.id]];
+							}
+							return <span>{data}</span>;
+						},
+					};
+				case "relation":
+					let relationName = column.id.reduce(
+						(acc, id) => acc + `${id}.`,
+						""
+					);
+					relationName += column.nameFrom;
+
+					return {
+						name: relationName,
+						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 = value[column.nameFrom];
+							}
+
+							return <span>{value}</span>;
+						},
+					};
+				case "stage":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						render: ({ data }) => {
+							let stage = "";
+
+							column.keyIds.forEach((a, b) => {
+								if (data[a] === 1) {
+									stage = column.valueIds[b];
+								}
+							});
+
+							return <span>{stage}</span>;
+						},
+					};
+				case "time":
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+						render: ({ data }) => {
+							if (data && data[column.id]) {
+								data = moment(data[column.id]).format(
+									column.format ? column.format : "hh:mm A"
+								);
+							}
+							return <span>{data}</span>;
+						},
+					};
+				default:
+					return {
+						name: column.id,
+						header: column.label,
+						defaultFlex: 1,
+						link: column.link ? column.link : {},
+					};
+			}
+		};
+
+		const newColumns = columns.map(renderColumn);
+
+		if (settings.length > 0) {
+			newColumns.push({
+				name: "setting",
+				header: "Action",
+				defaultWidth: 100,
+				textAlign: "center",
+				render: ({ data }) => {
+					return (
+						<div className="tdactions">
+							{settings.map((setting) => (
+								<span
+									key={`setting-${setting.id}`}
+									onClick={(e) => {
+										e.preventDefault();
+										e.stopPropagation();
+										handleSettingClick(setting, data);
+									}}
+								>
+									{renderSetting(setting, data)}
+								</span>
+							))}
+						</div>
+					);
+				},
+			});
+		}
+
+		setGridColumns(newColumns);
+	}, [columns]);
+
+	// Data Grid Styling
+	const gridStyle = { minHeight: gridHeight };
+
+	return (
+		<>
+			<div className="filterInput--alt">
+				<div className="icon-search">
+					<Search strokeWidth={2} size={18} />
+				</div>
+				<input
+					type="text"
+					placeholder="Search"
+					value={search}
+					onChange={handleChangeSearch}
+				/>
+			</div>
+			<div className="filterAction--alt">
+				<button
+					className="btn"
+					onClick={() => {
+						modalOpen("create", 0);
+					}}
+				>
+					<div className="icon-plus"></div> Create
+				</button>
+			</div>
+			<ReactDataGrid
+				columns={gridColumns}
+				dataSource={data}
+				defaultLimit={limit}
+				defaultSortInfo={sortInfo}
+				enableColumnAutosize={false}
+				idProperty="uniqueId"
+				style={gridStyle}
+				onRenderRow={onRenderRow}
+				pagination
+				renderColumnContextMenu={renderColumnContextMenu}
+			/>
+			<Popup
+				open={modalShow}
+				onClose={modalClose}
+				closeOnDocumentClick={false}
+			>
+				<Form
+					closeModal={modalClose}
+					fetchTable={handleReload}
+					formSettings={formData}
+					formType={formType}
+					updateForm={setFormData}
+					columnId={formId}
+					childDropdownCallback={childDropdownCallback}
+				/>
+			</Popup>
+		</>
+	);
+};
+
+export default DataGrid;

package/components/visns-download.jsx

@@ -0,0 +1,102 @@
+import _ from 'lodash';
+import axios from 'axios';
+import { trackPromise } from 'react-promise-tracker';
+
+const CustomDownload = (
+    url,
+    method,
+    formData,
+    successCallback,
+    errorCallback
+) => {
+    let baseUrl = '';
+    let fileUpload = false;
+    let body;
+    let headers = {};
+    let options = {};
+
+    if (!_.isEmpty(formData)) {
+        Object.keys(formData).forEach((item) => {
+            if (formData[item] !== undefined) {
+                if (formData[item] instanceof File && formData[item] !== null) {
+                    fileUpload = true;
+                }
+            }
+        });
+    }
+
+    if (method.toUpperCase() === 'PUT' || method.toUpperCase() === 'PATCH') {
+        if (fileUpload === false) {
+            body = {
+                ...body,
+                _method: method,
+            };
+        }
+    }
+
+    if (fileUpload === false) {
+        body = JSON.stringify(formData);
+        headers = {
+            ...headers,
+            'Content-Type': 'application/json',
+        };
+    } else {
+        body = new FormData();
+
+        headers = {
+            ...headers,
+            'Content-Type': 'multipart/form-data',
+            contentType: false,
+            processData: false,
+        };
+
+        if (!_.isEmpty(formData)) {
+            Object.keys(formData).forEach((item) => {
+                body.append(item, formData[item]);
+            });
+        }
+
+        if (
+            method.toUpperCase() === 'PUT' ||
+            method.toUpperCase() === 'PATCH'
+        ) {
+            if (fileUpload === false) {
+            } else {
+                body.append('_method', method);
+                method = 'POST';
+            }
+        }
+    }
+
+    options = {
+        method: method,
+        data: body,
+        headers: headers,
+        url: baseUrl + url,
+        responseType: 'blob',
+    };
+
+    trackPromise(
+        axios(options).then(
+            (result) => {
+                successCallback(result.data);
+            },
+            (error) => {
+                if (
+                    error.response.hasOwnProperty('data') &&
+                    error.response.data.hasOwnProperty('message') &&
+                    error.response.data.message !== ''
+                ) {
+                    if (error.response.data.message === 'Unauthenticated.') {
+                        localStorage.clear();
+                    }
+                    errorCallback(error.response.data.message);
+                } else {
+                    errorCallback(error);
+                }
+            }
+        )
+    );
+};
+
+export default CustomDownload;