@thebuoyant-tsdev/mui-ts-library 3.2.1 → 3.6.0

package/dist/components/gantt-chart/GanttTaskDialog.js

@@ -0,0 +1,324 @@
+import { useGanttChartStore as e, useGanttTranslations as t } from "./GanttChart.js";
+import { useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { Box as o, Button as s, Checkbox as c, Dialog as l, DialogActions as u, DialogContent as d, DialogTitle as f, FormControl as p, FormControlLabel as m, InputLabel as h, MenuItem as g, Select as _, TextField as v, Tooltip as y, Typography as b } from "@mui/material";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/gantt-chart/GanttTaskDialog.tsx
+function C(e) {
+	return e.toISOString().slice(0, 10);
+}
+function w(e, t, n) {
+	return e < t ? t : e > n ? n : e;
+}
+function T(e) {
+	return e.flatMap((e) => [e, ...T(e.children)]);
+}
+function E({ label: e }) {
+	let t = i(null), [n, r] = a(!1);
+	return /* @__PURE__ */ x(y, {
+		title: e,
+		disableHoverListener: !n,
+		children: /* @__PURE__ */ x(b, {
+			ref: t,
+			component: "span",
+			variant: "body2",
+			noWrap: !0,
+			sx: {
+				display: "block",
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				minWidth: 0
+			},
+			onMouseEnter: () => {
+				t.current && r(t.current.scrollWidth > t.current.clientWidth);
+			},
+			children: e
+		})
+	});
+}
+function D({ open: i, mode: y, initialTask: D, defaultParentId: O, onSave: k, onClose: A }) {
+	let j = t(), M = e((e) => e.taskTree), N = e((e) => e.timelineRange), P = r(() => T(M), [M]), F = r(() => {
+		if (y === "add" || !D) return /* @__PURE__ */ new Set();
+		let e = (t) => [t.id, ...t.children.flatMap(e)], t = P.find((e) => e.id === D.id);
+		return new Set(t ? e(t) : [D.id]);
+	}, [
+		y,
+		D,
+		P
+	]), I = P.filter((e) => !F.has(e.id)), L = I, R = C(w(/* @__PURE__ */ new Date(), N.start, N.end)), [z, B] = a({
+		name: "",
+		startDate: R,
+		endDate: R,
+		status: "planned",
+		isMilestone: !1,
+		parentId: "",
+		dependencies: [],
+		assignee: ""
+	});
+	n(() => {
+		if (!i) return;
+		let e = C(w(/* @__PURE__ */ new Date(), N.start, N.end));
+		B(y === "edit" && D ? {
+			name: D.name,
+			startDate: C(D.startDate),
+			endDate: C(D.endDate),
+			status: D.status,
+			isMilestone: D.isMilestone ?? !1,
+			parentId: D.parentId ?? "",
+			dependencies: D.dependencies ?? [],
+			assignee: D.assignee ?? ""
+		} : {
+			name: "",
+			startDate: e,
+			endDate: e,
+			status: "planned",
+			isMilestone: !1,
+			parentId: O ?? "",
+			dependencies: [],
+			assignee: ""
+		});
+	}, [
+		i,
+		y,
+		D,
+		O,
+		N
+	]);
+	let V = (e) => {
+		B((t) => ({
+			...t,
+			startDate: e,
+			endDate: t.isMilestone || t.endDate < e ? e : t.endDate
+		}));
+	}, H = (e) => {
+		B((t) => ({
+			...t,
+			endDate: e < t.startDate ? t.startDate : e
+		}));
+	}, U = (e) => {
+		B((t) => ({
+			...t,
+			isMilestone: e,
+			endDate: e ? t.startDate : t.endDate
+		}));
+	}, W = z.name.trim() !== "" && z.startDate !== "" && z.endDate !== "" && z.endDate >= z.startDate, G = () => {
+		W && k({
+			name: z.name.trim(),
+			startDate: new Date(z.startDate),
+			endDate: new Date(z.endDate),
+			status: z.status,
+			isMilestone: z.isMilestone || void 0,
+			parentId: z.parentId || void 0,
+			dependencies: z.dependencies.length > 0 ? z.dependencies : void 0,
+			assignee: z.assignee.trim() || void 0
+		});
+	}, K = [
+		"planned",
+		"in-progress",
+		"done",
+		"blocked"
+	], q = {
+		planned: j.statusPlanned,
+		"in-progress": j.statusInProgress,
+		done: j.statusDone,
+		blocked: j.statusBlocked
+	};
+	return /* @__PURE__ */ S(l, {
+		open: i,
+		onClose: A,
+		maxWidth: "xs",
+		fullWidth: !0,
+		"data-testid": "gantt-task-dialog",
+		children: [
+			/* @__PURE__ */ x(f, { children: y === "add" ? j.dialogAddTitle : j.dialogEditTitle }),
+			/* @__PURE__ */ S(d, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 2,
+					pt: "16px !important"
+				},
+				children: [
+					/* @__PURE__ */ x(v, {
+						label: j.dialogFieldName,
+						value: z.name,
+						onChange: (e) => B((t) => ({
+							...t,
+							name: e.target.value
+						})),
+						required: !0,
+						fullWidth: !0,
+						size: "small",
+						autoFocus: !0,
+						slotProps: { htmlInput: { "data-testid": "gantt-dialog-field-name" } }
+					}),
+					/* @__PURE__ */ x(v, {
+						label: j.columnAssignee,
+						value: z.assignee,
+						onChange: (e) => B((t) => ({
+							...t,
+							assignee: e.target.value
+						})),
+						fullWidth: !0,
+						size: "small",
+						placeholder: "e.g. Jane Smith",
+						slotProps: { htmlInput: { "data-testid": "gantt-dialog-field-assignee" } }
+					}),
+					/* @__PURE__ */ x(v, {
+						label: j.dialogFieldStartDate,
+						type: "date",
+						value: z.startDate,
+						onChange: (e) => V(e.target.value),
+						required: !0,
+						fullWidth: !0,
+						size: "small",
+						slotProps: {
+							inputLabel: { shrink: !0 },
+							htmlInput: { "data-testid": "gantt-dialog-field-start" }
+						}
+					}),
+					/* @__PURE__ */ x(v, {
+						label: j.dialogFieldEndDate,
+						type: "date",
+						value: z.endDate,
+						onChange: (e) => H(e.target.value),
+						required: !0,
+						fullWidth: !0,
+						size: "small",
+						disabled: z.isMilestone,
+						slotProps: {
+							inputLabel: { shrink: !0 },
+							htmlInput: {
+								"data-testid": "gantt-dialog-field-end",
+								min: z.startDate
+							}
+						}
+					}),
+					/* @__PURE__ */ S(p, {
+						size: "small",
+						fullWidth: !0,
+						children: [/* @__PURE__ */ x(h, { children: j.dialogFieldStatus }), /* @__PURE__ */ x(_, {
+							value: z.status,
+							label: j.dialogFieldStatus,
+							onChange: (e) => B((t) => ({
+								...t,
+								status: e.target.value
+							})),
+							inputProps: { "data-testid": "gantt-dialog-field-status" },
+							children: K.map((e) => /* @__PURE__ */ x(g, {
+								value: e,
+								children: q[e]
+							}, e))
+						})]
+					}),
+					/* @__PURE__ */ x(m, {
+						control: /* @__PURE__ */ x(c, {
+							checked: z.isMilestone,
+							onChange: (e) => U(e.target.checked),
+							size: "small",
+							"data-testid": "gantt-dialog-field-milestone"
+						}),
+						label: j.dialogFieldMilestone
+					}),
+					/* @__PURE__ */ S(p, {
+						size: "small",
+						fullWidth: !0,
+						children: [/* @__PURE__ */ x(h, { children: j.dialogFieldParent }), /* @__PURE__ */ S(_, {
+							value: z.parentId,
+							label: j.dialogFieldParent,
+							onChange: (e) => B((t) => ({
+								...t,
+								parentId: e.target.value
+							})),
+							inputProps: { "data-testid": "gantt-dialog-field-parent" },
+							MenuProps: { slotProps: { paper: { sx: { maxHeight: 280 } } } },
+							children: [/* @__PURE__ */ x(g, {
+								value: "",
+								children: j.dialogFieldParentNone
+							}), I.map((e) => /* @__PURE__ */ x(g, {
+								value: e.id,
+								sx: { minWidth: 0 },
+								children: /* @__PURE__ */ S(o, {
+									sx: {
+										display: "flex",
+										alignItems: "center",
+										pl: e.depth * 2,
+										gap: .75,
+										minWidth: 0,
+										width: "100%",
+										overflow: "hidden"
+									},
+									children: [e.depth > 0 && /* @__PURE__ */ x(b, {
+										component: "span",
+										variant: "caption",
+										sx: {
+											color: "text.disabled",
+											lineHeight: 1,
+											flexShrink: 0
+										},
+										children: "└"
+									}), /* @__PURE__ */ x(E, { label: e.name })]
+								})
+							}, e.id))]
+						})]
+					}),
+					/* @__PURE__ */ S(p, {
+						size: "small",
+						fullWidth: !0,
+						children: [/* @__PURE__ */ x(h, { children: j.dialogFieldDependencies }), /* @__PURE__ */ x(_, {
+							multiple: !0,
+							value: z.dependencies,
+							label: j.dialogFieldDependencies,
+							onChange: (e) => {
+								let t = e.target.value;
+								B((e) => ({
+									...e,
+									dependencies: typeof t == "string" ? t.split(",") : t
+								}));
+							},
+							inputProps: { "data-testid": "gantt-dialog-field-dependencies" },
+							renderValue: (e) => e.length === 0 ? j.dialogFieldDependenciesNone : e.map((e) => P.find((t) => t.id === e)?.name ?? e).join(", "),
+							MenuProps: { slotProps: { paper: { sx: { maxHeight: 280 } } } },
+							children: L.map((e) => /* @__PURE__ */ x(g, {
+								value: e.id,
+								sx: { minWidth: 0 },
+								children: /* @__PURE__ */ S(o, {
+									sx: {
+										display: "flex",
+										alignItems: "center",
+										pl: e.depth * 2,
+										gap: .75,
+										minWidth: 0,
+										width: "100%",
+										overflow: "hidden"
+									},
+									children: [e.depth > 0 && /* @__PURE__ */ x(b, {
+										component: "span",
+										variant: "caption",
+										sx: {
+											color: "text.disabled",
+											lineHeight: 1,
+											flexShrink: 0
+										},
+										children: "└"
+									}), /* @__PURE__ */ x(E, { label: e.name })]
+								})
+							}, e.id))
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ S(u, { children: [/* @__PURE__ */ x(s, {
+				onClick: A,
+				children: j.dialogCancel
+			}), /* @__PURE__ */ x(s, {
+				onClick: G,
+				variant: "contained",
+				disabled: !W,
+				"data-testid": "gantt-dialog-save",
+				children: j.dialogSave
+			})] })
+		]
+	});
+}
+//#endregion
+export { D as GanttTaskDialog };