@parallelworks/tandem-web 0.142.0 → 0.143.0

package/components/IssueRow.js

@@ -1,135 +1,152 @@
 import { Link as e } from "../lib/router.js";
-import { PriorityIcon as t, ProjectIcon as n, StatusIcon as r, UsersIcon as i } from "./icons.js";
-import { useTime as a } from "../lib/time.js";
-import { DueDate as o, SlaBadge as s, estimateShort as c } from "./Planning.js";
-import { usePeople as l } from "../lib/people.js";
-import { PersonHoverCard as u } from "./PersonHoverCard.js";
-import { actorAvatar as d } from "../lib/avatar.js";
-import { Avatar as f, AvatarGroup as p, Checkbox as m, Tooltip as h, useRelativeTime as g } from "@parallelworks/ui";
-import { useFormatter as _, useTranslations as v } from "use-intl";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { hasValue as t } from "../lib/customFields.js";
+import { PriorityIcon as n, ProjectIcon as r, StatusIcon as i, UsersIcon as a } from "./icons.js";
+import { TypeIcon as o } from "./IssueTypes.js";
+import { useTime as s } from "../lib/time.js";
+import { DueDate as c, SlaBadge as l, estimateShort as u } from "./Planning.js";
+import { usePeople as d } from "../lib/people.js";
+import { PersonHoverCard as f } from "./PersonHoverCard.js";
+import { useFieldText as p } from "./CustomFields.js";
+import { actorAvatar as m } from "../lib/avatar.js";
+import { Avatar as h, AvatarGroup as g, Checkbox as _, Tooltip as v, useRelativeTime as y } from "@parallelworks/ui";
+import { useFormatter as b, useTranslations as x } from "use-intl";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
 // src/components/IssueRow.tsx
