"use client"; import React, { useState, useRef, useEffect } from "react"; import { FiEdit2, FiTrash2, FiChevronDown } from "react-icons/fi"; import type { ChecklistTemplate, ChecklistTemplateItem, } from "@/lib/api/types/checklist.types"; import { TEMPLATE_TYPE_CONFIG, templateKind, } from "@/lib/api/mappers/checklist.mappers"; interface Props { row: ChecklistTemplate; onEdit: (row: ChecklistTemplate) => void; onDelete: (row: ChecklistTemplate) => void; isDeleting?: boolean; /** Permitted action keys for THIS user on the checklist-templates module */ permittedActions: Set; } // ─── Checklist Items Badge Group ───────────────────────────────────────────── // Direct adaptation of StandardsBadges from MyAuditRow.tsx: first item as an // indigo chip, "+N ▾" opens a fixed-position popover listing every item. function ItemsBadges({ items }: { items: ChecklistTemplateItem[] }) { const [open, setOpen] = useState(false); const [pos, setPos] = useState<{ top: number; left: number } | null>(null); const chipRef = useRef(null); if (!items || items.length === 0) { return —; } const sorted = [...items].sort( (a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0), ); const first = sorted[0]; const rest = sorted.slice(1); const handleToggle = () => { if (!open && chipRef.current) { const rect = chipRef.current.getBoundingClientRect(); setPos({ top: rect.bottom + 4, left: rect.left }); } else { setPos(null); } setOpen(!open); }; useEffect(() => { if (!open) return; const handler = (e: MouseEvent) => { if (chipRef.current && !chipRef.current.contains(e.target as Node)) { setOpen(false); setPos(null); } }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [open]); return (
{first.item_text} {rest.length > 0 && ( <> {open && pos && ( <>
{ setOpen(false); setPos(null); }} style={{ position: "fixed", inset: 0, zIndex: 9998 }} />
All Items ({sorted.length})
{sorted.map((i) => (
{i.item_text}
))}
)} )}
); } // ─── Main Row Component ────────────────────────────────────────────────────── export default function ChecklistTemplateRow({ row, onEdit, onDelete, isDeleting, permittedActions, }: Props) { const typeMeta = TEMPLATE_TYPE_CONFIG[templateKind(row.is_generic)]; // ✅ PERMISSION GATING (mirrors MyAuditRow) // 'edit' permission → user can open the template editor // 'delete' permission → user can delete the template const canEdit = permittedActions.has("edit") || permittedActions.has("view-all"); const canDelete = permittedActions.has("delete"); return ( {/* 1. Template — name on top, type pill below (audit-code cell layout) */}
{row.name} {typeMeta.icon} {typeMeta.label}
{/* 2. Checklist Items — first item chip + "+N" popover */} {/* 3. Actions — gated by permittedActions, MyAuditRow button styling */}
{canEdit && ( )} {canDelete && ( )} {!canEdit && !canDelete && ( — )}
); }