{(prop.options || []).map(o => {
const on = arr.includes(o.id);
return toggle(o.id)} style={{ cursor: "pointer", height: 24, padding: "0 9px", borderRadius: 99, fontSize: 11.5, fontWeight: 700, display: "inline-flex", alignItems: "center",
color: on ? "#fff" : (o.color || "var(--ink-3)"), background: on ? (o.color || "var(--accent)") : ((o.color || "#6b7280") + "1c") }}>{o.label};
})}
;
}
return null;
}
// icon picker — choose a Lucide glyph for a property (uses window.PROP_ICON_GROUPS / window.PropIcon)
function IconPicker({ value, onChange }) {
const [open, setOpen] = React.useState(false);
const [q, setQ] = React.useState("");
const [pos, setPos] = React.useState({ top: 0, left: 0, maxH: 432, up: false });
const ref = React.useRef(null);
const PW = 392, GAP = 6, MGN = 10;
const place = React.useCallback(() => {
const el = ref.current; if (!el) return;
const r = el.getBoundingClientRect();
const below = window.innerHeight - r.bottom - MGN;
const above = r.top - MGN;
const up = below < 300 && above > below;
const maxH = Math.max(220, Math.min(432, (up ? above : below) - GAP));
const left = Math.max(MGN, Math.min(r.left, window.innerWidth - PW - MGN));
setPos({ top: up ? r.top - GAP : r.bottom + GAP, left, maxH, up });
}, []);
React.useLayoutEffect(() => {
if (!open) return;
place();
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
const onMove = () => place();
document.addEventListener("mousedown", h);
window.addEventListener("scroll", onMove, true);
window.addEventListener("resize", onMove);
return () => {
document.removeEventListener("mousedown", h);
window.removeEventListener("scroll", onMove, true);
window.removeEventListener("resize", onMove);
};
}, [open, place]);
const groups = window.PROP_ICON_GROUPS || [];
const query = q.trim().toLowerCase();
const pick = (name) => { onChange(name); setOpen(false); setQ(""); };
const hasResults = groups.some(g => g.names.some(n => !query || n.includes(query)));
return (
setName(e.target.value)} placeholder="VD: Gói thầu, Hạng mục, Ưu tiên…" />
{PROP_TYPES.map(t => {
const Ico = Icon[t.icon] || Icon.doc;
const on = type === t.type;
const c = PROP_TYPE_COLORS[t.type] || "#6b7280";
return (
);
})}
{needsOptions && (
{options.map((o, i) => (
{PROP_COLORS.map(c => setOpt(i, { color: c })} style={{ width: 15, height: 15, borderRadius: 99, background: c, cursor: "pointer", outline: o.color === c ? "2px solid var(--ink)" : "none", outlineOffset: 1 }} />)}
setOpt(i, { label: e.target.value })} placeholder="Nhãn" />
))}
)}
{err &&
{err}
}
);
}
function PropertyManager({ properties, onClose, onChanged }) {
const [name, setName] = React.useState("");
const [type, setType] = React.useState("text");
const [options, setOptions] = React.useState([]);
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState("");
const needsOptions = OPT_TYPES.includes(type);
const addOpt = () => setOptions(o => [...o, { id: "o" + Date.now().toString(36) + o.length, label: "", color: PROP_COLORS[o.length % PROP_COLORS.length] }]);
const setOpt = (i, patch) => setOptions(o => o.map((x, j) => j === i ? { ...x, ...patch } : x));
const delOpt = (i) => setOptions(o => o.filter((_, j) => j !== i));
const create = async () => {
if (!name.trim()) { setErr("Nhập tên thuộc tính"); return; }
setBusy(true); setErr("");
try {
await cdeData.createProperty({ name: name.trim(), type, options: needsOptions ? options.filter(o => o.label.trim()) : null });
setName(""); setType("text"); setOptions([]); onChanged && onChanged();
} catch (e) { setErr(e.message || "Tạo thất bại (cần quyền admin)"); }
finally { setBusy(false); }
};
const remove = async (p) => {
if (!window.confirm(`Xoá thuộc tính "${p.name}"? Dữ liệu đã nhập sẽ bị ẩn.`)) return;
try { await cdeData.deleteProperty(p.id); onChanged && onChanged(); }
catch (e) { window.alert("Xoá thất bại: " + e.message); }
};
const inp = { width: "100%", height: 38, padding: "0 10px", borderRadius: 8, border: "1px solid var(--line)", background: "var(--surface)", color: "var(--ink)", font: "inherit", fontSize: 13.5, fontWeight: 600, outline: "none" };
const lbl = { display: "block", fontSize: 11.5, fontWeight: 700, color: "var(--ink-3)", margin: "12px 0 6px" };
return (
e.stopPropagation()} className="card" style={{ width: 480, maxHeight: "90vh", overflowY: "auto", padding: 22, boxShadow: "var(--shadow-lg)" }}>
Thuộc tính tài liệu
Chỉ quản trị viên định nghĩa được
{properties.length > 0 && (
{properties.map(p => {
const meta = PROP_TYPES.find(t => t.type === p.type) || {};
const Ico = Icon[meta.icon] || Icon.doc;
return (
{p.name}
{meta.label || p.type}
);
})}
)}
Thêm thuộc tính
setName(e.target.value)} placeholder="VD: Gói thầu" />
{PROP_TYPES.map(t => {
const Ico = Icon[t.icon] || Icon.doc;
const on = type === t.type;
return (
);
})}
{needsOptions && (
{options.map((o, i) => (
{PROP_COLORS.map(c => setOpt(i, { color: c })} style={{ width: 14, height: 14, borderRadius: 4, background: c, cursor: "pointer", outline: o.color === c ? "2px solid var(--ink)" : "none" }} />)}
setOpt(i, { label: e.target.value })} placeholder="Nhãn" />
))}
)}
{err &&
{err}
}
);
}
window.PROP_TYPES = PROP_TYPES; window.PROP_COLORS = PROP_COLORS; window.OPT_TYPES = OPT_TYPES; window.PROP_TYPE_COLORS = PROP_TYPE_COLORS;
window.PropCell = PropCell; window.PropEditor = PropEditor; window.PropChip = Chip;
window.PropertyForm = PropertyForm; window.PropertyManager = PropertyManager;
window.IconPicker = IconPicker;