@burdenoff/microfe-planmagnet 2026.1002.2 → 2026.1002.3

package/dist/planmagnet/pages/TasksCreateTaskPagePage.js

@@ -1,16 +1,19 @@
 import { usePlanMagnet as e, usePlanMagnetNavigate as t } from "../providers/PlanMagnetProvider.js";
-import { throwOnError as n } from "../utils/mutationResult.js";
-import { AssigneeSelect as r, WORK_ITEM_PRIORITIES as i } from "../controls/WorkItemControls.js";
-import { parseEstimateHours as a, parseIntField as o } from "../utils/formValidation.js";
-import { MilestoneSelect as s } from "../milestones/MilestoneControls.js";
-import { useState as c } from "react";
-import { CheckSquare as l, Save as u, X as d } from "lucide-react";
-import { gql as f } from "@apollo/client";
-import { useMutation as p, useQuery as m } from "@apollo/client/react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { Button as _, Card as v, CardContent as y, CardHeader as b, CardTitle as x, Input as S } from "@burdenoff/fe-libs/ui";
+import { useTr as n } from "../../shared/hooks/useTr.js";
+import { throwOnError as r } from "../utils/mutationResult.js";
+import { AssigneeSelect as i, WORK_ITEM_PRIORITIES as a } from "../controls/WorkItemControls.js";
+import { parseEstimateHours as o, parseIntField as s } from "../utils/formValidation.js";
+import { requiredSkillsRefusal as c } from "../skills/skillTags.js";
+import { MilestoneSelect as l } from "../milestones/MilestoneControls.js";
+import { RequiredSkillsField as u } from "../skills/RequiredSkillsEditor.js";
+import { useState as d } from "react";
+import { CheckSquare as f, Save as p, X as m } from "lucide-react";
+import { gql as h } from "@apollo/client";
+import { useMutation as g, useQuery as _ } from "@apollo/client/react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Button as b, Card as x, CardContent as S, CardHeader as C, CardTitle as w, Input as T } from "@burdenoff/fe-libs/ui";
 //#region src/planmagnet/pages/TasksCreateTaskPagePage.tsx
-var C = f`
+var E = h`
   mutation CreateWorkItem($input: PlanmagnetCreateWorkItemInput!) {
     planmagnetCreateWorkItem(input: $input) {
       id
@@ -26,7 +29,7 @@ var C = f`
       createdAt
     }
   }
-`, w = f`
+`, D = h`
   query GetProjectsForTaskCreate($workspaceId: ID!) {
     planmagnetProjects(workspaceId: $workspaceId, pagination: { first: 100 }) {
       items {
@@ -36,7 +39,7 @@ var C = f`
       }
     }
   }
