@visns-studio/visns-components 1.0.1-2.1 → 1.0.2

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

@@ -1,597 +0,0 @@
-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 "../crm/visns-fetch";
-import Form from "./visns-form";
-
-const loadData = async ({ skip, limit, sortInfo }, 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 } = 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
-							]
-						}`,
-						{
-							state: {
-								form: form,
-							},
-						}
-					);
-				}
-			} 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: "",
-				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={() => {
-						let _url = form.url.replace("/ajax", "");
-
-						navigate(_url + "/create", {
-							state: {
-								form: form,
-							},
-						});
-					}}
-				>
-					<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;