@parallelworks/tandem-web 0.142.0 → 0.144.0

package/components/IssueTypes.js

@@ -0,0 +1,318 @@
+import { teamsQuery as e } from "../api/queries.js";
+import { useConfirm as t } from "../lib/confirm.js";
+import { customFieldsQuery as n } from "../lib/customFields.js";
+import { issueTypesQuery as r, useIssueTypeActions as i } from "../lib/issueTypes.js";
+import { AddIcon as a } from "./icons.js";
+import { Button as o, ColorInput as s, ErrorText as c, IconButton as l, Input as u, Select as d, SettingsCard as f, Textarea as p, menuDivider as m, useOpenMenu as h } from "@parallelworks/ui";
+import { useState as g } from "react";
+import { useErrorMessage as _ } from "@parallelworks/problem/react";
+import { useTranslations as v } from "use-intl";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useQuery as x } from "@tanstack/react-query";
+// src/components/IssueTypes.tsx
+function S({ type: e, className: t = "size-4" }) {
+	return e.icon ? /* @__PURE__ */ y("span", {
+		"aria-hidden": !0,
+		className: `inline-flex shrink-0 items-center justify-center ${t}`,
+		children: e.icon
+	}) : /* @__PURE__ */ y("span", {
+		"aria-hidden": !0,
+		className: `inline-flex shrink-0 items-center justify-center rounded-[4px] text-[9px] font-semibold text-white ${t}`,
+		style: { background: e.color || "var(--color-muted-foreground)" },
+		children: e.name.trim().charAt(0).toUpperCase()
+	});
+}
+function C({ workspace: e }) {
+	let t = v("issueTypes"), { data: n = [] } = x(r(e)), [i, s] = g(!1);
+	return /* @__PURE__ */ b(f, {
+		title: t("title"),
+		description: t("description"),
+		action: /* @__PURE__ */ y(o, {
+			size: "sm",
+			icon: /* @__PURE__ */ y(a, {}),
+			onClick: () => s(!0),
+			children: t("add")
+		}),
+		children: [i && /* @__PURE__ */ y("div", {
+			className: "p-2",
+			children: /* @__PURE__ */ y(T, {
+				workspace: e,
+				onDone: () => s(!1)
+			})
+		}), n.length === 0 && !i ? /* @__PURE__ */ y("p", {
+			className: "px-3 py-3 text-sm text-muted-foreground",
+			children: t("none")
+		}) : /* @__PURE__ */ y("ul", {
+			className: "divide-y divide-border",
+			children: n.map((t, r) => /* @__PURE__ */ y(w, {
+				workspace: e,
+				type: t,
+				before: n[r - 1],
+				after: n[r + 1]
+			}, t.id))
+		})]
+	});
+}
+function w({ workspace: n, type: r, before: a, after: o }) {
+	let s = v("issueTypes"), c = i(n), u = h(), { confirm: d, dialog: f } = t(), [p, _] = g(!1), { data: C = [] } = x(e(n)), w = (e) => {
+		let t = {
+			...r,
+			...e
+		};
+		return {
+			id: r.id,
+			name: t.name,
+			description: t.description ?? "",
+			icon: t.icon ?? "",
+			color: t.color ?? "",
+			teamIds: t.teamIds,
+			fieldIds: t.fieldIds,
+			requiredFieldIds: t.requiredFieldIds,
+			template: t.template ?? ""
+		};
+	}, E = () => [
+		{
+			label: s("edit"),
+			onClick: () => _(!0)
+		},
+		...a ? [{
+			label: s("moveUp"),
+			onClick: () => c.update.mutate({
+				...w({}),
+				position: a.position - .5
+			})
+		}] : [],
+		...o ? [{
+			label: s("moveDown"),
+			onClick: () => c.update.mutate({
+				...w({}),
+				position: o.position + .5
+			})
+		}] : [],
+		{
+			label: r.archivedAt ? s("restore") : s("archive"),
+			onClick: () => c.update.mutate({
+				...w({}),
+				archived: !r.archivedAt
+			})
+		},
+		m,
+		{
+			label: s("delete"),
+			destructive: !0,
+			onClick: () => d({
+				title: s("deleteTitle", { name: r.name }),
+				description: s("deleteDescription", { count: r.issues }),
+				confirmLabel: s("delete"),
+				onConfirm: () => c.remove.mutateAsync(r.id)
+			})
+		}
+	];
+	if (p) return /* @__PURE__ */ y("li", {
+		className: "p-2",
+		children: /* @__PURE__ */ y(T, {
+			workspace: n,
+			type: r,
+			onDone: () => _(!1)
+		})
+	});
+	let D = r.teamIds.map((e) => C.find((t) => t.id === e)?.name).filter(Boolean).join(", ");
+	return /* @__PURE__ */ b("li", {
+		className: "flex min-h-10 items-center gap-3 px-3 py-1.5",
+		onContextMenu: (e) => u(e, E()),
+		children: [
+			/* @__PURE__ */ y(S, { type: r }),
+			/* @__PURE__ */ b("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ y("p", {
+					className: `truncate text-sm ${r.archivedAt ? "text-muted-foreground" : ""}`,
+					children: r.name
+				}), r.description && /* @__PURE__ */ y("p", {
+					className: "truncate text-xs text-muted-foreground",
+					children: r.description
+				})]
+			}),
+			r.archivedAt && /* @__PURE__ */ y("span", {
+				className: "shrink-0 text-xs text-muted-foreground",
+				children: s("archived")
+			}),
+			/* @__PURE__ */ y("span", {
+				className: "max-w-48 shrink-0 truncate text-xs text-muted-foreground",
+				children: D || s("everyTeam")
+			}),
+			/* @__PURE__ */ y("span", {
+				className: "w-20 shrink-0 text-right text-xs tabular-nums text-muted-foreground",
+				children: s("issues", { count: r.issues })
+			}),
+			/* @__PURE__ */ y(l, {
+				variant: "ghost",
+				size: "sm",
+				label: s("actions", { name: r.name }),
+				icon: /* @__PURE__ */ y("span", {
+					"aria-hidden": !0,
+					children: "⋯"
+				}),
+				onClick: (e) => u(e, E())
+			}),
+			f
+		]
+	});
+}
+function T({ workspace: t, type: r, onDone: a }) {
+	let l = v("issueTypes"), f = v("common"), m = _(), h = i(t), { data: S = [] } = x(e(t)), { data: C = [] } = x(n(t)), w = C.filter((e) => e.target === "issue" && !e.archivedAt), [T, E] = g(r?.name ?? ""), [D, O] = g(r?.description ?? ""), [k, A] = g(r?.icon ?? ""), [j, M] = g(r?.color || "#6e7781"), [N, P] = g(r?.teamIds ?? []), [F, I] = g(r?.fieldIds ?? []), [L, R] = g(r?.requiredFieldIds ?? []), [z, B] = g(r?.template ?? ""), V = r ? h.update : h.create, H = F.length > 0 ? w.filter((e) => F.includes(e.id)) : w, U = (e) => {
+		e.preventDefault();
+		let t = {
+			name: T,
+			description: D,
+			icon: k,
+			color: j,
+			teamIds: N,
+			fieldIds: F,
+			requiredFieldIds: L.filter((e) => H.some((t) => t.id === e)),
+			template: z
+		};
+		r ? h.update.mutate({
+			id: r.id,
+			...t
+		}, { onSuccess: a }) : h.create.mutate(t, { onSuccess: a });
+	}, W = "block text-xs font-medium text-muted-foreground";
+	return /* @__PURE__ */ b("form", {
+		onSubmit: U,
+		className: "space-y-3 rounded-md border border-border p-3 text-sm",
+		children: [
+			/* @__PURE__ */ b("div", {
+				className: "grid gap-3 sm:grid-cols-[1fr_8rem_8rem]",
+				children: [
+					/* @__PURE__ */ b("label", {
+						className: W,
+						children: [l("name"), /* @__PURE__ */ y(u, {
+							value: T,
+							onChange: (e) => E(e.target.value),
+							required: !0,
+							maxLength: 40,
+							className: "mt-1",
+							autoFocus: !0
+						})]
+					}),
+					/* @__PURE__ */ b("label", {
+						className: W,
+						children: [l("icon"), /* @__PURE__ */ y(u, {
+							value: k,
+							onChange: (e) => A(e.target.value),
+							maxLength: 8,
+							placeholder: l("iconHint"),
+							className: "mt-1"
+						})]
+					}),
+					/* @__PURE__ */ b("div", {
+						className: W,
+						children: [l("color"), /* @__PURE__ */ y("div", {
+							className: "mt-1",
+							children: /* @__PURE__ */ y(s, {
+								value: j,
+								onValueChange: M,
+								"aria-label": l("color")
+							})
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ b("label", {
+				className: W,
+				children: [l("descriptionLabel"), /* @__PURE__ */ y(u, {
+					value: D,
+					onChange: (e) => O(e.target.value),
+					maxLength: 500,
+					className: "mt-1"
+				})]
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "grid gap-3 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ b("div", {
+						className: W,
+						children: [l("teams"), /* @__PURE__ */ y("div", {
+							className: "mt-1",
+							children: /* @__PURE__ */ y(d, {
+								multiple: !0,
+								value: N,
+								items: S.filter((e) => !e.archivedAt).map((e) => ({
+									value: e.id,
+									label: e.name
+								})),
+								onValueChange: P,
+								placeholder: l("everyTeam"),
+								"aria-label": l("teams"),
+								width: "fill"
+							})
+						})]
+					}),
+					/* @__PURE__ */ b("div", {
+						className: W,
+						children: [l("fields"), /* @__PURE__ */ y("div", {
+							className: "mt-1",
+							children: /* @__PURE__ */ y(d, {
+								multiple: !0,
+								value: F,
+								items: w.map((e) => ({
+									value: e.id,
+									label: e.name
+								})),
+								onValueChange: I,
+								placeholder: l("allFields"),
+								"aria-label": l("fields"),
+								width: "fill"
+							})
+						})]
+					}),
+					/* @__PURE__ */ b("div", {
+						className: W,
+						children: [l("required"), /* @__PURE__ */ y("div", {
+							className: "mt-1",
+							children: /* @__PURE__ */ y(d, {
+								multiple: !0,
+								value: L.filter((e) => H.some((t) => t.id === e)),
+								items: H.map((e) => ({
+									value: e.id,
+									label: e.name
+								})),
+								onValueChange: R,
+								placeholder: l("noneRequired"),
+								"aria-label": l("required"),
+								width: "fill"
+							})
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ b("label", {
+				className: W,
+				children: [l("template"), /* @__PURE__ */ y(p, {
+					value: z,
+					onChange: (e) => B(e.target.value),
+					rows: 3,
+					placeholder: l("templateHint"),
+					className: "mt-1 font-mono"
+				})]
+			}),
+			V.error && /* @__PURE__ */ y(c, { children: m(V.error) }),
+			/* @__PURE__ */ b("div", {
+				className: "flex justify-end gap-2",
+				children: [/* @__PURE__ */ y(o, {
+					size: "sm",
+					variant: "ghost",
+					onClick: a,
+					children: f("cancel")
+				}), /* @__PURE__ */ y(o, {
+					type: "submit",
+					size: "sm",
+					variant: "primary",
+					loading: V.isPending,
+					disabled: !T.trim(),
+					children: r ? f("save") : l("add")
+				})]
+			})
+		]
+	});
+}
+export { C as IssueTypeSettings, S as TypeIcon };