-`, T = f`
+`, O = h`
   query GetSprintsForTaskCreate($workspaceId: ID!, $projectId: String) {
     planmagnetSprints(
       workspaceId: $workspaceId
@@ -50,13 +53,13 @@ var C = f`
       }
     }
   }
-`, E = new Set([
+`, k = new Set([
 	"PLANNING",
 	"ACTIVE",
 	"REVIEW"
 ]);
-function D() {
-	let { workspaceId: f } = e(), [D, O] = c({
+function A() {
+	let { workspaceId: h } = e(), A = n(), [j, M] = d({
 		title: "",
 		description: "",
 		projectId: "",
@@ -69,122 +72,124 @@ function D() {
 		assigneeId: "",
 		dueDate: "",
 		estimateHours: ""
-	}), { data: k, loading: A, error: j, refetch: M } = m(w, {
-		variables: { workspaceId: f ?? "default" },
-		skip: !f
-	}), N = k?.planmagnetProjects?.items ?? [], P = D.projectId || N[0]?.id || "", { data: F, loading: I } = m(T, {
+	}), { data: N, loading: P, error: F, refetch: I } = _(D, {
+		variables: { workspaceId: h ?? "default" },
+		skip: !h
+	}), L = N?.planmagnetProjects?.items ?? [], R = j.projectId || L[0]?.id || "", { data: z, loading: B } = _(O, {
 		variables: {
-			workspaceId: f ?? "default",
-			projectId: P
+			workspaceId: h ?? "default",
+			projectId: R
 		},
-		skip: !f || !P
-	}), L = (F?.planmagnetSprints?.items ?? []).filter((e) => E.has(e.status)), R = t(), [z, { loading: B }] = p(C, { refetchQueries: ["GetWorkItems"] }), [V, H] = c(null), U = o(D.storyPoints, { min: 0 }), W = a(D.estimateHours);
-	return /* @__PURE__ */ g("div", {
+		skip: !h || !R
+	}), V = (z?.planmagnetSprints?.items ?? []).filter((e) => k.has(e.status)), H = t(), [U, { loading: W }] = g(E, { refetchQueries: ["GetWorkItems"] }), [G, K] = d(null), [q, J] = d([]), [Y, X] = d(null), Z = s(j.storyPoints, { min: 0 }), Q = o(j.estimateHours);
+	return /* @__PURE__ */ y("div", {
 		className: "space-y-6 p-6 max-w-4xl",
 		children: [
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h1", {
+				children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h1", {
 					className: "text-2xl font-semibold",
 					children: "Create Task"
-				}), /* @__PURE__ */ h("p", {
+				}), /* @__PURE__ */ v("p", {
 					className: "text-sm text-muted-foreground",
 					children: "Add a new task to the project backlog."
-				})] }), /* @__PURE__ */ g("div", {
+				})] }), /* @__PURE__ */ y("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ g(_, {
+					children: [/* @__PURE__ */ y(b, {
 						variant: "outline",
 						size: "sm",
-						onClick: () => R("/tasks/tasks-page"),
-						children: [/* @__PURE__ */ h(d, { className: "mr-1 h-4 w-4" }), "Cancel"]
-					}), /* @__PURE__ */ g(_, {
+						onClick: () => H("/tasks/tasks-page"),
+						children: [/* @__PURE__ */ v(m, { className: "mr-1 h-4 w-4" }), "Cancel"]
+					}), /* @__PURE__ */ y(b, {
 						size: "sm",
 						onClick: async () => {
-							if (!(!D.title.trim() || !P || !f || U.invalid || W.invalid)) {
-								H(null);
+							if (!(!j.title.trim() || !R || !h || Z.invalid || Q.invalid)) {
+								K(null), X(null);
 								try {
-									let e = (await n(z({ variables: { input: {
-										projectId: P,
-										title: D.title,
-										description: D.description || void 0,
-										type: D.type,
-										priority: D.priority,
-										storyPoints: U.value,
-										labels: D.labels ? D.labels.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
-										sprintId: D.sprintId || void 0,
-										milestoneId: D.milestoneId || void 0,
-										assigneeId: D.assigneeId || void 0,
-										dueDate: D.dueDate || void 0,
-										estimateMinutes: W.minutes
+									let e = (await r(U({ variables: { input: {
+										projectId: R,
+										title: j.title,
+										description: j.description || void 0,
+										type: j.type,
+										priority: j.priority,
+										storyPoints: Z.value,
+										labels: j.labels ? j.labels.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
+										sprintId: j.sprintId || void 0,
+										milestoneId: j.milestoneId || void 0,
+										assigneeId: j.assigneeId || void 0,
+										dueDate: j.dueDate || void 0,
+										estimateMinutes: Q.minutes,
+										requiredSkills: q.length > 0 ? q : void 0
 									} } }))).data?.planmagnetCreateWorkItem?.id;
-									R(e ? `/tasks/task-detail-page?taskId=${encodeURIComponent(e)}` : "/tasks/tasks-page");
+									H(e ? `/tasks/task-detail-page?taskId=${encodeURIComponent(e)}` : "/tasks/tasks-page");
 								} catch (e) {
-									H(e instanceof Error ? e.message : "The task could not be created.");
+									let t = c(e);
+									t ? (X(t), K(A("planmagnet.skills.editor.createRefused", "The task was not created: see Required skills below."))) : K(e instanceof Error ? e.message : "The task could not be created.");
 								}
 							}
 						},
-						disabled: B || !D.title.trim() || !P || U.invalid || W.invalid,
-						children: [/* @__PURE__ */ h(u, { className: "mr-1 h-4 w-4" }), B ? "Creating..." : "Create Task"]
+						disabled: W || !j.title.trim() || !R || Z.invalid || Q.invalid,
+						children: [/* @__PURE__ */ v(p, { className: "mr-1 h-4 w-4" }), W ? "Creating..." : "Create Task"]
 					})]
 				})]
 			}),
-			V && /* @__PURE__ */ h("div", {
+			G && /* @__PURE__ */ v("div", {
 				role: "alert",
 				className: "p-3 bg-destructive/10 text-destructive rounded-md text-sm",
-				children: V
+				children: G
 			}),
-			/* @__PURE__ */ g(v, { children: [/* @__PURE__ */ h(b, { children: /* @__PURE__ */ g(x, {
+			/* @__PURE__ */ y(x, { children: [/* @__PURE__ */ v(C, { children: /* @__PURE__ */ y(w, {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ h(l, { className: "h-4 w-4" }), "Task Details"]
-			}) }), /* @__PURE__ */ g(y, {
+				children: [/* @__PURE__ */ v(f, { className: "h-4 w-4" }), "Task Details"]
+			}) }), /* @__PURE__ */ y(S, {
 				className: "space-y-4",
 				children: [
-					/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+					/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 						className: "text-sm font-medium",
 						children: "Title"
-					}), /* @__PURE__ */ h(S, {
-						value: D.title,
-						onChange: (e) => O({
-							...D,
+					}), /* @__PURE__ */ v(T, {
+						value: j.title,
+						onChange: (e) => M({
+							...j,
 							title: e.target.value
 						}),
 						className: "mt-1",
 						placeholder: "e.g. Implement search query parser"
 					})] }),
-					/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+					/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 						className: "text-sm font-medium",
 						children: "Description"
-					}), /* @__PURE__ */ h("textarea", {
+					}), /* @__PURE__ */ v("textarea", {
 						className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[100px]",
-						value: D.description,
-						onChange: (e) => O({
-							...D,
+						value: j.description,
+						onChange: (e) => M({
+							...j,
 							description: e.target.value
 						}),
 						placeholder: "Describe the task requirements..."
 					})] }),
-					/* @__PURE__ */ g("div", {
+					/* @__PURE__ */ y("div", {
 						className: "grid grid-cols-3 gap-4",
 						children: [
-							/* @__PURE__ */ g("div", { children: [
-								/* @__PURE__ */ h("label", {
+							/* @__PURE__ */ y("div", { children: [
+								/* @__PURE__ */ v("label", {
 									className: "text-sm font-medium",
 									children: "Project"
 								}),
-								/* @__PURE__ */ g("select", {
+								/* @__PURE__ */ y("select", {
 									className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-									value: P,
-									onChange: (e) => O({
-										...D,
+									value: R,
+									onChange: (e) => M({
+										...j,
 										projectId: e.target.value,
 										sprintId: "",
 										milestoneId: ""
 									}),
-									children: [N.length === 0 && /* @__PURE__ */ h("option", {
+									children: [L.length === 0 && /* @__PURE__ */ v("option", {
 										value: "",
 										disabled: !0,
-										children: A && !k ? "Loading projects…" : j ? "Projects could not be loaded" : "No projects yet"
-									}), N.map((e) => /* @__PURE__ */ g("option", {
+										children: P && !N ? "Loading projects…" : F ? "Projects could not be loaded" : "No projects yet"
+									}), L.map((e) => /* @__PURE__ */ y("option", {
 										value: e.id,
 										children: [
 											e.key,
@@ -193,48 +198,48 @@ function D() {
 										]
 									}, e.id))]
 								}),
-								j && /* @__PURE__ */ g("p", {
+								F && /* @__PURE__ */ y("p", {
 									role: "alert",
 									className: "mt-1 flex items-center gap-2 text-xs text-destructive",
-									children: [j.message, /* @__PURE__ */ h(_, {
+									children: [F.message, /* @__PURE__ */ v(b, {
 										type: "button",
 										size: "sm",
 										variant: "ghost",
 										className: "h-6 px-2 text-xs",
-										onClick: () => void M(),
+										onClick: () => void I(),
 										children: "Retry"
 									})]
 								}),
-								!A && !j && k && N.length === 0 && /* @__PURE__ */ h("button", {
+								!P && !F && N && L.length === 0 && /* @__PURE__ */ v("button", {
 									type: "button",
 									className: "mt-1 text-xs text-muted-foreground underline",
-									onClick: () => R("/projects/create-project-page"),
+									onClick: () => H("/projects/create-project-page"),
 									children: "Create a project first"
 								})
 							] }),
-							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 								className: "text-sm font-medium",
 								children: "Priority"
-							}), /* @__PURE__ */ h("select", {
+							}), /* @__PURE__ */ v("select", {
 								className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-								value: D.priority,
-								onChange: (e) => O({
-									...D,
+								value: j.priority,
+								onChange: (e) => M({
+									...j,
 									priority: e.target.value
 								}),
-								children: i.map((e) => /* @__PURE__ */ h("option", {
+								children: a.map((e) => /* @__PURE__ */ v("option", {
 									value: e,
 									children: e.toLowerCase()
 								}, e))
 							})] }),
-							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 								className: "text-sm font-medium",
 								children: "Type"
-							}), /* @__PURE__ */ h("select", {
+							}), /* @__PURE__ */ v("select", {
 								className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-								value: D.type,
-								onChange: (e) => O({
-									...D,
+								value: j.type,
+								onChange: (e) => M({
+									...j,
 									type: e.target.value
 								}),
 								children: [
@@ -243,70 +248,70 @@ function D() {
 									"TASK",
 									"EPIC",
 									"SUB_TASK"
-								].map((e) => /* @__PURE__ */ h("option", {
+								].map((e) => /* @__PURE__ */ v("option", {
 									value: e,
 									children: e.toLowerCase().replace("_", " ")
 								}, e))
 							})] })
 						]
 					}),
-					/* @__PURE__ */ g("div", {
+					/* @__PURE__ */ y("div", {
 						className: "grid grid-cols-3 gap-4",
 						children: [
-							/* @__PURE__ */ g("div", { children: [
-								/* @__PURE__ */ h("label", {
+							/* @__PURE__ */ y("div", { children: [
+								/* @__PURE__ */ v("label", {
 									htmlFor: "task-story-points",
 									className: "text-sm font-medium",
 									children: "Story Points"
 								}),
-								/* @__PURE__ */ h(S, {
+								/* @__PURE__ */ v(T, {
 									id: "task-story-points",
 									type: "number",
 									min: 0,
 									step: 1,
-									value: D.storyPoints,
-									onChange: (e) => O({
-										...D,
+									value: j.storyPoints,
+									onChange: (e) => M({
+										...j,
 										storyPoints: e.target.value
 									}),
-									"aria-invalid": U.invalid,
+									"aria-invalid": Z.invalid,
 									className: "mt-1"
 								}),
-								U.invalid && /* @__PURE__ */ h("p", {
+								Z.invalid && /* @__PURE__ */ v("p", {
 									role: "alert",
 									className: "mt-1 text-xs text-destructive",
 									children: "Story points must be a whole number, 0 or more."
 								})
 							] }),
-							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 								htmlFor: "task-milestone",
 								className: "text-sm font-medium",
 								children: "Milestone"
-							}), /* @__PURE__ */ h(s, {
+							}), /* @__PURE__ */ v(l, {
 								id: "task-milestone",
-								projectId: P,
-								value: D.milestoneId,
-								onChange: (e) => O({
-									...D,
+								projectId: R,
+								value: j.milestoneId,
+								onChange: (e) => M({
+									...j,
 									milestoneId: e
 								})
 							})] }),
-							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 								htmlFor: "task-sprint",
 								className: "text-sm font-medium",
 								children: "Sprint"
-							}), /* @__PURE__ */ g("select", {
+							}), /* @__PURE__ */ y("select", {
 								id: "task-sprint",
 								className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-								value: D.sprintId,
-								onChange: (e) => O({
-									...D,
+								value: j.sprintId,
+								onChange: (e) => M({
+									...j,
 									sprintId: e.target.value
 								}),
-								children: [/* @__PURE__ */ h("option", {
+								children: [/* @__PURE__ */ v("option", {
 									value: "",
-									children: I && !F ? "Loading sprints…" : "No sprint"
-								}), L.map((e) => /* @__PURE__ */ g("option", {
+									children: B && !z ? "Loading sprints…" : "No sprint"
+								}), V.map((e) => /* @__PURE__ */ y("option", {
 									value: e.id,
 									children: [
 										e.name,
@@ -316,86 +321,95 @@ function D() {
 									]
 								}, e.id))]
 							})] }),
-							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 								className: "text-sm font-medium",
 								children: "Due Date"
-							}), /* @__PURE__ */ h(S, {
+							}), /* @__PURE__ */ v(T, {
 								type: "date",
-								value: D.dueDate,
-								onChange: (e) => O({
-									...D,
+								value: j.dueDate,
+								onChange: (e) => M({
+									...j,
 									dueDate: e.target.value
 								}),
 								className: "mt-1"
 							})] })
 						]
 					}),
-					/* @__PURE__ */ h("div", {
+					/* @__PURE__ */ v("div", {
 						className: "grid grid-cols-3 gap-4",
-						children: /* @__PURE__ */ g("div", { children: [
-							/* @__PURE__ */ h("label", {
+						children: /* @__PURE__ */ y("div", { children: [
+							/* @__PURE__ */ v("label", {
 								htmlFor: "task-estimate-hours",
 								className: "text-sm font-medium",
 								children: "Estimate (hours)"
 							}),
-							/* @__PURE__ */ h(S, {
+							/* @__PURE__ */ v(T, {
 								id: "task-estimate-hours",
 								type: "number",
 								min: 0,
 								step: .25,
-								value: D.estimateHours,
-								onChange: (e) => O({
-									...D,
+								value: j.estimateHours,
+								onChange: (e) => M({
+									...j,
 									estimateHours: e.target.value
 								}),
-								"aria-invalid": W.invalid,
+								"aria-invalid": Q.invalid,
 								"aria-describedby": "task-estimate-hint",
 								className: "mt-1"
 							}),
-							W.invalid ? /* @__PURE__ */ h("p", {
+							Q.invalid ? /* @__PURE__ */ v("p", {
 								role: "alert",
 								className: "mt-1 text-xs text-destructive",
 								children: "The estimate must be a number of hours, 0 or more."
-							}) : /* @__PURE__ */ h("p", {
+							}) : /* @__PURE__ */ v("p", {
 								id: "task-estimate-hint",
 								className: "mt-1 text-xs text-muted-foreground",
 								children: "Used as the task's duration on the critical path."
 							})
 						] })
 					}),
-					/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+					/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 						htmlFor: "task-assignee",
 						className: "text-sm font-medium",
 						children: "Assignee"
-					}), /* @__PURE__ */ h("div", {
+					}), /* @__PURE__ */ v("div", {
 						className: "mt-1",
-						children: /* @__PURE__ */ h(r, {
+						children: /* @__PURE__ */ v(i, {
 							id: "task-assignee",
-							value: D.assigneeId,
-							onChange: (e) => O({
-								...D,
+							value: j.assigneeId,
+							onChange: (e) => M({
+								...j,
 								assigneeId: e
 							})
 						})
 					})] }),
-					/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+					/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
 						className: "text-sm font-medium",
 						children: "Labels (comma-separated)"
-					}), /* @__PURE__ */ h(S, {
-						value: D.labels,
-						onChange: (e) => O({
-							...D,
+					}), /* @__PURE__ */ v(T, {
+						value: j.labels,
+						onChange: (e) => M({
+							...j,
 							labels: e.target.value
 						}),
 						className: "mt-1",
 						placeholder: "backend, search, performance"
-					})] })
+					})] }),
+					/* @__PURE__ */ v(u, {
+						id: "task-required-skills",
+						value: q,
+						onChange: (e) => {
+							J(e), X(null);
+						},
+						disabled: W,
+						serverError: Y
+					})
 				]
 			})] })
 		]
 	});
 }
 //#endregion
-export { D as TasksCreateTaskPagePage };
+export { A as TasksCreateTaskPagePage };
 
 //# sourceMappingURL=TasksCreateTaskPagePage.js.map