react-graph-grid 0.1.4 → 0.1.5

package/dist/index26.esm.js

@@ -0,0 +1,245 @@
+import { require_jsx_runtime } from "./index7.esm.js";
+import { Images } from "./index16.esm.js";
+import { FieldEdit } from "./index24.esm.js";
+import { GridFEClass } from "./index25.esm.js";
+import { useEffect, useState } from "react";
+var import_jsx_runtime = require_jsx_runtime();
+function Card(props) {
+	let card = null;
+	const [gridState, setState] = useState({
+		grid: card,
+		ind: 0
+	});
+	card = gridState.grid;
+	let needGetRows = false;
+	if (!card || card.uid !== props.uid && props.uid != null) {
+		card = null;
+		if (props.findGrid) card = props.findGrid(props);
+		card = card || new CardClass(props);
+		needGetRows = !card.changedRow;
+	}
+	if (props.init) props.init(card);
+	card.refreshState = function() {
+		setState({
+			grid: card,
+			ind: card.stateind++
+		});
+	};
+	useEffect(() => {
+		card.setupEvents();
+		if (needGetRows && card.selectedRow() == null) card.getRows().then((rows) => {
+			card.rows = rows;
+			card.afterGetRows();
+			card.refreshState();
+		});
+		else if (card.columns.length <= 0 && card.getColumns) card.prepareColumns().then(() => card.refreshState());
+		return () => {
+			card.clearEvents();
+			if (card.graph && card.graph.nodeCount) card.graph.nodeCount--;
+		};
+	}, [card, needGetRows]);
+	return card.render();
+}
+var CardClass = class extends GridFEClass {
+	constructor(props) {
+		super(props);
+		const card = this;
+		card.visible = true;
+		card.allowEdit = props.allowEdit;
+		card.isVisible = props.isVisible || card.isVisible;
+		card.activeRow = props.activeRow || "";
+		card.refreshState = card.refreshState || (() => {});
+		card.reqInd = 0;
+		card.changedRow = {};
+		card.initialRow = props.cardRow;
+		Object.assign(card.changedRow, card.initialRow);
+		if (props.isNewRecord) {
+			card.isNewRecord = true;
+			card.setEditing(true);
+		}
+		card.cardButtons = [];
+	}
+	render() {
+		const card = this;
+		card.addCardButtons();
+		card.buttons = card.cardButtons;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "graph-card-toolbar",
+				style: { margin: "0 1em" },
+				children: super.renderToolbar()
+			}, `cardToolbarDiv_${card.id}_`),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "graph-card-div",
+				children: card.columns.map((col) => {
+					return card.renderField(col);
+				})
+			}, `cardBodyDiv_${card.id}_`),
+			super.renderPopup()
+		] });
+	}
+	renderField(col) {
+		const card = this;
+		if (col.visible == false) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+		const isLookup = col.type === "lookup";
+		let row = card.changedRow;
+		let value = isLookup ? row[col.keyField] : row[col.name];
+		value = value != null ? value : "";
+		if (col.type == null) col.type = "";
+		else if (isLookup) col.grid = card;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "graph-card-field",
+			style: { margin: "0 1em 0.5em 1em" },
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				style: {
+					gridColumn: "span 3",
+					width: "calc(100% - 4px)"
+				},
+				children: col.title || col.name
+			}, `cardLookupTitle_${card.id}_${col.id}_`), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldEdit, {
+				keyPref: card.id + "_card_",
+				column: col,
+				value,
+				text: row[col.name],
+				findFieldEdit: () => {
+					return col._fieldEditObj;
+				},
+				large: true,
+				level: card.level,
+				disabled: card.allowEdit == null || card.allowEdit != true,
+				init: (fe) => {
+					if (card.isEditing() && !card.changedRow) {
+						card.changedRow = {};
+						Object.assign(card.changedRow, card.selectedRow());
+					}
+					row = !card.isEditing() ? card.selectedRow() : card.changedRow;
+					col._fieldEditObj = fe;
+					fe.value = isLookup ? row[col.keyField] : row[col.name];
+					fe.value = fe.value != null ? fe.value : "";
+					fe.text = row[col.name];
+				},
+				onChange: (e) => {
+					if (!card.changedRow) {
+						card.changedRow = {};
+						Object.assign(card.changedRow, card.selectedRow());
+					}
+					if (isLookup) {
+						card.changedRow[col.keyField] = e.value;
+						card.changedRow[col.name] = e.text;
+						if (!card.isEditing()) card.setEditing(true);
+						card.refreshState();
+					} else {
+						card.changedRow[col.name] = e.value;
+						card.setEditing(true);
+						card.refreshState();
+					}
+				}
+			})]
+		}, `cardLookupDiv_${card.id}_${col.id}_`);
+	}
+	addCardButtons() {
+		const card = this;
+		if (card._cardButtonsAdded) return;
+		card._cardButtonsAdded = true;
+		card.cardButtons.push({
+			id: card.cardButtons.length,
+			name: "commit",
+			title: card.translate("Commit changes"),
+			label: card.translate("Commit"),
+			img: Images.images.commit,
+			click: (e) => card.commitChangesNode(e),
+			getDisabled: (e) => card.commitChangesNodeDisabled(e)
+		});
+		card.cardButtons.push({
+			id: card.cardButtons.length,
+			name: "rollback",
+			title: card.translate("Rollback changes"),
+			label: card.translate("Rollback"),
+			img: Images.images.rollback,
+			click: (e) => {
+				card.rollbackChangesNode(e);
+				if (card.isNewRecord && card.close) card.close(e);
+			},
+			getDisabled: (e) => card.rollbackChangesNodeDisabled(e)
+		});
+	}
+	commitChangesNodeDisabled() {
+		const card = this;
+		if (!card.isEditing()) return true;
+		let requiredColumnsFilled = true;
+		for (let col of card.columns) {
+			if (!col.required || col.readonly) continue;
+			let val = card.changedRow[col.name];
+			if (col.required && (val == null || val === "")) {
+				requiredColumnsFilled = false;
+				break;
+			}
+		}
+		return !requiredColumnsFilled;
+	}
+	rollbackChangesNodeDisabled() {
+		return !this.isEditing();
+	}
+	saveRow(e) {
+		const card = this;
+		if (!card.isRowChanged(e.row, card.changedRow)) return new Promise(function(resolve) {
+			resolve(true);
+		});
+		return new Promise(function(resolve) {
+			Object.assign(card.initialRow, card.changedRow);
+			resolve(true);
+		});
+	}
+	commitChangesNode() {
+		const card = this;
+		card.saveRow({
+			row: card.initialRow,
+			changedRow: card.changedRow
+		}).then(() => {
+			if (card.isNewRecord || !card.keyField) {
+				card.setEditing(false);
+				Object.assign(card.initialRow, card.changedRow);
+				card.refreshState();
+			} else card.getRows().then((rows) => {
+				card.rows = rows;
+				card.changedRow = rows[0];
+				Object.assign(card.initialRow, card.changedRow);
+				card.setEditing(false);
+				card.afterGetRows();
+				card.refreshState();
+			});
+		}).catch((message) => {
+			Object.assign(card.changedRow, card.initialRow);
+			card.refreshState();
+			alert(message || "Error!");
+		});
+	}
+	rollbackChangesNode() {
+		const card = this;
+		if (card.isNewRecord || !card.keyField) {
+			card.changedRow = {};
+			Object.assign(card.changedRow, card.initialRow);
+			card.setEditing(false);
+			card.refreshState();
+		} else card.getRows().then((rows) => {
+			card.rows = rows;
+			card.changedRow = rows[0];
+			Object.assign(card.initialRow, card.changedRow);
+			card.setEditing(false);
+			card.afterGetRows();
+			card.refreshState();
+		});
+	}
+	selectedRow() {
+		return this.changedRow;
+	}
+	getRows() {
+		const card = this;
+		return new Promise(function(resolve) {
+			const res = [card.initialRow];
+			card.totalRows = 1;
+			resolve(res);
+		});
+	}
+};
+export { Card, CardClass };