-function x({ issue: x, team: S, workspace: C, selected: w = !1, picked: T = !1, viewers: E = [], onPick: D, onHover: O, onClick: k, onContextMenu: A }) {
-	let j = v("issues"), M = _(), N = a(), P = g(x.updatedAt, "compact"), { person: F, nameOf: I, avatarOf: L } = l(C);
-	return /* @__PURE__ */ b("li", {
-		id: `row-${x.id}`,
-		onMouseEnter: O,
-		className: `group/row relative flex items-center border-b border-border/60 ${T ? "bg-human-soft" : w ? "bg-muted/70" : ""}`,
+function w({ issue: w, team: T, workspace: E, selected: D = !1, picked: O = !1, viewers: k = [], onPick: A, onHover: j, onClick: M, onContextMenu: N, fields: P = [] }) {
+	let F = x("issues"), I = b(), L = s(), R = y(w.updatedAt, "compact"), { person: z, nameOf: B, avatarOf: V } = d(E), H = p(E);
+	return /* @__PURE__ */ C("li", {
+		id: `row-${w.id}`,
+		onMouseEnter: j,
+		className: `group/row relative flex items-center border-b border-border/60 ${O ? "bg-human-soft" : D ? "bg-muted/70" : ""}`,
 		children: [
-			T && /* @__PURE__ */ y("span", {
+			O && /* @__PURE__ */ S("span", {
 				className: "absolute inset-y-0 left-0 w-0.5 bg-human",
 				"aria-hidden": "true"
 			}),
-			D && /* @__PURE__ */ y("span", {
-				className: `flex shrink-0 pl-4 transition-opacity duration-150 md:pl-5 ${T ? "" : "opacity-0 group-hover/row:opacity-100 has-[:focus-visible]:opacity-100 max-md:opacity-100"}`,
-				children: /* @__PURE__ */ y(h, {
-					content: j("selectIssue"),
+			A && /* @__PURE__ */ S("span", {
+				className: `flex shrink-0 pl-4 transition-opacity duration-150 md:pl-5 ${O ? "" : "opacity-0 group-hover/row:opacity-100 has-[:focus-visible]:opacity-100 max-md:opacity-100"}`,
+				children: /* @__PURE__ */ S(v, {
+					content: F("selectIssue"),
 					shortcut: "X",
-					children: /* @__PURE__ */ y(m, {
-						"aria-label": j("select", { identifier: x.identifier }),
-						checked: T,
+					children: /* @__PURE__ */ S(_, {
+						"aria-label": F("select", { identifier: w.identifier }),
+						checked: O,
 						onClick: (e) => {
-							e.preventDefault(), D(e.shiftKey);
+							e.preventDefault(), A(e.shiftKey);
 						}
 					})
 				})
 			}),
-			/* @__PURE__ */ b(e, {
+			/* @__PURE__ */ C(e, {
 				to: "/$workspace/issues/$identifier",
 				params: {
-					workspace: C,
-					identifier: x.identifier
+					workspace: E,
+					identifier: w.identifier
 				},
-				onClick: k,
-				onContextMenu: A,
-				className: `flex h-10 min-w-0 flex-1 items-center gap-3 pr-5 text-sm ${D ? "pl-3" : "pl-5"}`,
+				onClick: M,
+				onContextMenu: N,
+				className: `flex h-10 min-w-0 flex-1 items-center gap-3 pr-5 text-sm ${A ? "pl-3" : "pl-5"}`,
 				children: [
-					/* @__PURE__ */ y(t, { priority: x.priority }),
-					/* @__PURE__ */ y("span", {
-						className: "w-16 shrink-0 text-xs text-muted-foreground",
-						children: x.identifier
+					/* @__PURE__ */ S(n, { priority: w.priority }),
+					/* @__PURE__ */ C("span", {
+						className: `flex shrink-0 items-center gap-1 text-xs text-muted-foreground ${w.type ? "w-20" : "w-16"}`,
+						children: [w.type && /* @__PURE__ */ S(v, {
+							content: w.type.name,
+							describesAnchor: !0,
+							children: /* @__PURE__ */ S(o, {
+								type: w.type,
+								className: "size-3.5"
+							})
+						}), w.identifier]
 					}),
-					/* @__PURE__ */ y(r, { category: x.status.category }),
-					/* @__PURE__ */ y("span", {
+					/* @__PURE__ */ S(i, { category: w.status.category }),
+					/* @__PURE__ */ S("span", {
 						className: "min-w-0 flex-1 truncate",
-						children: x.title
+						children: w.title
 					}),
-					!!x.requests && /* @__PURE__ */ y(h, {
-						content: j("requestCount", { count: x.requests }),
-						children: /* @__PURE__ */ b("span", {
+					!!w.requests && /* @__PURE__ */ S(v, {
+						content: F("requestCount", { count: w.requests }),
+						children: /* @__PURE__ */ C("span", {
 							className: "inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground tabular-nums",
-							children: [/* @__PURE__ */ y(i, { className: "size-3" }), x.requests]
+							children: [/* @__PURE__ */ S(a, { className: "size-3" }), w.requests]
 						})
 					}),
-					x.project && /* @__PURE__ */ b("span", {
+					w.project && /* @__PURE__ */ C("span", {
 						className: "hidden max-w-40 shrink-0 items-center gap-1 truncate text-xs text-muted-foreground lg:inline-flex",
-						children: [/* @__PURE__ */ y(n, { className: "size-3 shrink-0" }), /* @__PURE__ */ y("span", {
+						children: [/* @__PURE__ */ S(r, { className: "size-3 shrink-0" }), /* @__PURE__ */ S("span", {
 							className: "truncate",
-							children: x.project.name
+							children: w.project.name
 						})]
 					}),
-					x.dueDate && /* @__PURE__ */ y(o, {
-						date: x.dueDate,
-						closed: x.status.category === "completed" || x.status.category === "canceled"
+					w.dueDate && /* @__PURE__ */ S(c, {
+						date: w.dueDate,
+						closed: w.status.category === "completed" || w.status.category === "canceled"
 					}),
-					/* @__PURE__ */ y(s, {
-						issue: x,
-						team: S
+					/* @__PURE__ */ S(l, {
+						issue: w,
+						team: T
 					}),
-					!!x.estimate && /* @__PURE__ */ y(h, {
-						content: j("estimate", { points: x.estimate }),
+					!!w.estimate && /* @__PURE__ */ S(v, {
+						content: F("estimate", { points: w.estimate }),
 						describesAnchor: !0,
-						children: /* @__PURE__ */ y("span", {
+						children: /* @__PURE__ */ S("span", {
 							className: "hidden h-5 min-w-5 shrink-0 items-center justify-center rounded border border-border px-1 text-[11px] text-muted-foreground tabular-nums sm:inline-flex",
-							children: c(x.estimate, S?.estimateScale)
+							children: u(w.estimate, T?.estimateScale)
 						})
 					}),
-					/* @__PURE__ */ y("span", {
+					/* @__PURE__ */ C("span", {
 						className: "hidden shrink-0 gap-1 md:flex",
-						children: x.labels.map((e) => /* @__PURE__ */ b("span", {
+						children: [P.filter((e) => t(w.fields[e.id])).map((e) => /* @__PURE__ */ S(v, {
+							content: e.name,
+							describesAnchor: !0,
+							children: /* @__PURE__ */ S("span", {
+								className: "inline-flex max-w-40 items-center truncate rounded-full border border-border px-2 py-0.5 text-[11px] text-muted-foreground",
+								children: H(e, w.fields[e.id])
+							})
+						}, e.id)), w.labels.map((e) => /* @__PURE__ */ C("span", {
 							className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-[11px]",
-							children: [/* @__PURE__ */ y("span", {
+							children: [/* @__PURE__ */ S("span", {
 								className: "size-2 rounded-full",
 								style: { background: e.color }
 							}), e.name]
-						}, e.id))
+						}, e.id))]
 					}),
-					E.length > 0 && /* @__PURE__ */ y(h, {
-						content: j("viewing", { names: M.list(E.map((e) => F(e).name)) }),
-						children: /* @__PURE__ */ y(p, {
+					k.length > 0 && /* @__PURE__ */ S(v, {
+						content: F("viewing", { names: I.list(k.map((e) => z(e).name)) }),
+						children: /* @__PURE__ */ S(g, {
 							size: "xs",
 							ringColor: "var(--avatar-person-text)",
 							className: "shrink-0",
-							children: E.map((e) => /* @__PURE__ */ y(u, {
-								workspace: C,
+							children: k.map((e) => /* @__PURE__ */ S(f, {
+								workspace: E,
 								handle: e,
-								children: /* @__PURE__ */ y(f, {
-									name: F(e).name,
-									src: F(e).avatarUrl
+								children: /* @__PURE__ */ S(h, {
+									name: z(e).name,
+									src: z(e).avatarUrl
 								})
 							}, e))
 						})
 					}),
-					/* @__PURE__ */ y(p, {
+					/* @__PURE__ */ S(g, {
 						size: "sm",
-						children: x.assignees.map((e) => /* @__PURE__ */ y(u, {
-							workspace: C,
+						children: w.assignees.map((e) => /* @__PURE__ */ S(f, {
+							workspace: E,
 							kind: e.kind,
 							handle: e.handle,
-							children: /* @__PURE__ */ y(f, {
-								...d(e.kind),
-								name: I(e.kind, e.handle),
-								src: L(e.kind, e.handle),
+							children: /* @__PURE__ */ S(h, {
+								...m(e.kind),
+								name: B(e.kind, e.handle),
+								src: V(e.kind, e.handle),
 								tooltip: e.kind !== "user"
 							})
 						}, `${e.kind}:${e.handle}`))
 					}),
-					/* @__PURE__ */ y(h, {
-						content: j("updated", { time: N.full(x.updatedAt) }),
-						children: /* @__PURE__ */ y("time", {
-							dateTime: x.updatedAt,
+					/* @__PURE__ */ S(v, {
+						content: F("updated", { time: L.full(w.updatedAt) }),
+						children: /* @__PURE__ */ S("time", {
+							dateTime: w.updatedAt,
 							className: "min-w-10 shrink-0 whitespace-nowrap text-right text-xs text-muted-foreground",
-							children: P
+							children: R
 						})
 					})
 				]
@@ -137,4 +154,4 @@ function x({ issue: x, team: S, workspace: C, selected: w = !1, picked: T = !1,
 		]
 	});
 }
-export { x as IssueRow };
+export { w as IssueRow };