@parallelworks/tandem-web 0.142.0 → 0.144.0

package/components/IssueTemplates.js

@@ -1,239 +1,299 @@
 import { api as e, unwrap as t } from "../api/client.js";
-import { issueTemplatesQuery as n, labelsQuery as r } from "../api/queries.js";
-import { AddIcon as i, PriorityIcon as a, usePriorityNames as o } from "./icons.js";
-import { useConfirm as s } from "../lib/confirm.js";
-import { Editor as c } from "./Editor.js";
-import { Button as l, Combobox as u, DatePicker as d, Input as f, Modal as p, Select as m, SettingsCard as h, menuDivider as g } from "@parallelworks/ui";
-import { useId as _, useState as v } from "react";
-import { useErrorMessage as y } from "@parallelworks/problem/react";
-import { useFormatter as b, useTranslations as x } from "use-intl";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { useMutation as T, useQuery as E, useQueryClient as D } from "@tanstack/react-query";
-import { MoreButton as O } from "@parallelworks/ui/list";
+import { issueTemplatesQuery as n, labelsQuery as r, teamsQuery as i } from "../api/queries.js";
+import { useConfirm as a } from "../lib/confirm.js";
+import { customFieldsQuery as o, fieldsFor as s } from "../lib/customFields.js";
+import { issueTypesQuery as c, typesFor as l } from "../lib/issueTypes.js";
+import { AddIcon as u, PriorityIcon as d, usePriorityNames as f } from "./icons.js";
+import { TypeIcon as p } from "./IssueTypes.js";
+import { PropertyField as m } from "./DocProperties.js";
+import { Editor as h } from "./Editor.js";
+import { Button as g, Combobox as _, DatePicker as v, Input as y, Modal as ee, Select as b, SettingsCard as x, menuDivider as S } from "@parallelworks/ui";
+import { useId as C, useState as w } from "react";
+import { useErrorMessage as T } from "@parallelworks/problem/react";
+import { useFormatter as E, useTranslations as D } from "use-intl";
+import { Fragment as te, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { useMutation as A, useQuery as j, useQueryClient as M } from "@tanstack/react-query";
+import { MoreButton as N } from "@parallelworks/ui/list";
 // src/components/IssueTemplates.tsx
-function k({ workspace: r, teamKey: a, isAdmin: o }) {
-	let c = x("issueTemplates"), u = b(), d = x("common"), f = D(), { data: p = [] } = E(n(r, a)), [m, _] = v(null), { confirm: y, dialog: S } = s(), k = T({
+function P({ workspace: r, teamKey: i, isAdmin: o }) {
+	let s = D("issueTemplates"), c = E(), l = D("common"), d = M(), { data: f = [] } = j(n(r, i)), [p, m] = w(null), { confirm: h, dialog: _ } = a(), v = A({
 		mutationFn: async (n) => t(await e.DELETE("/api/v1/workspaces/{workspace}/teams/{key}/issue-templates/{templateId}", { params: { path: {
 			workspace: r,
-			key: a,
+			key: i,
 			templateId: n
 		} } })),
-		onSettled: () => f.invalidateQueries({ queryKey: n(r, a).queryKey })
+		onSettled: () => d.invalidateQueries({ queryKey: n(r, i).queryKey })
 	});
-	return /* @__PURE__ */ w(h, {
-		title: c("title"),
-		description: c("description"),
-		action: o && /* @__PURE__ */ C(l, {
+	return /* @__PURE__ */ k(x, {
+		title: s("title"),
+		description: s("description"),
+		action: o && /* @__PURE__ */ O(g, {
 			variant: "outline",
 			size: "sm",
-			icon: /* @__PURE__ */ C(i, { className: "size-3.5" }),
-			onClick: () => _("new"),
-			children: c("new")
+			icon: /* @__PURE__ */ O(u, { className: "size-3.5" }),
+			onClick: () => m("new"),
+			children: s("new")
 		}),
 		children: [
-			p.length === 0 ? /* @__PURE__ */ C("p", {
+			f.length === 0 ? /* @__PURE__ */ O("p", {
 				className: "px-4 py-3 text-sm text-muted-foreground",
-				children: c("none")
-			}) : /* @__PURE__ */ C("ul", { children: p.map((e) => /* @__PURE__ */ w("li", {
+				children: s("none")
+			}) : /* @__PURE__ */ O("ul", { children: f.map((e) => /* @__PURE__ */ k("li", {
 				className: "flex items-center gap-3 border-b border-border/60 px-4 py-2.5 last:border-b-0",
-				children: [/* @__PURE__ */ w("span", {
+				children: [/* @__PURE__ */ k("span", {
 					className: "min-w-0 flex-1",
 					children: [
-						/* @__PURE__ */ C("span", {
+						/* @__PURE__ */ O("span", {
 							className: "block truncate text-sm font-medium",
 							children: e.name
 						}),
-						e.title && /* @__PURE__ */ C("span", {
+						e.title && /* @__PURE__ */ O("span", {
 							className: "block truncate text-xs text-muted-foreground",
 							children: e.title
 						}),
-						e.repeat && e.nextAt && /* @__PURE__ */ C("span", {
+						e.repeat && e.nextAt && /* @__PURE__ */ O("span", {
 							className: "block truncate text-xs text-muted-foreground",
-							children: c("schedule", {
-								repeat: c(`repeats.${e.repeat}`),
-								next: u.dateTime(new Date(e.nextAt), { dateStyle: "medium" })
+							children: s("schedule", {
+								repeat: s(`repeats.${e.repeat}`),
+								next: c.dateTime(new Date(e.nextAt), { dateStyle: "medium" })
 							})
 						})
 					]
-				}), o && /* @__PURE__ */ C(O, {
-					label: d("moreActionsFor", { name: e.name }),
+				}), o && /* @__PURE__ */ O(N, {
+					label: l("moreActionsFor", { name: e.name }),
 					items: () => [
 						{
-							label: c("edit"),
-							onClick: () => _(e)
+							label: s("edit"),
+							onClick: () => m(e)
 						},
-						g,
+						S,
 						{
-							label: d("delete"),
+							label: l("delete"),
 							destructive: !0,
-							onClick: () => y({
-								title: c("deleteTitle", { name: e.name }),
-								description: c("deleteDescription"),
-								confirmLabel: d("delete"),
-								onConfirm: () => k.mutateAsync(e.id)
+							onClick: () => h({
+								title: s("deleteTitle", { name: e.name }),
+								description: s("deleteDescription"),
+								confirmLabel: l("delete"),
+								onConfirm: () => v.mutateAsync(e.id)
 							})
 						}
 					]
 				})]
 			}, e.id)) }),
-			m && /* @__PURE__ */ C(A, {
+			p && /* @__PURE__ */ O(F, {
 				workspace: r,
-				teamKey: a,
-				template: m === "new" ? void 0 : m,
-				onClose: () => _(null)
+				teamKey: i,
+				template: p === "new" ? void 0 : p,
+				onClose: () => m(null)
 			}),
-			S
+			_
 		]
 	});
 }
-function A({ workspace: i, teamKey: s, template: h, onClose: g }) {
-	let O = x("issueTemplates"), k = b(), A = x("common"), P = y(), F = o(), I = D(), { data: L = [] } = E(r(i)), [R, z] = v({
-		name: h?.name ?? "",
-		title: h?.title ?? "",
-		body: h?.body ?? "",
-		priority: h?.priority ?? 0,
-		labelIds: h?.labelIds ?? [],
-		...h?.repeat && {
-			repeat: h.repeat,
-			nextAt: h.nextAt,
-			timeZone: h.timeZone
+function F({ workspace: a, teamKey: u, template: x, onClose: S }) {
+	let N = D("issueTemplates"), P = E(), F = D("common"), z = T(), B = f(), V = M(), { data: H = [] } = j(r(a)), [U, W] = w({
+		name: x?.name ?? "",
+		title: x?.title ?? "",
+		body: x?.body ?? "",
+		priority: x?.priority ?? 0,
+		labelIds: x?.labelIds ?? [],
+		fields: x?.fields ?? {},
+		...x?.typeId && { typeId: x.typeId },
+		...x?.repeat && {
+			repeat: x.repeat,
+			nextAt: x.nextAt,
+			timeZone: x.timeZone
 		}
-	}), [B, V] = v(!1), H = _(), U = _(), W = (e) => z((t) => ({
+	}), [ne, re] = w(!1), G = C(), K = C(), q = (e) => W((t) => ({
 		...t,
 		...e
-	})), G = T({
-		mutationFn: async () => t(h ? await e.PUT("/api/v1/workspaces/{workspace}/teams/{key}/issue-templates/{templateId}", {
+	})), J = A({
+		mutationFn: async () => t(x ? await e.PUT("/api/v1/workspaces/{workspace}/teams/{key}/issue-templates/{templateId}", {
 			params: { path: {
-				workspace: i,
-				key: s,
-				templateId: h.id
+				workspace: a,
+				key: u,
+				templateId: x.id
 			} },
-			body: R
+			body: U
 		}) : await e.POST("/api/v1/workspaces/{workspace}/teams/{key}/issue-templates", {
 			params: { path: {
-				workspace: i,
-				key: s
+				workspace: a,
+				key: u
 			} },
-			body: R
+			body: U
 		})),
 		onSuccess: () => {
-			I.invalidateQueries({ queryKey: n(i, s).queryKey }), g();
+			V.invalidateQueries({ queryKey: n(a, u).queryKey }), S();
 		}
-	}), K = L.filter((e) => R.labelIds?.includes(e.id));
-	return /* @__PURE__ */ C(p, {
+	}), Y = H.filter((e) => U.labelIds?.includes(e.id)), { data: X = [] } = j(i(a)), { data: ie } = j(o(a)), Z = s(ie, "issue", X.find((e) => e.key === u)?.id), ae = D("customFields"), Q = D("issueTypes"), { data: oe } = j(c(a)), $ = l(oe, X.find((e) => e.key === u)?.id);
+	return /* @__PURE__ */ O(ee, {
 		open: !0,
-		onClose: g,
+		onClose: S,
 		size: "lg",
-		title: O(h ? "editTitle" : "newTitle"),
-		footer: /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(l, {
+		title: N(x ? "editTitle" : "newTitle"),
+		footer: /* @__PURE__ */ k(te, { children: [/* @__PURE__ */ O(g, {
 			variant: "secondary",
-			onClick: g,
-			children: A("cancel")
-		}), /* @__PURE__ */ C(l, {
+			onClick: S,
+			children: F("cancel")
+		}), /* @__PURE__ */ O(g, {
 			variant: "primary",
-			loading: G.isPending,
-			disabled: !R.name.trim(),
-			onClick: () => G.mutate(),
-			children: h ? A("save") : O("create")
+			loading: J.isPending,
+			disabled: !U.name.trim(),
+			onClick: () => J.mutate(),
+			children: x ? F("save") : N("create")
 		})] }),
-		children: /* @__PURE__ */ w("form", {
+		children: /* @__PURE__ */ k("form", {
 			className: "space-y-3",
 			onSubmit: (e) => {
-				e.preventDefault(), G.mutate();
+				e.preventDefault(), J.mutate();
 			},
 			children: [
-				/* @__PURE__ */ C("label", {
-					htmlFor: H,
+				/* @__PURE__ */ O("label", {
+					htmlFor: G,
 					className: "block text-xs font-medium text-muted-foreground",
-					children: O("name")
+					children: N("name")
 				}),
-				/* @__PURE__ */ C(f, {
-					id: H,
-					value: R.name,
-					onChange: (e) => W({ name: e.target.value }),
-					placeholder: O("namePlaceholder"),
+				/* @__PURE__ */ O(y, {
+					id: G,
+					value: U.name,
+					onChange: (e) => q({ name: e.target.value }),
+					placeholder: N("namePlaceholder"),
 					maxLength: 80,
 					className: "-mt-2",
 					autoFocus: !0
 				}),
-				/* @__PURE__ */ C("label", {
-					htmlFor: U,
+				/* @__PURE__ */ O("label", {
+					htmlFor: K,
 					className: "block text-xs font-medium text-muted-foreground",
-					children: O("issueTitle")
+					children: N("issueTitle")
 				}),
-				/* @__PURE__ */ C(f, {
-					id: U,
-					value: R.title ?? "",
-					onChange: (e) => W({ title: e.target.value }),
-					placeholder: O("issueTitlePlaceholder"),
+				/* @__PURE__ */ O(y, {
+					id: K,
+					value: U.title ?? "",
+					onChange: (e) => q({ title: e.target.value }),
+					placeholder: N("issueTitlePlaceholder"),
 					maxLength: 200,
 					className: "-mt-2"
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ k("div", {
 					className: "text-xs font-medium text-muted-foreground",
-					children: [O("body"), /* @__PURE__ */ C("div", {
+					children: [N("body"), /* @__PURE__ */ O("div", {
 						className: "mt-1 min-h-32 rounded-md border border-border px-3 py-2 text-sm font-normal text-foreground",
-						children: /* @__PURE__ */ C(c, {
-							value: R.body ?? "",
-							onChange: (e) => W({ body: e }),
-							label: O("body"),
+						children: /* @__PURE__ */ O(h, {
+							value: U.body ?? "",
+							onChange: (e) => q({ body: e }),
+							label: N("body"),
 							className: "min-h-28"
 						})
 					})]
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ k("div", {
 					className: "flex flex-wrap items-end gap-3",
-					children: [/* @__PURE__ */ w("div", {
+					children: [/* @__PURE__ */ k("div", {
 						className: "text-xs font-medium text-muted-foreground",
-						children: [O("priority"), /* @__PURE__ */ C("div", {
+						children: [N("priority"), /* @__PURE__ */ O("div", {
 							className: "mt-1",
-							children: /* @__PURE__ */ C(m, {
-								value: String(R.priority ?? 0),
-								items: F.map((e, t) => ({
+							children: /* @__PURE__ */ O(b, {
+								value: String(U.priority ?? 0),
+								items: B.map((e, t) => ({
 									value: String(t),
 									label: e,
-									icon: /* @__PURE__ */ C(a, { priority: t })
+									icon: /* @__PURE__ */ O(d, { priority: t })
 								})),
-								onValueChange: (e) => e !== null && W({ priority: Number(e) }),
-								"aria-label": O("priority")
+								onValueChange: (e) => e !== null && q({ priority: Number(e) }),
+								"aria-label": N("priority")
 							})
 						})]
-					}), /* @__PURE__ */ w("div", {
+					}), /* @__PURE__ */ k("div", {
 						className: "text-xs font-medium text-muted-foreground",
-						children: [O("labels"), /* @__PURE__ */ C("div", {
+						children: [N("labels"), /* @__PURE__ */ O("div", {
 							className: "mt-1",
-							children: /* @__PURE__ */ C(u, {
-								open: B,
-								onOpenChange: V,
+							children: /* @__PURE__ */ O(_, {
+								open: ne,
+								onOpenChange: re,
 								multiple: !0,
-								items: L.map((e) => ({
+								items: H.map((e) => ({
 									value: e.id,
 									label: e.name,
-									icon: /* @__PURE__ */ C("span", {
+									icon: /* @__PURE__ */ O("span", {
 										className: "size-2.5 rounded-full",
 										style: { background: e.color }
 									})
 								})),
-								value: R.labelIds ?? [],
-								onValueChange: (e) => W({ labelIds: e }),
-								placeholder: O("labels"),
-								trigger: /* @__PURE__ */ C(l, {
+								value: U.labelIds ?? [],
+								onValueChange: (e) => q({ labelIds: e }),
+								placeholder: N("labels"),
+								trigger: /* @__PURE__ */ O(g, {
 									type: "button",
 									className: "font-normal",
-									children: K.length ? K.map((e) => e.name).join(", ") : O("noLabels")
+									children: Y.length ? Y.map((e) => e.name).join(", ") : N("noLabels")
 								})
 							})
 						})]
 					})]
 				}),
-				/* @__PURE__ */ w("div", {
+				$.length > 0 && /* @__PURE__ */ k("div", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: [Q("type"), /* @__PURE__ */ O("div", {
+						className: "mt-1 w-56",
+						children: /* @__PURE__ */ O(b, {
+							value: U.typeId ?? "",
+							items: [{
+								value: "",
+								label: Q("noType")
+							}, ...$.map((e) => ({
+								value: e.id,
+								label: e.name,
+								icon: /* @__PURE__ */ O(p, {
+									type: e,
+									className: "size-3.5"
+								})
+							}))],
+							onValueChange: (e) => {
+								let { typeId: t, ...n } = U;
+								W(e ? {
+									...n,
+									typeId: e
+								} : n);
+							},
+							"aria-label": Q("type"),
+							width: "fill"
+						})
+					})]
+				}),
+				Z.length > 0 && /* @__PURE__ */ k("fieldset", {
+					className: "space-y-0.5 text-sm",
+					children: [/* @__PURE__ */ O("legend", {
+						className: "mb-1 text-xs font-medium text-muted-foreground",
+						children: ae("title")
+					}), Z.map((e) => /* @__PURE__ */ k("div", {
+						className: "flex min-h-8 items-center gap-2",
+						children: [/* @__PURE__ */ O("span", {
+							className: "w-36 shrink-0 truncate text-muted-foreground",
+							children: e.name
+						}), /* @__PURE__ */ O("div", {
+							className: "min-w-0 flex-1",
+							children: /* @__PURE__ */ O(m, {
+								workspace: a,
+								property: e,
+								value: U.fields?.[e.id],
+								editable: !0,
+								onChange: (t) => q({ fields: {
+									...U.fields,
+									[e.id]: t
+								} })
+							})
+						})]
+					}, e.id))]
+				}),
+				/* @__PURE__ */ k("div", {
 					className: "flex flex-wrap items-end gap-3",
-					children: [/* @__PURE__ */ w("div", {
+					children: [/* @__PURE__ */ k("div", {
 						className: "text-xs font-medium text-muted-foreground",
-						children: [O("repeat"), /* @__PURE__ */ C("div", {
+						children: [N("repeat"), /* @__PURE__ */ O("div", {
 							className: "mt-1",
-							children: /* @__PURE__ */ C(m, {
-								value: R.repeat ?? "",
+							children: /* @__PURE__ */ O(b, {
+								value: U.repeat ?? "",
 								items: [
 									"",
 									"daily",
@@ -241,60 +301,60 @@ function A({ workspace: i, teamKey: s, template: h, onClose: g }) {
 									"monthly"
 								].map((e) => ({
 									value: e,
-									label: O(`repeats.${e || "never"}`)
+									label: N(`repeats.${e || "never"}`)
 								})),
 								onValueChange: (e) => {
-									if (!e) return z(({ repeat: e, nextAt: t, timeZone: n, ...r }) => r);
-									W({
+									if (!e) return W(({ repeat: e, nextAt: t, timeZone: n, ...r }) => r);
+									q({
 										repeat: e,
-										nextAt: R.nextAt ?? N(new Date(Date.now() + 864e5)),
-										timeZone: R.timeZone ?? j()
+										nextAt: U.nextAt ?? R(new Date(Date.now() + 864e5)),
+										timeZone: U.timeZone ?? I()
 									});
 								},
-								"aria-label": O("repeat")
+								"aria-label": N("repeat")
 							})
 						})]
-					}), R.repeat && /* @__PURE__ */ w("div", {
+					}), U.repeat && /* @__PURE__ */ k("div", {
 						className: "text-xs font-medium text-muted-foreground",
-						children: [O("firstOn"), /* @__PURE__ */ C("div", {
+						children: [N("firstOn"), /* @__PURE__ */ O("div", {
 							className: "mt-1",
-							children: /* @__PURE__ */ C(d, {
-								value: R.nextAt ? M(R.nextAt) : "",
-								onValueChange: (e) => e && W({
-									nextAt: N(/* @__PURE__ */ new Date(`${e}T00:00`)),
-									timeZone: j()
+							children: /* @__PURE__ */ O(v, {
+								value: U.nextAt ? L(U.nextAt) : "",
+								onValueChange: (e) => e && q({
+									nextAt: R(/* @__PURE__ */ new Date(`${e}T00:00`)),
+									timeZone: I()
 								}),
-								"aria-label": O("firstOn"),
-								trigger: /* @__PURE__ */ C(l, {
+								"aria-label": N("firstOn"),
+								trigger: /* @__PURE__ */ O(g, {
 									type: "button",
 									className: "font-normal",
-									children: R.nextAt ? k.dateTime(new Date(R.nextAt), { dateStyle: "medium" }) : ""
+									children: U.nextAt ? P.dateTime(new Date(U.nextAt), { dateStyle: "medium" }) : ""
 								})
 							})
 						})]
 					})]
 				}),
-				R.repeat && /* @__PURE__ */ C("p", {
+				U.repeat && /* @__PURE__ */ O("p", {
 					className: "text-xs text-muted-foreground",
-					children: O("repeatHelp")
+					children: N("repeatHelp")
 				}),
-				G.error && /* @__PURE__ */ C("p", {
+				J.error && /* @__PURE__ */ O("p", {
 					className: "text-sm text-danger",
-					children: P(G.error)
+					children: z(J.error)
 				})
 			]
 		})
 	});
 }
-function j() {
+function I() {
 	return Intl.DateTimeFormat().resolvedOptions().timeZone;
 }
-function M(e) {
+function L(e) {
 	let t = new Date(e), n = (e) => String(e).padStart(2, "0");
 	return `${t.getFullYear()}-${n(t.getMonth() + 1)}-${n(t.getDate())}`;
 }
-function N(e) {
+function R(e) {
 	let t = new Date(e);
 	return t.setHours(9, 0, 0, 0), t.toISOString();
 }
-export { k as IssueTemplates };
+export { P as IssueTemplates };