package/dist/index26.js

@@ -0,0 +1,246 @@
+const require_jsx_runtime$1 = require("./index7.js");
+const require_Images = require("./index16.js");
+const require_FieldEdit = require("./index24.js");
+const require_GridFE = require("./index25.js");
+let react = require("react");
+var import_jsx_runtime = require_jsx_runtime$1.default;
+function Card(props) {
+	let card = null;
+	const [gridState, setState] = (0, react.useState)({
+		grid: card,
+		ind: 0
+	});
+	card = gridState.grid;
+	let needGetRows = false;
+	if (!card || card.uid !== props.uid && props.uid != null) {
+		card = null;
+		if (props.findGrid) card = props.findGrid(props);
+		card = card || new CardClass(props);
+		needGetRows = !card.changedRow;
+	}
+	if (props.init) props.init(card);
+	card.refreshState = function() {
+		setState({
+			grid: card,
+			ind: card.stateind++
+		});
+	};
+	(0, react.useEffect)(() => {
+		card.setupEvents();
+		if (needGetRows && card.selectedRow() == null) card.getRows().then((rows) => {
+			card.rows = rows;
+			card.afterGetRows();
+			card.refreshState();
+		});
+		else if (card.columns.length <= 0 && card.getColumns) card.prepareColumns().then(() => card.refreshState());
+		return () => {
+			card.clearEvents();
+			if (card.graph && card.graph.nodeCount) card.graph.nodeCount--;
+		};
+	}, [card, needGetRows]);
+	return card.render();
+}
+var CardClass = class extends require_GridFE.GridFEClass {
+	constructor(props) {
+		super(props);
+		const card = this;
+		card.visible = true;
+		card.allowEdit = props.allowEdit;
+		card.isVisible = props.isVisible || card.isVisible;
+		card.activeRow = props.activeRow || "";
+		card.refreshState = card.refreshState || (() => {});
+		card.reqInd = 0;
+		card.changedRow = {};
+		card.initialRow = props.cardRow;
+		Object.assign(card.changedRow, card.initialRow);
+		if (props.isNewRecord) {
+			card.isNewRecord = true;
+			card.setEditing(true);
+		}
+		card.cardButtons = [];
+	}
+	render() {
+		const card = this;
+		card.addCardButtons();
+		card.buttons = card.cardButtons;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "graph-card-toolbar",
+				style: { margin: "0 1em" },
+				children: super.renderToolbar()
+			}, `cardToolbarDiv_${card.id}_`),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "graph-card-div",
+				children: card.columns.map((col) => {
+					return card.renderField(col);
+				})
+			}, `cardBodyDiv_${card.id}_`),
+			super.renderPopup()
+		] });
+	}
+	renderField(col) {
+		const card = this;
+		if (col.visible == false) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+		const isLookup = col.type === "lookup";
+		let row = card.changedRow;
+		let value = isLookup ? row[col.keyField] : row[col.name];
+		value = value != null ? value : "";
+		if (col.type == null) col.type = "";
+		else if (isLookup) col.grid = card;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "graph-card-field",
+			style: { margin: "0 1em 0.5em 1em" },
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				style: {
+					gridColumn: "span 3",
+					width: "calc(100% - 4px)"
+				},
+				children: col.title || col.name
+			}, `cardLookupTitle_${card.id}_${col.id}_`), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(require_FieldEdit.FieldEdit, {
+				keyPref: card.id + "_card_",
+				column: col,
+				value,
+				text: row[col.name],
+				findFieldEdit: () => {
+					return col._fieldEditObj;
+				},
+				large: true,
+				level: card.level,
+				disabled: card.allowEdit == null || card.allowEdit != true,
+				init: (fe) => {
+					if (card.isEditing() && !card.changedRow) {
+						card.changedRow = {};
+						Object.assign(card.changedRow, card.selectedRow());
+					}
+					row = !card.isEditing() ? card.selectedRow() : card.changedRow;
+					col._fieldEditObj = fe;
+					fe.value = isLookup ? row[col.keyField] : row[col.name];
+					fe.value = fe.value != null ? fe.value : "";
+					fe.text = row[col.name];
+				},
+				onChange: (e) => {
+					if (!card.changedRow) {
+						card.changedRow = {};
+						Object.assign(card.changedRow, card.selectedRow());
+					}
+					if (isLookup) {
+						card.changedRow[col.keyField] = e.value;
+						card.changedRow[col.name] = e.text;
+						if (!card.isEditing()) card.setEditing(true);
+						card.refreshState();
+					} else {
+						card.changedRow[col.name] = e.value;
+						card.setEditing(true);
+						card.refreshState();
+					}
+				}
+			})]
+		}, `cardLookupDiv_${card.id}_${col.id}_`);
+	}
+	addCardButtons() {
+		const card = this;
+		if (card._cardButtonsAdded) return;
+		card._cardButtonsAdded = true;
+		card.cardButtons.push({
+			id: card.cardButtons.length,
+			name: "commit",
+			title: card.translate("Commit changes"),
+			label: card.translate("Commit"),
+			img: require_Images.Images.images.commit,
+			click: (e) => card.commitChangesNode(e),
+			getDisabled: (e) => card.commitChangesNodeDisabled(e)
+		});
+		card.cardButtons.push({
+			id: card.cardButtons.length,
+			name: "rollback",
+			title: card.translate("Rollback changes"),
+			label: card.translate("Rollback"),
+			img: require_Images.Images.images.rollback,
+			click: (e) => {
+				card.rollbackChangesNode(e);
+				if (card.isNewRecord && card.close) card.close(e);
+			},
+			getDisabled: (e) => card.rollbackChangesNodeDisabled(e)
+		});
+	}
+	commitChangesNodeDisabled() {
+		const card = this;
+		if (!card.isEditing()) return true;
+		let requiredColumnsFilled = true;
+		for (let col of card.columns) {
+			if (!col.required || col.readonly) continue;
+			let val = card.changedRow[col.name];
+			if (col.required && (val == null || val === "")) {
+				requiredColumnsFilled = false;
+				break;
+			}
+		}
+		return !requiredColumnsFilled;
+	}
+	rollbackChangesNodeDisabled() {
+		return !this.isEditing();
+	}
+	saveRow(e) {
+		const card = this;
+		if (!card.isRowChanged(e.row, card.changedRow)) return new Promise(function(resolve) {
+			resolve(true);
+		});
+		return new Promise(function(resolve) {
+			Object.assign(card.initialRow, card.changedRow);
+			resolve(true);
+		});
+	}
+	commitChangesNode() {
+		const card = this;
+		card.saveRow({
+			row: card.initialRow,
+			changedRow: card.changedRow
+		}).then(() => {
+			if (card.isNewRecord || !card.keyField) {
+				card.setEditing(false);
+				Object.assign(card.initialRow, card.changedRow);
+				card.refreshState();
+			} else card.getRows().then((rows) => {
+				card.rows = rows;
+				card.changedRow = rows[0];
+				Object.assign(card.initialRow, card.changedRow);
+				card.setEditing(false);
+				card.afterGetRows();
+				card.refreshState();
+			});
+		}).catch((message) => {
+			Object.assign(card.changedRow, card.initialRow);
+			card.refreshState();
+			alert(message || "Error!");
+		});
+	}
+	rollbackChangesNode() {
+		const card = this;
+		if (card.isNewRecord || !card.keyField) {
+			card.changedRow = {};
+			Object.assign(card.changedRow, card.initialRow);
+			card.setEditing(false);
+			card.refreshState();
+		} else card.getRows().then((rows) => {
+			card.rows = rows;
+			card.changedRow = rows[0];
+			Object.assign(card.initialRow, card.changedRow);
+			card.setEditing(false);
+			card.afterGetRows();
+			card.refreshState();
+		});
+	}
+	selectedRow() {
+		return this.changedRow;
+	}
+	getRows() {
+		const card = this;
+		return new Promise(function(resolve) {
+			const res = [card.initialRow];
+			card.totalRows = 1;
+			resolve(res);
+		});
+	}
+};
+exports.Card = Card;
+exports.CardClass = CardClass;

