@visns-studio/visns-components 1.0.4 → 1.0.5

package/components/cms/sorting/item.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SortableElement } from 'react-sortable-hoc';
+import { ChevronVertical } from 'akar-icons';
+
+const SortableItem = (props) => {
+    const { value, index } = props;
+
+    return (
+        <li>
+            <ChevronVertical strokeWidth={1} size={26} />
+            {value.label}
+            {value.hasOwnProperty('image_url') && value.image_url !== '' ? (
+                <div className="sortimg">
+                    <img src={value.image_url} />
+                </div>
+            ) : null}
+        </li>
+    );
+};
+
+export default SortableElement(SortableItem);

package/components/cms/sorting/list.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import VisnsSortableItem from './item';
+import { SortableContainer } from 'react-sortable-hoc';
+
+const SortableList = (props) => {
+    const { items } = props;
+
+    return (
+        <ul className="sortlist">
+            {items.map((value, index) => (
+                <VisnsSortableItem
+                    key={`item-${index}`}
+                    index={index}
+                    value={value}
+                />
+            ))}
+        </ul>
+    );
+};
+
+export default SortableContainer(SortableList);

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

@@ -0,0 +1,597 @@
+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;