package/dist/index27.esm.js

@@ -0,0 +1,136 @@
+import { require_jsx_runtime } from "./index7.esm.js";
+import { GridFEClass } from "./index25.esm.js";
+import { Card } from "./index26.esm.js";
+import { useEffect, useState } from "react";
+var import_jsx_runtime = require_jsx_runtime();
+function GridCD(props) {
+	let grid = null;
+	const [gridState, setState] = useState({
+		grid,
+		ind: 0
+	});
+	grid = gridState.grid;
+	let needGetRows = false;
+	if (!grid || grid.uid !== props.uid && props.uid != null) {
+		grid = null;
+		if (props.findGrid) grid = props.findGrid(props);
+		grid = grid || new GridCDClass(props);
+		needGetRows = !props.noAutoRefresh && !grid.hasVisibleParentGrids();
+	}
+	if (props.init) props.init(grid);
+	grid.refreshState = function() {
+		setState({
+			grid,
+			ind: grid.stateind++
+		});
+	};
+	useEffect(() => {
+		grid.setupEvents();
+		if (needGetRows && (grid.rows.length <= 0 || grid.columns.length <= 0) || grid._forceRefresh) {
+			grid._forceRefresh = false;
+			grid._waitingRows = true;
+			grid.getRows({
+				filters: grid.collectFilters(),
+				grid
+			}).then((rows) => {
+				grid.rows = rows;
+				grid.afterGetRows();
+				grid.refreshState();
+			}).finally(() => {
+				grid._waitingRows = false;
+				grid.refreshState();
+			});
+		} else if (grid.columns.length <= 0 && grid.getColumns) grid.prepareColumns().then(() => grid.refreshState());
+		return () => {
+			grid.clearEvents();
+		};
+	}, [grid, needGetRows]);
+	return grid.render();
+}
+var GridCDClass = class extends GridFEClass {
+	constructor(props) {
+		super(props);
+		const grid = this;
+		grid.allowView = true;
+		grid._buttonsDict["view"].getVisible = () => {
+			return true;
+		};
+	}
+	render() {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: super.render() });
+	}
+	renderPopupContent(wnd) {
+		const grid = this;
+		return grid.cardIsShowing ? grid.renderCardContent(wnd) : super.renderPopupContent(wnd);
+	}
+	renderCardContent() {
+		const grid = this;
+		return grid.allowView == false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: `graph-filter-title graph-filter-required`,
+			children: grid.translate("Insufficient rights to view")
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+			cardRow: grid.cardRow || {},
+			isNewRecord: grid.isNewRecord,
+			allowEdit: grid.allowEdit,
+			uid: (grid.uid || grid.id) + "_card_",
+			keyField: grid.keyField,
+			level: grid.level + 1,
+			findGrid: () => {
+				const selRow = grid.cardRow || grid.selectedRow();
+				if (grid._card && selRow && grid._card.changedRow[grid.keyField] === selRow[grid.keyField]) return grid._card;
+			},
+			init: (card) => {
+				if (grid._card == card) return;
+				grid._card = card;
+				card.visible = true;
+				card.columns = [];
+				for (let col of grid.columns) {
+					const remGetRows = col.getRows;
+					delete col._fieldEditObj;
+					delete col.grid;
+					delete col._filterEditObj;
+					delete col.getRows;
+					let clone = structuredClone(col);
+					card.columns.push(clone);
+					clone.getRows = col.getRows = remGetRows;
+					col.grid = grid;
+				}
+				card.close = (e) => {
+					grid.onClosePopup(e);
+					grid.refreshState();
+				};
+			}
+		});
+	}
+	viewRecord(e) {
+		const grid = this;
+		const shift = (grid.level + 1) * 20;
+		grid.cardPos = grid.cardPos || {
+			x: 100 + shift,
+			y: 100 + shift,
+			w: 800,
+			h: 600
+		};
+		grid.popupPos = grid.cardPos;
+		grid.cardRow = grid.selectedRow();
+		grid.isNewRecord = false;
+		grid.cardIsShowing = true;
+		grid.popupIsShowing = true;
+		grid.popupTitle = grid.title;
+		grid.refreshState();
+	}
+	onClosePopup(e) {
+		const grid = this;
+		if (grid.cardIsShowing && grid._card) {
+			if (grid._card.isEditing() && (grid.isNewRecord || grid.isRowChanged(grid._card.changedRow, grid.selectedRow()))) {
+				e.cancel = !confirm(grid.translate("The row is changed. Discard changes?"));
+				if (e.cancel) return;
+			}
+			delete grid._card;
+		}
+		super.onClosePopup(e);
+		if (e.cancel) return;
+		if (grid.cardIsShowing) grid.cardIsShowing = false;
+	}
+};
+export { GridCD, GridCDClass };